:root{
  --bg-canvas:#f3f1e7; --surface:#ffffff; --surface-raised:#faf8ef;
  --text-primary:#23241d; --text-secondary:#5c5c4d; --text-muted:#8b8a76;
  --border:rgba(35,36,29,0.13); --border-strong:rgba(35,36,29,0.24);
  --accent:#3f6b7d; --accent-bg:#e2eef1; --accent-text:#284a58;
  --danger:#a83a26; --danger-bg:#f6e4df; --danger-text:#7a2a1a;
  --warning:#a9711f; --warning-bg:#f5ead2; --warning-text:#7a5316;
  --success:#4f6b34; --success-bg:#e7edda; --success-text:#3a4f26;
  --rail-bg:#23241d; --rail-text:#ece8d9; --rail-text-muted:#8b8a76; --rail-active-bg:#33352a;
  --font-display:'Oswald',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg-canvas:#1a1c16; --surface:#242720; --surface-raised:#2c2f26;
    --text-primary:#ece8d9; --text-secondary:#a8a794; --text-muted:#736f5c;
    --border:rgba(236,232,217,0.12); --border-strong:rgba(236,232,217,0.22);
    --accent:#7fb0c2; --accent-bg:#2a3d43; --accent-text:#bfe0ea;
    --danger:#d9705a; --danger-bg:#3d2620; --danger-text:#eeb3a3;
    --warning:#d9a850; --warning-bg:#3c3018; --warning-text:#f0cf98;
    --success:#93b56f; --success-bg:#2b3521; --success-text:#c6dcac;
    --rail-bg:#14150f; --rail-text:#ece8d9; --rail-text-muted:#736f5c; --rail-active-bg:#242720;
  }
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--bg-canvas); color:var(--text-primary); font-family:var(--font-body); min-height:100vh;}
a{color:var(--accent-text);}

.app{display:grid; grid-template-columns:184px 1fr; min-height:100vh;}
.rail{background:var(--rail-bg); color:var(--rail-text); padding:20px 12px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto;}
.rail-brand{font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--rail-text); padding:0 10px 18px; border-bottom:0.5px solid rgba(236,232,217,0.14); margin-bottom:14px;}
.rail-brand span{display:block; font-family:var(--font-mono); font-size:10px; font-weight:400; color:var(--rail-text-muted); letter-spacing:0.08em; margin-top:3px;}
.rail-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-size:13px; color:var(--rail-text-muted); cursor:pointer; text-decoration:none;}
.rail-item svg{width:16px; height:16px; flex-shrink:0;}
.rail-item.active{background:var(--rail-active-bg); color:var(--rail-text); font-weight:500;}
.rail-item.active svg{color:var(--accent);}
.rail-item.disabled{opacity:.4; cursor:default;}
.rail-foot{margin-top:auto; padding-top:12px; border-top:0.5px solid rgba(236,232,217,0.14); font-size:11px; color:var(--rail-text-muted); display:flex; justify-content:space-between; align-items:center;}
.rail-foot button{background:none; border:none; color:var(--rail-text-muted); cursor:pointer; font-size:11px; text-decoration:underline; padding:0; font-family:var(--font-body);}

.main{padding:22px 26px 30px; overflow-x:auto;}
.topline{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px;}
.topline h1{font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:0.02em; margin:0;}

.kpi-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:20px;}
.kpi{background:var(--surface-raised); border:0.5px solid var(--border); border-radius:10px; padding:12px 14px;}
.kpi .label{font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px;}
.kpi .value{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:22px; font-weight:500;}
.kpi .value.danger{color:var(--danger);}
.kpi .value.warning{color:var(--warning);}
.kpi .value.success{color:var(--success);}

.panel{background:var(--surface); border:0.5px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:14px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:0.5px solid var(--border); gap:10px; flex-wrap:wrap;}
.panel-head h2{font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin:0; color:var(--text-secondary);}
.panel-body{padding:14px 16px;}

textarea{width:100%; min-height:160px; font-family:var(--font-mono); font-size:12px; background:var(--surface-raised); color:var(--text-primary); border:0.5px solid var(--border); border-radius:8px; padding:10px; resize:vertical;}
input[type=text],input[type=number],select{font-family:var(--font-body); font-size:13px; background:var(--surface-raised); color:var(--text-primary); border:0.5px solid var(--border); border-radius:6px; padding:7px 10px;}
input[type=number]{width:80px; font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
button{font-family:var(--font-body); font-size:13px; font-weight:500; background:var(--surface-raised); color:var(--text-primary); border:0.5px solid var(--border-strong); border-radius:8px; padding:8px 14px; cursor:pointer;}
button:hover{background:var(--accent-bg); border-color:var(--accent);}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent);}

table{width:100%; border-collapse:collapse; font-size:12.5px;}
th{text-align:left; font-family:var(--font-display); font-weight:500; font-size:11px; letter-spacing:0.03em; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; border-bottom:0.5px solid var(--border-strong);}
td{padding:8px 10px; border-bottom:0.5px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right;}
th.num{text-align:right;}

.pill{font-size:10.5px; font-weight:500; padding:3px 8px; border-radius:20px; white-space:nowrap;}
.pill.danger{background:var(--danger-bg); color:var(--danger-text);}
.pill.warning{background:var(--warning-bg); color:var(--warning-text);}
.pill.success{background:var(--success-bg); color:var(--success-text);}
.pill.accent{background:var(--accent-bg); color:var(--accent-text);}

.empty{color:var(--text-muted); font-size:13px; padding:20px; text-align:center;}
.hint{color:var(--text-muted); font-size:11.5px; margin:6px 0 0;}
.error{color:var(--danger-text); background:var(--danger-bg); border-radius:8px; padding:8px 12px; font-size:12.5px; margin:8px 0;}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-card{background:var(--surface); border:0.5px solid var(--border); border-radius:12px; padding:32px 34px; width:320px; text-align:center;}
.login-card h1{font-family:var(--font-display); font-size:20px; letter-spacing:0.03em; margin:0 0 4px;}
.login-card p{color:var(--text-secondary); font-size:12.5px; margin:0 0 20px;}
.login-card input{width:100%; margin-bottom:12px;}
.login-card button{width:100%;}

.row-flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.stock-fill{width:60px; height:5px; border-radius:3px; background:var(--border); overflow:hidden; display:inline-block; vertical-align:middle; margin-left:8px;}
.stock-fill i{display:block; height:100%; background:var(--success);}