/*
 * Qalam LMS Unified Design System 1.1
 *
 * Historical qalam-050/070/081/140/150/160/180/190/200, Tutor, student and
 * QLive files still provide behaviour and responsive rules. Their visual
 * variables are bridged here to one semantic palette. This file is loaded
 * after those files on the managed admin shell and public surfaces.
 */
:root {
    --qalam-ui-primary: var(--qalam-primary, var(--q-ref-primary, #6d4aff));
    --qalam-ui-primary-2: var(--qalam-primary-2, var(--qalam-secondary, var(--q-ref-secondary, #8b5cf6)));
    --qalam-ui-accent: var(--qalam-accent, var(--q-ref-accent, #f2b84b));
    --qalam-ui-bg: var(--qalam-bg, var(--q-ref-bg, #f7f8fc));
    --qalam-ui-surface: var(--qalam-surface, var(--q-ref-surface, #ffffff));
    --qalam-ui-surface-2: var(--qalam-surface-2, var(--q-ref-surface-2, #f1f4f9));
    --qalam-ui-surface-3: var(--qalam-surface-3, #e8edf5);
    --qalam-ui-text: var(--qalam-text, var(--q-ref-text, #172033));
    --qalam-ui-muted: var(--qalam-muted, var(--q-ref-muted, #738099));
    --qalam-ui-border: var(--qalam-border, var(--q-ref-border, #e5eaf3));
    --qalam-ui-success: #16855f;
    --qalam-ui-danger: #c84d62;
    --qalam-ui-warning: #bf7616;
    --qalam-ui-sidebar: #111827;
    --qalam-ui-sidebar-text: #f8fafc;
    --qalam-ui-primary-soft: color-mix(in srgb, var(--qalam-ui-primary) 12%, transparent);
    --qalam-ui-positive-bg: color-mix(in srgb, var(--qalam-ui-success) 12%, var(--qalam-ui-surface));
    --qalam-ui-warning-bg: color-mix(in srgb, var(--qalam-ui-warning) 12%, var(--qalam-ui-surface));
    --qalam-ui-danger-bg: color-mix(in srgb, var(--qalam-ui-danger) 12%, var(--qalam-ui-surface));
    --qalam-ui-radius-sm: 10px;
    --qalam-ui-radius-md: 14px;
    --qalam-ui-radius-lg: 20px;
    --qalam-ui-shadow: 0 14px 40px color-mix(in srgb, var(--qalam-ui-text) 7%, transparent);
}

/* One source of truth for the legacy variable families. */
body.qalam-admin-app,
body.qalam-reference-body,
body.qalam-reference-ui,
body.qalam-platform-home,
body.qalam-student-ui,
body.qalam-qlive-page,
body.qalam-login-page {
    --qa-bg: var(--qalam-ui-bg);
    --qa-card: var(--qalam-ui-surface);
    --qa-ink: var(--qalam-ui-text);
    --qa-muted: var(--qalam-ui-muted);
    --qa-line: var(--qalam-ui-border);
    --qa-brand: var(--qalam-ui-primary);
    --qa-brand2: var(--qalam-ui-primary-2);
    --qa-soft: var(--qalam-ui-primary-soft);
    --qa-good: var(--qalam-ui-success);
    --qa-danger: var(--qalam-ui-danger);
    --qalam-050: var(--qalam-ui-primary);
    --qalam-050-dark: var(--qalam-ui-primary-2);
    --qalam-050-soft: var(--qalam-ui-primary-soft);
    --qalam-050-border: var(--qalam-ui-border);
    --q-bg: var(--qalam-ui-bg);
    --q-surface: var(--qalam-ui-surface);
    --q-surface-2: var(--qalam-ui-surface-2);
    --q-surface-3: var(--qalam-ui-surface-3);
    --q-text: var(--qalam-ui-text);
    --q-text-2: var(--qalam-ui-text);
    --q-muted: var(--qalam-ui-muted);
    --q-border: var(--qalam-ui-border);
    --q-border-2: var(--qalam-ui-border);
    --q-primary: var(--qalam-ui-primary);
    --q-primary-2: var(--qalam-ui-primary-2);
    --q-primary-3: var(--qalam-ui-primary-2);
    --q-primary-dark: var(--qalam-ui-primary-2);
    --q16-primary: var(--qalam-ui-primary);
    --q16-primary2: var(--qalam-ui-primary-2);
    --q16-bg: var(--qalam-ui-bg);
    --q16-surface: var(--qalam-ui-surface);
    --q16-text: var(--qalam-ui-text);
    --q16-muted: var(--qalam-ui-muted);
    --q16-line: var(--qalam-ui-border);
    --qlive-primary: var(--qalam-ui-primary);
    --qlive-primary-strong: var(--qalam-ui-primary-2);
    --qlive-primary-soft: var(--qalam-ui-primary-soft);
    --qlive-bg: var(--qalam-ui-bg);
    --qlive-surface: var(--qalam-ui-surface);
    --qlive-surface-soft: var(--qalam-ui-surface-2);
    --qlive-text: var(--qalam-ui-text);
    --qlive-muted: var(--qalam-ui-muted);
    --qlive-line: var(--qalam-ui-border);
    --qlive-teal: var(--qalam-ui-primary-2);
    --qlive-green: var(--qalam-ui-success);
    --qlive-orange: var(--qalam-ui-warning);
    --qlive-danger: var(--qalam-ui-danger);
}

/* Public reference pages use q-ref tokens; the same semantic palette wins. */
body.qalam-reference-body,
body.qalam-reference-ui {
    --qalam-ui-primary: var(--q-ref-primary, #6d4aff);
    --qalam-ui-primary-2: var(--q-ref-secondary, #8b5cf6);
    --qalam-ui-accent: var(--q-ref-accent, #f2b84b);
    --qalam-ui-bg: var(--q-ref-bg, #f7f8fc);
    --qalam-ui-surface: var(--q-ref-surface, #ffffff);
    --qalam-ui-surface-2: var(--q-ref-surface-2, #f1f4f9);
    --qalam-ui-text: var(--q-ref-text, #172033);
    --qalam-ui-muted: var(--q-ref-muted, #738099);
    --qalam-ui-border: var(--q-ref-border, #e5eaf3);
}

body.qalam-platform-home {
    --qalam-ui-primary: var(--qalam-primary, #6d4aff);
    --qalam-ui-primary-2: var(--qalam-primary-2, #8b5cf6);
    --qalam-ui-accent: var(--qalam-accent, #f2b84b);
    --qalam-ui-bg: var(--qalam-bg, #f7f8fc);
    --qalam-ui-surface: var(--qalam-surface, #ffffff);
    --qalam-ui-text: var(--qalam-text, #172033);
    --qalam-ui-muted: var(--qalam-muted, #738099);
    --qalam-ui-border: var(--qalam-border, #e5eaf3);
}

html[data-qalam-mode="dark"] body.qalam-admin-app,
html[data-qalam-mode="dark"] body.qalam-reference-body,
html[data-qalam-mode="dark"] body.qalam-reference-ui,
html[data-qalam-mode="dark"] body.qalam-platform-home,
html[data-qalam-mode="dark"] body.qalam-student-ui,
html[data-qalam-mode="dark"] body.qalam-qlive-page,
html[data-qalam-mode="dark"] body.qalam-login-page {
    --qalam-ui-bg: #0b1020;
    --qalam-ui-surface: #141b2a;
    --qalam-ui-surface-2: #1b2435;
    --qalam-ui-surface-3: #222d41;
    --qalam-ui-text: #f1f4fb;
    --qalam-ui-muted: #a5b0c3;
    --qalam-ui-border: #2d3950;
    --qalam-ui-sidebar: #080d18;
    color-scheme: dark;
}

html[data-qalam-mode="dark"] body.qalam-reference-body,
html[data-qalam-mode="dark"] body.qalam-reference-ui {
    --q-ref-bg: var(--qalam-ui-bg);
    --q-ref-surface: var(--qalam-ui-surface);
    --q-ref-surface-2: var(--qalam-ui-surface-2);
    --q-ref-text: var(--qalam-ui-text);
    --q-ref-muted: var(--qalam-ui-muted);
    --q-ref-border: var(--qalam-ui-border);
}

html[data-qalam-mode="dark"] body.qalam-platform-home {
    --qalam-bg: var(--qalam-ui-bg);
    --qalam-surface: var(--qalam-ui-surface);
    --qalam-text: var(--qalam-ui-text);
    --qalam-muted: var(--qalam-ui-muted);
    --qalam-border: var(--qalam-ui-border);
}

/* Shared public foundations. */
body.qalam-platform-home,
body.qalam-reference-body,
body.qalam-reference-ui,
body.qalam-student-ui,
body.qalam-qlive-page,
body.qalam-login-page {
    background: var(--qalam-ui-bg) !important;
    color: var(--qalam-ui-text) !important;
    font-family: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

body.qalam-platform-home a,
body.qalam-reference-body a,
body.qalam-reference-ui a,
body.qalam-student-ui a,
body.qalam-qlive-page a,
body.qalam-login-page a {
    color: var(--qalam-ui-primary);
}

html[data-qalam-mode="dark"] body.qalam-platform-home,
html[data-qalam-mode="dark"] body.qalam-reference-body,
html[data-qalam-mode="dark"] body.qalam-reference-ui,
html[data-qalam-mode="dark"] body.qalam-student-ui,
html[data-qalam-mode="dark"] body.qalam-qlive-page,
html[data-qalam-mode="dark"] body.qalam-login-page {
    background: var(--qalam-ui-bg) !important;
    color: var(--qalam-ui-text) !important;
}

body.qalam-reference-body .q-ref-app,
body.qalam-reference-ui .q-ref-app,
body.qalam-student-ui .tutor-dashboard-layout,
body.qalam-student-ui .tutor-dashboard-body,
body.qalam-student-ui .tutor-learning-area,
body.qalam-qlive-page .qalam-qlive-page,
body.qalam-login-page .qalam-login-shell {
    background: var(--qalam-ui-bg) !important;
    color: var(--qalam-ui-text) !important;
}

body.qalam-reference-body .q-ref-header,
body.qalam-reference-ui .q-ref-header,
body.qalam-reference-body .q-ref-mobile-menu,
body.qalam-reference-ui .q-ref-mobile-menu,
body.qalam-student-ui .tutor-dashboard-sidebar,
body.qalam-student-ui .tutor-dashboard-header-inner,
body.qalam-student-ui .tutor-dashboard-nav-mobile {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

body.qalam-reference-body .q-ref-course-card,
body.qalam-reference-body .q-ref-teacher-card,
body.qalam-reference-body .q-ref-subject-card,
body.qalam-reference-body .q-ref-grade-card,
body.qalam-reference-body .q-ref-feature-card,
body.qalam-reference-body .q-ref-empty,
body.qalam-reference-ui .q-ref-course-card,
body.qalam-reference-ui .q-ref-teacher-card,
body.qalam-reference-ui .q-ref-subject-card,
body.qalam-reference-ui .q-ref-grade-card,
body.qalam-reference-ui .q-ref-feature-card,
body.qalam-reference-ui .q-ref-empty,
body.qalam-student-ui .tutor-card,
body.qalam-student-ui [class*="tutor-card"],
body.qalam-student-ui [class*="dashboard-page-card"],
body.qalam-student-ui [class*="assignment"],
body.qalam-student-ui [class*="subscription"],
body.qalam-student-ui [class*="notification"] {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
    box-shadow: var(--qalam-ui-shadow) !important;
}

body.qalam-platform-home .qalam-public-header,
body.qalam-platform-home .qalam-section,
body.qalam-platform-home .qalam-course-card,
body.qalam-platform-home .qalam-empty-public {
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

body.qalam-platform-home .qalam-public-header,
body.qalam-platform-home .qalam-course-card,
body.qalam-platform-home .qalam-empty-public,
body.qalam-platform-home .qalam-about {
    background: var(--qalam-ui-surface) !important;
}

body.qalam-platform-home .qalam-hero,
body.qalam-platform-home .qalam-contact-section,
body.qalam-reference-body .q-ref-cta,
body.qalam-reference-ui .q-ref-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--qalam-ui-primary) 84%, #0b1020), var(--qalam-ui-primary-2)) !important;
}

body.qalam-platform-home input,
body.qalam-platform-home select,
body.qalam-platform-home textarea,
body.qalam-reference-body input,
body.qalam-reference-body select,
body.qalam-reference-body textarea,
body.qalam-reference-ui input,
body.qalam-reference-ui select,
body.qalam-reference-ui textarea,
body.qalam-student-ui input,
body.qalam-student-ui select,
body.qalam-student-ui textarea,
body.qalam-login-page input,
body.qalam-login-page select,
body.qalam-login-page textarea {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

body.qalam-reference-body h1,
body.qalam-reference-body h2,
body.qalam-reference-body h3,
body.qalam-reference-body h4,
body.qalam-reference-ui h1,
body.qalam-reference-ui h2,
body.qalam-reference-ui h3,
body.qalam-reference-ui h4,
body.qalam-platform-home h1,
body.qalam-platform-home h2,
body.qalam-platform-home h3,
body.qalam-student-ui h1,
body.qalam-student-ui h2,
body.qalam-student-ui h3,
body.qalam-student-ui h4,
body.qalam-login-page h1,
body.qalam-login-page h2,
body.qalam-login-page h3 {
    color: var(--qalam-ui-text) !important;
}

body.qalam-reference-body p,
body.qalam-reference-ui p,
body.qalam-platform-home p,
body.qalam-student-ui p,
body.qalam-login-page p,
body.qalam-qlive-page p {
    color: var(--qalam-ui-muted);
}

/* Managed Qalam admin shell. */
html[data-qalam-mode] body.qalam-admin-app,
html[data-qalam-mode] body.qalam-admin-app .qalam-shell,
html[data-qalam-mode] body.qalam-admin-app .qalam-main,
html[data-qalam-mode] body.qalam-admin-app .qalam-content {
    background: var(--qalam-ui-bg) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app,
html[data-qalam-mode] body.qalam-admin-app input,
html[data-qalam-mode] body.qalam-admin-app select,
html[data-qalam-mode] body.qalam-admin-app textarea,
html[data-qalam-mode] body.qalam-admin-app button {
    font-family: "Cairo", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-sidebar {
    background: var(--qalam-ui-sidebar) !important;
    color: var(--qalam-ui-sidebar-text) !important;
    border-color: transparent !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-logo-mark {
    background: linear-gradient(145deg, var(--qalam-ui-primary-2), var(--qalam-ui-primary)) !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--qalam-ui-primary) 30%, transparent) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-nav a {
    color: color-mix(in srgb, var(--qalam-ui-sidebar-text) 72%, transparent) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-nav a:hover,
html[data-qalam-mode] body.qalam-admin-app .qalam-nav a.is-active {
    background: color-mix(in srgb, var(--qalam-ui-primary) 24%, transparent) !important;
    color: var(--qalam-ui-sidebar-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qalam-ui-primary-2) 42%, transparent) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-sidebar-foot a {
    color: color-mix(in srgb, var(--qalam-ui-sidebar-text) 68%, transparent) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-topbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-search,
html[data-qalam-mode] body.qalam-admin-app .qalam-user-menu,
html[data-qalam-mode] body.qalam-admin-app .qalam-mode-toggle {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-search input,
html[data-qalam-mode] body.qalam-admin-app .qalam-user-toggle,
html[data-qalam-mode] body.qalam-admin-app .qalam-user-menu a,
html[data-qalam-mode] body.qalam-admin-app h1,
html[data-qalam-mode] body.qalam-admin-app h2,
html[data-qalam-mode] body.qalam-admin-app h3,
html[data-qalam-mode] body.qalam-admin-app h4,
html[data-qalam-mode] body.qalam-admin-app strong,
html[data-qalam-mode] body.qalam-admin-app label {
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app p,
html[data-qalam-mode] body.qalam-admin-app small,
html[data-qalam-mode] body.qalam-admin-app .qalam-muted,
html[data-qalam-mode] body.qalam-admin-app .qalam-page-head p,
html[data-qalam-mode] body.qalam-admin-app .qalam-stat-card span {
    color: var(--qalam-ui-muted) !important;
}

/* The page itself is transparent; only intentional panels become surfaces. */
html[data-qalam-mode] body.qalam-admin-app .wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-page-head,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-060-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-070-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-081-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-180-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-manager,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-wrap {
    background: transparent !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-stat-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-surface-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-nav,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-report-embed,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table-wrap,
html[data-qalam-mode] body.qalam-admin-app .qalam-080-tool-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-080-progress,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-panel-full,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-bank-card,
html[data-qalam-mode] body.qalam-admin-app .tutor-report-wrap,
html[data-qalam-mode] body.qalam-admin-app .tutor-report,
html[data-qalam-mode] body.qalam-admin-app .tutor-backend-settings-page,
html[data-qalam-mode] body.qalam-admin-app .tutor-settings-card,
html[data-qalam-mode] body.qalam-admin-app .tutor-admin-container,
html[data-qalam-mode] body.qalam-admin-app .tutor-admin-wrap {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
    box-shadow: var(--qalam-ui-shadow) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-050-hero,
html[data-qalam-mode] body.qalam-admin-app .qalam-admin-hero,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-manager-hero,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-hero {
    background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--qalam-ui-primary-2) 42%, transparent), transparent 36%), linear-gradient(135deg, color-mix(in srgb, var(--qalam-ui-primary) 36%, #111827), var(--qalam-ui-primary)) !important;
    border-color: color-mix(in srgb, var(--qalam-ui-primary) 42%, var(--qalam-ui-border)) !important;
    color: #fff !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-050-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-hero h2,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-hero p,
html[data-qalam-mode] body.qalam-admin-app .qalam-admin-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-admin-hero h2,
html[data-qalam-mode] body.qalam-admin-app .qalam-admin-hero p,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-manager-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-manager-hero p,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-hero p {
    color: #fff !important;
}

/* High-specificity controls neutralize old white !important declarations. */
html[data-qalam-mode] body.qalam-admin-app input:not([type="checkbox"]):not([type="radio"]),
html[data-qalam-mode] body.qalam-admin-app select,
html[data-qalam-mode] body.qalam-admin-app textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-filterbar input,
html[data-qalam-mode] body.qalam-admin-app .qalam-filterbar select,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-toolbar input,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-toolbar select,
html[data-qalam-mode] body.qalam-admin-app .qalam-180-toolbar input,
html[data-qalam-mode] body.qalam-admin-app .qalam-180-toolbar select,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-form input,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-form select,
html[data-qalam-mode] body.qalam-admin-app .qalam-settings-form textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-access-password input,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-edit-form input,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-edit-form select,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-edit-form textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-bank-filter-form input,
html[data-qalam-mode] body.qalam-admin-app .qalam-bank-filter-form select,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-question-form input,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-question-form select,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-question-form textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-quiz-settings-grid input,
html[data-qalam-mode] body.qalam-admin-app .qalam-quiz-settings-grid select,
html[data-qalam-mode] body.qalam-admin-app .qalam-quiz-settings-grid textarea {
    background: var(--qalam-ui-surface-2) !important;
    border: 1px solid var(--qalam-ui-border) !important;
    border-radius: var(--qalam-ui-radius-sm) !important;
    color: var(--qalam-ui-text) !important;
    box-shadow: none !important;
}

html[data-qalam-mode] body.qalam-admin-app input::placeholder,
html[data-qalam-mode] body.qalam-admin-app textarea::placeholder {
    color: var(--qalam-ui-muted) !important;
    opacity: .82;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-filterbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-toolbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-180-toolbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-bank-filter-form,
html[data-qalam-mode] body.qalam-admin-app .qalam-bank-bulkbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-native-editor-bar,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-layout,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-sidebar,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-main,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-generator,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-question-form,
html[data-qalam-mode] body.qalam-admin-app .qalam-question-count-grid label,
html[data-qalam-mode] body.qalam-admin-app .qalam-bank-picker label,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-credit-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-ai-total,
html[data-qalam-mode] body.qalam-admin-app .qalam-access-toggle,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-wrap .qalam-180-toolbar {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-200-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-card.is-locked,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-product-icon,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-image,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-icon,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-destination,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-toggle-row,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-facts > div {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-200-wrap .qalam-050-search,
html[data-qalam-mode] body.qalam-admin-app .qalam-200-wrap .qalam-180-toolbar select {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app table,
html[data-qalam-mode] body.qalam-admin-app .widefat,
html[data-qalam-mode] body.qalam-admin-app .striped,
html[data-qalam-mode] body.qalam-admin-app tbody,
html[data-qalam-mode] body.qalam-admin-app tr,
html[data-qalam-mode] body.qalam-admin-app td,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table tbody,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table tr,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table td,
html[data-qalam-mode] body.qalam-admin-app .tutor-table tr,
html[data-qalam-mode] body.qalam-admin-app .tutor-table td {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app th,
html[data-qalam-mode] body.qalam-admin-app thead,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table thead,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-table th,
html[data-qalam-mode] body.qalam-admin-app .tutor-table thead,
html[data-qalam-mode] body.qalam-admin-app .tutor-table th {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app button,
html[data-qalam-mode] body.qalam-admin-app .button,
html[data-qalam-mode] body.qalam-admin-app input[type="submit"],
html[data-qalam-mode] body.qalam-admin-app input[type="button"] {
    border-radius: var(--qalam-ui-radius-sm) !important;
    font: inherit !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-primary-action,
html[data-qalam-mode] body.qalam-admin-app .qalam-primary-button,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-primary,
html[data-qalam-mode] body.qalam-admin-app .qalam-secondary-action,
html[data-qalam-mode] body.qalam-admin-app .button-primary,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-primary-button {
    background: linear-gradient(135deg, var(--qalam-ui-primary-2), var(--qalam-ui-primary)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--qalam-ui-primary) 22%, transparent) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-secondary-button,
html[data-qalam-mode] body.qalam-admin-app .qalam-danger-button,
html[data-qalam-mode] body.qalam-admin-app .qalam-180-actions .button:first-child:not(:last-child),
html[data-qalam-mode] body.qalam-admin-app .qalam-200-card .qalam-180-actions .button:first-child:not(:last-child) {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-primary) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-danger-button,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-cancel-button {
    color: var(--qalam-ui-danger) !important;
    border-color: color-mix(in srgb, var(--qalam-ui-danger) 38%, var(--qalam-ui-border)) !important;
    background: var(--qalam-ui-danger-bg) !important;
}

html[data-qalam-mode] body.qalam-admin-app a,
html[data-qalam-mode] body.qalam-admin-app .qalam-back-link,
html[data-qalam-mode] body.qalam-admin-app .qalam-row-action,
html[data-qalam-mode] body.qalam-admin-app .qalam-pagination a {
    color: var(--qalam-ui-primary) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-quick-item:hover,
html[data-qalam-mode] body.qalam-admin-app .qalam-surface-card:hover,
html[data-qalam-mode] body.qalam-admin-app .qalam-row:hover,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-person-row:hover,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-destination:hover {
    background: var(--qalam-ui-primary-soft) !important;
    border-color: color-mix(in srgb, var(--qalam-ui-primary) 40%, var(--qalam-ui-border)) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-status-badge,
html[data-qalam-mode] body.qalam-admin-app .qalam-addon-status,
html[data-qalam-mode] body.qalam-admin-app .qalam-dot-status,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-status,
html[data-qalam-mode] body.qalam-admin-app .qalam-status-pill {
    background: var(--qalam-ui-primary-soft) !important;
    border-color: color-mix(in srgb, var(--qalam-ui-primary) 22%, var(--qalam-ui-border)) !important;
    color: var(--qalam-ui-primary) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-addon-status.is-enabled,
html[data-qalam-mode] body.qalam-admin-app .qalam-dot-status.on,
html[data-qalam-mode] body.qalam-admin-app .qalam-channel-state.is-connected {
    background: var(--qalam-ui-positive-bg) !important;
    color: var(--qalam-ui-success) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-addon-note,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-note,
html[data-qalam-mode] body.qalam-admin-app .qalam-connection-banner.is-pending {
    background: var(--qalam-ui-warning-bg) !important;
    border-color: color-mix(in srgb, var(--qalam-ui-warning) 28%, var(--qalam-ui-border)) !important;
    color: var(--qalam-ui-warning) !important;
}

/* QLive admin and participant surfaces inherit the exact same tokens. */
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-admin,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-surface,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-google-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-session-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-admin-session,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-finance-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-user-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-calendar-card,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-create-panel,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-list-toolbar,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-day-tabs,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-weekly-slots {
    background: var(--qalam-ui-surface) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-admin-hero,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--qalam-ui-primary) 36%, #111827), var(--qalam-ui-primary)) !important;
    color: #fff !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-admin-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-admin-hero p,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-hero h1,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-hero p {
    color: #fff !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-form input,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-form select,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-form textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-user-field input,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-user-field select,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-phone-field input,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-money-field input,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-country-trigger {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-day-tab.is-active,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-primary-button,
html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-join-button {
    background: linear-gradient(135deg, var(--qalam-ui-primary-2), var(--qalam-ui-primary)) !important;
    color: #fff !important;
    border-color: transparent !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-qlive-empty,
html[data-qalam-mode] body.qalam-admin-app .qalam-empty,
html[data-qalam-mode] body.qalam-admin-app .qalam-050-empty,
html[data-qalam-mode] body.qalam-admin-app .qalam-surface-message,
html[data-qalam-mode] body.qalam-admin-app .qalam-190-empty {
    background: var(--qalam-ui-surface-2) !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-muted) !important;
}

html[data-qalam-mode] body.qalam-admin-app :focus-visible,
body.qalam-reference-body :focus-visible,
body.qalam-reference-ui :focus-visible,
body.qalam-platform-home :focus-visible,
body.qalam-student-ui :focus-visible,
body.qalam-qlive-page :focus-visible,
body.qalam-login-page :focus-visible {
    outline: 3px solid color-mix(in srgb, var(--qalam-ui-primary) 34%, transparent) !important;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    body.qalam-admin-app .qalam-content { padding-inline: 14px; }
    body.qalam-admin-app .qalam-filterbar,
    body.qalam-admin-app .qalam-addon-toolbar,
    body.qalam-admin-app .qalam-180-toolbar { align-items: stretch; flex-direction: column; }
    body.qalam-admin-app .qalam-filterbar input,
    body.qalam-admin-app .qalam-filterbar select,
    body.qalam-admin-app .qalam-addon-toolbar input,
    body.qalam-admin-app .qalam-addon-toolbar select,
    body.qalam-admin-app .qalam-180-toolbar input,
    body.qalam-admin-app .qalam-180-toolbar select { width: 100%; min-width: 0; }
}

/* Payment and native surfaces must consume the same Qalam tokens in both modes. */
html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface select,
html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel select,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel textarea,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-surface input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-surface select,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-surface textarea,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt select,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt textarea {
    background-color: var(--qalam-ui-surface-2) !important;
    background-image: none !important;
    border-color: var(--qalam-ui-border) !important;
    color: var(--qalam-ui-text) !important;
    caret-color: var(--qalam-ui-primary) !important;
    box-shadow: none !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface input::placeholder,
html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface textarea::placeholder,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel input::placeholder,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel textarea::placeholder,
html[data-qalam-mode] body.qalam-payment-orders-surface input::placeholder,
html[data-qalam-mode] body.qalam-payment-orders-surface textarea::placeholder,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt input::placeholder,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt textarea::placeholder {
    color: var(--qalam-ui-muted) !important;
    opacity: 1 !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface option,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-profile-panel option,
html[data-qalam-mode] body.qalam-payment-orders-surface option,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt option {
    background-color: var(--qalam-ui-surface) !important;
    color: var(--qalam-ui-text) !important;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-native-surface input[type="file"]::file-selector-button,
html[data-qalam-mode] body.qalam-payment-profile-panel input[type="file"]::file-selector-button,
html[data-qalam-mode] body.qalam-payment-orders-surface input[type="file"]::file-selector-button,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt input[type="file"]::file-selector-button {
    background: var(--qalam-ui-primary) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    cursor: pointer;
    margin-inline-end: 10px;
    padding: 8px 12px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-page {
    margin-block-end: 24px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-stat {
    align-items: center;
    background: var(--qalam-ui-surface-2);
    border: 1px solid var(--qalam-ui-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 110px;
    padding: 12px 16px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-stat strong {
    color: var(--qalam-ui-primary);
    font-size: 28px;
    line-height: 1;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-orders-stat span,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-card-head span,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-data span,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student-note > span {
    color: var(--qalam-ui-muted);
    font-size: 12px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-card {
    background: var(--qalam-ui-surface-2);
    border: 1px solid var(--qalam-ui-border);
    border-radius: 18px;
    color: var(--qalam-ui-text);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 18px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-card-head,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-actions,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-head,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student strong,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--qalam-ui-primary) 16%, var(--qalam-ui-surface));
    border-radius: 12px;
    color: var(--qalam-ui-primary);
    display: inline-flex;
    flex: 0 0 40px;
    font-size: 18px;
    font-weight: 800;
    height: 40px;
    justify-content: center;
    width: 40px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status {
    background: color-mix(in srgb, var(--qalam-ui-muted) 14%, transparent);
    border-radius: 999px;
    color: var(--qalam-ui-muted);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 9px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status.is-pending,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status.is-reviewing {
    background: color-mix(in srgb, #f59e0b 16%, transparent);
    color: #d97706;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status.is-approved {
    background: color-mix(in srgb, #10b981 16%, transparent);
    color: #059669;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status.is-rejected,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-status.is-expired {
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #dc2626;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-data {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-data > div {
    border-top: 1px solid var(--qalam-ui-border);
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding-top: 9px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-data strong {
    color: var(--qalam-ui-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student-note {
    background: color-mix(in srgb, var(--qalam-ui-primary) 8%, var(--qalam-ui-surface));
    border: 1px solid color-mix(in srgb, var(--qalam-ui-primary) 18%, var(--qalam-ui-border));
    border-radius: 12px;
    padding: 10px 12px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-student-note p {
    color: var(--qalam-ui-text);
    font-size: 13px;
    margin: 5px 0 0;
    white-space: pre-wrap;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-actions {
    flex-wrap: wrap;
    margin-top: auto;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-review-form {
    display: inline-flex;
    margin: 0;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-actions .qalam-primary-action,
html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-actions .qalam-secondary-action {
    font-size: 12px;
    min-height: 38px;
    padding: 8px 12px;
}

html[data-qalam-mode] body.qalam-admin-app .qalam-payment-order-actions .is-danger {
    color: #dc2626;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt {
    background: var(--qalam-ui-surface);
    border: 1px solid var(--qalam-ui-border);
    border-radius: 22px;
    box-shadow: var(--qalam-ui-shadow);
    color: var(--qalam-ui-text);
    margin: 24px auto;
    max-width: 760px;
    padding: clamp(20px, 4vw, 32px);
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--qalam-ui-border);
    padding-bottom: 18px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt h3 {
    color: var(--qalam-ui-text);
    margin: 4px 0 7px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt p {
    color: var(--qalam-ui-muted);
    margin: 0;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-order-number {
    background: color-mix(in srgb, var(--qalam-ui-primary) 12%, var(--qalam-ui-surface));
    border: 1px solid color-mix(in srgb, var(--qalam-ui-primary) 28%, var(--qalam-ui-border));
    border-radius: 12px;
    color: var(--qalam-ui-primary);
    font-size: 13px;
    padding: 10px 12px;
    white-space: nowrap;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary {
    gap: 12px;
    margin: 18px 0;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary > div {
    background: var(--qalam-ui-surface-2);
    border: 1px solid var(--qalam-ui-border);
    border-radius: 14px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary span,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form label > span,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form small {
    color: var(--qalam-ui-muted);
    font-size: 12px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary strong {
    color: var(--qalam-ui-text);
    font-size: 16px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-instructions,
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-submitted {
    background: color-mix(in srgb, var(--qalam-ui-primary) 7%, var(--qalam-ui-surface));
    border: 1px solid var(--qalam-ui-border);
    border-radius: 14px;
    color: var(--qalam-ui-text);
    margin: 14px 0;
    padding: 12px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-submitted {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-submitted strong {
    color: var(--qalam-ui-primary);
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-form-grid .is-wide {
    grid-column: 1 / -1;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form textarea {
    border-radius: 11px;
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form input[type="file"] {
    min-height: 48px;
    padding: 5px;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form textarea {
    resize: vertical;
}

html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-form .qalam-primary-action {
    margin-top: 18px;
    width: 100%;
}

@media (max-width: 600px) {
    html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-receipt-head,
    html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-payment-summary {
        align-items: stretch;
        flex-direction: column;
    }

    html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-form-grid {
        grid-template-columns: 1fr;
    }

    html[data-qalam-mode] body.qalam-reference-body .qalam-vodafone-form-grid .is-wide {
        grid-column: auto;
    }
}

/* One light-only contract for every internal Qalam surface. Public home keeps
 * its appearance switch; dashboard controls are intentionally unavailable. */
body.qalam-admin-app [data-qalam-mode-toggle],
body.qalam-admin-app [data-qlive-theme-toggle],
body.qalam-internal-surface:not(.qalam-surface-home) [data-qalam-mode-toggle],
body.qalam-internal-surface:not(.qalam-surface-home) [data-qlive-theme-toggle] {
    display: none !important;
}

/* Vodafone's post-order receipt is intentionally a focused modal. */
.qalam-payment-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.56);backdrop-filter:blur(8px)}
.qalam-payment-modal.is-open{display:flex}
.qalam-payment-modal-dialog{position:relative;width:min(700px,100%);max-height:min(90vh,760px);overflow:auto;border-radius:24px;background:var(--qalam-ui-surface,#fff);box-shadow:0 30px 90px rgba(15,23,42,.28)}
.qalam-payment-modal-close{position:absolute;top:14px;left:14px;width:36px;height:36px;border:1px solid var(--qalam-ui-border,#e5eaf3);border-radius:50%;background:var(--qalam-ui-surface-2,#f8f9fd);color:var(--qalam-ui-text,#172033);font-size:23px;line-height:1;cursor:pointer;z-index:2}
.qalam-payment-modal .qalam-vodafone-receipt{margin:0;border:0;border-radius:24px;box-shadow:none}
.qalam-payment-modal .qalam-vodafone-receipt-head{padding-left:48px}
.qalam-payment-modal .qalam-vodafone-receipt-form input[type="file"]{background:var(--qalam-ui-surface-2,#f8f9fd);color:var(--qalam-ui-text,#172033)}
.qalam-vodafone-receipt-success{margin:24px 0;padding:22px;border-radius:20px}

/* Payment-method radios need an explicit checked state; Tutor's native rule
 * otherwise renders a border only and hides the selection feedback. */
body.qalam-reference-body #tutor-checkout-form .tutor-checkout-payment-item input[type="radio"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;min-width:22px;margin:0;border:2px solid var(--qalam-ui-primary,#6d4aff);border-radius:50%;background:var(--qalam-ui-surface,#fff);display:grid;place-content:center;cursor:pointer}
body.qalam-reference-body #tutor-checkout-form .tutor-checkout-payment-item input[type="radio"]::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .12s ease}
body.qalam-reference-body #tutor-checkout-form .tutor-checkout-payment-item input[type="radio"]:checked{background:var(--qalam-ui-primary,#6d4aff);border-color:var(--qalam-ui-primary,#6d4aff)}
body.qalam-reference-body #tutor-checkout-form .tutor-checkout-payment-item input[type="radio"]:checked::after{transform:scale(1)}
body.qalam-reference-body #tutor-checkout-form.qalam-vodafone-checkout .tutor-billing-fields{display:none!important}

@media (max-width:600px){.qalam-payment-modal{padding:10px}.qalam-payment-modal-dialog{max-height:94vh;border-radius:18px}.qalam-payment-modal .qalam-vodafone-receipt-head{padding-left:42px}.qalam-payment-modal .qalam-vodafone-form-grid{grid-template-columns:1fr}.qalam-payment-modal .qalam-vodafone-form-grid .is-wide{grid-column:auto}}