:root {
                --qh-auth-bg: #f6f3ea;
                --qh-auth-surface: #fff;
                --qh-auth-ink: #16241c;
                --qh-auth-ink-soft: #3e4a43;
                --qh-auth-muted: #66736b;
                --qh-auth-border: #e6e0d2;
                --qh-auth-green: #1e5b3c;
                --qh-auth-green-dark: #123a27;
                --qh-auth-green-soft: #eaf2ec;
                --qh-auth-gold: #c9a45c;
                --qh-auth-bad: #a33e1a;
                --qh-auth-bad-bg: #f8e4dc;
                --qh-auth-body-font: "DM Sans", system-ui, -apple-system, sans-serif;
                --qh-auth-display-font: "Fraunces", Georgia, serif;
                --qh-auth-ar-font: "IBM Plex Sans Arabic", "Segoe UI", sans-serif;
            }

            .qh-auth-main .qh-auth-remember {
                display: inline-flex;
                width: fit-content;
                align-items: center;
                gap: 9px;
                margin: 0;
                color: var(--qh-auth-ink-soft);
                cursor: pointer;
                font-size: 13px;
            }

            .qh-auth-main .qh-auth-remember input {
                width: 18px;
                height: 18px;
                margin: 0;
                accent-color: var(--qh-auth-green);
            }

            html[lang="ar"] {
                --qh-auth-body-font: var(--qh-auth-ar-font);
                --qh-auth-display-font: "Amiri", Georgia, serif;
            }

            .qh-auth-page,
            .qh-auth-page * {
                box-sizing: border-box;
            }

            .qh-auth-page,
            .qh-auth-page * {
                font-family: var(--qh-auth-body-font) !important;
            }

            html[lang="ar"] .qh-auth-page,
            html[lang="ar"] .qh-auth-page * {
                font-family: var(--qh-auth-body-font) !important;
                word-spacing: normal !important;
            }

            html[lang="ar"] body:has(.qh-auth-page) {
                font-family: var(--qh-auth-body-font) !important;
            }

            html[lang="ar"] .qh-auth-brand__content h2,
            html[lang="ar"] .qh-auth-main .main-title {
                font-family: var(--qh-auth-display-font) !important;
            }

            body:has(.qh-auth-page) {
                min-width: 320px;
                min-height: 100vh;
                margin: 0;
                background: var(--qh-auth-bg);
                color: var(--qh-auth-ink);
                font-family: var(--qh-auth-body-font);
                -webkit-font-smoothing: antialiased;
            }

            .qh-auth-page {
                position: relative;
                display: grid;
                min-height: 100vh;
                grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
            }

            .qh-auth-brand {
                position: relative;
                isolation: isolate;
                display: flex;
                min-height: 100vh;
                flex-direction: column;
                overflow: hidden;
                padding: 38px clamp(28px, 5vw, 72px);
                background:
                    radial-gradient(90% 70% at 100% 0%, rgba(201, 164, 92, .18), transparent 60%),
                    linear-gradient(160deg, #1e5b3c 0%, #123a27 70%);
                color: #f3eedf;
            }

            .qh-auth-brand::before {
                position: absolute;
                z-index: -1;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E9D9A8' stroke-width='1'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3C/g%3E%3C/svg%3E");
                content: "";
                opacity: .07;
                pointer-events: none;
            }

            .qh-auth-brand__logo {
                display: inline-flex;
                width: fit-content;
                align-items: center;
                gap: 12px;
                color: #f3eedf;
                text-decoration: none;
            }

            .qh-auth-brand__logo:hover {
                color: #f3eedf;
                text-decoration: none;
            }

            .qh-auth-brand__mark {
                display: grid;
                width: 46px;
                height: 46px;
                flex: 0 0 46px;
                place-items: center;
                border-radius: 14px;
                background: #e9d9a8;
                color: #123a27;
            }

            .qh-auth-brand__mark svg {
                width: 24px;
                height: 24px;
            }

            .qh-auth-brand__logo strong,
            .qh-auth-brand__logo small {
                display: block;
            }

            .qh-auth-brand__logo strong {
                font-size: 15.5px;
                font-weight: 700;
            }

            .qh-auth-brand__logo small {
                color: rgba(243, 238, 223, .65);
                font-size: 11.5px;
            }

            .qh-auth-brand__content {
                display: flex;
                width: 100%;
                max-width: 460px;
                flex-direction: column;
                gap: 17px;
                margin-block: auto;
                padding-block: 42px;
            }

            .qh-auth-brand__verse {
                margin: 0;
                color: #e9d9a8;
                font-family: "Amiri", Georgia, serif !important;
                font-size: clamp(34px, 3.5vw, 44px);
                line-height: 1.6;
                text-align: start;
            }

            html[lang="ar"] .qh-auth-brand__verse {
                font-family: "Amiri", Georgia, serif !important;
            }

            .qh-auth-brand__translation {
                margin: 0;
                border-inline-start: 2px solid var(--qh-auth-gold);
                padding-inline-start: 14px;
                color: rgba(243, 238, 223, .75);
                font-size: 14.5px;
                line-height: 1.6;
            }

            .qh-auth-brand__content h2 {
                margin: 9px 0 0;
                font-family: var(--qh-auth-display-font) !important;
                font-size: 30px;
                font-weight: 500;
                line-height: 1.25;
            }

            html[lang="ar"] .qh-auth-brand__content h2 {
                font-weight: 700;
            }

            .qh-auth-brand__points {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .qh-auth-brand__points li {
                display: flex;
                align-items: center;
                gap: 12px;
                color: rgba(243, 238, 223, .85);
                font-size: 14.5px;
            }

            .qh-auth-brand__points li span {
                display: grid;
                width: 32px;
                height: 32px;
                flex: 0 0 32px;
                place-items: center;
                border-radius: 10px;
                background: rgba(233, 217, 168, .12);
                color: #e9d9a8;
            }

            .qh-auth-brand__points svg {
                width: 16px;
                height: 16px;
            }

            .qh-auth-brand__copyright {
                margin: 0;
                color: rgba(243, 238, 223, .5);
                font-size: 12.5px;
            }

            .qh-auth-main {
                display: flex;
                position: relative;
                min-width: 0;
                min-height: 100vh;
                align-items: center;
                justify-content: center;
                overflow-y: auto;
                padding: 34px clamp(22px, 5vw, 72px);
            }

            .qh-auth-main .tab-view {
                display: flex;
                width: 100% !important;
                max-width: 460px !important;
                min-height: 0 !important;
                flex: 0 0 auto !important;
                flex-grow: 0 !important;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                overflow: visible !important;
                margin: auto 0 !important;
                padding: 0 !important;
            }

            .qh-auth-language {
                position: absolute;
                z-index: 2;
                top: 20px;
                inset-inline-end: 28px;
                display: inline-flex;
                gap: 2px;
                border: 1px solid var(--qh-auth-border);
                border-radius: 12px;
                padding: 3px;
                background: var(--qh-auth-surface);
            }

            .qh-auth-language a {
                display: grid;
                min-width: 44px;
                height: 34px;
                place-items: center;
                border-radius: 9px;
                color: var(--qh-auth-muted);
                font-size: 13px;
                font-weight: 700;
                text-decoration: none;
            }

            .qh-auth-language a[aria-current="true"] {
                background: var(--qh-auth-green);
                color: #f3eedf;
            }

            .qh-auth-language a[lang="ar"] {
                font-family: var(--qh-auth-ar-font);
            }

            .qh-auth-main .register-card {
                width: 100%;
                max-width: none;
                border: 0;
                border-radius: 0;
                padding: 0;
                background: transparent;
                box-shadow: none;
            }

            .qh-auth-main .logo-area {
                display: none;
            }

            .qh-auth-tabs {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 3px;
                margin-bottom: 26px;
                border-radius: 14px;
                padding: 4px;
                background: #f4f0e4;
            }

            .qh-auth-tabs a {
                display: grid;
                min-height: 40px;
                place-items: center;
                border-radius: 11px;
                color: var(--qh-auth-muted);
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
            }

            .qh-auth-tabs a[aria-current="page"] {
                background: var(--qh-auth-surface);
                color: var(--qh-auth-ink);
                box-shadow: 0 1px 4px rgba(18, 58, 39, .1);
            }

            .qh-auth-main .main-title {
                margin: 0 0 6px;
                color: var(--qh-auth-ink);
                font-family: var(--qh-auth-display-font) !important;
                font-size: 34px !important;
                font-weight: 500;
                line-height: 1.15;
                text-align: start;
            }

            html[lang="ar"] .qh-auth-main .main-title {
                font-weight: 700;
            }

            .qh-auth-main .welcome-sub {
                margin: 0 0 24px;
                color: var(--qh-auth-muted);
                font-size: 14px;
                line-height: 1.55;
                text-align: start;
            }

            .qh-auth-main form {
                display: flex;
                flex-direction: column;
                gap: 15px;
            }

            .qh-auth-main .custom-icon-input {
                min-width: 0;
                margin: 0 !important;
            }

            .qh-auth-main .qh-field-label {
                display: block;
                margin-bottom: 6px;
                color: var(--qh-auth-ink-soft);
                font-size: 13px;
                font-weight: 600;
            }

            .qh-auth-main .qh-auth-label-row {
                display: flex;
                align-items: baseline;
                justify-content: space-between;
                gap: 10px;
            }

            .qh-auth-main .qh-auth-label-row .qh-field-label {
                margin-bottom: 6px;
            }

            .qh-auth-main .custom-icon-input > .input-icon {
                top: 42px;
                left: 14px;
                color: var(--qh-auth-muted);
            }

            [dir="rtl"] .qh-auth-main .custom-icon-input > .input-icon {
                right: 14px;
                left: auto;
            }

            .qh-auth-main .custom-icon-input .form-control {
                height: 48px;
                border: 1px solid var(--qh-auth-border);
                border-radius: 12px;
                padding-inline: 44px 14px;
                background: var(--qh-auth-surface);
                color: var(--qh-auth-ink) !important;
                font-family: var(--qh-auth-body-font);
                font-size: 15px;
                box-shadow: none;
            }

            .qh-auth-main #loginGroup .form-control,
            .qh-auth-main #emailGroup .form-control,
            .qh-auth-main #phoneGroup .form-control {
                direction: ltr;
                text-align: left;
            }

            [dir="rtl"] .qh-auth-main #loginGroup .form-control {
                text-align: right;
            }

            .qh-auth-main .custom-icon-input select.form-control {
                appearance: auto;
                padding-inline-end: 14px;
            }

            .qh-auth-main .custom-icon-input .form-control:focus {
                border-color: var(--qh-auth-green);
                box-shadow: 0 0 0 3px var(--qh-auth-green-soft);
            }

            .qh-auth-main .custom-icon-input.error-group .form-control {
                border-color: var(--qh-auth-bad) !important;
                background: var(--qh-auth-surface) !important;
                box-shadow: 0 0 0 3px var(--qh-auth-bad-bg);
            }

            .qh-auth-main .toggle-password {
                display: grid;
                width: 36px;
                height: 36px;
                padding: 0;
                place-items: center;
                top: 40px;
                right: 12px;
                border-radius: 8px;
                color: var(--qh-auth-muted);
            }

            .qh-auth-main .toggle-password:hover {
                background: var(--qh-auth-green-soft);
                color: var(--qh-auth-green);
            }

            .qh-auth-main .toggle-password svg {
                display: block;
                width: 20px;
                height: 20px;
            }

            [dir="rtl"] .qh-auth-main .toggle-password {
                right: auto;
                left: 12px;
            }

            .qh-auth-main .password-wrapper .form-control {
                padding-inline-end: 48px;
            }

            .qh-auth-main #phoneGroup .input-icon {
                top: 41px;
                left: 12px;
                transform: none;
            }

            [dir="rtl"] .qh-auth-main #phoneGroup .input-icon {
                right: 12px;
                left: auto;
            }

            .qh-auth-main #phoneGroup .form-control {
                width: 100%;
                padding-inline: 140px 14px;
            }

            .qh-auth-main .country-code-select {
                top: 42px;
                left: 38px;
                height: 30px;
                transform: none;
                border-inline-end: 1px solid var(--qh-auth-border);
                color: var(--qh-auth-ink-soft);
                font-family: var(--qh-auth-body-font);
                font-size: 12px;
            }

            [dir="rtl"] .qh-auth-main .country-code-select {
                right: 38px;
                left: auto;
            }

            .qh-auth-main .error-message-placeholder {
                min-height: 0;
                margin: 0;
            }

            .qh-auth-main .invalid-feedback-custom {
                color: var(--qh-auth-bad);
                font-size: 12px;
            }

            .qh-auth-main .password-hint {
                color: var(--qh-auth-muted);
            }

            .qh-auth-main .terms-check {
                margin: 0 !important;
                color: var(--qh-auth-ink-soft);
                font-size: 13px;
            }

            .qh-auth-main .terms-check .form-check-label {
                color: var(--qh-auth-ink-soft);
            }

            .qh-auth-main .terms-check .form-check-input {
                flex: 0 0 auto;
                accent-color: var(--qh-auth-green);
            }

            .qh-auth-main .btn-primary {
                display: flex;
                width: 100% !important;
                height: 50px !important;
                min-height: 50px;
                max-height: 50px;
                flex: 0 0 50px;
                align-items: center;
                justify-content: center;
                gap: 9px;
                margin-top: 2px;
                border: 0;
                border-radius: 12px;
                background: var(--qh-auth-green) !important;
                border-color: var(--qh-auth-green) !important;
                color: #f3eedf !important;
                font-family: var(--qh-auth-body-font);
                font-size: 15px;
                font-weight: 700;
                transition: background .15s ease;
            }

            .qh-auth-main .btn-primary svg {
                width: 17px !important;
                height: 17px !important;
                max-width: 17px;
                max-height: 17px;
                flex: 0 0 17px;
            }

            .qh-auth-main .btn-primary:hover,
            .qh-auth-main .btn-primary:focus {
                background: var(--qh-auth-green-dark) !important;
                border-color: var(--qh-auth-green-dark) !important;
            }

            .qh-auth-main .login-redirect {
                margin-top: 3px;
                color: var(--qh-auth-muted);
                font-size: 14px;
            }

            .qh-auth-main .login-redirect a,
            .qh-auth-main .forgot-link {
                color: var(--qh-auth-green);
                font-weight: 600;
            }

            .qh-auth-main .forgot-link {
                display: block;
                margin-top: 7px;
                font-size: 12px;
                text-align: end;
            }

            .qh-auth-main .qh-server-errors {
                margin: 0;
                border: 1px solid #efc5ba;
                border-radius: 12px;
                padding: 11px 14px;
                background: var(--qh-auth-bad-bg);
                color: var(--qh-auth-bad);
                font-size: 13px;
            }

            .qh-auth-main .qh-server-errors ul {
                margin: 0;
                padding-inline-start: 18px;
            }

            @media (max-width: 900px) {
                .qh-auth-page {
                    grid-template-columns: 1fr;
                }

                .qh-auth-brand {
                    min-height: 0;
                    padding-block: 20px 25px;
                    padding-inline-start: 24px;
                    padding-inline-end: 130px;
                }

                .qh-auth-brand__content {
                    max-width: 600px;
                    gap: 10px;
                    padding-block: 18px 0;
                }

                .qh-auth-brand__verse {
                    font-size: 31px;
                }

                .qh-auth-brand__translation,
                .qh-auth-brand__content h2,
                .qh-auth-brand__points,
                .qh-auth-brand__copyright {
                    display: none;
                }

                .qh-auth-main {
                    min-height: 0;
                    padding: 0 20px 28px;
                }

                .qh-auth-language {
                    top: 20px;
                    inset-inline-end: 20px;
                }

                .qh-auth-main .tab-view {
                    max-width: 520px;
                    margin: -12px 0 0;
                    border: 1px solid var(--qh-auth-border);
                    border-radius: 22px;
                    padding: 22px 20px;
                    background: var(--qh-auth-surface);
                    box-shadow: 0 14px 40px rgba(18, 58, 39, .08);
                }

                .qh-auth-main .main-title {
                    font-size: 28px !important;
                }
            }

            @media (max-width: 480px) {
                .qh-auth-brand {
                    padding-inline-end: 116px;
                }

                .qh-auth-brand__logo strong {
                    font-size: 15px;
                }

                .qh-auth-brand__logo small {
                    display: none;
                }

                .qh-auth-main {
                    padding-inline: 12px;
                }

                .qh-auth-main .tab-view {
                    padding: 20px 16px;
                }

                .qh-auth-main .register-card {
                    padding: 0;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .qh-auth-page *,
                .qh-auth-page *::before,
                .qh-auth-page *::after {
                    scroll-behavior: auto !important;
                    transition-duration: .01ms !important;
                }
            }

            .qh-demo-signin {
                margin-top: 12px;
            }

            .qh-auth-page--login .qh-auth-tabs {
                margin-bottom: 18px;
            }

            .qh-auth-page--login .welcome-sub {
                margin-bottom: 16px;
            }

            .qh-auth-page--login form {
                gap: 11px;
            }

            .qh-auth-page--login .custom-icon-input .form-control {
                height: 44px;
            }

            .qh-auth-page--login .custom-icon-input > .input-icon {
                top: 40px;
            }

            .qh-auth-page--login .toggle-password {
                top: 38px;
            }

            .qh-auth-page--login .btn-primary {
                height: 44px !important;
                min-height: 44px;
                max-height: 44px;
                flex-basis: 44px;
            }

            .qh-auth-page--login .login-redirect {
                margin-bottom: 0;
            }

            .qh-demo-signin__heading {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 8px;
            }

            .qh-demo-signin__heading > span {
                height: 1px;
                flex: 1;
                background: var(--qh-auth-border);
            }

            .qh-demo-signin__heading h2 {
                margin: 0;
                color: #70592d;
                font-size: 15px;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase;
                white-space: nowrap;
            }

            .qh-demo-signin__roles {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 12px;
            }

            .qh-demo-signin__role {
                display: flex;
                min-width: 0;
                min-height: 62px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                border: 1px solid var(--qh-auth-border);
                border-radius: 18px;
                background: var(--qh-auth-surface);
                color: var(--qh-auth-ink);
                cursor: pointer;
                font-size: 13px;
                font-weight: 700;
                transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
            }

            .qh-demo-signin__role:hover,
            .qh-demo-signin__role[aria-pressed="true"] {
                transform: translateY(-1px);
                border-color: var(--qh-auth-green);
                box-shadow: 0 5px 16px rgba(18, 58, 39, .1);
            }

            .qh-demo-signin__role:focus-visible {
                outline: 3px solid var(--qh-auth-gold);
                outline-offset: 2px;
            }

            .qh-demo-signin__icon {
                display: grid;
                width: 28px;
                height: 28px;
                place-items: center;
                border-radius: 10px;
            }

            .qh-demo-signin__icon svg {
                width: 18px;
                height: 18px;
            }

            .qh-demo-signin__role--admin .qh-demo-signin__icon {
                background: #eaf2ec;
                color: #286247;
            }

            .qh-demo-signin__role--subadmin .qh-demo-signin__icon {
                background: #e7f1f4;
                color: #367084;
            }

            .qh-demo-signin__role--teacher .qh-demo-signin__icon {
                background: #fbf1dc;
                color: #9a7428;
            }

            .qh-demo-signin__role--parent .qh-demo-signin__icon {
                background: #f7eaf0;
                color: #a04d70;
            }

            .qh-demo-signin__hint {
                margin: 7px 0 0;
                color: var(--qh-auth-muted);
                font-size: 12px;
                text-align: center;
            }

            @media (max-width: 560px) {
                .qh-demo-signin {
                    margin-top: 10px;
                }

                .qh-demo-signin__roles {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 7px;
                }

                .qh-demo-signin__role {
                    min-height: 52px;
                    flex-direction: row;
                    justify-content: flex-start;
                    gap: 7px;
                    padding: 6px 9px;
                    text-align: start;
                    font-size: 12px;
                }

                .qh-demo-signin__icon {
                    width: 28px;
                    height: 28px;
                    flex: 0 0 28px;
                }

                .qh-demo-signin__icon svg {
                    width: 17px;
                    height: 17px;
                }

                .qh-auth-page--login .qh-auth-tabs {
                    margin-bottom: 14px;
                }

                .qh-auth-page--login .welcome-sub {
                    margin-bottom: 12px;
                }

                .qh-auth-page--login form {
                    gap: 9px;
                }
            }