:root {
      --bg-deep: #131722;
      --bg-primary: #1e222d;
      --bg-secondary: #1e222d;
      --bg-card: #1e222d;
      --bg-elevated: #2a2e39;
      --bg-tertiary: #363a45;
      --text-primary: #d1d4dc;
      --text-secondary: #868993;
      --text-muted: #55585d;
      --border: #2a2e39;
      --border-hover: #363a45;
      --green: #089981;
      --green-dim: #056b52;
      --red: #f23645;
      --red-dim: #b52a35;
      --accent: #2962ff;
      --accent-hover: #1e50d8;
      --sidebar-width: 220px;
      --topbar-height: 52px;
      --radius-sm: 2px;
      --radius: 4px;
      --radius-lg: 6px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: var(--bg-deep);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 13px;
      line-height: 1.5;
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-deep); }
    ::-webkit-scrollbar-thumb { background: #363a45; border-radius: 0; border: 2px solid var(--bg-deep); }
    ::-webkit-scrollbar-thumb:hover { background: #4a4e59; }

    /* Utility */
    .green { color: var(--green); }
    .red { color: var(--red); }
    .positive { color: var(--green); }
    .negative { color: var(--red); }

    .text-gradient {
      background: linear-gradient(135deg, var(--accent), #0ea5e9);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hidden { display: none !important; }
    .text-center { text-align: center; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-2 { gap: 8px; }
    .gap-4 { gap: 16px; }
    .mb-4 { margin-bottom: 16px; }
    .mt-4 { margin-top: 16px; }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .fade-in { animation: fadeIn 0.25s ease-out forwards; }

    /* ===================== MESSAGES ===================== */
    .message {
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 0.8125rem;
      font-weight: 500;
      margin-bottom: 12px;
      display: none;
      align-items: center;
      gap: 8px;
      border: 1px solid transparent;
    }

    .message.success {
      background: rgba(8, 153, 129, 0.08);
      color: var(--green);
      border-color: rgba(8, 153, 129, 0.15);
    }

    .message.error {
      background: rgba(242, 54, 69, 0.08);
      color: var(--red);
      border-color: rgba(242, 54, 69, 0.15);
    }

    .message.warning {
      background: rgba(245, 158, 11, 0.08);
      color: #f59e0b;
      border-color: rgba(245, 158, 11, 0.15);
    }

    /* ===================== BADGES ===================== */
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 1px 6px;
      border-radius: 3px;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      vertical-align: middle;
    }

    .badge-free {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.15);
    }

    .badge-pro {
      background: rgba(41, 98, 255, 0.1);
      color: var(--accent);
      border: 1px solid rgba(41, 98, 255, 0.15);
    }

    /* ===================== EMPTY STATE ===================== */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 24px;
      text-align: center;
      color: var(--text-muted);
    }

    .empty-state-icon {
      font-size: 3rem;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-state-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .empty-state-desc {
      font-size: 0.8125rem;
      color: var(--text-muted);
      max-width: 300px;
    }

    /* ===================== PRINT ===================== */
    @media print {
      body { background: white; color: black; }
      .sidebar, .topbar, .no-print, .homepage, .modal-overlay { display: none !important; }
      .main { margin-left: 0; }
      .content { padding: 0; }
      .page { display: none !important; }
      #reportPage { display: block !important; }
      .widget, .stat-tile {
        background: white;
        border: 1px solid #ddd;
        break-inside: avoid;
      }
      .stat-value.positive { color: #089981 !important; }
      .stat-value.negative { color: #f23645 !important; }
    }

    /* ===================== MOBILE ===================== */
    @media (max-width: 1024px) {
      .insights-grid { grid-template-columns: 1fr; }
      .playbooks-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
      .sidebar { transform: translateX(-100%); }
      .sidebar.open { transform: translateX(0); }
      .main { margin-left: 0; }
      .mobile-toggle { display: block; }
      .onboarding-checklist { left: 16px; right: 16px; bottom: 16px; width: auto; }
      .calendar-heatmap { gap: 2px; }
      .calendar-day { font-size: 0.625rem; }
      .risk-grid { grid-template-columns: 1fr; }
      .hp-pricing-grid { grid-template-columns: 1fr; }
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
    }