@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg:#07090d;--s1:#0f1318;--s2:#151c24;--s3:#1c2530;
  --b1:#1e2d3d;--b2:#243547;--b3:#2d4257;
  --tx:#dde6f0;--m1:#6b8099;--m2:#4a6070;--m3:#2d3f50;
  --green:#1fd9a0;--gd:#0a2820;--gb:rgba(31,217,160,.12);
  --blue:#3a9eff;--bd:#0a1e38;
  --amber:#f59e0b;--ad:#261a04;
  --red:#ef4444;--rd:#2a0808;
  --purple:#a78bfa;--pd:#1a0f38;
  --teal:#2dd4bf;--orange:#fb923c;--rose:#f472b6;
  --font:'Outfit',sans-serif;--mono:'JetBrains Mono',monospace;
  --sidebar:220px;--r:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:14px}

/* SETUP */
#setup{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:auto}
#setup::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 40% 0%,rgba(31,217,160,.06),transparent 55%);pointer-events:none}
.sb{background:var(--s1);border:1px solid var(--b1);border-radius:14px;padding:36px 40px;width:100%;max-width:480px;position:relative;z-index:1}
.sb-logo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.sb-icon{width:38px;height:38px;background:var(--gd);border:1px solid rgba(31,217,160,.3);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px}
.sb-name{font-size:15px;font-weight:600}.sb-sub{font-size:11px;color:var(--m1)}
.sb h2{font-size:20px;font-weight:700;margin-bottom:8px}
.sb p{font-size:13px;color:var(--m1);margin-bottom:22px;line-height:1.6}
.fl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--m1);margin-bottom:7px}
.fi{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:7px;padding:10px 13px;color:var(--tx);font-family:var(--mono);font-size:13px;outline:none;transition:border-color .2s;margin-bottom:10px}
.fi:focus{border-color:var(--green)}
.fi::placeholder{color:var(--m3)}
.scope-list{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
.scope-row{display:flex;align-items:center;gap:8px;background:var(--s2);border-radius:6px;padding:7px 11px}
.scope-tag{font-family:var(--mono);font-size:10px;color:var(--green);background:var(--gd);padding:2px 7px;border-radius:4px}
.scope-desc{color:var(--m1);font-size:11px}
.fhint{font-size:11px;color:var(--m2);margin-bottom:20px;line-height:1.5}
.fhint a{color:var(--blue);text-decoration:none}
.btn-p{width:100%;background:var(--green);color:#071a0f;border:none;border-radius:7px;padding:12px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s}
.btn-p:hover{opacity:.88}.btn-p:disabled{opacity:.4;cursor:not-allowed}
.err-box{background:var(--rd);border:1px solid var(--red);border-radius:7px;padding:9px 12px;font-size:12px;color:var(--red);margin-top:10px;display:none}

/* LOADING */
.ld{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:9999}
.ld-spin{width:34px;height:34px;border:2px solid var(--b2);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ld-txt{font-size:13px;color:var(--m1)}

/* APP SHELL */
#app{display:none;height:100vh;flex-direction:row}
#app.visible{display:flex}

/* SIDEBAR */
.sidebar{width:var(--sidebar);height:100vh;background:var(--s1);border-right:1px solid var(--b1);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar::-webkit-scrollbar{width:0}
.sl-hdr{padding:14px 16px 12px;border-bottom:1px solid var(--b1);flex-shrink:0}
.sl-logo{display:flex;align-items:center;gap:9px}
.sl-logo-icon{width:28px;height:28px;background:var(--gd);border:1px solid rgba(31,217,160,.25);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}
.sl-logo-t{font-size:12px;font-weight:700}.sl-logo-s{font-size:10px;color:var(--m1)}
.sl-sec{padding:13px 10px 3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--m2)}
.sl-i{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--m1);margin:1px 6px;transition:all .12s;border-left:2px solid transparent}
.sl-i:hover{color:var(--tx);background:var(--s2)}
.sl-i.active{color:var(--tx);background:var(--s2);border-left-color:var(--ic,var(--green))}
.sl-ico{font-size:13px;width:16px;text-align:center;flex-shrink:0}
.sl-lbl{flex:1}
.sl-tag{font-size:9px;font-weight:700;padding:2px 6px;border-radius:8px;background:var(--ad);color:var(--amber)}
.sl-tag.new{background:var(--gd);color:var(--green)}
.sl-bot{margin-top:auto;padding:8px 6px;border-top:1px solid var(--b1)}

/* CONTENT */
.content{flex:1;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.content::-webkit-scrollbar{width:4px}
.content::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}

/* TOPBAR */
.topbar{background:var(--s1);border-bottom:1px solid var(--b1);padding:0 22px;height:50px;display:flex;align-items:center;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:50}
.tb-bc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--m1)}
.tb-cur{color:var(--tx);font-weight:500}
.tb-sp{flex:1}
.tb-time{font-family:var(--mono);font-size:11px;color:var(--m2)}
.live-pill{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--green);background:var(--gd);padding:3px 9px;border-radius:10px}
.ldot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.btn-sm{background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:5px 12px;color:var(--m1);font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px}
.btn-sm:hover{color:var(--tx);border-color:var(--b3)}
.btn-sm.ac{background:var(--green);color:#071a0f;border-color:var(--green);font-weight:600}
.btn-sm.ac:hover{opacity:.88}
.btn-sm.danger{background:var(--rd);color:var(--red);border-color:var(--red)}
.btn-sm.warn{background:var(--ad);color:var(--amber);border-color:var(--amber)}
.spinning .ri{animation:spin .8s linear infinite}

/* PAGES */
.page{display:none;padding:22px 22px 40px;flex:1}
.page.active{display:block}
.ph-row{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.pg-title{font-size:19px;font-weight:700;display:flex;align-items:center;gap:9px;margin-bottom:4px}
.pg-sub{font-size:13px;color:var(--m1)}
.btn-grp{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ALERTS */
.alerts{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.alrt{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:7px;font-size:13px}
.alrt.danger{background:var(--rd);border:1px solid rgba(239,68,68,.3);color:var(--red)}
.alrt.warn{background:var(--ad);border:1px solid rgba(245,158,11,.3);color:var(--amber)}
.alrt.ok{background:var(--gd);border:1px solid rgba(31,217,160,.25);color:var(--green)}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px;margin-bottom:18px}
.kpi{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--kc,var(--green));opacity:.5}
.kpi-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--m1);margin-bottom:7px}
.kpi-val{font-size:24px;font-weight:700;font-family:var(--mono);line-height:1}
.kpi-sub{font-size:11px;color:var(--m1);margin-top:4px}
.kpi.ok{border-color:rgba(31,217,160,.2)}.kpi.warn{border-color:rgba(245,158,11,.25)}.kpi.danger{border-color:rgba(239,68,68,.25)}

