/* profile-page.css — moved out of profile.html's first inline <style> on 2026-10-05,
   unchanged, so it can be cached (served immutable via ?v=). Bump the ?v= in
   profile.html on any edit: node frontend/scripts/bump-cache-version.js profile-page.css */
        /* CRITICAL SPACING FIXES ONLY */
        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            position: relative;
            background: var(--bg-color);
            color: var(--text-color);
            padding-top: 0;
        }

        /* HEADER CONTAINER - FIXED AT TOP */
        #mysentimap-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: var(--bg-color);
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        /* Ensure custom element is properly sized */
        mysentimap-header {
            display: block;
            width: 100%;
        }

        /* SPACER DIV - THE KEY FIX */
        #header-spacer {
            width: 100%;
            height: var(--msm-header-h, 116px);
            flex-shrink: 0;
        }

        /* MAIN PROFILE CONTAINER */
        .profile-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 20px 40px;
            display: flex;
            gap: 30px;
            position: relative;
            z-index: 1;
            min-height: calc(100vh - 140px);
        }

        /* SIDEBAR - STICKY WITH PRECISE OFFSET */
        .profile-sidebar {
            flex: 0 0 300px;
            position: sticky;
            top: 140px;
            align-self: flex-start;
            max-height: calc(100vh - 160px);
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
            z-index: 2;
        }
        .profile-sidebar::-webkit-scrollbar { width: 4px; }
        .profile-sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
        .profile-sidebar::-webkit-scrollbar-track { background: transparent; }

        /* MAIN CONTENT AREA */
        .profile-main {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        /* PROFILE CARD */
        .profile-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 22px;
            margin-bottom: 16px;
            text-align: center;
        }

        /* AVATAR */
        .profile-avatar-large {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            position: relative;
        }

        .avatar-initials {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            font-weight: 700;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .avatar-edit {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 32px;
            height: 32px;
            background: var(--primary-accent);
            border: 2px solid var(--card-bg);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .avatar-edit:hover {
            background: var(--secondary-accent);
            transform: scale(1.1);
        }

        .profile-name {
            color: var(--text-color);
            font-size: 1.5rem;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .profile-title {
            color: var(--secondary-accent);
            margin-bottom: 15px;
            font-size: 0.95rem;
            font-weight: 600;
        }

        .profile-bio {
            color: var(--text-color);
            margin-bottom: 20px;
            line-height: 1.5;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .profile-stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            padding: 15px 0;
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .profile-stat {
            text-align: center;
            padding: 0 10px;
        }

        .profile-stat .stat-value {
            color: var(--text-color);
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
            margin-bottom: 5px;
        }

        .profile-stat .stat-label {
            color: var(--secondary-accent);
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .profile-meta p {
            color: var(--text-color);
            margin: 8px 0;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            opacity: 0.8;
        }

        .profile-meta i {
            color: var(--primary-accent);
            width: 16px;
            opacity: 0.9;
        }

        .profile-quick-links {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 16px 18px;
        }

        .profile-quick-links h3 {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            opacity: 0.45;
            margin-bottom: 10px;
        }

        .quick-link {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
            text-decoration: none;
            padding: 9px 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.88rem;
            font-weight: 500;
            transition: color 0.15s ease;
        }

        .quick-link:last-child { border-bottom: none; }

        .quick-link:hover {
            color: var(--primary-accent);
        }

        .quick-link i {
            width: 18px;
            text-align: center;
            font-size: 1rem;
            color: var(--primary-accent);
            opacity: 0.75;
        }

        /* ── Tab bar — lighter pill style ──────────────────────────── */
        /* ── Skills grid ─────────────────────────────────────────────── */
        .sk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
                   flex-wrap:wrap; margin-bottom:22px; }
        .sk-total { font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em; }
        .sk-total-lab { font-size:12px; opacity:.6; margin-top:4px; }
        .sk-total-lab span { color:var(--primary-accent); font-weight:700; }
        .sk-note { font-size:12px; opacity:.6; max-width:340px; text-align:right; }
        .sk-h { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
                opacity:.55; margin:26px 0 4px; }
        .sk-sub { font-size:12px; opacity:.55; margin:0 0 12px; }
        .sk-grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
        .sk-card { border:1px solid var(--border-color); border-radius:10px; padding:12px 14px;
                   background:var(--card-bg); }
        .sk-card.dim { opacity:.45; }
        .sk-card.max { border-color:var(--primary-accent); }
        .sk-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
        .sk-name { font-size:13px; font-weight:600; flex:1; min-width:0;
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .sk-lvl { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
        .sk-bar { height:5px; border-radius:3px; background:var(--border-color); overflow:hidden; }
        .sk-fill { height:100%; background:var(--primary-accent); border-radius:3px;
                   transition:width var(--dur-slow, 400ms) ease; }
        .sk-meta { display:flex; justify-content:space-between; gap:8px;
                   font-size:10px; opacity:.55; margin-top:6px; font-variant-numeric:tabular-nums; }
        .sk-rank { color:var(--primary-accent); font-weight:700; }
        .sk-claim { margin-top:10px; width:100%; padding:7px 10px; font-size:11px; font-weight:700;
                    letter-spacing:.04em; border-radius:7px; cursor:pointer;
                    border:1px solid var(--primary-accent);
                    background:rgba(var(--primary-accent-rgb), .12); color:var(--primary-accent); }
        .sk-claim:hover:not(:disabled) { background:rgba(var(--primary-accent-rgb), .22); }
        .sk-claim:disabled { opacity:.6; cursor:default; }
        /* Disclosure. The header becomes a real <button> rather than a clickable
           div so it is keyboard reachable and announces its expanded state —
           a div with an onclick is invisible to anyone not using a mouse. */
        .sk-toggle { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:8px;
                     background:none; border:0; padding:0; cursor:pointer; color:inherit;
                     font:inherit; text-align:left; }
        .sk-toggle:focus-visible { outline:2px solid var(--primary-accent); outline-offset:3px; border-radius:6px; }
        .sk-chev { font-size:11px; opacity:.5; transition:transform var(--dur-fast, 160ms) ease; }
        .sk-toggle[aria-expanded="true"] .sk-chev { transform:rotate(90deg); }
        .sk-ladder { margin-top:10px; border-top:1px solid var(--border-color); padding-top:8px;
                     display:flex; flex-direction:column; gap:5px; }
        .sk-rung { display:flex; align-items:center; gap:8px; font-size:11px; }
        .sk-rung-lvl { font-variant-numeric:tabular-nums; font-weight:700; opacity:.5;
                       min-width:22px; text-align:right; }
        .sk-rung-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .sk-rung-state { font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; opacity:.7; }
        /* Three states, distinguished by more than colour — the word carries the
           meaning on its own for anyone who cannot separate the hues. */
        .sk-rung.done  .sk-rung-label { opacity:.65; }
        .sk-rung.done  .sk-rung-state { color:var(--primary-accent); }
        .sk-rung.ready .sk-rung-label { font-weight:700; }
        .sk-rung.ready .sk-rung-state { color:var(--primary-accent); }
        .sk-rung.lock  { opacity:.42; }
        .profile-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
            padding: 4px;
            background: var(--card-bg);
            border-radius: 10px;
            border: 1px solid var(--border-color);
            flex-wrap: wrap;
        }

        .profile-tab {
            flex: 1;
            min-width: 0;
            padding: 8px 10px;
            background: transparent;
            border: none;
            border-radius: 7px;
            color: var(--text-color);
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, opacity 0.15s;
            font-size: 0.8rem;
            text-align: center;
            opacity: 0.5;
            white-space: nowrap;
        }

        .profile-tab:hover {
            opacity: 0.85;
            background: rgba(255,255,255,0.04);
        }

        .profile-tab.active {
            background: rgba(200,121,65,0.12);
            color: var(--primary-accent);
            opacity: 1;
            box-shadow: inset 0 0 0 1px rgba(200,121,65,0.25);
        }

        /* UPDATED: Enhanced Insights Section */
        .insights-section {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 22px;
        }

        .insights-section h3 {
            color: var(--text-color);
            margin-bottom: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.5;
            padding: 0;
            border: none;
        }

        /* Predictive Analytics Dashboard */
        .predictive-analytics {
            padding: 0 0 20px 0;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .predictive-analytics h4 {
            color: var(--text-color);
            margin-bottom: 16px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.5;
            padding: 0;
            border: none;
        }

        .prediction-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 18px;
        }

        .prediction-metric {
            text-align: center;
            padding: 14px 8px;
            border-right: 1px solid var(--border-color);
        }

        .prediction-metric:last-child { border-right: none; }

        .prediction-metric .metric-value {
            color: var(--text-color);
            font-size: 1.4rem;
            font-weight: 800;
            margin-bottom: 3px;
            display: block;
        }

        .prediction-metric .metric-label {
            color: var(--secondary-accent);
            font-size: 0.8rem;
            font-weight: 600;
        }

        .prediction-metric.highlight {
            background: rgba(var(--success), 0.1);
            border-color: var(--success);
        }

        .prediction-metric.highlight .metric-value {
            color: var(--success);
        }

        /* Tracked Statistics */
        .tracked-stats {
            margin-bottom: 30px;
        }

        .tracked-stats h4 {
            color: var(--text-color);
            margin-bottom: 12px;
            font-size: 0.95rem;
            font-weight: 700;
            padding-left: 10px;
            border-left: 3px solid var(--primary-accent);
        }

        .stats-grid {
            display: flex;
            flex-direction: column;
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.88rem;
        }

        .stat-item:last-child { border-bottom: none; }

        .stat-label {
            color: var(--text-color);
            opacity: 0.9;
        }

        .stat-value {
            color: var(--text-color);
            font-weight: 600;
        }

        .stat-value.positive {
            color: var(--success);
        }

        .stat-value.negative {
            color: var(--danger);
        }

        /* Quarterly Report Cards */
        .quarterly-reports {
            margin-bottom: 30px;
        }

        .quarterly-reports h4 {
            color: var(--text-color);
            margin-bottom: 12px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.5;
            padding: 0;
            border: none;
        }

        .report-cards {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .report-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .report-card:hover {
            border-color: var(--primary-accent);
            box-shadow: inset 2px 0 0 var(--primary-accent);
        }

        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .report-period {
            color: var(--text-color);
            font-weight: 700;
            font-size: 1.1rem;
        }

        .report-date {
            color: var(--secondary-accent);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .report-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .report-metric {
            text-align: center;
            padding: 10px;
            background: rgba(var(--primary-accent-rgb), 0.05);
            border-radius: 6px;
        }

        .report-metric .metric-label {
            color: var(--text-color);
            font-size: 0.8rem;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        .report-metric .metric-value {
            color: var(--text-color);
            font-weight: 700;
            font-size: 1rem;
        }

        .report-metric .metric-value.rating-excellent {
            color: var(--success);
        }

        .report-metric .metric-value.rating-good {
            color: #0ea5e9;
        }

        .report-metric .metric-value.rating-average {
            color: var(--warning);
        }

        .report-metric .metric-value.rating-poor {
            color: var(--danger);
        }

        .price-projections {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        .price-projections h5 {
            color: var(--text-color);
            margin-bottom: 10px;
            font-size: 1rem;
            font-weight: 700;
        }

        .projection-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding: 8px 0;
        }

        .projection-symbol {
            color: var(--text-color);
            font-weight: 600;
            font-size: 0.9rem;
        }

        .projection-details {
            text-align: right;
        }

        .projection-target {
            color: var(--text-color);
            font-weight: 700;
            font-size: 0.95rem;
        }

        .projection-accuracy {
            font-size: 0.8rem;
            font-weight: 600;
        }

        .projection-accuracy.high {
            color: var(--success);
        }

        .projection-accuracy.medium {
            color: var(--warning);
        }

        .projection-accuracy.low {
            color: var(--danger);
        }

        /* In-depth Breakdown */
        .breakdown-analysis {
            padding: 18px 0 0 0;
            margin-top: 18px;
            border-top: 1px solid var(--border-color);
        }

        .breakdown-analysis h4 {
            color: var(--text-color);
            margin-bottom: 12px;
            font-size: 0.95rem;
            font-weight: 700;
            padding-left: 10px;
            border-left: 3px solid var(--primary-accent);
        }

        .breakdown-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .breakdown-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .breakdown-symbol {
            color: var(--text-color);
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .breakdown-symbol .sentiment {
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .breakdown-symbol .sentiment.bullish {
            background: rgba(var(--success), 0.1);
            color: var(--success);
        }

        .breakdown-symbol .sentiment.bearish {
            background: rgba(var(--danger), 0.1);
            color: var(--danger);
        }

        .breakdown-symbol .sentiment.neutral {
            background: rgba(148,163,184,0.12);
            color: #94a3b8;
        }

        .breakdown-analysis p {
            color: var(--text-color);
            line-height: 1.5;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* Following Section Styles */
        .following-section {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 22px;
        }

        .following-section h3 {
            color: var(--text-color);
            margin-bottom: 18px;
            font-size: 1rem;
            font-weight: 700;
            padding-left: 10px;
            border-left: 3px solid var(--primary-accent);
        }

        /* Card skins in the Following feed — per-author, driven by the feed
           API's user.card_skin, not the viewer's own equipped skin. Matches
           the treatment used in sentiment.html's (unmounted) feed variant. */
        .msm-feed-item.msm-skin-gold {
            border-left: 3px solid #d4a843 !important;
            padding-left: 8px !important;
            box-shadow: inset 0 0 14px rgba(212,168,67,.07);
        }
        .msm-feed-item.msm-skin-neon {
            border-left: 3px solid #22d3ee !important;
            padding-left: 8px !important;
            box-shadow: inset 0 0 14px rgba(34,211,238,.06);
        }
        .msm-feed-item.msm-skin-holographic {
            border-left: 3px solid transparent !important;
            padding-left: 8px !important;
            border-image: linear-gradient(180deg, #f0abfc, #818cf8, #34d399, #fbbf24) 1;
            animation: msm-holo-shimmer 3s linear infinite;
        }
        @keyframes msm-holo-shimmer {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.72; }
        }

        .following-grid {
            display: flex;
            flex-direction: column;
        }

        .following-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-color);
            transition: color 0.15s ease;
        }

        .following-item:last-child { border-bottom: none; }

        .following-item:hover .following-name { color: var(--primary-accent); }

        .following-avatar {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 1rem;
        }

        .following-name {
            color: var(--text-color);
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 2px;
            transition: color 0.15s ease;
        }

        .following-title {
            color: var(--secondary-accent);
            font-size: 0.78rem;
            opacity: 0.85;
        }

        .following-action {
            background: transparent;
            color: var(--primary-accent);
            border: 1px solid var(--primary-accent);
            padding: 5px 12px;
            border-radius: 5px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
            margin-left: auto;
            white-space: nowrap;
        }

        .following-action:hover {
            background: var(--primary-accent);
            color: white;
        }

        /* Tab content styling */
        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* RESPONSIVE DESIGN */
        @media (max-width: 1100px) {
            .profile-container {
                max-width: 900px;
            }

            .profile-sidebar {
                flex: 0 0 280px;
            }
        }

        @media (max-width: 992px) {
            .profile-container {
                flex-direction: column;
            }

            .profile-sidebar {
                flex: none;
                width: 100%;
                position: static;
                margin-bottom: 30px;
            }

            .profile-stats {
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            .profile-tabs {
                overflow-x: auto;
                padding: 10px;
            }

            .profile-tab {
                min-width: 140px;
                white-space: nowrap;
            }

            .prediction-metrics {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .following-grid {
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .profile-container {
                padding: 60px 15px 30px;
            }

            .profile-card,
            .profile-quick-links,
            .insights-section,
            .following-section {
                padding: 20px;
            }

            .profile-tabs {
                flex-direction: column;
            }

            .profile-tab {
                width: 100%;
                margin-bottom: 8px;
                min-height: 44px;   /* stacked tabs measured 30px tall on a phone: below a thumb (2026-10-15) */
            }

            .profile-tab:last-child {
                margin-bottom: 0;
            }

            .prediction-metrics {
                grid-template-columns: 1fr;
            }

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

            .report-metrics {
                grid-template-columns: repeat(2, 1fr);
            }

        }

        @media (max-width: 480px) {
            .profile-container {
                padding: 50px 10px 20px;
            }

            .profile-card,
            .profile-quick-links,
            .insights-section,
            .following-section {
                padding: 15px;
                border-radius: 6px;
            }

            .profile-avatar-large {
                width: 80px;
                height: 80px;
            }

            .avatar-initials {
                width: 80px;
                height: 80px;
                font-size: 1.5rem;
            }

            .profile-name {
                font-size: 1.3rem;
            }

            .profile-stats {
                flex-direction: column;
                gap: 15px;
                padding: 20px 0;
            }

            .profile-stat {
                padding: 10px 0;
            }

            .insights-section h3,
            .following-section h3 {
                font-size: 1.2rem;
                margin-bottom: 20px;
            }

            .report-metrics {
                grid-template-columns: 1fr;
            }

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

        /* Platform Footer / Disclaimer */
        .platform-footer {
            max-width: 1200px;
            margin: 30px auto 0;
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }

        .disclaimer-banner {
            background: rgba(var(--primary-accent-rgb), 0.06);
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--warning, #f59e0b);
            border-radius: 8px;
            padding: 16px 20px;
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .disclaimer-banner i {
            color: #f59e0b;
            margin-top: 2px;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .disclaimer-banner p {
            color: var(--text-color);
            font-size: 0.82rem;
            line-height: 1.55;
            margin: 0;
            opacity: 0.9;
        }

        .footer-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-links a {
            color: var(--secondary-accent);
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--primary-accent);
            text-decoration: underline;
        }

        .footer-links span {
            color: var(--border-color);
            font-size: 0.8rem;
        }

        /* TOUCH TARGETS — footer links
           ------------------------------------------------------------------
           Terms, Privacy and the rest render 13-15px tall: a compliance link
           nobody can reliably hit. Same technique as header-integration.css —
           a background-less ::after, no click shield, the tap still lands on
           the anchor.

           row-gap goes to 32px so that when the row wraps, two expanded areas
           meet exactly and never overlap: 16px down from the upper link plus
           16px up from the lower one is the whole 32px gap. Measured on a
           390px phone, where profile.html wraps to two rows 20px apart — at
           20px the expansions would have overlapped by 12px and a tap between
           the rows could have hit the wrong link.

           NOT put in a shared stylesheet on purpose. index.html has its own
           .footer-links: a 15-item COLUMN with a 9px gap, where this inset
           would make neighbouring hit areas overlap by 23px — worse than the
           small target it replaces. Giving that column 44px targets means a
           footer ~240px taller, which is a design decision, not a fix. */
        @media (pointer: coarse) {
            .footer-links { row-gap: 32px; }
            .footer-links a { position: relative; }
            .footer-links a::after {
                content: '';
                position: absolute;
                inset: -16px 0;
                z-index: 0;
            }
        }

        .footer-copy {
            text-align: center;
            color: var(--text-color);
            font-size: 0.78rem;
            opacity: 0.5;
            margin-top: 10px;
        }

        /* ── STAT CARDS (backend-connected) ─────────────── */
        .profile-stat-cards {
            display: grid;
            /* minmax(0, 1fr), not 1fr. A 1fr track carries an automatic
               min-content floor, so when four cards plus their padding and
               dividers cannot fit a 320px phone the TRACKS grow instead of the
               text wrapping — and the whole document went 23px wide, taking the
               header, the consent banner and the login overlay with it.
               Measured on an iPhone SE: hiding this one element took the
               overflow to zero. minmax(0, ...) lets the track shrink. */
            /* minmax(0, 1fr), not 1fr. A 1fr track carries an automatic
               min-content floor, so when four cards plus their padding and
               dividers cannot fit a 320px phone the TRACKS grow instead of the
               text wrapping — and the whole document went 33px wide, taking the
               header, the consent banner and the login overlay with it.
               Measured on an iPhone SE: hiding this one element took the
               overflow to zero. minmax(0, ...) lets the track shrink. */
            grid-template-columns: repeat(4, minmax(0, 1fr));
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 22px;
        }

        .stat-card-live {
            padding: 16px 10px;
            text-align: center;
            border-right: 1px solid var(--border-color);
        }

        .stat-card-live:last-child { border-right: none; }

        /* TWO COLUMNS ON A SMALL PHONE.
           minmax(0, 1fr) stops the grid pushing the document sideways, but it
           cannot make nine digits fit: at 320px each of four cards is 67px
           wide, while "1,234,567" — a plausible Total Points for a long-running
           account, since it is pts.toLocaleString() — needs about 145px at the
           1.7rem value size, so the number spilled over its own card and the
           divider. Shrinking the type is not the answer; the labels are already
           9px. Two columns give each card ~134px and it fits. The last-child
           border reset is per-row here, so it is re-applied on even columns. */
        @media (max-width: 380px) {
            .profile-stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .stat-card-live:nth-child(2n) { border-right: none; }
            .stat-card-live:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }
        }

        /* TWO COLUMNS ON A SMALL PHONE.
           minmax(0, 1fr) above stopped the grid pushing the document sideways,
           but it cannot make nine digits fit: at 320px each of four cards is
           67px wide, while "1,234,567" at the 1.7rem value size needs about
           145px, so the number spilled over its own card and the divider.
           Shrinking the type is not the answer — the labels are already 9px.
           Two columns give each card ~140px and the value fits. The last-child
           border reset is per-row here, so it is re-applied on even columns. */


        /* ── Skeleton shimmer for stat cards while data loads ── */
        @keyframes msm-shimmer {
            0%   { background-position: -400px 0; }
            100% { background-position:  400px 0; }
        }
        .scl-value .loading-dot {
            display: inline-block;
            width: 56px;
            height: 22px;
            border: none;
            border-radius: 6px;
            background: linear-gradient(
                90deg,
                var(--border-color, #334155) 25%,
                rgba(255,255,255,0.06) 50%,
                var(--border-color, #334155) 75%
            );
            background-size: 400px 100%;
            animation: msm-shimmer 1.4s ease-in-out infinite;
            vertical-align: middle;
        }

        .stat-card-live .scl-value {
            font-size: 1.7rem;
            font-weight: 800;
            color: var(--text-color);
            display: block;
            margin-bottom: 4px;
            min-height: 2rem;
        }

        .stat-card-live .scl-label {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--secondary-accent);
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .stat-card-live .scl-sub {
            font-size: 0.7rem;
            color: var(--text-color);
            opacity: 0.5;
            margin-top: 4px;
            display: block;
        }

        .loading-dot {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-top-color: var(--primary-accent);
            border-radius: 50%;
            animation: spin 0.7s linear infinite;
            vertical-align: middle;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ── RANK TIER PROGRESS CARD ────────────────────── */
        .qualification-card {
            padding: 14px 16px;
            margin-bottom: 18px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--card-bg);
        }
        .qual-tier-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .qual-tier-icon {
            width: 36px; height: 36px;
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .qual-tier-name {
            font-size: 13px;
            font-weight: 700;
            line-height: 1.2;
        }
        .qual-tier-pts {
            font-size: 11px;
            opacity: 0.5;
            margin-top: 2px;
        }
        .qual-bar {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .qual-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.6s ease;
        }
        .qual-bar-labels {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            opacity: 0.5;
        }
        .qualified-badge-banner {
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 18px;
        }

        /* ── PERFORMANCE STAT CARDS ─────────────────────── */
        .perf-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
            margin-bottom: 22px;
        }

        .perf-card {
            border-left: 3px solid var(--border-color);
            padding: 0 0 0 14px;
            transition: border-left-color 0.2s;
        }

        .perf-card:hover { border-left-color: var(--primary-accent); }

        .perf-card-title {
            color: var(--text-color);
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .perf-card-title i {
            color: var(--primary-accent);
        }

        .perf-row {
            display: grid;
            grid-template-columns: 1fr 56px 44px;
            align-items: center;
            padding: 7px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            font-size: 0.86rem;
        }

        .perf-row:last-child {
            border-bottom: none;
        }

        .perf-row .pl {
            color: var(--text-color);
            opacity: 0.8;
        }

        .perf-row .pv {
            font-weight: 700;
            text-align: right;
        }

        .perf-row .pc {
            text-align: right;
            font-size: 11px;
            opacity: 0.6;
        }

        .boldness-info {
            position: relative;
            display: inline-flex;
            align-items: center;
            cursor: default;
            opacity: 0.45;
            font-size: 13px;
            vertical-align: middle;
            margin-left: 5px;
            transition: opacity 0.15s;
        }

        .boldness-info:hover,
        .boldness-info:focus { opacity: 1; outline: none; }

        .boldness-tooltip {
            display: none;
            position: fixed;
            background: #1a2236;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px;
            padding: 10px 13px;
            font-size: 11px;
            font-weight: 400;
            line-height: 1.75;
            white-space: nowrap;
            color: #e2e8f0;
            z-index: 9999;
            pointer-events: none;
            box-shadow: 0 6px 20px rgba(0,0,0,0.5);
        }

        .perf-empty {
            text-align: center;
            padding: 24px 12px;
            color: var(--text-color);
            opacity: 0.5;
            font-size: 0.85rem;
        }

        /* ── ACHIEVEMENTS MINI GRID ─────────────────────── */
        .achievements-mini-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 10px;
            margin-bottom: 22px;
        }

        /* An <a>, not a div — the cards read as tappable and previously did
           nothing when tapped. display:block and the colour reset keep them
           looking identical while making them a real link. */
        .ach-card {
            display: block;
            color: inherit;
            text-decoration: none;
            border-top: 3px solid var(--border-color);
            padding: 12px 8px 8px;
            text-align: center;
            transition: border-top-color 0.2s;
            cursor: pointer;
        }

        .ach-card:hover { border-top-color: var(--primary-accent); }
        /* Visible keyboard focus. Without this the card is reachable by Tab and
           gives no indication of where you are. */
        .ach-card:focus-visible {
            outline: 2px solid var(--primary-accent);
            outline-offset: 2px;
            border-radius: 4px;
        }

        .ach-icon {
            font-size: 1.6rem;
            margin-bottom: 6px;
        }

        .ach-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-color);
        }

        .ach-desc {
            font-size: 0.68rem;
            color: var(--secondary-accent);
            margin-top: 3px;
        }

        /* ── PREDICTION HISTORY TABLE ────────────────────── */
        .history-filters {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 16px;
            align-items: center;
        }

        .history-filters select {
            padding: 8px 12px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 7px;
            color: var(--text-color);
            font-size: 0.85rem;
            cursor: pointer;
        }

        .filter-btn {
            padding: 6px 12px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-color);
            font-size: 0.83rem;
            cursor: pointer;
            transition: color 0.15s ease, border-bottom-color 0.15s ease;
            font-weight: 500;
            opacity: 0.6;
        }

        .filter-btn:hover { opacity: 0.9; color: var(--primary-accent); }

        .filter-btn.active {
            color: var(--primary-accent);
            border-bottom-color: var(--primary-accent);
            opacity: 1;
            font-weight: 700;
        }

        .filter-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }

        .prediction-history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .prediction-history-table th {
            background: var(--card-bg);
            color: var(--text-color);
            font-weight: 700;
            padding: 11px 10px;
            text-align: left;
            border-bottom: 2px solid var(--border-color);
            white-space: nowrap;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .prediction-history-table td {
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
            opacity: 0.9;
        }

        .prediction-history-table tr:hover td {
            background: rgba(255, 255, 255, 0.03);
        }

        /* Numeric columns (Prediction, Actual, Accuracy, Points) read better
           right-aligned — lines up decimal points/magnitudes for scanning down
           the column, standard practice for financial-style tables. Text
           columns (Date, Stock, Period, Status, Source) stay left-aligned. */
        .prediction-history-table th:nth-child(3),
        .prediction-history-table th:nth-child(4),
        .prediction-history-table th:nth-child(5),
        .prediction-history-table th:nth-child(6),
        .prediction-history-table td:nth-child(3),
        .prediction-history-table td:nth-child(4),
        .prediction-history-table td:nth-child(5),
        .prediction-history-table td:nth-child(6) {
            text-align: right;
        }

        /* ── SECTOR PICKER ──────────────────────────────── */
        .sector-selector-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sector-select {
            background: var(--card-bg);
            border: 1px solid var(--primary-accent);
            border-radius: 6px;
            color: var(--text-color);
            font-size: 0.82rem;
            padding: 4px 8px;
            cursor: pointer;
            display: none;
        }

        .sector-edit-btn {
            background: none;
            border: none;
            color: var(--primary-accent);
            cursor: pointer;
            font-size: 0.75rem;
            padding: 2px 5px;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .sector-edit-btn:hover {
            opacity: 1;
        }

        /* ── AVATAR PICKER ─────────────────────────────── */
        .avatar-picker-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.75);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .avatar-picker-modal.open {
            display: flex;
        }

        .avatar-picker-inner {
            background: var(--card-bg);
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 28px;
            width: min(480px, 94vw);
            max-height: 90vh;
            overflow-y: auto;
        }

        .avatar-picker-inner h3 {
            color: var(--text-color);
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .avatar-picker-inner p.picker-sub {
            color: var(--secondary-accent);
            font-size: 0.82rem;
            margin-bottom: 18px;
        }

        .avatar-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 18px;
        }

        .avatar-option {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 5px;
        }

        .avatar-option:hover:not(.locked) {
            transform: scale(1.07);
            border-color: var(--primary-accent);
        }

        .avatar-option.selected {
            border-color: var(--primary-accent);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        }

        .avatar-option .av-icon {
            font-size: 1.6rem;
            color: white;
        }

        .avatar-option .av-name {
            font-size: 0.65rem;
            font-weight: 700;
            color: white;
            text-align: center;
        }

        .avatar-option.locked {
            opacity: 0.45;
            cursor: default;
        }

        .av-lock {
            position: absolute;
            top: 4px;
            right: 4px;
            font-size: 0.65rem;
            color: white;
            opacity: 0.8;
        }

        .av-unlock-tip {
            position: absolute;
            bottom: -28px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.85);
            color: white;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 4px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 10;
        }

        .avatar-option.locked:hover .av-unlock-tip {
            opacity: 1;
        }

        .picker-close-btn {
            width: 100%;
            padding: 10px;
            background: var(--primary-accent);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
        }

        /* ── SEASONAL RANK BADGE ────────────────────────── */
        .rank-tier-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-left: 6px;
            vertical-align: middle;
        }

        .rank-tier-badge.bronze {
            background: rgba(180, 83, 9, 0.15);
            color: #b45309;
            border: 1px solid rgba(180, 83, 9, 0.4);
        }

        .rank-tier-badge.silver {
            background: rgba(148, 163, 184, 0.15);
            color: #94a3b8;
            border: 1px solid rgba(148, 163, 184, 0.4);
        }

        .rank-tier-badge.gold {
            background: rgba(234, 179, 8, 0.15);
            color: #eab308;
            border: 1px solid rgba(234, 179, 8, 0.4);
        }

        .rank-tier-badge.platinum {
            background: rgba(103, 232, 249, 0.15);
            color: #67e8f9;
            border: 1px solid rgba(103, 232, 249, 0.4);
        }

        .rank-tier-badge.diamond {
            background: rgba(168, 85, 247, 0.15);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.4);
        }

        .rank-tier-badge.legend {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.6);
        }

        .rank-number {
            color: var(--secondary-accent);
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* Season progress bar */
        .season-progress {
            margin: 12px 0 4px;
        }

        .season-progress-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.75rem;
            color: var(--text-color);
            opacity: 0.7;
            margin-bottom: 5px;
        }

        .season-progress-bar {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
        }

        .season-progress-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
            transition: width 0.6s ease;
        }

        .season-progress-sub {
            font-size: 0.72rem;
            color: var(--secondary-accent);
            text-align: center;
            margin-top: 4px;
        }

        /* ── SOLO MODE STATS ────────────────────────────── */
        .solo-stats-section {
            margin-top: 28px;
        }

        .solo-stats-section h4 {
            font-family: 'IBM Plex Mono', monospace;
            color: var(--primary-accent);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .solo-stats-section h4 i {
            color: var(--primary-accent);
        }

        .solo-mode-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
        }

        .solo-mode-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 18px;
            transition: all 0.25s ease;
        }

        .solo-mode-card:hover {
            border-color: var(--primary-accent);
            transform: translateY(-2px);
        }

        .solo-mode-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .solo-mode-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .solo-mode-icon.tower {
            background: rgba(var(--primary-accent-rgb, 200,121,65), 0.12);
            color: var(--primary-accent, #c87941);
        }

        .solo-mode-icon.reveal {
            background: rgba(var(--primary-accent-rgb, 200,121,65), 0.12);
            color: var(--primary-accent, #c87941);
        }

        .solo-mode-name {
            color: var(--text-color);
            font-weight: 700;
            font-size: 0.95rem;
        }

        .solo-mode-sub {
            color: var(--secondary-accent);
            font-size: 0.78rem;
        }

        .solo-stat-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: 0.85rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .solo-stat-row:last-child {
            border-bottom: none;
        }

        .solo-stat-row .label {
            color: var(--text-color);
            opacity: 0.75;
        }

        .solo-stat-row .value {
            color: var(--text-color);
            font-weight: 700;
        }

        .solo-stat-row .value.highlight {
            color: var(--primary-accent);
        }

        .solo-stat-row .value.streak {
            color: #f59e0b;
        }

        /* Dark mode specific adjustments */
        [data-theme="dark"] .profile-card,
        [data-theme="dark"] .profile-quick-links,
        [data-theme="dark"] .profile-tabs,
        [data-theme="dark"] .insights-section,
        [data-theme="dark"] .following-section {
            border-color: rgba(255, 255, 255, 0.1);
        }

        [data-theme="dark"] .holding-item:hover,
        [data-theme="dark"] .report-card:hover,
        [data-theme="dark"] .following-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        /* ── PROFILE LEVEL BADGE (next to name) ──────────────── */
        .profile-level-badge {
            display: inline-flex;
            align-items: center;
            background: linear-gradient(135deg, #2ec27e, #0ea5e9);
            color: white;
            /* The badge is a child of the username, which may carry a gradient
               name-effect (-webkit-text-fill-color: transparent). Reset the fill
               here so the "Lv.X" text stays visible instead of inheriting transparent. */
            -webkit-text-fill-color: #fff;
            font-size: 0.68rem;
            font-weight: 800;
            padding: 2px 8px;
            border-radius: 6px;
            margin-left: 8px;
            vertical-align: middle;
            letter-spacing: 0.3px;
        }

        /* ── XP SIDEBAR WIDGET ───────────────────────────────── */
        .xp-sidebar-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 14px 16px;
            margin-bottom: 14px;
        }
        .xp-sidebar-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .xp-level-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #059669 0%, #2ec27e 50%, #0ea5e9 100%);
            border-radius: 10px;
            flex-shrink: 0;
            box-shadow: 0 3px 12px rgba(46,194,126,0.45), 0 0 0 2px rgba(46,194,126,0.2);
            position: relative;
        }
        .xp-badge-num {
            color: white;
            font-size: 1.25rem;
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        @keyframes xp-pulse { 0%,100%{opacity:.35} 50%{opacity:.85} }
        .xp-loading-pulse { animation: xp-pulse 1.4s ease-in-out infinite; }
        /* max(): the rem value shrank to 6.2px on a 390px phone (base 12px) — 2026-10-15 */
        .xp-badge-lbl {
            color: rgba(255,255,255,0.85);
            font-size: max(9px, 0.52rem);
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }
        .xp-sidebar-info {
            flex: 1;
            min-width: 0;
        }
        .xp-title-text {
            color: var(--text-color);
            font-size: 0.85rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .xp-xp-text {
            color: var(--secondary-accent);
            font-size: 0.72rem;
            font-weight: 600;
            margin-top: 2px;
        }
        .xp-ticks-badge {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            flex-shrink: 0;
        }
        .xp-ticks-num {
            color: var(--text-color);
            font-size: 0.9rem;
            font-weight: 800;
        }
        .xp-ticks-lbl {
            color: var(--secondary-accent);
            font-size: max(9.5px, 0.6rem);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .xp-sidebar-bar {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 5px;
        }
        .xp-sidebar-fill {
            height: 100%;
            background: linear-gradient(90deg, #2ec27e, #0ea5e9);
            border-radius: 3px;
            transition: width 0.6s ease;
        }
        .xp-sidebar-sub {
            color: var(--secondary-accent);
            font-size: 0.68rem;
            font-weight: 500;
            opacity: 0.8;
        }

        /* ── XP TAB CONTENT ──────────────────────────────────── */
        .xp-section { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: 22px; }
        .xp-section h3 { color: var(--text-color); margin-bottom: 18px; font-size: 0.95rem; font-weight: 700; padding: 0 0 0 10px; border-left: 3px solid var(--primary-accent); border-bottom: none; }

        .xp-overview-card {
            background: linear-gradient(135deg, rgba(46,194,126,0.08), rgba(14,165,233,0.05));
            border: 1px solid rgba(46,194,126,0.3);
            border-radius: 6px;
            padding: 20px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .xp-ov-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 86px;
            height: 86px;
            /* Amber gradient + glow come from the block further down (no teal base). */
            border-radius: var(--r-md);
            flex-shrink: 0;
        }
        /* Hero number in the display serif — the .msm-figure voice, used here
           instead of another heavy sans weight. */
        .xp-ov-num {
            color: white;
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 400;
            font-size: 2.6rem;
            line-height: 1;
            letter-spacing: -0.01em;
            font-variant-numeric: lining-nums;
        }
        .xp-ov-lbl { color: rgba(255,255,255,0.8); font-size: max(9px, 0.58rem); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px; }
        .xp-ov-info { flex: 1; min-width: 0; }
        .xp-ov-title { color: var(--text-color); font-size: 1.3rem; font-weight: 800; margin-bottom: 3px; }
        .xp-ov-sub { color: var(--secondary-accent); font-size: 0.82rem; margin-bottom: 10px; }
        .xp-ov-bar { width: 100%; height: 10px; background: var(--border-color); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 5px; }
        /* Colour comes from the amber block further down — no teal base to override. */
        .xp-ov-fill {
            height: 100%;
            border-radius: var(--r-pill);
            transition: width 0.8s var(--ease-out);
            position: relative;
            overflow: hidden;
            animation: xpFillIn 1.1s var(--ease-out);
        }
        /* Fill grows from zero on first paint — the core "progress" dopamine beat */
        @keyframes xpFillIn { from { width: 0; } }
        /* Travelling sheen so the bar feels alive rather than static */
        .xp-ov-fill::after {
            content: '';
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 45%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
            transform: translateX(-120%);
            animation: xpSheen 2.6s var(--ease-out) 1.2s infinite;
        }
        @keyframes xpSheen { to { transform: translateX(320%); } }
        @media (prefers-reduced-motion: reduce) {
            .xp-ov-fill, .xp-ov-fill::after { animation: none; }
        }
        .xp-ov-nums { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-color); opacity: 0.65; }

        .xp-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 0 20px;
            margin-bottom: 24px;
            padding: 18px 0 0;
            border-top: 1px solid var(--border-color);
        }
        .xp-stat-card {
            background: transparent;
            border: none;
            border-left: 3px solid var(--border-color);
            border-radius: 0;
            padding: 8px 12px;
            text-align: left;
            transition: border-left-color 0.2s;
        }
        .xp-stat-card:hover { border-left-color: var(--primary-accent); }
        .xp-stat-val { font-size: 1.45rem; font-weight: 800; color: var(--text-color); display: block; margin-bottom: 2px; }
        .xp-stat-lbl { font-size: 0.68rem; font-weight: 600; color: var(--text-color); opacity: 0.45; text-transform: uppercase; letter-spacing: 0.04em; }

        /* XP sub-nav tabs */
        .xp-subnav {
            display: flex;
            gap: 0;
            margin-bottom: 22px;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--border-color);
        }
        /* Unclaimed-daily-bonus dot. Same idiom as the tasks pager's .dr-dot, so a
           claimable thing looks the same wherever it appears. Needs the button to
           be a positioning context; it was static. */
        .xp-subnav-btn { position: relative; }
        .xp-subnav-dot {
            position: absolute; top: 4px; right: 6px;
            width: 8px; height: 8px; border-radius: 50%;
            background: #e5484d;
            box-shadow: 0 0 0 2px var(--card-bg, #0d1421);
            pointer-events: none;
        }
        @media (prefers-reduced-motion: no-preference) {
            .xp-subnav-dot { animation: xpSubnavDotIn 180ms ease-out; }
        }
        @keyframes xpSubnavDotIn { from { transform: scale(0); } to { transform: scale(1); } }

        .xp-subnav-btn {
            padding: 8px 16px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            color: var(--text-color);
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.15s ease, border-bottom-color 0.15s ease;
            opacity: 0.6;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .xp-subnav-btn:hover { opacity: 1; color: var(--primary-accent); }
        /* Wardrobe is a related but separate destination (its own tab), not a
           panel within this one — a fixed margin + divider keeps it visually
           set apart on wide screens without margin:auto pushing it onto its
           own orphaned line the moment the row wraps on narrower ones. */
        .xp-subnav-btn--wardrobe {
            margin-left: 12px;
            padding-left: 16px;
            border-left: 1px solid var(--border-color);
        }
        .xp-subnav-btn.active {
            border-bottom-color: var(--primary-accent);
            color: var(--primary-accent);
            opacity: 1;
        }
        .xp-subnav-btn--ticks.active { border-bottom-color: #f59e0b; color: #f59e0b; }
        .xp-subpanel { display: none; }
        .xp-subpanel.active { display: block; }

        /* Level guide table */
        .level-guide-controls { display: flex; gap: 6px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
        .level-filter-btn {
            padding: 4px 11px;
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-color);
            font-size: 0.76rem;
            font-weight: 600;
            cursor: pointer;
            transition: color 0.15s ease, border-bottom-color 0.15s ease;
            opacity: 0.6;
        }
        .level-filter-btn:hover { opacity: 1; color: var(--primary-accent); }
        .level-filter-btn.active {
            color: var(--primary-accent);
            border-bottom-color: var(--primary-accent);
            opacity: 1;
        }
        .level-guide-table-wrap { overflow-x: auto; max-height: 520px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 6px; }
        .level-guide-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
        .level-guide-table th {
            background: var(--card-bg);
            color: var(--text-color);
            font-weight: 700;
            padding: 11px 14px;
            text-align: left;
            /* box-shadow instead of border-bottom — border-bottom disappears on sticky
               cells when border-collapse:collapse is used in Chrome */
            box-shadow: inset 0 -1px 0 var(--border-color), 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 2;
            font-size: 0.71rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .level-guide-table td {
            padding: 9px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: var(--text-color);
            vertical-align: top;
        }
        .level-guide-table tr:hover td { background: rgba(46,194,126,0.03); }
        .level-guide-table tr.current-level td { background: rgba(46,194,126,0.10); }
        .level-guide-table tr.current-level td:first-child { border-left: 3px solid var(--primary-accent); padding-left: 11px; }
        .level-guide-table tr.milestone td:first-child { color: var(--primary-accent); }
        .lv-unlock-item { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
        .lv-unlock-item:last-child { margin-bottom:0; }
        .lv-chip { display:inline-flex; align-items:center; gap:4px; font-size:0.64rem; font-weight:700;
                   padding:2px 8px; border-radius:20px; white-space:nowrap; }
        .lv-chip-title      { background:rgba(46,194,126,0.15); color:#2ec27e; border:1px solid rgba(46,194,126,0.3); }
        .lv-chip-badge      { background:rgba(99,102,241,0.15); color:#818cf8; border:1px solid rgba(99,102,241,0.3); }
        .lv-chip-feature    { background:rgba(245,158,11,0.12); color:#f59e0b; border:1px solid rgba(245,158,11,0.25); }
        .lv-chip-mult       { background:rgba(239,68,68,0.12);  color:#f87171; border:1px solid rgba(239,68,68,0.25); }
        .lv-chip-nameEffect { background:rgba(167,139,250,0.12);color:#a78bfa; border:1px solid rgba(167,139,250,0.25); }
        .lv-chip-xpEvent    { background:rgba(14,165,233,0.12); color:#38bdf8; border:1px solid rgba(14,165,233,0.25); }
        .lv-unlock-desc { font-size:0.67rem; opacity:0.58; line-height:1.45; padding-left:2px; margin-top:2px; }

        /* Skills tab */
        .skills-intro { font-size:0.82rem; color:var(--text-color); opacity:0.65; margin-bottom:18px; line-height:1.5; }
        .skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
        .skill-card {
            border-left: 3px solid var(--border-color);
            padding: 0 0 0 14px;
            position: relative;
            transition: border-left-color 0.2s;
        }
        .skill-card:hover { border-left-color: var(--primary-accent); }
        .skill-card.skill-locked { opacity: 0.5; }
        .skill-card.skill-unlocked { border-left-color: rgba(46,194,126,0.6); }
        .skill-card-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
        .skill-card-icon { font-size:1.6rem; flex-shrink:0; }
        .skill-card-title { flex:1; }
        .skill-card-name { font-size:0.95rem; font-weight:800; color:var(--text-color); }
        .skill-card-unlock { font-size:0.7rem; font-weight:700; margin-top:2px; }
        .skill-card-unlock.skill-ulock-met  { color:#2ec27e; }
        .skill-card-unlock.skill-ulock-need { color:#f87171; }
        .skill-card-desc { font-size:0.78rem; color:var(--text-color); opacity:0.65; line-height:1.5; margin-bottom:12px; }
        .skill-howto { font-size:0.74rem; background:rgba(46,194,126,0.07); border:1px solid rgba(46,194,126,0.15);
                       border-radius:7px; padding:8px 11px; margin-bottom:12px; line-height:1.5; color:var(--text-color); opacity:0.75; }
        .skill-xp-tag { display:inline-flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:700;
                        background:rgba(16,185,129,0.1); color:#2ec27e; border:1px solid rgba(16,185,129,0.2);
                        border-radius:20px; padding:3px 10px; margin-bottom:12px; }
        .skill-caps-row { display:flex; gap:8px; margin-bottom:12px; }
        .skill-cap-pill { flex:1; text-align:center; padding:6px 10px; border-radius:8px; font-size:0.72rem; font-weight:700; }
        .skill-cap-free { background:rgba(46,194,126,0.1); border:1px solid rgba(46,194,126,0.2); color:#2ec27e; }
        .skill-cap-prem { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.2); color:#f59e0b; }
        .skill-cap-locked { background:rgba(156,163,175,0.08); border:1px solid rgba(156,163,175,0.15); color:#9ca3af; }
        .skill-cap-label { font-size:0.63rem; font-weight:600; opacity:0.7; display:block; margin-top:2px; text-transform:uppercase; letter-spacing:0.3px; }
        .skill-progress-wrap { margin-top:4px; }
        .skill-progress-label { display:flex; justify-content:space-between; font-size:0.72rem; opacity:0.65; margin-bottom:5px; }
        .skill-progress-bar-bg { height:6px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
        .skill-progress-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#2ec27e,#0ea5e9); transition:width 0.4s ease; }

        /* Coins shop */
        .ticks-balance-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(234,179,8,0.06));
            border: 1px solid rgba(245,158,11,0.3);
            border-radius: 6px;
            padding: 14px 18px;
            margin-bottom: 20px;
        }
        .ticks-balance-info .ticks-bal-amount { font-size: 1.6rem; font-weight: 900; color: #f59e0b; }
        .ticks-balance-info .ticks-bal-label { font-size: 0.72rem; color: var(--text-color); opacity: 0.7; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
        .ticks-balance-rate { font-size: 0.78rem; color: var(--text-color); opacity: 0.6; text-align: right; }
        .shop-section-title {
            color: var(--text-color);
            font-size: 0.9rem;
            font-weight: 700;
            margin: 20px 0 10px;
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 7px;
        }
        /* Card grid — the shop should read as a store, not a settings list */
        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
            gap: 12px;
            margin-bottom: 8px;
        }
        .shop-item {
            position: relative;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--r-md);
            padding: 14px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: transform var(--dur-base) var(--ease-out),
                        box-shadow var(--dur-base) var(--ease-out),
                        border-color var(--dur-base) var(--ease-out);
        }
        @media (hover: hover) {
            .shop-item:hover {
                transform: translateY(-2px);
                border-color: rgba(var(--primary-accent-rgb), .45);
                box-shadow: 0 8px 24px -8px rgba(var(--primary-accent-rgb), .32);
            }
        }
        .shop-item-owned,
        .shop-item-equipped { border-color: var(--success); }
        .shop-item-icon { font-size: 1.4rem; flex-shrink: 0; }
        .shop-item-body { flex: 1; min-width: 0; }
        .shop-item-name { font-size: 0.85rem; font-weight: 700; color: var(--text-color); margin-bottom: 3px; }
        .shop-item-desc { font-size: 0.72rem; color: var(--text-color); opacity: 0.65; line-height: 1.4; margin-bottom: 8px; }
        .shop-item-cost { font-size: 0.8rem; font-weight: 800; color: #f59e0b; }
        .shop-item-limited { font-size: 0.65rem; color: #ef4444; font-weight: 700; margin-left: 6px; }
        .shop-item-locked { opacity: 0.6; }

        /* ── WARDROBE FILTER ────────────────────────────────────── */
        .wf-btn {
            padding: 4px 11px; border: none; border-bottom: 2px solid transparent;
            background: transparent; color: var(--text-color); font-size: 0.75rem;
            font-weight: 600; cursor: pointer; transition: color 0.15s ease, border-bottom-color 0.15s ease;
            opacity: 0.6;
        }
        .wf-btn:hover { opacity: 1; color: var(--primary-accent); }
        .wf-btn.wf-active { color: var(--primary-accent); border-bottom-color: var(--primary-accent); opacity: 1; }
        /* Hide filtered-out items */
        .wardrobe-item[data-filter-state="hidden"] { display: none !important; }

        /* ── WARDROBE ───────────────────────────────────────────── */
        .wardrobe-section { margin-bottom: 28px; }
        .wardrobe-section-title {
            font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--primary-accent);
            opacity: 0.8; margin-bottom: 12px; padding-bottom: 6px;
            border-bottom: 1px solid var(--border-color);
        }
        .wardrobe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

        /* ── My Inventory — owned items ──────────────────────────────────────
           Was a flex-wrap row of inline-styled chips, so every item was a
           different width and the rows wrapped ragged. A grid gives uniform
           cards that line up with the shop and wardrobe grids above. */
        .inv-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 10px;
            margin-top: 12px;
        }
        .inv-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--r-md);
            transition: transform var(--dur-base) var(--ease-out),
                        border-color var(--dur-base) var(--ease-out),
                        box-shadow var(--dur-base) var(--ease-out);
        }
        @media (hover: hover) {
            .inv-card:hover {
                transform: translateY(-2px);
                border-color: rgba(var(--primary-accent-rgb), .45);
                box-shadow: 0 8px 22px -8px rgba(var(--primary-accent-rgb), .3);
            }
        }
        .inv-card.is-equipped {
            border-color: var(--primary-accent);
            box-shadow: inset 0 0 0 1px rgba(var(--primary-accent-rgb), .35);
        }
        .inv-card-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
        .inv-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
        .inv-card-name {
            font-weight: 600; font-size: 0.78rem; line-height: 1.25;
            /* long cosmetic names used to stretch the chip — clamp instead */
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .inv-card-date { opacity: 0.45; font-size: 0.62rem; font-family: var(--font-mono); }
        .inv-card-action { flex-shrink: 0; }
        .inv-equip-btn {
            font-size: 0.65rem; font-weight: 700; white-space: nowrap; cursor: pointer;
            padding: 3px 10px; border-radius: var(--r-pill);
            border: 1px solid var(--border-color);
            background: none; color: var(--text-color);
            transition: background var(--dur-fast) var(--ease-out),
                        border-color var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out);
        }
        .inv-equip-btn:hover { border-color: var(--primary-accent); color: var(--primary-accent); }
        .inv-equip-btn.is-on {
            border-color: var(--primary-accent);
            background: rgba(var(--primary-accent-rgb), .14);
            color: var(--primary-accent);
        }
        .inv-active-tag {
            font-size: 0.65rem; font-weight: 700; white-space: nowrap;
            color: var(--success); display: inline-flex; align-items: center; gap: 3px;
        }
        /* Spent / non-toggleable state — deliberately quieter than "Active" so the
           two don't read as the same thing. */
        .inv-used-tag {
            font-size: 0.65rem; font-weight: 700; white-space: nowrap;
            color: var(--text-muted, #7a8694); opacity: .8;
        }
        /* ── Feats trophy summary ─────────────────────────────────────────── */
        .feat-summary {
            display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
            padding: 10px 14px; margin-bottom: 14px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--r-md);
            font-size: 0.72rem;
        }
        .feat-sum-stat { opacity: .75; }
        .feat-sum-stat b { font-size: 0.95rem; font-weight: 800; color: var(--primary-accent); opacity: 1; }
        .feat-sum-due { color: var(--success); opacity: 1; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
        .feat-sum-trophies { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
        .feat-trophy {
            font-size: 1rem; line-height: 1; cursor: default;
            filter: drop-shadow(0 0 4px rgba(var(--primary-accent-rgb), .35));
        }
        .feat-sum-more { font-size: 0.68rem; opacity: .55; font-weight: 700; }

        /* One-line explanation of what the item is or is doing. */
        .inv-card-note {
            font-size: 0.63rem; line-height: 1.3; opacity: .6;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .wardrobe-item {
            border-top: 3px solid var(--border-color);
            padding: 12px 10px; text-align: center;
            border-radius: var(--r-sm);
            transition: border-top-color var(--dur-base) var(--ease-out),
                        transform var(--dur-base) var(--ease-out),
                        box-shadow var(--dur-base) var(--ease-out);
        }
        @media (hover: hover) {
            .wardrobe-item:not(.wi-locked):hover { transform: translateY(-2px); }
        }
        /* Equipped reads as genuinely "on" — copper ring + inner glow, not just a
           border-colour swap. Cosmetics cost Coins; they should feel owned. */
        .wardrobe-item.wi-equipped {
            border-top-color: var(--primary-accent);
            box-shadow: inset 0 0 0 1px rgba(var(--primary-accent-rgb), .38),
                        0 0 18px -6px rgba(var(--primary-accent-rgb), .5);
        }
        /* Locked: desaturate rather than only fading, and show the lock up front
           instead of hiding the reason behind a hover tooltip. */
        .wardrobe-item.wi-locked { opacity: 0.55; filter: grayscale(.65); }
        .wardrobe-item.wi-locked::after {
            content: '\1F512';
            position: absolute; top: 6px; right: 8px;
            font-size: .72rem; opacity: .75; pointer-events: none;
        }
        .wardrobe-item-icon { font-size: 1.6rem; margin-bottom: 6px; }
        .wardrobe-item-name { font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
        .wardrobe-item-sub  { font-size: 0.68rem; opacity: 0.55; margin-bottom: 8px; }
        .wardrobe-equip-btn {
            padding: 4px 14px; border-radius: 6px; border: none; font-size: 0.73rem;
            font-weight: 700; cursor: pointer; transition: background 0.15s;
        }
        .wardrobe-equip-btn.is-equipped { background: #2ec27e; color: #fff; }
        .wardrobe-equip-btn.not-equipped { background: var(--border-color); color: var(--text-color); }
        .wardrobe-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .wardrobe-swatch {
            width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
            cursor: pointer; transition: border-color 0.15s, transform 0.1s;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.6rem; font-weight: 800; color: #fff;
        }
        .wardrobe-swatch:hover { transform: scale(1.15); }
        .wardrobe-swatch.active { border-color: #2ec27e !important; }
        .wardrobe-swatch.locked { opacity: 0.35; cursor: not-allowed; }
        /* Name effect chooser — one row of chips under the colour swatches. */
        .name-fx-row {
            display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
            margin-top: 10px; width: 100%;
        }
        .name-fx-lab {
            font-size: 0.62rem; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; opacity: .45; margin-right: 2px;
        }
        .name-fx-chip {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 10px; border-radius: var(--r-pill);
            border: 1px solid var(--border-color); background: none;
            color: var(--text-color); font-size: 0.68rem; font-weight: 700;
            cursor: pointer; user-select: none;
            transition: border-color var(--dur-fast) var(--ease-out),
                        background var(--dur-fast) var(--ease-out),
                        color var(--dur-fast) var(--ease-out);
        }
        .name-fx-chip:hover { border-color: var(--primary-accent); color: var(--primary-accent); }
        .name-fx-chip.is-on {
            border-color: var(--primary-accent);
            background: rgba(var(--primary-accent-rgb), .14);
            color: var(--primary-accent);
        }
        /* Locked until its level — shown, not hidden, so the reward is known. */
        .name-fx-chip.is-locked { opacity: .45; cursor: default; }
        .name-fx-chip.is-locked:hover { border-color: var(--border-color); color: var(--text-color); }

        .name-fx-toggle {
            display: inline-flex; align-items: center; gap: 6px;
            margin-left: 10px; padding: 4px 10px;
            border: 1px solid var(--border-color); border-radius: var(--r-pill);
            font-size: 0.68rem; font-weight: 700; cursor: pointer;
            color: var(--text-color); user-select: none;
            transition: border-color var(--dur-fast) var(--ease-out);
        }
        .name-fx-toggle:hover { border-color: var(--primary-accent); }
        .name-fx-toggle input { accent-color: var(--primary-accent); cursor: pointer; margin: 0; }
        /* Locked until the unlock level — visible so the reward is known about. */
        .name-fx-toggle.is-locked { opacity: .5; cursor: default; }
        .name-fx-toggle.is-locked:hover { border-color: var(--border-color); }
        /* Swatch unlock tooltip */
        .wardrobe-swatch-wrap { position: relative; display: inline-block; }
        .wardrobe-swatch-wrap .wsw-tip {
            display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%); white-space: nowrap;
            background: var(--card-bg); border: 1px solid var(--border-color);
            color: var(--text-color); font-size: 0.72rem; font-weight: 600;
            padding: 5px 10px; border-radius: 6px; pointer-events: none;
            z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        }
        .wardrobe-swatch-wrap .wsw-tip::after {
            content: ''; position: absolute; top: 100%; left: 50%;
            transform: translateX(-50%); border: 5px solid transparent;
            border-top-color: var(--border-color);
        }
        .wardrobe-swatch-wrap:hover .wsw-tip { display: block; }
        /* Wardrobe item unlock tooltip */
        .wardrobe-item { position: relative; }
        .wardrobe-item .wi-unlock-tip {
            display: none; position: absolute; top: 50%; right: calc(100% + 10px);
            transform: translateY(-50%); white-space: nowrap;
            background: var(--card-bg); border: 1px solid rgba(245,158,11,0.55);
            color: #f59e0b; font-size: 0.72rem; font-weight: 600;
            padding: 6px 12px; border-radius: 6px; pointer-events: none;
            z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.18);
        }
        .wardrobe-item.wi-locked:hover .wi-unlock-tip { display: block; }
        .wardrobe-boost-list { display: flex; flex-direction: column; gap: 8px; }
        .wardrobe-boost-item {
            display: flex; align-items: center; gap: 10px;
            border-left: 3px solid var(--border-color);
            padding: 8px 0 8px 12px; font-size: 0.8rem;
            border-bottom: 1px solid var(--border-color);
            transition: border-left-color 0.15s;
        }
        .wardrobe-boost-item:last-child { border-bottom: none; }
        .wardrobe-boost-item:hover { border-left-color: var(--primary-accent); }
        .wardrobe-boost-icon { font-size: 1.2rem; }
        .wardrobe-boost-label { flex: 1; font-weight: 600; }
        .wardrobe-boost-meta  { font-size: 0.7rem; opacity: 0.65; }

        /* ── Theme classes — full definitions live in xp-system.js ── */

        /* ── Cursor + frame classes now injected globally by xp-system.js ── */
        .shop-item-tags   { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
        .shop-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
        .shop-tag-prem    { background: rgba(251,191,36,0.15); color: #f59e0b; border: 1px solid rgba(251,191,36,0.3); }
        .shop-tag-lock    { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.25); }
        .shop-tag-unique  { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.25); }
        .shop-tag-limited { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
        .shop-tag-income  { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
        .shop-tag-req     { background: rgba(156,163,175,0.1); color: #9ca3af; border: 1px solid rgba(156,163,175,0.2); }
        .shop-buy-btn {
            padding: 6px 14px;
            background: linear-gradient(135deg, var(--primary-accent), #e8924d);
            color: white;
            border: none;
            border-radius: var(--r-sm);
            font-size: 0.75rem;
            font-weight: 800;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 2px 0 rgba(0,0,0,.16), 0 5px 14px -6px rgba(var(--primary-accent-rgb),.55);
            transition: transform var(--dur-fast) var(--ease-spring),
                        box-shadow var(--dur-base) var(--ease-out),
                        filter var(--dur-base) var(--ease-out);
        }
        /* Stay copper on hover — brighten, never hue-shift (was flipping to sky blue) */
        .shop-buy-btn:hover:not(:disabled) {
            filter: brightness(1.12);
            transform: translateY(-1px);
            box-shadow: 0 3px 0 rgba(0,0,0,.16), 0 9px 22px -6px rgba(var(--primary-accent-rgb),.7);
        }
        .shop-buy-btn:active:not(:disabled) {
            transform: translateY(1px) scale(0.985);
            box-shadow: 0 0 0 rgba(0,0,0,.16), 0 3px 10px -6px rgba(var(--primary-accent-rgb),.5);
        }
        .shop-buy-btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; filter: none; }
        /* Purchase confirmation beat on the button itself */
        .shop-buy-btn.is-success { animation: msmRewardPop .5s var(--ease-spring); }
        @keyframes msmRewardPop { 40% { transform: scale(1.08); } }

        /* Achievements */
        .achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
        .ach-card-full {
            border-top: 3px solid var(--border-color);
            padding: 14px 10px 10px;
            text-align: center;
            transition: border-top-color 0.2s;
        }
        .ach-card-full.earned { border-top-color: var(--primary-accent); }
        .ach-card-full.secret.locked { opacity: 0.4; }
        .ach-card-full:hover { border-top-color: var(--primary-accent); }
        .ach-card-full .ach-icon {
            font-size: 1.7rem;
            display: block;
            margin: 0 auto 8px;
            color: var(--secondary-accent);
        }
        .ach-card-full.earned .ach-icon {
            color: var(--primary-accent);
        }
        .ach-card-full.secret.locked .ach-icon {
            color: var(--text-color);
            opacity: 0.3;
        }
        .ach-card-full .ach-name { font-size: 0.78rem; font-weight: 700; color: var(--text-color); margin-bottom: 4px; }
        .ach-card-full .ach-desc { font-size: 0.65rem; color: var(--secondary-accent); line-height: 1.35; }
        .ach-card-full .ach-earned-badge { display: inline-block; background: var(--primary-accent); color: white; font-size: 0.6rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-top: 5px; }

        /* Daily bonus */
        .daily-bonus-card {
            padding: 0 0 18px 0;
            margin-bottom: 14px;
            border-bottom: 1px solid var(--border-color);
        }
        .daily-bonus-card h4 { color: var(--text-color); font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; opacity: 0.75; padding-left: 10px; border-left: 3px solid var(--primary-accent); }
        .daily-streak-display { text-align: center; padding: 14px; }
        .daily-streak-num { font-size: 2.5rem; font-weight: 900; color: #f59e0b; display: block; }
        .daily-streak-lbl { font-size: 0.78rem; color: var(--text-color); opacity: 0.7; }
        /* Reward-tier button — matches .msm-reward-btn in style.css. Colour comes
           from the amber block further down; no green→blue base to override. */
        .daily-claim-btn {
            width: 100%;
            padding: 12px;
            color: white;
            border: none;
            border-radius: var(--r-md);
            font-size: 0.9rem;
            font-weight: 800;
            letter-spacing: .01em;
            cursor: pointer;
            margin-top: 12px;
            box-shadow: 0 2px 0 rgba(0,0,0,.18), 0 6px 18px -6px rgba(var(--primary-accent-rgb), .55);
            transition: transform var(--dur-fast) var(--ease-spring),
                        box-shadow var(--dur-base) var(--ease-out),
                        filter var(--dur-base) var(--ease-out);
        }
        @media (hover: hover) {
            .daily-claim-btn:hover:not(:disabled) {
                filter: brightness(1.12);
                transform: translateY(-1px);
                box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 10px 26px -6px rgba(var(--primary-accent-rgb), .7);
            }
        }
        .daily-claim-btn:active:not(:disabled) { transform: translateY(2px) scale(.985); }
        .daily-claim-btn.is-success { animation: msmRewardPop .5s var(--ease-spring); }
        .daily-claim-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; filter: none; }

        /* ── COMPETITION TAB — design-system style ───────────────────────────── */

        /* Section anchor A·B·C pattern */
        .prof-section + .prof-section { border-top: 1px solid var(--border-color); padding-top: 36px; margin-top: 36px; }
        .prof-section-head {
            display: grid; grid-template-columns: 56px 1fr auto;
            gap: 14px; align-items: baseline; margin-bottom: 22px;
        }
        .prof-section-idx {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 32px; font-weight: 400;
            color: var(--primary-accent); opacity: 0.55; line-height: 1;
        }
        .prof-section-titles { display: flex; flex-direction: column; gap: 2px; }
        .prof-section-overline {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--primary-accent); font-weight: 700;
        }
        .prof-section-h {
            font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
            font-size: 26px; letter-spacing: -0.012em; line-height: 1.1; margin: 0;
        }
        .prof-section-body { padding-left: 70px; }
        @media (max-width: 720px) {
            .prof-section-head { grid-template-columns: 32px 1fr; }
            .prof-section-idx { font-size: 22px; }
            .prof-section-body { padding-left: 46px; }
        }

        /* Comp dossier masthead */
        .comp-dossier {
            background: var(--card-bg); border: 1px solid var(--border-color);
            border-radius: 6px; margin-bottom: 36px;
            position: relative; overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,.08);
        }
        .comp-dossier::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: linear-gradient(90deg, var(--primary-accent), var(--gold) 50%, var(--primary-accent));
            opacity: 0.65; z-index: 2;
        }
        .comp-dossier::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(ellipse 45% 70% at 102% 0%, rgba(var(--primary-accent-rgb),.10), transparent 65%);
        }
        .comp-dossier-top {
            display: flex; align-items: center; gap: 12px; padding: 12px 24px;
            border-bottom: 1px solid var(--border-color);
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px;
            position: relative; z-index: 1;
        }
        .comp-dossier-tag {
            background: var(--primary-accent); color: #fff;
            font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
            padding: 3px 9px; border-radius: 3px;
        }
        .comp-dossier-league { font-weight: 700; letter-spacing: 0.02em; }
        .comp-dossier-sub { opacity: 0.5; }
        .comp-dossier-mast {
            display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
            padding: 26px 28px 22px; border-bottom: 1px solid var(--border-color);
            position: relative; z-index: 1;
        }
        @media (max-width: 760px) { .comp-dossier-mast { grid-template-columns: 1fr; } }
        .comp-dossier-overline {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px;
            letter-spacing: 0.14em; text-transform: uppercase;
            color: var(--primary-accent); font-weight: 700;
        }
        .comp-dossier-round {
            font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic;
            font-size: clamp(36px, 5vw, 52px); line-height: 0.95; letter-spacing: -0.025em;
            margin: 6px 0 10px;
        }
        .comp-dossier-blurb { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.5; opacity: 0.7; }

        /* Lock clock */
        .comp-clock {
            border: 1px solid rgba(var(--primary-accent-rgb),.4); border-radius: 6px;
            padding: 14px 20px; min-width: 240px;
            background: rgba(var(--primary-accent-rgb),.05);
            display: flex; flex-direction: column; gap: 8px;
        }
        .comp-clock.shut { border-color: var(--border-color); background: rgba(0,0,0,.06); }
        .comp-clock-lab {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px;
            letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-accent); font-weight: 700;
        }
        .comp-clock.shut .comp-clock-lab { color: var(--text-muted, #64748b); }
        .comp-clock-shut-glyph { font-size: 26px; color: var(--text-muted, #64748b); }
        .comp-clock-when { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9.5px; opacity: 0.5; }

        /* Status strip */
        .comp-strip {
            display: grid; grid-template-columns: repeat(4, 1fr);
            position: relative; z-index: 1; background: rgba(0,0,0,.06);
        }
        [data-theme="light"] .comp-strip { background: rgba(0,0,0,.02); }
        .comp-strip-cell {
            padding: 15px 20px; border-right: 1px solid var(--border-color);
            display: flex; flex-direction: column; gap: 4px;
        }
        .comp-strip-cell:last-child { border-right: none; }
        .comp-strip-num {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-weight: 700;
            font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
            display: inline-flex; align-items: baseline; gap: 3px;
        }
        .comp-strip-lab {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9.5px;
            letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; font-weight: 600;
        }
        .comp-strip-sub { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10.5px; opacity: 0.6; }
        @media (max-width: 640px) {
            .comp-strip { grid-template-columns: repeat(2, 1fr); }
            .comp-strip-cell:nth-child(2n) { border-right: none; }
            .comp-strip-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }
        }

        /* Round bars chart */
        .comp-rounds-head {
            display: flex; justify-content: space-between; align-items: baseline;
            margin-bottom: 14px; font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; font-weight: 600;
        }
        .comp-rounds-avg { font-variant-numeric: tabular-nums; color: var(--primary-accent); }
        .comp-rounds-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
        .comp-round-col {
            flex: 1; display: flex; flex-direction: column; align-items: center;
            gap: 6px; height: 100%; justify-content: flex-end;
        }
        .comp-round-bar {
            width: 100%; max-width: 26px; border-radius: 2px 2px 0 0;
            background: linear-gradient(180deg, var(--primary-accent), rgba(var(--primary-accent-rgb),.45));
            display: flex; align-items: flex-start; justify-content: center;
            position: relative; min-height: 8px;
        }
        .comp-round-pts {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9px; font-weight: 700;
            color: #fff; padding-top: 2px; opacity: 0.85;
        }
        .comp-round-bar.pending {
            background: repeating-linear-gradient(45deg, var(--border-color), var(--border-color) 4px, transparent 4px, transparent 8px);
            border: 1px dashed var(--primary-accent); min-height: 16px;
        }
        .comp-round-col.live .comp-round-r { color: var(--primary-accent); font-weight: 700; }
        .comp-round-r { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 9px; opacity: 0.5; font-variant-numeric: tabular-nums; }

        /* Weekly results ladder */
        .cw-ladder { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; font-family: var(--font-mono, 'IBM Plex Mono', monospace); }
        .cw-ladder-head, .cw-ladder-row {
            display: grid; grid-template-columns: 32px 1fr 52px 52px 58px 80px;
            align-items: center; gap: 10px; padding: 9px 16px;
        }
        .cw-ladder-head {
            background: rgba(var(--primary-accent-rgb),.05);
            border-bottom: 1px solid var(--border-color);
            font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
            font-weight: 700; color: var(--primary-accent);
        }
        .cw-ladder-head .num, .cw-ladder-row .num { text-align: right; font-variant-numeric: tabular-nums; }
        .cw-ladder-head .form-col, .cw-ladder-row .form-col { text-align: right; }
        .cw-ladder-row { border-bottom: 1px solid var(--border-color); font-size: 12px; transition: background 100ms; }
        .cw-ladder-row:last-child { border-bottom: none; }
        .cw-ladder-row:hover { background: rgba(var(--primary-accent-rgb),.03); }
        @media (max-width: 600px) {
            .cw-ladder-head, .cw-ladder-row { grid-template-columns: 32px 1fr 52px 52px 58px; }
            .hide-sm { display: none; }
        }

        /* Form dots */
        .tip-form { display: inline-flex; gap: 3px; }
        .tip-form-dot {
            width: 15px; height: 15px; border-radius: 2px;
            display: inline-flex; align-items: center; justify-content: center;
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 8px; font-weight: 700; color: #fff;
        }
        .tip-form.sm .tip-form-dot { width: 13px; height: 13px; font-size: 7.5px; }
        .tip-form-dot.w { background: var(--bullish, #2ec27e); }
        .tip-form-dot.l { background: var(--danger, #dc2626); opacity: 0.8; }
        .tip-form-dot.d { background: var(--text-muted, #64748b); opacity: 0.5; }

        /* Trophy section */
        .comp-trophy {
            display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
            background: radial-gradient(ellipse 50% 100% at 0% 50%, rgba(212,165,116,.10), transparent 60%), var(--card-bg);
            border: 1px solid rgba(212,165,116,.35); border-radius: 6px; padding: 22px 26px;
        }
        @media (max-width: 720px) { .comp-trophy { grid-template-columns: 1fr; text-align: center; } }
        .comp-trophy-glyph {
            width: 64px; height: 64px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: rgba(212,165,116,.12); border: 1px solid rgba(212,165,116,.4);
            color: var(--gold, #f0b429); font-size: 32px;
        }
        .comp-trophy-name {
            font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
            font-size: 26px; letter-spacing: -0.015em; color: var(--gold, #f0b429);
        }
        .comp-trophy-desc { margin: 6px 0 12px; font-size: 13px; line-height: 1.55; opacity: 0.75; max-width: 60ch; }
        .comp-trophy-desc b { color: var(--text-color); font-weight: 700; }
        .comp-trophy-pod { display: flex; flex-wrap: wrap; gap: 8px; }
        .comp-pod {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px;
            font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px;
            border-radius: 2px; border: 1px solid;
        }
        .comp-pod.gold   { color: #d4a574; border-color: rgba(212,165,116,.45); background: rgba(212,165,116,.08); }
        .comp-pod.silver { color: #b8b6b1; border-color: rgba(184,182,177,.4);  background: rgba(184,182,177,.06); }
        .comp-pod.bronze { color: #c87941; border-color: rgba(200,121,65,.4);   background: rgba(200,121,65,.08); }
        .comp-trophy-countdown { text-align: center; padding: 0 8px; }
        .comp-trophy-cd-num {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 48px; font-weight: 700;
            font-variant-numeric: tabular-nums; color: var(--gold, #f0b429);
            line-height: 1; display: block;
        }
        .comp-trophy-cd-lab {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px;
            letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5;
            display: block; margin-top: 4px; line-height: 1.6;
        }

        /* ── DESIGN SYSTEM REFINEMENTS ───────────────────────────────────────────
           Additive overrides aligning profile.html with the MSM design system.
           Typography, token usage, tabular numerics, section-label consistency.
        ─────────────────────────────────────────────────────────────────────── */

        /* Profile name — Instrument Serif editorial masthead */
        .profile-name {
            font-family: 'Instrument Serif', Georgia, serif;
            font-size: 1.6rem;
            font-weight: 400;
            font-style: italic;
            letter-spacing: -0.02em;
            margin-bottom: 4px;
        }

        /* Profile title (tier label) — mono overline */
        .profile-title {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: var(--primary-accent);
            margin-bottom: 14px;
        }

        /* Profile bio — slightly more restrained */
        .profile-bio {
            font-size: 0.85rem;
            opacity: 0.65;
            line-height: 1.6;
        }

        /* Sidebar stat numbers — mono tabular */
        .profile-stat .stat-value {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
            font-size: 1.35rem;
            letter-spacing: -0.01em;
        }
        .profile-stat .stat-label {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 9px;
            letter-spacing: 0.1em;
            opacity: 0.45;
        }

        /* Live stat card values — mono tabular */
        .scl-value {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
        }
        .scl-label {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 9px;
            letter-spacing: 0.1em;
            opacity: 0.45;
            color: var(--text-color);
            text-transform: uppercase;
        }

        /* Prediction metric values — tabular */
        .prediction-metric .metric-value {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
        }

        /* ── Section overlines — consistent mono ALL-CAPS style ─── */
        /* Small overline labels (no border — purely typographic) */
        .insights-section > h3,
        .xp-section > h3,
        .profile-quick-links > h3 {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            opacity: 0.45;
            margin-bottom: 16px;
        }

        /* Prominent section headers (keep border-left, refine typography) */
        .following-section > h3,
        .tracked-stats > h4,
        .solo-stats-section > h4 {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            opacity: 0.55;
            margin-bottom: 14px;
            padding-left: 10px;
            border-left: 2px solid var(--primary-accent);
        }

        /* Profile card — add depth shadow */
        .profile-card {
            box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 12px rgba(0,0,0,0.1);
        }

        /* Meta links — tighter spacing */
        .profile-meta p {
            font-size: 0.82rem;
            margin: 6px 0;
            opacity: 0.7;
        }

        /* Transitions — use motion tokens */
        .avatar-edit          { transition: all var(--dur-base, 220ms) var(--ease-out, ease); }
        .quick-link           { transition: color var(--dur-fast, 100ms); }
        .report-card          { transition: border-color var(--dur-fast, 100ms), box-shadow var(--dur-fast, 100ms); }
        .profile-tab          { transition: color var(--dur-fast, 100ms), border-bottom-color var(--dur-fast, 100ms), opacity var(--dur-fast, 100ms); }
        .solo-mode-card       { transition: border-color var(--dur-base, 220ms) var(--ease-out, ease), transform var(--dur-base, 220ms) var(--ease-out, ease); }

        /* Prediction table — copper tint hover */
        .prediction-history-table tr:hover td {
            background: rgba(var(--primary-accent-rgb), 0.04);
        }

        /* XP stat sidebar numbers — mono */
        .xp-badge-num {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
        }

        /* Qualification card values */
        .qual-tier-pts {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
            font-size: 11px;
        }

        /* Coins balance amount — already amber, add tabular */
        .ticks-bal-amount {
            font-family: var(--font-mono, 'IBM Plex Mono', monospace);
            font-variant-numeric: tabular-nums;
        }

        /* Profile tab bar — tighten active indicator */
        .profile-tab.active {
            border-bottom-width: 2px;
            opacity: 1;
        }

        /* ── Light-mode contrast fixes ──────────────────────────────────────
           These small labels/values used warm accent colours (light copper,
           gold, old green) that fail WCAG on white. Only remap in light mode;
           dark mode is untouched. */
        body[data-theme="light"] .season-progress-sub,
        body[data-theme="light"] .xp-xp-text,
        body[data-theme="light"] .xp-sidebar-sub,
        body[data-theme="light"] .xp-ticks-lbl,
        body[data-theme="light"] .scl-label,
        body[data-theme="light"] .solo-mode-sub {
            color: var(--text-muted, #475569) !important;
            opacity: 1;
        }
        /* Gold stat values → readable dark amber on white (beats inline JS colour) */
        body[data-theme="light"] .scl-value,
        body[data-theme="light"] #profile-rank,
        body[data-theme="light"] .value.streak {
            color: #b45309 !important;
        }
        /* Any unstyled anchor in the content column → accent, never browser blue */
        body[data-theme="light"] .profile-content a:not([class]),
        body[data-theme="light"] .tab-content a:not([class]) {
            color: var(--primary-accent);
        }
    

/* Sidebar footer links: hover was onmouseover/onmouseout (CSP phase 2,
   2026-10-08). Their resting opacity is inline, so the hover needs !important. */
.pf-foot-link:hover { opacity: 0.85 !important; }
.pf-foot-link[href="settings.html"]:hover { opacity: 1 !important; }