/* TrimSlot — calm, restrained, mobile-first. 8px spacing grid, one accent colour, hairline borders, almost no shadow.
   Light by default; dark via the Profile toggle / system preference. */
:root{
  --bg:#f6f7fb;--bg2:#eef0f6;--card:#fff;--ink:#0f172a;--mut:#64748b;--line:#e4e7ee;--line2:#d5d9e3;
  --brand:#3358d4;--brand-d:#2747b5;--brand-soft:#edf1fd;--brand-ink:#fff;
  --accent:#b7791f;--accent-soft:#fdf6e7;--accent-ink:#7a4e0c;
  --red:#d6403f;--green:#1c8a5a;--blue:#3358d4;--amber:#b7791f;
  --r:8px;--r-sm:6px;--shadow:none;--shadow-lg:0 2px 8px rgba(15,23,42,.10);
  --glass:rgba(255,255,255,.92);--input:#fff;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tabh:52px;
}
:root[data-theme=dark]{
  --bg:#0b1220;--bg2:#101a2c;--card:#121c2e;--ink:#e8edf5;--mut:#8b9bb2;--line:#1f2b40;--line2:#2a3850;
  --brand:#6f8ff0;--brand-d:#8ea8f5;--brand-soft:#172443;--brand-ink:#0b1220;
  --accent:#e0a84a;--accent-soft:#2a2112;--accent-ink:#f2d29a;
  --red:#ef6b6a;--green:#3ec08a;--blue:#6f8ff0;
  --shadow:none;--shadow-lg:0 2px 8px rgba(0,0,0,.35);--glass:rgba(11,18,32,.92);--input:#0e1727;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{padding-bottom:calc(var(--tabh) + 40px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
svg.i.sm{width:16px;height:16px}

/* header */
.topbar{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px;padding-top:env(safe-area-inset-top);box-sizing:content-box}
.brand{color:var(--ink);text-decoration:none;font-size:17px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:8px}
.brand b{color:var(--brand);font-weight:700}
.logo{width:32px;height:32px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;flex:none}
:root[data-theme=dark] .logo{color:#0b1220}
.logo svg{width:18px;height:18px}
#topright{display:flex;gap:4px;align-items:center;font-size:14px}
#topright a,#topright button{color:var(--ink);background:transparent;border:0;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;position:relative;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:8px}
#topright a:hover,#topright button:hover{background:var(--brand-soft)}
#topright a.txt{color:var(--brand)}
.dot{position:absolute;top:4px;right:2px;background:var(--red);color:#fff;border-radius:8px;font-size:10px;line-height:1;padding:3px 5px;font-weight:700;min-width:16px;text-align:center}
.toplink{color:var(--brand);font-size:14px;font-weight:600;text-decoration:none}
main{max-width:600px;margin:0 auto;padding:24px 16px 16px;animation:rise .25s ease both}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mockbar{background:var(--accent-soft);color:var(--accent-ink);text-align:center;font-size:12px;font-weight:600;padding:6px 8px}

/* bottom tabs: floating bar; body reserves its height + safe area so content and buttons never sit underneath */
.tabs{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:568px;height:var(--tabh);margin:0 auto;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:16px;display:flex;gap:0;padding:4px;z-index:20;box-shadow:var(--shadow-lg)}
.tabs a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);text-decoration:none;font-size:11px;font-weight:600;border-radius:12px}
.tabs a span{display:grid;place-items:center}
.tabs a svg{width:20px;height:20px}
.tabs a.on{color:var(--brand);background:var(--brand-soft)}

/* type */
h1{font-size:22px;line-height:1.25;margin:0 0 4px;letter-spacing:-.2px;font-weight:700}
h2{font-size:12px;margin:32px 0 8px;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;font-weight:600;display:flex;align-items:center;gap:6px}
h3{margin:0 0 2px;font-size:15px;font-weight:600}
.muted{color:var(--mut)}.small{font-size:13px}.center{text-align:center}
a{color:var(--brand);text-decoration:none;font-weight:500}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
p{margin:0 0 8px}
.back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--mut);margin-bottom:16px;font-weight:500}

/* cards */
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:8px 0;box-shadow:var(--shadow);border:1px solid var(--line)}
a.card,button.card{display:block;color:inherit}
a.card:active,button.card:active{background:var(--bg2)}
a.card:hover{border-color:var(--line2)}
.row{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}.grow{flex:1;min-width:0}.wrap{flex-wrap:wrap}
.gap>*+*{margin-top:8px}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* buttons: compact by default (42px), never full-width unless .block (one primary CTA per screen) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:42px;border:1px solid transparent;border-radius:10px;background:var(--brand);color:#fff;font:inherit;font-size:14.5px;font-weight:600;padding:0 18px;line-height:1.2;cursor:pointer;text-align:center;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--brand-d)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{display:flex;width:100%}
.btn.sec{background:var(--card);color:var(--ink);border-color:var(--line2)}
.btn.sec:hover{background:var(--bg2)}
.btn.red{background:var(--card);color:var(--red);border-color:var(--line2)}
.btn.amber{background:var(--accent);color:#fff}
:root[data-theme=dark] .btn.amber{color:#1a1205}
.btn.blue{background:var(--brand)}
.btn.green{background:var(--green);color:#fff}
:root[data-theme=dark] .btn.green{color:#06160f}
.btn.ghost{background:transparent;color:var(--mut)}
.btn.ghost:hover{background:var(--bg2)}
.btn.sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:8px}
.btn.big{min-height:44px;font-size:15px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btns.cta{margin-top:16px}
.btns.cta .btn:not(.sec):not(.ghost):not(.red){flex:1}
.btns.end{justify-content:flex-end}

/* forms */
label{display:block;font-size:13px;font-weight:600;margin:16px 0 4px;color:var(--ink)}
input,select,textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);min-height:42px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--input);transition:border-color .15s,box-shadow .15s}
textarea{min-height:0}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.75}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--brand)}
input[type=file]{display:none}
.seg{display:flex;background:var(--bg2);border-radius:10px;padding:3px;margin:8px 0 8px;gap:2px}
.seg button{flex:1;border:0;background:none;min-height:36px;padding:0 8px;border-radius:8px;font:inherit;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.1)}

