:root {
    --rp-blue: #0b5ed7;
    --rp-blue-dark: #084298;
    --rp-ink: #0f172a;
    --rp-muted: #5b6575;
    --rp-bg: #f4f7fb;
    --rp-card: #ffffff;
    --rp-border: #dbe3ee;
    --rp-green: #0f766e;
    --rp-amber: #b45309;
    --rp-red: #b91c1c;
    --rp-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.rank-predictor-page,
.rank-predictor-page * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.rank-predictor-page {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0.85rem;
}

.predictor-hero,
.exam-selector-card,
.tab-card,
.mode-card,
.predictor-form,
.prediction-result,
.result-metric {
    border: 1px solid var(--rp-border);
    border-radius: 8px;
    background: var(--rp-card);
    box-shadow: var(--rp-shadow);
}

.predictor-hero {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(232, 240, 255, 0.95), rgba(255, 255, 255, 0.98) 58%), #fff;
}

.predictor-hero-copy,
.form-heading,
.result-heading,
.forms-column {
    display: grid;
    gap: 0.75rem;
}

.predictor-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.38rem 0.72rem;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--rp-blue);
    font-size: 0.78rem;
    font-weight: 800;
}

.predictor-hero h1,
.form-heading h2,
.result-heading h2 {
    margin: 0;
    color: var(--rp-ink);
    line-height: 1.15;
}

.predictor-hero h1 {
    font-size: clamp(1.8rem, 9vw, 3.3rem);
    overflow-wrap: anywhere;
}

.predictor-hero p,
.privacy-note,
.result-note {
    margin: 0;
    color: var(--rp-muted);
}

.predictor-summary {
    display: grid;
    gap: 0.75rem;
}

.predictor-summary div,
.result-metric {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
}

.predictor-summary div {
    border: 1px solid var(--rp-border);
    border-radius: 8px;
    background: #fff;
}

.predictor-summary span,
.form-heading span,
.result-heading span,
.result-metric span {
    color: var(--rp-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.predictor-summary strong,
.result-metric strong {
    color: var(--rp-ink);
    font-size: 1.08rem;
}

.exam-selector-card,
.tab-card,
.predictor-workspace {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.mode-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.mode-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.7rem;
    align-items: center;
    width: 100%;
    min-height: 88px;
    padding: 0.9rem;
    color: var(--rp-ink);
    text-align: left;
    cursor: pointer;
}

.mode-card:hover,
.mode-card:focus-visible,
.mode-card.is-active {
    border-color: var(--rp-blue);
    background: #eff6ff;
}

.mode-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.mode-card small {
    grid-column: 2;
    color: var(--rp-muted);
    font-weight: 600;
}

.mode-icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #dbeafe;
    color: var(--rp-blue);
}

.tab-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.35rem;
}

.tab-btn {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rp-muted);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.tab-btn.is-active {
    background: var(--rp-blue);
    color: #fff;
}

.predictor-form,
.prediction-result,
.exam-selector-card {
    padding: 1rem;
}

.predictor-form,
.prediction-result,
.form-grid,
.result-grid {
    display: grid;
    gap: 0.85rem;
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: grid;
}

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

.rp-field {
    display: grid;
    gap: 0.4rem;
    color: var(--rp-ink);
    font-size: 0.9rem;
    font-weight: 800;
}

.rp-field input,
.rp-field select {
    width: 100%;
    min-height: 46px;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--rp-border);
    border-radius: 8px;
    background: #fff;
    color: var(--rp-ink);
    font: inherit;
    font-weight: 600;
}

.rp-field input[readonly] {
    background: #f8fafc;
    color: var(--rp-blue-dark);
}

.rp-field input:focus,
.rp-field select:focus {
    border-color: var(--rp-blue);
    outline: 3px solid rgba(11, 94, 215, 0.14);
}

.rp-field.has-error input,
.rp-field.has-error select,
.consent-row.has-error {
    border-color: #fecaca;
    background: #fff7f7;
}

.online-only {
    display: none;
}

.rank-predictor-page[data-mode="online"] .online-only {
    display: grid;
}

.manual-fallback {
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    background: #fff7ed;
    color: var(--rp-amber);
    font-weight: 800;
}

.manual-fallback span {
    color: #7c2d12;
    font-size: 0.9rem;
    font-weight: 700;
}

.rank-predictor-page:not(.has-stage) .stage-field,
.rank-predictor-page:not(.has-shift) .shift-field {
    display: none;
}

.consent-row,
.privacy-note,
.result-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid var(--rp-border);
    border-radius: 8px;
    background: #f8fafc;
    font-weight: 700;
}

.consent-row input {
    width: 18px;
    height: 18px;
    margin-top: 0.18rem;
    accent-color: var(--rp-blue);
}

.form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.form-actions .btn {
    width: 100%;
}

.form-message {
    padding: 0.8rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 800;
}

.form-message.error {
    border-color: #fecaca;
    background: #fef2f2;
    color: var(--rp-red);
}

.form-message.warning {
    border-color: #fed7aa;
    background: #fff7ed;
    color: var(--rp-amber);
}

.form-message.success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: var(--rp-green);
}

.rank-predictor-page .hidden {
    display: none !important;
}

.result-metric {
    box-shadow: none;
}

.result-metric.featured {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.result-metric.featured strong {
    color: var(--rp-blue);
    font-size: 1.8rem;
}

@media (min-width: 640px) {
    .mode-section,
    .form-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid,
    .result-grid,
    .predictor-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid.compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .rank-predictor-page {
        padding: 1.2rem;
    }

    .predictor-hero {
        grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
        align-items: center;
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .predictor-workspace {
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
        align-items: start;
    }

    .prediction-result {
        position: sticky;
        top: 92px;
    }
}

@media (max-width: 767px) {
    .sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin: 0 -1rem -1rem;
        padding: 0.7rem 1rem;
        border-top: 1px solid var(--rp-border);
        background: rgba(255, 255, 255, 0.98);
    }
}

@media (max-width: 425px) {
    .rank-predictor-page {
        padding: 0.75rem;
    }

    .predictor-hero,
    .predictor-form,
    .prediction-result,
    .exam-selector-card {
        padding: 0.85rem;
    }

    .mode-card {
        min-height: 84px;
    }
}

@media (max-width: 320px) {
    .rank-predictor-page {
        padding: 0.6rem;
    }

    .predictor-hero h1 {
        font-size: 1.6rem;
    }

    .mode-card,
    .rp-field input,
    .rp-field select,
    .form-actions .btn,
    .tab-btn {
        font-size: 0.9rem;
    }
}