:root{
  --bg:#f6fbff;
  --card:#ffffff;
  --ink:#1b1f2a;
  --muted:#5b6272;
  --brand:#3f51b5;
  --accent:#ff9800;
  --good:#2e7d32;
  --bad:#c62828;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--ink); margin:0}
header{
  background: linear-gradient(90deg, var(--brand), #7b61ff);
  color:#fff; padding:18px 18px 14px;
}
header h1{margin:0;font-size:22px}
header p{margin:6px 0 0; opacity:.92}
nav{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid rgba(0,0,0,.08);
  padding:10px; display:flex; gap:10px; flex-wrap:wrap;
}
nav button{
  border:0; background: #f1f3ff; color:#1b1f2a;
  padding:10px 12px; border-radius:999px; cursor:pointer;
  transition: transform .06s ease, background .2s ease;
}
nav button:hover{background:#e6e9ff; transform: translateY(-1px)}
nav button.active{background:var(--accent); color:#000}
main{padding:16px; max-width:1100px; margin:0 auto}
.tab{display:none}
.tab.active{display:block}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:14px}
.card h2{margin:0 0 10px}
.small{color:var(--muted); font-size:13px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef2ff;color:#2b2f3a;font-size:12px;margin-right:6px}
.kpi{display:flex; gap:10px; flex-wrap:wrap}
.kpi .pill{background:#fff; border:1px solid rgba(0,0,0,.08); padding:10px 12px; border-radius:14px; min-width:160px}
.kpi b{display:block;font-size:18px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
input[type=text]{width:min(540px,100%); padding:10px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.18)}
.primary{background:var(--accent); border:0; padding:10px 14px; border-radius:12px; cursor:pointer}
.ghost{background:#f5f6ff;border:1px solid rgba(0,0,0,.1); padding:10px 14px; border-radius:12px; cursor:pointer}
.good{color:var(--good); font-weight:700}
.bad{color:var(--bad); font-weight:700}
.progress{height:10px; background:#e9edf7; border-radius:999px; overflow:hidden}
.progress > div{height:100%; background:linear-gradient(90deg,#00c853,#ffd54f,#ff5252); width:0%}
.starbar{display:flex; gap:6px; font-size:20px}
.starbar span{filter: drop-shadow(0 2px 0 rgba(0,0,0,.08))}
hr{border:0;border-top:1px solid rgba(0,0,0,.08); margin:14px 0}