/* Golden Bee ERP — Glass design system */
:root{
  --bg:#07080C;--bg2:#0D0F15;--text:#F3EFE6;--muted:#A9AFBA;--dim:#8E95A2;
  --glass:rgba(255,255,255,.045);--glass-bg:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025)),rgba(13,15,21,.58);--glass2:rgba(255,255,255,.075);--glass3:rgba(255,255,255,.11);--stroke:rgba(255,255,255,.085);--stroke2:rgba(255,255,255,.15);
  --honey:#F5B544;--honey-t:#FFD27A;--honey-ink:#1A1206;--amber:#E07A1F;--sky:#5AB4F5;--sky-t:#8CCBFA;--leaf:#3DD6A8;--leaf-t:#5EE6BC;--coral:#FF7B6B;--coral-t:#FF9C8F;
  --shadow:0 24px 60px rgba(0,0,0,.38);--hi:inset 0 1px 0 rgba(255,255,255,.07);
  --panel-solid:rgba(18,20,28,.86);--input:rgba(255,255,255,.05);--row-hover:rgba(255,255,255,.045);
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --r-lg:26px;--r-md:18px;--r-sm:12px;
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;--display:'Readex Pro','IBM Plex Sans Arabic',sans-serif;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#EDEFF4;--bg2:#E4E7EE;--text:#151821;--muted:#535B6B;--dim:#5F6676;
  --glass:rgba(255,255,255,.55);--glass-bg:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.55));--glass2:rgba(255,255,255,.72);--glass3:rgba(255,255,255,.9);--stroke:rgba(20,24,33,.08);--stroke2:rgba(20,24,33,.16);
  --honey:#F2A81E;--honey-t:#9A6200;--sky-t:#1F6FB8;--leaf-t:#0E8A66;--coral-t:#C2412F;
  --shadow:0 20px 50px rgba(30,40,70,.12);--hi:inset 0 1px 0 rgba(255,255,255,.9);
  --panel-solid:rgba(250,251,253,.92);--input:rgba(255,255,255,.7);--row-hover:rgba(20,24,33,.035);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.theming,.theming *{transition:background-color .6s ease,color .5s ease,border-color .6s ease,box-shadow .6s ease!important}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:var(--honey-t);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(245,181,68,.35)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--glass3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.num,.n{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0}