/* badges & notes */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;letter-spacing:.2px;white-space:nowrap;line-height:1.6}
.b-green{background:#e3f5ec;color:#16694a}.b-amber{background:#fbf0d9;color:#8a5a10}.b-red{background:#fbe7e7;color:#a12c2c}.b-blue{background:#e7eefc;color:#2a4cb0}.b-gray{background:#eceff4;color:#475569}.b-purple{background:#eee9fb;color:#5b3fb5}
:root[data-theme=dark] .b-green{background:#10302a;color:#7fdcb2}:root[data-theme=dark] .b-amber{background:#33270f;color:#f0c97e}:root[data-theme=dark] .b-red{background:#371819;color:#f4a3a3}:root[data-theme=dark] .b-blue{background:#172443;color:#a9bff7}:root[data-theme=dark] .b-gray{background:#1f2b40;color:#b6c3d6}:root[data-theme=dark] .b-purple{background:#241d45;color:#c7b9f5}
.err,.ok,.info,.warn{border-radius:10px;padding:12px 14px;margin:16px 0;font-size:14px;border:1px solid transparent}
.err{background:#fbeded;color:#9b2c2c;border-color:#f3cfcf}.ok{background:#e9f6ef;color:#16694a;border-color:#c9e8d8}.info{background:var(--brand-soft);color:var(--brand-d);border-color:transparent}
.warn{background:var(--accent-soft);color:var(--accent-ink);border-color:rgba(183,121,31,.25)}
:root[data-theme=dark] .err{background:#2f1517;color:#f4a3a3;border-color:#4a2024}:root[data-theme=dark] .ok{background:#0f2a22;color:#7fdcb2;border-color:#163d31}
.notice{display:flex;gap:12px;align-items:flex-start}.notice svg{margin-top:2px}

/* landing */
.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 24px;margin:0 0 16px}
.hero h1{font-size:30px;line-height:1.15;margin:0 0 8px;letter-spacing:-.6px}.hero p{margin:0 0 24px;color:var(--mut);max-width:36ch}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--brand-soft);color:var(--brand-d);margin-bottom:16px}
.feat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:16px 0}
.feat div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 8px;text-align:center;font-size:12.5px;font-weight:600}
.feat svg{display:block;margin:0 auto 8px;color:var(--brand);width:22px;height:22px}
.avatar{width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--brand-soft);flex:none;display:grid;place-items:center;font-weight:600;color:var(--brand);font-size:16px;overflow:hidden}
.avatar.lg{width:64px;height:64px;border-radius:16px;font-size:22px}
.avatar.sm{width:40px;height:40px;border-radius:10px;font-size:14px}
.avatar.round{border-radius:50%}

