:root{
  --bg:#f3f6fb;--card:#ffffffcc;--card-solid:#fff;--ink:#14213d;--mut:#6b7a90;--line:#e3e9f2;
  --pri:#0ea5a4;--pri2:#2563eb;--pri-d:#0b7f7e;--ok:#16a34a;--warn:#f59e0b;--bad:#ef4444;--info:#3b82f6;
  --side1:#0b1b3a;--side2:#0f3d4a;--shadow:0 10px 30px -12px #1e3a8a33;--r:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}
[data-theme=dark]{
  --bg:#0a1020;--card:#111a2fcc;--card-solid:#111a2f;--ink:#e6edf7;--mut:#8da0bd;--line:#1e2b45;--shadow:0 10px 30px -12px #000a;
  --side1:#070d1c;--side2:#0a2630;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;transition:background .4s,color .4s}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
  radial-gradient(600px 400px at 90% -10%,#2563eb22,transparent),radial-gradient(500px 400px at -10% 110%,#0ea5a422,transparent)}
.app{display:flex;min-height:100vh}

/* sidebar */
.sidebar{width:236px;background:linear-gradient(170deg,var(--side1),var(--side2));color:#c9d8ee;padding:16px 12px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#fff;padding:6px 8px 18px}
.logo i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--pri),var(--pri2));font-style:normal;box-shadow:0 6px 18px #0ea5a466;animation:float 4s ease-in-out infinite}
.sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:#c9d8ee;cursor:pointer;margin-bottom:3px;position:relative;transition:transform .25s var(--ease),background .25s,color .25s;opacity:0;animation:slideIn .5s var(--ease) forwards}
.sidebar a:nth-child(2){animation-delay:.04s}.sidebar a:nth-child(3){animation-delay:.08s}.sidebar a:nth-child(4){animation-delay:.12s}.sidebar a:nth-child(5){animation-delay:.16s}
.sidebar a:nth-child(6){animation-delay:.2s}.sidebar a:nth-child(7){animation-delay:.24s}.sidebar a:nth-child(8){animation-delay:.28s}.sidebar a:nth-child(9){animation-delay:.32s}.sidebar a:nth-child(10){animation-delay:.36s}.sidebar a:nth-child(11){animation-delay:.4s}
.sidebar a:hover{background:#ffffff14;transform:translateX(calc(var(--dir,1)*-4px))}
.sidebar a.on{background:linear-gradient(90deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 8px 20px -8px #0ea5a4aa}
.sidebar a .ic{font-size:18px;width:22px;text-align:center}
html[dir=ltr]{--dir:-1}

/* shell */
.main{flex:1;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 26px;background:var(--card);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar h1{margin:0;font-size:21px;animation:fadeUp .5s var(--ease)}
.topbar .tools{display:flex;gap:8px}
#view{padding:22px 26px 60px}
#view>*{animation:fadeUp .55s var(--ease) both}
#view>*:nth-child(2){animation-delay:.06s}#view>*:nth-child(3){animation-delay:.12s}#view>*:nth-child(4){animation-delay:.18s}#view>*:nth-child(5){animation-delay:.24s}

/* cards */
.card{background:var(--card);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:18px;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.card:hover{transform:translateY(-2px)}
.card h3{margin:0 0 14px;font-size:16px;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpi{position:relative;overflow:hidden;margin:0}
.kpi::after{content:"";position:absolute;inset-inline-end:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--c,var(--pri));opacity:.12;transition:transform .6s var(--ease)}
.kpi:hover::after{transform:scale(1.5)}
.kpi .l{color:var(--mut);font-size:13px}
.kpi .v{font-size:30px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.kpi .s{font-size:12px;color:var(--mut)}
.kpis .kpi{animation:pop .6s var(--ease) both}
.kpis .kpi:nth-child(2){animation-delay:.07s}.kpis .kpi:nth-child(3){animation-delay:.14s}.kpis .kpi:nth-child(4){animation-delay:.21s}.kpis .kpi:nth-child(5){animation-delay:.28s}
.two{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}

/* tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
tbody tr{transition:background .2s;animation:fadeUp .5s var(--ease) both}
tbody tr:hover{background:#2563eb0d}
tbody tr:nth-child(1){animation-delay:.02s}tbody tr:nth-child(2){animation-delay:.06s}tbody tr:nth-child(3){animation-delay:.1s}tbody tr:nth-child(4){animation-delay:.14s}tbody tr:nth-child(5){animation-delay:.18s}tbody tr:nth-child(n+6){animation-delay:.22s}
.tw{overflow-x:auto}

/* controls */
input,select,textarea{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card-solid);color:var(--ink);max-width:100%;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 4px #0ea5a42e}
input[type=number]{width:110px}
.btn{font:inherit;border:0;border-radius:12px;padding:9px 16px;cursor:pointer;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 18px -8px #2563eb88;transition:transform .2s var(--ease),box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .rip{position:absolute;border-radius:50%;background:#fff6;transform:scale(0);animation:rip .6s linear;pointer-events:none}
.btn.sec{background:var(--card-solid);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.bad{background:linear-gradient(135deg,#f97316,var(--bad))}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.row .grow{flex:1;min-width:180px}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:#64748b22;color:var(--mut)}
.tag.ok{background:#16a34a22;color:var(--ok)}.tag.warn{background:#f59e0b26;color:#b97500}.tag.bad{background:#ef444426;color:var(--bad)}.tag.info{background:#3b82f622;color:var(--info)}
[data-theme=dark] .tag.warn{color:#fbbf24}
.tag.pulse{animation:pulse 1.8s infinite}
.mut{color:var(--mut)}

/* modal / toast */
.modal-bg{position:fixed;inset:0;background:#050b1a99;backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:40px 12px;overflow:auto;z-index:50;animation:fade .25s}
.modal-bg[hidden],.toast[hidden]{display:none}
.modal{background:var(--card-solid);border-radius:20px;padding:24px;width:min(680px,100%);box-shadow:0 30px 80px -20px #000a;animation:pop .4s var(--ease)}
.modal h2{margin-top:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mut)}
.form input,.form select{width:100%}
.toast{position:fixed;bottom:24px;inset-inline-start:24px;background:var(--card-solid);color:var(--ink);border:1px solid var(--line);border-inline-start:5px solid var(--pri);padding:12px 18px;border-radius:14px;z-index:60;box-shadow:var(--shadow);animation:slideUp .45s var(--ease)}

/* charts & skeleton */
.bars{display:flex;align-items:flex-end;gap:6px;height:150px}
.bars div{position:relative;flex:1;background:linear-gradient(180deg,var(--pri),var(--pri2));border-radius:6px 6px 0 0;min-height:3px;transform-origin:bottom;animation:grow .8s var(--ease) both}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden;min-width:90px}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ok),var(--pri));transform-origin:left;animation:meter 1s var(--ease) both}
.sk{background:linear-gradient(90deg,var(--line) 25%,#ffffff40 37%,var(--line) 63%);background-size:400% 100%;animation:shimmer 1.3s infinite;border-radius:12px;height:18px;margin:10px 0}
.spark{vertical-align:middle}
.spark path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s var(--ease) forwards}

/* AI */
.ai-hero{background:linear-gradient(120deg,#0b1b3a,#0f3d4a 60%,#0ea5a4);color:#fff;border:0;position:relative;overflow:hidden}
.ai-hero::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#ffffff22,transparent 30%);animation:spin 9s linear infinite}
.ai-hero>*{position:relative}
.ai-hero .mut{color:#c9d8ee}
.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.insight{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card-solid);border-inline-start:5px solid var(--c,var(--info));animation:fadeUp .6s var(--ease) both}
.insight b{display:block;margin-bottom:4px}
.chat{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;margin-bottom:10px}
.msg{padding:10px 14px;border-radius:14px;max-width:88%;animation:pop .35s var(--ease)}
.msg.u{align-self:flex-end;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.msg.a{align-self:flex-start;background:var(--card-solid);border:1px solid var(--line)}
.dots span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--mut);animation:bounce 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}

/* map */
.maplay{display:grid;grid-template-columns:300px 1fr;gap:16px}
#map{height:560px;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow);z-index:1}
[data-theme=dark] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9)}
.blist .it{padding:12px;border-radius:14px;border:1px solid var(--line);margin-bottom:10px;cursor:pointer;background:var(--card-solid);transition:transform .25s var(--ease),border-color .25s;animation:fadeUp .5s var(--ease) both}
.blist .it:hover,.blist .it.on{transform:translateX(calc(var(--dir,1)*-4px));border-color:var(--pri)}
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;background:linear-gradient(135deg,var(--pri),var(--pri2));transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 6px 14px #0006;position:relative}
.pin::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.pulse-ring{position:absolute;inset:-14px;border-radius:50%;border:3px solid var(--pri);animation:ring 2s infinite;transform:rotate(45deg)}
.leaflet-container{font-family:inherit}
@media(max-width:900px){.maplay{grid-template-columns:1fr}#map{height:400px}}

/* 3D */
.wh3d{display:grid;grid-template-columns:1fr 320px;gap:16px}
#three{position:relative;height:600px;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#0b1b3a,#16324a);box-shadow:var(--shadow);cursor:grab}
#three:active{cursor:grabbing}
#three canvas{display:block;width:100%;height:100%}
.tip{position:absolute;pointer-events:none;background:#0b1220e6;color:#fff;padding:8px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;transform:translate(14px,14px);z-index:3;max-width:240px;border:1px solid #ffffff22;animation:fade .15s}
.legend{position:absolute;bottom:12px;inset-inline-start:12px;display:flex;gap:10px;flex-wrap:wrap;background:#0b1220cc;color:#fff;padding:6px 12px;border-radius:99px;font-size:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px}
.side3d .card{margin-bottom:12px}
@media(max-width:1000px){.wh3d{grid-template-columns:1fr}#three{height:440px}}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(calc(var(--dir,1)*24px))}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes meter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #ef444466}50%{box-shadow:0 0 0 7px #ef444400}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%{transform:rotate(45deg) scale(.5);opacity:1}100%{transform:rotate(45deg) scale(1.8);opacity:0}}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rip{to{transform:scale(4);opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}

/* ---------- responsive ---------- */
.burger{display:none}
.topbar .ttl{display:flex;align-items:center;gap:10px;min-width:0}
.topbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navbg{display:none}
img,canvas,svg{max-width:100%}
@media(max-width:900px){
  .burger{display:inline-block;font-size:18px;padding:6px 12px}
  .sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;width:272px;height:100vh;z-index:40;transform:translateX(calc(var(--dir,1)*100%));transition:transform .35s var(--ease),box-shadow .35s;visibility:hidden;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.navopen .sidebar{transform:none;visibility:visible;box-shadow:0 0 60px #000a}
  .navbg{display:block;position:fixed;inset:0;z-index:35;background:#050b1a88;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
  body.navopen .navbg{opacity:1;pointer-events:auto}
  body.navopen{overflow:hidden}
  .main{width:100%}
  .topbar{padding:10px 14px}.topbar h1{font-size:18px}
  #view{padding:14px 12px calc(80px + env(safe-area-inset-bottom))}
  .card{padding:14px;border-radius:14px;margin-bottom:14px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi .v{font-size:23px}
  .maplay{grid-template-columns:1fr}#map{height:380px}
  .wh3d{grid-template-columns:1fr}#three{height:420px}
}
@media(max-width:700px){
  body{font-size:15px}
  input,select,textarea{font-size:16px;min-height:44px}
  input[type=checkbox]{min-height:0}
  input[type=number]{width:100%;max-width:140px}
  .btn{min-height:44px;padding:10px 16px}.btn.sm{min-height:40px}
  .row{gap:8px}.row>select,.row>input:not([type=checkbox]){flex:1 1 140px}.row .grow{min-width:0;flex:1 1 100%}
  .form,.form[style]{grid-template-columns:1fr!important}
  .modal-bg{padding:0;align-items:flex-end}
  .modal{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:slideUp .4s var(--ease)}
  .toast{inset-inline:12px;bottom:calc(14px + env(safe-area-inset-bottom));text-align:center}
  .sidebar a{padding:13px 14px}
  /* tables become stacked cards */
  .tw{overflow:visible}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:6px 12px;background:var(--card-solid)}
  tbody tr:hover{background:var(--card-solid)}
  td{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px dashed var(--line);padding:9px 0;text-align:end;min-height:40px}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);flex:none;color:var(--mut);font-size:12.5px;font-weight:600;text-align:start;max-width:42%}
  td:not([data-label])::before,td[data-label='']::before{display:none}
  td[colspan]{display:block;text-align:center}
  td>.row{justify-content:flex-end}
  td .btn{flex:none}
  td .meter{width:110px}
  .insights{grid-template-columns:1fr}
  .bars{height:120px;gap:4px}
  .ai-hero .row{gap:6px}
  .login-card{max-width:none!important}
  .chat{max-height:300px}
  .tip{max-width:180px;font-size:12px}
  .legend{font-size:11px;gap:6px;inset-inline:8px}
}
@media(max-width:340px){.kpis{grid-template-columns:1fr}.topbar .tools .btn{padding:6px 10px}}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.posr{position:sticky;top:76px}
.kbd{font-size:12px;margin:12px 0 0}
.res{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;margin-bottom:8px;cursor:pointer;background:var(--card-solid);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.res:hover{transform:translateY(-2px);border-color:var(--pri);box-shadow:var(--shadow)}
.res.out{opacity:.65;cursor:default}.res.out:hover{transform:none;border-color:var(--line);box-shadow:none}
.chip{display:inline-block;margin:4px 4px 0 0;padding:3px 10px;border-radius:99px;background:#0ea5a422;color:var(--pri-d);cursor:pointer;font-size:12px}
.star{cursor:pointer;color:var(--mut);font-size:18px;transition:transform .2s,color .2s}.star:hover{transform:scale(1.3)}.star.on{color:#f59e0b}
.favs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.fav{font:inherit;display:flex;flex-direction:column;gap:2px;text-align:start;padding:10px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,#0ea5a410,#2563eb10);color:var(--ink);cursor:pointer;transition:transform .2s var(--ease)}
.fav:hover{transform:translateY(-3px)}.fav.out{opacity:.5}.fav small{color:var(--mut)}
.lines{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;overflow-x:hidden;padding:2px}
.line{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n n x" "u q t";gap:8px 10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--card-solid);animation:pop .35s var(--ease)}
.line.flash{animation:flash 1s var(--ease)}
.line .ln{min-width:0}.line .ln b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line select{padding:6px 8px;min-height:0}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty button{font:inherit;border:0;background:var(--bg);color:var(--ink);width:34px;height:34px;cursor:pointer;font-size:18px}
.qty button:active{background:var(--pri);color:#fff}
.qty input{width:46px;text-align:center;border:0;border-radius:0;padding:6px 0;min-height:0;box-shadow:none!important}
.lt{grid-area:t;text-align:end;white-space:nowrap}.line .ln{grid-area:n}.line select{grid-area:u}.line .qty{grid-area:q;justify-self:center}.line>.btn{grid-area:x;justify-self:end}
.empty{text-align:center;padding:34px 10px;color:var(--mut);font-size:15px;line-height:2}
.sums{display:flex;flex-direction:column;gap:4px;color:var(--mut)}.sums div,.grand{display:flex;justify-content:space-between;align-items:center}
.grand{padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0ea5a41a,#2563eb1a);margin-top:8px}
.grand b{font-size:26px;letter-spacing:-.5px}.grand.big b{font-size:34px}
.btn.pay{background:linear-gradient(135deg,var(--ok),var(--pri));font-size:17px;padding:13px 18px;box-shadow:0 10px 24px -10px #16a34aaa}
.btn.pay small{opacity:.7;font-weight:400}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.paybar{display:none}
.receipt{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.receipt table td,.receipt table th{padding:3px 4px;border:0}
@keyframes flash{0%{background:#0ea5a444;transform:scale(1.02)}100%{background:var(--card-solid);transform:none}}
@media print{.sidebar,.topbar,#view,.no-print,.paybar{display:none!important}.modal-bg{position:static;background:none;padding:0;backdrop-filter:none}.modal{width:100%;padding:0;box-shadow:none}}
@media(max-width:900px){
  .pos{grid-template-columns:1fr}.posr{position:static}
  .paybar{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:30;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--card-solid);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px #0006}
  .paybar b{display:block;font-size:20px}.paybar small{color:var(--mut)}
  .lines{max-height:none}
}
@media(max-width:700px){
  .favs{grid-template-columns:repeat(2,1fr)}
  .res{flex-direction:column}.res>div:last-child{text-align:start!important}
}