:root{
  --bg:#0d0f12; --panel:#171a1f; --muted:#aab4c0; --accent:#00b853; --accent-2:#ffd400;
  --danger:#ff4d4f; --ok:#2ecc71; --text:#e9eef5; --card:#121419; --border:#252a33;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background: radial-gradient(1200px 800px at 20% -10%, #112 0%, #0b0e12 40%, #0a0d12 100%);
  color:var(--text);
}
header{
  display:flex;align-items:center;gap:16px; padding:14px 18px;
  background:rgba(0,0,0,.35); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
}
header img{height:36px}
header h1{font-size:18px;margin:0;letter-spacing:.2px;font-weight:700}
#roleBadge{margin-left:auto; font-size:12px; padding:6px 10px; background:#0e1217; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
main{display:grid; grid-template-columns: 300px 1fr; min-height:calc(100vh - 70px)}
nav{
  border-right:1px solid var(--border); background:rgba(0,0,0,.25); padding:16px;
}
.nav-btn{width:100%; text-align:left; padding:10px 12px; margin-bottom:8px; border:1px solid var(--border);
  border-radius:10px; background:var(--card); color:var(--text); cursor:pointer; box-shadow:var(--shadow);}
.nav-btn.active{outline:2px solid var(--accent)}
.section{display:none; padding:18px}
.section.active{display:block}
.grid{display:grid; gap:12px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:var(--shadow)}
.card h3{margin-top:0}
.small{font-size:12px; color:var(--muted)}
.kpi{display:flex;align-items:center;justify-content:space-between; padding:12px; border:1px dashed var(--border); border-radius:12px}
.kpi .value{font-size:22px;font-weight:800}
.kpi .trend.up{color:var(--ok)} .kpi .trend.down{color:var(--danger)}
table{width:100%; border-collapse: collapse; font-size:14px}
th,td{padding:10px;border-bottom:1px solid var(--border)} th{text-align:left;color:var(--muted); font-weight:600; letter-spacing:.2px}
.badge{padding:4px 8px;border-radius:8px;background:#0f1318;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.controls label{display:block;margin:8px 0 4px}
.controls input[type="range"]{width:100%}
.controls input[type="number"], .controls select, .controls textarea{width:100%; padding:8px; background:#0f1318;color:var(--text);border:1px solid var(--border);border-radius:8px}
.btn{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#10151b;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#0ed46f); color:#00180a; font-weight:800; border:none}
.btn.warn{background:#2a1717; border-color:#602b2b; color:#ffb3b3}
.notice{padding:12px;border-left:4px solid var(--accent-2); background:#161207; border:1px solid #3a2f06; border-radius:10px}
footer{padding:20px; text-align:center; color:var(--muted)}
input[type="password"], input[type="text"]{width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:#0f1318; color:var(--text)}
.modal{position:fixed; inset:0; backdrop-filter: blur(4px); background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:99}
.modal .sheet{background:#0f1216; border:1px solid var(--border); border-radius:14px; padding:18px; width:min(660px, 92vw); box-shadow:var(--shadow)}
.modal.show{display:flex}
.map{display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:10px}
.map .cell{aspect-ratio: 1.2/1; border:1px solid var(--border); border-radius:8px; background:#10141a; display:flex;align-items:center;justify-content:center; cursor:pointer}
.map .cell:hover{outline:2px solid var(--accent)}
.cell .label{font-size:12px; color:var(--muted); text-align:center}
hr{border:0;border-top:1px solid var(--border); margin:12px 0}
.tag{display:inline-block; padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; margin:2px; background:#0f1318; color:#muted}
@media (max-width: 980px){
  main{grid-template-columns:1fr}
  nav{position:sticky; top:68px; z-index:9}
  .grid.cols-3{grid-template-columns:1fr}
  .grid.cols-2{grid-template-columns:1fr}
}