/* ── Reset & Base ─────────────────────────────────────── */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #08090b;
            --surface: #111318;
            --surface2: #181c24;
            --border: #222832;
            --text: #eceef4;
            --text-dim: #5c6480;
            --primary: #0fd9a0;
            --primary-glow: rgba(15,217,160,0.14);
            --primary-dim: #0ab87f;
            --gold: #fbbf24;
            --gold-glow: rgba(251,191,36,0.12);
            --red: #f43f5e;
            --red-glow: rgba(244,63,94,0.10);
            --blue: #38bdf8;
            --blue-glow: rgba(56,189,248,0.13);
            --radius: 14px;
            --radius-sm: 10px;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100dvh;
            padding: 0 0 100px 0;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Header ───────────────────────────────────────────── */
        .header {
            background: linear-gradient(180deg, #0e1117 0%, var(--bg) 100%);
            border-bottom: 1px solid rgba(15,217,160,0.12);
            padding: 18px 20px 14px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .logo-img {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            object-fit: cover;
            object-position: center 18%;
            flex-shrink: 0;
            box-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        .logo-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1;
        }
        .header h1 {
            font-size: 22px;
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1;
        }
        .header h1 .lot { color: var(--text); }
        .header h1 .bounty { color: var(--primary); }
        .header .tagline {
            font-size: 10px;
            color: var(--text-dim);
            margin-top: 3px;
            font-weight: 500;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        /* ── Cross-Tool Transfer ─────────────────────────────── */
        .btn-transfer {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 11px 16px;
            background: none;
            color: var(--text-dim);
            border: 1px dashed var(--border);
            border-radius: var(--radius);
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            text-align: center;
            transition: all 0.18s;
        }
        .btn-transfer:hover {
            color: var(--primary);
            border-color: var(--primary);
            border-style: solid;
            background: var(--primary-glow);
        }
        .transfer-notice {
            display: none;
            margin-top: 10px;
            padding: 10px 14px;
            background: var(--primary-glow);
            border: 1px solid rgba(15,217,160,0.3);
            border-radius: var(--radius-sm);
            font-size: 13px;
            color: var(--primary);
            font-weight: 500;
        }
        .transfer-notice.visible { display: block; }

        /* ── Tool Navigation ─────────────────────────────────── */
        .tool-nav {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-top: 12px;
            padding: 0 4px;
        }
        .tool-nav-link {
            flex: 1;
            max-width: 200px;
            padding: 8px 16px;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            text-align: center;
            text-decoration: none;
            color: var(--text-dim);
            background: var(--surface2);
            border: 1px solid var(--border);
            transition: all 0.15s;
        }
        .tool-nav-link:hover {
            color: var(--text);
            border-color: rgba(15,217,160,0.4);
        }
        .tool-nav-link.active {
            color: var(--primary);
            background: var(--primary-glow);
            border-color: var(--primary);
        }

        /* ── Container ────────────────────────────────────────── */
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 16px;
        }

        /* ── Section label ────────────────────────────────────── */
        .section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 10px;
            padding-left: 2px;
        }

        /* ── Card Entry ───────────────────────────────────────── */
        .card-entry {
            background: var(--surface);
            border: 1px solid var(--border);
            border-top: 1px solid rgba(15,217,160,0.15);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 10px;
            position: relative;
            animation: slideIn 0.2s ease-out;
            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
        }
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .card-entry-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .card-number {
            font-size: 11px;
            font-weight: 700;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .remove-btn {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 20px;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
            transition: color 0.15s;
        }
        .remove-btn:hover { color: var(--red); }

        .field-row {
            display: grid;
            gap: 8px;
            margin-bottom: 8px;
        }
        .field-row.name-row {
            grid-template-columns: 1fr;
        }
        .field-row.details-row {
            grid-template-columns: 60px 1fr 1fr 90px;
        }

        label {
            display: block;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        input, select {
            width: 100%;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px 10px;
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            outline: none;
            transition: border-color 0.15s, box-shadow 0.15s;
            -webkit-appearance: none;
        }
        input:focus, select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }
        input::placeholder {
            color: var(--text-dim);
            opacity: 0.5;
        }
        select {
            cursor: pointer;
        }

        /* ── Card Name Autocomplete ───────────────────────────── */
        .autocomplete-wrap {
            position: relative;
        }
        /* Push input text left so it doesn't run under the × button */
        .autocomplete-wrap input { padding-right: 32px; }
        /* Clear (×) button — sits inside the input on the right */
        .ac-clear-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 18px;
            line-height: 1;
            padding: 2px 4px;
            cursor: pointer;
            border-radius: 4px;
            transition: color 0.15s;
            z-index: 10;
        }
        .ac-clear-btn:hover { color: var(--text); }
        .autocomplete-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--surface2);
            border: 1px solid var(--primary);
            border-radius: var(--radius-sm);
            box-shadow: 0 8px 24px rgba(0,0,0,0.55);
            z-index: 200;
            overflow: hidden;
            max-height: 260px;
            overflow-y: auto;
        }
        .ac-item {
            padding: 10px 12px;
            font-size: 13px;
            font-weight: 500;
            color: var(--text);
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            transition: background 0.1s, color 0.1s;
            user-select: none;
        }
        .ac-item:last-child { border-bottom: none; }
        .ac-item:hover,
        .ac-item.ac-item-active {
            background: var(--primary-glow);
            color: var(--primary);
        }

        /* ── Buttons ──────────────────────────────────────────── */
        .btn-row {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }
        .btn {
            flex: 1;
            padding: 14px 16px;
            border: none;
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
        }
        .btn-secondary {
            background: var(--surface2);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .btn-secondary:hover {
            background: var(--border);
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 2px 12px var(--primary-glow);
        }
        .btn-primary:hover {
            background: #12f0b0;
        }
        .btn-primary:disabled {
            background: var(--surface2);
            color: var(--text-dim);
            cursor: not-allowed;
            box-shadow: none;
        }

        /* ── Results Panel ────────────────────────────────────── */
        .results {
            display: none;
            margin-top: 24px;
        }
        .results.visible { display: block; }

        .results-header {
            text-align: center;
            margin-bottom: 20px;
        }

        /* Big deal score circle */
        .score-circle {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            border: 3px solid;
            position: relative;
        }
        .score-circle .score-num {
            font-size: 52px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -2px;
        }
        .score-circle .score-label {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            opacity: 0.7;
            margin-top: 3px;
        }
        .score-bad {
            border-color: var(--red);
            color: var(--red);
            background: var(--red-glow);
            box-shadow: 0 0 30px var(--red-glow);
        }
        .score-mid {
            border-color: var(--gold);
            color: var(--gold);
            background: var(--gold-glow);
            box-shadow: 0 0 30px var(--gold-glow);
        }
        .score-good {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--primary-glow);
            box-shadow: 0 0 30px var(--primary-glow);
        }

        /* Score reveal pop animation */
        @keyframes scorePop {
            0%   { transform: scale(0.55); opacity: 0; }
            60%  { transform: scale(1.12); opacity: 1; }
            80%  { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
        @keyframes scoreGlow {
            0%   { box-shadow: 0 0 0px transparent; }
            50%  { box-shadow: 0 0 48px var(--score-glow-color, var(--primary-glow)); }
            100% { box-shadow: 0 0 30px var(--score-glow-color, var(--primary-glow)); }
        }
        .score-circle.pop {
            animation: scorePop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards,
                       scoreGlow 0.6s ease-out forwards;
        }

        .score-tier {
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 6px;
        }
        .verdict {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-dim);
            text-align: center;
        }

        /* Metric cards */
        .metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 16px;
        }
        .metric-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
        }
        .metric-card.full-width {
            grid-column: 1 / -1;
        }
        .metric-card.centered {
            grid-column: 1 / -1;
            max-width: calc(50% - 5px);
            justify-self: center;
        }
        .metric-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
        }
        .metric-value {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        .metric-sub {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 3px;
        }
        .positive { color: var(--primary); }
        .negative { color: var(--red); }
        .neutral  { color: var(--gold); }

        /* Anchor cards list */
        .anchor-list {
            list-style: none;
            margin-top: 8px;
        }
        .anchor-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
            font-size: 13px;
        }
        .anchor-list li:last-child { border-bottom: none; }
        .anchor-name { flex: 1; margin-right: 8px; }
        .anchor-pct {
            font-weight: 700;
            white-space: nowrap;
        }
        .anchor-risk-tag {
            font-size: 9px;
            font-weight: 700;
            padding: 3px 7px;
            border-radius: 5px;
            margin-left: 6px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .risk-low  { background: var(--primary-glow); color: var(--primary); }
        .risk-med  { background: var(--gold-glow); color: var(--gold); }
        .risk-high { background: var(--red-glow); color: var(--red); }

        /* Liquidity bar */
        .liquidity-bar {
            display: flex;
            gap: 4px;
            margin-top: 8px;
        }
        .liquidity-pip {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: var(--surface2);
        }
        .liquidity-pip.filled {
            background: var(--blue);
            box-shadow: 0 0 6px var(--blue-glow);
        }

        /* Loading spinner */
        .spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }
        .spinner.visible { display: block; }
        .spinner::after {
            content: '';
            display: inline-block;
            width: 28px;
            height: 28px;
            border: 3px solid var(--border);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Error message */
        .error-msg {
            background: var(--red-glow);
            border: 1px solid var(--red);
            color: var(--red);
            border-radius: var(--radius);
            padding: 12px 14px;
            font-size: 13px;
            margin-top: 16px;
            display: none;
        }
        .error-msg.visible { display: block; }

        /* ── Cost Entry Panel ──────────────────────────────────── */
        .lot-price-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 14px;
        }
        .lot-price-row {
            display: flex;
            gap: 8px;
        }
        .lot-price-field {
            flex: 1;
        }
        .lot-price-hint {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 8px;
            line-height: 1.4;
        }
        .lot-price-hint .distributed-note {
            color: var(--primary);
            font-weight: 600;
        }

        /* Cost field locked state */
        .card-entry input[data-field="cost"].distributed {
            border-color: var(--primary-dim);
            background: rgba(16,185,129,0.06);
        }

        /* ── Cost Mode Pill Toggle ─────────────────────────────── */
        .cost-mode-pills {
            display: flex;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 3px;
            gap: 3px;
            margin-bottom: 14px;
        }
        .cost-pill {
            flex: 1;
            padding: 8px 10px;
            border: none;
            border-radius: 7px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            background: transparent;
            color: var(--text-dim);
            text-align: center;
            white-space: nowrap;
        }
        .cost-pill.active {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 1px 8px var(--primary-glow);
        }
        .cost-pill:not(.active):hover {
            background: var(--border);
            color: var(--text);
        }

        /* ── Delta Adjustment Panel ───────────────────────────── */
        .delta-panel {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
            margin-bottom: 14px;
        }
        .delta-toggle-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .delta-toggle-row label {
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            text-transform: none;
            letter-spacing: 0;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .delta-toggle-row input[type="checkbox"] {
            width: 16px;
            height: 16px;
            padding: 0;
            accent-color: var(--primary);
            cursor: pointer;
        }
        .delta-info-tag {
            font-size: 9px;
            font-weight: 700;
            color: var(--blue);
            background: var(--blue-glow);
            padding: 2px 7px;
            border-radius: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .delta-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .delta-controls.disabled {
            opacity: 0.35;
            pointer-events: none;
        }
        .delta-slider-group {
            grid-column: 1 / -1;
        }
        .delta-slider-group label {
            margin-bottom: 6px;
        }
        .delta-slider-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .delta-slider-row input[type="range"] {
            flex: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            background: var(--surface2);
            border: none;
            border-radius: 3px;
            outline: none;
            padding: 0;
        }
        .delta-slider-row input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--blue);
            cursor: pointer;
            border: 2px solid var(--surface);
            box-shadow: 0 0 6px var(--blue-glow);
        }
        .delta-slider-val {
            font-size: 13px;
            font-weight: 700;
            color: var(--blue);
            min-width: 36px;
            text-align: right;
        }
        .delta-hint {
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 10px;
            line-height: 1.4;
        }

        /* Days to sell input in card row — hidden until delta is enabled */
        .days-field-wrapper {
            display: none;
        }
        .days-field-wrapper input {
            text-align: center;
        }

        /* ── Delta result badge ──────────────────────────────── */
        .delta-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 6px;
            margin-bottom: 2px;
        }
        .delta-original {
            font-size: 13px;
            color: var(--text-dim);
            font-weight: 500;
        }
        .delta-original s {
            text-decoration: line-through;
        }
        .delta-arrow {
            font-size: 11px;
            color: var(--text-dim);
        }
        .delta-tag {
            font-size: 11px;
            font-weight: 700;
            color: var(--blue);
            background: var(--blue-glow);
            padding: 3px 8px;
            border-radius: 6px;
        }

        /* ── Score Explanation Panel ────────────────────────────── */
        .why-score-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: none;
            border: 1px solid var(--border);
            color: var(--text-dim);
            font-size: 11px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            padding: 5px 10px;
            border-radius: 20px;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.15s;
        }
        .why-score-btn:hover {
            border-color: var(--primary-dim);
            color: var(--text);
        }
        .why-score-btn .chevron {
            font-size: 9px;
            transition: transform 0.2s;
        }
        .why-score-btn.open .chevron {
            transform: rotate(180deg);
        }
        .score-explanation {
            display: none;
            margin-top: 12px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
            text-align: left;
        }
        .score-explanation.visible {
            display: block;
            animation: slideIn 0.2s ease-out;
        }
        .explanation-summary {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
            line-height: 1.5;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }
        .explanation-drivers {
            list-style: none;
        }
        .explanation-drivers li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            padding: 5px 0;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text);
        }
        .driver-signal {
            flex-shrink: 0;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-top: 4px;
        }
        .driver-signal.positive { background: var(--primary); box-shadow: 0 0 6px var(--primary-glow); }
        .driver-signal.neutral  { background: var(--gold); box-shadow: 0 0 6px var(--gold-glow); }
        .driver-signal.negative { background: var(--red); box-shadow: 0 0 6px var(--red-glow); }

        /* ── Save Analysis Button ────────────────────────────── */
        .btn-save-analysis {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 14px 16px;
            margin-top: 16px;
            background: var(--surface);
            color: var(--primary);
            border: 1px solid var(--primary-dim);
            border-radius: var(--radius);
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-save-analysis:hover {
            background: var(--primary-glow);
            border-color: var(--primary);
        }
        .btn-save-analysis:active {
            transform: scale(0.98);
        }
        .btn-save-analysis.saved {
            background: var(--primary-glow);
            color: var(--primary);
            border-color: var(--primary);
            cursor: default;
            pointer-events: none;
        }

        /* ── Beta Banner ─────────────────────────────────────── */
        .beta-banner {
            background: var(--gold-glow);
            border-bottom: 1px solid rgba(251,191,36,0.3);
            color: var(--gold);
            text-align: center;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.2px;
        }
        .beta-banner strong { font-weight: 700; }

        /* ── About Panel ─────────────────────────────────────── */
        .about-toggle {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 13px 14px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            cursor: pointer;
            margin-bottom: 10px;
            transition: border-color 0.15s, background 0.15s;
        }
        .about-toggle:hover {
            border-color: var(--primary-dim);
            background: var(--surface2);
        }
        .about-chevron {
            font-size: 9px;
            color: var(--text-dim);
            transition: transform 0.2s;
        }
        .about-chevron.open { transform: rotate(180deg); }
        .about-panel {
            display: none;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            margin-bottom: 14px;
            animation: slideIn 0.2s ease-out;
        }
        .about-panel.visible { display: block; }
        .about-intro {
            font-size: 13px;
            line-height: 1.6;
            color: var(--text);
            margin-bottom: 8px;
        }
        .about-sub {
            font-size: 12px;
            color: var(--text-dim);
            line-height: 1.5;
            margin-bottom: 14px;
        }
        .about-divider {
            height: 1px;
            background: var(--border);
            margin-bottom: 14px;
        }
        .about-fees-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-dim);
            margin-bottom: 8px;
        }
        .about-fees-body {
            font-size: 12px;
            color: var(--text);
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .about-fees-list {
            list-style: none;
            margin-bottom: 12px;
        }
        .about-fees-list li {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 6px 0;
            border-bottom: 1px solid var(--border);
            gap: 8px;
        }
        .about-fees-list li:last-child { border-bottom: none; }
        .about-fee-label {
            font-size: 12px;
            color: var(--text-dim);
            flex-shrink: 0;
        }
        .about-fee-val {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
            text-align: right;
        }
        .about-fees-note {
            font-size: 11px;
            color: var(--text-dim);
            line-height: 1.5;
            font-style: italic;
        }

        /* ── Community Panel (email signup + feedback) ────────── */
        .community-panel {
            margin-top: 28px;
            padding-bottom: 8px;
        }
        .community-form {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px;
        }
        .community-form-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 10px;
        }
        .community-form-row {
            display: flex;
            gap: 8px;
        }
        .community-input {
            flex: 1;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            outline: none;
            transition: border-color 0.15s;
            min-width: 0;
        }
        .community-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }
        .community-input::placeholder { color: var(--text-dim); opacity: 0.6; }
        .community-textarea {
            width: 100%;
            background: var(--surface2);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 10px 12px;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            color: var(--text);
            outline: none;
            resize: vertical;
            transition: border-color 0.15s;
            box-sizing: border-box;
        }
        .community-textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }
        .community-textarea::placeholder { color: var(--text-dim); opacity: 0.6; }
        .community-btn {
            padding: 10px 16px;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: var(--radius-sm);
            font-size: 13px;
            font-weight: 700;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            white-space: nowrap;
            transition: background 0.15s;
            flex-shrink: 0;
        }
        .community-btn:hover { background: #12f0b0; }
        .community-btn:disabled { opacity: 0.6; cursor: not-allowed; }

        .form-status {
            margin-top: 8px;
            font-size: 12px;
            font-weight: 600;
            min-height: 18px;
        }
        .form-status.success { color: var(--primary); }
        .form-status.error   { color: var(--red); }

        /* ── Saved Analyses Panel ─────────────────────────────── */
        .saved-panel {
            margin-top: 28px;
        }
        .saved-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .saved-header .section-label {
            margin-bottom: 0;
        }
        .saved-count {
            font-size: 11px;
            color: var(--text-dim);
            font-weight: 500;
        }
        .saved-empty {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 24px 14px;
            text-align: center;
            color: var(--text-dim);
            font-size: 13px;
        }
        .saved-item {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 12px 14px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.15s;
            animation: slideIn 0.2s ease-out;
        }
        .saved-item:hover {
            border-color: var(--primary-dim);
            background: var(--surface2);
        }
        .saved-item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .saved-item-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            flex: 1;
            margin-right: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .saved-item-score {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            font-size: 14px;
            font-weight: 800;
            border: 2px solid;
            flex-shrink: 0;
        }
        .saved-item-meta {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: var(--text-dim);
        }
        .saved-item-meta span {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .saved-item-actions {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border);
        }
        .saved-btn {
            flex: 1;
            padding: 7px 10px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-size: 11px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            text-align: center;
        }
        .saved-btn-load {
            background: var(--primary-glow);
            color: var(--primary);
            border-color: var(--primary-dim);
        }
        .saved-btn-load:hover {
            background: var(--primary);
            color: #fff;
        }
        .saved-btn-delete {
            background: var(--red-glow);
            color: var(--red);
            border-color: rgba(244,63,94,0.3);
            flex: 0 0 auto;
            padding: 7px 12px;
        }
        .saved-btn-delete:hover {
            background: var(--red);
            color: #fff;
        }
        .clear-all-btn {
            background: none;
            border: none;
            color: var(--text-dim);
            font-size: 11px;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            padding: 2px 6px;
            transition: color 0.15s;
        }
        .clear-all-btn:hover {
            color: var(--red);
        }

        /* ── CSP: utility classes — eliminates all inline style="" attrs ── */
        /* Removing these would re-introduce unsafe-inline requirement.     */
        .is-hidden           { display: none; }
        .optional-tag        { font-size: 9px; font-weight: 600; color: var(--text-dim); text-transform: none; letter-spacing: 0; opacity: 0.7; }
        .section-label-row   { display: flex; align-items: center; gap: 8px; }
        .section-label-mt    { margin-top: 4px; }
        .section-label-mb    { margin-bottom: 14px; }
        .label-inline        { display: flex; align-items: center; gap: 6px; }
        .delta-hint-body     { font-size: 10px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; opacity: 0.7; }
        .metric-values-row   { display: flex; gap: 12px; align-items: baseline; }
        .metric-value-blue   { color: var(--blue); }
        .metric-value-blue-sm{ font-size: 18px; color: var(--blue); }
        .metric-sub-mt       { margin-top: 6px; }
        .community-form-mt   { margin-top: 14px; }
        .community-form-row-mt { margin-top: 8px; }
        .footer-link         { color: inherit; text-decoration: none; }
        .about-note-mt       { margin-top: 6px; }

        /* ── Footer ───────────────────────────────────────────── */
        .footer {
            text-align: center;
            padding: 32px 16px 16px;
            font-size: 11px;
            color: var(--text-dim);
            opacity: 0.5;
        }