/* ── Base & Typography ── */
    *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    [x-cloak] { display: none !important; }
    body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
    h1, h2, h3, .font-display { font-family: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; }

    /* ── Premium Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.45); }

    /* ── Report Preview ── */
    .ivana-report-preview { box-shadow: 0 4px 32px rgba(0,0,0,0.3); border-radius: 16px; overflow: hidden; }
    .ivana-report-preview table { border-collapse: collapse; width: 100%; font-size: 11.5px; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
    .ivana-report-preview th { background: #1e1b4b; color: rgba(199, 210, 254, 0.95); padding: 8px 12px; border: none; border-bottom: 1px solid rgba(99,102,241,0.18); white-space: nowrap; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; font-size: 10px; }
    .ivana-report-preview th:first-child { border-radius: 8px 0 0 0; }
    .ivana-report-preview th:last-child { border-radius: 0 8px 0 0; }
    .ivana-report-preview td { padding: 7px 12px; border-bottom: 1px solid rgba(99,102,241,0.08); color: #cbd5e1; }
    .ivana-report-preview tr:hover td { background: rgba(99,102,241,0.04); }
    .ivana-report-preview tr:last-child td { border-bottom: none; }

    /* ── Premium Table ── */
    .premium-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; font-family: 'Inter', sans-serif; }
    .premium-table thead th {
      background: #1e1b4b;
      color: rgba(199, 210, 254, 0.95); padding: 10px 14px; border: none;
      border-bottom: 1px solid rgba(99,102,241,0.18);
      white-space: nowrap; font-weight: 600; letter-spacing: 0.04em;
      text-transform: uppercase; font-size: 10px;
    }
    .premium-table thead th:first-child { border-radius: 10px 0 0 0; }
    .premium-table thead th:last-child { border-radius: 0 10px 0 0; }
    .premium-table tbody td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(99,102,241,0.08);
      color: #cbd5e1; font-size: 12px;
      transition: background 0.15s ease;
    }
    .premium-table tbody tr:hover td { background: rgba(99,102,241,0.06); }
    .premium-table tbody tr:last-child td { border-bottom: none; }
    .premium-table tbody td.td-label { color: #e2e8f0; font-weight: 500; }
    .premium-table tbody td.td-muted { color: rgba(148,163,184,0.65); }
    .premium-table tbody td.td-mono { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-size: 11.5px; }
    .premium-table thead tr.filter-row th {
      background: rgba(5,8,16,0.5); padding: 6px 14px;
      text-transform: none; letter-spacing: normal; font-size: 11px; font-weight: 400;
      border-bottom: 1px solid rgba(99,102,241,0.08);
    }
    .premium-table thead tr.filter-row th:first-child { border-radius: 0; }
    .premium-table thead tr.filter-row th:last-child { border-radius: 0; }

    /* ── Global Table Upgrade — apply premium style to all data tables ── */
    table.w-full:not(.premium-table):not(.no-premium) { border-collapse: separate; border-spacing: 0; font-family: 'Inter', sans-serif; }
    table.w-full:not(.premium-table):not(.no-premium) thead th {
      background: #1e1b4b;
      color: rgba(199, 210, 254, 0.95) !important; padding: 10px 14px; border: none;
      border-bottom: 1px solid rgba(99,102,241,0.18);
      white-space: nowrap; font-weight: 600; letter-spacing: 0.04em;
      text-transform: uppercase; font-size: 10px;
    }
    table.w-full:not(.premium-table):not(.no-premium) thead tr:first-child th:first-child { border-radius: 10px 0 0 0; }
    table.w-full:not(.premium-table):not(.no-premium) thead tr:first-child th:last-child { border-radius: 0 10px 0 0; }
    table.w-full:not(.premium-table):not(.no-premium) tbody td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(99,102,241,0.08);
      color: #cbd5e1;
      transition: background 0.15s ease;
    }
    table.w-full:not(.premium-table):not(.no-premium) tbody tr:hover td { background: rgba(99,102,241,0.06); }
    table.w-full:not(.premium-table):not(.no-premium) tbody tr:last-child td { border-bottom: none; }

    /* ── Chat Bubbles ── */
    .chat-bubble-user { background: linear-gradient(135deg, #3730a3 0%, #4338ca 100%); border-radius: 16px 16px 4px 16px; }
    .chat-bubble-ai   { background: rgba(15,23,42,0.85); border: 1px solid rgba(99,102,241,0.12); border-radius: 16px 16px 16px 4px; backdrop-filter: blur(8px); }

    /* ── Score Ring ── */
    .score-ring { stroke-dasharray: 283; transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }

    /* ── Equal-height grid for home cards ── */
    .home-eq-grid > .mode-card { display: flex; flex-direction: column; }
    .home-eq-grid > .mode-card > .relative.z-10,
    .home-eq-grid > .mode-card > div > .relative.z-10 { display: flex; flex-direction: column; flex: 1; }
    .home-eq-grid > .mode-card > .relative.z-10 > p,
    .home-eq-grid > .mode-card > div > .relative.z-10 > p { flex: 1; }

    /* ── Mode Cards ── */
    @keyframes floatCard {
      0%   { transform: translateY(0px) rotate(0deg); }
      25%  { transform: translateY(-14px) rotate(0.4deg); }
      55%  { transform: translateY(-8px) rotate(-0.3deg); }
      80%  { transform: translateY(-16px) rotate(0.25deg); }
      100% { transform: translateY(0px) rotate(0deg); }
    }
    .mode-card {
      transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
      cursor: pointer; animation: floatCard 6s ease-in-out infinite;
      backdrop-filter: blur(12px);
    }
    .mode-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(99,102,241,0.1); animation-play-state: paused; transform: translateY(-2px); }
    @media (prefers-reduced-motion: reduce) {
      .mode-card { animation: none !important; }
      .animate-pulse-border { animation: none !important; }
    }

    /* ── Premium Nav ── */
    header.premium-nav { position: sticky; top: 0; z-index: 50; }
    header.premium-nav::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; pointer-events: none;
      background: linear-gradient(to right, transparent, rgba(99,102,241,0.5) 20%, rgba(168,85,247,0.35) 50%, rgba(99,102,241,0.5) 80%, transparent);
    }
    .nav-back {
      display: flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 10px;
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(148,163,184,1);
      border: 1px solid rgba(255,255,255,0.08); transition: all 0.25s; white-space: nowrap;
    }
    .nav-back:hover { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(99,102,241,0.3); }
    .nav-select {
      background: rgba(6,9,22,0.92); border: 1px solid rgba(99,102,241,0.22); color: #e2e8f0;
      border-radius: 10px; padding: 6px 14px; font-size: 0.8rem; font-weight: 500; outline: none; cursor: pointer;
      transition: all 0.25s; font-family: 'Inter', sans-serif;
    }
    .nav-select:focus { border-color: rgba(99,102,241,0.52); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
    .nav-signout {
      font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(148,163,184,0.7);
      padding: 5px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07);
      transition: all 0.25s; white-space: nowrap;
    }
    .nav-signout:hover { color: rgba(248,113,113,0.9); background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.2); }

    /* ── Metrics ── */
    .metric-up   { color: #34d399; font-weight: 600; }
    .metric-down { color: #f87171; font-weight: 600; }

    /* ── Period Tabs ── */
    .period-tab.active { background: linear-gradient(135deg, #4338ca, #6d28d9); color: #fff; font-weight: 600; box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
    .period-tab { cursor: pointer; transition: all 0.2s; border-radius: 10px; font-weight: 500; }
    .period-tab:hover:not(.active) { background: rgba(99,102,241,0.1); color: #c7d2fe; }

    /* ── Pulse Border ── */
    @keyframes pulseBorder {
      0%, 100% { border-color: rgba(99,102,241,0.7); box-shadow: 0 0 0 0 rgba(99,102,241,0); }
      50% { border-color: rgba(129,140,248,1); box-shadow: 0 0 16px 4px rgba(99,102,241,0.25); }
    }
    .animate-pulse-border { animation: pulseBorder 2.5s ease-in-out infinite; }

    /* ── Shimmer ── */
    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

    /* ── Utilities ── */
    .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* ── Focus States (global) ── */
    input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
    button:focus-visible { outline: 2px solid rgba(99,102,241,0.5); outline-offset: 2px; }

    /* ── Dropdown option readability (native <option> ignores most CSS but respects color/background) ── */
    select option { color: #1e293b; background: #f8fafc; }

    /* ── Flatpickr Overrides ── */
    .flatpickr-calendar { background: #0a0f1e !important; border: 1px solid rgba(99,102,241,0.3) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important; font-family: 'Inter', sans-serif !important; }
    .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday { background: transparent !important; color: #94a3b8 !important; font-weight: 500 !important; }
    .flatpickr-current-month { color: #e2e8f0 !important; font-size: 0.82rem !important; font-weight: 600 !important; }
    .flatpickr-current-month .numInputWrapper span { border-color: rgba(99,102,241,0.25) !important; }
    .flatpickr-current-month input.cur-year { color: #e2e8f0 !important; }
    .flatpickr-current-month .flatpickr-monthDropdown-months { background: #0a0f1e !important; color: #e2e8f0 !important; }
    .flatpickr-day { color: #94a3b8 !important; border-radius: 8px !important; font-weight: 500 !important; transition: all 0.15s !important; }
    .flatpickr-day:hover { background: rgba(99,102,241,0.2) !important; border-color: transparent !important; color: #fff !important; }
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: linear-gradient(135deg, #4338ca, #6d28d9) !important; border-color: transparent !important; color: #fff !important; font-weight: 600 !important; }
    .flatpickr-day.inRange { background: rgba(99,102,241,0.15) !important; border-color: transparent !important; box-shadow: none !important; color: #c7d2fe !important; }
    .flatpickr-day.today { border-color: rgba(99,102,241,0.5) !important; }
    .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #4b5563 !important; }
    .flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #94a3b8 !important; }
    .flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #fff !important; }
    .flatpickr-input { cursor: pointer !important; }
    .fp-date-input { background: rgba(6,9,22,0.92); border: 1px solid rgba(99,102,241,0.22); color: #e2e8f0; border-radius: 10px; padding: 6px 12px; font-size: 0.75rem; font-weight: 500; outline: none; cursor: pointer; transition: all 0.25s; min-width: 110px; text-align: center; font-family: 'Inter', sans-serif; }
    .fp-date-input:focus { border-color: rgba(99,102,241,0.52); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
    .fp-date-input::placeholder { color: #4b5563; }

    /* ── Premium Glass Panel ── */
    .glass-panel {
      background: rgba(10,15,30,0.75);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(99,102,241,0.1);
      border-radius: 16px;
    }

    /* ── Report Preview Tables — shared dark table reset ── */
    #cr-report-preview table thead th,
    #diy-report-content table thead th {
      background: #1e1b4b !important;
      color: rgba(199, 210, 254, 0.95) !important; padding: 8px 12px !important; border: none !important;
      border-bottom: 1px solid rgba(99,102,241,0.18) !important;
      white-space: nowrap; font-weight: 600 !important; letter-spacing: 0.04em;
      text-transform: uppercase; font-size: 10px !important;
    }
    #cr-report-preview table thead tr:first-child th:first-child,
    #diy-report-content table thead tr:first-child th:first-child { border-radius: 10px 0 0 0; }
    #cr-report-preview table thead tr:first-child th:last-child,
    #diy-report-content table thead tr:first-child th:last-child { border-radius: 0 10px 0 0; }
    #cr-report-preview table tbody td,
    #diy-report-content table tbody td {
      padding: 8px 12px !important;
      border-bottom: 1px solid rgba(99,102,241,0.08) !important;
      color: #cbd5e1 !important; background: transparent !important;
    }
    #cr-report-preview table tbody tr:hover td,
    #diy-report-content table tbody tr:hover td { background: rgba(99,102,241,0.06) !important; }
    #cr-report-preview table tbody tr:last-child td,
    #diy-report-content table tbody tr:last-child td { border-bottom: none !important; }
    #cr-report-preview table,
    #diy-report-content table { border-collapse: separate !important; border-spacing: 0; }
    #diy-report-content table { width: 100%; margin-bottom: 12px; }

    /* Fallback for field-sizing: content (not supported in Safari/Firefox) */
    textarea[style*="field-sizing"] { min-height: 44px; }

    /* ── Responsive ── */
    @media (max-width: 640px) {
      header.premium-nav { padding: 12px 16px; }
      .nav-back, .nav-signout { font-size: 0.65rem; padding: 4px 10px; }
      .nav-select { font-size: 0.72rem; padding: 5px 10px; }
      .mode-card { padding: 20px !important; }
    }

    /* ── Selection Color ── */
    ::selection { background: rgba(99,102,241,0.35); color: #fff; }