/* Pagine della piattaforma (iscrizione, console del titolare, posta di prova, formazione) nello stile del sito commerciale.
   Usa solo i token di SITO-COMMERCIALE/assets/css/tokens.css: vetro, aurora, Bricolage/Geist, ciano. */

body.pl { min-height: 100vh; }
.pl .wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.pl .narrow { max-width: 680px; }
.pl .plsec { padding-block: var(--s-8) var(--s-9); }
.pl .plsec h1 { font: 800 clamp(2rem, 1rem + 3.4vw, 3.4rem) var(--font-display); letter-spacing: -.035em; line-height: 1.04; }
.pl .plk { font: 500 var(--fs-small) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--s-3); }
.pl .sub { color: var(--ink-2); font-size: var(--fs-lead); margin-top: var(--s-3); max-width: 56ch; }
.pl .hint { color: var(--ink-3); font-size: var(--fs-small); margin-top: var(--s-2); }
.pl .mono { font-family: var(--font-mono); font-size: .85rem; }
.pl .muted { color: var(--ink-3); }

/* pannello di vetro */
.pl .card { position: relative; padding: var(--s-6); background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r-panel); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--glass-shadow); }
.pl .card h3 { font: 700 1.125rem var(--font-display); letter-spacing: -.01em; margin-bottom: var(--s-2); }
.pl .card p { color: var(--ink-2); }
.pl .grid { display: grid; gap: var(--s-4); } .pl .g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pl h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.pl h3 { font-family: var(--font-display); }

/* pulsanti: le varianti che il sito commerciale non ha */
.pl .btn:not(.btn--primary) { background: var(--mist); border-color: var(--glass-edge); color: var(--ink); }
.pl .btn:not(.btn--primary):hover { background: var(--mist-strong); color: var(--ink); }
.pl .btn--lg { min-height: 56px; }
.pl .btn--block { width: 100%; }
.pl .btn--danger { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 45%, transparent) !important; }
.pl .btn--sm { min-height: 40px; padding: 0 var(--s-4); }

/* campi */
.pl .form { display: grid; gap: var(--s-5); }
.pl .form label { font-size: var(--fs-small); font-weight: 600; display: block; margin-bottom: var(--s-2); }
.pl .form h3 { margin-top: var(--s-3); }
.pl input[type="text"], .pl input[type="email"], .pl input[type="password"], .pl input[type="url"], .pl input[type="tel"], .pl input[type="number"], .pl input[type="date"], .pl select, .pl textarea {
  width: 100%; min-height: 52px; padding: 0 var(--s-4); background: var(--mist); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-control); font-size: var(--fs-body); transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.pl textarea { min-height: 96px; padding: var(--s-3) var(--s-4); resize: vertical; }
.pl select option { color: #10171C; background: #fff; }
.pl input:hover, .pl select:hover, .pl textarea:hover { border-color: var(--ink-2); }
.pl input:focus-visible, .pl select:focus-visible, .pl textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); background: var(--mist-strong); }
.pl input[type="color"] { width: 64px; height: 52px; padding: 4px; background: var(--mist); border: 1px solid var(--line-strong); border-radius: var(--r-control); }
.pl input[type="file"] { width: 100%; padding: var(--s-3); background: var(--mist); border: 1px dashed var(--line-strong); border-radius: var(--r-control); color: var(--ink-2); }
.pl .row { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; } @media (max-width: 639px) { .pl .row { grid-template-columns: 1fr; } }
.pl .check { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: 500; color: var(--ink-2); font-size: var(--fs-small); }
.pl .check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.pl .slug { display: flex; } .pl .slug input { border-radius: var(--r-control) 0 0 var(--r-control); }
.pl .slug span { display: inline-flex; align-items: center; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-control) var(--r-control) 0; background: var(--mist-strong); color: var(--ink-3); white-space: nowrap; }
.pl .steps { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); } .pl .steps li { flex: 1; height: 6px; border-radius: 9px; background: var(--line); } .pl .steps li.on { background: var(--accent); }

/* messaggi e etichette */
.pl .alert { padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--mist); font-size: var(--fs-small); margin-bottom: var(--s-4); }
.pl .alert--err { border-color: var(--danger); color: var(--danger); } .pl .alert--ok { border-color: var(--success); } .pl .alert--warn { border-color: var(--warn); color: var(--warn); }
.pl .badge { display: inline-block; padding: 3px 12px; border-radius: var(--r-pill); font: 600 .75rem var(--font-sans); background: var(--mist-strong); color: var(--accent); }
.pl .badge--ok { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.pl .badge--warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.pl .badge--err { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.pl .badge--mut { background: var(--mist); color: var(--ink-3); }

/* console del titolare */
.pconsole { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
@media (max-width: 899px) { .pconsole { grid-template-columns: 1fr; } }
.pside { padding: var(--s-5) var(--s-4); position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--glass-strong); border-right: 1px solid var(--glass-edge); }
@media (max-width: 899px) { .pside { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--glass-edge); } }
.pside .wordmark { margin: 0 0 var(--s-5) var(--s-2); }
.pside a.i { display: flex; gap: var(--s-3); align-items: center; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--ink-2); font-weight: 500; text-decoration: none; margin-bottom: 2px; }
.pside a.i:hover { background: var(--mist-strong); color: var(--ink); } .pside a.i.on { background: var(--mist-strong); color: var(--accent); }
.pside .who { margin-top: var(--s-6); padding: var(--s-3) var(--s-4); color: var(--ink-3); font-size: var(--fs-small); } .pside .who strong { color: var(--ink); display: block; }
.pmain { padding: var(--s-6) var(--s-6) var(--s-9); max-width: 1240px; width: 100%; }
@media (max-width: 639px) { .pmain { padding-inline: var(--s-4); } }
.pmain h1 { font: 800 clamp(1.7rem, 1rem + 1.6vw, 2.3rem) var(--font-display); letter-spacing: -.03em; margin-bottom: var(--s-3); }
.pmain > h1 + p { color: var(--ink-2); margin-bottom: var(--s-5); }
.pl .kpis { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--s-5); }
.pl .kpi { padding: var(--s-4) var(--s-5); background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r-control); } .pl .kpi b { display: block; font: 800 1.8rem var(--font-display); letter-spacing: -.03em; } .pl .kpi span { color: var(--ink-3); font-size: var(--fs-small); }
.pl .tw { overflow-x: auto; border: 1px solid var(--glass-edge); border-radius: var(--r-control); background: var(--glass); }
.pl table.t { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pl table.t th { text-align: left; padding: var(--s-3) var(--s-4); color: var(--ink-3); font: 500 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--mist); }
.pl table.t td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); vertical-align: middle; }
.pl table.t tr:hover td { background: var(--mist); }
.pl .flexbar { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--s-4); }
.pl .mods { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.pl .mod { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--glass-edge); border-radius: var(--r-control); background: var(--mist); } .pl .mod small { color: var(--ink-3); display: block; } .pl .mod select { width: auto; min-height: 40px; }
.pl iframe.mailview { width: 100%; height: 520px; border: 1px solid var(--glass-edge); border-radius: var(--r-control); background: #fff; }
.pl .plan-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }