:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --border:#2a3140;
  --text:#c9d1d9; --muted:#7d8590; --accent:#3fb950; --accent2:#58a6ff;
  --danger:#f85149; --warn:#d29922;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Consolas,monospace;font-size:14px;}
#app{display:grid;grid-template-rows:56px 1fr;height:100vh;}

header.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--panel);border-bottom:1px solid var(--border);}
header.topbar .brand{font-weight:700;letter-spacing:1px;color:var(--accent2);}
header.topbar .stats{display:flex;gap:18px;color:var(--muted);}
header.topbar .stats b{color:var(--accent);}

.layout{display:grid;grid-template-columns:210px 1fr;height:100%;overflow:hidden;}
nav.sidebar{background:var(--panel);border-right:1px solid var(--border);padding:14px 0;}
nav.sidebar .tab{padding:10px 18px;cursor:pointer;color:var(--muted);border-left:3px solid transparent;}
nav.sidebar .tab:hover{color:var(--text);}
nav.sidebar .tab.active{color:var(--accent2);border-left-color:var(--accent2);background:var(--panel2);}

main.content{padding:20px;overflow-y:auto;}
.panel{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:16px;margin-bottom:16px;}
.panel h2{margin-top:0;font-size:15px;color:var(--accent2);text-transform:uppercase;letter-spacing:.5px;}

button{background:var(--accent2);color:#00121f;border:none;border-radius:4px;padding:7px 14px;cursor:pointer;font-weight:600;}
button.secondary{background:var(--panel);color:var(--text);border:1px solid var(--border);}
button.danger{background:var(--danger);color:#fff;}
button:disabled{opacity:.5;cursor:not-allowed;}

input,select{background:#0d1117;border:1px solid var(--border);color:var(--text);padding:6px 8px;border-radius:4px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;}
th{color:var(--muted);font-weight:600;}
tr.sell td:first-child{color:var(--danger);}
tr.buy td:first-child{color:var(--accent);}

.grid-wrap{display:inline-block;border:1px solid var(--border);background:#0d1117;padding:6px;}
.grid{display:grid;gap:2px;}
.cell{width:34px;height:34px;background:#161b22;border:1px solid #2a3140;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;}
.cell:hover{border-color:var(--accent2);}
.cell.machine{background:#1f3a24;border-color:var(--accent);}
.cell.conveyor{background:#22314a;border-color:var(--accent2);}

.facility-card{display:flex;justify-content:space-between;align-items:center;padding:10px;border:1px solid var(--border);border-radius:5px;margin-bottom:8px;background:#0d1117;}
.facility-card .badge{font-size:11px;padding:2px 6px;border-radius:3px;background:var(--panel);color:var(--muted);}
.status-running{color:var(--accent);}
.status-blocked{color:var(--danger);}
.status-stopped{color:var(--warn);}

.auth-box{max-width:340px;margin:80px auto;background:var(--panel2);border:1px solid var(--border);padding:24px;border-radius:8px;}
.auth-box h1{color:var(--accent2);font-size:18px;text-align:center;}
.auth-box input{width:100%;margin-bottom:10px;}
.auth-box button{width:100%;}
.error-msg{color:var(--danger);font-size:12.5px;margin-top:8px;}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.muted{color:var(--muted);}
canvas{background:#0d1117;border:1px solid var(--border);border-radius:6px;}