* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: #0b1020; color: #f3f5f7; }
.app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: #0f172a; padding: 24px 16px; border-right: 1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; }
.brand { font-weight: 800; letter-spacing: .08em; margin-bottom: 24px; }
.nav-section { color: #93a4bf; font-size: 12px; text-transform: uppercase; margin: 18px 8px 10px; }
.nav-item { width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; color: #d6dbe3; border-radius: 10px; margin-bottom: 6px; }
.nav-item.active-sub { background: #16213d; border-left: 3px solid #4f8cff; }
.nav-item.disabled { opacity: .4; }
.sidebar-footer { margin-top:auto; padding:12px 8px; border-top:1px solid rgba(255,255,255,.08); }
.main { padding: 28px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap:16px; }
.topbar h1 { margin: 0 0 6px; font-size: 28px; }
.top-actions { text-align:right; }
.muted { color: #93a4bf; margin: 0; }
.badge { display:inline-block; padding: 8px 12px; border-radius: 999px; background: #16301f; color: #83f2a3; font-weight: 700; text-transform: uppercase; font-size: 12px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.card, .panel { background: #121a2e; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px; min-width: 0; }
.card-label { color: #93a4bf; font-size: 12px; margin-bottom: 8px; }
.card-value { font-size: 22px; font-weight: 800; line-height: 1.15; word-break: break-word; }
.tabs { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.tab { border:1px solid rgba(255,255,255,.08); background:#121a2e; color:#d6dbe3; padding:10px 14px; border-radius:12px; cursor:pointer; }
.tab.active { background:#1a2950; border-color:#4f8cff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.grid.two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel h2 { margin-top: 0; font-size: 18px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; white-space: nowrap; }
.table th { color: #93a4bf; font-size: 12px; text-transform: uppercase; text-align: left; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.kv div { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; color: #b9c8df; word-break: break-all; white-space: normal; }
.small { font-size: 12px; color: #93a4bf; }
.positive { color: #83f2a3; }
.mini-chart { display:flex; align-items:flex-end; gap:6px; height:180px; padding-top:12px; }
.bar { flex:1; background:linear-gradient(180deg,#4f8cff,#83f2a3); border-radius:8px 8px 0 0; min-width:18px; opacity:.9; }
.log-card { margin-bottom:10px; }
@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.two { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 14px; }
  .topbar { flex-direction: column; align-items: stretch; margin-bottom: 16px; }
  .topbar h1 { font-size: 24px; }
  .top-actions { text-align: left; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card, .panel { padding: 12px; border-radius: 14px; }
  .card-value { font-size: 18px; }
  .tabs { position: sticky; top: 0; z-index: 10; background: #0b1020; padding-bottom: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: 9px 12px; font-size: 14px; }
  .kv { grid-template-columns: 1fr; }
  .table { min-width: 640px; }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 22px; }
  .muted { font-size: 14px; }
  .table { min-width: 560px; }
}