* { box-sizing: border-box; }
:root {
  --bg:#0b1020; --panel:#131a2f; --panel-2:#19223b; --text:#e9eefb; --muted:#99a6c7;
  --border:rgba(255,255,255,0.08); --accent:#6ea8fe; --good:#74d36a; --bad:#ff8b8b; --neutral:#c6d0ea;
}
html, body { margin:0; padding:0; background:linear-gradient(180deg,#0b1020 0%,#11172b 100%); color:var(--text); font-family:Inter,Arial,Helvetica,sans-serif; }
body { min-height:100vh; }
.app-shell { max-width:1820px; margin:0 auto; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.eyebrow { margin:0 0 6px; color:var(--accent); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:0; font-size:34px; line-height:1.1; }
.subtitle { margin:10px 0 0; color:var(--muted); font-size:15px; }
.status-wrap { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.badge { display:inline-flex; align-items:center; min-height:38px; padding:10px 14px; border-radius:12px; background:var(--panel); border:1px solid var(--border); color:var(--muted); font-size:14px; }
.badge-strong { color:var(--text); }
.toolbar { display:flex; gap:12px; align-items:end; margin-bottom:18px; padding:16px; border-radius:18px; background:rgba(19,26,47,.9); border:1px solid var(--border); }
.field { min-width:320px; flex:1 1 420px; }
.field label { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:600; }
.primary-btn { height:48px; border:0; border-radius:12px; padding:0 18px; background:var(--accent); color:#08111f; font-weight:700; cursor:pointer; }
.message { margin-bottom:18px; padding:14px 16px; border-radius:14px; background:rgba(207,139,46,.14); border:1px solid rgba(207,139,46,.4); color:#ffd7a0; }
.hidden { display:none; }
.cluster-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cluster-card { background:rgba(19,26,47,.94); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.cluster-header { margin-bottom:14px; }
.cluster-header h2 { margin:0; font-size:18px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.metric-card { min-height:124px; border-radius:16px; background:var(--panel-2); border:1px solid var(--border); padding:14px; display:flex; flex-direction:column; justify-content:space-between; }
.metric-label { margin:0; color:var(--muted); font-size:13px; line-height:1.35; }
.metric-value { margin:10px 0 0; font-size:28px; font-weight:800; line-height:1.1; word-break:break-word; }
.metric-card--ctr { border-color: gold; box-shadow: 0 0 0 2px gold; }
.metric-compare { margin:8px 0 0; font-size:13px; line-height:1.35; }
.metric-compare.good { color:var(--good); }
.metric-compare.bad { color:var(--bad); }
.metric-compare.neutral { color:var(--neutral); }
.ts-control,.ts-dropdown { background:#0f1528 !important; border:1px solid rgba(255,255,255,.08) !important; color:#e9eefb !important; border-radius:12px !important; }
.ts-control { min-height:48px !important; padding:10px 14px !important; box-shadow:none !important; }
.ts-dropdown .option,.ts-dropdown .active { color:#e9eefb !important; background:#19223b !important; }
.ts-wrapper.single .ts-control input,.ts-control .item,.ts-dropdown .create { color:#e9eefb !important; }
@media (max-width: 1280px) { .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 980px) { .topbar,.toolbar { flex-direction:column; align-items:stretch; } .cluster-grid { grid-template-columns:1fr; } .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .app-shell { padding:16px; } h1 { font-size:28px; } .metric-grid { grid-template-columns:1fr; } .metric-value { font-size:24px; } }