:root{--bg:#0e1015;--bg2:#151821;--card:#1a1e29;--card2:#212636;--line:#2a3042;--tx:#eef0f6;--mut:#8b93a7;--gold:#f0b94d;--gold2:#ff9f43;--ok:#3ecf8e;--warn:#ffb020;--bad:#ff5d6c;--info:#5aa9ff;--sh:0 10px 30px rgba(0,0,0,.35);--r:16px;color-scheme:dark}
[data-theme=light]{--bg:#f4f1ea;--bg2:#fffdf8;--card:#fff;--card2:#f5f2ea;--line:#e6e0d2;--tx:#1d2030;--mut:#707690;--gold:#c8851a;--gold2:#e0701a;--sh:0 8px 24px rgba(60,50,20,.1);color-scheme:light}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(240,185,77,.09),transparent 60%),var(--bg);color:var(--tx);font:14px/1.45 'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;outline:none;transition:border .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,185,77,.18)}
label{display:block;font-size:12px;color:var(--mut);margin:10px 0 4px}
.serif{font-family:Georgia,'Times New Roman',serif}
.mut{color:var(--mut)}.sm{font-size:12px}.b{font-weight:700}.row{display:flex;align-items:center;gap:10px}.sp{flex:1}.wrap{flex-wrap:wrap}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.g3{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.g4{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}

/* buttons */
.btn{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:9px 16px;font-weight:600;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;user-select:none}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.96)}
.btn.pri{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1b1405;border:0;box-shadow:0 6px 18px rgba(240,185,77,.28)}
.btn.ok{background:var(--ok);color:#06231a;border:0}.btn.danger{background:rgba(255,93,108,.12);color:var(--bad);border-color:rgba(255,93,108,.35)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:10px}.btn.block{width:100%;padding:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.chip{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;font-weight:600;font-size:13px;white-space:nowrap;transition:all .2s;position:relative;overflow:hidden}
.chip.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1b1405;border-color:transparent;transform:scale(1.04)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none;scroll-snap-type:x proximity}.chips::-webkit-scrollbar{display:none}.chips>*{scroll-snap-align:start}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700;background:var(--card2);color:var(--mut)}
.badge.new{background:rgba(90,169,255,.15);color:var(--info)}.badge.preparing{background:rgba(255,176,32,.15);color:var(--warn)}.badge.ready{background:rgba(62,207,142,.16);color:var(--ok)}.badge.served{background:rgba(139,147,167,.18);color:var(--mut)}.badge.cancelled,.badge.open{background:rgba(255,93,108,.15);color:var(--bad)}.badge.progress{background:rgba(255,176,32,.15);color:var(--warn)}.badge.resolved,.badge.paid{background:rgba(62,207,142,.16);color:var(--ok)}
.veg{width:14px;height:14px;border:2px solid var(--ok);border-radius:3px;display:inline-grid;place-items:center;flex:none}.veg::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok)}.veg.nv{border-color:var(--bad)}.veg.nv::after{background:var(--bad)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.card h3{font-size:15px;margin-bottom:12px}
.anim>*{animation:up .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*45ms)}
.tbl.bill{animation:up .5s cubic-bezier(.2,.8,.2,1) backwards,pulse 2s 0.6s infinite;animation-delay:calc(var(--i,0)*45ms),calc(var(--i,0)*45ms + .6s)}
@keyframes up{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(62,207,142,.5)}50%{box-shadow:0 0 0 10px rgba(62,207,142,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes float{50%{transform:translateY(-8px)}}

/* app shell */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--bg2);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 18px}.brand .lg{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold2));display:grid;place-items:center;font-size:20px;box-shadow:0 6px 16px rgba(240,185,77,.3)}
.brand b{font-family:Georgia,serif;font-size:16px;line-height:1.1}.brand small{color:var(--mut);display:block;font-size:11px}
.nav{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;border:0;background:none;text-align:left;color:var(--mut);font-weight:600;position:relative;transition:all .2s}
.nav:hover{background:var(--card);color:var(--tx);transform:translateX(3px)}
.nav.on{background:var(--card);color:var(--gold)}.nav.on::before{content:'';position:absolute;left:-12px;top:20%;height:60%;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
.nav i{font-style:normal;font-size:18px;width:22px;text-align:center}.nav .dot{margin-left:auto;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:0 7px;animation:pop .4s}
.main{padding:22px 26px 40px;min-width:0}
.top{display:flex;align-items:center;gap:12px;margin-bottom:20px}.top h1{font-size:24px;font-family:Georgia,serif}
.pill{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-weight:600;font-size:12px;display:flex;gap:6px;align-items:center}
.live{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.8s infinite}
.view{animation:vin .45s cubic-bezier(.2,.8,.2,1)}@keyframes vin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

/* kpi */
.kpi{position:relative;overflow:hidden}.kpi .v{font-size:28px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}.kpi .ic{position:absolute;right:12px;top:8px;font-size:34px;opacity:.16;animation:float 4s ease-in-out infinite}
.kpi::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);background-size:200% 100%;animation:shine 5s linear infinite;pointer-events:none}
.bars{display:flex;align-items:flex-end;gap:6px;height:170px;padding-top:10px}.bars .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bars .bar{width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--gold),var(--gold2));transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i)*40ms);min-height:3px;position:relative}
.bars .bar:hover::after{content:attr(data-v);position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--card2);padding:2px 7px;border-radius:6px;font-size:11px;white-space:nowrap;border:1px solid var(--line)}
.bars small{font-size:10px;color:var(--mut)}@keyframes grow{from{transform:scaleY(0)}}
.donut{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;animation:spin2 1s ease-out}.donut::after{content:'';width:80px;height:80px;border-radius:50%;background:var(--card)}
@keyframes spin2{from{transform:rotate(-120deg) scale(.6);opacity:0}}
.lg-dot{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
table.t{width:100%;border-collapse:collapse}.t th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:left;padding:8px;border-bottom:1px solid var(--line)}.t td{padding:10px 8px;border-bottom:1px solid var(--line)}.t tr{transition:background .2s}.t tbody tr:hover{background:var(--card2)}
.prog{height:6px;border-radius:9px;background:var(--card2);overflow:hidden}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:9px;transition:width 1s}

