/* Darlings' Home International School, Taif — dedicated login skin. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/tajawal-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/tajawal-arabic-700-normal.woff2") format("woff2"); }
:root {
    color-scheme: light;
    --canvas: #fcfaf5;
    --surface: #fff;
    --ink: #092b64;
    --muted: #65758b;
    --primary: #1457a6;
    --primary-hover: #0c367b;
    --blue: #084aa5;
    --green: #218e41;
    --gold: #ffcb32;
    --red: #ed303f;
    --soft: #eaf2fc;
    --line: #dde6ed;
    --input: #ffffffd9;
    --input-border: #d8e2ee;
    --placeholder: #79899d;
    --card-shadow: 0 28px 75px -25px #193b6b2e, 0 7px 20px -10px #284e6524, inset 0 0 0 1px #ffffffb3;
    --card-background: linear-gradient(160deg, #fffefa 0%, #ffffff 42%, #f8fbff 100%);
    --motif-gold: #d7a335;
    --motif-blue: #5ba7e3;
    --motif-green: #6b9c73;
    --motif-opacity: .38;
    --card-motif: #b58a35;
    --halo-gold: #ffe2925c;
    --halo-blue: #c9e5ff85;
    --button-background: linear-gradient(110deg, #082f73, #0c55ac);
    --button-shadow: #11488930;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #081526;
    --surface: #12243c;
    --ink: #f0f5ff;
    --muted: #a2b3cb;
    --primary: #94c7ff;
    --primary-hover: #b5d9ff;
    --soft: #233c5c;
    --line: #304563;
    --input: #091a2dbf;
    --input-border: #324b6b;
    --placeholder: #a0b1c9;
    --card-shadow: 0 30px 95px -20px #0009, 0 0 55px -20px #428fd82e, inset 0 1px 0 #ffffff0d;
    --card-background: linear-gradient(155deg, #172b45 0%, #122238 46%, #102139 100%);
    --motif-gold: #deb764;
    --motif-blue: #559fe3;
    --motif-green: #7dc79f;
    --motif-opacity: .27;
    --card-motif: #e1bb74;
    --halo-gold: #bc87251a;
    --halo-blue: #4797e724;
    --button-background: linear-gradient(110deg, #205cad, #2376ce);
    --button-shadow: #00000040;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 13px/1.5 Manrope, Tajawal, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .3s ease; }
button, input, select { font: inherit; }
button, a, input, select { outline-offset: 4px; -webkit-tap-highlight-color: transparent; }
button, input[type="submit"], input[type="checkbox"] { cursor: pointer; }
button { padding: 0; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
button svg { pointer-events: none; }
p, h1, h2 { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); }
.dhis-page { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100dvh; padding: 22px 50px 18px; overflow: hidden; }
.dhis-ambient { position: absolute; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ambient-orb { position: absolute; width: 760px; height: 760px; border-radius: 50%; animation: ambient-drift 28s ease-in-out infinite alternate; }
.ambient-blue { left: 3%; top: 8%; background: radial-gradient(circle, #b8dfff32, transparent 68%); }
.ambient-green { right: -80px; bottom: -100px; background: radial-gradient(circle, #f5da8e30, transparent 68%); animation-delay: -14s; }
.ambient-grid { position: absolute; inset: 0; background-image: radial-gradient(#8aa1bb40 .6px, transparent .8px); background-size: 22px 22px; mask-image: linear-gradient(90deg, #0008, transparent 38%, transparent 62%, #0008); opacity: .5; }
.learning-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.banner-wash { position: absolute; stroke: none; }
.wash-sun { left: 0; top: 0; width: min(33vw, 480px); height: auto; opacity: .65; }
.sun-stop-start { stop-color: #ffe593; }
.sun-stop-end { stop-color: #ffd242; }
.wash-sky { right: 0; top: 0; width: min(31vw, 450px); height: auto; opacity: .7; }
.sky-stop-start { stop-color: #d9efff; }
.sky-stop-end { stop-color: #b4dfff; }
.wash-bottom { left: 0; bottom: 0; width: 100%; height: 20%; fill: #dfeffa; opacity: .43; }
/* Physical positioning deliberately stays the same in English and Arabic. */
.banner-ribbons { position: absolute; width: 175px; height: 310px; transform: rotate(-42deg); }
.banner-ribbons i { display: block; position: absolute; width: 210px; height: 68px; border-radius: 23px; background: var(--blue); box-shadow: inset 0 1px 0 #ffffff26; }
.banner-ribbons i:nth-child(1) { top: 0; z-index: 4; }
.banner-ribbons i:nth-child(2) { top: 55px; z-index: 3; background: var(--green); }
.banner-ribbons i:nth-child(3) { top: 110px; z-index: 2; background: var(--red); }
.banner-ribbons i:nth-child(4) { top: 165px; z-index: 1; background: var(--gold); }
.ribbons-left { left: -85px; top: 51%; }
.ribbons-right { right: -95px; bottom: 16%; transform: rotate(138deg); }
.learning-motif { --turn: 0deg; --delay: 0s; position: absolute; left: var(--x); top: var(--y); width: var(--size); color: var(--motif-gold); opacity: var(--motif-opacity); transform: rotate(var(--turn)); }
.learning-motif svg { display: block; width: 100%; height: auto; overflow: visible; stroke-width: 1.3; animation: learning-float 12s ease-in-out var(--delay) infinite; }
.motif-book { --x: 17%; --y: 17%; --size: clamp(82px, 8.5vw, 132px); --turn: -18deg; --delay: -2s; }
.motif-bulb { --x: 11%; --y: 43%; --size: clamp(70px, 7.5vw, 115px); --turn: -12deg; --delay: -6s; opacity: .6; }
.motif-gear { --x: 81%; --y: 23%; --size: clamp(90px, 8vw, 128px); --turn: 10deg; --delay: -4s; color: var(--motif-blue); opacity: .5; }
.motif-gear svg { animation: learning-rotate 85s linear infinite; }
.motif-globe { --x: 78%; --y: 58%; --size: clamp(80px, 7vw, 110px); --turn: 12deg; --delay: -3s; color: var(--motif-blue); }
.motif-pencil { --x: 67%; --y: 13%; --size: 83px; --turn: -12deg; --delay: -8s; }
.motif-search { --x: 88%; --y: 43%; --size: 67px; --turn: 10deg; --delay: -5s; }
.motif-ruler { --x: 25%; --y: 68%; --size: 77px; --turn: 14deg; --delay: -9s; color: var(--motif-green); }
.motif-book-small { --x: 68%; --y: 83%; --size: 67px; --turn: 15deg; --delay: -1s; }
.motif-star-one { --x: 7%; --y: 28%; --size: 34px; --turn: -12deg; --delay: -4s; }
.motif-star-two { --x: 27%; --y: 44%; --size: 28px; --turn: 13deg; --delay: -7s; }
.motif-star-three { --x: 71%; --y: 46%; --size: 38px; --turn: -16deg; --delay: -2s; }
.motif-star-four { --x: 90%; --y: 77%; --size: 32px; --turn: 16deg; --delay: -5s; }
.motif-spark-one { --x: 20%; --y: 86%; --size: 25px; --turn: 12deg; --delay: -8s; color: var(--motif-blue); }
.motif-spark-two { --x: 59%; --y: 7%; --size: 21px; --turn: -8deg; --delay: -3s; }
.banner-flourish { position: absolute; width: 58px; height: 45px; }
.banner-flourish i { position: absolute; bottom: 0; left: 0; width: 6px; height: 26px; border-radius: 10px; background: var(--gold); transform: rotate(-24deg); }
.banner-flourish i:nth-child(2) { left: 23px; bottom: 5px; height: 36px; transform: rotate(13deg); }
.banner-flourish i:nth-child(3) { left: 47px; height: 23px; transform: rotate(48deg); }
.flourish-left { left: 24%; top: 34%; transform: rotate(16deg) scale(.65); opacity: .7; }
.flourish-right { right: 13%; top: 14%; transform: rotate(15deg) scale(.8); opacity: .8; }
.institution-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; direction: ltr; flex-shrink: 0; min-height: 76px; }
.ministry-brand { justify-self: end; width: 143px; }
.ministry-brand img { width: 143px; height: 75px; object-fit: contain; }
.science-brand { justify-self: start; width: 171px; }
.science-brand img { width: 171px; height: 77px; object-fit: contain; }
.workspace-controls { display: flex; align-items: center; justify-content: center; gap: 16px; align-self: start; margin-top: 12px; }
.theme-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 600; min-height: 34px; padding: 0 4px; border-radius: 8px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle:hover { color: var(--primary); }
.sun-icon, [data-theme="dark"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
.control-divider { width: 1px; height: 17px; background: var(--input-border); }
.language-switch { display: flex; align-items: center; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.language-switch button { min-width: 33px; min-height: 28px; padding: 3px 8px; color: var(--muted); font-weight: 700; font-size: 10px; border-radius: 5px; }
.language-switch button[lang="ar"] { font: 700 12px Tajawal, sans-serif; }
.language-switch button[aria-pressed="true"] { background: var(--soft); color: var(--primary); }
.portal-stage { display: grid; place-items: center; flex: 1; padding: 7px 0 16px; }
.dhis-card { position: relative; isolation: isolate; width: min(456px, 100%); background: var(--card-background); border: 1px solid var(--line); border-radius: 23px; padding: 25px 43px 18px; box-shadow: var(--card-shadow); overflow: hidden; transition: border-color .35s, box-shadow .35s; }
.card-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.card-halo { position: absolute; width: 260px; height: 245px; border-radius: 42% 58% 68% 32% / 36% 37% 63% 64%; animation: card-halo-drift 18s ease-in-out infinite alternate; }
.halo-gold { left: -105px; top: -100px; background: linear-gradient(140deg, var(--halo-gold), transparent); transform: rotate(-25deg); }
.halo-blue { right: -110px; top: -70px; background: linear-gradient(230deg, var(--halo-blue), transparent); animation-delay: -9s; }
.card-art::after { content: ""; position: absolute; left: -20%; right: -20%; height: 115px; bottom: -100px; border-radius: 50%; box-shadow: 0 -16px 0 0 var(--halo-blue), 0 -30px 0 0 var(--halo-gold); opacity: .6; transform: rotate(-9deg); }
.card-motif { position: absolute; color: var(--card-motif); stroke-width: 1; opacity: .15; }
.card-book { width: 57px; height: 57px; top: 18px; left: 17px; transform: rotate(-21deg); }
.card-spark { width: 25px; height: 25px; top: 115px; left: 27px; transform: rotate(12deg); }
.card-bulb { width: 46px; height: 56px; top: 72px; right: 15px; transform: rotate(16deg); }
.card-pencil { width: 45px; height: 45px; top: 172px; right: 20px; transform: rotate(-14deg); opacity: .1; }
.brand-spectrum { position: absolute; display: flex; direction: ltr; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; }
.brand-spectrum::after { content: ""; position: absolute; inset-block: 0; left: -32%; width: 32%; opacity: 0; background: linear-gradient(90deg, transparent, #ffffff80 32%, #fff 50%, #ffffff80 68%, transparent); pointer-events: none; animation: dhis-spectrum-sweep 6.2s ease-in-out .6s infinite; }
.brand-spectrum i { width: 25%; background: var(--blue); }
.brand-spectrum i:nth-child(2) { background: var(--gold); }
.brand-spectrum i:nth-child(3) { background: var(--green); }
.brand-spectrum i:nth-child(4) { background: var(--red); }
.school-identity { display: flex; flex-direction: column; align-items: center; text-align: center; }
.school-logo { position: relative; display: block; width: 210px; aspect-ratio: 1195 / 830; margin: 0 auto; }
.school-logo img { position: absolute; left: -2.51046%; top: -23.61446%; width: 104.93724%; max-width: none; height: auto; }
/* Display two independent portions of the original PNG; no lettering or artwork is redrawn. */
.school-emblem, .school-wordmark, .school-name-motion { position: absolute; inset: 0; display: block; pointer-events: none; }
.school-emblem { transform-origin: 50% 36%; animation: dhis-emblem-float 7s ease-in-out infinite; }
.school-emblem img { clip-path: inset(0 0 36%); }
.school-wordmark { animation: dhis-name-reveal 1.15s cubic-bezier(.2,.7,.2,1) .15s both; }
.school-name-motion { transform-origin: 50% 86%; animation: dhis-name-lift 5.6s ease-in-out 1.3s infinite; }
.school-wordmark img { clip-path: inset(64% 0 0); }
.school-emblem-sheen, .school-name-sheen { position: absolute; inset: 0; z-index: 1; opacity: 0; background-size: 250% 100%; background-repeat: no-repeat; -webkit-mask: url("../images/dhis/dhis-logo-transparent.png") center 45.858% / 104.93724% auto no-repeat; mask: url("../images/dhis/dhis-logo-transparent.png") center 45.858% / 104.93724% auto no-repeat; }
.school-emblem-sheen { clip-path: inset(0 0 27.5%); background-image: linear-gradient(115deg, transparent 39%, #ffffff14 44%, #ffffffc7 49%, #ffffff52 53%, transparent 60%); animation: dhis-emblem-highlight 5.6s ease-in-out .45s infinite; }
.school-name-sheen { clip-path: inset(74% 0 0); background-image: linear-gradient(105deg, transparent 39%, #faffd440 45%, #ffffffde 49%, #efffccb3 52%, transparent 59%); animation: dhis-name-shimmer 6.2s ease-in-out 1.3s infinite; }
.school-location { display: inline-flex; justify-content: center; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; letter-spacing: 1.6px; margin-top: 6px; }
.school-location svg { width: 10px; height: 10px; }
.login-intro { margin-top: 16px; text-align: center; }
.portal-eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 9px; }
.portal-eyebrow span { width: 19px; height: 1px; background: var(--line); }
.portal-eyebrow p { color: var(--primary); font-size: 7px; font-weight: 800; letter-spacing: 1.7px; }
#loginTitle { font-size: 28px; line-height: 1.2; letter-spacing: -.9px; font-weight: 800; }
.login-description { margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.65; }
.login-fields { display: grid; gap: 14px; margin-top: 18px; }
.field-label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 8px; }
.field-heading { display: flex; align-items: baseline; }
.input-wrap { position: relative; }
.campus-input { display: block; width: 100%; min-height: 46px; padding: 11px 14px; padding-inline-start: 40px; border: 1px solid var(--input-border); border-radius: 9px; background: var(--input); color: var(--ink); font-size: 12px; box-shadow: 0 2px 4px #102c5603; transition: border-color .18s, box-shadow .18s, background-color .3s; }
.campus-input:hover { border-color: var(--primary); }
.campus-input::placeholder { color: var(--placeholder); opacity: 1; }
.campus-input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px #559ee526; }
.input-icon { position: absolute; width: 15px; height: 15px; inset-inline-start: 14px; top: 15px; color: var(--placeholder); pointer-events: none; }
.input-wrap:focus-within .input-icon { color: var(--primary); }
.password-input { padding-inline-end: 43px; }
.password-toggle { position: absolute; inset-inline-end: 3px; top: 3px; width: 38px; height: 40px; display: grid; place-items: center; border-radius: 5px; color: var(--placeholder); }
.password-toggle:hover { color: var(--primary); background: var(--soft); }
.password-toggle svg { width: 16px; height: 16px; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: block; }
.text-link { color: var(--primary); font-size: 10px; font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-options { display: flex; justify-content: space-between; align-items: center; gap: 10px; direction: ltr; margin: 13px 0 17px; }
.remember-label { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); cursor: pointer; min-width: 0; }
.remember-label input { width: 13px; height: 13px; margin: 0; accent-color: var(--primary); flex-shrink: 0; }
.forgot-link { flex-shrink: 0; white-space: nowrap; }
.submit-wrap { position: relative; }
.sign-in-button { display: block; width: 100%; min-height: 47px; padding: 12px 40px; border: 1px solid #ffffff1a; border-radius: 9px; color: #fff; background: var(--button-background); box-shadow: 0 5px 14px var(--button-shadow), inset 0 1px 0 #ffffff1a; font-size: 12px; font-weight: 800; transition: filter .2s, box-shadow .2s; }
.sign-in-button:hover { filter: brightness(1.12); box-shadow: 0 7px 20px var(--button-shadow), inset 0 1px 0 #ffffff26; }
.sign-in-button:active { filter: brightness(.95); }
.submit-arrow { position: absolute; width: 16px; height: 16px; top: 15px; inset-inline-end: 18px; color: #fff; pointer-events: none; }
.submit-spinner { display: none; position: absolute; top: 15px; inset-inline-end: 18px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff55; border-top-color: #fff; animation: spin .8s linear infinite; pointer-events: none; }
.is-submitting .submit-arrow { display: none; }
.is-submitting .submit-spinner { display: block; }
.is-submitting .sign-in-button { cursor: wait; opacity: .85; }
.form-status { color: var(--primary); font-size: 11px; line-height: 1.7; }
.form-status:empty { margin: 0; }
.form-status:not(:empty) { margin-top: 10px; }
.account-note { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 8px; }
.account-note svg { width: 11px; height: 11px; flex-shrink: 0; }
.help-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.help-line .text-link { font-size: 9px; }
.help-arrow { display: inline-block; margin-inline-start: 4px; }
.school-signature { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 8px; }
.signature-dots { display: inline-flex; align-items: center; gap: 3px; direction: ltr; }
.signature-dots i { width: 3px; height: 3px; border-radius: 50%; background: #084da8; }
.signature-dots i:nth-child(2) { background: #6b9b1b; }
.signature-dots i:nth-child(3) { background: #eeb70c; }
.signature-dots i:nth-child(4) { background: #e33036; }
.dhis-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; direction: ltr; gap: 20px; flex-shrink: 0; }
.provider-credit { justify-self: start; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; color: var(--muted); }
.provider-credit span { font-size: 8px; }
.provider-credit img { width: 126px; height: 44px; object-fit: contain; background: transparent; }
.footer-copyright { text-align: right; font-size: 9px; color: var(--muted); line-height: 1.9; }
.footer-copyright p:first-child { color: var(--ink); font-weight: 600; }
.footer-dot { margin: 0 6px; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; color: var(--muted); font-size: 8px; padding: 4px 8px; margin-bottom: 3px; }
.motion-toggle:hover { color: var(--primary); }
.motion-toggle svg { width: 10px; height: 10px; }
.play-icon, [data-motion="paused"] .pause-icon { display: none; }
[data-motion="paused"] .play-icon { display: block; }
.motion-toggle:disabled { cursor: default; }
.campus-dialog { width: 100%; max-width: min(425px, calc(100% - 32px)); margin: auto; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 25px 100px #10241744; }
.campus-dialog::backdrop { background: #10201977; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-title { font-size: 20px; font-weight: 800; line-height: 1.4; }
.dialog-close { width: 32px; height: 32px; flex-shrink: 0; border-radius: 5px; font-size: 25px; color: var(--muted); }
.dialog-close:hover { background: var(--soft); }
.dialog-copy { margin: 20px 0; font-size: 12px; color: var(--muted); line-height: 1.9; }
.dialog-primary, .dialog-secondary { display: block; width: 100%; padding: 13px; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 700; }
.dialog-primary { background: var(--button-background); color: #fff; margin-top: 20px; }
.dialog-primary:hover { filter: brightness(1.12); }
.dialog-secondary { margin-top: 8px; color: var(--muted); }
.campus-select { padding-inline-start: 14px; }
.field-notice, .field-error { font-size: 11px; color: #9f511a; margin-top: 8px; }
.field-error, .was-validated .form-status { color: #bf3941; }
.was-validated input:invalid { border-color: #bf3941; }
[data-theme="dark"] .field-notice { color: #edba84; }
[data-theme="dark"] .field-error, [data-theme="dark"] .was-validated .form-status { color: #ff9e9e; }
[data-theme="dark"] .school-logo img { filter: brightness(1.2); }
[data-theme="dark"] .school-name-motion::after { content: ""; position: absolute; inset: 0; background: url("../images/dhis/dhis-logo-transparent.png") center 45.858% / 104.93724% auto no-repeat; clip-path: inset(90% 0 0); filter: grayscale(1) brightness(3); pointer-events: none; }
[data-theme="dark"] .science-brand img { filter: brightness(2.3) saturate(.62); }
[data-theme="dark"] .ministry-brand img { filter: brightness(1.3) saturate(.8); }
[data-theme="dark"] .provider-credit img { filter: brightness(1.8) saturate(.8); }
[data-theme="dark"] .ambient-blue { opacity: .28; }
[data-theme="dark"] .ambient-green { opacity: .12; }
[data-theme="dark"] .sun-stop-start { stop-color: #544727; }
[data-theme="dark"] .sun-stop-end { stop-color: #8a6526; }
[data-theme="dark"] .sky-stop-start { stop-color: #183350; }
[data-theme="dark"] .sky-stop-end { stop-color: #174b75; }
[data-theme="dark"] .wash-sun { opacity: .3; }
[data-theme="dark"] .wash-sky { opacity: .5; }
[data-theme="dark"] .wash-bottom { fill: #183553; opacity: .28; }
[data-theme="dark"] .banner-ribbons { opacity: .65; }
[data-theme="dark"] .motif-bulb, [data-theme="dark"] .motif-gear { opacity: .4; }
[data-theme="dark"] .banner-flourish { opacity: .45; }
[dir="rtl"] body { font-family: Tajawal, Manrope, "Segoe UI", sans-serif; }
[dir="rtl"] .school-location { font-size: 10px; letter-spacing: 0; }
[dir="rtl"] .portal-eyebrow p { font-size: 11px; letter-spacing: 0; }
[dir="rtl"] #loginTitle { font-size: 32px; letter-spacing: 0; }
[dir="rtl"] .login-description { font-size: 13px; }
[dir="rtl"] .field-label, [dir="rtl"] .campus-input, [dir="rtl"] .sign-in-button { font-size: 14px; }
[dir="rtl"] .remember-label, [dir="rtl"] .forgot-link { direction: rtl; font-size: 12px; }
[dir="rtl"] .account-note, [dir="rtl"] .help-line, [dir="rtl"] .help-line .text-link, [dir="rtl"] .school-signature { font-size: 11px; }
[dir="rtl"] .provider-credit span, [dir="rtl"] .footer-copyright, [dir="rtl"] .motion-toggle { font-size: 10px; }
[dir="rtl"] .footer-copyright { direction: rtl; }
[dir="rtl"] .submit-arrow { transform: scaleX(-1); }
[data-motion="paused"] .dhis-ambient *, [data-page-hidden="true"] .dhis-ambient *, [data-dialog-open="true"] .dhis-ambient * { animation-play-state: paused !important; }
:is([data-motion="paused"], [data-page-hidden="true"], [data-dialog-open="true"]) .school-logo * { animation-play-state: paused !important; }
:is([data-motion="paused"], [data-page-hidden="true"], [data-dialog-open="true"]) .brand-spectrum::after { animation-play-state: paused !important; }
:is([data-motion="paused"], [data-page-hidden="true"], [data-dialog-open="true"]) .card-art * { animation-play-state: paused !important; }
/* A saved pause preference must never leave the name halfway through its entrance. */
[data-motion="paused"] .school-wordmark { opacity: 1 !important; transform: none !important; }
@keyframes dhis-emblem-float {
    0%,100% { transform: translateY(0) rotate(-4deg) scale(1); filter: drop-shadow(0 4px 6px #084da81f); }
    25% { transform: translateY(-3px) rotate(0deg) scale(1.012); filter: drop-shadow(0 6px 8px #6b9b1b29); }
    50% { transform: translateY(-5px) rotate(4deg) scale(1.025); filter: drop-shadow(0 7px 10px #eeb70c29); }
    75% { transform: translateY(-2px) rotate(0deg) scale(1.012); filter: drop-shadow(0 5px 8px #e330361f); }
}
@keyframes dhis-name-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dhis-spectrum-sweep {
    0% { transform: translateX(0); opacity: 0; }
    10%,50% { opacity: .95; }
    65%,100% { transform: translateX(420%); opacity: 0; }
}
@keyframes dhis-name-lift { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.025); } }
@keyframes dhis-emblem-highlight {
    0% { background-position: 150% 0; opacity: 0; }
    10%,28% { opacity: .85; }
    44%,100% { background-position: -100% 0; opacity: 0; }
}
@keyframes dhis-name-shimmer {
    0% { background-position: 150% 0; opacity: 0; }
    10%,30% { opacity: .9; }
    44%,100% { background-position: -100% 0; opacity: 0; }
}
@keyframes ambient-drift { from { transform: translate3d(-10px, -8px, 0) scale(.97); } to { transform: translate3d(12px, 14px, 0) scale(1.03); } }
@keyframes learning-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes learning-rotate { to { transform: rotate(360deg); } }
@keyframes card-halo-drift { from { transform: translate3d(0, 0, 0) rotate(-15deg); } to { transform: translate3d(12px, 8px, 0) rotate(8deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 701px) and (max-height: 850px) {
    .dhis-page { padding: 14px 36px 12px; }
    .institution-header { min-height: 70px; }
    .ministry-brand img { width: 125px; height: 68px; } .science-brand img { width: 151px; height: 70px; }
    .science-brand { width: 151px; } .workspace-controls { margin-top: 9px; }
    .portal-stage { padding: 0 0 10px; margin-top: -12px; }
    .dhis-card { padding: 17px 40px 14px; width: 436px; }
    .school-logo { width: 178px; }
    .school-location { margin-top: 5px; }
    .login-intro { margin-top: 12px; } .portal-eyebrow { margin-bottom: 5px; }
    #loginTitle { font-size: 27px; }
    .login-fields { margin-top: 16px; gap: 12px; } .field-label { margin-bottom: 6px; }
    .campus-input { min-height: 44px; padding-block: 10px; }
    .input-icon { top: 14px; } .password-toggle { height: 38px; }
    .login-options { margin: 12px 0 15px; }
    .account-note { margin-top: 9px; }
    .help-line { margin-top: 12px; padding-top: 10px; }
    .school-signature { margin-top: 10px; }
    .provider-credit img { width: 110px; height: 36px; }
    [dir="rtl"] #loginTitle { font-size: 29px; }
    [dir="rtl"] .portal-eyebrow p { font-size: 10px; line-height: 1.2; }
    [dir="rtl"] .login-description { font-size: 12px; line-height: 1.5; }
    [dir="rtl"] .field-label { font-size: 13px; }
}
@media (min-width: 701px) and (max-height: 710px) {
    .dhis-page { padding: 12px 28px 10px; }
    .institution-header { min-height: 54px; align-items: start; }
    .ministry-brand img { width: 105px; height: 67px; } .science-brand img { width: 126px; height: 68px; } .science-brand { width: 126px; }
    .portal-stage { padding: 0 0 10px; margin-top: -20px; }
    .dhis-card { padding: 14px 35px 11px; width: 412px; }
    .school-logo { width: 135px; } .school-location { font-size: 6px; margin-top: 3px; }
    .login-intro { margin-top: 13px; } .portal-eyebrow { display: none; }
    #loginTitle { font-size: 25px; } .login-description { margin-top: 5px; font-size: 10px; }
    .login-fields { margin-top: 14px; gap: 12px; } .field-label { margin-bottom: 6px; }
    .campus-input { min-height: 42px; padding-block: 9px; } .input-icon { top: 13px; } .password-toggle { height: 36px; }
    .login-options { margin: 12px 0 15px; } .sign-in-button { min-height: 43px; padding-block: 10px; } .submit-arrow, .submit-spinner { top: 13px; }
    .account-note { margin-top: 8px; } .help-line { margin-top: 11px; padding-top: 9px; } .school-signature { display: none; }
    .provider-credit img { width: 104px; height: 32px; }
    [dir="rtl"] #loginTitle { font-size: 29px; } [dir="rtl"] .portal-eyebrow p { font-size: 10px; }
    [dir="rtl"] .school-location { font-size: 9px; } [dir="rtl"] .login-description { font-size: 12px; }
    [dir="rtl"] .account-note, [dir="rtl"] .help-line, [dir="rtl"] .help-line .text-link, [dir="rtl"] .school-signature { font-size: 10px; }
}
@media (max-width: 900px) {
    .dhis-page { padding-inline: 26px; }
    .institution-header { column-gap: 15px; }
    .theme-toggle #themeLabel { display: none; }
    .workspace-controls { gap: 9px; }
}
@media (max-width: 700px) {
    .dhis-page { padding: 19px 20px 17px; }
    .institution-header { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 14px; min-height: auto; }
    .ministry-brand { grid-column: 2; grid-row: 1; width: 114px; }
    .ministry-brand img { width: 114px; height: 78px; }
    .science-brand { grid-column: 1; grid-row: 1; width: 138px; }
    .science-brand img { width: 138px; height: 78px; }
    .workspace-controls { grid-column: 1 / -1; grid-row: 2; margin: 0 0 17px; gap: 12px; }
    .theme-toggle #themeLabel { display: inline; }
    .control-divider { height: 15px; }
    .portal-stage { padding: 0 0 22px; }
    .dhis-card { padding: 25px 29px 22px; border-radius: 20px; width: min(440px,100%); }
    .school-logo { width: 216px; }
    .login-intro { margin-top: 21px; }
    .campus-input, [dir="rtl"] .campus-input { font-size: 16px; min-height: 49px; }
    .input-icon { top: 17px; } .password-toggle { height: 43px; }
    .login-options { margin: 17px 0 22px; }
    .dhis-footer { grid-template-columns: 1fr 1fr; align-items: center; row-gap: 12px; column-gap: 15px; }
    .provider-credit { grid-column: 1; grid-row: 1; }
    .provider-credit img { width: 107px; height: 37px; }
    .footer-copyright { grid-column: 2; grid-row: 1; font-size: 8px; line-height: 1.8; }
    .motion-toggle { grid-column: 1 / -1; grid-row: 2; margin: 0; justify-self: center; }
    .wash-sun { width: 65vw; opacity: .45; }
    .wash-sky { width: 61vw; opacity: .6; }
    .wash-bottom { height: 13%; }
    .banner-ribbons { scale: .62; }
    .ribbons-left { left: -150px; top: 52%; }
    .ribbons-right { right: -151px; bottom: 15%; }
    .learning-motif { opacity: .25; }
    .motif-book { --x: -5%; --y: 19%; --size: 85px; }
    .motif-bulb { --x: -8%; --y: 47%; --size: 85px; opacity: .3; }
    .motif-gear { --x: 84%; --y: 26%; --size: 100px; opacity: .32; }
    .motif-globe { --x: 84%; --y: 64%; --size: 88px; }
    .motif-pencil { --x: 79%; --y: 14%; --size: 60px; }
    .motif-star-one { --x: 12%; --y: 14%; --size: 25px; }
    .motif-star-four { --x: 91%; --y: 80%; --size: 24px; }
    .motif-search, .motif-ruler, .motif-book-small, .motif-star-two, .motif-star-three, .motif-spark-one, .motif-spark-two, .banner-flourish { display: none; }
    [dir="rtl"] .footer-copyright { font-size: 9px; }
}
@media (max-width: 370px) {
    .dhis-page { padding-inline: 14px; }
    .ministry-brand img { width: 100px; height: 68px; } .science-brand, .science-brand img { width: 126px; height: 70px; }
    .dhis-card { padding-inline: 21px; } .school-logo { width: 191px; }
    .login-options { gap: 8px; } .remember-label, .forgot-link, [dir="rtl"] .remember-label, [dir="rtl"] .forgot-link { font-size: 9px; }
    .footer-copyright { font-size: 7px; } .provider-credit span { font-size: 7px; }
    [dir="rtl"] .footer-copyright, [dir="rtl"] .provider-credit span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}