/* Tavolo — one stylesheet for every page. Look: clean white, oversized tight type,
   black pill buttons, soft grey "frames" around product UI. */
:root{
  --bg:#ffffff;
  --bg-2:#f4f4f5;
  --bg-3:#e9e9ec;
  --card:#ffffff;
  --ink:#0b0b0c;
  --ink-2:#52525b;
  --ink-3:#a1a1aa;
  --line:#e4e4e7;
  --blue:#2448ff;
  --blue-soft:#e8ecff;
  --green:#15803d;
  --green-soft:#dcfce7;
  --red:#dc2626;
  --red-soft:#fee2e2;
  --amber:#b45309;
  --amber-soft:#fef3c7;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.14);
  --font:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, monospace;
  --r:20px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0b; --bg-2:#151517; --bg-3:#202024; --card:#111113;
    --ink:#fafafa; --ink-2:#a1a1aa; --ink-3:#63636b; --line:#27272a;
    --blue:#5b78ff; --blue-soft:#1a2150;
    --green:#4ade80; --green-soft:#0f2a1a; --red:#f87171; --red-soft:#2d1313;
    --amber:#fbbf24; --amber-soft:#2a2008;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -16px #000;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0b; --bg-2:#151517; --bg-3:#202024; --card:#111113;
  --ink:#fafafa; --ink-2:#a1a1aa; --ink-3:#63636b; --line:#27272a;
  --blue:#5b78ff; --blue-soft:#1a2150;
  --green:#4ade80; --green-soft:#0f2a1a; --red:#f87171; --red-soft:#2d1313;
  --amber:#fbbf24; --amber-soft:#2a2008;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -16px #000;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
@media (max-width:600px){ .wrap{padding:0 16px} }
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.mono{font-family:var(--mono)}
[hidden]{display:none !important}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px)}
.nav .wrap{display:flex; align-items:center; gap:28px; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.03em; font-size:19px; text-decoration:none}
.logo svg{width:30px; height:30px; flex:none}
.nav-links{display:flex; gap:24px; font-size:14.5px; color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-end{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:760px){ .nav-links{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px;
  border-radius:999px; border:0; background:var(--ink); color:var(--bg); font-weight:550; font-size:15px;
  text-decoration:none; cursor:pointer; white-space:nowrap; transition:transform .12s, opacity .12s}
.btn:hover{opacity:.88}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn-sm{height:36px; padding:0 14px; font-size:14px}
.btn-soft{background:var(--bg-2); color:var(--ink)}
.btn-soft:hover{background:var(--bg-3); opacity:1}
.btn-blue{background:var(--blue); color:#fff}
.btn-link{background:none; color:var(--ink); padding:0 6px}
.btn-link:hover{opacity:.6}
.btn-block{width:100%; height:52px; font-size:16px}
.icon-btn{width:36px; height:36px; padding:0; border-radius:999px; border:0; background:var(--bg-2); cursor:pointer;
  display:inline-grid; place-items:center; font-size:15px}
.icon-btn:hover{background:var(--bg-3)}

/* ---------- landing ---------- */
.hero{padding:72px 0 40px; text-align:center}
.hero h1{font-size:clamp(46px, 8.4vw, 116px); line-height:.94; letter-spacing:-.055em; font-weight:650; margin:0 auto; max-width:12ch}
.chip{display:inline-block; width:1.18em; height:.78em; border-radius:.16em; overflow:hidden; vertical-align:-.02em;
  margin:0 .04em; box-shadow:var(--shadow); transform:rotate(var(--tilt, -4deg))}
.chip img{width:100%; height:100%; object-fit:cover}
.chip.blue{background:var(--blue); display:inline-grid; place-items:center; color:#fff}
.chip.blue svg{width:.5em; height:.5em}
.hero p.lead{font-size:clamp(17px, 2vw, 20px); color:var(--ink-2); max-width:34ch; margin:28px auto 0}
.hero .ctas{display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap}

.frame{background:var(--bg-2); border-radius:32px; padding:clamp(14px, 3vw, 40px); margin-top:40px; overflow:hidden}
.frame-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(12px, 2vw, 24px); align-items:start}
@media (max-width:860px){ .frame-grid{grid-template-columns:1fr} }
.screen{background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.screen-bar{display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid var(--line)}
.screen-bar i{width:9px; height:9px; border-radius:50%; background:var(--bg-3)}
.screen-bar span{margin-left:10px; font-size:12px; color:var(--ink-3); font-family:var(--mono)}
.screen iframe{display:block; width:100%; border:0; background:var(--bg)}

.trust{display:flex; align-items:center; justify-content:center; gap:14px 32px; flex-wrap:wrap; padding:36px 0 8px;
  color:var(--ink-3); font-size:14px}
.trust b{color:var(--ink); font-weight:600; letter-spacing:-.02em; font-size:17px}

.section{padding:110px 0 0}
.eyebrow{font-size:13px; font-weight:600; color:var(--blue); letter-spacing:.02em; margin:0 0 14px}
.h2{font-size:clamp(34px, 5vw, 64px); line-height:1; letter-spacing:-.045em; font-weight:650; margin:0; max-width:16ch}
.section .sub{color:var(--ink-2); font-size:18px; max-width:46ch; margin:18px 0 0}

.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:48px}
@media (max-width:900px){ .features{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .features{grid-template-columns:1fr} }
.feature{background:var(--bg-2); border-radius:24px; padding:26px; min-height:220px; display:flex; flex-direction:column}
.feature .ico{width:40px; height:40px; border-radius:12px; background:var(--card); display:grid; place-items:center;
  box-shadow:var(--shadow); font-size:18px}
.feature h3{font-size:19px; letter-spacing:-.025em; margin:auto 0 6px; padding-top:28px; font-weight:600}
.feature p{margin:0; color:var(--ink-2); font-size:15px}
.feature.wide{grid-column:span 2; background:var(--ink); color:var(--bg)}
.feature.wide p{color:color-mix(in srgb, var(--bg) 65%, var(--ink))}
.feature.wide .ico{background:var(--blue); color:#fff; box-shadow:none}
@media (max-width:600px){ .feature.wide{grid-column:auto} }

.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px}
@media (max-width:760px){ .compare{grid-template-columns:1fr} }
.plan{border-radius:28px; padding:32px; background:var(--bg-2)}
.plan.ours{background:var(--card); box-shadow:var(--shadow); outline:2px solid var(--ink)}
.plan .tag{display:inline-block; font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--bg-3)}
.plan.ours .tag{background:var(--blue); color:#fff}
.plan .price{font-size:56px; letter-spacing:-.05em; font-weight:650; line-height:1; margin:22px 0 4px}
.plan .price small{font-size:17px; letter-spacing:0; font-weight:500; color:var(--ink-2)}
.plan ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; font-size:15px}
.plan li{display:flex; gap:10px}
.plan li::before{content:"✓"; color:var(--green); font-weight:700}
.plan.theirs li::before{content:"✕"; color:var(--red)}

.cta-band{margin:110px 0 0; border-radius:32px; background:var(--blue); color:#fff; padding:clamp(36px, 6vw, 80px);
  display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cta-band h2{margin:0; font-size:clamp(34px, 5vw, 64px); letter-spacing:-.045em; line-height:1; font-weight:650; max-width:13ch}
.cta-band .btn{background:#fff; color:#0b0b0c}
.foot{padding-top:40px; padding-bottom:56px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--ink-3); font-size:14px}

/* ---------- booking app ---------- */
.app{max-width:1080px; margin:0 auto; padding:36px 24px 80px; display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start}
@media (max-width:880px){ .app{grid-template-columns:1fr; gap:28px; padding:20px 16px 64px} }
.app > *{min-width:0} /* let the day strip scroll instead of widening the page */
.place{position:sticky; top:96px}
@media (max-width:880px){
  .place{position:static; display:grid; grid-template-columns:96px 1fr; gap:4px 16px; align-items:center}
  .place .photo{grid-row:span 2; aspect-ratio:1; border-radius:20px}
  .place h1{margin:0; font-size:34px}
  .place #rTag{margin:0; font-size:14px}
  .place .meta,.place .hours{grid-column:1 / -1; margin-top:8px}
  .place .hours{display:none}
}
.place .photo{border-radius:24px; overflow:hidden; aspect-ratio:4/3; background:var(--bg-2)}
.place .photo img{width:100%; height:100%; object-fit:cover}
.place h1{font-size:clamp(38px, 5vw, 56px); letter-spacing:-.05em; line-height:1; font-weight:650; margin:24px 0 8px}
.place .meta{display:grid; gap:6px; margin-top:20px; font-size:15px; color:var(--ink-2)}
.place .meta a{text-decoration:none}
.hours{margin-top:20px; border-top:1px solid var(--line); padding-top:16px; display:grid; gap:4px; font-size:14px}
.hours div{display:flex; justify-content:space-between; gap:12px; color:var(--ink-2)}
.hours div span:last-child{text-align:right; font-size:13px}
.hours div.today{color:var(--ink); font-weight:600}

.panel{background:var(--bg-2); border-radius:28px; padding:clamp(16px, 2.4vw, 28px)}
.step{background:var(--card); border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.step + .step{margin-top:12px}
.step h2{font-size:15px; font-weight:600; margin:0 0 14px; display:flex; align-items:center; gap:10px; letter-spacing:-.01em}
.step h2 .n{width:22px; height:22px; border-radius:999px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:12px}
.step h2 .val{margin-left:auto; font-weight:500; color:var(--ink-2); font-size:14px}

.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{height:42px; min-width:42px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--card);
  cursor:pointer; font-weight:500; font-size:15px; transition:background .12s, border-color .12s}
.pill:hover{border-color:var(--ink-3)}
.pill[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pill:disabled{color:var(--ink-3); background:var(--bg-2); border-color:transparent; text-decoration:line-through; cursor:not-allowed}

.days{display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin:0 -2px;
  scrollbar-width:thin}
.day{flex:none; width:64px; padding:10px 0; border-radius:16px; border:1px solid var(--line); background:var(--card);
  cursor:pointer; text-align:center; scroll-snap-align:start; line-height:1.15}
.day small{display:block; font-size:12px; color:var(--ink-2); text-transform:capitalize}
.day b{display:block; font-size:21px; font-weight:600; letter-spacing:-.03em; margin:2px 0}
.day:hover{border-color:var(--ink-3)}
.day[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.day[aria-pressed="true"] small{color:inherit; opacity:.7}
.day.closed{opacity:.4; cursor:not-allowed}

.slot-group + .slot-group{margin-top:16px}
.slot-group h3{font-size:12.5px; font-weight:600; color:var(--ink-3); margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em}
.slots{display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px}
.slots .pill{font-family:var(--mono); font-size:14px; padding:0}
.empty{padding:18px; border-radius:14px; background:var(--bg-2); color:var(--ink-2); font-size:14.5px; text-align:center}

.field{display:grid; gap:6px; margin-bottom:12px}
.field label{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.input{height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); width:100%; font-size:16px}
textarea.input{height:auto; min-height:76px; padding:12px 14px; resize:vertical}
.input:focus,.pill:focus-visible,.day:focus-visible,.btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .row2{grid-template-columns:1fr} }
.check{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); margin:6px 0 16px}
.check input{margin-top:3px; accent-color:var(--blue)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.err{color:var(--red); font-size:14px; margin:0 0 12px}
.summary{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.summary span{background:var(--bg-2); border-radius:999px; padding:6px 12px; font-size:14px; font-weight:500}

.done{text-align:center; padding:36px 22px}
.done .tick{width:64px; height:64px; border-radius:999px; background:var(--green-soft); color:var(--green); display:grid; place-items:center;
  font-size:30px; margin:0 auto 18px}
.done h2{justify-content:center; font-size:32px; letter-spacing:-.04em; margin:0 0 6px; font-weight:650}
.code{font-family:var(--mono); font-size:30px; letter-spacing:.18em; font-weight:600; background:var(--bg-2);
  border-radius:16px; padding:14px 20px; display:inline-block; margin:18px 0 6px}
.done .actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.linkbox{display:flex; gap:8px; margin-top:16px; text-align:left}
.linkbox input{flex:1; font-family:var(--mono); font-size:13px; height:40px}

.toplang{display:flex; gap:6px}

/* ---------- staff board ---------- */
.board{max-width:1200px; margin:0 auto; padding:24px 24px 80px}
@media (max-width:600px){ .board{padding:16px 16px 64px} }
.board-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.board-head h1{font-size:clamp(30px, 4vw, 44px); letter-spacing:-.045em; margin:0; font-weight:650; line-height:1.05; text-transform:capitalize}
.datenav{display:flex; gap:6px; align-items:center; margin-left:auto}
.datenav input{height:36px; border-radius:999px; border:1px solid var(--line); background:var(--card); padding:0 12px; font-size:14px}
.stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:22px}
@media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} }
.stat{background:var(--bg-2); border-radius:20px; padding:18px 20px}
.stat small{display:block; color:var(--ink-2); font-size:13.5px}
.stat b{display:block; font-size:38px; letter-spacing:-.045em; font-weight:650; line-height:1.1; margin-top:4px}
.stat b em{font-style:normal; font-size:16px; color:var(--ink-3); letter-spacing:0; font-weight:500}

.loadcard{background:var(--bg-2); border-radius:20px; padding:18px 20px; margin-top:12px}
.loadcard-head{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2); margin-bottom:12px}
.load{display:flex; align-items:flex-end; gap:3px; height:72px}
.load .bar{flex:1; min-width:4px; background:var(--bg-3); border-radius:4px; position:relative; height:100%}
.load .bar i{position:absolute; left:0; right:0; bottom:0; border-radius:4px; background:var(--blue)}
.load .bar.hot i{background:var(--amber)}
.load .bar.full i{background:var(--red)}
.load .gap{width:14px; flex:none}
.load-labels{display:flex; gap:3px; margin-top:6px; font-family:var(--mono); font-size:10.5px; color:var(--ink-3)}
.load-labels span{flex:1; min-width:4px; overflow:visible; white-space:nowrap}
.load-labels .gap{width:14px; flex:none}

.list{margin-top:22px; display:grid; gap:8px}
.list h3{font-size:12.5px; font-weight:600; color:var(--ink-3); margin:14px 0 2px; text-transform:uppercase; letter-spacing:.06em}
.bk{display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:14px 16px}
.bk .t{font-family:var(--mono); font-size:17px; font-weight:600}
.bk .who{min-width:0}
.bk .who b{font-weight:600; font-size:16px; letter-spacing:-.01em}
.bk .who .sub{display:flex; gap:6px 12px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2); margin-top:2px}
.bk .who .sub a{text-decoration:none}
.bk .note{margin-top:6px; font-size:13.5px; background:var(--amber-soft); color:var(--amber); padding:4px 10px; border-radius:8px; display:inline-block}
.bk .acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.bk.is-seated{background:var(--green-soft); border-color:transparent}
.bk.is-cancelled,.bk.is-no_show{opacity:.5}
.bk.is-cancelled .who b{text-decoration:line-through}
@media (max-width:640px){ .bk{grid-template-columns:52px 1fr} .bk .acts{grid-column:1 / -1; justify-content:flex-start} }
.badge{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--bg-2); color:var(--ink-2)}
.badge.party{background:var(--ink); color:var(--bg)}
.badge.online{background:var(--blue-soft); color:var(--blue)}
.badge.seated{background:var(--green); color:#fff}
.badge.no_show{background:var(--red-soft); color:var(--red)}

.login{min-height:80vh; display:grid; place-items:center; padding:24px 16px}
.login .step{width:min(400px, 100%); padding:30px}
.login h1{font-size:30px; letter-spacing:-.04em; margin:0 0 4px; font-weight:650}

dialog{border:0; border-radius:28px; padding:0; width:min(520px, calc(100% - 32px)); background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.35); backdrop-filter:blur(4px)}
dialog form{padding:26px}
dialog h2{margin:0 0 18px; font-size:24px; letter-spacing:-.035em; font-weight:650}
.dialog-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:12px 18px;
  border-radius:999px; font-size:14.5px; box-shadow:var(--shadow); z-index:50}

