:root {
      --bg-main: #020617;
      --bg-soft: #0b1220;
      --bg-panel: rgba(15, 23, 42, 0.88);
      --bg-panel-2: rgba(15, 23, 42, 0.68);
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.14);
      --text-main: #f8fafc;
      --text-soft: #cbd5e1;
      --text-muted: #94a3b8;

      --smart: #3b82f6;
      --smart-dark: #1e3a8a;
      --scale: #8b5cf6;
      --scale-dark: #4c1d95;
      --stat: #f59e0b;
      --stat-dark: #b45309;
      --eco: #22c55e;
      --eco-dark: #166534;
      --resil: #ea580c;
      --resil-dark: #9a3412;
      --raptor: #ef4444;

      --success: #86efac;
      --warning: #fde68a;
      --danger: #fecaca;
      --info: #bfdbfe;

      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 14px;

      --shadow-lg: 0 20px 60px rgba(2, 6, 23, 0.55);
      --shadow-md: 0 14px 40px rgba(2, 6, 23, 0.35);

      --max-width: 1280px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text-main);
      background:
        radial-gradient(circle at 15% 20%, rgba(59,130,246,0.16), transparent 28%),
        radial-gradient(circle at 85% 12%, rgba(139,92,246,0.10), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(34,197,94,0.06), transparent 28%),
        linear-gradient(180deg, #020617 0%, #071224 45%, #020617 100%);
      line-height: 1.5;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .dashboard-page {
      width: 100%;
      padding: 28px 16px 70px;
    }

    .dashboard-container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .dashboard-hero {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      padding: 30px;
      background:
        linear-gradient(135deg, rgba(15,23,42,0.96), rgba(10,15,28,0.92)),
        rgba(15,23,42,0.92);
      box-shadow: var(--shadow-lg);
    }

    .dashboard-hero::before,
    .dashboard-hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .dashboard-hero::before {
      width: 340px;
      height: 340px;
      top: -140px;
      right: -100px;
      background: radial-gradient(circle, rgba(59,130,246,0.20), transparent 68%);
    }

    .dashboard-hero::after {
      width: 260px;
      height: 260px;
      bottom: -120px;
      left: -70px;
      background: radial-gradient(circle, rgba(139,92,246,0.16), transparent 68%);
    }

    .hero-top {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 30px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      margin-bottom: 14px;
      border-radius: 999px;
      border: 1px solid rgba(191,219,254,0.24);
      background: rgba(59,130,246,0.10);
      color: #bfdbfe;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .hero-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #60a5fa;
      box-shadow: 0 0 12px #60a5fa;
    }

    .hero-title {
      font-size: clamp(28px, 4vw, 52px);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 14px;
      max-width: 760px;
    }

    .hero-title span {
      color: #bfdbfe;
    }

    .hero-text {
      max-width: 760px;
      font-size: 16px;
      color: var(--text-muted);
    }

    .hero-score {
      min-width: 260px;
      max-width: 320px;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.04);
      box-shadow: var(--shadow-md);
    }

    .hero-score-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .hero-score-value {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .hero-score-note {
      font-size: 14px;
      color: var(--text-soft);
    }

    .hero-main-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.35fr 0.95fr;
      gap: 24px;
      align-items: stretch;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .card {
      background: var(--bg-panel);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }

    .kpi-card {
      min-height: 138px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)),
        var(--bg-panel);
    }

    .kpi-label {
      font-size: 12px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 10px;
    }

    .kpi-value {
      font-size: 34px;
      line-height: 1;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .kpi-footer {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 10px;
      font-size: 13px;
      color: var(--text-soft);
    }

    .delta-up {
      color: var(--success);
      font-weight: 700;
    }

    .delta-down {
      color: #fca5a5;
      font-weight: 700;
    }

    .orbital-card {
      min-height: 360px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background:
        radial-gradient(circle at center, rgba(59,130,246,0.08), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        var(--bg-panel);
    }

    .orbital-zone {
      position: relative;
      width: 100%;
      max-width: 430px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
    }

    .orbit,
    .orbit-2,
    .orbit-3 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1px dashed rgba(255,255,255,0.13);
    }

    .orbit { width: 44%; height: 44%; }
    .orbit-2 { width: 68%; height: 68%; }
    .orbit-3 { width: 92%; height: 92%; }

    .center-node,
    .orbit-node {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-radius: 999px;
      padding: 14px;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 12px 30px rgba(2,6,23,0.45);
      color: #fff;
    }

    .center-node {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 128px;
      height: 128px;
      font-size: 14px;
      line-height: 1.2;
      background: radial-gradient(circle, rgba(59,130,246,0.24), rgba(30,58,138,0.78));
    }

    .orbit-node {
      width: 96px;
      height: 96px;
      font-size: 12px;
      line-height: 1.2;
    }

    .node-smart {
      top: 11%;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--smart), var(--smart-dark));
    }

    .node-scale {
      top: 33%;
      right: 5%;
      background: linear-gradient(135deg, var(--scale), var(--scale-dark));
    }

    .node-stat {
      bottom: 12%;
      right: 17%;
      background: linear-gradient(135deg, var(--stat), var(--stat-dark));
    }

    .node-eco {
      bottom: 6%;
      left: 18%;
      background: linear-gradient(135deg, var(--eco), var(--eco-dark));
    }

    .node-resil {
      top: 37%;
      left: 5%;
      background: linear-gradient(135deg, var(--resil), var(--resil-dark));
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
      margin-top: 20px;
    }

    .col-12 { grid-column: span 12; }
    .col-8 { grid-column: span 8; }
    .col-6 { grid-column: span 6; }
    .col-4 { grid-column: span 4; }

    .section-card {
      padding: 22px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .section-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }

    .section-subtitle {
      font-size: 14px;
      color: var(--text-muted);
      max-width: 620px;
    }

    .small-tag {
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.02);
      color: var(--text-soft);
      font-size: 12px;
    }

    .flow-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .flow-step {
      position: relative;
      min-height: 118px;
      padding: 18px 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    }

    .flow-step strong {
      display: block;
      font-size: 15px;
      margin-bottom: 10px;
    }

    .flow-step b {
      display: block;
      font-size: 30px;
      margin: 6px 0 2px;
    }

    .flow-step span {
      display: block;
      font-size: 13px;
      color: var(--text-muted);
    }

    .flow-arrow {
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: #0f172a;
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #93c5fd;
      font-size: 13px;
    }

    .metric-list {
      display: grid;
      gap: 12px;
    }

    .metric-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 12px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
    }

    .metric-row:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .metric-name {
      font-weight: 700;
      margin-bottom: 4px;
    }

    .metric-desc {
      font-size: 13px;
      color: var(--text-muted);
    }

    .metric-value {
      font-size: 20px;
      font-weight: 800;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid transparent;
    }

    .pill-blue {
      background: rgba(59,130,246,0.12);
      color: #bfdbfe;
      border-color: rgba(59,130,246,0.2);
    }

    .pill-green {
      background: rgba(34,197,94,0.12);
      color: #bbf7d0;
      border-color: rgba(34,197,94,0.2);
    }

    .pill-orange {
      background: rgba(245,158,11,0.12);
      color: #fde68a;
      border-color: rgba(245,158,11,0.2);
    }

    .pill-red {
      background: rgba(239,68,68,0.12);
      color: #fecaca;
      border-color: rgba(239,68,68,0.2);
    }

    .alert-stack {
      display: grid;
      gap: 14px;
    }

    .alert-card {
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    }

    .alert-signal {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--text-soft);
    }

    .alert-signal::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: currentColor;
    }

    .signal-warning { color: var(--warning); }
    .signal-info { color: var(--info); }
    .signal-danger { color: var(--danger); }

    .alert-title {
      display: block;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .alert-text {
      font-size: 14px;
      color: var(--text-muted);
    }

    .dashboard-note {
      margin-top: 18px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px dashed rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.02);
      color: var(--text-muted);
      font-size: 14px;
    }

    @media (max-width: 1120px) {
      .hero-main-grid {
        grid-template-columns: 1fr;
      }

      .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .col-8,
      .col-6,
      .col-4 {
        grid-column: span 12;
      }

      .flow-grid {
        grid-template-columns: 1fr;
      }

      .flow-arrow {
        display: none;
      }
    }

    @media (max-width: 720px) {
      .dashboard-page {
        padding: 18px 12px 42px;
      }

      .dashboard-hero {
        padding: 22px;
        border-radius: 24px;
      }

      .hero-score {
        width: 100%;
        max-width: 100%;
      }

      .hero-text {
        font-size: 15px;
      }

      .kpi-grid {
        grid-template-columns: 1fr;
      }

      .section-card {
        padding: 18px;
      }

      .orbital-card {
        min-height: 320px;
      }

      .center-node {
        width: 110px;
        height: 110px;
        font-size: 12px;
      }

      .orbit-node {
        width: 82px;
        height: 82px;
        font-size: 11px;
      }

      .metric-row {
        grid-template-columns: 1fr;
      }
    }
    
    /* =========================
       FOOTER
       ========================= */
    .footer {
      margin-top: 50px;
      background: #010814;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 54px 0 22px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.9fr 0.9fr;
      gap: 26px;
    }

    .footer-brand h2 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    .footer-brand p {
      color: var(--text-soft);
      max-width: 480px;
      font-size: 15px;
    }

    .footer-col h3 {
      font-size: 15px;
      margin-bottom: 14px;
      color: #ffffff;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: var(--text-soft);
      font-size: 14px;
      transition: 0.2s ease;
    }

    .footer-links a:hover {
      color: #ffffff;
    }

    .footer-bottom {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.08);
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }