:root{
  --bg:#0b0e14;
  --bg-2:#0e1117;
  --panel:#161b22;
  --panel-2:#1c232c;
  --panel-3:#222a35;
  --border:#262d36;
  --border-2:#323a45;
  --text:#e6edf3;
  --muted:#8b949e;
  --primary:#2f81f7;
  --primary-2:#1f6feb;
  --accent:#7c5cff;
  --good:#3fb950;
  --warn:#d29922;
  --bad:#f85149;
  --shadow:0 6px 18px rgba(0,0,0,.28);
  --shadow-sm:0 2px 6px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4{margin:0}
h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.muted{color:var(--muted)}
.small{font-size:12px}
hr{border:none;border-top:1px solid var(--border);margin:14px 0}

button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:9px 14px;transition:.15s}
button:hover{border-color:var(--border-2);background:var(--panel-3)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
button.primary:hover{background:var(--primary-2);border-color:var(--primary-2)}
button.ghost{background:transparent}
button.ghost:hover{background:var(--panel-2)}
button.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
button.danger:hover{background:rgba(248,81,73,.1)}
button.small{padding:5px 10px;font-size:12px}
button.icon-btn{padding:4px 9px;line-height:1}
input,select,textarea{font:inherit;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
input[type=number]{font-variant-numeric:tabular-nums}

/* TOPBAR */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#2f81f7,#7c5cff);display:grid;place-items:center;font-weight:800}
.brand h1{font-size:16px}
.brand .tag{font-size:11px;color:var(--muted)}
.owner-switch{display:flex;align-items:center;gap:10px}
.owner-switch label{color:var(--muted);font-size:12px}

/* MAIN TABS */
.tabs{display:flex;gap:4px;padding:8px 14px;overflow-x:auto;border-bottom:1px solid var(--border);background:var(--panel);scrollbar-width:thin}
.tab{white-space:nowrap;background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 12px;font-weight:500}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.active{background:var(--panel-2);color:var(--text);border-color:var(--border)}

/* SUBTABS (inside Stock) */
.subtabs{display:flex;gap:4px;padding:0 0 4px;margin-bottom:14px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}
.subtab{white-space:nowrap;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);padding:8px 14px;font-weight:500}
.subtab:hover{color:var(--text);background:transparent}
.subtab.active{color:var(--text);border-bottom-color:var(--primary)}
.subpanel{display:none;animation:fadeIn .2s ease}
.subpanel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}