/* ---------- Background orbs ---------- */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb.honey{width:400px;height:400px;top:-130px;left:5%;background:radial-gradient(circle at 32% 28%,#FFE3A3 0%,#F5B544 28%,#D9761C 62%,#6B3006 100%);box-shadow:0 40px 140px rgba(224,122,31,.5);animation:orbA 19s ease-in-out infinite}
.orb.sky{width:600px;height:600px;top:38%;left:30%;background:radial-gradient(circle at 35% 30%,#9FD8FF 0%,#3C8FE6 35%,#12408F 70%,#071A3D 100%);opacity:.5;animation:orbB 26s ease-in-out infinite}
.orb.leaf{width:190px;height:190px;bottom:6%;left:2%;background:radial-gradient(circle at 35% 30%,#B8FFE6 0%,#3DD6A8 40%,#0F7A5E 100%);animation:orbA 15s ease-in-out infinite reverse}
.orb.pearl{width:90px;height:90px;top:24%;right:30%;background:radial-gradient(circle at 35% 30%,#fff 0%,#C9CDD5 45%,#5B606B 100%);opacity:.7;animation:orbB 17s ease-in-out infinite}
:root[data-theme=light] .orb.sky{opacity:.28}:root[data-theme=light] .orb.honey{opacity:.85}
@keyframes orbA{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-48px,32px,0) scale(1.06)}66%{transform:translate3d(30px,-22px,0) scale(.96)}}
@keyframes orbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(46px,-38px,0) scale(1.07)}}

/* ---------- Glass ---------- */
.glass{background:var(--glass-bg);border:1px solid var(--stroke);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:var(--hi),var(--shadow)}
.card{border-radius:var(--r-lg);padding:22px;position:relative}
.card.hov{overflow:hidden;transition:transform .6s var(--ease),border-color .5s,box-shadow .6s}
.card.hov::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);transform:translateX(130%);transition:transform 1.1s var(--ease);pointer-events:none}
.card.hov:hover{transform:translateY(-5px) scale(1.01);border-color:rgba(245,181,68,.4);box-shadow:var(--hi),0 30px 70px rgba(0,0,0,.42),0 18px 50px rgba(245,181,68,.1)}
.card.hov:hover::after{transform:translateX(-130%)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{font-size:18px}.card-h .sub{font-size:13px;color:var(--muted)}

/* ---------- Layout ---------- */
.shell{position:relative;z-index:1;display:flex;gap:22px;padding:20px;min-height:100vh;align-items:flex-start}
.side{position:sticky;top:20px;width:268px;flex:none;height:calc(100vh - 40px);border-radius:28px;padding:18px 14px;display:flex;flex-direction:column;gap:6px;transition:width .5s var(--ease)}
.side .brand{display:flex;align-items:center;gap:12px;padding:4px 6px 12px}
.side .brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(245,181,68,.55),0 10px 26px rgba(245,181,68,.25)}
.side .brand b{font-family:var(--display);font-size:17px;display:block}.side .brand span{font-size:12px;color:var(--muted)}
.navscroll{flex:1;overflow-y:auto;overflow-x:hidden;margin:0 -6px;padding:0 6px;position:relative}
.navgroup{font-size:11.5px;color:var(--dim);padding:12px 12px 4px;letter-spacing:.3px}
.nav{position:relative}
.nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:46px;padding:0 8px;border-radius:15px;color:var(--text);text-decoration:none;font-size:14.5px;transition:color .35s,transform .35s var(--ease)}
.nav a:hover{transform:translateX(-3px)}
.nav a .gi{width:32px;height:32px}
.nav a.on{color:var(--honey-ink);font-weight:600}
.nav a .kbd{margin-inline-start:auto;font-size:10.5px;color:var(--dim);opacity:0;transition:opacity .3s}
.side:hover .nav a .kbd{opacity:1}.nav a.on .kbd{color:rgba(26,18,6,.6)}
.nav a .badge{margin-inline-start:auto;min-width:22px;height:22px;border-radius:99px;padding:0 6px;background:var(--coral);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.navpill{position:absolute;right:0;left:0;height:46px;border-radius:15px;background:linear-gradient(180deg,#FFC965,#F5B544);box-shadow:0 12px 30px rgba(245,181,68,.35),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .55s var(--spring),height .4s var(--ease),opacity .3s;z-index:0;opacity:0}
.side .me{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:var(--glass)}
.side .me .av{width:38px;height:38px;border-radius:50%;background:var(--honey);color:var(--honey-ink);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.side .me div{flex:1;min-width:0}.side .me b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side .me span{font-size:12px;color:var(--muted)}
body.mini .side{width:84px}body.mini .side .brand div,body.mini .nav a span,body.mini .navgroup,body.mini .side .me div,body.mini .nav a .kbd{display:none}
body.mini .nav a{justify-content:center}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px;padding-bottom:60px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.top h1{font-size:30px}.top .crumb{font-size:13px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row{display:flex;gap:20px;flex-wrap:wrap;align-items:stretch}.row>*{min-width:0}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.f1{flex:1 1 300px}.f2{flex:2 1 560px}.f3{flex:3 1 640px}
.stack{display:flex;flex-direction:column;gap:12px}.hstack{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.muted{color:var(--muted)}.dim{color:var(--dim)}.sm{font-size:13px}.xs{font-size:12px}.b{font-weight:600}.big{font-family:var(--display);font-size:30px;font-weight:600}
.mobile-bar{display:none}

/* ---------- Glass icons ---------- */
.gi{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:30%;flex:none;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 55%,transparent),color-mix(in srgb,var(--c) 18%,transparent));
  border:1px solid color-mix(in srgb,var(--c) 45%,rgba(255,255,255,.2));box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -6px 12px color-mix(in srgb,var(--c) 25%,transparent),0 8px 20px color-mix(in srgb,var(--c) 28%,transparent);
  transition:transform .5s var(--spring),box-shadow .5s;overflow:hidden}
.gi::before{content:"";position:absolute;inset:1px 1px 52% 1px;border-radius:30% 30% 45% 45%/30% 30% 20% 20%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));opacity:.7;pointer-events:none}
.gi svg{position:relative;width:52%;height:52%;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
a:hover>.gi,button:hover>.gi,.gi.hot{transform:translateY(-2px) rotate(-6deg) scale(1.08)}
.nav a.on .gi{background:rgba(26,18,6,.14);border-color:rgba(26,18,6,.15);box-shadow:inset 0 1px 1px rgba(255,255,255,.5)}
.nav a.on .gi svg{stroke:var(--honey-ink);filter:none}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Buttons ---------- */
.btn{height:46px;padding:0 18px;border-radius:14px;border:1px solid var(--stroke2);background:var(--glass2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;white-space:nowrap;
  transition:transform .35s var(--ease),filter .3s,box-shadow .35s,background-color .3s,border-color .3s;text-decoration:none;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.12);text-decoration:none}.btn:active{transform:scale(.95);transition-duration:.12s}
.btn.pri{background:linear-gradient(180deg,#FFC965,#F5B544);color:var(--honey-ink);border-color:transparent;font-weight:600;box-shadow:0 12px 30px rgba(245,181,68,.32),inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ok{background:rgba(61,214,168,.15);border-color:rgba(61,214,168,.4);color:var(--leaf-t)}
.btn.bad{background:rgba(255,123,107,.1);border-color:rgba(255,123,107,.35);color:var(--coral-t)}
.btn.wa{background:#25D366;color:#fff;border-color:transparent;font-weight:600}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{height:38px;padding:0 13px;font-size:13.5px;border-radius:12px}.btn.lg{height:56px;font-size:16px;padding:0 26px;border-radius:17px}
.btn.icon{width:46px;padding:0}.btn.sm.icon{width:38px}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .k{font-size:11px;opacity:.6;border:1px solid currentColor;border-radius:6px;padding:0 5px;line-height:16px}

/* ---------- Inputs ---------- */
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);min-width:0}
.inp,select.inp,textarea.inp{height:46px;padding:0 14px;border-radius:14px;border:1px solid var(--stroke2);background:var(--input);color:var(--text);font-size:15px;outline:none;width:100%;transition:border-color .3s,box-shadow .3s,background-color .3s}
textarea.inp{height:auto;min-height:80px;padding:12px 14px;resize:vertical}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:18px 20px,13px 20px;background-size:5px 5px;background-repeat:no-repeat;padding-left:30px}
select.inp option{background:var(--bg2);color:var(--text)}
.inp:focus{border-color:var(--honey);box-shadow:0 0 0 4px rgba(245,181,68,.14)}
.inp.num{font-family:var(--display);text-align:left;direction:ltr}
.searchbox{position:relative;display:flex;align-items:center}.searchbox .ico{position:absolute;right:14px;color:var(--muted)}.searchbox .inp{padding-right:42px}
.chk{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text)}.chk input{width:20px;height:20px;accent-color:var(--honey)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke)}
.seg button{height:36px;padding:0 14px;border-radius:10px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;transition:background-color .35s var(--ease),color .3s,box-shadow .35s}
.seg button.on{background:var(--honey);color:var(--honey-ink);font-weight:600;box-shadow:0 8px 20px rgba(245,181,68,.3)}
.choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.choice button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:16px;border:1px solid var(--stroke2);background:var(--glass);color:var(--text);cursor:pointer;text-align:right;transition:all .4s var(--ease)}
.choice button small{color:var(--muted);font-size:12px}.choice button.on{border-color:var(--honey);background:rgba(245,181,68,.12);box-shadow:0 10px 30px rgba(245,181,68,.12)}

/* ---------- Pills / chips ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:12.5px;white-space:nowrap;background:var(--glass2);color:var(--muted)}
.pill.ok{background:rgba(61,214,168,.14);color:var(--leaf-t)}.pill.warn{background:rgba(245,181,68,.15);color:var(--honey-t)}.pill.bad{background:rgba(255,123,107,.14);color:var(--coral-t)}.pill.info{background:rgba(90,180,245,.14);color:var(--sky-t)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.live{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ping{animation:ping 1.6s ease-out infinite}@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,214,168,.55)}100%{box-shadow:0 0 0 10px rgba(61,214,168,0)}}

/* ---------- KPI ---------- */
.kpi{display:flex;flex-direction:column;gap:6px}.kpi .l{font-size:13px;color:var(--muted)}.kpi .v{font-family:var(--display);font-size:28px;font-weight:600;direction:ltr;text-align:right}
.kpi .v small{font-size:13px;color:var(--muted);font-weight:400}.kpi .d{font-size:12px;color:var(--dim);display:flex;gap:6px;align-items:center}
.bar{height:7px;border-radius:7px;background:var(--glass2);overflow:hidden}.bar>i{display:block;height:100%;border-radius:7px;background:var(--honey);transform-origin:right;animation:grow 1.2s var(--ease) backwards}
@keyframes grow{from{transform:scaleX(0)}}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:right;font-weight:500;font-size:12.5px;color:var(--dim);padding:10px 10px;white-space:nowrap;position:sticky;top:0}
.tbl td{padding:12px 10px;border-top:1px solid var(--stroke);vertical-align:middle}
.tbl tbody tr{transition:background-color .3s;animation:rowIn .7s var(--ease) backwards}
.tbl tbody tr:hover{background:var(--row-hover)}.tbl tbody tr.click{cursor:pointer}
.tbl td.n,.tbl th.n{text-align:left;direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tfoot td{font-weight:700;border-top:2px solid var(--stroke2);padding:12px 10px}
@keyframes rowIn{from{opacity:0;transform:translateX(-20px)}}
.tbl tbody tr:nth-child(1){animation-delay:.12s}.tbl tbody tr:nth-child(2){animation-delay:.16s}.tbl tbody tr:nth-child(3){animation-delay:.2s}.tbl tbody tr:nth-child(4){animation-delay:.24s}.tbl tbody tr:nth-child(5){animation-delay:.28s}.tbl tbody tr:nth-child(6){animation-delay:.32s}.tbl tbody tr:nth-child(7){animation-delay:.36s}.tbl tbody tr:nth-child(8){animation-delay:.4s}.tbl tbody tr:nth-child(n+9){animation-delay:.44s}
.empty{padding:46px 20px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.empty .gi{width:64px;height:64px}

/* ---------- Entrance & module transitions ---------- */
.in{animation:rise 1.1s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms + 40ms)}
@keyframes rise{0%{opacity:0;transform:translateY(34px) scale(.965);filter:blur(14px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
#view{transition:opacity .35s ease,filter .35s ease}
#view.busy{opacity:.55;filter:saturate(.7) blur(1px)}
#view.leaving{animation:leave .2s var(--ease) forwards}
@keyframes leave{to{opacity:0;transform:translateY(-10px) scale(.985);filter:blur(10px)}}
/* Module morph (View Transitions): cards of the old screen morph into the cards of the new one */
.morphing .vt.in,.morphing .vt .in{animation:none!important}
::view-transition-group(*){animation-duration:.62s;animation-timing-function:cubic-bezier(.22,.9,.18,1)}
::view-transition-old(root){animation:vtRootOut .32s ease both}::view-transition-new(root){animation:vtRootIn .5s ease both}
::view-transition-old(*.morph){animation:vtOut .3s ease both}::view-transition-new(*.morph){animation:vtIn .5s cubic-bezier(.22,.9,.18,1) .06s both}
::view-transition-new(*.morph):only-child{animation:vtEnter .6s cubic-bezier(.22,.9,.18,1) both}
::view-transition-old(*.morph):only-child{animation:vtExit .35s ease both}
::view-transition-image-pair(*.morph){isolation:auto}
::view-transition-group(navpill){animation-duration:.55s;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}
@keyframes vtRootOut{to{opacity:0}}@keyframes vtRootIn{from{opacity:0}}
@keyframes vtOut{to{opacity:0;filter:blur(6px)}}@keyframes vtIn{from{opacity:0;filter:blur(6px)}}
@keyframes vtEnter{from{opacity:0;transform:translateY(28px) scale(.96);filter:blur(10px)}}@keyframes vtExit{to{opacity:0;transform:translateY(-14px) scale(.97);filter:blur(10px)}}
.navpill{view-transition-name:navpill}
#gbProgress{position:fixed;top:0;right:0;left:0;height:3px;z-index:90;pointer-events:none;transform-origin:right;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,#3DD6A8,#F5B544,#E07A1F);box-shadow:0 0 12px rgba(245,181,68,.6)}
#gbProgress.run{opacity:1;animation:prog 2.5s cubic-bezier(.1,.7,.2,1) forwards}#gbProgress.done{opacity:0;transform:scaleX(1);transition:opacity .35s ease .1s}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(.88)}}
.skel{border-radius:14px;background:linear-gradient(90deg,var(--glass) 0%,var(--glass3) 50%,var(--glass) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Overlays: modal, drawer, palette, toast ---------- */
.veil{position:fixed;inset:0;z-index:50;background:rgba(5,6,10,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .35s ease}
:root[data-theme=light] .veil{background:rgba(220,225,235,.55)}
@keyframes fade{from{opacity:0}}
.modal{width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow:auto;border-radius:28px;padding:26px;background:var(--panel-solid);animation:pop .55s var(--ease)}
.modal.wide{max-width:900px}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(24px);filter:blur(12px)}}
.modal .mh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.modal .mh h2{font-size:21px}
.modal .mf{display:flex;gap:10px;margin-top:20px;justify-content:flex-start;flex-wrap:wrap}
.drawer-veil{justify-content:flex-start;padding:0}
.drawer{height:100vh;width:min(620px,100vw);overflow:auto;padding:26px;border-radius:28px 0 0 28px;background:var(--panel-solid);animation:slide .62s cubic-bezier(.22,.9,.18,1)}
@keyframes slide{from{transform:translateX(90px);opacity:0;filter:blur(10px)}}
.leave-out{animation:fadeOut .34s ease forwards}.leave-out>.modal,.leave-out>.palette{animation:popOut .32s cubic-bezier(.4,0,.2,1) forwards}.leave-out>.drawer{animation:slideOut .36s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fadeOut{to{opacity:0}}@keyframes popOut{to{transform:scale(.94) translateY(14px);opacity:0;filter:blur(8px)}}@keyframes slideOut{to{transform:translateX(70px);opacity:0;filter:blur(8px)}}
.palette{width:100%;max-width:640px;align-self:flex-start;margin-top:12vh;border-radius:24px;overflow:hidden;background:var(--panel-solid);animation:pop .45s var(--ease)}
.palette .inp{height:62px;border:0;border-radius:0;background:transparent;font-size:18px;padding-right:56px;box-shadow:none}
.palette .pres{max-height:52vh;overflow:auto;border-top:1px solid var(--stroke);padding:8px}
.palette .pi{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background-color .2s}
.palette .pi.on,.palette .pi:hover{background:var(--glass2)}.palette .pi .gi{width:34px;height:34px}
.palette .pi b{font-weight:500;font-size:15px}.palette .pi small{display:block;color:var(--muted);font-size:12px}.palette .pi kbd{margin-inline-start:auto}
kbd{font-family:var(--display);font-size:11.5px;padding:2px 7px;border-radius:7px;border:1px solid var(--stroke2);background:var(--glass);color:var(--muted)}
.toasts{position:fixed;bottom:22px;left:22px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.toast{max-width:420px;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;background:var(--panel-solid);border:1px solid var(--stroke2);box-shadow:var(--shadow);animation:toastIn .6s var(--spring);font-size:14px}
.toast.ok{border-color:rgba(61,214,168,.45)}.toast.bad{border-color:rgba(255,123,107,.5)}.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}}@keyframes toastOut{to{opacity:0;transform:translateX(-30px)}}

/* ---------- Kanban ---------- */
.kan{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.kcol{border-radius:22px;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:380px}
.kcol .kh{display:flex;justify-content:space-between;align-items:center;font-weight:600}
.kcard{text-align:right;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--stroke);cursor:pointer;color:var(--text);transition:transform .55s var(--ease),border-color .4s,box-shadow .55s,background-color .4s;width:100%}
.kcard:hover{transform:translateY(-5px) scale(1.02);border-color:rgba(245,181,68,.45);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--honey-ink);flex:none}

/* ---------- POS / items editor ---------- */
.pos-lines .tbl td{padding:8px 8px}.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:36px;height:36px;border-radius:11px;border:1px solid var(--stroke2);background:var(--glass);cursor:pointer;font-size:18px;color:var(--text);transition:transform .2s}
.qty button:active{transform:scale(.9)}.qty input{width:70px;height:38px;text-align:center;padding:0 6px}
.pos-lines tr.active td{background:rgba(245,181,68,.08)}.pos-lines tr.active td:first-child{box-shadow:inset -3px 0 0 var(--honey)}
.kbdhint{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}.kbdhint kbd{padding:0 5px;font-size:11px}
.line-new{animation:lineIn .7s var(--spring)}@keyframes lineIn{from{opacity:0;transform:translateY(-10px) scale(.97);background:rgba(245,181,68,.25)}}
.flash{animation:flash .9s var(--ease)}@keyframes flash{0%{background:rgba(245,181,68,.35)}100%{background:transparent}}
.sugg{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:20;border-radius:18px;padding:6px;max-height:340px;overflow:auto;background:var(--panel-solid);animation:pop .35s var(--ease)}
.sugg button{display:flex;width:100%;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--text);cursor:pointer;text-align:right}
.sugg button:hover,.sugg button.on{background:var(--glass2)}
.totals{display:flex;flex-direction:column;gap:10px}.totals>div{display:flex;justify-content:space-between;align-items:center;font-size:14px}.totals .grand{font-family:var(--display);font-size:30px;font-weight:600}

/* ---------- Scanner ---------- */
.scan-zone{position:relative;border-radius:26px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;overflow:hidden}
.scan-zone .beam{position:absolute;left:8%;right:8%;height:2px;top:50%;background:linear-gradient(90deg,transparent,var(--honey),transparent);box-shadow:0 0 18px var(--honey);animation:beam 2.4s ease-in-out infinite}
@keyframes beam{0%,100%{transform:translateY(-60px);opacity:.3}50%{transform:translateY(60px);opacity:1}}
.scan-zone.hit{animation:hit .6s var(--ease)}@keyframes hit{0%{box-shadow:0 0 0 0 rgba(61,214,168,.6)}100%{box-shadow:0 0 0 30px rgba(61,214,168,0)}}
.scan-zone.miss{animation:miss .5s}@keyframes miss{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.scan-feed .it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--glass);animation:lineIn .6s var(--spring)}
.cam{position:fixed;inset:0;z-index:70;background:#000;display:flex;flex-direction:column}
.cam video{flex:1;width:100%;object-fit:cover}.cam .frame{position:absolute;inset:30% 12%;border:3px solid var(--honey);border-radius:22px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.cam .cb{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:12px}
.scan-ind{position:fixed;bottom:22px;right:50%;transform:translateX(50%);z-index:60;padding:10px 18px;border-radius:99px;font-size:14px;display:flex;gap:10px;align-items:center;animation:toastIn .5s var(--spring)}

/* ---------- Charts ---------- */
.chart{position:relative}.chart svg{display:block;overflow:visible}
.ch-line{transition:d 1.1s var(--ease),opacity .5s}
.ch-draw{stroke-dasharray:3000;animation:draw 2.2s var(--ease) .2s backwards}@keyframes draw{from{stroke-dashoffset:3000}}
.ch-area{animation:fade 1.6s .6s ease backwards}
.ch-cross{position:absolute;top:0;bottom:24px;width:1px;pointer-events:none;background:linear-gradient(transparent,rgba(124,196,255,.8),transparent);transition:left .4s var(--ease),opacity .3s}
.ch-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--bg);border:3px solid #7CC4FF;box-shadow:0 0 0 6px rgba(124,196,255,.18),0 0 24px rgba(124,196,255,.8);pointer-events:none;transition:left .4s var(--ease),top .4s var(--ease),opacity .3s}
.ch-tip{position:absolute;top:6px;min-width:170px;padding:12px 14px;border-radius:16px;pointer-events:none;background:var(--panel-solid);border:1px solid var(--stroke2);box-shadow:var(--shadow);transition:left .4s var(--ease),transform .4s var(--ease),opacity .3s;display:flex;flex-direction:column;gap:3px;font-size:13px;z-index:3}
.ch-tip b{font-family:var(--display);font-size:18px}
.ch-x{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);padding-top:8px;direction:ltr}
.eq{display:flex;align-items:flex-end;gap:4px;height:64px}.eq i{flex:1;border-radius:4px;background:linear-gradient(#7CC4FF,#3C8FE6);transform-origin:bottom;animation:eq 1.4s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ring-c{transition:stroke-dashoffset 1.4s var(--ease)}
.bars{display:flex;align-items:flex-end;gap:8px;height:220px;direction:ltr}.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;min-width:0}
.bars .b i{width:100%;max-width:46px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#FFC965,#E07A1F);transform-origin:bottom;animation:barUp 1.2s var(--ease) backwards;position:relative;transition:filter .3s}
.bars .b i:hover{filter:brightness(1.2)}.bars .b span{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes barUp{from{transform:scaleY(0)}}

/* ---------- Map ---------- */
.map{height:520px;border-radius:22px;overflow:hidden;border:1px solid var(--stroke)}
.leaflet-container{background:#0d1117!important;font-family:var(--font)!important}
.rep-marker{width:40px;height:40px;border-radius:50%;background:var(--honey);color:var(--honey-ink);display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 0 0 6px rgba(245,181,68,.3),0 10px 25px rgba(0,0,0,.4)}

/* ---------- Login ---------- */
.login{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:100%;max-width:430px;padding:36px;border-radius:32px;display:flex;flex-direction:column;gap:16px}
.login img{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px rgba(245,181,68,.4),0 20px 50px rgba(245,181,68,.3);align-self:center;animation:floatY 5s ease-in-out infinite}
@keyframes floatY{50%{transform:translateY(-8px)}}
.shake{animation:miss .5s}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .shell{padding:12px;gap:12px}
  .side{position:fixed;inset:12px auto 12px 12px;right:12px;height:auto;width:auto;max-width:320px;margin-inline-start:auto;z-index:40;transform:translateX(120%);transition:transform .55s var(--ease)}
  body.navopen .side{transform:none}
  .mobile-bar{display:flex;position:sticky;top:0;z-index:30;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin:-12px -12px 0;border-radius:0 0 20px 20px}
  .top h1{font-size:24px}.card{padding:16px}.big{font-size:24px}
  .modal{padding:20px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.orbs,.side,.mobile-bar,.tools,.toasts{display:none!important}.glass{background:#fff!important;box-shadow:none!important;border-color:#ddd!important;backdrop-filter:none!important}body{background:#fff;color:#000}}