:root {
  --bg: #faf8f6;
  --panel: #ffffff;
  --ink: #1d1a1f;
  --ink-2: #5c5662;
  --ink-3: #948d99;
  --line: #ece7e3;
  --line-2: #f4f0ec;
  --brand: #b0185c;
  --brand-ink: #ffffff;
  --brand-soft: #f9e8f0;
  --brand-softer: #fdf4f8;
  --lav: #f0ebfa;
  --lav-ink: #5b3fa6;
  --ok: #2f7d5b;
  --ok-soft: #e4f3ec;
  --warn: #a5660c;
  --warn-soft: #fbf0dc;
  --bad: #b3261e;
  --bad-soft: #fbe7e6;
  --off: repeating-linear-gradient(135deg, #f6f3f0 0 6px, #efebe7 6px 12px);
  --pose: repeating-linear-gradient(135deg, rgba(176,24,92,.10) 0 6px, rgba(176,24,92,.04) 6px 12px);
  --shadow: 0 1px 2px rgba(29,26,31,.05), 0 8px 24px rgba(29,26,31,.06);
  --radius: 14px;
  --s1: #b0185c;
  --s2: #4a6fc4;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151317; --panel: #1d1a20; --ink: #f2eef4; --ink-2: #b9b1bf; --ink-3: #847c8a;
    --line: #2d2932; --line-2: #25212a; --brand: #e0518f; --brand-soft: #3a1d2b; --brand-softer: #2a1720;
    --lav: #2a2340; --lav-ink: #c4b2f2; --ok: #63c79a; --ok-soft: #1c3229; --warn: #e2a64c; --warn-soft: #3a2c16;
    --bad: #f08a82; --bad-soft: #3d1f1d;
    --off: repeating-linear-gradient(135deg, #1a171d 0 6px, #211d25 6px 12px);
    --pose: repeating-linear-gradient(135deg, rgba(224,81,143,.18) 0 6px, rgba(224,81,143,.07) 6px 12px);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --s1: #e0518f; --s2: #6f8fe0;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .appt .seg.busy { background: hsl(var(--h) 35% 22%); }
  :root:not([data-theme="light"]) .appt .txt b { color: hsl(var(--h) 70% 88%); }
  :root:not([data-theme="light"]) .appt .txt .t { color: hsl(var(--h) 50% 75%); }
  :root:not([data-theme="light"]) .appt .seg.free { background: repeating-linear-gradient(135deg, hsl(var(--h) 35% 22% / .8) 0 6px, transparent 6px 12px); }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
[hidden] { display: none !important; }

/* ---------- struttura ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; height: 100vh; height: 100dvh; }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 14px; gap: 6px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; }
.mono { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 600 20px/1 var(--serif); font-style: italic; flex: none; }
.brand b { display: block; font: 600 15px/1.1 var(--sans); letter-spacing: .06em; }
.brand small { color: var(--ink-3); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; position: relative; }
.nav button:hover { background: var(--line-2); color: var(--ink); }
.nav button.on { background: var(--brand-soft); color: var(--brand); }
.nav svg { width: 19px; height: 19px; flex: none; }
.nav .badge { margin-left: auto; }
.side-foot { margin-top: auto; padding: 8px; color: var(--ink-3); font: italic 13px/1.5 var(--serif); }
.side-foot button { all: unset; cursor: pointer; font: 500 12px var(--sans); color: var(--ink-3); margin-top: 10px; display: block; }

.main { overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-width: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.top { display: flex; align-items: center; gap: 12px; padding: 18px 28px 14px; flex-wrap: wrap; }
.top h1 { font: 600 26px/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.top .sp { flex: 1; }
.view { padding: 0 28px 40px; }

/* ---------- elementi ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.danger { color: var(--bad); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.icon { width: 40px; padding: 0; }
.btn:disabled { opacity: .5; cursor: default; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--brand); color: var(--brand-ink); }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--line-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h2 { font: 600 18px/1.2 var(--serif); margin: 0 0 4px; }
.card .hint, .hint { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.input, select.input, textarea.input { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); width: 100%; outline: none; }
textarea.input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 120px; }
.muted { color: var(--ink-3); }
.toggle { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; vertical-align: middle; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle i { position: absolute; inset: 0; border-radius: 20px; background: var(--line); cursor: pointer; transition: .15s; }
.toggle i::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.toggle input:checked + i { background: var(--brand); }
.toggle input:checked + i::after { transform: translateX(16px); }

/* ---------- agenda ---------- */
.datebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.datebar .day { font: 600 17px var(--sans); text-transform: capitalize; white-space: nowrap; }
.datebar input[type=date] { height: 40px; width: 150px; }
.alerts { margin: 0 28px 12px; }
.alert { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--brand-softer); border: 1px solid var(--brand-soft); }
.alert b { color: var(--brand); }
.cal-wrap { overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; max-height: calc(100dvh - 170px); position: relative; }
.cal { display: grid; position: relative; min-width: max-content; }
.cal-head { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); display: contents; }
.ch { position: sticky; top: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 8px; display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 600; font-size: 14px; }
.ch .av { width: 30px; height: 30px; border-radius: 50%; background: var(--lav); color: var(--lav-ink); display: grid; place-items: center; font-size: 13px; }
.ch.corner { left: 0; z-index: 6; }
.hours { position: sticky; left: 0; z-index: 3; background: var(--panel); border-right: 1px solid var(--line); }
.hours div { position: absolute; right: 8px; font-size: 11px; color: var(--ink-3); transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.col { position: relative; border-right: 1px solid var(--line-2); cursor: copy; }
.col:last-child { border-right: 0; }
.col .line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-2); pointer-events: none; }
.col .line.h { border-top-color: var(--line); }
.col .off { position: absolute; left: 0; right: 0; background: var(--off); pointer-events: none; }
.now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--brand); z-index: 2; pointer-events: none; }
.now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.appt { position: absolute; left: 3px; right: 3px; border-radius: 8px; cursor: pointer; overflow: hidden; z-index: 1; --h: 330;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.appt .seg { position: absolute; left: 0; right: 0; }
.appt .seg.busy { background: hsl(var(--h) 75% 94%); border-left: 4px solid hsl(var(--h) 55% 45%); }
.appt .seg.free { background: repeating-linear-gradient(135deg, hsl(var(--h) 70% 92% / .9) 0 6px, hsl(var(--h) 70% 97% / .6) 6px 12px); border-left: 4px dashed hsl(var(--h) 55% 50%); }
.appt .txt { position: relative; padding: 5px 8px 5px 10px; font-size: 12px; line-height: 1.3; pointer-events: none; }
.appt .txt b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--h) 45% 22%); }
.appt .txt span { color: var(--ink-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt .txt .t { font-variant-numeric: tabular-nums; color: hsl(var(--h) 40% 35%); font-weight: 500; }
.appt .txt .paid { color: var(--ok); font-weight: 700; display: inline; }
.appt .txt span span { display: inline; }
.appt.short .txt { display: flex; gap: 6px; align-items: baseline; padding-top: 3px; }
.appt.short .txt b { flex: 0 1 auto; }
.appt.short .txt > span { font-size: 11px; }
.appt.cancelled, .appt.noshow { opacity: .45; }
.appt.cancelled .seg.busy, .appt.noshow .seg.busy { background: var(--line-2); border-left-color: var(--ink-3); }
.appt.cancelled .txt b { text-decoration: line-through; }
.appt.online .txt b::after { content: ' · online'; color: var(--brand); font-weight: 600; font-size: 11px; }
.appt.unread { box-shadow: 0 0 0 2px var(--brand); }
.appt:hover { filter: brightness(.97); }
.appt.dragging { opacity: .35; }
.appt.ghost { position: fixed; z-index: 80; opacity: .92; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; transition: top .05s, left .05s; }
.ch { flex-direction: row; }
.ch small { font-weight: 500; font-size: 11px; margin-left: 4px; }
.ch.today { color: var(--brand); }
.ch .first { display: none; }
.ch.today span { background: var(--brand); color: var(--brand-ink); padding: 2px 9px; border-radius: 20px; }
.seg-switch { display: inline-flex; background: var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-switch button { all: unset; cursor: pointer; padding: 7px 13px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.seg-switch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tel { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 600; }
.legend { display: flex; gap: 16px; color: var(--ink-3); font-size: 12px; padding: 10px 2px 0; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }

/* ---------- liste ---------- */
.list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.li:last-child { border-bottom: 0; }
.li:hover { background: var(--line-2); }
.li .av { width: 36px; height: 36px; border-radius: 50%; background: var(--lav); color: var(--lav-ink); display: grid; place-items: center; font-weight: 600; flex: none; }
.li .grow { flex: 1; min-width: 0; }
.li .grow b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .grow small { color: var(--ink-3); }
/* storico nella scheda cliente: servizio e importo in grassetto */
.li.hist .grow small b.svc { display: inline; font-weight: 700; color: var(--ink); white-space: normal; }
.li.hist .paid { text-align: right; flex: none; }
.li.hist .paid b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.li.hist .paid small { color: var(--ink-3); font-size: 12px; }
.table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--line-2); }
.table td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .cat td { background: var(--brand-softer); font: 600 13px var(--serif); color: var(--brand); padding: 8px 14px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat small { color: var(--ink-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat b { display: block; font: 600 26px/1.2 var(--serif); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- finestre ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(20,16,22,.38); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .15s; }
.modal { background: var(--panel); border-radius: 18px; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto; box-shadow: var(--shadow); }
.modal header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 6px; position: sticky; top: 0; background: var(--panel); z-index: 1; }
.modal header h3 { margin: 0; font: 600 20px var(--serif); flex: 1; }
.modal .body { padding: 10px 20px 4px; }
.modal footer { display: flex; gap: 8px; padding: 14px 20px 18px; flex-wrap: wrap; position: sticky; bottom: 0; background: var(--panel); border-top: 1px solid var(--line-2); }
.modal footer .sp { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { all: unset; cursor: pointer; padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.chip small { opacity: .7; margin-left: 4px; }
.catlabel { font: 600 12px var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 6px; }
.sugg { border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; max-height: 200px; overflow: auto; }
.sugg div { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.sugg div:hover { background: var(--line-2); }
.sugg small { color: var(--ink-3); margin-left: 6px; }
.picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--lav); color: var(--lav-ink); }
.picked b { flex: 1; }
.picked .cname { all: unset; cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.picked .cname:hover, .picked .cname:focus-visible { text-decoration-thickness: 2px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; z-index: 60; font-weight: 500; box-shadow: var(--shadow); animation: fade .2s; max-width: calc(100% - 32px); }
.toast.bad { background: var(--bad); color: #fff; }
@keyframes fade { from { opacity: 0; } }

/* ---------- accesso ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login .card { width: min(380px, 100%); text-align: center; padding: 32px 28px; }
.login .mono { margin: 0 auto 14px; width: 56px; height: 56px; font-size: 26px; }
.login h1 { font: 600 24px var(--serif); margin: 0 0 4px; }
.login p { color: var(--ink-3); margin: 0 0 20px; }
.login .tag { font: italic 14px/1.5 var(--serif); color: var(--ink-3); margin-top: 18px; }

/* ---------- telefono ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { display: none; }
  .top { padding: 14px 16px 10px; }
  .top h1 { font-size: 22px; }
  .view { padding: 0 16px 96px; }
  .alerts { margin: 0 16px 10px; }
  .cal-wrap { max-height: calc(100dvh - 190px); }
  .datebar .day { min-width: 0; font-size: 15px; }
  .datebar input[type=date] { width: 132px; }
  .grid2 { grid-template-columns: 1fr; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--line); z-index: 20; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar button { all: unset; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-3); padding: 4px 0; position: relative; cursor: pointer; }
  .tabbar button.on { color: var(--brand); }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .badge { position: absolute; top: 0; left: 55%; height: 16px; padding: 0 5px; font-size: 10px; }
  /* finestre a tutto schermo su iPhone: niente sbordi, la tastiera non sposta niente */
  .modal-bg { align-items: stretch; padding: 0; }
  .modal { width: 100%; max-width: 100%; height: 100%; max-height: none; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
  .modal header { padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line-2); }
  .modal header h3 { font-size: 19px; }
  .modal .body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .modal footer { padding: 10px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .modal .row { gap: 8px; }
  .modal .row > .field { min-width: 0; flex: 1 1 45%; }
  .modal .picked { flex-wrap: wrap; row-gap: 4px; }
  .modal .picked b { flex-basis: 100%; }
  .table { font-size: 14px; }
  .table td, .table th { padding: 9px 10px; }
  .hide-sm { display: none; }
  /* Safari iPhone: sotto i 16px ingrandisce la pagina quando tocchi un campo */
  input, select, textarea, .input { font-size: 16px !important; }
  .shell { height: 100dvh; overflow: hidden; }
  .main { height: 100dvh; }
  .top { gap: 8px; padding-top: max(14px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .view { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .ch { padding: 10px 2px; font-size: 13px; gap: 4px; }
  .appt .txt { padding: 4px 5px 4px 7px; }
  .appt .txt b { font-size: 12.5px; }
  .datebar { width: 100%; }
  .datebar .day { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hours div { right: 4px; font-size: 10px; }
  .ch .full, .ch small { display: none; }
  .ch .first { display: inline; }
  .chart .ax { font-size: 20px; }
  .seg-switch button { padding: 7px 11px; }
}

/* ---------- grafico cassa ---------- */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--ink-3); font-size: 11px; font-family: var(--sans); }
.chart .s1 { fill: var(--s1); }
.chart .s2 { fill: var(--s2); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit.on { fill: var(--ink); fill-opacity: .04; }
.chart .tip { position: absolute; top: 4px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; color: var(--ink); }
.chart .tip i, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.stat > span { display: block; margin-top: 4px; line-height: 1.4; }
.topr { margin-bottom: 12px; }
.tbar { height: 6px; background: var(--line-2); border-radius: 4px; margin-top: 5px; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--s1); border-radius: 4px; }

/* data cliccabile: il campo data invisibile copre il testo */
.daypick { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; padding: 6px 10px; border-radius: 10px; }
.daypick:hover { background: var(--line-2); }
.daypick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }
.daypick .cal-ico { color: var(--ink-3); font-size: 12px; }
.only-sm { display: none; }
.ch.wk span b { margin-left: 4px; }
.appt .txt.mini { padding: 3px 4px 3px 6px; }
.appt .txt.mini b { font-size: 11.5px; }
.appt .txt.mini span { font-size: 10.5px; }
@media (max-width: 860px) {
  .only-sm { display: inline; }
  .top h1 { flex: 1; }
  .datebar { gap: 6px; }
  .datebar .btn { height: 38px; }
  .daypick { flex: 1; padding: 6px 4px; justify-content: center; }
  .daypick .day { font-size: 15px; }
  #wstaff { flex: 1; min-width: 0 !important; height: 38px; }
  #newappt { height: 38px; padding: 0 14px; }
  .ch.wk { flex-direction: column; gap: 0; padding: 8px 0; line-height: 1.15; }
  .ch.wk span { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 500; color: var(--ink-3); padding: 2px 6px; border-radius: 10px; }
  .ch.wk span b { margin: 0; font-size: 16px; color: var(--ink); }
  .ch.today.wk span, .ch.today.wk span b { color: var(--brand-ink); }
  .ch.wk small { display: none; }
}

/* pause e blocchi */
.appt.block .seg.busy { background: repeating-linear-gradient(135deg, var(--line-2) 0 8px, var(--line) 8px 16px); border-left: 4px solid var(--ink-3); }
.appt.block .txt b { color: var(--ink-2); font-style: italic; }
.appt.series .txt b::before { content: '🔁 '; font-size: 10px; }
.ch { flex-wrap: wrap; }
.clo-tag { font-style: normal; font-size: 11px; font-weight: 600; background: var(--warn-soft); color: var(--warn); padding: 2px 8px; border-radius: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .ch.wk .clo-tag { font-size: 0; padding: 0; background: none; } .ch.wk .clo-tag::first-letter { font-size: 13px; } .ch .clo-tag { flex-basis: 100%; text-align: center; } }
/* finestra appuntamento */
.itm { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--panel); }
.itm .times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.itm .times label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-3); font-weight: 600; }
.itm .times input[type=number] { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--panel); width: 100%; }
.itm .times select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--panel); width: 100%; color: var(--ink); font: inherit; font-size: 14px; }
.lastv { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--line-2); font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.allsvc summary { list-style: none; }
.allsvc summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) { .itm .times { grid-template-columns: repeat(2, 1fr); } }

/* Safari: il campo data ha una larghezza sua e sborda; lo rendo un campo normale */
input[type=date].input, input[type=time].input { -webkit-appearance: none; appearance: none; min-width: 0; width: 100%; display: block; line-height: 40px; }
input[type=date].input::-webkit-date-and-time-value { text-align: left; }
.modal { overflow-x: hidden; }
.modal .body { overflow-x: hidden; }
.modal * { min-width: 0; }
.modal .chip, .modal .btn, .modal .toggle { min-width: auto; }
body.modal-open { overflow: hidden; }

.stepper { display: flex; gap: 6px; align-items: center; }
.stepper input { text-align: center; flex: 1; min-width: 56px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .btn.icon { width: 42px; flex: none; font-size: 18px; }
.stepper.off { opacity: .45; }

.rep-box .rep-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.rep-box output { min-width: 44px; text-align: center; font: 600 20px var(--sans); font-variant-numeric: tabular-nums; }
.rep-box .stepper .btn.icon { width: 46px; height: 42px; font-size: 22px; touch-action: manipulation; }
.rep-box .chip { touch-action: manipulation; }

/* appuntamento con più persone: in ogni colonna i servizi di quella persona */
.appt.multi i { font-style: normal; opacity: .8; }

/* CRM clienti */
.ctabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { white-space: nowrap; }
.ctabs .cn { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.cstats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.cstats .stat { padding: 10px 12px; }
.cstats .stat b { font-size: 20px; }
.cstats .stat > span { font-size: 12px; }
.li .grow small b.svc { display: inline; font-weight: 600; color: var(--ink-2); }
.li .btn.sm { flex: none; }
@media (max-width: 860px) { .cstats { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   ASPETTO NUOVO — notte / giorno, colori di stagione (Impostazioni → Aspetto)
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* notte */
html[data-look="nuovo"][data-light="notte"] {
  --panel: #1f1921; --ink: #f4eef2; --ink-2: #c3bac2; --ink-3: #9d949b; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.05);
  --brand-ink: #1a1013; --lav: #2a2340; --lav-ink: #e0d4ff; --ok: #7be0a6; --ok-soft: rgba(123,224,166,.14);
  --warn: #f0b860; --warn-soft: rgba(240,184,96,.14); --bad: #ff9a90; --bad-soft: rgba(255,154,144,.14);
  --off: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 6px, rgba(255,255,255,.06) 6px 12px);
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 36px rgba(0,0,0,.4); color-scheme: dark;
}
html[data-look="nuovo"][data-light="notte"][data-season="autunno"]   { --bg: #17120f; --panel: #221b17; --brand: #e8865a; }
html[data-look="nuovo"][data-light="notte"][data-season="inverno"]   { --bg: #0f1420; --panel: #182032; --brand: #7fb8ff; }
html[data-look="nuovo"][data-light="notte"][data-season="primavera"] { --bg: #151116; --panel: #1f1921; --brand: #ff7ab8; }
html[data-look="nuovo"][data-light="notte"][data-season="estate"]    { --bg: #0e1716; --panel: #152220; --brand: #3cc4b4; }
html[data-look="nuovo"][data-light="notte"] { --brand-soft: color-mix(in srgb, var(--brand) 20%, transparent); --brand-softer: color-mix(in srgb, var(--brand) 10%, transparent);
  --pose: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent) 0 6px, transparent 6px 12px); }

/* giorno */
html[data-look="nuovo"][data-light="giorno"] {
  --panel: #ffffff; --ink: #1d1a1f; --ink-2: #56505b; --ink-3: #6f6874; --line: #e9e4e0; --line-2: #f3efeb;
  --brand-ink: #ffffff; --lav: #efe9fb; --lav-ink: #4b2a78; color-scheme: light;
}
html[data-look="nuovo"][data-light="giorno"][data-season="autunno"]   { --bg: #fbf4ec; --brand: #a8481c; }
html[data-look="nuovo"][data-light="giorno"][data-season="inverno"]   { --bg: #f1f5fb; --brand: #2a62b3; }
html[data-look="nuovo"][data-light="giorno"][data-season="primavera"] { --bg: #fbf5f8; --brand: #b0185c; }
html[data-look="nuovo"][data-light="giorno"][data-season="estate"]    { --bg: #f0f8f6; --brand: #12756b; }
html[data-look="nuovo"][data-light="giorno"] { --brand-soft: color-mix(in srgb, var(--brand) 13%, white); --brand-softer: color-mix(in srgb, var(--brand) 6%, white);
  --pose: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, transparent) 0 6px, transparent 6px 12px); }

/* motivo leggero di stagione sullo sfondo */
html[data-look="nuovo"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .9; }
html[data-look="nuovo"][data-season="autunno"] body::before { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, transparent) 0 2px, transparent 2px 28px); }
html[data-look="nuovo"][data-season="inverno"] body::before { background-image: radial-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1.6px, transparent 2.2px); background-size: 24px 24px; }
html[data-look="nuovo"][data-season="primavera"] body::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--brand) 18%, transparent) 3px, transparent 3.6px); background-size: 40px 40px; }
html[data-look="nuovo"][data-season="estate"] body::before { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 16px, color-mix(in srgb, var(--brand) 14%, transparent) 16px 18px); background-size: 72px 72px; }
html[data-look="nuovo"] .shell, html[data-look="nuovo"] .tabbar { position: relative; z-index: 1; }
html[data-look="nuovo"] .tabbar { position: fixed; }
html[data-look="nuovo"] .side { background: color-mix(in srgb, var(--panel) 88%, transparent); }
html[data-look="nuovo"] .top h1 { font-size: 34px; font-weight: 500; }
html[data-look="nuovo"] .nav button { padding: 13px 14px; font-size: 16px; border-radius: 14px; }
html[data-look="nuovo"] .nav button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
html[data-look="nuovo"] .btn.primary { border-radius: 22px; }

