[hidden]{display:none!important}
/* Layout: phone-first app shell, one 760px column, sticky top bar, fixed 6-tab bottom bar, bottom sheets for every form, a dark "stage" panel opens Home and the client showcase. */
:root{
  --bg:#F3F2F8; --surface:#FFFFFF; --surface-2:#ECEAF4; --ink:#17142B; --ink-2:#55516D; --muted:#77728F; --line:#E1DEEB;
  --accent:#007E8C; --accent-soft:#DDF1F3; --accent-ink:#FFFFFF;
  --stage:#141029; --stage-2:#241C4A; --stage-ink:#F2EFFF; --stage-muted:#ADA6D0;
  --beam-1:#3FE0EC; --beam-2:#FF5C9A; --beam-3:#9B8CFF;
  --ok:#1C7F47; --ok-bg:#E1F2E7; --warn:#935700; --warn-bg:#FBEED6; --bad:#B83434; --bad-bg:#F8E1E1;
  --hold:#5B4BB7; --hold-bg:#ECE8FB;
  --s-rev:#00909F; --s-cost:#eb6834;
  --shadow:0 1px 2px rgba(23,20,43,.05), 0 6px 20px rgba(23,20,43,.06);
  --scrim:rgba(14,11,30,.45);
  --f-display:'Lalezar','Readex Pro',system-ui,sans-serif;
  --f-ui:'Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif;
  --r:16px;
  --acc-dk:#3CCAD6; --acc-soft-dk:#11323A; --acc-ink-dk:#04191C;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0D0B18; --surface:#16132A; --surface-2:#211D39; --ink:#EEEBF8; --ink-2:#B8B2CF; --muted:#8A84A8; --line:#2B2646;
  --accent:#3CCAD6; --accent-soft:#11323A; --accent-ink:#04191C;
  --stage:#1B1637; --stage-2:#2C2358;
  --ok:#55C686; --ok-bg:#12301F; --warn:#E6A440; --warn-bg:#33250D; --bad:#EF7070; --bad-bg:#3A1818;
  --hold:#A99BFF; --hold-bg:#251F45;
  --s-rev:#18A7B5; --s-cost:#d95926; --shadow:0 1px 0 rgba(255,255,255,.03); --scrim:rgba(0,0,0,.6);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0D0B18; --surface:#16132A; --surface-2:#211D39; --ink:#EEEBF8; --ink-2:#B8B2CF; --muted:#8A84A8; --line:#2B2646;
  --accent:#3CCAD6; --accent-soft:#11323A; --accent-ink:#04191C;
  --stage:#1B1637; --stage-2:#2C2358;
  --ok:#55C686; --ok-bg:#12301F; --warn:#E6A440; --warn-bg:#33250D; --bad:#EF7070; --bad-bg:#3A1818;
  --hold:#A99BFF; --hold-bg:#251F45;
  --s-rev:#18A7B5; --s-cost:#d95926; --shadow:0 1px 0 rgba(255,255,255,.03); --scrim:rgba(0,0,0,.6);
  color-scheme:dark }

*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.25}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
p{margin:0}
a{color:var(--accent)}

.app{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 calc(150px + env(safe-area-inset-bottom,0px))}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);display:flex;align-items:center;gap:10px;padding-block:12px 10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.brand svg,.brand img{flex:none}
.brand img{width:34px;height:34px;border-radius:10px;object-fit:cover}
.brand-name{font-family:var(--f-display);font-size:1.45rem;line-height:1;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600;white-space:nowrap}

.view{display:flex;flex-direction:column;gap:18px}
.section{display:flex;flex-direction:column;gap:10px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.section-head .link{background:none;border:0;color:var(--accent);font-weight:600;font-size:.88rem;padding:4px}
.subhead{display:flex;align-items:center;gap:10px}
.subhead h1{flex:1;font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:14px}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.tiny{font-size:.74rem}
.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--accent-soft);color:var(--ink);font-size:.88rem}
.banner.warn{background:var(--warn-bg)}
.stack{display:flex;flex-direction:column;gap:8px}
.row-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Stage */
.stage{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;background:radial-gradient(120% 90% at 60% -10%, var(--stage-2), var(--stage) 60%);color:var(--stage-ink);padding:20px 18px 18px;min-height:184px;display:flex;flex-direction:column;gap:6px}
.stage .greet{font-size:.85rem;color:var(--stage-muted)}
.stage .big{font-family:var(--f-display);font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.1;font-weight:400}
.stage .sub{font-size:.9rem;color:var(--stage-muted);max-width:40ch}
.stage .sub b{color:var(--stage-ink);font-weight:600}
.stage .date{margin-top:auto;font-size:.8rem;color:var(--stage-muted);letter-spacing:.04em}
.stage .tonight-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.stage .tl{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;font-size:.85rem;text-align:start;color:inherit;width:100%}
.stage .tl .t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--beam-1)}
.stage .tl .tlx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beam{position:absolute;top:-6px;inset-inline-end:16%;width:2px;height:150%;transform-origin:50% 0;opacity:.5;z-index:-1;border-radius:2px}
.beam.b1{background:linear-gradient(to bottom,var(--beam-1),transparent 75%);--r:28deg;animation:sweep 8s ease-in-out infinite alternate}
.beam.b2{background:linear-gradient(to bottom,var(--beam-2),transparent 70%);--r:48deg;animation:sweep 11s ease-in-out -3s infinite alternate}
.beam.b3{background:linear-gradient(to bottom,var(--beam-3),transparent 72%);--r:66deg;animation:sweep 9.5s ease-in-out -5s infinite alternate}
.beam{transform:rotate(var(--r))}
.head-dot{position:absolute;top:-4px;inset-inline-end:calc(16% - 4px);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 4px rgba(255,255,255,.35);z-index:-1}
.fog{position:absolute;inset:auto -30% -45% -30%;height:85%;z-index:-1;background:radial-gradient(45% 50% at 30% 60%,rgba(255,255,255,.16),transparent 70%),radial-gradient(40% 45% at 70% 70%,rgba(190,180,255,.14),transparent 70%),radial-gradient(35% 40% at 50% 85%,rgba(255,255,255,.12),transparent 70%);filter:blur(4px);animation:drift 16s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(calc(var(--r) - 9deg))}to{transform:rotate(calc(var(--r) + 9deg))}}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
[dir="rtl"] .beam{transform:rotate(calc(var(--r) * -1))}
[dir="rtl"] .beam.b1,[dir="rtl"] .beam.b2,[dir="rtl"] .beam.b3{animation-name:sweep-rtl}
@keyframes sweep-rtl{from{transform:rotate(calc(var(--r) * -1 + 9deg))}to{transform:rotate(calc(var(--r) * -1 - 9deg))}}
@media (prefers-reduced-motion: reduce){.beam,.fog{animation:none!important}}