/* ---------- settings ---------- */
.settings{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; align-items:start}
.settings .step + .step{margin-top:0}
.settings .wide{grid-column:1 / -1}
@media (max-width:820px){ .settings{grid-template-columns:1fr} }
select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.hours-edit{display:grid; gap:2px}
.dayrow{display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.dayrow:first-child{border-top:0}
.dayrow .dname{display:flex; align-items:center; gap:10px; font-weight:550}
.dayrow .svcs{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.dayrow .closed-label{color:var(--ink-3); font-size:14.5px}
.svc{display:inline-flex; align-items:center; gap:6px; background:var(--bg-2); border-radius:999px; padding:4px 6px 4px 12px}
.svc select{border:0; background:transparent; height:32px; font-family:var(--mono); font-size:14px; padding:0 4px; cursor:pointer; appearance:none}
.svc select:hover{background:var(--bg-3); border-radius:8px}
.svc select:focus{outline:2px solid var(--blue); border-radius:8px}
.svc select option{background:var(--card); color:var(--ink)}
.svc .x{width:26px; height:26px; border-radius:999px; border:0; background:transparent; cursor:pointer; color:var(--ink-2)}
.svc .x:hover{background:var(--bg-3)}
@media (max-width:560px){ .dayrow{grid-template-columns:1fr} }
.switch{position:relative; width:40px; height:24px; flex:none}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.switch span{position:absolute; inset:0; border-radius:999px; background:var(--bg-3); transition:background .15s; pointer-events:none}
.switch span::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s}
.switch input:checked + span{background:var(--green)}
.switch input:checked + span::after{transform:translateX(16px)}
.switch input:focus-visible + span{outline:2px solid var(--blue); outline-offset:2px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chips:empty::before{content:"Nessun giorno di chiusura."; color:var(--ink-3); font-size:14px}
.chips .svc{padding:4px 4px 4px 12px; font-size:14px}
.savebar{position:sticky; bottom:16px; margin-top:16px; display:flex; align-items:center; gap:14px; justify-content:flex-end;
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 20px; box-shadow:var(--shadow)}
.savebar #dirty{margin-right:auto; font-size:14.5px}
.savebar.is-dirty #dirty{color:var(--ink); font-weight:550}