/* logo e foto */
.mono.logo { object-fit: cover; background: #fff; padding: 0; box-shadow: 0 0 0 2px var(--brand); }
html[data-look="nuovo"] .mono { width: 54px; height: 54px; }
.ch .av.ph { background-size: cover; background-position: center; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand-soft); }
html[data-look="nuovo"] .ch .av { width: 40px; height: 40px; font-size: 14px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--brand) 40%, transparent); }
html[data-look="nuovo"] .ch { padding: 10px 8px; font-size: 15px; }
.ph-pick { position: relative; width: 48px; height: 48px; flex: none; cursor: pointer; border-radius: 50%; }
.ph-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ph-pick img, .ph-pick span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: var(--lav); color: var(--lav-ink); font-weight: 600; box-shadow: 0 0 0 2px var(--line); }
.ph-pick img { background: #fff; }
.ph-pick i { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); }
.ph-pick i svg { width: 12px; height: 12px; }
.chip .sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sw-autunno { background: #e8865a; } .sw-inverno { background: #7fb8ff; } .sw-primavera { background: #ff7ab8; } .sw-estate { background: #3cc4b4; }
.sw-auto { background: conic-gradient(#e8865a 0 25%, #7fb8ff 0 50%, #ff7ab8 0 75%, #3cc4b4 0); }

/* striscia dei giorni del mese (solo nell'aspetto nuovo) */
.mstrip-row { display: none; }
html[data-look="nuovo"] .mstrip-row { display: flex; align-items: center; gap: 10px; padding: 0 28px 12px; }
html[data-look="nuovo"] .top .daypick { display: none; }
.mcal { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--brand); color: var(--brand-ink); border: 0; display: grid; place-items: center; }
.mcal svg { width: 22px; height: 22px; }
.mstrip { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.mstrip::-webkit-scrollbar { display: none; }
.mday { all: unset; cursor: pointer; flex: none; width: 46px; height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-sizing: border-box; }
.mday span { font-size: 11px; color: var(--ink-3); }
.mday b { font-size: 16px; font-weight: 600; }
.mday.sun { color: var(--ink-3); }
.mday.today { border-color: var(--brand); }
.mday.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.mday.on span { color: inherit; opacity: .85; }

/* blocchi pieni, colore per servizio */
html[data-look="nuovo"] .appt { border-radius: 12px; left: 4px; right: 4px; }
html[data-look="nuovo"][data-light="notte"] .appt .seg.busy { background: hsl(var(--h) 38% 24%); border-left: 0; }
html[data-look="nuovo"][data-light="notte"] .appt .seg.free { background: repeating-linear-gradient(135deg, hsl(var(--h) 38% 24% / .9) 0 6px, hsl(var(--h) 38% 18% / .6) 6px 12px); border-left: 0; }
html[data-look="nuovo"][data-light="notte"] .appt .txt b { color: hsl(var(--h) 85% 90%); }
html[data-look="nuovo"][data-light="notte"] .appt .txt span, html[data-look="nuovo"][data-light="notte"] .appt .txt .t { color: hsl(var(--h) 45% 78%); }
html[data-look="nuovo"][data-light="giorno"] .appt .seg.busy { background: hsl(var(--h) 75% 89%); border-left: 0; }
html[data-look="nuovo"][data-light="giorno"] .appt .seg.free { background: repeating-linear-gradient(135deg, hsl(var(--h) 75% 89%) 0 6px, hsl(var(--h) 75% 95%) 6px 12px); border-left: 0; }
html[data-look="nuovo"][data-light="giorno"] .appt .txt b { color: hsl(var(--h) 55% 20%); }
html[data-look="nuovo"][data-light="giorno"] .appt .txt span, html[data-look="nuovo"][data-light="giorno"] .appt .txt .t { color: hsl(var(--h) 40% 30%); }
html[data-look="nuovo"] .appt .txt { padding: 6px 10px 6px 12px; }
html[data-look="nuovo"] .appt .txt b { font-size: 14.5px; font-weight: 700; }
html[data-look="nuovo"] .cal-wrap { border-radius: 18px; }

/* barra per scrivere o parlare */
.vdock { position: sticky; bottom: 14px; z-index: 15; margin: 12px auto 4px; max-width: 680px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 32px; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow); }
.vdock input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; outline: none; }
.vdock input::placeholder { color: var(--ink-3); }
.vmic { all: unset; cursor: pointer; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; }
.vmic svg { width: 22px; height: 22px; }
.vmic.live { animation: vring 1.1s ease-out infinite; }
@keyframes vring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 20px transparent; } }
@media (max-width: 860px) {
  .vdock { bottom: calc(76px + env(safe-area-inset-bottom)); margin: 10px 0 4px; }
  .vdock input { font-size: 16px; }
  html[data-look="nuovo"] .mstrip-row { padding: 0 14px 10px; }
  .mcal { width: 46px; height: 46px; }
  .mday { width: 42px; height: 48px; }
}

