/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* Header */
header {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 48px;
}
.logo-mark {
  width: 52px; height: 52px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 900;
  color: #0d0f14; border-radius: 2px; flex-shrink: 0;
}
h1 { font-family: var(--font-serif); font-size: clamp(28px,4vw,42px); font-weight: 700; line-height: 1.1; }
h1 span { color: var(--accent); }
.subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono); letter-spacing: .05em; }

/* Main 2-col grid */
.layout { display: grid; grid-template-columns: 340px 1fr; gap: 0 24px; align-items: start; }

/* Card base */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }

/* ── Responsive ── */
@media (max-width: 800px) {
  .container           { padding: 24px 14px 60px; }
  header                { gap: 14px; margin-bottom: 28px; }
  .logo-mark            { width: 42px; height: 42px; font-size: 20px; }
  .layout               { grid-template-columns: 1fr; gap: 20px 0; }
  .layout .card         { position: static !important; top: auto !important; }
  .summary-grid        { grid-template-columns: 1fr 1fr !important; }
  .cmp-charts-grid     { grid-template-columns: 1fr !important; }
  .cmp-metrics         { grid-template-columns: 1fr 1fr !important; }
  .panel-topbar        { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 480px) {
  .container           { padding: 18px 10px 48px; }
  h1                    { font-size: 24px; }
  .subtitle             { font-size: 11px; }
  .summary-grid        { grid-template-columns: 1fr !important; }
  .stat-card            { padding: 16px; }
}