/* PANELS */
.panel{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.pnl-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--b1)}
.pnl-t{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.pnl-m{font-size:11px;color:var(--m1)}
.pnl-b{padding:14px 16px}
.pnl-b.np{padding:0}

/* ═══════════════════════════════════════
   PHYSICAL BOX MAP
═══════════════════════════════════════ */
.box-map-wrap{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r);padding:20px;margin-bottom:14px}
.bmap-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.bleg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--m1)}
.bleg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
/* Physical layout grid - mirrors the photo */
.bmap-layout{display:flex;flex-direction:column;gap:12px;max-width:700px;margin:0 auto}
/* Top row: 4 big boxes */
.brow-top{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
/* Bottom section */
.brow-bot{display:grid;grid-template-columns:3fr 1fr 2fr;gap:10px}
.bcol-left{display:flex;flex-direction:column;gap:10px}
.bcol-gap{/* corridor */}
.bcol-right{display:flex;flex-direction:column;gap:8px}
/* Corridor separator */
.corridor{display:flex;align-items:center;gap:10px;padding:6px 0}
.corridor-line{flex:1;height:1px;background:var(--b2);border-top:1px dashed var(--b2)}
.corridor-lbl{font-size:10px;color:var(--m3);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}

/* BOX TILE */
.bx{border-radius:8px;padding:12px 10px;text-align:center;cursor:pointer;transition:all .15s;position:relative;border:2px solid transparent}
.bx:hover{transform:translateY(-2px);filter:brightness(1.15)}
.bx:active{transform:scale(.97)}
.bx.selected{outline:2px solid var(--green);outline-offset:2px}
.bx-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.bx-num{font-family:var(--mono);font-size:11px;font-weight:600;opacity:.7}
.bx-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.bx-badge{font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}
.bx-mid{font-family:var(--mono);font-size:18px;font-weight:700;line-height:1;margin:4px 0}
.bx-waga{font-family:var(--mono);font-size:11px;opacity:.75;margin-bottom:6px}
.bx-bot{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}
.bx-sz{font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.04em}
.bx-days{font-size:9px;opacity:.8}
.bx-feed{font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px}
/* Cleaning state colors */
.cs-empty{background:rgba(42,63,80,.6);border-color:rgba(42,63,80,.8);color:var(--m2)}
.cs-czysty{background:rgba(31,217,160,.1);border-color:rgba(31,217,160,.35);color:var(--green)}
.cs-zasiedlony{background:rgba(58,158,255,.1);border-color:rgba(58,158,255,.3);color:var(--blue)}
.cs-do-czyszczenia{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4);color:var(--amber)}
.cs-razaco{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.5);color:var(--red)}
/* Przeznaczenie badge colors */
.pz-sprzedaz{background:rgba(31,217,160,.2);color:var(--green)}
.pz-stado{background:rgba(45,212,191,.2);color:var(--teal)}
.pz-holdback{background:rgba(58,158,255,.2);color:var(--blue)}
.pz-meksyk{background:rgba(167,139,250,.2);color:var(--purple)}
/* Size colors */
.sz-xs{background:rgba(58,158,255,.15);color:#7db8ff}
.sz-s{background:rgba(58,158,255,.2);color:var(--blue)}
.sz-m{background:rgba(31,217,160,.15);color:#5de6b8}
.sz-l{background:rgba(31,217,160,.2);color:var(--green)}
.sz-xl{background:rgba(132,204,22,.15);color:#a3e635}
/* Feed indicator */
.feed-ok{background:rgba(31,217,160,.15);color:var(--green)}
.feed-nk{background:rgba(245,158,11,.2);color:var(--amber)}
/* Big box (top row) */
.bx-big{min-height:120px}
/* Medium box (left bottom) */
.bx-med{min-height:80px}
/* Small box (right bottom) */
.bx-sml{min-height:60px;padding:8px}
.bx-sml .bx-mid{font-size:14px}
.bx-sml .bx-top{margin-bottom:4px}

/* ═══════════════════════════════════════
   BOX DETAIL PANEL
═══════════════════════════════════════ */
.box-detail{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;margin-top:16px;animation:slideUp .2s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bd-header{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--b1)}
.bd-num{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;font-weight:700;flex-shrink:0}
.bd-info{flex:1}
.bd-title{font-size:16px;font-weight:700}
.bd-sub{font-size:12px;color:var(--m1);margin-top:2px}
.bd-actions{display:flex;gap:8px;align-items:center}
/* Stats row */
.bd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;padding:14px 18px;border-bottom:1px solid var(--b1)}
.bds{background:var(--s2);border-radius:7px;padding:10px 12px;position:relative}
.bds-l{font-size:10px;color:var(--m1);font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.bds-v{font-size:20px;font-weight:700;font-family:var(--mono);line-height:1}
.bds-u{font-size:10px;color:var(--m1);margin-top:2px}
.bds.cleaning-bar::after{content:'';position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 7px 7px;width:var(--fill,0%);background:var(--fc,var(--green));transition:width .5s}
/* Tabs */
.bd-tabs{display:flex;gap:0;border-bottom:1px solid var(--b1);padding:0 18px}
.bd-tab{padding:10px 16px;font-size:12px;font-weight:500;color:var(--m1);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.bd-tab:hover{color:var(--tx)}
.bd-tab.active{color:var(--green);border-bottom-color:var(--green)}
.bd-content{padding:16px 18px;min-height:200px}
.bd-pane{display:none}.bd-pane.active{display:block}
/* Edit form inside detail */
.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.eg-full{grid-column:1/-1}
.ef-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m1);margin-bottom:6px}
.ef-inp{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:8px 11px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;transition:border-color .2s}
.ef-inp:focus{border-color:var(--green)}
.ef-sel{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:8px 11px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;cursor:pointer;-webkit-appearance:none}
.ef-ta{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:8px 11px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;resize:vertical;min-height:56px}
.feed-toggle{width:100%;padding:12px;border-radius:7px;border:2px solid;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.02em}
.feed-toggle.karm{background:var(--gd);border-color:var(--green);color:var(--green)}
.feed-toggle.karm:hover{background:var(--green);color:#071a0f}
.feed-toggle.stop{background:var(--ad);border-color:var(--amber);color:var(--amber)}
.feed-toggle.stop:hover{background:var(--amber);color:#261a04}
/* Charts */
.chart-area{position:relative;width:100%;height:140px;margin:10px 0}
canvas.chart{width:100%;height:100%}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.cl-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--m1)}
.cl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* TABLES */
.t-wrap{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;min-width:360px}
table.dt th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--m1);padding:8px 12px;text-align:left;border-bottom:1px solid var(--b1)}
table.dt td{font-size:12px;padding:9px 12px;border-top:1px solid var(--b1);vertical-align:middle}
table.dt tr:first-child td{border-top:none}
table.dt tr:hover td{background:rgba(255,255,255,.02)}
.td-mono{font-family:var(--mono);color:var(--m1)}
.td-ok{color:var(--green);font-weight:700}.td-no{color:var(--red);font-weight:700}
.td-note{color:var(--amber);font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:inline-block;font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px}
.tag-ok{background:var(--gd);color:var(--green)}.tag-warn{background:var(--ad);color:var(--amber)}.tag-err{background:var(--rd);color:var(--red)}.tag-blue{background:var(--bd);color:var(--blue)}.tag-muted{background:var(--s3);color:var(--m1)}

