* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:#0d1117; color:#c9d1d9; min-height:100vh; }
  a { color:#58a6ff; text-decoration:none; }

  /* Header */
  .header { background:#161b22; padding:12px 24px; border-bottom:1px solid #30363d; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100; }
  .header h1 { font-size:16px; color:#58a6ff; font-weight:600; }
  .header-right { display:flex; align-items:center; gap:16px; font-size:12px; color:#8b949e; }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
  .dot.ok { background:#3fb950; box-shadow:0 0 6px #3fb950; }
  .dot.warn { background:#d29922; }
  .dot.err { background:#f85149; box-shadow:0 0 6px #f85149; }

  /* Banner (observation-mode notice and similar) */
  .banner { display:flex; gap:12px; align-items:flex-start; margin:14px 24px 0; padding:14px 16px; border-radius:8px; border:1px solid; }
  .banner-info { background:#0e2a47; border-color:#1f6feb; color:#c9d1d9; }
  .banner-icon { font-size:18px; line-height:1.2; color:#58a6ff; margin-top:1px; flex-shrink:0; }
  .banner-body { flex:1; }
  .banner-title { font-size:13px; font-weight:600; color:#58a6ff; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
  .banner-text { font-size:13px; color:#8b949e; line-height:1.5; }
  .banner-text code { background:#161b22; border:1px solid #30363d; border-radius:3px; padding:1px 5px; font-size:12px; color:#c9d1d9; }

  /* Overview cards */
  .overview { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; padding:16px 24px; }
  .card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px 16px; }
  .card .label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
  .card .value { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
  .card .sub { font-size:12px; color:#8b949e; margin-top:2px; }
  .green { color:#3fb950; }
  .red { color:#f85149; }
  .blue { color:#58a6ff; }
  .yellow { color:#d29922; }

  /* Sections */
  .section { padding:0 24px 20px; }
  .section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .section-title { font-size:13px; color:#8b949e; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
  .time-btns { display:flex; gap:4px; }
  .time-btn { background:#21262d; color:#8b949e; border:1px solid #30363d; border-radius:4px; padding:3px 10px; font-size:11px; cursor:pointer; }
  .time-btn.active { background:#58a6ff; color:#fff; border-color:#58a6ff; }

  /* Charts */
  .chart-container { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:12px; position:relative; }
  .chart-row { display:grid; grid-template-columns:1fr; gap:0; }
  .equity-chart { height:220px; }
  .drawdown-chart { height:100px; }

  /* Tables */
  table { width:100%; border-collapse:collapse; background:#161b22; border:1px solid #30363d; border-radius:8px; overflow:hidden; font-size:13px; }
  th { background:#21262d; padding:8px 12px; text-align:left; font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:0.3px; font-weight:600; }
  td { padding:8px 12px; border-top:1px solid #21262d; font-family:'SF Mono',Consolas,monospace; font-size:12px; }
  tr:hover { background:#1c2128; }
  .empty-row td { text-align:center; color:#484f58; font-style:italic; font-family:inherit; }

  /* Analytics grid */
  .analytics-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .analytics-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:16px; }
  .analytics-card h3 { font-size:12px; color:#8b949e; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:10px; }
  .bar-chart { height:200px; }

  /* Monthly heatmap */
  .monthly-table { width:100%; border-collapse:collapse; font-size:11px; }
  .monthly-table th, .monthly-table td { padding:4px 6px; text-align:center; border:1px solid #21262d; }
  .monthly-table th { background:#21262d; color:#8b949e; font-weight:600; }
  .monthly-cell { border-radius:3px; color:#fff; font-weight:600; min-width:50px; }

  /* Key stats */
  .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .stat-item { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid #21262d; }
  .stat-label { font-size:12px; color:#8b949e; }
  .stat-value { font-size:12px; font-weight:600; font-family:'SF Mono',Consolas,monospace; }

  /* Risk gauges */
  .risk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .risk-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:14px; text-align:center; }
  .risk-card .label { font-size:11px; color:#8b949e; text-transform:uppercase; margin-bottom:8px; }
  .risk-card .gauge-value { font-size:28px; font-weight:700; }
  .progress-bar { height:6px; background:#21262d; border-radius:3px; margin-top:8px; overflow:hidden; }
  .progress-fill { height:100%; border-radius:3px; transition:width 0.5s; }

  /* Health cards */
  .health-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .health-card { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:12px; }
  .health-card .label { font-size:11px; color:#8b949e; text-transform:uppercase; margin-bottom:4px; }
  .health-card .value { font-size:16px; font-weight:600; }

  /* Filters */
  .filters { display:flex; gap:8px; align-items:center; }
  select { background:#21262d; color:#c9d1d9; border:1px solid #30363d; border-radius:4px; padding:4px 8px; font-size:11px; }

  /* Safe area for notch phones */
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

  /* Scrollable tables on mobile */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }

  /* Pull-to-refresh hint */
  .pull-hint { text-align:center; padding:8px; font-size:11px; color:#484f58; display:none; }

  /* Responsive */
  @media (max-width:1200px) {
    .overview { grid-template-columns:repeat(3,1fr); }
    .analytics-grid { grid-template-columns:1fr; }
    .risk-grid { grid-template-columns:repeat(2,1fr); }
    .health-grid { grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:768px) {
    .overview { grid-template-columns:repeat(2,1fr); gap:8px; padding:12px 16px; }
    .header { flex-direction:column; gap:8px; padding:12px 16px; }
    .section { padding:0 16px 16px; }
    .banner { margin:10px 16px 0; padding:12px 14px; }
    .banner-text { font-size:12px; }
    .card .value { font-size:20px; }
    .card { padding:10px 12px; }
    table { font-size:12px; }
    th, td { padding:6px 8px; white-space:nowrap; }
    .risk-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .health-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .risk-card .gauge-value { font-size:22px; }
  }
  @media (max-width:480px) {
    .overview { grid-template-columns:repeat(2,1fr); }
    .risk-grid { grid-template-columns:repeat(2,1fr); }
    .health-grid { grid-template-columns:repeat(2,1fr); }
    .card .value { font-size:18px; }
    .stats-grid { grid-template-columns:1fr; }
  }