.badge{display:inline-block;background:var(--bad);color:#fff;font-size:10px;padding:1px 6px;border-radius:99px;margin-left:4px;font-weight:700;vertical-align:middle}
.badge.zero{background:var(--panel-3);color:var(--muted)}

/* PANELS */
main{padding:16px;max-width:1280px;margin:0 auto}
.panel{display:none}
.panel.active{display:block}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card h3{margin-bottom:12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.card.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(135deg,#1a2230 0%,#161b22 100%);border-color:var(--border-2)}
.card.hero h2{margin-top:4px}
.card.hero .capacity{text-align:right}
.card.hero .capacity strong{font-size:36px;display:block;color:var(--good);font-variant-numeric:tabular-nums}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.row-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* FORMS */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.form.inline{grid-template-columns:1fr auto}
.form.inline-build{grid-template-columns:140px 1fr auto;align-items:end}
.form > button,.form .form-actions{grid-column:1/-1}
.form-actions{display:flex;gap:8px;flex-wrap:wrap}
.form label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.form label input,.form label select,.form label textarea{margin-top:2px}
.filter-row{display:grid;grid-template-columns:2fr 1fr;gap:8px;margin-bottom:10px}
.file-btn{display:inline-flex;align-items:center;padding:9px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:transparent}
.file-btn:hover{background:var(--panel-2)}

/* TABLES */
.table-wrap{max-height:560px;overflow:auto;border-radius:8px;border:1px solid var(--border)}
.table-wrap table{margin:0}
.table-wrap thead th{position:sticky;top:0;background:var(--panel);z-index:1;box-shadow:0 1px 0 var(--border)}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th,table.data td{padding:9px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
table.data th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.6px;background:var(--panel)}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:var(--panel-2)}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody td.num,table.data tbody td.money{font-variant-numeric:tabular-nums;text-align:right}
table.data thead th.num,table.data thead th.money{text-align:right}
table.data .clickable{cursor:pointer;color:var(--primary);font-weight:500}
table.data .clickable:hover{text-decoration:underline}

/* SORTABLE */
table.sortable thead th[data-sort]{cursor:pointer;user-select:none;position:relative}
table.sortable thead th[data-sort]:hover{color:var(--text)}
table.sortable thead th[data-sort]::after{content:"";display:inline-block;margin-left:6px;border:4px solid transparent;opacity:.35;transform:translateY(-2px)}
table.sortable thead th.sort-asc::after{border-bottom-color:currentColor;opacity:1;transform:translateY(-4px)}
table.sortable thead th.sort-desc::after{border-top-color:currentColor;opacity:1;transform:translateY(2px)}

/* PILLS */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;border:1px solid transparent;line-height:1.5;letter-spacing:.2px}
.pill.New{background:#2d3640;color:#cfd6df}
.pill.Contacted{color:#fff;background:#1f6feb}
.pill.DemoDone,.pill.Demo-Done,.pill.Demo{background:#7c5cff;color:#fff}
.pill.Closed,.pill.Successful,.pill.Done,.pill.OK,.pill.In{background:rgba(63,185,80,.18);color:#4cc862;border-color:rgba(63,185,80,.4)}
.pill.Lost,.pill.Cancelled,.pill.Failed,.pill.NotDone,.pill.Out,.pill.Deleted{background:rgba(248,81,73,.18);color:#ff6961;border-color:rgba(248,81,73,.4)}
.pill.Pending,.pill.Promising,.pill.Late,.pill.Low,.pill.Adjust,.pill.Updated{background:rgba(210,153,34,.18);color:#e8b339;border-color:rgba(210,153,34,.4)}
.pill.Cold,.pill.Open{background:#2d3640;color:#cfd6df}
.pill.Created,.pill.Imported,.pill.Seeded,.pill.Exported{background:rgba(47,129,247,.18);color:#5aa3ff;border-color:rgba(47,129,247,.4)}

/* KPIS */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.kpi:hover{transform:translateY(-1px);border-color:var(--border-2)}
.kpi span{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.kpi strong{font-size:24px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi.profit{background:linear-gradient(135deg,#0d3320,#0b1f12);border-color:#1c4a2c}
.kpi.profit strong{color:#3fb950}
.kpi.good{border-color:rgba(63,185,80,.4)}
.kpi.good strong{color:var(--good)}
.kpi.warn{border-color:rgba(210,153,34,.4)}
.kpi.warn strong{color:var(--warn)}
.kpi.bad{border-color:rgba(248,81,73,.4)}
.kpi.bad strong{color:var(--bad)}

.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
@media (max-width:920px){.two-col{grid-template-columns:1fr}}

/* BARS / CHARTS */
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:130px 1fr 80px;gap:10px;align-items:center;font-size:13px}
.bar .track{height:10px;background:var(--panel-2);border-radius:5px;overflow:hidden;border:1px solid var(--border)}
.bar .fill{height:100%;background:linear-gradient(90deg,#3fb950,#2f81f7);transition:width .3s}
.bar.neg .fill{background:linear-gradient(90deg,#f85149,#d29922)}
.bar .val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.bar .track.stacked{position:relative;background:var(--panel-2)}
.bar .track.stacked .fill{position:absolute;inset:0 auto 0 0;height:100%}
.bar .track.stacked .fill.inc{background:linear-gradient(90deg,#3fb950,#2cd673);opacity:.85;z-index:1}
.bar .track.stacked .fill.exp{background:linear-gradient(90deg,#f85149,#ff7b6f);opacity:.85;z-index:2;mix-blend-mode:multiply}
.bars.trend .bar{grid-template-columns:80px 1fr 90px}

.ranklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ranklist li{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* ALERTS */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel-2)}
.alert.alert-bad{border-color:rgba(248,81,73,.4);background:rgba(248,81,73,.06)}
.alert.alert-warn{border-color:rgba(210,153,34,.4);background:rgba(210,153,34,.06)}
.alert.alert-info{border-color:rgba(47,129,247,.4);background:rgba(47,129,247,.06)}
.alert .alert-main{display:flex;flex-direction:column;gap:2px}
.alert .alert-main strong{font-size:13px}
.alert .alert-main span{font-size:11px;color:var(--muted)}
.alert .alert-action{flex-shrink:0}
.alert .alert-action .num{font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.alerts:empty::after{content:"All clear ✓";display:block;color:var(--muted);text-align:center;padding:14px;font-style:italic}

/* BUILD PREVIEW */
.build-preview{margin-top:12px;font-size:12px;color:var(--muted);font-family:ui-monospace,Consolas,monospace;background:var(--panel-2);padding:0;border-radius:8px;border:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height .25s}
.build-preview.show{max-height:400px;padding:10px 12px;overflow:auto}
.build-preview .preview-row{display:grid;grid-template-columns:90px 1fr 60px;gap:8px;align-items:center;padding:3px 0;color:var(--text)}
.build-preview .preview-row .ok{color:var(--good)}
.build-preview .preview-row .short{color:var(--bad);font-weight:700}
.build-preview .preview-summary{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border);font-weight:600;color:var(--text)}

/* MODAL */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;width:min(680px,100%);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:slideUp .2s}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:15px;color:var(--text);text-transform:none;letter-spacing:0}
.modal-body{padding:14px 18px;overflow:auto}

/* REPORT */
.report{white-space:pre-wrap;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:14px;font:13px/1.6 ui-monospace,Consolas,monospace;color:var(--text);max-height:70vh;overflow:auto}

/* TOAST */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(40px);background:#1f6feb;color:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow);opacity:0;transition:.25s;pointer-events:none;z-index:200;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* DELETE BUTTON */
.del{background:transparent;border:none;color:var(--bad);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}
.del:hover{background:rgba(248,81,73,.12)}

/* ROW ACTIONS in tables */
.row-actions{display:flex;gap:4px}
.row-actions button{padding:4px 8px;font-size:11px}

/* MOBILE */
@media (max-width:680px){
  .topbar{flex-direction:column;align-items:flex-start}
  .filter-row{grid-template-columns:1fr}
  .kpi strong{font-size:20px}
  table.data{font-size:12px}
  table.data th,table.data td{padding:7px 8px}
  .bar{grid-template-columns:90px 1fr 60px}
  .form.inline-build{grid-template-columns:1fr}
  .card.hero{flex-direction:column;text-align:left;align-items:stretch}
  .card.hero .capacity{text-align:left}
}

@media print {
  .topbar,.tabs,.subtabs,.row-between button,.del,.row-actions{display:none}
  .panel{display:block !important}
  .subpanel{display:block !important}
  body{background:#fff;color:#000}
  .card{box-shadow:none;border-color:#ddd;background:#fff}
}

/* ---- Orders ---- */
.orders-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:#6A3FE0;color:#fff;font-size:11px;font-weight:700}
.orders-badge[hidden]{display:none}
.orders-summary{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.os-fig{display:flex;flex-direction:column;padding:10px 16px;border:1px solid rgba(0,0,0,.12);border-radius:12px}
.os-fig b{font-size:1.5rem;line-height:1}
.os-fig span{font-size:11px;opacity:.65}
.os-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid rgba(0,0,0,.12);font-size:12px;text-transform:capitalize}
.orders-state{padding:26px 0;opacity:.7;font-size:14px}
.orders-state[hidden]{display:none}
.orders-list{display:grid;gap:12px}
.order-card{border:1px solid rgba(0,0,0,.13);border-radius:14px;padding:16px}
.order-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.order-ref{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.order-when{margin-left:10px;font-size:12px;opacity:.6}
.order-status{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(0,0,0,.07)}
.order-status.s-new{background:#6A3FE0;color:#fff}
.order-status.s-delivered{background:#2F7D52;color:#fff}
.order-status.s-cancelled{background:#B33C56;color:#fff}
.order-body{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.order-cust{display:flex;flex-direction:column;gap:3px;font-size:13px}
.order-cust a{text-decoration:none}
.order-addr,.order-note{opacity:.7;font-size:12px}
.order-items{display:flex;flex-direction:column;gap:3px;font-size:13px;text-align:right}
.order-pay{font-size:11px;opacity:.6}
.order-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08)}
.btn.tiny{padding:5px 11px;font-size:11px;text-transform:capitalize}
@media(max-width:720px){.order-body{grid-template-columns:1fr}.order-items{text-align:left}}
/* contact links must stay legible on the dark panel */
.order-cust a{color:#9DB8FF}
.order-cust a:hover{color:#fff;text-decoration:underline}
/* install prompt */
#installBar{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;display:flex;align-items:center;gap:12px;
padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#171B25;color:#E6E8EF;
font-size:13px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
#installBar span{flex:1;line-height:1.4}
#installBar b{color:#fff}
#installBar [data-install]{padding:9px 16px;border:0;border-radius:999px;background:#6A3FE0;color:#fff;font-weight:700;font-size:13px;cursor:pointer}
#installBar [data-close]{padding:4px 8px;border:0;background:none;color:#8A90A2;font-size:20px;line-height:1;cursor:pointer}
@media(min-width:720px){#installBar{left:auto;right:20px;bottom:20px;max-width:380px}}

/* ---- Articles ---- */
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h2{font-size:18px}
.form label.wide{grid-column:1/-1}
.form label .muted{text-transform:none;letter-spacing:0;font-weight:400}
.article-preview{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--bg);max-height:520px;overflow:auto}
.article-preview img{max-width:100%;height:auto;border-radius:8px}
.article-preview h1,.article-preview h2,.article-preview h3{margin:18px 0 8px;line-height:1.25}
.article-preview p,.article-preview li{margin:0 0 10px;line-height:1.7;color:var(--text)}
.article-preview iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.art-list{display:grid;gap:10px}
.art-card{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.art-card .art-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.art-card b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-card small{color:var(--muted);font-size:12px}
.art-badge{padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.art-badge.published{background:rgba(63,185,80,.16);color:var(--good)}
.art-badge.draft{background:var(--border);color:var(--muted)}
.art-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
@media(max-width:640px){
  .art-card{flex-direction:column;align-items:stretch}
  .art-right{justify-content:space-between}
}