/* STOCK */
.stock-rows{display:flex;flex-direction:column;gap:10px}
.st-row{display:flex;align-items:center;gap:10px}
.st-lbl{font-family:var(--mono);font-size:12px;font-weight:600;width:26px;flex-shrink:0}
.st-wrap{flex:1;height:5px;background:var(--b1);border-radius:3px;overflow:hidden}
.st-bar{height:100%;border-radius:3px;transition:width .5s}
.st-val{font-family:var(--mono);font-size:11px;color:var(--m1);width:54px;text-align:right;flex-shrink:0}
/* FOOD */
.food-items{display:flex;flex-direction:column;gap:9px}
.fi-card{background:var(--s2);border-radius:7px;padding:12px 14px;border:1px solid var(--b1)}
.fi-card.ok{border-color:rgba(31,217,160,.2)}.fi-card.warn{border-color:rgba(245,158,11,.25)}.fi-card.danger{border-color:rgba(239,68,68,.3)}
.fi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fi-name{font-size:12px;font-weight:600}
.fi-days{font-family:var(--mono);font-size:18px;font-weight:700}
.fi-bar-w{height:3px;background:var(--b1);border-radius:2px;margin-bottom:5px}
.fi-bar{height:100%;border-radius:2px;transition:width .5s}
.fi-meta{font-size:11px;color:var(--m1)}
/* EVENTS */
.ev-list{display:flex;flex-direction:column}
.ev-row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--b1)}
.ev-row:last-child{border-bottom:none}
.ev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ev-body{flex:1}.ev-title{font-size:12.5px;font-weight:500}.ev-meta{font-size:11px;color:var(--m1);margin-top:1px}
.ev-date{font-family:var(--mono);font-size:10px;color:var(--m2);flex-shrink:0}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:none;align-items:flex-end;justify-content:flex-end}
.modal-bg.open{display:flex}
.modal{background:var(--s1);border-left:1px solid var(--b1);width:400px;height:100vh;overflow-y:auto;display:flex;flex-direction:column;animation:slideIn .2s ease}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.mh{padding:16px 18px 13px;border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.mh-t{font-size:14px;font-weight:600}
.mh-x{background:none;border:none;color:var(--m1);cursor:pointer;font-size:20px;line-height:1;padding:2px 6px;border-radius:4px;transition:color .15s}
.mh-x:hover{color:var(--tx)}
.mb{padding:18px;flex:1;overflow-y:auto}
.mf{padding:14px 18px;border-top:1px solid var(--b1);display:flex;gap:10px;flex-shrink:0}
.mfg{margin-bottom:14px}
.mfl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m1);margin-bottom:6px}
.mfi{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:9px 12px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;transition:border-color .2s}
.mfi:focus{border-color:var(--green)}
.mfi::placeholder{color:var(--m3)}
.mfsel{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:9px 12px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;cursor:pointer}
.mfta{width:100%;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:9px 12px;color:var(--tx);font-family:var(--font);font-size:13px;outline:none;resize:vertical;min-height:60px}
.mfgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mfcb{display:flex;align-items:center;gap:9px;cursor:pointer;padding:9px 12px;background:var(--s2);border:1px solid var(--b2);border-radius:6px}
.mfcb input{accent-color:var(--green);width:15px;height:15px;cursor:pointer}
.btn-cancel{flex:1;background:var(--s2);border:1px solid var(--b2);border-radius:6px;padding:10px;color:var(--m1);font-family:var(--font);font-size:13px;cursor:pointer}
.btn-cancel:hover{color:var(--tx)}
.btn-save{flex:2;background:var(--green);border:none;border-radius:6px;padding:10px;color:#071a0f;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer}
.btn-save:hover{opacity:.88}.btn-save:disabled{opacity:.4;cursor:not-allowed}
.save-st{font-size:12px;color:var(--m1);align-self:center}
.empty{text-align:center;padding:28px;color:var(--m1);font-size:13px}

/* COMING SOON */
.coming{background:var(--s1);border:1px solid var(--b1);border-radius:12px;padding:48px 32px;text-align:center;max-width:440px;margin:60px auto}
.coming-ico{font-size:34px;margin-bottom:14px}
.coming-t{font-size:17px;font-weight:600;margin-bottom:8px}
.coming-d{font-size:13px;color:var(--m1);line-height:1.7;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{font-size:11px;padding:4px 12px;border-radius:12px;border:1px solid var(--b2);color:var(--m1)}

/* GRID */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid-main{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:14px}
.col{display:flex;flex-direction:column;gap:14px}
.divider{border:none;border-top:1px solid var(--b1);margin:14px 0}
.hr{border:none;border-top:1px solid var(--b1);margin:10px 0}

@media(max-width:900px){.grid-2,.grid-main{grid-template-columns:1fr}.sidebar{width:52px}.sl-lbl,.sl-tag,.sl-sec,.sl-logo-t,.sl-logo-s{display:none}.brow-top{grid-template-columns:repeat(2,1fr)}.brow-bot{grid-template-columns:1fr 1fr}.bcol-gap{display:none}.chart-grid{grid-template-columns:1fr}.edit-grid{grid-template-columns:1fr}}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}