/* ═══════════════════════════════════════════════════════════
           Apple Design System — Responsive Breakpoints
           ═══════════════════════════════════════════════════════════ */

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── 980px: Tablet ── */
        @media (max-width: 980px) {
            .explain-lead,
            .site-footer {
                grid-template-columns: 1fr;
                flex-direction: column;
                align-items: flex-start;
            }
            .explain-grid { grid-template-columns: 1fr; }
            .advanced-insight-grid { grid-template-columns: 1fr; }
            .policy-headline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

            .panel-header,
            .results-header,
            .insight-header,
            .rates-header,
            .status-strip {
                flex-direction: column;
                align-items: flex-start;
            }

            .rates-providers { grid-template-columns: 1fr; }
            .result-item.best { grid-column: auto; }
        }

        /* ── 720px: Large phone / small tablet ── */
        @media (max-width: 720px) {
            body {
                padding:
                    calc(12px + env(safe-area-inset-top))
                    calc(4px + env(safe-area-inset-right))
                    calc(32px + env(safe-area-inset-bottom))
                    calc(4px + env(safe-area-inset-left));
            }

            h1 {
                font-size: 28px;
                color: var(--apple-label);
            }

            .container {
                padding-left: 12px;
                padding-right: 12px;
                padding-top: 12px;
            }

            .subtitle { font-size: 15px; line-height: 1.47; }
            .hero-pills { gap: 6px; }
            .hero-pill { padding: 7px 10px; font-size: 13px; }

            .card,
            .status-strip,
            .result-item,
            .rates-provider,
            .no-results,
            .site-footer {
                padding: 16px;
                border-radius: 12px;
            }

            .currency-row { grid-template-columns: 1fr; }
            .swap-btn { width: 100%; margin-bottom: 0; }

            .policy-headline-grid,
            .policy-grid,
            .explain-grid {
                grid-template-columns: 1fr;
            }

            .download-actions { grid-template-columns: 1fr; }

            .path-header {
                flex-direction: column;
            }

            .result-topline,
            .volatility-copy,
            .advanced-signal-top,
            .policy-card-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .amount-stack { text-align: left; }

            .progress-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .progress-platform {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }
            .progress-pair {
                white-space: normal;
                overflow: visible;
            }

            .status-actions,
            .site-footer-links { width: 100%; }
            .status-actions { display: grid; grid-template-columns: 1fr; }

            .mode-button,
            .export-button,
            .refresh-button,
            .site-link { width: 100%; }
            .site-link { justify-content: flex-start; }

            .policy-impact-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .policy-impact-values {
                min-width: 0;
                text-align: left;
            }

            .notify-mini-btn { width: 100%; }
            .site-footer-links { justify-content: flex-start; }

            .explain-diagram { display: none; }
        }

        /* ── Topbar: compact for narrow phones ── */

        @media (max-width: 520px) {
            .results-topbar {
                padding: 8px 12px;
                gap: 8px;
                flex-wrap: nowrap;
                justify-content: space-between;
                /* Stay fixed on mobile — never go relative */
                position: fixed;
                top: 8px;
                left: 12px;
                right: 12px;
                z-index: 499; /* below sidebar (500) so sidebar overlays header */
            }
            body.sidebar-open .results-topbar { left: 12px !important; }
            /* Profile menu: anchor to viewport on mobile so it never goes offscreen */
            .profile-menu {
                position: fixed;
                top: auto;
                bottom: calc(env(safe-area-inset-bottom) + 80px);
                right: 12px;
                left: 12px;
                min-width: 0;
                border-radius: 16px;
            }
            .results-topbar-left { gap: 6px; flex-shrink: 0; }
            .results-topbar-right { gap: 6px; flex-shrink: 0; }
            .topbar-passes-badge { padding: 3px 6px; font-size: 11px; }
            .topbar-tab-name {
                display: block !important;
                font-size: 15px;
                font-weight: 600;
                color: var(--apple-label);
                white-space: nowrap;
                pointer-events: none;
            }
            .topbar-corridor { display: none; }
            #topbarSearchWrap,
            #topbarDownloadBtn,
            #topbarLiveRatesBtn { display: none !important; }
            #topbarUser { gap: 0; }
            #topbarUserName { display: none; }
            .topbar-new-label { display: none; }
            .topbar-new-search { padding: 0 6px; min-width: 30px; height: 30px; }
            .topbar-new-search svg { width: 15px; height: 15px; }
            .topbar-back-btn { width: 40px; height: 40px; flex-shrink: 0; }
        }

        /* ── 480px: Small phone ── */
        @media (max-width: 480px) {
            body {
                padding:
                    calc(8px + env(safe-area-inset-top))
                    env(safe-area-inset-right)
                    calc(24px + env(safe-area-inset-bottom))
                    env(safe-area-inset-left);
            }

            .container {
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 8px;
            }

            .card,
            .status-strip,
            .result-item,
            .rates-provider,
            .no-results,
            .site-footer,
            .download-panel {
                padding: 12px 14px;
                border-radius: 10px;
            }

            /* Scale down large text for narrow screens */
            .stat-value { font-size: 28px; }
            .score-value { font-size: 24px; }
            .final-amount { font-size: 22px; }
            .policy-headline-card .stat-value { font-size: 20px; }
            .advanced-signal .signal-value { font-size: 15px; }
            .status-value { font-size: 22px; }
            .summary-corridor-heading { font-size: 17px; }

            .insight-tile > div:last-child,
            .econ-tile > div:nth-child(2) { font-size: 17px; }

            /* Ensure single-column on very narrow */
            .policy-headline-grid,
            .advanced-insight-grid,
            .scenario-summary-grid {
                grid-template-columns: 1fr !important;
            }

            .download-actions { grid-template-columns: 1fr; }
            .download-range-grid { grid-template-columns: 1fr; }
            .download-range-grid .range-arrow { display: none; }

            .pred-timing-grid { grid-template-columns: 1fr; }
            .pred-vol-row { grid-template-columns: 42px 1fr 52px; }

            .summary-best-steps .step { font-size: 14px; }
            .adv-paths-section { padding: 12px; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ── Auth overlay ── */
        .auth-overlay {
            position: fixed;
            inset: 0;
            z-index: 600; /* above topbar (500) */
            background: var(--apple-bg);
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: calc(env(safe-area-inset-top, 0px) + 32px) 20px calc(env(safe-area-inset-bottom, 0px) + 48px);
        }
        .auth-overlay.fade-out {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        /* ── Onboarding card ── */
        .onboard-card {
            width: 100%;
            max-width: 460px;
            padding: 0;
            background: none;
        }
        .onboard-card h2 {
            font-family: var(--apple-font);
            font-size: 28px;
            font-weight: 700;
            color: var(--apple-label);
            margin: 0 0 6px;
            letter-spacing: -0.02em;
        }
        .onboard-card .onboard-sub {
            color: var(--apple-label-secondary);
            font-size: 15px;
            line-height: 1.47;
            margin-bottom: 0;
        }

        /* ── Name fields ── */
        .onboard-name-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin: 20px 0 28px;
        }
        .onboard-field label {
            display: block;
            color: var(--apple-label-secondary);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .onboard-field input {
            width: 100%;
            padding: 13px 14px;
            border-radius: 12px;
            border: none;
            background: var(--apple-bg-tertiary);
            color: var(--apple-label);
            font-size: 16px;
            font-family: var(--apple-font);
            outline: none;
            box-sizing: border-box;
        }
        .onboard-field input:focus {
            outline: 2px solid var(--apple-blue);
            outline-offset: -2px;
        }
        .onboard-field input::placeholder { color: var(--apple-label-tertiary); }

        /* ── Role section label ── */
        .onboard-section-label {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--apple-label-secondary);
            margin: 0 0 10px 2px;
        }

        /* ── Role rows ── */
        .onboard-roles {
            display: flex;
            flex-direction: column;
            border-radius: 14px;
            overflow: hidden;
            background: var(--apple-bg-tertiary);
            margin-bottom: 28px;
        }
        .onboard-role {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 16px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            border-bottom: 0.5px solid var(--apple-separator);
            position: relative;
            min-height: 58px;
            box-sizing: border-box;
        }
        .onboard-role:last-child { border-bottom: none; }
        .onboard-role:active { background: var(--apple-separator); }
        .onboard-role.selected { background: rgba(10, 132, 255, 0.1); }
        .role-icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
            width: 30px;
            text-align: center;
        }
        .role-text { flex: 1; min-width: 0; }
        .role-text strong {
            display: block;
            font-size: 15px;
            font-weight: 600;
            color: var(--apple-label);
            margin-bottom: 1px;
        }
        .role-text span {
            font-size: 13px;
            color: var(--apple-label-secondary);
            line-height: 1.35;
        }
        /* Circle selector on right */
        .onboard-role::after {
            content: '';
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1.5px solid var(--apple-separator);
            flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s;
        }
        .onboard-role.selected::after {
            border-color: var(--apple-blue);
            background: var(--apple-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpolyline points='1.5,4.5 4.5,7.5 10.5,1.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px;
        }

        /* ── Platform checkboxes ── */
        .onboard-platforms {
            display: flex;
            flex-direction: column;
            border-radius: 14px;
            overflow: hidden;
            background: var(--apple-bg-tertiary);
            margin-bottom: 32px;
        }
        .platform-check {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            border-bottom: 0.5px solid var(--apple-separator);
        }
        .platform-check:last-child { border-bottom: none; }
        .platform-check:active { background: var(--apple-separator); }
        .platform-check input[type="checkbox"] { display: none; }
        .platform-check-box {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: 1.5px solid var(--apple-separator);
            background: transparent;
            flex-shrink: 0;
            transition: background 0.15s, border-color 0.15s;
        }
        .platform-check input:checked ~ .platform-check-box {
            background: var(--apple-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpolyline points='1.5,4.5 4.5,7.5 10.5,1.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px;
            border-color: var(--apple-blue);
        }
        .platform-check-name {
            flex: 1;
            font-size: 15px;
            color: var(--apple-label);
            font-family: var(--apple-font);
        }
        .platform-status-tag {
            font-size: 12px;
            font-weight: 600;
            padding: 3px 9px;
            border-radius: 20px;
            flex-shrink: 0;
        }
        .platform-status-tag.existing-user {
            background: rgba(48, 209, 88, 0.15);
            color: #30d158;
        }
        .platform-status-tag.new-user {
            background: rgba(10, 132, 255, 0.12);
            color: var(--apple-blue);
        }

        /* ── Continue button ── */
        .onboard-continue {
            width: 100%;
            padding: 16px;
            border-radius: 14px;
            border: none;
            background: var(--apple-blue);
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            font-family: var(--apple-font);
            cursor: pointer;
            letter-spacing: -0.01em;
            -webkit-tap-highlight-color: transparent;
            transition: opacity 0.15s;
        }
        .onboard-continue:active { opacity: 0.8; }
        .onboard-continue:disabled { opacity: 0.3; cursor: default; }

        @keyframes heroEntrance {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }