:root{
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#008300; --c7:#6250d6; --c8:#e34948; --c-other:#898781;
  --grid:#ebe8e1; --axis:#c3c2b7;
  --bg:#f5f3ee; --card:#fff; --ink:#16130f; --muted:#7c7468; --line:#e8e3d9;
  --brand:#121110; --brand2:#2a2622; --accent:#a8834d; --accent-2:#c9a66b; --accent-ink:#fff;
  --gold-grad:linear-gradient(135deg,#c9a66b 0%,#a8834d 48%,#8c6a3b 100%);
  --gold-soft:#f4ede1;
  --ok:#2f7d4f; --ok-bg:#e5f2ea; --warn:#8a5a00; --warn-bg:#fbf1dc; --err:#b3261e; --err-bg:#fbe5e3;
  --r:16px; --shadow:0 1px 2px rgba(18,17,16,.04),0 6px 20px rgba(18,17,16,.06);
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent}
a{color:#7a5c30}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:.2rem 0 .8rem}
h3{font-size:1rem;margin:1.2rem 0 .6rem}
small,.muted{color:var(--muted)}
.r{text-align:right}.neg{color:var(--err)}.up{color:var(--ok)}
.center-text{text-align:center}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:224px;background:radial-gradient(120% 60% at 0% 0%,#2a2520 0%,var(--brand) 55%);color:#e9e2d6;padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 18px}
.brand .logo{width:38px;height:auto;filter:drop-shadow(0 2px 8px rgba(168,131,77,.35));animation:float 6s ease-in-out infinite}
.brand b{display:block;font-size:.95rem;letter-spacing:.02em;color:#f2e9da;white-space:nowrap}.brand small{color:#9b917f;font-size:.76rem}
.side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side nav a,.side nav button{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#cfc6b8;transition:background .25s var(--ease),color .25s,transform .25s var(--ease);overflow:hidden;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;width:100%;text-align:left}
.side nav a:hover,.side nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.side nav a svg{transition:transform .35s var(--ease)}
.side nav a:hover svg{transform:scale(1.08)}
.side nav a.on{background:linear-gradient(90deg,rgba(201,166,107,.22),rgba(201,166,107,.04));color:var(--accent-2)}
.side nav a.on::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--gold-grad);box-shadow:0 0 12px rgba(201,166,107,.8);animation:growY .5s cubic-bezier(.2,.8,.2,1)}
.side svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.side .logout{margin-top:auto}
.main{flex:1;min-width:0}
.page{padding:22px 26px 90px;max-width:1200px}
.narrow{max-width:560px}
.center{min-height:100vh;display:grid;place-items:center;padding:20px}

/* components */
.card{background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.cols>.card{margin-bottom:0}.cols{margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.span2{grid-column:span 2}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:12px}
input,select,textarea{display:block;width:100%;margin-top:5px;font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(168,131,77,.15)}
input[type=checkbox],input[type=radio]{display:inline;width:auto;margin:0 6px 0 0}
label.check{display:flex;align-items:center;font-weight:500}
.btn{position:relative;overflow:hidden;transition:transform .15s var(--ease),box-shadow .25s,border-color .2s,filter .2s;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--gold-grad);background-size:160% 160%;border-color:transparent;color:#fff;box-shadow:0 6px 18px -6px rgba(168,131,77,.65);text-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn.primary:hover{background-position:100% 0;box-shadow:0 10px 24px -8px rgba(168,131,77,.75)}
.btn:active{transform:scale(.96)}
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sheen 3.6s ease-in-out infinite}
.btn.danger{background:var(--err);border-color:var(--err);color:#fff}
.btn.danger.ghost{background:none;color:var(--err)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 10px;font-size:.85rem}
.btn.lg{padding:14px 18px;font-size:1.05rem}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.flash{padding:11px 14px;border-radius:10px;margin:0 0 14px;background:var(--ok-bg);color:var(--ok);font-weight:500}
.main>.flash{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;max-width:min(560px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.15);transition:opacity .4s}
.main>.flash.hide{opacity:0;pointer-events:none}
.flash.warn{background:var(--warn-bg);color:var(--warn)}.flash.err{background:var(--err-bg);color:var(--err)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:700;background:#eee;color:#555;text-decoration:none}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.err{background:var(--err-bg);color:var(--err)}
table{width:100%;border-collapse:collapse}
.list td,.list th{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.list th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.list th.r,.list td.r{text-align:right}
.list tr:last-child td{border-bottom:0}
.list.click tbody tr,.list.click tr[data-href]{cursor:pointer}
.list.click tr[data-href]{transition:background .2s}.list.click tr[data-href]:hover{background:#faf7f1}
tr.void td{opacity:.5}tr.warnrow td{background:var(--warn-bg)}
.kv td{padding:6px 0}.kv td:last-child{text-align:right}.kv .strong td{font-weight:800;border-top:1px solid var(--line);padding-top:10px}
.scroll-x{overflow-x:auto}.scroll-y{max-height:340px;overflow-y:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.stat{background:var(--card);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.stat small{display:block;font-weight:600}.stat b{display:block;font-size:1.35rem;margin:3px 0}.stat span{font-size:.8rem;color:var(--muted)}
.stat.hero{background:radial-gradient(140% 120% at 100% 0%,#3a3128 0%,var(--brand) 60%);color:#fff;position:relative;overflow:hidden}.stat.hero b{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stat.hero small,.stat.hero span{color:#a99e8c}
.stat{transition:transform .25s var(--ease),box-shadow .25s}.stat:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(18,17,16,.25)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters input{width:auto;margin:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{padding:7px 13px;border-radius:99px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:.88rem}
.chip{transition:all .2s var(--ease)}.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--brand);color:var(--accent-2);border-color:var(--brand)}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline input{margin:0;width:auto;flex:1;min-width:120px}
.inline .w-s,.w-s{width:70px!important;flex:0 0 70px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.stack-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.actions{white-space:nowrap}.actions form,.actions details{display:inline-block;vertical-align:top;margin:0 2px 4px 0}
details.pop{position:relative}details.pop>summary{list-style:none}details.pop>summary::-webkit-details-marker{display:none}
.popbox{position:absolute;right:0;top:110%;z-index:20;background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.2);padding:14px;width:270px;white-space:normal}
.popbox b{display:block;margin-bottom:8px}
.rec-row{display:grid;grid-template-columns:1fr 110px auto;gap:8px;margin-bottom:8px;align-items:center}
.rec-row select,.rec-row input{margin:0}
.meter{height:5px;background:var(--gold-soft);border-radius:3px;margin-top:5px;overflow:hidden}.meter i{display:block;height:100%;background:var(--gold-grad);border-radius:3px;transform-origin:left;animation:growX .9s var(--ease) both}
code{background:var(--gold-soft);padding:1px 5px;border-radius:4px}

/* promo */
.promo-strip{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;scrollbar-width:none}
.promo-strip:empty{display:none}
.promo-chip{position:relative;overflow:hidden;flex-shrink:0;background:var(--gold-soft);border:1px solid rgba(168,131,77,.35);color:#5f4520;border-radius:12px;padding:7px 12px;font-size:.82rem;white-space:nowrap}
.promo-chip.off{opacity:.5;text-decoration:line-through}
.promo-line{color:#8c6a3b;font-weight:700;animation:slideIn .35s var(--ease)}
.promo-hint{animation:slideIn .35s var(--ease);background:var(--gold-soft);color:#5f4520;border-radius:10px;padding:8px 10px;font-size:.82rem;margin-bottom:8px;font-weight:600}
.pay-promo{display:block;font-size:.85rem;color:#8c6a3b;font-weight:700;margin-top:2px}
.seg.seg3{grid-template-columns:1fr 1fr 1fr}
.days{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 14px}
.days label{margin:0}.days input{position:absolute;opacity:0;pointer-events:none}
.days span{display:block;padding:8px 12px;border:2px solid var(--line);border-radius:10px;font-weight:700;cursor:pointer;min-width:52px;text-align:center}
.days input:checked+span{border-color:var(--accent);background:var(--gold-soft)}
.checks{display:flex;flex-wrap:wrap;gap:4px 16px;margin:-4px 0 12px}
.checks label{margin:0}
[data-type][hidden],[data-scope][hidden]{display:none!important}
button.chip{cursor:pointer;font:inherit;font-weight:600;font-size:.85rem}

/* login */
.center{position:relative;overflow:hidden;background:#121110}
.center::before,.center::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.center::before{background:radial-gradient(circle,#a8834d 0%,transparent 60%);top:-25vmax;left:-15vmax;animation:drift 14s ease-in-out infinite alternate}
.center::after{background:radial-gradient(circle,#5c4630 0%,transparent 60%);bottom:-30vmax;right:-20vmax;animation:drift 18s ease-in-out infinite alternate-reverse}
.login-card{position:relative;z-index:1;background:#fffdf9;padding:30px 28px 30px;border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(201,166,107,.25);width:100%;max-width:380px;text-align:center;animation:rise .8s var(--spring) both}
.login-card form{text-align:left;margin-top:10px}
.login-logo{width:170px;max-width:62%;height:auto;margin:0 auto 10px;display:block;animation:logoIn 1.1s var(--spring) both}
.login-sub{margin:0 0 8px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:700}

/* bars chart */
.bars{display:flex;align-items:flex-end;gap:2px;height:220px;padding:10px 0 22px;border-bottom:1px solid var(--line);position:relative}
.bars.short{height:170px}
.bar-col{flex:1;height:100%;display:flex;align-items:flex-end;position:relative;outline:none;min-width:6px}
.bar-col .bar{width:100%;background:linear-gradient(180deg,#c9a66b,#a8834d);border-radius:4px 4px 0 0;min-height:0;transition:filter .15s;transform-origin:bottom;animation:growY .8s var(--ease) both}
.bar-col:hover .bar,.bar-col:focus .bar{filter:brightness(.8)}
.bar-col .lbl{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:.68rem;color:var(--muted)}
.bar-col .tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 9px;border-radius:8px;font-size:.78rem;white-space:nowrap;z-index:5;pointer-events:none}
.bar-col:hover .tip,.bar-col:focus .tip{display:block}
.bar-col{cursor:default}.bar-col::before{content:"";position:absolute;inset:0}

/* POS */
.pos{display:grid;grid-template-columns:1fr 370px;height:100vh}
.pos-menu{padding:18px 20px;overflow-y:auto}
.pos-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.pos-top input{margin:0;flex:1}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.tabs button{padding:8px 15px;border-radius:99px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.tabs button{transition:all .2s var(--ease)}
.tabs button.on{background:var(--brand);color:var(--accent-2);border-color:var(--brand);box-shadow:0 6px 16px -8px rgba(18,17,16,.6)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.prod{overflow:hidden;transition:transform .2s var(--ease),box-shadow .25s,border-color .2s;animation:popIn .45s var(--spring) both;background:#fff;border:2px solid transparent;border-radius:var(--r);padding:16px 14px;text-align:left;cursor:pointer;font:inherit;box-shadow:var(--shadow);position:relative;min-height:108px;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink);transition:transform .06s}
.prod:hover{border-color:rgba(168,131,77,.55);transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(168,131,77,.55)}
.prod:active{transform:scale(.95)}
.prod.in-cart{border-color:var(--accent);background:linear-gradient(180deg,#fff 60%,var(--gold-soft))}
.prod b{font-size:1rem;line-height:1.25}
.prod .price{font-weight:700;color:#7a5c30;margin-top:8px}
.prod .av{font-size:.72rem;color:var(--muted)}
.prod .av.low{color:var(--warn);font-weight:700}.prod.out{opacity:.55}.prod.out .av{color:var(--err);font-weight:700}
.prod .qbadge.pop{animation:pop .4s var(--spring)}
.prod .qbadge{position:absolute;top:8px;right:8px;background:var(--gold-grad);box-shadow:0 4px 10px -2px rgba(168,131,77,.6);color:#fff;border-radius:99px;min-width:24px;height:24px;display:grid;place-items:center;font-size:.8rem;font-weight:800;padding:0 6px}
.pos-cart{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;height:100vh}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 6px}
.cart-head h2{margin:0}
.cart{flex:1;overflow-y:auto;padding:0 18px}
.cart .empty{color:var(--muted);text-align:center;padding:40px 0}
.ci{padding:12px 0;border-bottom:1px dashed var(--line);animation:slideIn .35s var(--ease) both}
.ci-top{display:flex;justify-content:space-between;gap:8px}
.ci-top b{font-weight:600}
.ci-ctl{display:flex;align-items:center;gap:8px;margin-top:8px}
.ci-ctl button{transition:transform .12s,border-color .2s;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:1.1rem;font-weight:700;cursor:pointer}
.ci-ctl .q{min-width:26px;text-align:center;font-weight:700}
.ci-ctl input{margin:0;padding:7px 10px;font-size:.85rem;flex:1}
.cart-foot{padding:14px 18px 18px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fffdf9,#faf6ee)}
#total{display:inline-block;transition:color .3s}#total.bump{animation:bump .4s var(--spring)}
.cart-foot .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.cart-foot .row input{width:130px;margin:0;text-align:right;padding:6px 10px}
.cart-foot .total{font-size:1.25rem;font-weight:800}
.cart-fab{display:none}
.row{display:flex;justify-content:space-between;align-items:center}

/* dialog */
.dlg{border:0;border-radius:24px;padding:0;width:min(440px,94vw);max-height:94vh;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dlg[open]{animation:dlgIn .35s var(--spring)}
.dlg::backdrop{background:rgba(18,17,16,.55);backdrop-filter:blur(3px);animation:fade .3s}
.dlg-body{padding:22px}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.big-total{font-size:2rem;font-weight:800;text-align:center;margin:4px 0 14px;color:var(--ink);letter-spacing:-.01em}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.seg label{margin:0}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:12px;border:2px solid var(--line);border-radius:12px;font-weight:700;cursor:pointer}
.seg span{transition:all .2s var(--ease)}
.seg input:checked+span{border-color:var(--accent);background:var(--gold-soft);transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(168,131,77,.6)}
.quick{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.quick button{flex:1;min-width:70px;padding:9px 6px;border-radius:9px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:600;cursor:pointer}
input.lg{font-size:1.4rem;font-weight:700;text-align:right}
.qris{display:block;max-width:240px;width:100%;margin:0 auto 10px;border-radius:12px;border:1px solid var(--line)}
.done-ic{width:76px;height:76px;margin:0 auto 8px;display:block}
.done-ic circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:180;stroke-dashoffset:180;animation:draw .6s var(--ease) forwards}
.done-ic path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:draw .4s .45s var(--ease) forwards}
.stack .inline input{min-width:0}

.show-m{display:none!important}
/* mobile & tablet */
@media (max-width:900px){
  .shell{flex-direction:column}
  .side{position:fixed;bottom:0;top:auto;left:0;right:0;width:auto;height:auto;padding:4px 4px calc(4px + env(safe-area-inset-bottom));z-index:50;flex-direction:row}
  .brand,.hide-m{display:none!important}
  .show-m{display:inline-flex!important}
  .side nav{flex-direction:row;justify-content:flex-start;gap:0;overflow-x:auto;scrollbar-width:none;width:100%}
  .side nav::-webkit-scrollbar{display:none}
  .side nav a,.side nav button{flex-direction:column;gap:2px;padding:7px 4px;font-size:.68rem;text-align:center;justify-content:center}
  .side .logout{margin:0;flex:1;display:flex}.side .logout button{width:100%}
  .side nav>a{flex:1 0 64px}
  .side .logout{flex:1 0 64px!important}
  .side nav a.on::before{left:22%;right:22%;top:0;bottom:auto;width:auto;height:3px}
  .page{padding:16px 14px 90px}
  .pos{grid-template-columns:1fr;height:auto;min-height:100vh}
  .pos-menu{padding:14px 14px 150px}
  .pos-cart{position:fixed;left:0;right:0;bottom:0;height:82vh;border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .25s;z-index:60;box-shadow:0 -10px 40px rgba(0,0,0,.25);border:0}
  .pos-cart.open{transform:none}
  .cart-fab{display:block;position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:55;padding:15px;border-radius:16px;border:0;background:var(--gold-grad);color:#fff;font:inherit;font-weight:800;font-size:1rem;box-shadow:0 10px 26px -6px rgba(168,131,77,.7);transition:transform .2s var(--spring)}
  .cart-fab.bump{animation:bump .45s var(--spring)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .grid2{grid-template-columns:1fr}.span2{grid-column:auto}
  .popbox{position:fixed;left:12px;right:12px;top:auto;bottom:80px;width:auto}
}
@media (min-width:901px) and (max-width:1100px){.pos{grid-template-columns:1fr 320px}}
.print-head{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;font-size:12px}
  .side,.cart-fab,.filters,.chips,.no-print,.demo-bar,.main>.flash{display:none!important}
  .page{padding:0;max-width:none}
  .page>*,.stats .stat,.seg-bar,.share i,.meter i{animation:none!important}
  .card,.stat{box-shadow:none;border:1px solid #e3ded4;break-inside:avoid}
  .print-head{display:flex;align-items:center;gap:12px;margin:-6px 0 10px;padding-bottom:8px;border-bottom:2px solid #16130f}
  .print-head img{width:56px}
  .stat.hero{background:#16130f!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .seg-bar,.share i,.meter i,.key,.legend i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .scroll-y{max-height:none}
}

/* ================= MOTION ================= */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(8px)}}
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes growX{from{transform:scaleX(0)}}
@keyframes sheen{0%,60%{left:-60%}100%{left:130%}}
@keyframes shimmer{0%,70%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.1)}}
@keyframes logoIn{from{opacity:0;transform:scale(.6) rotate(-25deg)}}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes press{0%{transform:scale(1)}35%{transform:scale(.965)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}15%,55%{transform:translateX(-9px)}35%,75%{transform:translateX(9px)}}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-14px)}}

.page>*{animation:rise .5s var(--ease) both}
.page>*:nth-child(2){animation-delay:.04s}.page>*:nth-child(3){animation-delay:.08s}.page>*:nth-child(4){animation-delay:.12s}
.page>*:nth-child(5){animation-delay:.16s}.page>*:nth-child(6){animation-delay:.2s}.page>*:nth-child(n+7){animation-delay:.24s}
.stats .stat{animation:rise .5s var(--ease) both}
.stats .stat:nth-child(2){animation-delay:.05s}.stats .stat:nth-child(3){animation-delay:.1s}.stats .stat:nth-child(4){animation-delay:.15s}.stats .stat:nth-child(n+5){animation-delay:.2s}
.main>.flash{animation:toastIn .4s var(--spring)}
.promo-chip::after{content:"";position:absolute;top:0;left:0;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 3.2s ease-in-out infinite}
.buzz{animation:press .38s cubic-bezier(.3,1.5,.5,1)!important}
.side .buzz,.tabs .buzz,.chip.buzz{animation:none!important}
.shake{animation:shake .45s var(--ease)!important}
.rpl{position:absolute;border-radius:50%;pointer-events:none;background:rgba(201,166,107,.22);transform:scale(0);animation:ripple .7s cubic-bezier(.2,.7,.2,1) forwards}
.btn.primary .rpl,.cart-fab .rpl{background:rgba(255,255,255,.3)}
.side .rpl{background:rgba(201,166,107,.14)}
.fly{position:fixed;z-index:400;width:16px;height:16px;border-radius:50%;background:var(--gold-grad);box-shadow:0 0 14px rgba(201,166,107,.9);pointer-events:none;transition:transform .55s cubic-bezier(.5,-.3,.7,1),opacity .55s}
.cf{position:fixed;z-index:500;width:8px;height:12px;border-radius:2px;pointer-events:none;animation:confetti 1.1s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== grafik (palet kategorikal aman buta warna) ===== */
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chart-head h2{margin:0}
.legend{display:flex;gap:14px;font-size:.82rem;color:#52514e;font-weight:600}
.legend i,.tip .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart{position:relative;height:230px;padding-left:44px;margin-top:8px}
.chart.short{height:180px}
.chart .bars{height:100%;padding:0 0 22px;border-bottom:1px solid var(--axis);gap:3px}
.grid-lines{position:absolute;left:44px;right:0;top:0;bottom:22px;pointer-events:none}
.grid-lines span{position:absolute;left:0;right:0;border-top:1px solid var(--grid)}
.grid-lines em{position:absolute;right:calc(100% + 8px);top:-8px;font-style:normal;font-size:.68rem;color:#898781;white-space:nowrap;font-variant-numeric:tabular-nums}
.stack{width:100%;height:100%;display:flex;flex-direction:column-reverse;align-items:stretch;position:relative;z-index:1}
.seg-bar{width:100%;flex:none;transform-origin:bottom;animation:growY .8s var(--ease) both}
.stack .seg-bar+.seg-bar{box-shadow:0 2px 0 #fff}
.stack .seg-bar:last-child{border-radius:4px 4px 0 0}
.stack .seg-bar[style*="height:0%"]{display:none}
.bar-col:hover .seg-bar,.bar-col:focus .seg-bar{filter:brightness(.88) saturate(1.1)}
.bar-col .tip{line-height:1.6;text-align:left}
.share{display:flex;height:14px;border-radius:7px;overflow:visible;gap:2px;margin:2px 0 12px}
.share i{position:relative;display:block;min-width:4px;transform-origin:left;animation:growX .8s var(--ease) both;outline:none}
.share i:first-child{border-radius:7px 0 0 7px}.share i:last-child{border-radius:0 7px 7px 0}
.share .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:6px 9px;border-radius:8px;font-size:.78rem;white-space:nowrap;z-index:5}
.share i:hover .tip,.share i:focus .tip{display:block}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}

/* ===== dashboard ===== */
.dash-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;background:radial-gradient(120% 140% at 100% 0%,#3a3128 0%,#121110 60%);color:#f2e9da;border-radius:20px;padding:22px 24px;margin-bottom:18px;position:relative;overflow:hidden}
.dash-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(201,166,107,.35);pointer-events:none}
.dash-hero small{color:#a99e8c;letter-spacing:.04em}
.dash-hero h1{margin:.2rem 0 .3rem;font-size:1.6rem;color:#fff}
.dash-hero p{margin:0;color:#cfc6b8}
.dash-hero p b{color:var(--accent-2)}
.hero-act{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.btn.ghost.light{color:#f2e9da;border-color:rgba(255,255,255,.25)}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.dash-grid>.card{margin:0}
.dash-grid .span2{grid-column:span 2}
.delta{font-style:normal;font-weight:700}
.stat.hero .delta.up{color:#7fd3a0}.stat.hero .delta.neg{color:#ff9a8f}
.bar-col.is-today .lbl{color:var(--ink);font-weight:800}
.small-gap{margin:12px 0 0}
.target-head{display:flex;justify-content:space-between;align-items:center}.target-head h2{margin:0}
.progress{height:14px;background:var(--gold-soft);border-radius:8px;overflow:hidden;margin:12px 0 6px}
.progress i{display:block;height:100%;background:var(--gold-grad);border-radius:8px;transform-origin:left;animation:growX 1s var(--ease) both}
.promo-chip.block{display:block;white-space:normal;margin-bottom:8px}
@media (max-width:700px){.dash-grid .span2{grid-column:auto}.dash-hero h1{font-size:1.3rem}}

/* ===== portal login per peran ===== */
.portal-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-weight:800;font-size:.85rem;letter-spacing:.04em;margin-bottom:4px;background:#16130f;color:var(--accent-2)}
.portal-badge span{font-size:1rem}
.portal-desc{color:var(--muted);font-size:.85rem;margin:6px 0 14px}
.portal-switch{display:inline-block;margin-top:14px;font-size:.85rem;color:var(--muted);text-decoration:none}
.portal-switch:hover{color:var(--ink)}
.flash.err a{color:inherit;font-weight:800}
/* Owner: hitam-emas */
.portal-owner .login-card{box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(201,166,107,.35)}
/* Manager: hijau tua */
.portal-manager .center{background:#0c2420}
.portal-manager .center::before{background:radial-gradient(circle,#2f7d6a 0%,transparent 60%)}
.portal-manager .center::after{background:radial-gradient(circle,#a8834d 0%,transparent 60%);opacity:.35}
.portal-manager .portal-badge{background:#0c2420;color:#8fd6c0}
.portal-manager .btn.primary{background:linear-gradient(135deg,#2f7d6a,#1d5a4b);box-shadow:0 6px 18px -6px rgba(29,90,75,.7)}
.portal-manager .login-card{box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(143,214,192,.35)}
.portal-manager input:focus{border-color:#2f7d6a;box-shadow:0 0 0 4px rgba(47,125,106,.18)}
/* Barista: krem terang */
.portal-barista .center{background:#f3ece0}
.portal-barista .center::before{background:radial-gradient(circle,#e8c48e 0%,transparent 60%);opacity:.7}
.portal-barista .center::after{background:radial-gradient(circle,#f0a77a 0%,transparent 60%);opacity:.35}
.portal-barista .portal-badge{background:#fff4e2;color:#8c6a3b;border:1px solid rgba(168,131,77,.35)}
.portal-barista .login-card{background:#fff;box-shadow:0 30px 60px -24px rgba(140,106,59,.45),0 0 0 1px rgba(168,131,77,.25)}
/* Pilih portal */
.portal-choose .center{background:#121110}
.chooser{position:relative;z-index:1;width:100%;max-width:960px;text-align:center;animation:rise .7s var(--spring) both}
.chooser-logo{width:150px;background:#fffdf9;border-radius:50%;padding:6px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);animation:logoIn 1s var(--spring) both}
.chooser .login-sub{color:#a99e8c;margin:16px 0 22px}
.portal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.portal-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:22px 20px;border-radius:20px;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s;animation:rise .6s var(--spring) both}
.portal-card:nth-child(2){animation-delay:.08s}.portal-card:nth-child(3){animation-delay:.16s}
.portal-card:hover{transform:translateY(-6px)}
.portal-card b{font-size:1.15rem}
.portal-card small{opacity:.8;line-height:1.4}
.pc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:6px}
.pc-go{margin-top:10px;font-weight:800;font-size:.9rem}
.pc-owner{background:linear-gradient(160deg,#2a2520,#16130f);color:#f2e9da;box-shadow:0 0 0 1px rgba(201,166,107,.4)}
.pc-owner .pc-ic{background:var(--gold-grad);color:#16130f}.pc-owner .pc-go{color:var(--accent-2)}
.pc-owner:hover{box-shadow:0 0 0 1px rgba(201,166,107,.8),0 20px 40px -12px rgba(201,166,107,.35)}
.pc-manager{background:linear-gradient(160deg,#164238,#0c2420);color:#e3f4ee;box-shadow:0 0 0 1px rgba(143,214,192,.3)}
.pc-manager .pc-ic{background:#2f7d6a;color:#fff}.pc-manager .pc-go{color:#8fd6c0}
.pc-manager:hover{box-shadow:0 0 0 1px rgba(143,214,192,.7),0 20px 40px -12px rgba(47,125,106,.5)}
.pc-barista{background:linear-gradient(160deg,#fffaf2,#f3e6d1);color:#3a2c1b}
.pc-barista .pc-ic{background:#fff;box-shadow:0 0 0 1px rgba(168,131,77,.4)}.pc-barista .pc-go{color:#8c6a3b}
.pc-barista:hover{box-shadow:0 20px 40px -12px rgba(232,196,142,.6)}
@media (max-width:760px){.portal-cards{grid-template-columns:1fr}.chooser{max-width:420px}}
/* chip peran di sidebar */
.role-chip{display:inline-block;padding:0 7px;border-radius:99px;font-size:.68rem;font-weight:800;letter-spacing:.04em;margin-left:2px;background:rgba(201,166,107,.18);color:var(--accent-2)}
.role-manager .role-chip{background:rgba(143,214,192,.16);color:#8fd6c0}
.role-barista .role-chip{background:rgba(255,244,226,.14);color:#f3e6d1}

/* ===== Tema portal setelah login (ditentukan peran akun) ===== */
.brand .role-chip{display:inline-block;margin-top:4px;padding:2px 9px;font-size:.66rem}
/* Portal Manager: hijau tua */
body.role-manager{--accent:#2f7d6a;--accent-2:#8fd6c0;--gold-grad:linear-gradient(135deg,#43a089 0%,#2f7d6a 50%,#1d5a4b 100%);--gold-soft:#e6f3ef}
.role-manager .side{background:radial-gradient(120% 60% at 0% 0%,#1d4a40 0%,#0c2420 60%)}
.role-manager .side nav a.on{background:linear-gradient(90deg,rgba(143,214,192,.2),rgba(143,214,192,.03));color:#8fd6c0}
.role-manager .side nav a.on::before{background:linear-gradient(180deg,#8fd6c0,#2f7d6a);box-shadow:0 0 12px rgba(143,214,192,.7)}
.role-manager .brand .logo{filter:drop-shadow(0 2px 8px rgba(143,214,192,.35))}
.role-manager .dash-hero{background:radial-gradient(120% 140% at 100% 0%,#1d5a4b 0%,#0c2420 60%)}
.role-manager .dash-hero::after{border-color:rgba(143,214,192,.35)}
.role-manager .dash-hero p b{color:#8fd6c0}
.role-manager .stat.hero{background:radial-gradient(140% 120% at 100% 0%,#1d5a4b 0%,#0c2420 60%)}
.role-manager .stat.hero b{background:linear-gradient(135deg,#bfeee0,#8fd6c0);-webkit-background-clip:text;background-clip:text}
.role-manager .progress i,.role-manager .prod .qbadge,.role-manager .cart-fab{background:var(--gold-grad)}
/* Portal Barista: krem terang */
body.role-barista{--accent:#a8834d;--gold-soft:#f6ecdc}
.role-barista .side{background:linear-gradient(180deg,#fffaf2,#f3e6d1);color:#3a2c1b;border-right:1px solid #eadcc4}
.role-barista .brand b{color:#2a1f15}.role-barista .brand small{color:#8a7a66}
.role-barista .side nav a,.role-barista .side nav button{color:#5c4b37}
.role-barista .side nav a:hover,.role-barista .side nav button:hover{background:rgba(168,131,77,.1);color:#2a1f15}
.role-barista .side nav a.on{background:linear-gradient(90deg,rgba(168,131,77,.2),rgba(168,131,77,.04));color:#7a5c30}
.role-barista .role-chip{background:#fff;color:#8c6a3b;box-shadow:0 0 0 1px rgba(168,131,77,.35)}
.role-barista .dash-hero{background:linear-gradient(135deg,#fffaf2 0%,#f3e3c8 100%);color:#3a2c1b;box-shadow:0 0 0 1px #eadcc4}
.role-barista .dash-hero h1{color:#2a1f15}.role-barista .dash-hero p{color:#6b5a45}.role-barista .dash-hero small{color:#8a7a66}
.role-barista .dash-hero::after{border-color:rgba(168,131,77,.3)}
.role-barista .stat.hero{background:linear-gradient(135deg,#3a2c1b,#16130f)}
.role-barista .rpl{background:rgba(168,131,77,.25)}
@media (max-width:900px){.role-barista .side{border-right:0;border-top:1px solid #eadcc4}}
/* login tunggal */
.portal-login .portal-desc{margin:14px 0 0;font-size:.8rem}

/* ===== absensi ===== */
.att-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.att-status>div{background:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);border-left:4px solid var(--line)}
.att-status>div.done{border-left-color:var(--ok)}
.att-status small{display:block;color:var(--muted);font-weight:600}.att-status b{display:block;font-size:1.4rem;margin:2px 0}
.cam{position:relative;aspect-ratio:3/4;max-width:360px;margin:0 auto 12px;border-radius:20px;overflow:hidden;background:#16130f}
.cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam img{width:100%;height:100%;object-fit:cover;display:block}
.cam-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#e9e2d6;padding:20px;font-weight:600}
.cam-guide{position:absolute;left:50%;top:44%;width:56%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.45);border-radius:50%;pointer-events:none}
.cam img:not([hidden])~.cam-guide{display:none}
.loc{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#f3f1ec;font-weight:600;font-size:.88rem;margin-bottom:12px}
.loc.ok{background:var(--ok-bg);color:var(--ok)}.loc.bad{background:var(--err-bg);color:var(--err)}
.dot-live{width:10px;height:10px;border-radius:50%;background:currentColor;animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}
.done-big{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:var(--ok-bg);color:var(--ok);font-size:38px;font-weight:800;animation:pop .5s var(--spring)}
.att-cell{display:flex;gap:10px;align-items:flex-start;min-width:220px}
.att-thumb img{width:56px;height:74px;object-fit:cover;border-radius:10px;display:block;box-shadow:0 0 0 1px var(--line)}
.att-thumb:hover img{box-shadow:0 0 0 2px var(--accent)}
.small-link{font-size:.8rem}
.photo-big{display:block;width:100%;max-height:70vh;object-fit:contain;border-radius:14px;background:#16130f}
.role-tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.7rem;font-weight:800}
.rt-owner{background:#16130f;color:#c9a66b}.rt-manager{background:#e6f3ef;color:#1d5a4b}.rt-barista{background:#f6ecdc;color:#7a5c30}
.att-dash{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.att-dash h2{margin:0}.att-dash p{margin:4px 0 0}

/* ===== tombol keluar selalu terlihat ===== */
.side nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.side nav::-webkit-scrollbar{display:none}
.side .logout{margin-top:0;flex:0 0 auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
.side .logout button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#ffb4a8;font:inherit;background:none;border:0;cursor:pointer;width:100%;text-align:left}
.side .logout button:hover{background:rgba(255,120,100,.12);color:#ffd2ca}
.role-barista .side .logout{border-top-color:#eadcc4}.role-barista .side .logout button{color:#b3261e}
.topbar{display:none}
@media (min-width:901px) and (max-height:860px){.side nav a,.side nav button{padding:7px 12px}.brand{padding-bottom:10px}}
@media (max-width:900px){
  .side .logout{display:none}
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;padding:10px 14px calc(10px);padding-top:calc(10px + env(safe-area-inset-top));background:rgba(245,243,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .tb-logo{width:30px;height:auto}
  .tb-who{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
  .tb-who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
  .topbar .role-chip{background:#16130f;color:#c9a66b;margin:0}
  .role-manager .topbar .role-chip{background:#0c2420;color:#8fd6c0}
  .role-barista .topbar .role-chip{background:#f6ecdc;color:#7a5c30}
  .tb-logout{margin:0}
  .tb-btn{display:inline-flex;align-items:center;gap:6px;height:38px;min-width:38px;justify-content:center;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:.85rem;cursor:pointer;text-decoration:none}
  .tb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .tb-btn.out{color:var(--err);border-color:#f3c9c4;background:#fff7f6}
  .pos{min-height:calc(100vh - 60px)}
  .pos-cart{height:78vh}
}
.addr-box{margin:-4px 0 12px;padding:9px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:.86rem;font-weight:600}
.addr{display:inline-block;color:#5c4b37;line-height:1.35;max-width:260px}

.loc-way{padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#fffdf9}
.loc-way b{display:block;margin-bottom:6px;font-size:.88rem}
.loc-way .inline input{margin:0}
.geo-res{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.geo-item{text-align:left;padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.84rem;cursor:pointer;line-height:1.35}
.geo-item:hover{border-color:var(--accent)}.geo-item.on{border-color:var(--accent);background:var(--gold-soft);font-weight:600}
.loc-now{padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-weight:600;font-size:.88rem}
.loc-now:not(.picked):first-letter{}
.loc-now.picked{background:var(--ok-bg);color:var(--ok)}

/* ===== perpindahan halaman halus (sidebar tetap diam, isi berganti lembut) ===== */
@view-transition{navigation:auto}
.side{view-transition-name:sidebar}
.topbar{view-transition-name:topbar}
::view-transition-old(root){animation:vtOut .18s ease-out both}
::view-transition-new(root){animation:vtIn .32s cubic-bezier(.2,.8,.2,1) both}
::view-transition-group(sidebar),::view-transition-group(topbar){animation:none}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(6px)}}
/* menu aktif: indikator tidak "tumbuh" ulang tiap pindah halaman bila transisi aktif */
@supports (view-transition-name:a){.side nav a.on::before{animation:none}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.uname{display:flex;align-items:stretch;margin-top:5px;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.uname:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(168,131,77,.15)}
.uname input{margin:0;border:0;border-radius:0;flex:1;min-width:0;box-shadow:none!important}
.uname span{display:flex;align-items:center;padding:0 12px;background:#f6f3ec;color:var(--muted);font-weight:600;font-size:.9rem;border-left:1px solid var(--line);white-space:nowrap}

/* ===== peta titik usaha ===== */
.booth-card{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.booth-map{min-width:0}
.osm{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#e9e5dc;max-width:100%;box-shadow:inset 0 0 0 1px var(--line)}
.osm img{position:absolute;width:256px;height:256px;max-width:none;filter:saturate(.75) contrast(.95)}
.osm-radius{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(168,131,77,.16);border:2px solid rgba(168,131,77,.75);pointer-events:none;animation:fade .6s ease}
.osm-booth{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--gold-grad);box-shadow:0 0 0 4px #fff,0 4px 14px rgba(0,0,0,.35);z-index:1}
.osm-booth::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(168,131,77,.6);animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
.osm-booth span{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;background:#16130f;color:#c9a66b;font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:7px}
.osm-pt{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#2f7d4f;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.3);z-index:2;outline:none;cursor:default}
.osm-pt.bad{background:var(--err)}
.osm-pt span{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:.74rem;padding:5px 8px;border-radius:7px;font-style:normal}
.osm-pt:hover span,.osm-pt:focus span{display:block}.osm-pt:hover,.osm-pt:focus{z-index:4}
.osm-attr{position:absolute;right:6px;bottom:4px;font-size:.62rem;background:rgba(255,255,255,.8);padding:1px 5px;border-radius:4px;color:#555}
.osm-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.8rem;color:#52514e;align-items:center}
.osm-legend span{display:inline-flex;align-items:center;gap:6px}
.lg-booth{width:12px;height:12px;border-radius:50%;background:var(--gold-grad);display:inline-block}
.lg-area{width:14px;height:14px;border-radius:50%;background:rgba(168,131,77,.16);border:2px solid rgba(168,131,77,.75);display:inline-block}
.lg-ok,.lg-bad{width:10px;height:10px;border-radius:50%;background:#2f7d4f;display:inline-block}.lg-bad{background:var(--err)}
.osm-empty{height:260px;border-radius:14px;border:2px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);font-size:1.6rem;align-content:center;gap:4px}
.osm-empty b{font-size:1rem;color:var(--ink)}.osm-empty small{font-size:.82rem}
.booth-form h2{margin-top:0}
.booth-more{margin:12px 0 4px}.booth-more summary{cursor:pointer;font-weight:700;font-size:.88rem;color:#7a5c30}
.booth-more .inline{margin-top:8px}
@media (max-width:1100px){.booth-card{grid-template-columns:1fr}}

/* ---------- cuti & sakit ---------- */
.flash.info{background:#e8f0fb;color:#1d4f91}
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#e34948;color:#fff;font:700 .72rem/20px inherit;font-style:normal;text-align:center;animation:popIn .4s var(--ease)}
.nav-badge.static{display:inline-block;margin-left:6px;vertical-align:middle}
.lv-alert{display:block;text-decoration:none;font-weight:600;margin:10px 0}
.lv-cols{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:18px;align-items:start;margin-top:8px}
@media (max-width:900px){.lv-cols{grid-template-columns:1fr}}
.lv-form{display:flex;flex-direction:column;gap:10px}
.lv-form h2{margin:0 0 2px}
.lv-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lv-opt{position:relative;cursor:pointer;margin:0}
.lv-opt input{position:absolute;opacity:0;pointer-events:none}
.lv-opt span{display:block;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.lv-opt b{display:block}.lv-opt small{color:var(--muted);font-size:.78rem}
.lv-opt input:checked+span{border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,131,77,.18);transform:translateY(-1px)}
.lv-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.lv-calc{margin:-2px 0 0;font-weight:700;color:var(--ok)}.lv-calc.bad{color:var(--err)}
.lv-file{position:relative;display:block;margin:0;cursor:pointer}
.lv-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.lv-file span{display:block;padding:14px;border:1.5px dashed var(--accent);border-radius:14px;background:#fbf8f2;text-align:center}
.lv-file small{display:block;color:var(--muted);margin-top:2px;word-break:break-all}
.lv-prev{max-width:100%;max-height:220px;border-radius:12px;margin-top:8px;object-fit:contain;background:#f4f1ea}
.lv-type{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.75rem;font-weight:700;margin-left:6px}
.lv-type.lv-cuti{background:#e3edfb;color:#1d5bb0}.lv-type.lv-sakit{background:#fde9e2;color:#b5461a}
td>.lv-type:first-child{margin-left:0}
.lv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:18px}
.lv-req{display:flex;flex-direction:column;gap:6px;animation:rise .4s var(--ease) both}
.lv-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.lv-when{font-weight:700;font-size:1.05rem}
.lv-reason{margin:2px 0;font-style:italic;color:#4b463f}
.lv-docimg img{width:100%;max-height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.lv-doc{font-size:.85rem;font-weight:600}
.lv-decide{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lv-decide input.need{border-color:var(--err)}
.lv-month{display:flex;align-items:center;gap:10px;margin-bottom:10px}.lv-month h2{margin:0;flex:1;text-align:center}
.lv-recap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.lv-recap span{background:var(--card);border-radius:99px;padding:5px 12px;font-size:.82rem;box-shadow:var(--shadow)}
.lv-sent{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-left:4px solid var(--ok)}

/* ---------- komisi ---------- */
.title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.title-row h1{margin-right:2px}
.comm-card .comm-act{margin-top:8px}
.comm-dash{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:center;text-decoration:none;color:inherit;background:linear-gradient(135deg,#fff 0%,#fbf6ec 100%);transition:transform .25s var(--ease),box-shadow .25s}
.comm-dash:hover{transform:translateY(-2px)}
.comm-dash small{display:block;font-weight:600;color:var(--muted)}.comm-dash b{display:block;font-size:1.45rem;margin:2px 0}.comm-dash span{font-size:.8rem;color:var(--muted)}
.comm-dash i{font-style:normal;font-weight:700;color:var(--accent)}
@media (max-width:560px){.comm-dash{grid-template-columns:1fr 1fr}.comm-dash i{grid-column:1/-1}}
.print-only{display:none}
@media print{.print-only{display:block}.print-head{margin-bottom:12px}.stat.hero{background:none!important;color:#000}.stat.hero b{color:#000!important;-webkit-text-fill-color:#000}}