/* Prediction result, modern role card, SHAP glossary. */

        /* =========================
           新增功能：现代功能定位 + SHAP术语解释
           说明：只追加样式，不覆盖原有 Supabase 风格设计
        ========================= */
        .modern-role-card {
            background:
                linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(59, 130, 246, 0.08)),
                rgba(15, 23, 42, 0.78);
            border: 1px solid rgba(16, 185, 129, 0.20);
            border-radius: 24px;
            padding: 22px;
        }

        .modern-role-axis {
            background: rgba(2, 6, 23, 0.46);
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 18px;
            padding: 14px;
        }

        .modern-role-bar {
            height: 9px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.16);
            overflow: hidden;
        }

        .modern-role-bar > span {
            display: block;
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #10b981, #34d399, #60a5fa);
        }

        .modern-role-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.10);
            border: 1px solid rgba(16, 185, 129, 0.22);
            color: #6ee7b7;
            font-size: 12px;
            font-weight: 900;
        }

        .term-glossary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 12px;
        }

        .term-glossary-card {
            background: rgba(2, 6, 23, 0.45);
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 18px;
            padding: 14px;
            transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }

        .term-glossary-card:hover {
            transform: translateY(-2px);
            border-color: rgba(16, 185, 129, 0.34);
            background: rgba(15, 23, 42, 0.66);
        }

        .term-glossary-key {
            color: #6ee7b7;
            font-weight: 950;
            font-size: 15px;
        }

        .term-glossary-cn {
            color: #f8fafc;
            font-weight: 800;
            margin-top: 4px;
            font-size: 13px;
        }

        .term-glossary-desc {
            color: #cbd5e1;
            font-size: 13px;
            line-height: 1.7;
            margin-top: 8px;
        }

        .term-glossary-effect {
            margin-top: 9px;
            color: #bfdbfe;
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.14);
            border-radius: 12px;
            padding: 8px 10px;
            font-size: 12px;
            line-height: 1.65;
        }

        .prediction-hot-list {
            display: grid;
            gap: 10px;
        }

        #predict-search-btn {
            position: relative;
            z-index: 70;
        }

        #predict-result-box {
            z-index: 60;
        }

        .prediction-hot-query-btn {
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.52);
            color: #e2e8f0;
            padding: 11px 13px;
            font-weight: 900;
            text-align: left;
            transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
        }

        .prediction-hot-query-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(52, 211, 153, 0.35);
            background: rgba(16, 185, 129, 0.10);
        }

        .prediction-workbench-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .player-profile-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            max-width: 560px;
        }

        .player-profile-grid > div,
        .prediction-context-card,
        .prediction-result-labels > div {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.42);
            padding: 11px 12px;
        }

        .player-profile-grid span,
        .prediction-context-card span,
        .prediction-result-labels span {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .player-profile-grid strong,
        .prediction-context-card strong,
        .prediction-result-labels strong {
            display: block;
            color: #f8fafc;
            font-weight: 950;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .prediction-icon-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 38px;
            border: 1px solid rgba(52, 211, 153, 0.26);
            border-radius: 14px;
            background: rgba(16, 185, 129, 0.10);
            color: #a7f3d0;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 900;
            transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
        }

        .prediction-icon-action:hover {
            transform: translateY(-1px);
            border-color: rgba(52, 211, 153, 0.44);
            background: rgba(16, 185, 129, 0.16);
        }

        #predict-page.has-result .prediction-hot-card {
            padding: 14px;
        }

        #predict-page.has-result .prediction-hot-card .prediction-hot-list,
        #predict-page.has-result .prediction-hot-card p {
            display: none;
        }

        #predict-page.has-result .prediction-hot-card h3 {
            font-size: 16px;
            margin-top: 0;
        }

        #predict-page.has-result .prediction-hot-card .text-sm {
            color: #94a3b8;
        }

        .prediction-player-note {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            max-width: 680px;
        }

        .prediction-hero-summary-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 9px;
            margin-top: 16px;
            max-width: 780px;
        }

        .prediction-hero-summary-grid > div,
        .prediction-brief-card,
        .prediction-status-lines > div,
        .prediction-role-summary-grid > div {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.42);
            padding: 11px 12px;
        }

        .prediction-hero-summary-grid span,
        .prediction-status-lines span,
        .prediction-role-summary-grid span {
            display: block;
            color: #94a3b8;
            font-size: 11px;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .prediction-hero-summary-grid strong,
        .prediction-status-lines strong,
        .prediction-role-summary-grid strong {
            display: block;
            color: #a7f3d0;
            font-size: 14px;
            font-weight: 950;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .prediction-result-tabs {
            position: sticky;
            top: 82px;
            z-index: 30;
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 8px;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 20px;
            background: rgba(2, 6, 23, 0.72);
            backdrop-filter: blur(14px);
            box-shadow: 0 14px 36px rgba(2, 6, 23, 0.18);
        }

        .prediction-result-tab {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 38px;
            border: 1px solid transparent;
            border-radius: 14px;
            color: #94a3b8;
            padding: 0 12px;
            font-size: 13px;
            font-weight: 950;
            white-space: nowrap;
            transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
        }

        .prediction-result-tab:hover,
        .prediction-result-tab.is-active {
            color: #ccfbf1;
            border-color: rgba(45, 212, 191, 0.34);
            background: rgba(20, 184, 166, 0.13);
        }

        .prediction-result-tab.is-active {
            box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.08);
        }

        .prediction-tab-panel.is-active {
            animation: professionalReveal 160ms ease-out both;
        }

        .prediction-overview-quick-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-top: 14px;
        }

        .prediction-brief-card {
            min-height: 142px;
            background:
                radial-gradient(circle at 14% 10%, rgba(20, 184, 166, 0.10), transparent 36%),
                rgba(2, 6, 23, 0.46);
        }

        .prediction-brief-head {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #f8fafc;
            font-size: 13px;
            font-weight: 950;
            margin-bottom: 10px;
        }

        .prediction-compact-list {
            display: grid;
            gap: 8px;
        }

        .prediction-compact-list > div {
            position: relative;
            color: #cbd5e1;
            font-size: 13px;
            line-height: 1.55;
            padding-left: 15px;
        }

        .prediction-compact-list > div::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.72em;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #34d399;
        }

        .prediction-status-lines {
            display: grid;
            gap: 8px;
        }

        .prediction-link-toggle {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            border: 1px solid rgba(45, 212, 191, 0.24);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.08);
            color: #99f6e4;
            padding: 0 12px;
            font-size: 12px;
            font-weight: 950;
        }

        .prediction-collapse-detail,
        .prediction-dev-details,
        .prediction-collapse-card {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 18px;
            background: rgba(2, 6, 23, 0.36);
            padding: 12px 14px;
        }

        .prediction-collapse-detail > summary,
        .prediction-dev-details > summary,
        .prediction-collapse-card > summary {
            cursor: pointer;
            color: #ccfbf1;
            font-size: 13px;
            font-weight: 950;
            list-style: none;
        }

        .prediction-collapse-detail > summary::-webkit-details-marker,
        .prediction-dev-details > summary::-webkit-details-marker,
        .prediction-collapse-card > summary::-webkit-details-marker {
            display: none;
        }

        .prediction-collapse-detail > summary::after,
        .prediction-dev-details > summary::after,
        .prediction-collapse-card > summary::after {
            content: "\f078";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            float: right;
            color: #67e8f9;
            transition: transform 160ms ease;
        }

        .prediction-collapse-detail[open] > summary::after,
        .prediction-dev-details[open] > summary::after,
        .prediction-collapse-card[open] > summary::after {
            transform: rotate(180deg);
        }

        .prediction-role-summary-main {
            display: grid;
            grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
            gap: 14px;
            align-items: start;
        }

        .prediction-role-summary-title {
            color: #f8fafc;
            font-size: 24px;
            line-height: 1.2;
            font-weight: 950;
            margin-bottom: 12px;
        }

        .prediction-role-summary-grid,
        .prediction-role-summary-axes {
            display: grid;
            gap: 10px;
        }

        .prediction-role-summary-axes {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .prediction-role-axis {
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.44);
            padding: 11px 12px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 7px;
            align-items: center;
        }

        .prediction-role-axis span {
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 850;
        }

        .prediction-role-axis strong {
            color: #a7f3d0;
            font-weight: 950;
        }

        .prediction-role-axis i {
            grid-column: 1 / -1;
            height: 7px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.14);
            overflow: hidden;
        }

        .prediction-role-axis b {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #10b981, #22d3ee);
        }

        .prediction-similar-list {
            display: grid;
            gap: 12px;
        }

        .prediction-similar-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 18px;
            background: rgba(2, 6, 23, 0.44);
            padding: 14px;
        }

        .prediction-similar-card strong {
            display: block;
            color: #f8fafc;
            font-weight: 950;
            line-height: 1.35;
        }

        .prediction-similar-card span {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            margin-top: 4px;
        }

        .prediction-similar-card em {
            align-self: start;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.10);
            border: 1px solid rgba(52, 211, 153, 0.24);
            color: #a7f3d0;
            font-size: 12px;
            font-style: normal;
            font-weight: 950;
            padding: 6px 9px;
            white-space: nowrap;
        }

        .prediction-similar-card p {
            grid-column: 1 / -1;
            color: #cbd5e1;
            font-size: 13px;
            line-height: 1.7;
            margin: 0;
        }
        .prediction-result-overview {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
            gap: 16px;
        }

        .prediction-result-main,
        .prediction-context-stack {
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 24px;
            background: rgba(15, 23, 42, 0.78);
            padding: 22px;
        }

        .prediction-section-kicker {
            color: #5eead4;
            font-size: 11px;
            font-weight: 950;
            line-height: 1.1;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .prediction-result-labels {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .prediction-result-labels strong {
            color: #a7f3d0;
            font-size: 19px;
        }

        .prediction-readable-copy.is-expanded {
            display: block;
            overflow: visible;
        }

        .prediction-readable-copy {
            color: #dbeafe;
            font-size: 15px;
            line-height: 1.85;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .prediction-v5-launch-card {
            border: 1px solid rgba(45, 212, 191, 0.18);
            border-radius: 24px;
            background:
                radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.13), transparent 30%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.76));
            box-shadow: 0 18px 42px rgba(2, 6, 23, 0.24);
            padding: 22px;
        }

        .prediction-v5-hero {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 16px;
        }

        .prediction-v5-hero h3 {
            color: #f8fafc;
            font-size: 24px;
            font-weight: 950;
            line-height: 1.15;
            margin: 4px 0 8px;
        }

        .prediction-v5-hero p {
            color: #cbd5e1;
            font-size: 14px;
            line-height: 1.75;
            margin: 0;
            max-width: 760px;
        }

        .prediction-v5-badge {
            flex: 0 0 auto;
            border: 1px solid rgba(94, 234, 212, 0.32);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.14);
            color: #ccfbf1;
            font-size: 12px;
            font-weight: 950;
            line-height: 1;
            padding: 9px 12px;
            white-space: nowrap;
        }

        .prediction-v5-capability-grid,
        .prediction-v5-comparison-grid {
            display: grid;
            gap: 10px;
        }

        .prediction-v5-capability-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .prediction-v5-capability-grid > div,
        .prediction-v5-comparison-card {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.42);
        }

        .prediction-v5-capability-grid > div {
            min-height: 112px;
            padding: 13px;
        }

        .prediction-v5-capability-grid i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 12px;
            background: rgba(45, 212, 191, 0.12);
            color: #67e8f9;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .prediction-v5-capability-grid strong,
        .prediction-v5-capability-grid span,
        .prediction-v5-comparison-card span,
        .prediction-v5-comparison-card strong,
        .prediction-v5-comparison-card small {
            display: block;
        }

        .prediction-v5-capability-grid strong {
            color: #f8fafc;
            font-size: 13px;
            font-weight: 950;
            line-height: 1.3;
            margin-bottom: 6px;
        }

        .prediction-v5-capability-grid span {
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.6;
        }

        .prediction-v5-comparison-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            margin-top: 14px;
        }

        .prediction-v5-comparison-card {
            min-height: 96px;
            padding: 14px;
        }

        .prediction-v5-comparison-card span {
            color: #94a3b8;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 8px;
        }

        .prediction-v5-comparison-card strong {
            color: #e0f2fe;
            font-size: 24px;
            font-weight: 950;
            line-height: 1.05;
            margin-bottom: 8px;
        }

        .prediction-v5-comparison-card small {
            color: #94a3b8;
            font-size: 11px;
            line-height: 1.4;
        }

        .prediction-v5-comparison-card.highlight {
            border-color: rgba(52, 211, 153, 0.38);
            background: linear-gradient(145deg, rgba(16, 185, 129, 0.16), rgba(14, 165, 233, 0.08));
        }

        .prediction-v5-comparison-card.highlight strong {
            color: #a7f3d0;
        }

        .prediction-v5-comparison-card.muted strong {
            color: #cbd5e1;
        }

        .prediction-v5-disclaimer {
            border: 1px solid rgba(251, 191, 36, 0.20);
            border-radius: 16px;
            background: rgba(251, 191, 36, 0.08);
            color: #fde68a;
            font-size: 12px;
            line-height: 1.7;
            margin-top: 14px;
            padding: 12px 14px;
        }
        .prediction-measurements-card {
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 24px;
            background:
                radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.10), transparent 30%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.70));
            padding: 22px;
            box-shadow: 0 18px 42px rgba(2, 6, 23, 0.20);
        }

        .prediction-measurements-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 14px;
        }

        .prediction-measurements-head h3 {
            margin: 0;
            color: #f8fafc;
            font-size: 22px;
            line-height: 1.2;
            font-weight: 950;
        }

        .prediction-measurements-actions {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .prediction-measurements-toggle {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(148, 163, 184, 0.22);
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.78);
            color: #cbd5e1;
            transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
        }

        .prediction-measurements-toggle:hover {
            border-color: rgba(45, 212, 191, 0.42);
            color: #99f6e4;
        }

        .prediction-measurements-toggle i {
            transition: transform 160ms ease;
        }

        .prediction-measurements-toggle.is-open i {
            transform: rotate(180deg);
        }

        .prediction-measurements-body {
            margin-top: 2px;
        }

        .prediction-measurements-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .prediction-measurement-item {
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.44);
            padding: 12px;
            min-height: 72px;
        }

        .prediction-measurement-item span {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.2;
            margin-bottom: 7px;
        }

        .prediction-measurement-item strong {
            display: block;
            color: #ecfeff;
            font-size: 17px;
            line-height: 1.25;
            font-weight: 950;
            overflow-wrap: anywhere;
        }

        .prediction-measurements-note {
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.65;
            margin-top: 12px;
        }

        .prediction-professional-toggle-wrap {
            display: flex;
            justify-content: center;
        }

        .prediction-professional-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 46px;
            border: 1px solid rgba(45, 212, 191, 0.30);
            border-radius: 999px;
            background: rgba(15, 23, 42, 0.86);
            color: #a7f3d0;
            padding: 0 18px;
            font-weight: 950;
            transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
        }

        .prediction-professional-toggle:hover {
            transform: translateY(-1px);
            border-color: rgba(45, 212, 191, 0.52);
            background: rgba(16, 185, 129, 0.12);
        }

        .prediction-professional-chevron {
            transition: transform 160ms ease;
        }

        .prediction-professional-toggle[aria-expanded="true"] .prediction-professional-chevron {
            transform: rotate(180deg);
        }

        .prediction-professional-section.professional-visible {
            animation: professionalReveal 180ms ease-out both;
        }

        @keyframes professionalReveal {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .prediction-context-stack {
            display: grid;
            gap: 12px;
            padding: 14px;
        }

        .prediction-context-card p {
            color: #cbd5e1;
            font-size: 13px;
            line-height: 1.65;
            margin: 8px 0 0;
        }

        .prediction-insight-card {
            min-height: 210px;
            border: 1px solid rgba(148, 163, 184, 0.15);
            border-radius: 24px;
            background:
                radial-gradient(circle at 14% 12%, rgba(20, 184, 166, 0.12), transparent 34%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.72));
            padding: 18px;
            box-shadow: 0 18px 42px rgba(2, 6, 23, 0.22);
        }

        .prediction-wide-card {
            grid-column: span 1;
        }

        .prediction-insight-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .prediction-insight-kicker {
            color: #5eead4;
            font-size: 11px;
            font-weight: 950;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .prediction-insight-card h3 {
            margin: 4px 0 0;
            color: #f8fafc;
            font-size: 20px;
            font-weight: 950;
            line-height: 1.2;
        }

        .prediction-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            border: 1px solid rgba(45, 212, 191, 0.24);
            border-radius: 999px;
            background: rgba(20, 184, 166, 0.10);
            color: #a7f3d0;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 950;
            white-space: nowrap;
        }

        .prediction-pill.muted {
            border-color: rgba(148, 163, 184, 0.14);
            background: rgba(15, 23, 42, 0.62);
            color: #94a3b8;
        }

        .prediction-explain-copy {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .prediction-mini-list,
        .prediction-feature-mini-list,
        .prediction-band-list,
        .prediction-advice-list,
        .prediction-runtime-grid,
        .prediction-factor-list,
        .prediction-risk-list {
            display: grid;
            gap: 10px;
        }

        .prediction-empty-line,
        .prediction-explain-copy,
        .prediction-advice-list {
            color: #cbd5e1;
            font-size: 14px;
            line-height: 1.75;
        }

        .prediction-mini-item,
        .prediction-feature-mini,
        .prediction-band,
        .prediction-runtime-grid > div {
            border: 1px solid rgba(148, 163, 184, 0.12);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.44);
            padding: 11px 12px;
        }

        .prediction-mini-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .prediction-mini-item strong,
        .prediction-runtime-grid strong {
            color: #f8fafc;
            font-weight: 950;
        }

        .prediction-mini-item span,
        .prediction-runtime-grid span {
            color: #94a3b8;
            font-size: 12px;
        }

        .prediction-feature-mini {
            position: relative;
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px;
            color: #dbeafe;
            font-size: 13px;
            font-weight: 850;
        }

        .prediction-feature-mini i {
            grid-column: 1 / -1;
            display: block;
            height: 7px;
            width: 100%;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.14);
            overflow: hidden;
        }

        .prediction-feature-mini i::after {
            content: "";
            display: block;
            height: 100%;
            width: var(--w, 40%);
            border-radius: inherit;
            background: linear-gradient(90deg, #10b981, #22d3ee);
        }

        .prediction-feature-mini strong {
            color: #a7f3d0;
            font-weight: 950;
        }

        .prediction-factor-columns {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .prediction-factor-columns h4 {
            margin: 0 0 9px;
            color: #cbd5e1;
            font-size: 13px;
            font-weight: 950;
        }

        .prediction-factor-item,
        .prediction-risk-item,
        .prediction-placeholder-box,
        .prediction-shap-readable {
            border: 1px solid rgba(148, 163, 184, 0.13);
            border-radius: 16px;
            background: rgba(2, 6, 23, 0.44);
            padding: 12px;
        }

        .prediction-factor-item.is-positive {
            border-color: rgba(52, 211, 153, 0.24);
            background: rgba(16, 185, 129, 0.08);
        }

        .prediction-factor-item.is-negative,
        .prediction-risk-item.risk-high {
            border-color: rgba(251, 191, 36, 0.26);
            background: rgba(245, 158, 11, 0.08);
        }

        .prediction-factor-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 7px;
        }

        .prediction-factor-top strong,
        .prediction-risk-item strong {
            color: #f8fafc;
            font-size: 13px;
            font-weight: 950;
            line-height: 1.35;
        }

        .prediction-factor-top span {
            color: #a7f3d0;
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }

        .prediction-factor-item p,
        .prediction-risk-item p,
        .prediction-placeholder-box,
        .prediction-shap-readable p {
            color: #cbd5e1;
            font-size: 13px;
            line-height: 1.68;
            margin: 0;
        }

        .prediction-risk-item.risk-medium {
            border-color: rgba(96, 165, 250, 0.24);
            background: rgba(59, 130, 246, 0.08);
        }

        .prediction-shap-readable {
            background: rgba(15, 23, 42, 0.66);
        }

        .prediction-shap-readable-title {
            color: #a7f3d0;
            font-size: 13px;
            font-weight: 950;
            margin-bottom: 8px;
        }

        .prediction-shap-readable span {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            line-height: 1.6;
            margin-top: 9px;
        }

        .prediction-band {
            display: grid;
            grid-template-columns: 54px 1fr;
            align-items: center;
            gap: 10px;
            color: #cbd5e1;
            font-size: 13px;
        }

        .prediction-band span {
            color: #67e8f9;
            font-weight: 950;
        }

        .prediction-band.is-active {
            border-color: rgba(52, 211, 153, 0.42);
            background: rgba(16, 185, 129, 0.12);
            color: #ecfeff;
        }

        .prediction-advice-list > div {
            position: relative;
            padding-left: 18px;
        }

        .prediction-advice-list > div::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 0.85em;
            width: 6px;
            height: 6px;
            border-radius: 999px;
            background: #34d399;
            box-shadow: 0 0 10px rgba(52, 211, 153, 0.52);
        }

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

        @media (min-width: 1280px) {
            .prediction-wide-card {
                grid-column: span 1;
            }
        }

        @media (max-width: 900px) {
            .prediction-workbench-grid,
            .prediction-result-overview,
            .prediction-factor-columns {
                grid-template-columns: 1fr;
            }

            .prediction-result-labels,
            .prediction-hero-summary-grid,
            .prediction-overview-quick-grid,
            .prediction-role-summary-main,
            .prediction-role-summary-axes,
            .player-profile-grid,
            .prediction-v5-capability-grid,
            .prediction-v5-comparison-grid,
            .prediction-measurements-grid {
                grid-template-columns: 1fr;
            }

            .prediction-v5-hero {
                flex-direction: column;
            }

            .prediction-result-tabs {
                top: 70px;
                border-radius: 16px;
            }

            .prediction-result-tab {
                min-width: max-content;
            }

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

            .prediction-similar-card em {
                width: fit-content;
            }
            .prediction-measurements-head {
                align-items: center;
            }
        }