/* booking wizard */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip{border:1px solid var(--line2);background:var(--card);color:var(--ink);border-radius:10px;min-height:40px;padding:0;text-align:center;cursor:pointer;font:inherit;font-size:14px;font-weight:600}
.chip:hover{border-color:var(--brand)}
.chip.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-d)}
.chip.closed{opacity:.45;background:var(--bg2)}
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}.days::-webkit-scrollbar{display:none}
.days .chip{min-width:56px;padding:8px 4px;flex:none;font-size:12px;line-height:1.3;font-weight:500}.days .chip b{display:block;font-size:17px;font-weight:600}
.svc{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:8px 0;background:var(--card);color:var(--ink);width:100%;text-align:left;font:inherit;cursor:pointer;min-height:56px}
.svc:hover{border-color:var(--line2)}
.svc.on{border-color:var(--brand);background:var(--brand-soft)}
.svc b{font-weight:600}
.steps{display:flex;gap:4px;margin:16px 0}.steps i{flex:1;height:3px;border-radius:2px;background:var(--line)}.steps i.on{background:var(--brand)}
.wiz-head{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.wiz-head h1{font-size:18px;margin:0}

/* queue / now serving */
.now{background:#14213d;color:#fff;border-radius:16px;padding:20px;margin:8px 0}
.now .lbl{font-size:11px;letter-spacing:1.2px;color:#9fb3d9;font-weight:600}.now .nm{font-size:22px;font-weight:700;margin:4px 0 8px}
.now.idle{background:var(--card);color:var(--mut);border:1px dashed var(--line2)}.now.idle .lbl{color:var(--mut)}
.now .info{background:rgba(255,255,255,.1)!important;color:#fff!important}
.now .btn.amber{background:#e0a84a;color:#1a1205}
.now .badge{background:rgba(255,255,255,.14);color:#fff}
.qbox{border-radius:16px;padding:24px 16px;text-align:center;margin:8px 0;background:var(--card);border:1px solid var(--line)}
.qbox .n{font-size:48px;font-weight:700;line-height:1.1;color:var(--brand);letter-spacing:-1px}
.qbox .n svg{width:44px;height:44px}
.qbox.ready{background:#e9f6ef;border-color:#c9e8d8}.qbox.ready .n{color:var(--green)}.qbox.next{background:var(--accent-soft);border-color:rgba(183,121,31,.25)}.qbox.next .n{color:var(--accent)}.qbox.serving{background:var(--brand-soft);border-color:transparent}
.qbox.ready,.qbox.next,.qbox.serving{color:#1a2740}
:root[data-theme=dark] .qbox.ready,:root[data-theme=dark] .qbox.next,:root[data-theme=dark] .qbox.serving{color:var(--ink)}
:root[data-theme=dark] .qbox.ready{background:#0f2a22;border-color:#163d31}
.tl{border-left:1px solid var(--line2);margin:8px 0 0 4px;padding-left:16px}.tl>div{position:relative;margin-bottom:12px;font-size:14px}.tl>div:before{content:"";position:absolute;left:-21px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 28px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;font-weight:500;z-index:50;max-width:calc(100% - 32px);box-shadow:var(--shadow-lg);animation:rise .2s ease both}
.toast.bad{background:var(--red);color:#fff}
.notif{border-left:3px solid var(--line2)}.notif.unread{border-left-color:var(--brand)}
.notif.warn-n{border-left-color:var(--accent)}

/* grouped rows (profile, barber page) */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:8px 0;overflow:hidden}
.list>*{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:52px;color:var(--ink);font-weight:500;border-top:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;text-align:left;text-decoration:none}
.list>*:first-child{border-top:0}
a.lrow:active,button.lrow:active{background:var(--bg2)}
.list .ico{width:32px;height:32px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.list .sub{display:block;font-size:12.5px;color:var(--mut);font-weight:400}
.list .end{margin-left:auto;color:var(--mut);display:flex;align-items:center;gap:8px;font-size:13px}
.lrow.danger{color:var(--red)}.lrow.danger .ico{background:#fbe7e7;color:var(--red)}
:root[data-theme=dark] .lrow.danger .ico{background:#371819}
.switch{position:relative;width:44px;height:26px;flex:none;border:0;border-radius:13px;background:var(--line2);cursor:pointer;padding:0;min-height:0;transition:background .15s}
.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch[aria-checked=true]{background:var(--brand)}.switch[aria-checked=true]:after{transform:translateX(18px)}
.prof-head{display:flex;align-items:center;gap:16px;margin:0 0 8px}
.prof-head h1{margin:0}
.prof-head .avatar{width:64px;height:64px;border-radius:50%;font-size:22px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14px}.kv dt{color:var(--mut)}.kv dd{margin:0;text-align:right;font-weight:500}
.hours{width:100%;border-collapse:collapse;font-size:14px}.hours td{padding:6px 0;border-top:1px solid var(--line)}.hours tr:first-child td{border-top:0}.hours td:last-child{text-align:right;font-weight:500}.hours tr.today td{font-weight:700}
.stat{display:flex;gap:8px}.stat>div{flex:1;background:var(--bg2);border-radius:10px;padding:8px 12px}.stat b{display:block;font-size:18px;font-weight:700}.stat span{font-size:12px;color:var(--mut)}

/* barber settings: collapsible sections + guided setup */
.acc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:8px 0;overflow:hidden}
.acc>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:56px;cursor:pointer;font-weight:600;user-select:none}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .ico{width:32px;height:32px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.acc>summary .sub{display:block;font-weight:400;font-size:12.5px;color:var(--mut)}
.acc>summary .chev{margin-left:auto;transition:transform .2s;color:var(--mut)}
.acc[open]>summary .chev{transform:rotate(180deg)}
.acc .body{padding:0 16px 16px;border-top:1px solid var(--line)}
.setup-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dots{display:flex;gap:4px;margin:8px 0 16px}.dots i{flex:1;height:3px;border-radius:2px;background:var(--line)}.dots i.on{background:var(--brand)}
.setup-card{padding:16px}
.setup-card h1{font-size:20px;margin:0}
.photo-up{display:flex;align-items:center;gap:16px;margin:8px 0}
.photo-up .btns .btn{flex:none}
.days-grid{display:grid;grid-template-columns:1fr;gap:8px}
.dayrow{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--card)}
.dayrow .times{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dayrow.off .times{display:none}
.dayrow input[type=time]{padding:8px}
.check{display:flex;align-items:center;gap:8px;font-weight:600;margin:0;color:var(--ink);font-size:14.5px}
.svcline{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.svcline:last-child{border-bottom:0}
.svcedit{display:none;margin-top:8px}.svcline.editing .svcedit{display:block}
.mini{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--mut);cursor:pointer;padding:0;min-height:0}
.mini.red{color:var(--red)}
.tag{display:inline-block;background:var(--bg2);color:var(--mut);border-radius:6px;padding:2px 8px;font-size:12px;font-weight:500;margin:2px 4px 2px 0}

/* modal sheet */
.scrim{position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card);width:100%;max-width:600px;border-radius:16px 16px 0 0;padding:24px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -8px 32px rgba(0,0,0,.2);animation:rise .2s ease both}
.sheet ul{padding-left:18px;margin:8px 0;font-size:14px}

.foot{text-align:center;font-size:12px;color:var(--mut);padding:16px 8px 0}.foot a{color:var(--mut);font-weight:400}
.legal{max-width:680px;margin:0 auto;padding:16px;line-height:1.6}.legal h1{font-size:26px}.legal h2{font-size:16px;margin-top:24px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.draft{background:var(--accent-soft);border:1px solid rgba(183,121,31,.3);color:var(--accent-ink);border-radius:10px;padding:12px 14px;font-size:14px;margin:12px 0}
.mock-box{max-width:420px;margin:24px auto;text-align:center}
code{background:var(--bg2);border-radius:4px;padding:1px 6px;font-size:.9em}
@media (min-width:700px){main{padding-top:32px}.sheet{border-radius:16px;margin-bottom:8vh}.scrim{align-items:center}}

/* skeleton placeholders */
.sk{border-radius:6px;background:var(--line);animation:pulse 1.2s ease-in-out infinite}
.sk-h{height:26px;width:55%;margin:6px 0}.sk-p{height:14px;width:35%;margin:8px 0 16px}.sk-l{height:16px;margin:8px 0}.sk-l.s{width:60%}
@keyframes pulse{50%{opacity:.5}}

/* plans & credits */
.wallet-chip .ico{width:40px;height:40px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.plan{border-left:3px solid var(--brand)}
.faded{opacity:.6}
.meter{height:6px;border-radius:3px;background:var(--bg2);margin:12px 0 8px;overflow:hidden}.meter i{display:block;height:100%;background:var(--brand);border-radius:3px}
.notif.plan-n{border-left-color:#7c5cff}
.chk{display:flex;align-items:center;gap:8px;margin:8px 0;font-weight:500}.chk input{width:18px;margin:0}
.planf .row.wrap{margin:0}
.plan-price{font-size:18px;font-weight:700;letter-spacing:-.3px}
.plan .meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--mut);margin:4px 0 8px}

.notice .why{margin:6px 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.55);font-weight:500;overflow-wrap:anywhere}[data-theme=dark] .notice .why{background:rgba(0,0,0,.25)}

.maintbar{background:#fef3c7;color:#92400e;text-align:center;font-size:13px;font-weight:700;padding:8px 10px}[data-theme=dark] .maintbar{background:#422006;color:#fde68a}

/* ---------- notifications: bell, banner, centre, prompt ---------- */
#topright .bell{position:relative}
#topright .bell.ring svg{animation:ring .7s ease-in-out}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}}
.dot{box-shadow:0 0 0 2px var(--card)}
.banner{position:fixed;z-index:60;left:12px;right:12px;top:calc(8px + env(safe-area-inset-top));max-width:520px;margin:0 auto;display:flex;align-items:stretch;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-left:3px solid var(--brand);border-radius:14px;box-shadow:var(--shadow-lg);animation:bin .28s cubic-bezier(.2,.8,.2,1)}
.banner.urgent{border-left-color:var(--green)}
@keyframes bin{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.bn-body{flex:1;min-width:0;display:flex;gap:12px;align-items:center;text-align:left;background:none;border:0;padding:12px 4px 12px 14px;color:inherit;font:inherit;cursor:pointer;min-height:56px}
.bn-ico{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-d);display:grid;place-items:center;flex:none}
.banner.urgent .bn-ico{background:#e9f6ef;color:var(--green)}
:root[data-theme=dark] .banner.urgent .bn-ico{background:#0f2a22}
.bn-txt{display:flex;flex-direction:column;min-width:0}.bn-txt b{font-weight:650;font-size:14px}.bn-txt span{font-size:13px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn-x{background:none;border:0;color:var(--mut);padding:0 14px;cursor:pointer;min-width:44px}
.nlist{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:8px 0}
.nitem{display:flex;gap:12px;align-items:flex-start;padding:14px;color:inherit;border-top:1px solid var(--line);position:relative;min-height:56px;font-weight:400}
.nitem:first-child{border-top:0}.nitem:hover{background:var(--bg2)}
.nitem.unread{background:var(--brand-soft)}
.nico{width:34px;height:34px;border-radius:10px;background:var(--bg2);color:var(--mut);display:grid;place-items:center;flex:none}
.nitem.unread .nico{background:var(--brand-soft);color:var(--brand-d)}
.nitem.hot .nico{background:#e9f6ef;color:var(--green)}.nitem.warn .nico{background:var(--accent-soft);color:var(--accent)}.nitem.money .nico{background:#f1edff;color:#6d4fe0}
:root[data-theme=dark] .nitem.hot .nico{background:#0f2a22}:root[data-theme=dark] .nitem.money .nico{background:#221b45}
.nbody{display:flex;flex-direction:column;min-width:0;flex:1}.ntop{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.ntop b{font-weight:650}
.ntext{color:var(--mut);overflow-wrap:anywhere}
.udot{width:8px;height:8px;border-radius:50%;background:var(--brand);position:absolute;right:12px;bottom:16px}
.empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:40px 16px;color:var(--mut)}.empty svg{width:32px;height:32px;margin-bottom:6px}.empty b{color:var(--ink)}
.promo{display:flex;gap:12px;align-items:flex-start;padding:14px;margin:8px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--brand-soft);position:relative}
.promo-ico{width:36px;height:36px;border-radius:10px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;flex:none}
.promo-x{background:none;border:0;color:var(--mut);cursor:pointer;min-width:36px;min-height:36px;margin:-8px -8px 0 0}
/* ---------- smart features ---------- */
.stars{display:inline-flex;gap:1px;color:var(--line2)}.stars i{font-style:normal;display:inline-flex}.stars i.on{color:#e0a020}.stars svg{fill:currentColor;stroke:none}
.rate{display:inline-flex;align-items:center;gap:4px;font-size:13px}.rate svg{color:#e0a020;fill:currentColor;stroke:none}
.starpick{display:flex;gap:2px;margin:6px 0 10px}.starpick button{background:none;border:0;padding:6px;color:var(--line2);cursor:pointer;min-width:44px;min-height:44px}.starpick button svg{width:28px;height:28px;fill:currentColor;stroke:none}.starpick button.on{color:#e0a020}
.reply{margin-top:10px;padding:10px 12px;border-left:2px solid var(--brand);background:var(--bg2);border-radius:0 8px 8px 0}
.replyform{display:flex;gap:8px;margin-top:10px}.replyform input{flex:1}
.iconbtn{min-width:44px;padding:0 12px}.iconbtn.faved{color:var(--red);border-color:var(--red)}.iconbtn.faved svg{fill:currentColor}
.fav-i{color:var(--red)}.fav-i svg{fill:currentColor}
.rebook{border-color:var(--brand);background:var(--brand-soft)}
.rebook-opts{margin-top:2px}.rebook-opts .chip{padding:8px 4px;display:flex;flex-direction:column;line-height:1.25;min-height:52px;align-items:center;justify-content:center}
.hotcard{border-color:var(--green)}
.loyal{margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.loyal .bar{height:6px;border-radius:3px;background:var(--bg2);margin-top:8px;overflow:hidden}.loyal .bar i{display:block;height:100%;background:var(--brand);border-radius:3px}
.eta{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 6px}.summary div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;min-width:0}.summary b{display:block;font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.summary span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.qa{margin:8px 0}
.cnote{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink)}.cnote.priv{background:var(--bg2);color:var(--ink)}
.badge.rel-green{background:#e9f6ef;color:#16694a}.badge.rel-amber{background:var(--accent-soft);color:var(--accent-ink)}.badge.rel-red{background:#fbeded;color:#9b2c2c}.badge.rel-gray{background:var(--bg2);color:var(--mut)}
:root[data-theme=dark] .badge.rel-green{background:#10302a;color:#7fdcb2}:root[data-theme=dark] .badge.rel-red{background:#371819;color:#f4a3a3}
@media (prefers-reduced-motion:reduce){.banner,#topright .bell.ring svg{animation:none}}

/* =====================================================================================================
   Compact pass (v4): 14px body, 16–20px headings, 8px radii, hairline borders, no shadows/gradients,
   small icons, dense rows, slim header + full-width bottom nav. Flat solid accent buttons.
   ===================================================================================================== */
svg.i{width:18px;height:18px;stroke-width:1.6}svg.i.sm{width:14px;height:14px}
.topbar{height:48px;padding:0 12px;padding-top:env(safe-area-inset-top);backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
.brand{font-size:16px;gap:6px}.logo{width:26px;height:26px;border-radius:6px}.logo svg{width:15px;height:15px}
#topright{gap:0}#topright a,#topright button{min-width:36px;height:36px;border-radius:6px}
#topright a.txt{font-size:14px}.dot{top:2px;right:0;font-size:9px;padding:2px 4px;min-width:14px;box-shadow:none}
main{max-width:600px;padding:14px 12px 12px;animation:none}
body{padding-bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom))}
.tabs{left:0;right:0;bottom:0;max-width:none;margin:0;height:calc(var(--tabh) + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);border:0;border-top:1px solid var(--line);border-radius:0;background:var(--bg);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:0}
.tabs a{font-size:10.5px;gap:1px;border-radius:0;font-weight:500}
.tabs a svg{width:19px;height:19px}.tabs a.on{background:none;color:var(--brand);font-weight:600;box-shadow:inset 0 2px 0 var(--brand)}
.toast{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom));border-radius:6px;font-size:13px;padding:8px 12px;box-shadow:none}
h1{font-size:20px;line-height:1.25;margin:0 0 2px;letter-spacing:0}
h2{font-size:16px;margin:20px 0 6px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600}
h3{font-size:14px;font-weight:600}
.small{font-size:12.5px}.back{font-size:13px;margin-bottom:8px}
hr{margin:10px 0}p{margin:0 0 6px}
.card,.list,.acc,.nlist,.tile{border-radius:8px;box-shadow:none}
.card{padding:12px;margin:6px 0}
.row{gap:8px}
/* buttons: flat, solid accent. Neutral until the form is valid; subtle pressed state; no gradient, glow or lift. */
.btn{min-height:38px;border-radius:8px;font-size:14px;padding:0 14px;gap:6px;background:var(--brand);color:#fff;border:1px solid var(--brand);box-shadow:none;background-image:none;transition:background-color .12s,border-color .12s,color .12s}
.btn:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn:active{background:var(--brand-d);border-color:var(--brand-d);filter:brightness(.92);transform:none}
.btn:focus-visible,.chip:focus-visible,.svc:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.btn:disabled,.btn.is-invalid,.btn[aria-disabled=true]{background:var(--bg2);border-color:var(--line2);color:var(--mut);opacity:1;cursor:not-allowed;filter:none}
.btn.sec,.btn.red,.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line2)}
.btn.sec:hover,.btn.red:hover,.btn.ghost:hover{background:var(--bg2)}
.btn.sec:active,.btn.red:active,.btn.ghost:active{background:var(--bg2);filter:brightness(.95)}
.btn.red{color:var(--red)}
.btn.sec:disabled,.btn.red:disabled,.btn.ghost:disabled{background:var(--bg2);color:var(--mut)}
.btn.amber{background:var(--accent);border-color:var(--accent)}.btn.green{background:var(--green);border-color:var(--green)}
.btn.amber:disabled,.btn.green:disabled,.btn.blue:disabled{background:var(--bg2);border-color:var(--line2);color:var(--mut)}
.btn.sm{min-height:30px;padding:0 10px;font-size:13px;border-radius:6px}
.btn.big{min-height:40px;font-size:14px}
.btns{gap:6px}.btns.cta{margin-top:12px}
label{font-size:12.5px;margin:10px 0 3px}
input,select,textarea{font-size:14px;min-height:38px;padding:7px 10px;border-radius:8px}
input:focus,select:focus,textarea:focus{box-shadow:none;border-color:var(--brand)}
.seg{border-radius:8px;padding:2px}.seg button{min-height:30px;border-radius:6px;font-size:13px}.seg button.on{box-shadow:none;border:1px solid var(--line2)}
.badge{font-size:10.5px;padding:1px 6px;border-radius:4px;line-height:1.6}
.err,.ok,.info,.warn{border-radius:8px;padding:8px 10px;margin:10px 0;font-size:13px}
.notice{gap:8px}.notice>svg{width:16px;height:16px;margin-top:1px}
a.payban{text-decoration:none;color:inherit;font-weight:400}.payban u{color:var(--brand)}
.okt{color:var(--green);font-weight:600}.errt{color:var(--red)}
.pin{letter-spacing:.5em;text-align:center;font-size:18px;max-width:9em}
.svc.off{opacity:.55;cursor:not-allowed;background:var(--bg2)}
.spin{width:22px;height:22px;margin:4px auto 10px;border:2px solid var(--line2);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.confirming{padding:28px 12px}.confirming h1{font-size:16px}
.payok{border-color:var(--green)}
/* landing */
.hero{border-radius:8px;padding:20px 16px;margin:0 0 10px}.hero h1{font-size:22px;letter-spacing:0}.hero p{margin:0 0 14px;font-size:14px}
.pill{font-size:11px;padding:2px 8px;border-radius:4px;margin-bottom:10px}
.feat{gap:6px;margin:10px 0}.feat div{border-radius:8px;padding:10px 6px;font-size:12px}.feat svg{width:18px;height:18px;margin-bottom:4px}
.avatar{width:40px;height:40px;border-radius:8px;font-size:14px}.avatar.lg{width:52px;height:52px;border-radius:10px;font-size:18px}.avatar.sm{width:32px;height:32px;border-radius:6px;font-size:12px}.avatar.round{border-radius:50%}
/* booking wizard + SLOT GRID: fixed-height cells, auto-fill columns, gaps, wrap — cells can never overlap */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;align-items:stretch}
.chips>.chip{min-width:0;width:100%;height:36px;min-height:36px;padding:0 4px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:clip;display:flex;align-items:center;justify-content:center}
.chip{border-radius:6px;min-height:34px;font-size:13px}
.days{gap:6px;padding:2px 0 6px}.days .chip{min-width:48px;padding:6px 2px;font-size:11px;border-radius:6px}.days .chip b{font-size:15px}
.svc{border-radius:8px;padding:8px 12px;margin:6px 0;min-height:48px;gap:8px}
.steps{margin:10px 0}.steps i{height:2px}
.wiz-head h1{font-size:16px}
.rebook-opts .chip{min-height:44px;height:auto}
/* queue */
.now{border-radius:8px;padding:12px;background:var(--ink);color:var(--bg)}.now .nm{font-size:18px;margin:2px 0 6px}.now .lbl{color:inherit;opacity:.65}
.now.idle{background:var(--card);color:var(--mut)}
.qbox{border-radius:8px;padding:14px 12px}.qbox .n{font-size:32px;letter-spacing:0}.qbox .n svg{width:28px;height:28px}
/* grouped rows */
.list>*{padding:8px 12px;min-height:44px;gap:10px}
.list .ico{width:24px;height:24px;border-radius:0;background:none;color:var(--mut)}
.list .sub{font-size:12px}.lrow.danger .ico{background:none}
.switch{width:38px;height:22px;border-radius:11px}.switch:after{width:16px;height:16px;box-shadow:none}.switch[aria-checked=true]:after{transform:translateX(16px)}
.prof-head{gap:12px}.prof-head .avatar{width:48px;height:48px;font-size:17px}
.stat>div{border-radius:6px;padding:6px 10px}.stat b{font-size:16px}
.acc>summary{padding:8px 12px;min-height:46px;gap:10px}.acc>summary .ico{width:24px;height:24px;border-radius:0;background:none;color:var(--mut)}
.acc .body{padding:0 12px 12px}
.dayrow{border-radius:8px;padding:8px}.svcline{padding:8px 0}.mini{width:30px;height:30px;border-radius:6px}
.setup-card h1{font-size:18px}
/* sheets */
.sheet{border-radius:12px 12px 0 0;padding:16px 12px calc(16px + env(safe-area-inset-bottom));box-shadow:none;border-top:1px solid var(--line2)}
.scrim{background:rgba(11,18,32,.45)}
@media (min-width:700px){.sheet{border-radius:12px;border:1px solid var(--line2)}main{padding-top:20px}}
/* notifications */
.banner{border-radius:8px;box-shadow:var(--shadow-lg)}.bn-body{padding:8px 4px 8px 10px;min-height:44px;gap:8px}.bn-ico{width:26px;height:26px;border-radius:6px}.bn-txt b{font-size:13.5px}.bn-txt span{font-size:12.5px}
.nitem{padding:10px 12px;min-height:48px;gap:10px}.nico{width:26px;height:26px;border-radius:6px}.nico svg{width:14px;height:14px}
.promo{padding:10px 12px;border-radius:8px}.promo-ico{width:28px;height:28px;border-radius:6px}
.empty{padding:24px 12px}.empty svg{width:24px;height:24px}
.summary{gap:6px}.summary div{border-radius:8px;padding:8px 4px}.summary b{font-size:15px}
.loyal{border-radius:8px}.reply{border-radius:0 6px 6px 0}.cnote{border-radius:6px}
.plan{border-left-width:2px}.plan-price{font-size:16px}
.maintbar,.mockbar{font-size:12px;padding:6px 8px}
.notif{border-left-width:2px}
.starpick button svg{width:24px;height:24px}

/* ---- v5.1: no shadows anywhere (banner, active tab indicator) ---- */
.banner{box-shadow:none;border:1px solid var(--line2)}
.tabs a{border-top:2px solid transparent}
.tabs a.on{box-shadow:none;border-top-color:var(--brand)}
.seg button.on{box-shadow:none;border:1px solid var(--line2)}

/* ===== v5 contrast pass (WCAG AA, both themes; enforced by `npm run contrast`) =====
   --ctl   : border of every interactive control (inputs, outlined buttons, chips, switches) - >= 3:1 against card and page
   --mut   : secondary text - >= 4.5:1 on page, card and tinted surfaces
   --star  : filled star; unfilled stars use --ctl.   Flat: no gradients, no shadows. */
:root{--on-red:#fff;--ctl:#7b8aa0;--star:#946010;--on-brand:#fff;--mut:#5b6b82;--red:#c0392b}
:root[data-theme=dark]{--on-red:#0b1220;--ctl:#6a7b95;--star:#f0b429;--on-brand:#0b1220;--mut:#9aa9bf;--red:#f2807f}
.btn{color:var(--on-brand)}
.btn.sec,.btn.red,.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--ctl)}
.btn.red{color:var(--red);border-color:var(--red)}
.btn.sec:hover,.btn.red:hover,.btn.ghost:hover{background:var(--bg2)}
.btn.amber{color:#1a1205}.btn.green{color:#fff}:root[data-theme=dark] .btn.amber{color:#1a1205}:root[data-theme=dark] .btn.green{color:#06160f}
.btn:disabled,.btn.is-invalid,.btn[aria-disabled=true],.btn.sec:disabled,.btn.red:disabled,.btn.ghost:disabled,.btn.amber:disabled,.btn.green:disabled,.btn.blue:disabled,:root[data-theme=dark] .btn:disabled,:root[data-theme=dark] .btn.is-invalid{background:var(--bg2);border-color:var(--line2);color:var(--mut);opacity:1;cursor:not-allowed}
input,select,textarea{border-color:var(--ctl)}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:1}
.chip,.svc,.seg{border-color:var(--ctl)}
.stars{color:var(--ctl)}.stars i.on{color:var(--star)}
.starpick button{color:var(--ctl)}.starpick button.on,.starpick button:hover{color:var(--star)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer}
.dot,.anav .cnt{background:var(--red);color:var(--on-red)}
.seg{border:1px solid var(--ctl)}.seg button.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.switch{background:var(--ctl)}.switch[aria-checked=true]{background:var(--brand)}
.now .lbl{opacity:.85}
.chip.closed,.svc.off{opacity:1;background:var(--bg2);color:var(--mut)}.chip.closed *,.svc.off b{color:var(--mut)}
.pills .c{background:var(--bg2);color:var(--ink)}.pills button.on .c{background:var(--brand);color:var(--on-brand)}
:root[data-theme=dark] .nitem.money .nico{color:#c4b5fd}
.chip:hover,.svc:hover{border-color:var(--ctl)}.now.idle .lbl{opacity:1}
.warn-t{color:var(--accent-ink)}
.rate svg{color:var(--star)}

/* compact rows: flat, 56-72px, two lines (admin lists, customer and barber lists) */
.clist{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);overflow:hidden;margin:8px 0}
a.crow{text-decoration:none}
.crow{display:flex;align-items:center;gap:8px;min-height:58px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink);background:var(--card);-webkit-user-select:none;user-select:none}
.crow:last-child{border-bottom:0}
.crow:hover,.crow:active{background:var(--bg2)}
.crow:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.crow .cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crow .c1,.crow .c2{display:flex;align-items:center;gap:8px;min-width:0}
.crow .ct{flex:1 1 0;min-width:0;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .cp{flex:none;display:flex;gap:4px;align-items:center}
.crow .cm{flex:1 1 0;min-width:0;font-size:12.5px;line-height:18px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .cr{flex:none;font-size:13px;font-weight:600;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.crow .cgo{flex:none;color:var(--mut);font-size:22px;line-height:1;width:14px;text-align:center}
.crow .selbox{margin:0 2px 0 -4px;padding:8px 6px;flex:none}
.crow .stars{white-space:nowrap}
.crow .cx{display:block;font-size:12.5px;line-height:18px;font-weight:600;color:var(--brand-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .c1,.crow .c2{min-width:0}
.crow .ct,.crow .cm{display:block}
.crow .badge{margin:0}
/* money breakdown (booking fee, barber earnings) */
.money{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;color:var(--mut)}
.money .mrow{margin-top:3px}
.money .mrow.tot{color:var(--ink);font-weight:700;font-size:14px}

/* private share link card (barber profile) */
.share .qr{background:#fff;border:1px solid var(--line2);border-radius:10px;padding:4px;flex:none;width:132px;height:132px}
.linkbox{background:var(--bg2);color:var(--ink);border:1px solid var(--line2);border-radius:8px;padding:6px 8px;overflow-wrap:anywhere;user-select:all}
.mybarber{gap:10px;align-items:center}
.mybarber .btn.sm{min-height:36px}

/* Phones: bigger tap targets (towards 44px) for the buttons people hit most, without growing the compact list rows. */
@media (max-width:719px){
  .btn:not(.sm){min-height:44px}
  .btn.sm{min-height:40px}
  .crow .btn.sm,.clist .btn.sm,.tbl .btn.sm,.list .btn.sm,.acc .btn.sm{min-height:32px}
  #so,#reload,#palbtn{min-height:44px}
  .topbar #theme,.topbar .bell{min-width:44px;min-height:44px}
  .topbar a.txt{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .seg button{min-height:40px}
}

/* ---- press feedback (visual only; the haptics setting does not change it). Added with public/haptics.js ---- */
:is(.btn,.chip,.svc,.tabs a,a.card,a.lrow,button.lrow,.seg button):not(:disabled):not([aria-disabled=true]):not(.crop *):not(table *){transition:transform .1s ease-out,background-color .15s,border-color .15s,color .15s,opacity .15s}
:is(.btn,.chip,.svc,.tabs a,a.card,a.lrow,button.lrow,.seg button):not(:disabled):not([aria-disabled=true]):not(.crop *):not(table *):active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  :is(.btn,.chip,.svc,.tabs a,a.card,a.lrow,button.lrow,.seg button):not(:disabled):not([aria-disabled=true]):not(.crop *):not(table *){transition:none}
  :is(.btn,.chip,.svc,.tabs a,a.card,a.lrow,button.lrow,.seg button):not(:disabled):not([aria-disabled=true]):not(.crop *):not(table *):active{transform:none;opacity:.8}
}

/* network banner (net-banner.js): slim strip under the top bar; in the page flow, so it never covers the top bar or the bottom tabs */
.netbar{position:sticky;top:var(--netbar-top,57px);z-index:19;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .22s ease;pointer-events:none}
.netbar.on{grid-template-rows:1fr;opacity:1}
.netbar[hidden]{display:none}
.nb-in{overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;font-size:13px;font-weight:600;line-height:1.3;background:var(--bg2);color:var(--ink);border-bottom:1px solid var(--line2)}
.netbar.on .nb-in{padding:7px 16px}
.nb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.netbar[data-kind=slow] .nb-in{background:var(--accent-soft);color:var(--accent-ink);border-bottom-color:rgba(183,121,31,.25)}
.netbar[data-kind=retry] .nb-in{background:var(--brand-soft);color:var(--ink)}
.netbar[data-kind=retry] .nb-dot{background:var(--brand);animation:nbpulse 1.2s ease-in-out infinite}
@keyframes nbpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.netbar{transition:none}.nb-dot{animation:none!important}}

/* ---- pull-down to refresh (public/pull-refresh.js). No overscroll rules here: polish.css owns those. ---- */
.ptr{position:fixed;left:0;right:0;top:var(--ptr-top,56px);height:0;z-index:19;pointer-events:none;display:none;opacity:0}
.ptr.ptr-on{display:block}
.ptr.ptr-anim{transition:opacity .2s ease}
.ptr .ptr-chip{position:absolute;left:50%;top:0;transform:translate3d(-50%,-44px,0);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--card);color:var(--ink);border:1px solid var(--line2);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;max-width:calc(100vw - 32px);will-change:transform}
.ptr.ptr-anim .ptr-chip{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.ptr .ptr-arrow{flex:none;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.ptr[data-state=ready] .ptr-arrow{transform:rotate(180deg)}
.ptr .ptr-spin{display:none;flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--brand);animation:ptrspin .8s linear infinite}
.ptr[data-state=busy] .ptr-arrow,.ptr[data-state=error] .ptr-arrow{display:none}
.ptr[data-state=busy] .ptr-spin{display:block}
.ptr[data-state=error] .ptr-spin{display:none}
.ptr[data-state=error] .ptr-chip{background:#fbeded;color:#9b2c2c;border-color:#f3cfcf}
:root[data-theme=dark] .ptr[data-state=error] .ptr-chip{background:#2f1517;color:#f4a3a3;border-color:#4a2024}
.ptr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ptr.ptr-anim,.ptr.ptr-anim .ptr-chip,.ptr .ptr-arrow{transition:none}
  .ptr[data-state=ready] .ptr-arrow{transform:none}
  .ptr .ptr-spin{animation:none;border-top-color:var(--brand);border-right-color:var(--brand)}
}