/* tables */
.tbl{text-align:center;cursor:pointer;transition:transform .2s,border-color .2s;position:relative;padding:18px 10px;border-width:2px}
.tbl:hover{transform:translateY(-4px) rotate(-.5deg)}.tbl .n{font-size:30px;font-weight:800;font-family:Georgia,serif}
.tbl.free{border-color:var(--line)}.tbl.busy{border-color:var(--warn);background:linear-gradient(180deg,rgba(255,176,32,.08),var(--card))}.tbl.bill{border-color:var(--ok)}.tbl.sel{border-color:var(--gold);transform:scale(1.05)}

/* menu */
.mi{display:flex;gap:12px;align-items:center;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:transform .2s,border .2s;position:relative}
.mi:hover{transform:translateY(-2px);border-color:var(--gold)}.mi .em{font-size:34px;width:56px;height:56px;border-radius:14px;background:var(--card2);display:grid;place-items:center;flex:none}
.mi.off{opacity:.5}.mi .nm{font-weight:700}.mi .pr{color:var(--gold);font-weight:800}
.hot{position:absolute;top:-7px;right:10px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;padding:1px 8px;border-radius:99px}
.stp{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--gold),var(--gold2));border-radius:11px;color:#1b1405;font-weight:800;overflow:hidden;animation:pop .25s}
.stp button{border:0;background:none;width:30px;height:30px;font-size:17px;font-weight:800;color:inherit}.stp span{min-width:22px;text-align:center}
.addb{border:1.5px solid var(--gold);color:var(--gold);background:transparent;border-radius:11px;padding:6px 16px;font-weight:800;transition:all .2s}.addb:hover{background:var(--gold);color:#1b1405}
.sw{position:relative;width:42px;height:24px;flex:none}.sw input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;z-index:2}.sw i{position:absolute;inset:0;background:var(--line);border-radius:99px;transition:.3s}.sw i::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.3s cubic-bezier(.3,1.6,.5,1)}.sw input:checked+i{background:var(--ok)}.sw input:checked+i::after{transform:translateX(18px)}

