/*
  Enjoy.rent — "Studio".
  Radici: le drum machine del boom bap (pad MPC, display LCD, pannelli scuri) e l'Aqua dei primi 2000.
  Produzione: 2025 — vetro scuro, grana, bagliori, titoli compatti, colori acidi.
  Il giallo Enjoy.rent è il pad principale; tutto il resto lo accompagna.
*/
:root {
  /* Blu elettrico del logo per le azioni; giallo delle ruote come accento. */
  --brand: #2f7bff;
  --brand-hi: #6ea4ff;
  --brand-lo: #1d5fe0;
  /* Blu "pieno" per i fondi con testo bianco sopra: contrasto ≥ 4.5:1 (il --brand da solo arriva a 3.9). */
  --brand-solid: #2466e8;
  --brand-deep: #1a52c4;
  --brand-glow: rgba(47, 123, 255, .45);
  --accent: #ffc72c;
  --accent-glow: rgba(255, 199, 44, .45);

  --bg: #050b1f;
  --panel: rgba(255, 255, 255, .045);
  --panel-solid: #0e1631;
  --panel-hi: rgba(255, 255, 255, .08);
  --edge: rgba(150, 180, 255, .12);
  --edge-hi: rgba(150, 180, 255, .22);

  --text: #eef0f5;
  --muted: #a3b2d1;
  --faint: #7a8bad;
  --ink: #ffffff;

  --blue: #4d8dff;          /* confermata, link */
  --blue-glow: rgba(77, 141, 255, .45);
  --lime: #b8f23a;          /* libera, in corso, ok */
  --lime-glow: rgba(184, 242, 58, .35);
  --amber: #ffb020;         /* avvisi, officina */
  --coral: #ff4d5e;         /* ritardi, bloccata */
  --coral-glow: rgba(255, 77, 94, .45);
  --violet: #9b7bff;        /* chiusa, preparazione */

  --radius: 22px;
  --radius-sm: 12px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --display: Outfit, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --ring: 0 0 0 3px rgba(47, 123, 255, .45);
  color-scheme: dark;
}


/* ---- thecore.rent (gestionale e secondo marketplace): stesso impianto, colori del logotipo D2 ----
   Due temi per chi sta ore al banco. Il testo non è mai bianco puro su nero (alone), gli aloni colorati sono spenti,
   l'arancione pieno è una sola azione per pagina: nelle tabelle i bottoni restano a contorno.
   Tutti i colori di testo stanno a 4,5:1 o più sui loro fondi (test/a11y.test.ts li misura per ogni tema). */
