/* Professional compatibility theme.
   Kept at this path because pages already load it after their main styles. */
:root {
    --green: #1155cc;
    --green-dark: #0b357f;
    --green-soft: #eaf2ff;
    --gold: #f5a623;
    --gold-soft: #fff5df;
    --page-bg: #f5f7fb;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-input: #ffffff;
    --border: #d8e0ec;
    --border-soft: #e8edf5;
    --text: #172033;
    --text-secondary: #334155;
    --text-muted: #667085;
    --text-dim: #98a2b3;
    --text-inverse: #ffffff;
    --shadow: rgba(16, 24, 40, 0.10);
    --shadow-soft: rgba(16, 24, 40, 0.06);
    --danger: #c3262f;
    --danger-soft: #fff1f2;
    --correct-bg: #ecfdf5;
    --correct-border: #12805c;
    --wrong-bg: #fff1f2;
    --wrong-border: #c3262f;
    --selected-blue: #1155cc;
    --radius: 8px;
    --radius-sm: 6px;
    --focus-ring: 0 0 0 4px rgba(17, 85, 204, 0.14);
}

html { background: var(--page-bg); }

body {
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.nav,
.top-bar,
.header {
    backdrop-filter: blur(12px);
}

.btn,
.nav-login,
.btn-hero-primary,
.btn-hero-secondary,
.btn-pricing,
.btn-submit,
.count-chip,
.lb-tab,
.q-nav-btn {
    border-radius: var(--radius-sm);
    letter-spacing: 0;
    text-transform: none;
}

.card,
.feature-card,
.pricing-card,
.student-card,
.payment-box,
.contact-form,
.contact-info-card,
.about-stat,
.question-card,
.option-card,
.past-paper-card,
.stats-kpi-card,
.profile-settings,
.friend-card,
.progress-chart-card,
.results-hero,
.modal-box,
.empty-state,
.empty-state-v2 {
    border-radius: var(--radius);
}

input,
textarea,
select,
.form-control,
.form-select,
.form-input,
.count-custom {
    border-radius: var(--radius-sm);
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-input:focus {
    border-color: var(--green);
    box-shadow: var(--focus-ring);
    outline: none;
}

.sidebar,
.admin-wrapper .sidebar {
    background: #0b1220;
}

.score-fill {
    stroke: var(--green);
}

.score-track {
    stroke: var(--border-soft);
}

.whatsapp-float {
    box-shadow: 0 12px 36px rgba(18, 128, 92, 0.28);
}