/* builder */
.builder{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.stack{position:sticky;top:16px;max-height:calc(100vh - 32px);display:flex;flex-direction:column}.stack .lines{overflow:auto;flex:1;margin:0 -4px;padding:0 4px}
.ln{display:flex;gap:8px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);animation:up .3s}
.tpick{display:flex;gap:8px;overflow:auto;padding:4px 2px 10px}.tpick button{flex:none;width:46px;height:46px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:800;position:relative;transition:all .2s}.tpick button.on{border-color:var(--gold);background:var(--gold);color:#1b1405;transform:scale(1.1)}.tpick button.has::after{content:'';position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--bad)}

/* kitchen */
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.col h3{display:flex;gap:8px;align-items:center;margin-bottom:12px}.col .cnt{background:var(--card2);border-radius:99px;padding:0 9px;font-size:12px}
.tk{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--info);border-radius:14px;padding:14px;margin-bottom:12px;touch-action:pan-y;cursor:grab;position:relative;animation:up .45s cubic-bezier(.2,.8,.2,1) backwards;box-shadow:var(--sh);transition:box-shadow .2s}
.tk.preparing{border-left-color:var(--warn)}.tk.ready{border-left-color:var(--ok)}.tk.late{box-shadow:0 0 0 2px var(--bad),var(--sh)}
.tk.dragging{cursor:grabbing;z-index:5;transition:none}.tk.armed{box-shadow:0 0 0 2px var(--ok),var(--sh)}
.tk::before{content:'→ Release to advance';position:absolute;left:14px;top:-1px;font-size:11px;font-weight:700;color:var(--ok);opacity:var(--sw,0);transform:translateY(-100%);white-space:nowrap}
.tk .it{display:flex;gap:8px;padding:3px 0}.tk .it b{color:var(--gold);min-width:26px}
.swipehint{font-size:11px;color:var(--mut);text-align:center;margin-top:8px}