/* appuntamento con più servizi: un riquadro per servizio (1°, 2°…) */
.appt .txt .num { font-style: normal; font-size: 10.5px; font-weight: 700; margin-right: 5px; padding: 0 5px; border-radius: 6px; background: hsl(var(--h) 55% 45%); color: #fff; vertical-align: 1px; }
.appt.follow { border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0 -2px 0 var(--panel); }
:root:not([data-theme="light"]) .appt .txt .num { background: hsl(var(--h) 50% 40%); }
.itm .inum { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--brand); color: #fff; align-self: center; }
.itm .who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.itm .who label span { display: block; font-size: 11.5px; color: var(--ink-2); margin-bottom: 3px; }
.itm .who select { width: 100%; }
.btn.addsvc { margin-top: 8px; width: 100%; justify-content: center; border-style: dashed; }
.itm .who select { height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }

/* rubrica colore: riquadro "formula completa" */
.formula-box { background: var(--brand-soft); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.formula-box b { font-size: 16px; }

/* ---------- Rubrica colore: schede rettangolari (Radici | Punte) ---------- */
.fcards { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.fcard { all: unset; box-sizing: border-box; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.fcard:hover { border-color: var(--brand-soft); }
.fcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fcard-head { display: flex; align-items: center; gap: 10px; }
.fcard-head .av { width: 44px; height: 44px; font-size: 16px; border-radius: 50%; background: var(--lav); color: var(--lav-ink); display: grid; place-items: center; font-weight: 600; flex: none; }
.fcard-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fcard-head .grow b { font-size: 19px; }
.fcard-head .grow small { color: var(--ink-3); font-size: 15px; }
.fcard-head .muted { font-size: 20px; }
.fparts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fpart { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.fpart b { font-size: 19px; line-height: 1.3; color: var(--ink); }
.fpart-lab { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fpart-tot { font-weight: 600; }
.fpart.roots { background: var(--brand-soft); }
.fpart.roots .fpart-lab { color: var(--brand); }
.fpart.tips { background: var(--lav); }
.fpart.tips .fpart-lab { color: var(--lav-ink); }
.fpart.none { border: 1px dashed var(--line); display: grid; place-items: center; color: var(--ink-3); }
.fcard-note { color: var(--ink-3); font-size: 15px; }
.fempty { color: var(--ink-3); padding: 14px 4px; }