/* Quick actions + segmented */
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.qbtn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:.76rem;font-weight:500;color:var(--ink);text-align:center;line-height:1.25}
.qbtn svg{color:var(--accent)}
.qbtn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.qbtn.primary svg{color:var(--accent-ink)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{border:0;background:none;padding:6px 12px;border-radius:999px;font-size:.82rem;color:var(--ink-2);font-weight:500;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.seg.full{display:flex}
.seg.full button{flex:1}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi .k{font-size:.74rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
[dir="rtl"] .kpi .k{letter-spacing:0;font-size:.8rem}
.kpi .v{font-size:1.3rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.kpi .s{font-size:.78rem;color:var(--ink-2)}
.kpi.hero{grid-column:1/-1}
.kpi.hero .v{font-size:1.75rem}
.pos{color:var(--ok)} .neg{color:var(--bad)}
@media (min-width:620px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi.hero{grid-column:auto}.kpi.hero .v{font-size:1.3rem}}
.goal{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.goal .bar,.progress{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.goal .bar i,.progress i{display:block;height:100%;background:var(--ok);border-radius:4px}

/* Alerts */
.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border:0;background:none;text-align:start;width:100%;border-top:1px solid var(--line);color:var(--ink);font-size:.88rem}
.alert:first-child{border-top:0}
.alert .ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.lvl-bad .ic{background:var(--bad-bg);color:var(--bad)}
.lvl-warn .ic{background:var(--warn-bg);color:var(--warn)}
.lvl-info .ic{background:var(--accent-soft);color:var(--accent)}
.lvl-hold .ic{background:var(--hold-bg);color:var(--hold)}
.alert .tx{min-width:0;flex:1}
.alert .tx b{font-weight:600}
.empty{padding:18px 14px;color:var(--muted);font-size:.88rem;text-align:center}

/* Nights strip */
.nights{display:grid;grid-template-columns:repeat(14,minmax(40px,1fr));gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.night{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:.7rem;color:var(--ink-2)}
.night .d{font-size:.95rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.night .slots{font-size:.68rem;font-weight:600;font-variant-numeric:tabular-nums;padding:1px 6px;border-radius:999px}
.st-free .slots{background:var(--ok-bg);color:var(--ok)}
.st-partial .slots{background:var(--warn-bg);color:var(--warn)}
.st-full .slots,.st-closed .slots{background:var(--bad-bg);color:var(--bad)}
.night.is-today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* Booking cards */
.blist{display:flex;flex-direction:column;gap:8px}
.bcard{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;width:100%;text-align:start;color:var(--ink)}
.dtile{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--surface-2);padding:6px 2px;line-height:1.1}
.dtile .dd{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.dtile .mm{font-size:.66rem;color:var(--ink-2)}
.bc-main{min-width:0;display:flex;flex-direction:column;gap:3px}
.bc-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-meta{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.acc{background:var(--accent-soft);color:var(--accent)}
.chip.hold{background:var(--hold-bg);color:var(--hold)}
.chip.ex{background:transparent;border:1px dashed var(--muted);color:var(--muted)}
.bc-money{text-align:end;display:flex;flex-direction:column;gap:2px;align-items:flex-end;font-variant-numeric:tabular-nums}
.bc-money .tot{font-weight:600;font-size:.9rem;white-space:nowrap}
.cancelled .bc-name{text-decoration:line-through;color:var(--muted)}

/* Search & filters */
.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 12px}
.searchbox input{border:0;background:none;padding:11px 0;flex:1;min-width:0;outline:none}
.fchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.fchip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:.82rem;white-space:nowrap;color:var(--ink-2)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fchip .n{opacity:.7;margin-inline-start:4px;font-variant-numeric:tabular-nums}

/* Calendar */
.calhead{display:flex;align-items:center;gap:8px}
.calhead h2{flex:1;font-family:var(--f-display);font-weight:400;font-size:1.5rem}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:38px;height:38px;display:grid;place-items:center;color:var(--ink);flex:none}
.pill-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:500}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .wd{font-size:.68rem;color:var(--muted);text-align:center;padding-bottom:2px;overflow:hidden;white-space:nowrap}
.day{aspect-ratio:1/1.08;max-width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 2px 7px;font-variant-numeric:tabular-nums;color:var(--ink);min-width:0}
.day .dn{font-size:.9rem;font-weight:600}
.day .dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.day .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25}
.day .dots i.on{opacity:1}
.day .dots i.h{opacity:1;background:transparent;box-shadow:inset 0 0 0 1.5px var(--hold)}
.day .cnt{font-size:.64rem;font-weight:600}
.day.st-free{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.day.st-partial{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.day.st-full{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.day.st-closed{background:repeating-linear-gradient(135deg,var(--bad-bg) 0 5px,var(--surface) 5px 10px);border-color:transparent;color:var(--bad)}
.day.st-free .dn,.day.st-partial .dn,.day.st-full .dn,.day.st-closed .dn{color:var(--ink)}
.day.past{background:var(--surface);border-color:var(--line);color:var(--muted);opacity:.7}
.day.past .dn{color:var(--muted)}
.day.is-today{box-shadow:inset 0 0 0 2px var(--accent)}
.day.blank{visibility:hidden}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.lg-free{background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.lg-partial{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn)}
.lg-full{background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.lg-closed{background:repeating-linear-gradient(135deg,var(--bad-bg) 0 3px,var(--surface) 3px 6px);box-shadow:inset 0 0 0 1px var(--bad)}
.lg-hold{box-shadow:inset 0 0 0 1.5px var(--hold);border-radius:50%!important}
.calstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.calstats .kpi .v{font-size:1.15rem}

/* Money / charts */
.periodnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.periodnav .label{flex:1;font-family:var(--f-display);font-size:1.4rem;min-width:8ch}
.chart-card{padding:14px;display:flex;flex-direction:column;gap:10px}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--ink-2)}
.chart-legend span{display:inline-flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.chart{position:relative;width:100%;min-height:200px}
.chart svg{display:block;width:100%;height:auto;overflow:visible;direction:ltr}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis-t{fill:var(--muted);font-size:10.5px;font-family:var(--f-ui)}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:10px;padding:8px 10px;font-size:.78rem;line-height:1.4;white-space:nowrap;z-index:2;font-variant-numeric:tabular-nums;transform:translate(-50%,-100%)}
.tip i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-inline-end:6px}
.tablewrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}
table.data th,table.data td{padding:7px 8px;text-align:end;border-bottom:1px solid var(--line);white-space:nowrap}
table.data th:first-child,table.data td:first-child{text-align:start}
table.data th{font-weight:500;color:var(--muted);font-size:.75rem}
.barrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 14px;border-top:1px solid var(--line)}
.barrow:first-child{border-top:0}
.barrow .bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.barrow .bar i{display:block;height:100%;background:var(--s-rev);border-radius:3px}
.barrow.cost .bar i{background:var(--s-cost)}
.row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);width:100%;background:none;border-inline:0;border-bottom:0;text-align:start;color:var(--ink)}
.row:first-child{border-top:0}
.row .grow{flex:1;min-width:0}
.row .t1{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t2.wrap{white-space:normal}
.row .amt{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.row .thumb{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface-2);display:grid;place-items:center;font-size:1.2rem}
.row .chev{color:var(--muted);flex:none}
[dir="rtl"] .row .chev{transform:scaleX(-1)}
.grouphead{display:flex;align-items:center;gap:8px;padding:10px 14px 4px;font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em}

/* Tabs */
.tabs{position:fixed;inset:auto 0 0 0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(4px,env(safe-area-inset-left,0px));padding-right:max(4px,env(safe-area-inset-right,0px))}
.tabs-in{max-width:760px;margin:0 auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.tab{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 8px;font-size:.66rem;color:var(--muted);font-weight:500;min-width:0}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab[aria-current="page"]{color:var(--accent)}
.fab{position:fixed;z-index:24;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:13px 18px;font-weight:600;font-size:.92rem;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
@media (min-width:800px){.fab{inset-inline-end:calc(50% - 380px)}}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim)}
.sheet-panel{background:var(--surface);width:100%;max-width:640px;max-height:calc(100% - env(safe-area-inset-top,0px) - 24px);overflow-y:auto;border-radius:22px 22px 0 0;padding-block:8px calc(20px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.sheet-panel>*{flex-shrink:0}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 0;flex:none}
.sheet-head{display:flex;align-items:flex-start;gap:10px}
.sheet-head .ttl{flex:1;min-width:0}
.sheet-head h2{font-size:1.2rem}
.form{display:flex;flex-direction:column;gap:12px}
.fs{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;margin:0;min-width:0}
.fs legend{font-size:.8rem;font-weight:600;color:var(--ink-2);padding:0 6px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.flabel{font-size:.78rem;color:var(--ink-2);font-weight:500}
.fhint{font-size:.74rem;color:var(--muted)}
.field input,.field select,.field textarea,.inp{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:11px;padding:10px 11px;outline:none;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:70px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.check{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:.85rem;background:var(--bg);cursor:pointer}
.check input{accent-color:var(--accent);margin:0}
.check.on{border-color:var(--accent);background:var(--accent-soft)}
.check.dis{opacity:.55}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 16px;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:7px;justify-content:center;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad);border-color:var(--bad-bg);background:var(--bad-bg)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.sm{padding:7px 11px;font-size:.82rem;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.sumbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--surface-2);border-radius:14px;padding:12px}
.sumbox div{display:flex;flex-direction:column;gap:1px;min-width:0}
.sumbox .k{font-size:.72rem;color:var(--muted)}
.sumbox .v{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.note{font-size:.83rem;padding:9px 12px;border-radius:11px}
.note.ok{background:var(--ok-bg);color:var(--ok)}
.note.warn{background:var(--warn-bg);color:var(--warn)}
.note.bad{background:var(--bad-bg);color:var(--bad)}
.note.info{background:var(--accent-soft);color:var(--ink)}
.note.hold{background:var(--hold-bg);color:var(--hold)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:.88rem;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.box{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.box-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.inline-form .field{flex:1;min-width:110px}
.list-mini{display:flex;flex-direction:column;gap:6px}
.list-mini .li{display:flex;align-items:center;gap:8px;font-size:.86rem}
.list-mini .li .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.x{border:0;background:none;color:var(--muted);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.prep{display:flex;flex-direction:column;gap:2px}
.prep label{display:flex;align-items:center;gap:10px;font-size:.88rem;padding:6px 0}
.prep input{width:20px;height:20px;accent-color:var(--ok);flex:none}
.contact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.confirm{background:var(--bad-bg);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.confirm p{color:var(--ink);font-size:.9rem}
.picker{display:flex;flex-direction:column;gap:10px}
.picker .ptype{display:flex;flex-direction:column;gap:6px}
.picker .ptype-h{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.mchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;padding:7px 10px;font-size:.82rem;background:var(--bg);cursor:pointer;text-align:start}
.mchip input{accent-color:var(--accent);margin:0}
.mchip .p{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.76rem}
.mchip.on{border-color:var(--accent);background:var(--accent-soft)}
.mchip.busy{border-style:dashed;border-color:var(--bad)}
.mchip.busy .p{color:var(--bad)}
.crewrow{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px;align-items:center}
.crewrow .check{border-radius:12px}
.msgbox textarea{width:100%;min-height:220px;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:12px;font:inherit;font-size:.88rem;line-height:1.5;resize:vertical}
.sendbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.sendbar .btn{flex-direction:column;gap:4px;padding:10px 6px;font-size:.78rem}
.packcalc{display:flex;flex-direction:column;gap:8px}
.pc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px}
.pc input{width:20px;height:20px;accent-color:var(--accent)}
.pc .nm{font-weight:600}
.pc .its{font-size:.78rem;color:var(--muted)}
.pc .pr{text-align:end;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.pc .mg{font-size:.72rem;font-weight:500}
.favs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}

/* Contract / documents */
.paper{background:#FFFFFF;color:#1B1830;border-radius:12px;border:1px solid var(--line);padding:18px;font-size:.84rem;line-height:1.6;display:flex;flex-direction:column;gap:10px}
.paper .ph{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:2px solid #1B1830;padding-bottom:8px}
.paper .pname{font-family:var(--f-display);font-size:1.35rem;line-height:1.1}
.paper h3{font-size:1rem;text-align:center}
.paper table{width:100%;border-collapse:collapse}
.paper td{padding:4px 0;border-bottom:1px dashed #D6D3E0;vertical-align:top}
.paper td:last-child{text-align:end;font-variant-numeric:tabular-nums}
.paper ol{margin:0;padding-inline-start:20px}
.paper .signs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.paper .signs div{border-top:1px solid #1B1830;padding-top:4px;font-size:.75rem;color:#5A566F;min-height:44px}

/* Client showcase */
.show{display:flex;flex-direction:column;gap:18px}
.show-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;background:radial-gradient(120% 100% at 70% -10%, var(--stage-2), var(--stage) 62%);color:var(--stage-ink);padding:28px 20px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.show-hero .logo{width:72px;height:72px;border-radius:20px;object-fit:cover;background:rgba(255,255,255,.08);display:grid;place-items:center}
.show-hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,8vw,2.8rem);line-height:1}
.show-hero .loc{font-size:.85rem;color:var(--stage-muted)}
.show-hero .intro{font-size:.92rem;color:var(--stage-ink);max-width:42ch;opacity:.9;white-space:pre-line}
.show h2.sh{font-family:var(--f-display);font-weight:400;font-size:1.45rem}
.spack{padding:16px;display:flex;flex-direction:column;gap:8px}
.spack .nm{font-family:var(--f-display);font-size:1.35rem;line-height:1.1}
.spack ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:.92rem}
.spack .pr{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.spack .desc{font-size:.85rem;color:var(--ink-2)}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.svc{padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.svc .em{font-size:1.5rem;line-height:1}
.svc .nm{font-weight:600}
.svc .d{font-size:.8rem;color:var(--ink-2)}
.why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.why li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;font-size:.92rem}
.why li svg{flex:none;color:var(--ok);margin-top:2px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.gallery img,.gallery .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;font-size:1.6rem}
.gallery figcaption{font-size:.78rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb{padding:14px;display:flex;flex-direction:column;gap:6px}
.fb .stars{color:#E2A400;letter-spacing:2px}
.fb img{max-width:100%;border-radius:10px}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.soc{padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.soc .qr{width:100%;max-width:150px;aspect-ratio:1;background:#fff;border-radius:10px;padding:6px;display:grid;place-items:center}
.soc .qr svg,.soc .qr img{width:100%;height:100%}
.soc .nm{font-weight:600}
.soc .h{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}
.cm-exit{position:fixed;z-index:26;inset-inline-start:max(12px,env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 12px;font-size:.75rem;opacity:.75}

/* Lock screen */
.lock{position:fixed;inset:0;z-index:70;background:radial-gradient(120% 90% at 60% -10%, var(--stage-2), var(--stage) 60%);color:var(--stage-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}
.lock h1{font-family:var(--f-display);font-weight:400;font-size:2rem}
.lock input{width:180px;text-align:center;font-size:1.6rem;letter-spacing:.5em;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--stage-ink);padding:10px}
.lock .err{color:#FF9A9A;font-size:.85rem;min-height:1.2em}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(140px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:.88rem;font-weight:500;max-width:calc(100% - 32px);text-align:center}
.skel{padding:28px 14px;text-align:center;color:var(--muted)}
.tag-ex{font-size:.66rem;color:var(--muted);border:1px dashed var(--muted);border-radius:6px;padding:0 5px;margin-inline-start:6px;white-space:nowrap}
.menu{display:flex;flex-direction:column}
.menu .row .ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.photo-in{display:flex;align-items:center;gap:10px}
.photo-in img,.photo-in .ph{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}
.photo-in input[type=file]{font-size:.8rem;max-width:100%}

/* ---------- v3: accent colours (Settings → Appearance) ---------- */
:root[data-accent="violet"]{--acc-dk:#A99BFF;--acc-soft-dk:#262044;--acc-ink-dk:#120C30;--accent:#5B48D6;--accent-soft:#E9E5FB;--accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="violet"]:not([data-theme="light"]){--accent:#A99BFF;--accent-soft:#262044;--accent-ink:#120C30}}
:root[data-accent="violet"][data-theme="dark"]{--accent:#A99BFF;--accent-soft:#262044;--accent-ink:#120C30}
:root[data-accent="rose"]{--acc-dk:#FF7BA8;--acc-soft-dk:#3A1828;--acc-ink-dk:#2A0614;--accent:#C2366B;--accent-soft:#FBE3EC;--accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="rose"]:not([data-theme="light"]){--accent:#FF7BA8;--accent-soft:#3A1828;--accent-ink:#2A0614}}
:root[data-accent="rose"][data-theme="dark"]{--accent:#FF7BA8;--accent-soft:#3A1828;--accent-ink:#2A0614}
:root[data-accent="gold"]{--acc-dk:#F2B84B;--acc-soft-dk:#33270F;--acc-ink-dk:#2A1A00;--accent:#8F5C00;--accent-soft:#FBEFD9;--accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="gold"]:not([data-theme="light"]){--accent:#F2B84B;--accent-soft:#33270F;--accent-ink:#2A1A00}}
:root[data-accent="gold"][data-theme="dark"]{--accent:#F2B84B;--accent-soft:#33270F;--accent-ink:#2A1A00}
:root[data-accent="blue"]{--acc-dk:#6FA6FF;--acc-soft-dk:#142640;--acc-ink-dk:#071533;--accent:#1F64D6;--accent-soft:#E2ECFC;--accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="blue"]:not([data-theme="light"]){--accent:#6FA6FF;--accent-soft:#142640;--accent-ink:#071533}}
:root[data-accent="blue"][data-theme="dark"]{--accent:#6FA6FF;--accent-soft:#142640;--accent-ink:#071533}
:root[data-accent="emerald"]{--acc-dk:#4FD39F;--acc-soft-dk:#0F3326;--acc-ink-dk:#03200F;--accent:#11845B;--accent-soft:#DDF3EA;--accent-ink:#FFFFFF}
@media (prefers-color-scheme: dark){:root[data-accent="emerald"]:not([data-theme="light"]){--accent:#4FD39F;--accent-soft:#0F3326;--accent-ink:#03200F}}
:root[data-accent="emerald"][data-theme="dark"]{--accent:#4FD39F;--accent-soft:#0F3326;--accent-ink:#03200F}

/* ---------- v3: Home controls — day/night switch and private mode ---------- */
.homectl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.daynight{position:relative;isolation:isolate;width:64px;height:32px;border:0;padding:0;border-radius:999px;overflow:hidden;flex:none;background:linear-gradient(180deg,#56B4F0,#A8DCFF);box-shadow:inset 0 1px 3px rgba(0,0,0,.2),0 1px 2px rgba(23,20,43,.08)}
.daynight::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#120E30,#302873);opacity:0;transition:opacity .6s ease}
.daynight.is-night::before{opacity:1}
.dn-sky{position:absolute;inset:0;z-index:1;pointer-events:none}
.dn-sky .st{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transform:scale(.2);transition:opacity .4s ease .25s,transform .5s cubic-bezier(.3,1.6,.5,1) .25s}
.dn-sky .s1{top:7px;inset-inline-start:11px}
.dn-sky .s2{top:18px;inset-inline-start:20px;width:2px;height:2px}
.dn-sky .s3{top:9px;inset-inline-start:29px;width:2px;height:2px}
.daynight.is-night .st{opacity:1;transform:scale(1);animation:dn-twinkle 2.6s ease-in-out .9s infinite}
.daynight.is-night .s2{animation-delay:1.5s}
.daynight.is-night .s3{animation-delay:2.1s}
.dn-sky .cl{position:absolute;background:#fff;border-radius:999px;transition:transform .55s cubic-bezier(.5,0,.3,1),opacity .35s ease}
.dn-sky .c1{width:22px;height:9px;bottom:5px;inset-inline-end:7px;opacity:.95}
.dn-sky .c2{width:13px;height:7px;bottom:12px;inset-inline-end:20px;opacity:.75}
.daynight.is-night .cl{transform:translateY(20px);opacity:0}
.dn-knob{position:absolute;z-index:2;top:4px;inset-inline-start:4px;width:24px;height:24px;border-radius:50%;transition:transform .7s cubic-bezier(.68,-.45,.27,1.45)}
.daynight.is-night .dn-knob{transform:translateX(32px)}
[dir="rtl"] .daynight.is-night .dn-knob{transform:translateX(-32px)}
.dn-sun,.dn-moon{position:absolute;inset:0;border-radius:50%;transition:transform .7s cubic-bezier(.68,-.45,.27,1.45),opacity .35s ease}
.dn-sun{background:radial-gradient(circle at 35% 35%,#FFE989,#FFB300);box-shadow:0 0 0 3px rgba(255,214,90,.35),0 0 14px rgba(255,186,40,.85)}
.daynight.is-night .dn-sun{transform:rotate(200deg) scale(.2);opacity:0}
.dn-moon{background:radial-gradient(circle at 35% 35%,#FFFFFF,#CDC8E8);box-shadow:0 0 12px rgba(214,208,255,.6);transform:rotate(-160deg) scale(.2);opacity:0}
.daynight.is-night .dn-moon{transform:none;opacity:1}
.dn-moon i{position:absolute;border-radius:50%;background:rgba(112,104,165,.32)}
.dn-moon i:nth-child(1){width:7px;height:7px;top:5px;left:11px}
.dn-moon i:nth-child(2){width:4px;height:4px;top:13px;left:5px}
.dn-moon i:nth-child(3){width:3px;height:3px;top:16px;left:14px}
.daynight:active .dn-knob{transition-duration:.2s}
@keyframes dn-twinkle{0%,100%{opacity:1}50%{opacity:.3}}
.privbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:6px 13px;font-size:.84rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.privbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body.private span.m{display:inline-block;filter:blur(7px);user-select:none}
body.private div.m,body.private .chart,body.private .tablewrap{filter:blur(8px);user-select:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){.daynight *,.daynight::before{transition-duration:.01s!important;animation:none!important}}

/* ---------- v3: machine icons and pickers ---------- */
.mi{display:inline-grid;place-items:center;color:var(--accent);flex:none;vertical-align:middle;line-height:0}
.show .mi,.show-hero .mi{color:var(--accent)}
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.iconpick .ip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:.68rem;line-height:1.2;text-align:center;min-width:0}
.iconpick .ip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.iconpick .ip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.iconpick.small-ip{grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
.iconpick.small-ip .ip{padding:8px 0}

/* ---------- v3: consumables, payment cards, lists ---------- */
.cons-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.cons-nums>div{background:var(--surface-2);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cons-nums .k{font-size:.72rem;color:var(--muted)}
.cons-nums .v{font-size:1.15rem;font-weight:700}
.card.is-short{box-shadow:inset 0 0 0 1.5px var(--bad)}
.card.is-low{box-shadow:inset 0 0 0 1.5px var(--warn)}
.warn-t{color:var(--warn)}
.pay{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.pay>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pay .k{font-size:.74rem;color:var(--muted);font-weight:600;letter-spacing:.03em}
.pay .v{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pay .s{font-size:.8rem;color:var(--ink-2)}
.show-hero .slogan{font-size:.98rem;color:var(--stage-ink);opacity:.88;letter-spacing:.02em;max-width:40ch}
.row-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:none;padding:0;text-align:start;color:inherit}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:46px;height:46px;border-radius:50%;border:2px solid transparent;padding:3px;background:none;transition:transform .2s}
.sw i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%)}
.sw.on{border-color:var(--ink)}
.sw:active{transform:scale(.92)}
input[type=range]{width:100%;accent-color:var(--accent);height:28px;margin:0}
.range-scale{position:relative;height:16px;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.range-scale span{position:absolute;top:0;transform:translateX(-50%)}
.range-scale span:first-child{transform:none}
.range-scale span:last-child{transform:translateX(-100%)}
[dir="rtl"] .range-scale span{transform:translateX(50%)}
[dir="rtl"] .range-scale span:first-child{transform:none}
[dir="rtl"] .range-scale span:last-child{transform:translateX(100%)}
button.link{background:none;border:0;color:var(--accent);font-weight:600;font-size:.88rem;padding:4px 2px}
.spack li{display:flex;align-items:center;gap:8px}
.mchip .mi{margin-inline-end:2px}
.lead-row{display:flex;align-items:flex-start;gap:10px}
.lead-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stepbtn{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.15rem;line-height:1;display:grid;place-items:center;margin-top:-3px}
.stepbtn:disabled{opacity:.35}

/* ---------- v4: top bar language switch, tonight button ---------- */
.langsw{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px;flex:none}
.langsw button{border:0;background:none;border-radius:999px;padding:5px 9px;font-size:.78rem;font-weight:700;color:var(--ink-2);min-width:32px;line-height:1.2}
.langsw button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.stage .big-btn{background:none;border:0;color:inherit;padding:0;text-align:start;display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.big-go{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;transition:transform .2s}
.big-btn:active .big-go{transform:scale(.9)}
.tn{gap:8px}
.tn-name{font-size:1.05rem}
.tn-row{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;flex-wrap:wrap;align-items:baseline}
.tn-row .k{color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.tn-fx{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- v4: PIN pad and lock screen ---------- */
.lock-in{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:340px}
.lock-logo img,.lock-logo svg{width:64px;height:64px;border-radius:18px;display:block;object-fit:cover}
.pinbox{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding-bottom:6px}
.pin-dots{display:flex;gap:14px;justify-content:center;min-height:18px}
.pin-dots i{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;opacity:.55;transition:transform .15s,background .15s,opacity .15s}
.pin-dots i.on{background:currentColor;opacity:1;transform:scale(1.08)}
.pin-dots.shake{animation:pin-shake .42s}
@keyframes pin-shake{0%,100%{transform:none}20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.pin-msg{min-height:1.3em;font-size:.88rem;text-align:center;opacity:.85}
.pin-msg.bad{color:var(--bad);opacity:1}
.lock .pin-msg.bad{color:#FF9A9A}
.pinpad{display:grid;grid-template-columns:repeat(3,72px);gap:14px 24px;justify-content:center}
.pk{width:72px;height:72px;border-radius:50%;border:1px solid rgba(127,127,127,.3);background:rgba(127,127,127,.12);color:inherit;font-size:1.65rem;font-weight:500;display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:transform .08s,background .15s;-webkit-tap-highlight-color:transparent}
.pk:active{transform:scale(.92);background:rgba(127,127,127,.3)}
.pk-alt{background:none;border-color:transparent;font-size:1.35rem}
.pinbox .btn.block{max-width:280px}
@media (max-height:640px){.pinpad{grid-template-columns:repeat(3,62px);gap:10px 20px}.pk{width:62px;height:62px;font-size:1.4rem}}

/* ---------- v4: booking, ads, social media, worker calendar ---------- */
.mchip.locked{border-color:var(--accent);background:var(--accent-soft);cursor:default}
.mchip.locked input{opacity:.55}
.adcard{display:flex;flex-direction:column;gap:10px;padding:14px;text-align:start;color:var(--ink);width:100%}
.socrow{display:flex;align-items:center;gap:8px}
.socname{width:112px;flex:none;display:inline-flex;gap:6px;align-items:center;font-size:.88rem;font-weight:600;overflow:hidden;white-space:nowrap}
.check.sm{padding:6px 9px}
.soc-off{opacity:.5}
.soc .chip{margin-top:2px}
.cs-contact-own{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cs-contact-own .qr,.cs-contact .qr{flex:none;width:124px;height:124px;background:#fff;border-radius:14px;padding:6px;display:grid;place-items:center}
.cs-contact-own .qr svg,.cs-contact .qr svg{width:100%;height:100%}
.cs-contact-own>div{flex:1;min-width:180px}
.wcal .day{aspect-ratio:1/1}
.wcal .day.wd-job{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.wcal .day.wd-job .dn{color:var(--accent-ink)}
.wcal .day.wd-past{background:var(--surface-2);color:var(--muted);border-color:transparent}
.favcopy{display:flex;flex-wrap:wrap;gap:6px}
.favcopy .fchip{display:inline-flex;align-items:center;gap:6px}

/* ---------- v4: Client section — a night show the client wants to book ---------- */
:root.on-client{--bg:#0A0718;--surface:#151030;--surface-2:#221A47;--ink:#F5F2FF;--ink-2:#CBC4EA;--muted:#9C94C6;--line:rgba(255,255,255,.1);
  --accent:var(--acc-dk);--accent-soft:var(--acc-soft-dk);--accent-ink:var(--acc-ink-dk);--shadow:0 1px 0 rgba(255,255,255,.04);--scrim:rgba(0,0,0,.6);
  --ok:#55C686;--ok-bg:#12301F;--warn:#E6A440;--warn-bg:#33250D;--bad:#EF7070;--bad-bg:#3A1818;color-scheme:dark}
.cs{gap:24px}
.cs-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:40px 20px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;color:#fff;
  background:radial-gradient(90% 70% at 50% 0%,#3D2085 0%,#1B1042 45%,#0A0718 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 70px -34px rgba(140,90,255,.7)}
.cs-sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cs-beam{position:absolute;top:-6%;left:50%;width:3px;height:150%;transform-origin:50% 0;opacity:.6;border-radius:3px;transform:rotate(var(--r))}
.cs-beam.k1{background:linear-gradient(#3FE0EC,transparent 72%);--r:-40deg;animation:cs-sweep 7s ease-in-out infinite alternate}
.cs-beam.k2{background:linear-gradient(#FF5C9A,transparent 70%);--r:-14deg;animation:cs-sweep 9s ease-in-out -2s infinite alternate}
.cs-beam.k3{background:linear-gradient(#A99BFF,transparent 72%);--r:14deg;animation:cs-sweep 8s ease-in-out -4s infinite alternate}
.cs-beam.k4{background:linear-gradient(#F2C14E,transparent 68%);--r:40deg;animation:cs-sweep 10s ease-in-out -6s infinite alternate}
@keyframes cs-sweep{from{transform:rotate(calc(var(--r) - 12deg))}to{transform:rotate(calc(var(--r) + 12deg))}}
.cs-src{position:absolute;top:-8px;left:calc(50% - 7px);width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 24px 10px rgba(255,255,255,.45)}
.cs-fog{position:absolute;inset:auto -30% -28% -30%;height:70%;background:radial-gradient(40% 50% at 30% 70%,rgba(255,255,255,.24),transparent 70%),radial-gradient(40% 50% at 70% 75%,rgba(200,180,255,.22),transparent 70%),radial-gradient(35% 40% at 50% 95%,rgba(255,255,255,.2),transparent 70%);filter:blur(6px);animation:drift 14s ease-in-out infinite alternate}
.cs-snow{position:absolute;inset:0;overflow:hidden}
.cs-snow i{position:absolute;top:-12px;left:var(--x);width:var(--z);height:var(--z);border-radius:50%;background:#fff;opacity:.85;animation:cs-fall var(--d) linear var(--dl) infinite}
@keyframes cs-fall{to{transform:translate3d(22px,640px,0);opacity:.15}}
.cs-logo{width:94px;height:94px;border-radius:28px;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(255,255,255,.2),0 0 46px rgba(63,224,236,.5);overflow:hidden;color:#fff}
.cs-logo img{width:100%;height:100%;object-fit:cover}
.cs-name{font-family:var(--f-display);font-weight:400;font-size:clamp(2.5rem,11vw,3.6rem);line-height:1;background:linear-gradient(92deg,#fff 0%,#BFF6FA 35%,#FFC2DA 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(255,92,154,.35))}
.cs-slogan{font-size:1.06rem;color:#ECE7FF;letter-spacing:.02em;max-width:36ch}
.cs-hl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cs-hl span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-size:.85rem;font-weight:600}
.cs-hl b{color:#F2C14E;letter-spacing:1px;font-weight:700}
.cs-intro{max-width:42ch;color:#DDD7F6;font-size:.95rem;white-space:pre-line}
.cs-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cs-btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 18px;font-weight:700;font-size:.95rem;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;transition:transform .15s}
.cs-btn:active{transform:scale(.96)}
.cs-btn.primary{background:linear-gradient(135deg,#3FE0EC,#A99BFF 55%,#FF5C9A);border:0;color:#120A2A;box-shadow:0 12px 32px -10px rgba(255,92,154,.7)}
.cs-loc{font-size:.85rem;color:#BDB4E4}
.cs-h{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.1;color:#fff;background:linear-gradient(90deg,#fff,#C9F7FA 60%,#FFD1E3);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-h3{font-size:1rem;margin-bottom:10px;color:#fff}
.cs-p{color:#CFC8EE;font-size:.92rem}
.cs-card{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.11);border-radius:22px;padding:16px;color:var(--ink)}
.cs-datebox{display:flex;flex-direction:column;gap:10px;text-align:center;align-items:center;background:radial-gradient(120% 120% at 50% 0%,rgba(63,224,236,.18),rgba(255,255,255,.03))}
.cs-input{width:100%;max-width:320px;font-size:1.1rem;padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.28);color:#fff;text-align:center;color-scheme:dark}
#cs-date-res{width:100%;max-width:420px}
.cs-res-in{display:flex;gap:12px;align-items:center;text-align:start;padding:14px 16px;border-radius:16px;animation:cs-pop .35s cubic-bezier(.3,1.5,.5,1)}
.cs-res-in>div{display:flex;flex-direction:column;gap:2px}
.cs-res-in.ok{background:rgba(85,198,134,.16);color:#86E9B0;border:1px solid rgba(85,198,134,.45)}
.cs-res-in.warn{background:rgba(242,193,78,.14);color:#F6D27E;border:1px solid rgba(242,193,78,.45)}
.cs-res-in.bad{background:rgba(239,112,112,.14);color:#FF9E9E;border:1px solid rgba(239,112,112,.45)}
.cs-res-in span{color:#EDE9FF;font-size:.9rem}
@keyframes cs-pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.cs-packs{display:flex;flex-direction:column;gap:14px}
.cs-pack{position:relative;isolation:isolate;padding:18px;border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 24%,#17112F),#120D2A 62%);border:1px solid color-mix(in srgb,var(--c) 48%,transparent);box-shadow:0 20px 44px -26px var(--c);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.cs-pack::before{content:"";position:absolute;top:-90px;inset-inline-end:-70px;width:230px;height:230px;border-radius:50%;background:radial-gradient(var(--c),transparent 65%);opacity:.28;z-index:-1;pointer-events:none}
.cs-pack-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.cs-pack h3{font-family:var(--f-display);font-weight:400;font-size:1.65rem;line-height:1.05;color:#fff}
.cs-price{font-size:1.4rem;font-weight:800;color:var(--c);text-shadow:0 0 20px color-mix(in srgb,var(--c) 60%,transparent);white-space:nowrap}
.cs-ribbon{align-self:flex-start;background:linear-gradient(90deg,#F2C14E,#FFDF8A);color:#2A1A00;border-radius:999px;padding:3px 11px;font-size:.75rem;font-weight:800}
.cs-fxs{display:flex;flex-wrap:wrap;gap:8px}
.cs-fx{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);font-size:.88rem;color:#F2EFFF}
[dir="rtl"] .cs-fx{padding:5px 5px 5px 12px}
.cs-fx .mi{color:var(--c);width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,transparent)}
.cs-desc{font-size:.9rem;color:#D3CCF0}
.cs-vids{display:flex;gap:8px;flex-wrap:wrap}
.cs-vid{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:var(--c);color:#120A2A;font-weight:700;font-size:.86rem;text-decoration:none;box-shadow:0 8px 20px -10px var(--c)}
.cs-addons{display:flex;flex-wrap:wrap;gap:8px}
.cs-add{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#fff}
.cs-add .mi{color:#F2C14E}
.cs-add b{color:#F2C14E}
.cs-svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-svc{padding:18px 12px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#fff;min-width:0}
.cs-svc-ic .mi{width:56px;height:56px;border-radius:18px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--c) 42%,transparent)}
.cs-svc .nm{font-weight:700}
.cs-svc .d{font-size:.8rem;color:#C3BBE6}
.cs-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cs-why li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);font-size:.95rem;color:#F1EEFF}
.cs-why .n{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:linear-gradient(135deg,#3FE0EC,#FF5C9A);color:#120A2A}
.cs-fbs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.cs-fb{flex:0 0 min(84%,320px);scroll-snap-align:start;margin:0;padding:16px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px}
.cs-fb .stars{color:#F2C14E;letter-spacing:2px;font-size:1.05rem}
.cs-fb .stars .off{opacity:.25}
.cs-fb blockquote{margin:0;font-size:.98rem;color:#F0ECFF;line-height:1.5}
.cs-fb img{border-radius:12px;max-height:240px;object-fit:cover;width:100%}
.cs-fb figcaption{font-size:.8rem;color:#ADA5D3}
.cs .pay{display:flex}
.cs .soc{text-decoration:none;color:#fff}
.cs-contact{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.cs-contact>div{display:flex;flex-direction:column;gap:4px}
.cs-contact span{font-size:.86rem;color:#CFC8EE}
.cs-gal figcaption{color:#E5E0FF}
.cs-foot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 4px;color:#ADA5D3;font-size:.85rem;text-align:center}
.cs-foot-name{font-family:var(--f-display);font-size:1.5rem;color:#fff}
.cs-tool,.cs-owner{border:1px dashed rgba(255,255,255,.25)}
@media (min-width:620px){.cs-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.cs-svcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cs-beam,.cs-fog{animation:none!important}.cs-snow{display:none}.cs-res-in{animation:none}}
.adcard .cons-nums .v{font-size:1rem}
.section-head>.seg.full{flex:1}
/* ---------- v5 ---------- */
.night{position:relative}
.night .dmark{display:inline-flex;align-items:center;gap:1px;font-size:.62rem;font-weight:700;color:var(--warn);font-variant-numeric:tabular-nums}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:.72rem;font-weight:700;line-height:1;margin-inline-start:2px}
.btn.primary .badge{background:#fff;color:var(--accent)}
.tm-list{display:flex;flex-direction:column;gap:6px}
.tm-item{display:flex;align-items:center;gap:6px;border:0;background:var(--surface-2);border-radius:10px;padding:8px 10px;text-align:start;font-size:.86rem;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tm-btns .btn{justify-content:center;white-space:normal;text-align:center;line-height:1.2;min-height:40px}
.hallinfo{line-height:1.55}
.rep-text{white-space:pre-wrap;font-size:.86rem;color:var(--ink-2);max-height:160px;overflow:auto;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.signpad{position:relative;border:1.5px dashed var(--line-2,var(--line));border-radius:16px;background:#fff;overflow:hidden;touch-action:none}
.signpad canvas{display:block;width:100%;height:auto;aspect-ratio:600/260;touch-action:none;cursor:crosshair}
.signline{position:absolute;inset-inline:18px;bottom:12px;border-top:1px solid #C9C4DA;padding-top:4px;font-size:.72rem;color:#8A84A3;pointer-events:none}
.signimg{display:block;max-width:240px;width:100%;background:#fff;border-radius:10px;border:1px solid var(--line)}
.reccode{font-size:1.5rem;font-weight:700;letter-spacing:.14em;text-align:center;padding:16px;border-radius:14px;background:var(--surface-2);font-variant-numeric:tabular-nums}
.pin-forgot{color:inherit;opacity:.8;font-size:.85rem;margin-top:2px}
.lock .forgot input,.forgot input{width:100%;font-size:1.1rem;letter-spacing:.12em;padding:10px}
.lock .forgot .flabel{color:var(--stage-ink)}
.lock .forgot .small{color:var(--stage-ink);opacity:.85}
.secwed{gap:6px}
.secwed .small{overflow-wrap:anywhere}
.cal .day .cnt{display:inline-flex;align-items:center;gap:1px}
.cal .day.is-sel{outline:2px solid var(--accent);outline-offset:-2px}
.cs-wsel{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:12px}
.cs-wsel label{font-weight:600;color:#fff;display:flex;align-items:center;gap:6px}
.cs-wsel select.cs-input{text-align:start;font-size:1rem;padding:12px 14px;max-width:360px}
.cs-wsel select.cs-input option{color:#14112B;background:#fff}
.cs-wnote{font-size:.82rem;color:#CFC8EE}
.cs-card.pay.one{flex-direction:column;align-items:stretch;gap:10px}
.cs-card.pay.one .pay-h{display:flex;flex-direction:column;gap:2px}
.cs-card.pay.one .pay-h b{font-size:1.02rem;color:#fff}
.pay-l{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.pay-l>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs .pay .k{color:#ADA5D3}
.cs .pay .v{color:#fff}
.cs .pay .s{color:#CFC8EE}
#topSearch{display:grid;place-items:center;padding:6px;width:36px;height:36px;flex:none}
#topSearch[hidden]{display:none}
.topbar .langsw{margin-inline-start:0}
html.on-client .topbar .langsw{background:rgba(255,255,255,.08)}
html.on-client .topbar .langsw button{color:#CFC8EE}
html.on-client .topbar .langsw button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}

.tab-ic{position:relative;display:grid;place-items:center;overflow:visible!important}
.tabdot{position:absolute;top:-4px;inset-inline-end:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--bad);color:#fff;font-size:.62rem;font-style:normal;font-weight:700;display:grid;place-items:center;line-height:1}
.reqbanner{width:100%;border:0;text-align:start;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;cursor:pointer;color:inherit;background:var(--warn-bg)}
.reqbanner .rb-t{flex:1;min-width:0}
/* ---------- v6 ---------- */
.wx{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem;font-variant-numeric:tabular-nums;margin-bottom:6px}
.cmp{display:flex;flex-direction:column;gap:8px}
.cmp-leg{display:flex;gap:16px;font-size:.78rem;color:var(--muted)}
.cmp-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.cmp-leg i.a,.cmp-bar.a i{background:var(--accent)}
.cmp-leg i.b,.cmp-bar.b i{background:color-mix(in srgb,var(--muted) 45%,transparent)}
.cmp-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:center}
.cmp-m{font-size:.78rem;color:var(--ink-2);font-weight:600}
.cmp-bars{display:flex;flex-direction:column;gap:3px;min-width:0}
.cmp-line{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:8px;align-items:center}
.cmp-bar{position:relative;height:12px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.cmp-bar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:4px}
.cmp-v{font-size:.72rem;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);text-align:end}
.cmp-v.a{font-weight:600;color:var(--ink)}
.cmp-tot{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;align-items:baseline;padding-top:8px;border-top:1px solid var(--line);font-size:.86rem}
.flyer-wrap{display:grid;place-items:center;background:var(--surface-2);border-radius:16px;padding:10px;min-height:200px}
.flyer-img{width:100%;max-width:300px;border-radius:12px;box-shadow:var(--shadow)}
.flyer-wait{color:var(--muted);font-size:.9rem;padding:60px 0}
.cs-thanks{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px 8px;color:var(--ok)}
.cs-thanks p{color:var(--ink);font-size:1rem;line-height:1.5;margin:0}
.imgbtn{border:0;padding:0;background:none;cursor:zoom-in}
.imgbtn img{display:block}
/* ---------- Online: login gate, staff screens ---------- */
.gate{z-index:80;overflow-y:auto;justify-content:flex-start;padding-top:max(40px,env(safe-area-inset-top))}
.gate .lock-in{margin:auto 0;gap:12px}
.gate-lang{align-self:flex-end;background:rgba(255,255,255,.08)}
.gate-lang button{color:var(--stage-muted)}
.gate-lang button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.gate-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}
.gate-form .field .flabel{color:var(--stage-muted)}
.gate-form input{width:100%;font:inherit;font-size:1rem;letter-spacing:normal;text-align:start;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--stage-ink)}
.gate-form input:focus{outline:2px solid var(--beam-1);outline-offset:1px}
.gate-form .link{color:var(--stage-ink);opacity:.85;align-self:center}
.gate-p{color:var(--stage-ink);opacity:.9;text-align:center;font-size:.92rem;line-height:1.5;max-width:320px;margin:0}
.staffpage{display:flex;flex-direction:column;gap:14px}