/* modal / sheet */
.modal{position:fixed;inset:0;background:rgba(5,7,12,.6);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s}.modal.in{opacity:1}.modal.out{opacity:0}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;width:min(520px,94vw);max-height:90vh;overflow:auto;transform:translateY(40px) scale(.95);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.modal.in .sheet{transform:none}.modal.out .sheet{transform:translateY(60px)}.sheet.wide{width:min(760px,94vw)}
.grab{width:42px;height:5px;border-radius:9px;background:var(--line);margin:-8px auto 14px;cursor:grab;touch-action:none;display:none}
#toasts{position:fixed;top:14px;right:14px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--card2);border:1px solid var(--line);border-left:4px solid var(--ok);padding:11px 16px;border-radius:12px;box-shadow:var(--sh);animation:tin .4s cubic-bezier(.2,1.3,.4,1);transition:all .35s}.toast.err{border-left-color:var(--bad)}.toast.out{opacity:0;transform:translateX(40px)}
@keyframes tin{from{opacity:0;transform:translateX(60px) scale(.9)}}
.check{width:84px;height:84px;margin:6px auto}.check circle{stroke:var(--ok);stroke-width:4;fill:none;stroke-dasharray:166;stroke-dashoffset:166;animation:dash .6s .1s forwards}.check path{stroke:var(--ok);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:dash .4s .6s forwards}@keyframes dash{to{stroke-dashoffset:0}}
.spinner{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite;margin:10px auto}
.empty{text-align:center;color:var(--mut);padding:40px 10px}.empty .e{font-size:44px;display:block;animation:float 3s ease-in-out infinite}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;overflow:hidden}
.login::before,.login::after{content:'';position:absolute;border-radius:50%;filter:blur(80px);opacity:.28;animation:float 9s ease-in-out infinite}.login::before{width:380px;height:380px;background:var(--gold);top:-100px;left:-80px}.login::after{width:340px;height:340px;background:#5aa9ff;bottom:-80px;right:-60px;animation-delay:-4s}
.lbox{position:relative;z-index:1;width:min(560px,100%);text-align:center}
.lbox h1{font-family:Georgia,serif;font-size:34px;margin:12px 0 4px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.role{padding:20px 10px;border-radius:18px;background:var(--card);border:2px solid var(--line);transition:all .25s cubic-bezier(.2,1.4,.4,1);animation:up .6s backwards;animation-delay:calc(var(--i)*80ms)}
.role:hover{transform:translateY(-5px) scale(1.03);border-color:var(--gold)}.role.on{border-color:var(--gold);background:linear-gradient(180deg,rgba(240,185,77,.14),var(--card))}.role .ico{font-size:34px;display:block;margin-bottom:6px}
.pin{display:flex;gap:10px;justify-content:center;margin:14px 0}.pin i{width:16px;height:16px;border-radius:50%;border:2px solid var(--gold);transition:.2s}.pin i.f{background:var(--gold);transform:scale(1.2)}
.keys{display:grid;grid-template-columns:repeat(3,70px);gap:10px;justify-content:center}.keys button{height:58px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-size:20px;font-weight:700;position:relative;overflow:hidden}.keys button:active{transform:scale(.9)}
.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* qr + print */
.qrbox{background:#fff;border-radius:16px;padding:14px;display:inline-block}.qrbox img,.qrbox canvas{display:block}

/* mobile */
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;overflow-x:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:50;gap:2px;scrollbar-width:none}
  .brand{display:none}.nav{flex-direction:column;gap:2px;padding:6px 10px;font-size:10px;min-width:62px;text-align:center}.nav.on::before{display:none}.nav:hover{transform:none}
  .main{padding:16px 14px 100px}.builder{grid-template-columns:1fr}.stack{position:static;max-height:none}
  .kan{grid-template-columns:1fr}.top h1{font-size:20px}.grab{display:block}.modal{align-items:flex-end}.sheet{width:100%;border-radius:22px 22px 0 0}
  .hide-m{display:none}
}
@media print{body *{visibility:hidden}.printme,.printme *{visibility:visible}.printme{position:absolute;left:0;top:0;width:100%}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* icons (replace emoji) */
.i{width:1.15em;height:1.15em;vertical-align:-.2em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav i .i{width:19px;height:19px}.brand .lg .i{width:21px;height:21px;color:#1b1405}.role .ico .i{width:32px;height:32px;color:var(--gold)}
.kpi .ic .i{width:46px;height:46px}.empty .e .i{width:44px;height:44px}.mi .em .i{width:28px;height:28px;color:var(--gold)}
.tabs button i .i{width:21px;height:21px}.chip .i,.btn .i,.badge .i{width:1em;height:1em;vertical-align:-.15em}
.hot{background:var(--gold);color:#1b1405}
.btn.pri,.chip.on{letter-spacing:.01em}
.card{box-shadow:0 1px 0 rgba(255,255,255,.03) inset,var(--sh)}

/* audit fixes: no horizontal overflow */
.g2{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
.grid>*,.kan>*,.builder>*,.main>*,.row>.chips{min-width:0}
.row>.chips{flex:1;max-width:100%}
.dash2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}.dash2 .wide{grid-column:span 2}
.main{overflow-x:hidden}
@media (max-width:860px){.builder{grid-template-columns:minmax(0,1fr)}.dash2 .wide{grid-column:auto}.kan{grid-template-columns:minmax(0,1fr)}}
button:focus-visible,.chip:focus-visible,.nav:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* allergy / special instruction banner */
.alg{display:flex;gap:9px;align-items:flex-start;margin:8px 0;padding:9px 11px;border-radius:12px;background:rgba(255,93,108,.12);border:1px solid rgba(255,93,108,.4);color:var(--tx);font-size:13px;animation:pop .35s}
.alg .i{color:var(--bad);margin-top:2px;width:1.2em;height:1.2em}.alg b{color:var(--bad);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.chips>*{flex:none}

/* checkout simulation + bill states */
.sheet.rzp{width:min(430px,94vw);padding:0;overflow:hidden}.rzp #rz{padding:18px 20px 20px}
.modal.lock{pointer-events:none}.modal.lock .sheet{pointer-events:auto}.modal.lock .grab{pointer-events:none}
.rz-head{display:flex;align-items:center;gap:10px;margin:-18px -20px 14px;padding:14px 20px;background:linear-gradient(135deg,#1c2a4a,#2b3f73);color:#fff}
.rz-logo{font-weight:800;letter-spacing:.01em}.rz-head .badge{background:rgba(255,255,255,.16);color:#fff}
.rz-amt{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.rz-amt b{font-size:26px}
.rz-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.rz-tabs button{border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:9px 2px;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mut);transition:all .2s}
.rz-tabs button .i{width:20px;height:20px}.rz-tabs button.on{border-color:#4f7cff;color:var(--tx);background:rgba(79,124,255,.14);transform:translateY(-2px)}
.rz-foot{text-align:center;font-size:11px;color:var(--mut);margin-top:10px}.rz-ref{display:inline-block;margin-top:10px;padding:4px 12px;border-radius:99px;background:var(--card2);font:12px monospace}
.rzp .btn.pri{background:#4f7cff;color:#fff;box-shadow:0 6px 18px rgba(79,124,255,.35)}
.okbox{padding:10px 12px;border-radius:12px;background:rgba(62,207,142,.12);border:1px solid rgba(62,207,142,.4);font-size:13px;animation:pop .35s}.okbox b{color:var(--ok)}

/* editable business name on the login page */
.hname{display:block;width:100%;margin:12px 0 2px;text-align:center;font:700 34px Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:var(--tx);background:transparent;border:0;border-bottom:2px dashed var(--line);border-radius:0;padding:4px 8px;transition:border-color .2s,background .2s}
.hname:hover{border-bottom-color:var(--gold)}.hname:focus{border-bottom:2px solid var(--gold);background:rgba(240,185,77,.07);box-shadow:none}
.hhint{display:inline-flex;gap:6px;align-items:center;margin-top:4px;font-size:12px;color:var(--mut)}.hhint .i{color:var(--gold);width:13px;height:13px}
@media (max-width:560px){.hname{font-size:26px}}