html[data-marchio="thecore"] {
  --brand: #ff4f00;
  --brand-hi: #ff7a1a;
  --brand-lo: #a83400;
  --brand-solid: #c23c00;
  --brand-deep: #8f2c00;
  --brand-glow: transparent;
  --accent: #e8e1d5;
  --accent-glow: transparent;
  --bg: #1c1a15;
  --panel-solid: #26231c;
  --edge: rgba(246, 241, 234, .12);
  --edge-hi: rgba(246, 241, 234, .22);
  --text: #e8e1d5;
  --muted: #b3ab9d;
  --faint: #9c9484;
  --ink: #f1ebe1;
  --blue: #7aa7ff;
  --blue-glow: transparent;
  --lime: #a9c95a;
  --lime-glow: transparent;
  --amber: #e0a040;
  --coral: #ff6f86;
  --coral-glow: rgba(255, 111, 134, .25);
  --violet: #a993ff;
  --ring: 0 0 0 3px rgba(255, 79, 0, .45);
}
html[data-marchio="thecore"] body { background: var(--bg); }
html[data-marchio="thecore"] .badge::before { box-shadow: none; }
html[data-marchio="thecore"] :is(td.time, .fleet-strip strong, .todo-strip strong, h2.text-bad, .quote .num, .stat strong) { text-shadow: none; }
html[data-marchio="thecore"] :is(button.primary, .button.primary) { background: var(--brand-solid); border-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
html[data-marchio="thecore"] :is(button.primary, .button.primary):hover { background: var(--brand-solid); filter: brightness(1.1); }
html[data-marchio="thecore"] table .button.primary { background: transparent; color: var(--ink); border-color: rgba(255, 79, 0, .55); box-shadow: none; }
html[data-marchio="thecore"] :is(.tabs a.active, .tabs summary.active, .pills a.active) { background: rgba(255, 79, 0, .14); color: var(--ink); border-color: transparent; box-shadow: inset 0 -2px 0 var(--brand); }
html[data-marchio="thecore"] .plan-day.today { background: rgba(255, 79, 0, .16); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
html[data-marchio="thecore"] .plan-cell.today { background-color: rgba(255, 79, 0, .04); }
html[data-marchio="thecore"] :is(.topbar, .tabs) { background: rgba(28, 26, 21, .94); }
html[data-marchio="thecore"] :is(.plan-label, .plan-head .plan-label, .cp-panel, .cp-orb-btn) { background: var(--panel-solid); }
html[data-marchio="thecore"] .cp-orb-btn { border-color: var(--edge-hi); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
html[data-marchio="thecore"] .cp-orb { background: radial-gradient(circle at 34% 28%, #fff 0%, #ffd9c2 14%, #ff7a1a 40%, #ff4f00 70%, #7a2400 100%); }
html[data-marchio="thecore"] .plan-bar { box-shadow: none; }
html[data-marchio="thecore"] .plan-cell:hover { background-color: rgba(246, 241, 234, .05); }
html[data-marchio="thecore"] :is(.notice, .infocar, .alert-bar.alert-info, .msg.from-me) { background: rgba(246, 241, 234, .06); }
html[data-marchio="thecore"] .heat { background: rgba(255, 79, 0, calc(var(--h, 0) * .35)); }
html[data-marchio="thecore"] .brand span.tag { border-color: var(--edge-hi); }
html[data-marchio="thecore"] :is(th, dl.facts dt, .plan-day, .fleet-strip span, .fleet-strip a) { font-size: .8rem; letter-spacing: .04em; }

/* Tema chiaro: carta bianco-grigia, predefinito del gestionale (di giorno, al banco, lo schermo non deve essere l'unica cosa scura nella stanza).
   L'arancione pieno porta sempre testo nero; i bottoni con testo bianco usano l'arancione scuro --brand-solid (5,3:1). */
html[data-marchio="thecore"][data-tema="chiaro"] {
  color-scheme: light;
  --bg: #f6f1ea;
  --panel: rgba(255, 253, 249, 1);
  --panel-solid: #fffdf9;
  --panel-hi: rgba(237, 230, 219, 1);
  --edge: rgba(23, 21, 15, .12);
  --edge-hi: rgba(23, 21, 15, .22);
  --text: #1f1b14;
  --muted: #5f5648;
  --faint: #6a6152;
  --ink: #14110b;
  --accent: #b33a00;
  --brand-hi: #b33a00;
  --blue: #1f5fcf;
  --lime: #3f6b00;
  --amber: #8a5a00;
  --coral: #c0182a;
  --coral-glow: rgba(192, 24, 42, .2);
  --violet: #6342c9;
}
html[data-marchio="thecore"][data-tema="chiaro"] html, html[data-marchio="thecore"][data-tema="chiaro"] { background: var(--bg); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(.topbar, .tabs) { background: rgba(246, 241, 234, .94); border-color: var(--edge); }
html[data-marchio="thecore"][data-tema="chiaro"] .card { background: var(--panel-solid); box-shadow: 0 1px 2px rgba(23, 21, 15, .06), 0 8px 24px rgba(23, 21, 15, .06); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(button, .button) { background: #fff; color: var(--text); border-color: var(--edge-hi); box-shadow: 0 1px 0 rgba(23, 21, 15, .08); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(button, .button):hover { background: #fff; color: var(--ink); border-color: rgba(23, 21, 15, .35); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(button.primary, .button.primary) { background: var(--brand-solid); color: #fff; }
html[data-marchio="thecore"][data-tema="chiaro"] table .button.primary { color: var(--brand-solid); border-color: rgba(194, 60, 0, .6); background: #fff; }
html[data-marchio="thecore"][data-tema="chiaro"] :is(input, select, textarea) { background: #fff; color: var(--ink); border-color: var(--edge-hi); box-shadow: inset 0 1px 2px rgba(23, 21, 15, .06); }
html[data-marchio="thecore"][data-tema="chiaro"] input[type="date"], html[data-marchio="thecore"][data-tema="chiaro"] input[type="datetime-local"] { color-scheme: light; }
html[data-marchio="thecore"][data-tema="chiaro"] tbody tr:hover td { background: rgba(23, 21, 15, .03); }
html[data-marchio="thecore"][data-tema="chiaro"] .plan-day.weekend { background: rgba(23, 21, 15, .04); }
html[data-marchio="thecore"][data-tema="chiaro"] .plan-cell { background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(23, 21, 15, .06) calc(50% - .5px), rgba(23, 21, 15, .06) calc(50% + .5px), transparent calc(50% + .5px)); }
html[data-marchio="thecore"][data-tema="chiaro"] .plan-cell:hover { background-color: rgba(23, 21, 15, .04); }
html[data-marchio="thecore"][data-tema="chiaro"] .plan-bar.chiusa { background: #ddd6f3; color: #3b2d78; }
html[data-marchio="thecore"][data-tema="chiaro"] :is(.plan-bar.in-corso, .legend.in-corso, .gstep.fatto .gnum, .cstep.done .cstep-dot, .nav-free, .flash::before) { color: #fff; }
html[data-marchio="thecore"][data-tema="chiaro"] .plan-day.today { background: rgba(255, 79, 0, .12); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(.notice, .infocar, .alert-bar.alert-info, .msg.from-me, .cp-msg.bot) { background: rgba(23, 21, 15, .05); }
html[data-marchio="thecore"][data-tema="chiaro"] .cp-panel { background: var(--panel-solid); box-shadow: 0 30px 80px rgba(23, 21, 15, .25); }
html[data-marchio="thecore"][data-tema="chiaro"] .cp-orb-btn { background: #fff; box-shadow: 0 6px 20px rgba(23, 21, 15, .18); }
html[data-marchio="thecore"][data-tema="chiaro"] :is(.gallery figure, .doc img, .doc-file, .thumb) { background: #fff; }
html[data-marchio="thecore"][data-tema="chiaro"] .onboarding { border-color: rgba(179, 58, 0, .3); background: linear-gradient(180deg, #fff5ee, #fffdf9); }
html[data-marchio="thecore"][data-tema="chiaro"] .quote { border-color: rgba(179, 58, 0, .3); background: #fff5ee; }
html[data-marchio="thecore"][data-tema="chiaro"] .chart .bar:hover .hit { fill: rgba(23, 21, 15, .05); }
html[data-marchio="thecore"][data-tema="chiaro"] .brand .word { color: var(--ink); }
html[data-marchio="thecore"][data-tema="chiaro"] .brand svg { filter: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh;
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(47, 123, 255, .24), transparent 62%),
    radial-gradient(760px 480px at -6% 12%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 199, 44, .06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: #7aabff; }
h1 {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.045em;
  font-weight: 800; color: var(--ink); margin: 0 0 .75rem;
}
h1 small {
  font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-left: .75rem; vertical-align: middle;
}
h2 {
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 2rem 0 .75rem; display: flex; align-items: center; gap: .6rem;
}
h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge-hi), transparent); }
.small { font-size: .88rem; }
.muted { color: var(--muted); }
.text-bad { color: var(--coral); }
h2.text-bad { color: var(--coral); text-shadow: 0 0 18px var(--coral-glow); }
.right { text-align: right; white-space: nowrap; }
/* Numeri e importi in colonna: a destra, cifre allineate, mai spezzati. */
th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.num { font-family: var(--mono); font-size: .95rem; }
/* Date e ore in tabella: una riga sola. */
td.when { white-space: nowrap; }

/* ---- Barra superiore ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 16px;
  background: rgba(5, 11, 31, .62);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  border-bottom: 1px solid var(--edge);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-size: 1.15rem; }
.brand:hover { color: var(--ink); }
.brand svg { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 0 14px var(--brand-glow)); }
.brand .dot { color: var(--brand); }
.brand .rent { color: var(--brand-hi); }
.brand span.tag {
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-hi); border: 1px solid rgba(47, 123, 255, .45); border-radius: 6px; padding: .12rem .45rem;
}
.who { display: flex; align-items: center; gap: .9rem; color: var(--muted); font-size: .92rem; }
.who form { margin: 0; }

/* ---- Menu ---- */
.tabs {
  position: sticky; top: 55px; z-index: 29;
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  padding: .55rem 16px;
  background: rgba(5, 11, 31, .5);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  backdrop-filter: saturate(160%) blur(22px);
  border-bottom: 1px solid var(--edge);
}
/* Voci e bottone "Altro" hanno la stessa forma: una pillola. */
.tabs a, .tabs summary {
  padding: .42rem .9rem; border-radius: 999px; white-space: nowrap;
  color: var(--text); font-weight: 600; font-size: .95rem; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.tabs a:hover, .tabs summary:hover { background: var(--panel-hi); color: var(--ink); }
.tabs a.active, .tabs summary.active {
  color: #fff; background: linear-gradient(180deg, var(--brand-solid), var(--brand-lo) 60%, var(--brand-deep));
  box-shadow: 0 0 0 1px rgba(47, 123, 255, .6), 0 6px 22px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* Menu "Altro": le sezioni che si aprono di rado, in una tendina invece di una seconda riga. */
.tabs .more { position: relative; }
.tabs summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
.tabs summary::-webkit-details-marker { display: none; }
.tabs summary::after { content: ''; width: .42em; height: .42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.12em) rotate(45deg); transition: transform .15s ease; }
.tabs .more[open] summary::after { transform: translateY(.12em) rotate(-135deg); }
.tabs .more-menu {
  position: absolute; top: calc(100% + .4rem); left: 0; z-index: 40; min-width: 13rem;
  display: grid; gap: .1rem; padding: .4rem;
  background: var(--bg); border: 1px solid var(--edge-hi); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.tabs .more-menu a { border-radius: 9px; padding: .55rem .85rem; font-weight: 500; }
.tabs .count {
  display: inline-block; margin-left: .35rem; min-width: 1.3rem; padding: 0 .38rem; border-radius: 999px;
  background: #d62b3a; color: #fff; font: 700 .72rem/1.3rem var(--mono); text-align: center;
  box-shadow: 0 0 14px var(--coral-glow);
}

main { max-width: 1200px; margin: 0 auto; padding: 1.75rem 16px 5rem; }
.narrow { max-width: 460px; margin: 1.5rem auto; }
.lead { color: var(--muted); margin-top: 0; font-size: 1.02rem; }

/* ---- Pannelli in vetro scuro ---- */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025));
  border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 50px rgba(0, 0, 0, .35);
}
.card + .card { margin-top: 1rem; }
/* Stato vuoto: dice cosa manca e propone la mossa successiva. */
.empty { color: var(--muted); text-align: center; padding: 2.2rem 1rem; font-size: 1rem; display: grid; gap: .8rem; justify-items: center; }
.empty .button, .empty .actions { margin-top: .2rem; }
.empty .actions { justify-content: center; width: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Pulsanti che vanno insieme (← Oggi →, 7/14/30 gg): un solo blocco. */
.btn-group { display: inline-flex; gap: 0; }
.btn-group > .button { border-radius: 0; margin-left: -1px; }
.btn-group > .button:first-child { border-radius: 14px 0 0 14px; margin-left: 0; }
.btn-group > .button:last-child { border-radius: 0 14px 14px 0; }
/* Sotto il titolo della scheda: lo stato a colpo d'occhio, ogni voce porta al suo riquadro. */
.status-strip { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: -.4rem 0 1.1rem; }
.status-strip a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--edge-hi); background: var(--panel); color: var(--text); font-size: .92rem; font-weight: 600; }
.status-strip a:hover { border-color: var(--brand); color: var(--ink); }
.status-strip .badge { margin: 0; }

/* ---- Pulsanti: pad ---- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 42px; padding: .5rem 1.05rem; border-radius: 14px;
  border: 1px solid var(--edge-hi);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  color: var(--ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .45);
  transition: transform .06s ease, box-shadow .12s ease, background .15s ease;
}
button:hover, .button:hover { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)); }
/* Pressione da pad: scende di due pixel e perde l'ombra. */
button:active, .button:active { transform: translateY(2px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Primario: una sola azione principale per pagina o riquadro. Testo bianco su blu pieno (contrasto ≥ 4.5:1). */
button.primary, .button.primary {
  color: #fff; border-color: rgba(110, 164, 255, .7);
  background: linear-gradient(180deg, var(--brand-solid), var(--brand-lo) 55%, var(--brand-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #123c9c, 0 10px 28px var(--brand-glow);
}
button.primary:hover, .button.primary:hover { color: #fff; filter: brightness(1.08); background: linear-gradient(180deg, var(--brand-solid), var(--brand-lo) 55%, var(--brand-deep)); }
button.primary:active, .button.primary:active { box-shadow: inset 0 3px 8px rgba(8, 30, 90, .6), 0 0 18px var(--brand-glow); }
button.link { border: 0; background: none; box-shadow: none; min-height: auto; padding: 0; color: var(--blue); font-weight: 500; }
button.link:hover { background: none; text-decoration: underline; }
button.link:active { transform: none; box-shadow: none; }
/* Pericoloso: rosso, sia come pad sia come link; mai primario. */
button.danger, .button.danger { color: var(--coral); border-color: rgba(255, 77, 94, .45); }
button.danger:not(.link):hover, .button.danger:hover { color: #fff; background: var(--coral); border-color: var(--coral); }
button.link.danger:hover { color: var(--coral); background: none; }
button.small, .button.small { min-height: 34px; padding: .25rem .8rem; font-size: .88rem; border-radius: 11px; }
.danger-zone { margin-top: 1rem; text-align: right; }

/* ---- Moduli ---- */
.form { display: grid; gap: 1rem; }
.form.grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem 1.8rem; }
.form .wide { grid-column: 1 / -1; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .85rem; align-content: start; min-width: 0; }
legend {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: .6rem;
}
label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; color: var(--text); }
label small { color: var(--faint); font-weight: 400; }
label.check { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .8rem;
  border: 1px solid var(--edge-hi); border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-weight: 400;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select option { background: var(--panel-solid); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring), inset 0 1px 3px rgba(0, 0, 0, .4); }
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--brand); box-shadow: none; }
input[type="file"] { padding: .5rem; }
input[type="date"], input[type="datetime-local"] { color-scheme: dark; }
.form-actions { display: flex; justify-content: flex-end; }

.filters { display: flex; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.filters input { flex: 1 1 260px; border-radius: 999px; padding-left: 1.1rem; }
.filters select { flex: 0 0 auto; width: auto; border-radius: 999px; }

/* ---- Tabelle ---- */
.table-wrap { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .8rem .95rem; border-bottom: 1px solid var(--edge); vertical-align: top; }
th { font: 600 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.row-bad td { background: rgba(255, 77, 94, .08) !important; }
.row-warn td { background: rgba(255, 176, 32, .08) !important; }

/* Targa italiana: chiara, spicca sul fondo scuro. */
.plate {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: var(--mono); font-weight: 700; letter-spacing: .07em; font-size: .84rem;
  color: #111; background: linear-gradient(180deg, #ffffff, #e9ecf2); border: 1px solid #c7ccd6; border-radius: 6px;
  padding: .08rem .48rem .08rem 0; overflow: hidden; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.plate::before {
  content: "I"; display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; align-self: stretch; margin: -.08rem 0; background: #1446a0; color: #ffd700;
  font: 700 .62rem/1 -apple-system, sans-serif;
}
a.plate:hover { color: #111; border-color: var(--brand); }

/* ---- Etichette con led ---- */
.badge {
  display: inline-flex; align-items: center; gap: .38rem; padding: .16rem .6rem; border-radius: 999px;
  font: 600 .8rem/1.3 var(--mono); letter-spacing: .03em; margin: 0 .25rem .2rem 0; white-space: nowrap;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent);
}
.badge::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.badge.good { color: var(--lime); }
.badge.warn { color: var(--amber); }
.badge.bad { color: var(--coral); }
.badge.muted { color: var(--faint); }
.badge.neutral { color: var(--blue); }
.badge.grape { color: var(--violet); }

.flash {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
  font-size: 1rem;
  background: rgba(184, 242, 58, .08); color: var(--lime); border: 1px solid rgba(184, 242, 58, .3);
  border-radius: var(--radius-sm); padding: .7rem .95rem; font-weight: 600;
}
.flash::before { content: "✓"; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--lime); color: #111; font-size: .78rem; font-weight: 900; box-shadow: 0 0 14px var(--lime-glow); }
.errors { background: rgba(255, 77, 94, .08); color: var(--coral); border: 1px solid rgba(255, 77, 94, .35); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.1rem; font-size: 1rem; }
.errors strong { color: var(--coral); }
.errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.errors li::first-letter { text-transform: uppercase; }
/* Il campo nominato nell'elenco "Da correggere" si colora (lo fa il copione in layout.tsx). */
label.has-error { color: var(--coral); }
label.has-error :is(input, select, textarea) { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 77, 94, .18); }
/* Riquadri che si aprono solo quando servono (fattura, multe, costi dell'auto…). */
.fold { margin-bottom: 1rem; }
.fold > summary { cursor: pointer; padding: .85rem 1.1rem; border: 1px solid var(--edge-hi); border-radius: var(--radius-sm); background: var(--panel); font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ''; flex: none; width: .5em; height: .5em; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
.fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold > summary:hover { background: var(--panel-hi); color: var(--ink); }
.fold > summary small { font-weight: 400; }
.fold[open] > .card, .fold[open] > form.card { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1px; }
.fold-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem 1.8rem; padding: 1.2rem 1.1rem 0; }
/* Richieste htmx in corso: un testo che compare solo mentre si aspetta. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
/* Listini: una riga modificata e non salvata si vede. */
table.pricing tr.dirty td { background: rgba(255, 196, 0, .08); }
table.pricing tr.dirty button { font-weight: 700; }
/* Campo segnato dal browser come non valido dopo un invio: bordo rosso, come la lista degli errori. */
.form input:user-invalid, .form select:user-invalid, .form textarea:user-invalid { border-color: var(--coral); }
.issues { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.issues.bad { color: var(--coral); }
.issues.warn { color: var(--amber); }

/* ---- Oggi: le cose da fare prima di tutto, poi i numeri della flotta ---- */
.todo-strip { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.25rem; }
.todo-strip a {
  display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .8rem; border-radius: 14px;
  border: 1px solid var(--edge-hi); background: var(--panel); color: var(--text); font-weight: 600; font-size: .95rem;
}
.todo-strip a:hover { border-color: var(--brand); color: var(--ink); }
.todo-strip strong { font: 700 1.3rem/1 var(--mono); color: var(--ink); min-width: 1.4rem; text-align: center; }
.todo-strip a.urgent { border-color: rgba(255, 77, 94, .5); }
.todo-strip a.urgent strong { color: var(--coral); text-shadow: 0 0 14px var(--coral-glow); }
.todo-strip a.warn strong { color: var(--amber); }
/* ---- Pad numerici con display LCD ---- */
.fleet-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.5rem 0 .5rem; }
.fleet-strip a:hover { border-color: var(--brand); color: var(--muted); }
.fleet-strip span, .fleet-strip a {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 3px 0 rgba(0, 0, 0, .5);
  color: var(--muted); font: 600 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.fleet-strip strong { font: 700 2.4rem/1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.fleet-strip > :nth-child(1) strong { color: var(--lime); text-shadow: 0 0 22px var(--lime-glow); }
.fleet-strip > :nth-child(2) strong { color: var(--blue); text-shadow: 0 0 22px var(--blue-glow); }
td.time { width: 5.5rem; font: 700 1.25rem/1 var(--mono); color: var(--accent); text-shadow: 0 0 16px var(--accent-glow); padding-top: 1rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.stat { display: grid; gap: .1rem; padding: 1rem; background: var(--panel); border: 1px solid var(--edge); border-radius: 18px; color: var(--text); }
.stat strong { font: 700 2rem/1 var(--mono); }
.stat span { color: var(--muted); font-size: .85rem; }

.steps { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .55rem; }
.steps li::marker { color: var(--accent); font-family: var(--mono); font-weight: 700; }
.steps li.done { color: var(--faint); text-decoration: line-through; }
.onboarding { border-color: rgba(255, 199, 0, .35); background: radial-gradient(500px 200px at 0% 0%, rgba(255, 199, 0, .14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.onboarding h2 { margin-top: 0; color: var(--accent); }
.summary p { margin: 0 0 .8rem; }
.summary form { margin: 0; }

.pills { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pills a { display: inline-block; padding: .38rem .95rem; border-radius: 999px; border: 1px solid var(--edge-hi); color: var(--text); font-weight: 600; font-size: .9rem; background: var(--panel); }
/* Gli stati arrivano in minuscolo dal dominio ("in corso"): qui l'iniziale si alza da sola. */
.pills a::first-letter { text-transform: uppercase; }
.pills.anchors { margin-top: -.4rem; }
/* Impostazioni → Logo e stampe */
.logo-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.logo-preview { max-height: 80px; max-width: 220px; padding: .5rem; background: #fff; border-radius: var(--radius-sm); }
.logo-preview.empty { display: grid; place-items: center; width: 160px; height: 60px; background: var(--panel-hi); }
@media (max-width: 520px) { .logo-row { grid-template-columns: 1fr; } }
.pills.anchors a { font-size: .85rem; padding: .3rem .8rem; }
.pills a:hover { border-color: var(--brand); color: var(--ink); }
.pills a.active { color: #fff; border-color: var(--brand); background: var(--brand-solid); box-shadow: 0 0 18px var(--brand-glow); }

/* ---- Listini, prenotazioni ---- */
input.num { width: 6.5rem; text-align: right; font-family: var(--mono); }
table.pricing td, table.pricing th { white-space: nowrap; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem 1.5rem; align-items: start; }
ul.plain { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
ul.plain li { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
ul.plain form { margin: 0; }
.inline-form { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: end; }
/* Il preventivo come un display: cifre grandi, giallo. */
.quote { margin-top: 1rem; border-color: rgba(255, 199, 0, .3); background: radial-gradient(420px 160px at 100% 100%, rgba(255, 199, 0, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.quote table td { border: 0; padding: .3rem 0; background: none !important; }
.quote .num { text-align: right; font-family: var(--mono); }
.quote tr.total td { border-top: 1px dashed var(--edge-hi); padding-top: .75rem; font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.quote tr.total td.num { font: 700 1.9rem/1 var(--mono); color: var(--accent); text-shadow: 0 0 22px var(--accent-glow); }
.booking-form .form-actions { margin-top: 1rem; }
dl.facts { display: grid; grid-template-columns: 7.5rem 1fr; gap: .55rem .8rem; margin: 0 0 .8rem; }
dl.facts dt { color: var(--faint); font: 600 .7rem/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
dl.facts dd { margin: 0; }
details summary { cursor: pointer; color: var(--blue); font-weight: 600; }

/* ---- Planning: la timeline di un sequencer ---- */
.planning { padding: 0; overflow-x: auto; }
.plan-row { display: grid; grid-template-columns: 190px 1fr; min-width: calc(190px + var(--days) * 60px); border-bottom: 1px solid var(--edge); }
.plan-row:last-child { border-bottom: 0; }
.plan-label {
  padding: .6rem .8rem; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  position: sticky; left: 0; z-index: 3; border-right: 1px solid var(--edge);
  background: linear-gradient(90deg, #0d1530, #0b1229);
}
.plan-track { position: relative; display: grid; grid-template-columns: repeat(var(--days), 1fr); min-height: 64px; }
.plan-head { position: sticky; top: 104px; z-index: 4; background: var(--panel-solid); }
.plan-head .plan-label { background: #0a1127; }
.plan-head .plan-track { min-height: 0; }
.plan-day { font: 600 .74rem/1.25 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); text-align: center; padding: .6rem 0; border-left: 1px solid var(--edge); }
.plan-day.weekend { color: var(--muted); background: rgba(255, 255, 255, .025); }
.plan-day.today { color: #111; background: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
/* Griglia a step: ogni giorno è uno step, mezzogiorno una tacca. */
.plan-cell { border-left: 1px solid var(--edge); background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .04) calc(50% - .5px), rgba(255, 255, 255, .04) calc(50% + .5px), transparent calc(50% + .5px)); }
.plan-cell:hover { background-color: rgba(47, 123, 255, .1); }
/* Un "+" nella cella libera quando ci si passa sopra o con la tastiera: si capisce che si può prenotare da qui. */
.plan-cell { display: grid; place-items: center; }
.plan-cell::after { content: '+'; font: 700 1.1rem/1 var(--mono); color: var(--brand-hi); opacity: 0; transition: opacity .12s ease; }
.plan-cell:hover::after, .plan-cell:focus-visible::after { opacity: 1; }
/* Elenco per auto: solo sul telefono, al posto della griglia. */
.plan-list { display: none; }
.plan-item header { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.plan-item ul.plain li { padding: .45rem 0; border-top: 1px solid var(--edge); }
.plan-item ul.plain a { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; color: var(--text); }
@media (max-width: 767px) {
  .planning, .plan-hint { display: none; }
  .plan-list { display: grid; gap: .8rem; }
}
.plan-cell.today { background-color: rgba(255, 199, 0, .05); }
.plan-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--coral); z-index: 2; pointer-events: none; box-shadow: 0 0 10px var(--coral), 0 0 24px var(--coral-glow); }
.plan-bar {
  position: absolute; top: 13px; height: 38px; border-radius: 10px; padding: 0 .65rem; z-index: 1;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .82rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), var(--brand-solid);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 6px 18px var(--blue-glow);
  transition: transform .1s ease, filter .1s ease;
}
.plan-bar:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.plan-bar.in-corso { color: #111; background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--lime); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 6px 18px var(--lime-glow); }
.plan-bar.in-corso:hover { color: #111; }
.plan-bar.chiusa { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 55%), #4b3f7a; color: #d9d0ff; box-shadow: none; opacity: .75; }
.plan-bar.late { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 55%), var(--coral); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 6px 22px var(--coral-glow); }
@keyframes pulse { 50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 0 30px var(--coral-glow); } }
.legend { display: inline-block; padding: .08rem .55rem; border-radius: 6px; color: #fff; font: 600 .78rem/1.4 var(--mono); background: var(--brand-solid); }
.legend.in-corso { background: var(--lime); color: #111; }
.legend.chiusa { background: #4b3f7a; color: #d9d0ff; }
.legend.late { background: var(--coral); }

/* ---- Finestra scadenze ---- */
dialog.popup {
  border: 1px solid var(--edge-hi); border-radius: 26px; padding: 1.5rem; color: var(--text);
  width: min(560px, calc(100vw - 32px));
  background: linear-gradient(180deg, rgba(30, 32, 40, .94), rgba(18, 20, 26, .94));
  -webkit-backdrop-filter: saturate(160%) blur(28px);
  backdrop-filter: saturate(160%) blur(28px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 176, 32, .15);
}
dialog.popup::backdrop { background: rgba(5, 6, 8, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.popup h2 { margin-top: 0; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.03em; text-transform: none; color: var(--ink); }
dialog.popup h2::after { display: none; }
dialog.popup h2::before { content: "!"; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--amber); color: #111; font-weight: 900; box-shadow: 0 0 18px rgba(255, 176, 32, .5); }
dialog.popup .actions { justify-content: flex-end; margin-top: .75rem; }

/* ---- Accesso ---- */
.auth-hero { text-align: center; margin: 1.5rem 0; }
/* Il logo si alza una volta all'apertura e poi sta fermo: niente movimento continuo. */
.auth-hero svg { width: 76px; height: 76px; filter: drop-shadow(0 0 30px var(--brand-glow)); animation: float 1.6s ease-in-out 1; }
.auth-hero h1 { margin: 1rem 0 .4rem; }
@keyframes float { 50% { transform: translateY(-4px); } }

/* ---- Telefono ---- */
@media (max-width: 640px) {
  .who span { display: none; }
  th, td { padding: .65rem .7rem; }
  .actions { width: 100%; }
  .actions .button { flex: 1 1 auto; }
  .fleet-strip { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .fleet-strip span, .fleet-strip a { padding: .75rem .7rem; font-size: .6rem; letter-spacing: .1em; }
  .fleet-strip strong { font-size: 1.75rem; }
  .todo-strip a { flex: 1 1 45%; justify-content: flex-start; }
  .status-strip a { flex: 1 1 45%; }
  .page-head .actions .btn-group { flex: 1 1 100%; }
  .btn-group > .button { flex: 1; }

  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: .85rem .95rem; border-bottom: 1px solid var(--edge); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: .14rem 0; background: none !important; }
  table.stack td[data-label] { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; }
  table.stack td[data-label]::before { content: attr(data-label); flex: 0 0 6rem; color: var(--faint); font: 600 .68rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  table.stack td.right { text-align: left; padding-top: .55rem; }
  table.stack td.num { text-align: left; }
  td.time { width: auto; padding-top: .14rem; }
}
/* Tablet in verticale (641–768px): colonne più strette, pulsanti a tutta riga nelle intestazioni. */
@media (max-width: 768px) {
  th, td { padding: .7rem .75rem; }
  .two-col { grid-template-columns: 1fr; }
  .form.grid, .fold-grid { grid-template-columns: 1fr; }
  dl.facts { grid-template-columns: 6.5rem 1fr; }
  .plan-row { grid-template-columns: 150px 1fr; min-width: calc(150px + var(--days) * 52px); }
  .cp-panel { max-height: min(560px, calc(100vh - 120px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

/* ---- Area cliente e check-in ---- */
.wide-narrow { max-width: 720px; }
.eyebrow { font: 600 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.center { text-align: center; }
.button.big, button.big { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.05rem; border-radius: 16px; }
.csteps { list-style: none; padding: .4rem 1.1rem; margin: 0 0 1rem; display: grid; }
.cstep { display: flex; gap: .85rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--edge); }
.cstep:last-child { border-bottom: 0; }
.cstep-dot { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--edge-hi); display: grid; place-items: center; font-weight: 900; font-size: .8rem; margin-top: .1rem; }
.cstep.done .cstep-dot { background: var(--lime); border-color: var(--lime); color: #111; box-shadow: 0 0 14px var(--lime-glow); }
.cstep.soon { opacity: .55; }
.checkin-form { display: grid; gap: 1rem; }
.checkin-form .card + .card { margin-top: 0; }
details.card > summary { font-weight: 700; color: var(--ink); }
details.card[open] > summary { margin-bottom: .75rem; }
.card-title { margin-top: 0; }
.driver { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--edge); }
.driver h3 { margin: 0 0 .5rem; font-size: .98rem; color: var(--ink); }
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; margin-top: 1rem; }
.doc { display: grid; gap: .3rem; color: var(--muted); }
.doc img, .doc-file { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--edge-hi); background: rgba(0, 0, 0, .3); }
.doc-file { display: grid; place-items: center; font: 700 .9rem var(--mono); color: var(--brand); }

/* ---- Contratto ---- */
.contract-card .contract h1 { font-size: 1.5rem; }
.contract-card .contract h2 { margin: 1.4rem 0 .5rem; }
.contract-card .contract table td:first-child { color: var(--muted); width: 34%; }
.contract-card .contract td.num { text-align: right; font-family: var(--mono); }
.contract-card .contract tr.total td { font-weight: 800; color: var(--ink); }
.contract-card .c-kicker { font: 600 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.contract-card .c-terms { white-space: pre-line; color: var(--text); }
.contract-card { max-height: 60vh; overflow-y: auto; }
input.otp { font: 700 1.6rem/1 var(--mono); letter-spacing: .4em; text-align: center; max-width: 14rem; }

/* ---- Enjoy Copilot ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#copilot { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.cp-orb-btn { min-height: 52px; padding: .4rem 1.1rem .4rem .45rem; border-radius: 999px; gap: .6rem;
  background: linear-gradient(180deg, rgba(20, 32, 70, .92), rgba(10, 18, 44, .92)); border: 1px solid rgba(110, 164, 255, .45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 24px rgba(47, 123, 255, .35); color: var(--ink); }
.cp-orb { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #bff3ff 14%, #22d3ee 38%, #2f7bff 70%, #0b1a66 100%);
  box-shadow: 0 0 18px rgba(34, 211, 238, .6), inset -4px -6px 10px rgba(5, 11, 40, .5); }
/* La sfera respira solo quando ci si passa sopra: otto ore al banco senza nulla che pulsa nell'angolo. */
.cp-orb-btn:hover .cp-orb, .cp-orb-btn:focus-visible .cp-orb { animation: cp-breathe 2.4s ease-in-out infinite; }
.cp-orb.small { width: 22px; height: 22px; animation: none; }
@keyframes cp-breathe { 50% { transform: scale(1.07); box-shadow: 0 0 28px rgba(34, 211, 238, .8), inset -4px -6px 10px rgba(5, 11, 40, .5); } }
#copilot.open .cp-orb-label { display: none; }
.cp-panel { width: min(400px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 28, 60, .96), rgba(8, 14, 36, .96)); border: 1px solid var(--edge-hi); border-radius: 22px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; }
.cp-panel[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; border-bottom: 1px solid var(--edge); }
.cp-head strong { flex: 1; font-family: var(--display); letter-spacing: -.01em; }
.cp-close { min-height: 32px; width: 32px; padding: 0; border-radius: 10px; font-size: 1.2rem; }
.cp-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.cp-msg { margin: 0; padding: .6rem .85rem; border-radius: 16px; max-width: 88%; white-space: pre-wrap; line-height: 1.45; font-size: .93rem; }
.cp-msg.bot { align-self: flex-start; background: rgba(255, 255, 255, .07); border: 1px solid var(--edge); border-bottom-left-radius: 6px; }
.cp-msg.me { align-self: flex-end; background: var(--brand-solid); color: #fff; border-bottom-right-radius: 6px; }
.cp-msg.thinking { color: var(--muted); animation: cp-fade 1.2s ease-in-out infinite; }
@keyframes cp-fade { 50% { opacity: .45; } }
.cp-suggest { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 1rem .6rem; }
.cp-chip { min-height: 32px; padding: .25rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.cp-form { display: flex; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--edge); }
.cp-form textarea { min-height: 42px; max-height: 120px; resize: none; border-radius: 14px; }
.cp-send { flex: none; }
.cp-note { margin: 0; padding: 0 1rem .7rem; color: var(--faint); font-size: .72rem; }
@media (max-width: 640px) {
  #copilot { right: 12px; bottom: 12px; left: 12px; align-items: flex-end; }
  .cp-panel { width: 100%; max-height: calc(100vh - 100px); }
  .cp-orb-label { display: none; }
  .cp-orb-btn { padding: .4rem; }
}
@media print { #copilot { display: none; } }

/* ---- Foto delle auto ---- */
.photos { margin-bottom: 1rem; }
.photos-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.photos-head h2 { margin: 0; }
.photo-upload { margin: 0; }
.photo-upload label { cursor: pointer; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-top: 1rem; }
.gallery figure { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--edge); background: rgba(0, 0, 0, .25); }
.gallery figure.cover { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 18px var(--lime-glow); }
.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .6rem; font-size: .82rem; }
.gallery figcaption form { margin: 0; }
td.car-cell { display: flex; align-items: center; gap: .6rem; }
.thumb { width: 56px; height: 40px; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--edge-hi); display: grid; place-items: center; background: rgba(0, 0, 0, .3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb span { font: 600 .6rem var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.thumb:hover { text-decoration: none; }
/* La sfera resta compatta; la scritta compare solo al passaggio o al focus. */
.cp-orb-btn { padding: .35rem; }
.cp-orb-label { display: none; }
.cp-orb-btn:hover, .cp-orb-btn:focus-visible { padding: .35rem 1rem .35rem .35rem; }
.cp-orb-btn:hover .cp-orb-label, .cp-orb-btn:focus-visible .cp-orb-label { display: inline; }
#copilot.open .cp-orb-btn:hover .cp-orb-label { display: none; }
main { padding-bottom: 7rem; }
.cp-mic { flex: none; min-height: 42px; width: 42px; padding: 0; border-radius: 14px; }
.cp-mic.on { background: var(--coral); border-color: var(--coral); color: #fff; box-shadow: 0 0 18px var(--coral-glow); animation: cp-fade 1.2s ease-in-out infinite; }

/* Registrazione completa, consensi, testi legali, account cliente */
.register { max-width: 920px; margin: 1.5rem auto; }
.register-form { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.6rem 2rem; }
.register-form .wide { grid-column: 1 / -1; }
/* Passi della registrazione: tre tappe in alto, quella corrente accesa. */
.wiz-steps { display: flex; gap: .4rem; margin: 0 0 .4rem; padding: 0; list-style: none; counter-reset: passo; }
.wiz-steps li { counter-increment: passo; flex: 1 1 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .7rem; border-radius: 999px; border: 1px solid var(--edge-hi); color: var(--muted); font-size: .9rem; font-weight: 600; }
.wiz-steps li::before { content: counter(passo); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--mono); background: var(--panel-hi); color: var(--text); }
.wiz-steps li.on { border-color: var(--brand); color: var(--ink); }
.wiz-steps li.on::before { background: var(--brand-solid); color: #fff; }
.wiz-steps li.done { cursor: pointer; }
.wiz-steps li.done::before { content: '✓'; background: var(--lime); color: #111; }
/* I riquadri dei passi non attivi spariscono davvero (la griglia del modulo darebbe loro un display). */
.register-form fieldset[hidden], .wiz-nav button[hidden] { display: none; }
.wiz-nav { display: flex; justify-content: space-between; gap: .6rem; }
.wiz-nav [data-wiz=avanti] { margin-left: auto; }
@media (max-width: 640px) { .wiz-steps li { padding: .5rem; font-size: 0; gap: 0; } .wiz-steps li.on { font-size: .85rem; gap: .5rem; flex: 2 1 0; } }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.row3 { display: grid; grid-template-columns: 6rem 1fr 4.5rem; gap: .75rem; }
@media (max-width: 520px) { .row2, .row3 { grid-template-columns: 1fr; } }
.consents { display: grid; gap: .7rem; padding-top: .4rem; border-top: 1px solid var(--edge); }
.consents label.check { align-items: flex-start; line-height: 1.45; }
.consents input[type="checkbox"] { margin-top: .2rem; flex: none; }
.pill { display: inline-block; padding: .08rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; border: 1px solid var(--edge-hi); }
.pill.ok { color: var(--lime); border-color: currentColor; }
.pill.warn { color: var(--accent); border-color: currentColor; }
.legal-wrap { max-width: 760px; margin: 1.5rem auto; }
.legal h1 { margin-bottom: .2rem; }
.legal h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; text-transform: none; letter-spacing: 0; }
.legal h2::after { display: none; }
.legal p { line-height: 1.6; }
.legal-box { margin-top: 2rem; }
.account { max-width: 980px; margin: 0 auto; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 1rem 0 2.5rem; }
.account-grid .card { display: grid; gap: .6rem; align-content: start; }
.account-grid h2 { margin: 0; font-size: 1.15rem; }
.account-bookings { display: grid; gap: .7rem; }
.account-booking { display: grid; gap: .2rem; color: var(--text); }
.account-booking:hover { border-color: var(--brand); text-decoration: none; color: var(--text); }
.account-booking strong { color: var(--ink); }
.account .danger-zone { text-align: left; margin: 2.5rem 0 1rem; }
.account .danger-zone summary { cursor: pointer; color: var(--muted); }
.account-as { padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--edge-hi); margin: 0; }
.cf input { text-transform: uppercase; max-width: 22rem; }

/* Rete (amministratori) */
.stat.accent strong { color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.stats + form, .stats + .account-grid { margin-top: 1.4rem; }
.search-inline { display: flex; gap: .6rem; margin: 0 0 1rem; }
.search-inline input { flex: 1; }
.muted-row td { opacity: .6; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: .4rem; } }
.confirm-suspend { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.crumbs { color: var(--muted); margin: 0 0 .6rem; }

/* Compilazione da Quattroruote nella scheda auto */
.infocar { background: rgba(47, 123, 255, .07); border: 1px solid var(--edge-hi); border-radius: var(--radius-sm); padding: 1rem; }
.infocar-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.infocar-row[hidden] { display: none; }
.infocar-row input, .infocar-row select { flex: 1 1 180px; min-width: 0; }
.infocar-versioni { display: grid; gap: .4rem; }
.infocar-versione { text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--edge); border-radius: var(--radius-sm); padding: .6rem .8rem; cursor: pointer; font: inherit; }
.infocar-versione:hover, .infocar-versione:focus-visible { border-color: var(--brand); background: var(--panel-hi); }
.error-text { color: var(--coral); }
.form .filled { outline: 2px solid var(--lime); outline-offset: 1px; transition: outline-color .4s; }

/* ---- Prezzi e mercato ---- */
.market-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.market-head h2 { margin: 0; }
.market td { vertical-align: top; min-width: 9.5rem; }
.market-tuo { font: 700 1.05rem var(--mono); color: var(--ink); }
.market .badge { margin-top: .3rem; }
.market-cat { margin-bottom: 1rem; }
.market-cat h3 { margin-top: 0; }
.market-weeks tr.quiet td { color: var(--muted); }
.occ { display: inline-block; width: 4.5rem; height: .45rem; border-radius: 999px; background: var(--panel-hi); vertical-align: middle; overflow: hidden; }
.occ span { display: block; height: 100%; width: var(--occ); background: var(--brand); }
.apply-form { display: flex; gap: .35rem; align-items: center; margin: 0; }
.apply-form input { width: 4rem; }
.notice { background: rgba(47, 123, 255, .07); border: 1px solid var(--edge-hi); border-radius: var(--radius-sm); padding: .75rem 1rem; color: var(--text); }
.seg { display: inline-flex; border: 1px solid var(--edge-hi); border-radius: 999px; overflow: hidden; }
.seg a { padding: .35rem .8rem; color: var(--text); font-size: .86rem; }
.seg a.active { background: var(--brand-solid); color: #fff; }
.market td.cheaper { color: var(--coral); }
.profit-list { display: grid; gap: .8rem; }
.profit { border-left: 3px solid var(--amber); padding: .2rem 0 .2rem .8rem; }
.profit p { margin: .2rem 0; }
.costs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem 1rem; }
.cost-total { margin: .8rem 0 0; font-size: 1.05rem; }

/* ---- Report ---- */
.report-filter { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .2rem 0 .6rem; }
.report-filter label { display: grid; gap: .2rem; font-size: .86rem; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.kpi { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.kpi p { margin: 0; }
.kpi-label { color: var(--muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }
.kpi-value { font: 700 1.9rem/1.2 var(--display); color: var(--ink); margin: .25rem 0 !important; }
.kpi-sub { font-size: .82rem; }
.delta.up { color: var(--lime); }
.delta.down { color: var(--coral); }
.chart { margin: 0; }
.chart figcaption { color: var(--muted); font-size: .9rem; margin-bottom: .4rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--edge-hi); stroke-width: 1; }
.chart .mark { fill: var(--brand); opacity: .55; }
.chart .mark.now { opacity: 1; }
.chart .hit { fill: transparent; }
.chart .bar:hover .mark { opacity: 1; }
.chart .bar:hover .hit { fill: rgba(255, 255, 255, .04); }
.chart .lbl { fill: var(--faint); font-size: 11px; text-anchor: middle; }
.chart .val { fill: var(--text); font-size: 12px; font-weight: 600; text-anchor: middle; }
.cars-report td, .cars-report th { white-space: nowrap; }
.cars-report .month { font-size: .78rem; padding-left: .3rem; padding-right: .3rem; min-width: 2.6rem; text-align: center; }
.cars-report .heat { background: rgba(47, 123, 255, calc(var(--h, 0) * .75)); color: var(--ink); }

/* ---- Prezzo giorno per giorno ---- */
.auto-form { margin: .4rem 0 1rem; align-items: flex-end; }
.auto-form input.num { width: 5rem; }
.daily h3 { margin: 1rem 0 .4rem; }
.daily-grid { font-size: .8rem; }
.daily-grid th, .daily-grid td { text-align: center; padding: .3rem .25rem; min-width: 2.7rem; white-space: nowrap; }
.daily-grid tbody th { text-align: left; color: var(--muted); font-weight: 500; position: sticky; left: 0; background: var(--panel-solid); }
.daily-grid thead th.we { color: var(--accent); }
.daily-grid .heat { background: rgba(47, 123, 255, calc(var(--h, 0) * .75)); color: var(--ink); }
.daily-grid .adj.up { color: var(--lime); font-weight: 700; }
.daily-grid .adj.down { color: var(--coral); font-weight: 700; }
.daily-grid .adj.proposed { font-style: italic; opacity: .8; }
.daily-grid .adj.manual { outline: 1px dashed var(--edge-hi); outline-offset: -3px; }
.daily-grid .price { font-family: var(--mono); color: var(--ink); }

/* ---- Preparazione e avvisi ---- */
.alert-bar { background: rgba(255, 77, 94, .12); border: 1px solid var(--coral); border-radius: var(--radius-sm); padding: .7rem 1rem; margin-bottom: 1rem; }
.alert-bar ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.alert-bar a { color: var(--text); }
.tabs .count.calm { background: var(--panel-hi); box-shadow: none; color: var(--text); }
.prep-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.prep { display: grid; gap: .6rem; }
.prep-urgent { border-color: var(--coral); }
.prep-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.checklist { display: grid; gap: .35rem; }
.big-check { padding: .45rem .5rem; border-radius: 10px; background: var(--panel); font-size: 1rem; }
.big-check input { width: 1.25rem; height: 1.25rem; }
.prep .actions { justify-content: flex-end; }
.pay-form { margin-top: .6rem; }
.deposit { margin-top: 1rem; border-top: 1px solid var(--edge); padding-top: .8rem; }
.deposit h3 { margin: 0 0 .3rem; }

/* ---- Piani ---- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.plan h3 { margin: 0; font-size: 1.3rem; }
.plan-price { font: 700 1.6rem/1.2 var(--display); color: var(--ink); margin: 0; }
.plan-best { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 10px 30px var(--brand-glow); }
.plan-current { outline: 2px solid var(--lime); outline-offset: 2px; }
.plan-flag { position: absolute; top: -.7rem; right: 1rem; margin: 0; background: var(--brand-solid); color: #fff; font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.plan-limits li, .plan-features li { display: block; padding: .15rem 0; }
.plan-features .off { color: var(--faint); }
.plan-features .on { color: var(--text); }
.plan form, .plan .badge, .plan > a.button { margin-top: auto; }
.sub-now { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sub-now p { margin: 0; }
.upsell { max-width: 640px; margin: 2rem auto; text-align: center; }
.plan-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .3rem 1rem; }
.plan-radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin: .4rem 0 .6rem; }
.plan-radio { display: grid; gap: .2rem; padding: .8rem; border: 1px solid var(--edge-hi); border-radius: var(--radius-sm); cursor: pointer; background: var(--panel); }
.plan-radio.best { border-color: var(--brand); }
.plan-radio:has(input:checked) { outline: 2px solid var(--brand); background: var(--panel-hi); }
.plan-radio input { justify-self: start; }
.pricing { margin: 2.5rem 0; }
.alert-bar.alert-info { background: rgba(47, 123, 255, .12); border-color: var(--brand); }
.alert-bar .button { margin-left: .6rem; }

/* ---- Recensione e annullamento dal link del cliente ---- */
.review-box { margin: 1rem 0; }
.rate { display: inline-flex; flex-direction: row-reverse; gap: .1rem; font-size: 2rem; line-height: 1; }
.rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.rate label { cursor: pointer; color: var(--faint); padding: 0 .1rem; }
.rate label:hover, .rate label:hover ~ label, .rate input:checked ~ label { color: var(--accent); }
.rate input:focus-visible + label { outline: 2px solid var(--brand); border-radius: 4px; }
.star-row { color: var(--accent); letter-spacing: .05em; }
.star-off { color: var(--faint); }
.cancel-box { margin-top: 1rem; }
.cancel-box summary { cursor: pointer; color: var(--muted); }

/* ---- Ricerca globale e paginazione ---- */
.gsearch { flex: 1 1 320px; max-width: 460px; margin: 0 1rem; }
.gsearch input { width: 100%; border-radius: 999px; padding: .5rem 1rem; font-size: .92rem; }
.pager { display: flex; align-items: center; gap: .8rem; justify-content: center; margin: 1rem 0; }
.alert-bar.alert-warn { background: rgba(255, 176, 32, .1); border-color: var(--amber); }
.alert-bar .plain li { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.alert-bar .actions { margin-top: .5rem; }
@media (max-width: 760px) { .gsearch { order: 3; flex-basis: 100%; margin: .5rem 0 0; } .topbar { flex-wrap: wrap; } }

/* ---- Messaggi ---- */
.thread { display: grid; gap: .5rem; margin: .6rem 0 1rem; }
.msg { margin: 0; display: grid; gap: .15rem; max-width: 85%; padding: .55rem .8rem; border-radius: 14px; background: var(--panel-hi); }
.msg.from-me { justify-self: end; background: rgba(47, 123, 255, .22); }
.msg small { color: var(--muted); }
.goal-bar { height: 10px; border-radius: 999px; background: var(--panel-hi); overflow: hidden; margin: .6rem 0 1rem; }
.goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--lime)); }

/* ---- Verbale ---- */
.verbale { margin-top: .6rem; }
.danni { display: grid; gap: .4rem; margin-bottom: .4rem; }
.danno { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem; }
.sigpad { width: 100%; max-width: 600px; aspect-ratio: 3 / 1; background: #fff; border-radius: 10px; border: 1px solid var(--edge-hi); touch-action: none; display: block; margin: .4rem 0; }
.verbale-doc { max-width: 820px; margin: 0 auto; }
.verbale-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.verbale-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.verbale-doc .firma { background: #fff; border-radius: 10px; max-width: 420px; display: block; }
@media print { .topbar, .tabs, .no-print, #copilot, .alert-bar { display: none !important; } body { background: #fff; color: #000; } .verbale-doc { color: #000; } }

/* ---- Guida passo per passo ---- */
.guide { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .8rem; }
.gstep { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--edge); background: var(--panel); }
.gstep h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.gstep p { margin: .35rem 0; }
.gnum { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--mono); background: var(--panel-hi); color: var(--text); }
.gstep.fatto .gnum { background: var(--lime); color: #111; }
.gstep.ora { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.gstep.ora .gnum { background: var(--brand-solid); color: #fff; }
.gstep.dopo { opacity: .75; }

/* Protocollo di configurazione: barra di avanzamento e avviso in Oggi. */
.avvio-bar { position: relative; height: 1.6rem; border-radius: 999px; background: var(--panel-hi); overflow: hidden; margin: .6rem 0 1rem; }
.avvio-fill { position: absolute; inset: 0 auto 0 0; background: var(--brand-solid); border-radius: 999px; }
.avvio-label { position: relative; display: block; text-align: center; font: 700 .85rem/1.6rem var(--mono); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.avvio-bar.compatta { height: 1.1rem; margin: .5rem 0 0; }
.avvio-bar.compatta .avvio-label { font-size: .75rem; line-height: 1.1rem; }
.avvio-notice { display: grid; gap: .3rem; }
.text-good { color: var(--lime); }
/* Salta al contenuto: invisibile finché non lo raggiunge la tastiera. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; padding: .6rem 1rem; background: var(--brand-solid); color: #fff; border-radius: 12px; }
/* GRATIS in evidenza: è la prima cosa che legge chi ha un noleggio (schede prezzi, pagina noleggiatori, registrazione, menu). */
.plan-free { margin: .4rem 0 .2rem; padding: .8rem 1rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border: 2px solid var(--lime); border-radius: 16px; background: color-mix(in srgb, var(--lime) 14%, transparent);
  box-shadow: 0 0 28px color-mix(in srgb, var(--lime) 30%, transparent); }
.plan-free strong { font: 900 3.2rem/1 var(--display); letter-spacing: -.045em; color: var(--lime); text-transform: uppercase;
  text-shadow: 0 0 22px color-mix(in srgb, var(--lime) 55%, transparent); }
.plan-free span { font: 800 1.25rem/1.15 var(--display); color: var(--ink); }
.plan-then { margin: .1rem 0 .4rem; color: var(--muted); font-size: 1.05rem; }
.free-badge { display: inline-flex; align-items: baseline; gap: .6rem; margin: 0 0 1.1rem; padding: .55rem 1.2rem; border-radius: 999px;
  background: var(--lime); color: #111; font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 30px color-mix(in srgb, var(--lime) 45%, transparent); }
.free-badge strong { font: 900 1.7rem/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; }
.free-word { color: var(--lime); font-weight: 800; }
.nav-free { margin-left: .45rem; padding: .1rem .5rem; border-radius: 999px; background: var(--lime); color: #111; font: 900 .72rem/1.4 var(--mono);
  text-transform: uppercase; vertical-align: middle; box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 50%, transparent); }
@media (max-width: 640px) { .plan-free strong { font-size: 2.6rem; } .free-badge { font-size: 1rem; } .free-badge strong { font-size: 1.4rem; } }

/* Rete → Chiavi e servizi */
.notice.warn { background: color-mix(in srgb, var(--amber) 10%, transparent); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.servizio { padding: .6rem 0 .4rem; border-bottom: 1px solid var(--edge); }
.servizio:last-of-type { border-bottom: 0; }
.servizio input[disabled] { opacity: .7; }
/* Rete → Copertura: riga della provincia o regione scelta */
tr.selected td { background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* ---- Telefono e tablet ---- */
@media (max-width: 760px) {
  /* Sotto i 16px iPhone ingrandisce la pagina appena si tocca un campo. */
  input, select, textarea, .gsearch input { font-size: 16px; }
  /* La barra in alto va a capo: il menu scorre con la pagina invece di coprire la ricerca. */
  .tabs { position: relative; top: auto; }
  /* La tendina "Altro" sul telefono prende tutta la larghezza del menu, come un foglio. */
  .tabs .more { position: static; }
  .tabs .more-menu { left: 16px; right: 16px; min-width: 0; }
  /* Si tocca con il dito: almeno 44px. */
  button.small, .button.small, .cp-chip, .cp-close { min-height: 44px; }
}