* { box-sizing: border-box; }

@font-face {
    font-family: "Pendar UI";
    src:
        local("Vazirmatn"),
        local("Vazir"),
        local("IRANSansX"),
        local("IRANSansXFaNum"),
        local("IRANSansX"),
        local("IRANSans"),
        local("Yekan Bakh FaNum"),
        local("Segoe UI Variable Text");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}


:root {
    color-scheme: dark;
    --page-a: #143e71;
    --page-b: #0a274b;
    --page-c: #041427;
    --text: #f3f7fd;
    --muted: #c5d1df;
    --muted-strong: #e3ebf5;
    --micro-text: #b9c8da;
    --panel: rgba(7, 25, 48, .88);
    --panel-soft: rgba(15, 48, 84, .7);
    --panel-border: rgba(151, 181, 216, .25);
    --field: rgba(13, 43, 77, .78);
    --field-border: rgba(150, 181, 216, .31);
    --gold: #dfa945;
    --gold-2: #f4cc72;
    --gold-soft: rgba(223, 169, 69, .12);
    --blue: #4aa7ff;
    --blue-soft: rgba(74, 167, 255, .12);
    --green: #48cf9b;
    --danger: #ff9999;
    --danger-bg: rgba(120, 24, 35, .28);
    --shadow: 0 30px 90px rgba(0, 0, 0, .3);
    --footer: rgba(5, 20, 39, .76);
    --slide-card: rgba(12, 39, 72, .73);
    --slide-card-2: rgba(22, 56, 95, .75);
    --line: rgba(151, 181, 216, .15);
}

html[data-pendar-theme="light"] {
    color-scheme: light;
    --page-a: #d8ebff;
    --page-b: #eef7ff;
    --page-c: #fbfdff;
    --text: #153f72;
    --muted: #4d647f;
    --muted-strong: #294d76;
    --micro-text: #526b88;
    --panel: rgba(255, 255, 255, .93);
    --panel-soft: rgba(248, 252, 255, .92);
    --panel-border: rgba(73, 128, 191, .21);
    --field: rgba(255, 255, 255, .97);
    --field-border: rgba(73, 127, 190, .24);
    --gold: #d3982a;
    --gold-2: #efc35e;
    --gold-soft: rgba(211, 152, 42, .1);
    --blue: #1765c5;
    --blue-soft: rgba(23, 101, 197, .08);
    --green: #178a62;
    --danger: #b92929;
    --danger-bg: rgba(255, 236, 236, .96);
    --shadow: 0 28px 72px rgba(45, 89, 142, .14);
    --footer: rgba(255, 255, 255, .82);
    --slide-card: rgba(255, 255, 255, .83);
    --slide-card-2: rgba(244, 249, 255, .92);
    --line: rgba(73, 128, 191, .13);
}

html, body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

body.pendar-login-page {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 28%),
        radial-gradient(circle at 72% 65%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 25%),
        linear-gradient(108deg, var(--page-a) 0%, var(--page-b) 47%, var(--page-c) 100%);
    font-family: "Pendar UI", "Vazirmatn", "IRANSansX", "IRANSans", "Segoe UI Variable Text", "Segoe UI", Tahoma, Arial, sans-serif;
}

body.pendar-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(95, 158, 230, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 158, 230, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 98%);
    pointer-events: none;
}

body.pendar-login-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(39, 104, 174, .07), transparent 35% 73%, rgba(0, 10, 24, .1));
    pointer-events: none;
}

.pendar-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

.pendar-shell {
    width: 100%;
    height: 100svh;
    display: grid;
    grid-template-rows: minmax(0, 1fr) clamp(72px, 10.5vh, 96px);
    gap: clamp(8px, 1.15vh, 12px);
    padding: clamp(10px, 1.5vh, 16px) clamp(16px, 1.9vw, 30px) clamp(9px, 1.25vh, 14px);
    overflow: hidden;
    position: relative;
}

.pendar-theme-toggle {
    position: fixed;
    z-index: 100;
    top: clamp(10px, 1.35vh, 15px);
    right: clamp(11px, 1.1vw, 18px);
    width: clamp(39px, 2.65vw, 45px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
    border-radius: 50%;
    padding: 0;
    color: var(--gold);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    backdrop-filter: blur(15px);
    cursor: pointer;
}

.pendar-theme-toggle svg { width: 53%; height: 53%; }
html[data-pendar-theme="dark"] .theme-dark-icon,
html[data-pendar-theme="light"] .theme-light-icon { display: none; }

.pendar-main-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(395px, 29vw, 475px) minmax(0, 1fr);
    gap: clamp(12px, 1.2vw, 20px);
    direction: ltr;
}

.pendar-login-card,
.pendar-slider {
    min-width: 0;
    min-height: 0;
    direction: rtl;
}

.pendar-login-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: clamp(24px, 2vw, 31px);
    background: linear-gradient(155deg, var(--panel-soft), var(--panel));
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
    position: relative;
}

.login-top-line {
    position: absolute;
    top: -2px;
    left: 18%;
    width: 64%;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--gold) 65%, transparent);
}

.login-card-content {
    width: min(100%, 410px);
    height: 100%;
    display: grid;
    align-content: center;
    gap: clamp(12px, 1.5vh, 17px);
    margin: 0 auto;
    padding: clamp(20px, 3.2vh, 34px) clamp(25px, 2.4vw, 38px);
}

.pendar-login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding-bottom: clamp(10px, 1.4vh, 14px);
    border-bottom: 1px solid var(--line);
}

.pendar-login-brand img {
    width: clamp(68px, 5.6vw, 88px);
    max-height: 86px;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .18));
}

.pendar-login-brand div { display: grid; gap: 3px; }
.pendar-login-brand strong { color: var(--gold); font-size: clamp(18px, 1.45vw, 23px); font-weight: 850; }
.pendar-login-brand span { color: var(--muted); font-size: clamp(8px, .68vw, 10px); font-weight: 650; }

.pendar-login-heading { text-align: right; }
.pendar-login-heading h1 { margin: 0; color: var(--text); font-size: clamp(21px, 1.7vw, 27px); font-weight: 830; line-height: 1.45; }
.pendar-login-heading p { margin: 4px 0 0; color: var(--muted); font-size: clamp(9px, .76vw, 11px); font-weight: 600; line-height: 1.85; }

.pendar-notice,
.pendar-validation-summary {
    max-height: 56px;
    overflow: auto;
    border-radius: 11px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.75;
}
.pendar-notice { border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); color: var(--gold-2); background: var(--gold-soft); }
.pendar-validation-summary { border: 1px solid color-mix(in srgb, var(--danger) 36%, transparent); color: var(--danger); background: var(--danger-bg); }
.pendar-validation-summary:empty,
.pendar-validation-summary.validation-summary-valid { display: none; }

.pendar-login-form { display: grid; gap: clamp(9px, 1.15vh, 12px); }
.pendar-field { display: grid; gap: 5px; }
.pendar-field-label { color: var(--muted-strong); font-size: 10px; font-weight: 700; }

.pendar-input-wrap {
    min-height: clamp(49px, 6.7vh, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    border: 1px solid var(--field-border);
    border-radius: clamp(13px, 1vw, 16px);
    background: var(--field);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 8px 20px rgba(0, 0, 0, .03);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.password-wrap { grid-template-columns: 42px minmax(0, 1fr) 48px; }
.pendar-input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent); transform: translateY(-1px); }

.pendar-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    grid-column: 1;
    border: 0;
    outline: 0;
    padding: 0 14px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: clamp(12px, .9vw, 14px);
    font-weight: 650;
    text-align: right;
}
.password-wrap .pendar-input { grid-column: 2; }
.pendar-input::placeholder { color: var(--muted); opacity: 1; font-weight: 600; }
.pendar-input-icon { grid-column: 2; display: grid; place-items: center; color: var(--gold); }
.password-wrap .pendar-input-icon { grid-column: 3; }
.pendar-input-icon svg { width: 23px; height: 23px; }

.password-toggle {
    grid-column: 1;
    grid-row: 1;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    justify-self: center;
    border: 0;
    border-radius: 10px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}
.password-toggle:hover { color: var(--gold); background: var(--gold-soft); }
.password-toggle svg { width: 18px; height: 18px; }
.password-hide-icon { display: none; }
.password-toggle.is-visible .password-show-icon { display: none; }
.password-toggle.is-visible .password-hide-icon { display: block; }

.pendar-field-error { color: var(--danger); font-size: 9px; font-weight: 650; }
.pendar-field-error:empty { display: none; }

.pendar-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pendar-remember { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 600; cursor: pointer; position: relative; }
.pendar-remember input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pendar-check-box { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--field-border); border-radius: 6px; background: var(--field); }
.pendar-remember input:checked + .pendar-check-box { border-color: var(--gold); background: linear-gradient(135deg, #f8d77f, #d69827); }
.pendar-remember input:checked + .pendar-check-box::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid #102847; border-bottom: 2px solid #102847; transform: rotate(-45deg); }
.pendar-remember input:focus-visible + .pendar-check-box { outline: 3px solid color-mix(in srgb, var(--gold) 22%, transparent); outline-offset: 2px; }
.pendar-forgot { color: var(--gold); text-decoration: none; font-size: 10px; font-weight: 700; }
.pendar-forgot:hover { color: var(--gold-2); }

 .pendar-submit {
    min-height: clamp(47px, 6.2vh, 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(113, 67, 8, .35);
    border-radius: clamp(13px, 1vw, 16px);
    padding: 9px 18px;
    color: #102746;
    background: linear-gradient(135deg, #ffe7a5 0%, #e8b54a 52%, #c9811e 100%);
    box-shadow: 0 15px 31px rgba(178, 107, 13, .25), inset 0 1px rgba(255, 255, 255, .65);
    font: inherit;
    font-size: clamp(12px, .92vw, 15px);
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}
.pendar-submit:hover { transform: translateY(-2px); box-shadow: 0 19px 37px rgba(178, 107, 13, .31), inset 0 1px rgba(255, 255, 255, .72); }
.pendar-submit svg { width: 20px; height: 20px; }

.pendar-register {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
    border-radius: 12px;
    padding: 7px 13px;
    color: var(--gold);
    background: linear-gradient(135deg, var(--gold-soft), var(--blue-soft));
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: transform .16s ease, border-color .16s ease;
}
.pendar-register:hover { transform: translateY(-1px); border-color: var(--gold); }
.pendar-register svg { width: 17px; height: 17px; }

.pendar-slider {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: clamp(25px, 2.1vw, 33px);
    background: linear-gradient(145deg, color-mix(in srgb, var(--panel-soft) 72%, transparent), color-mix(in srgb, var(--panel) 87%, transparent));
    box-shadow: var(--shadow);
    backdrop-filter: blur(23px);
    position: relative;
    isolation: isolate;
}

.slider-mesh {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 70% 50%, black, transparent 72%);
    opacity: .6;
}

.slider-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.slider-glow-one { width: 460px; height: 460px; top: -210px; right: -100px; background: color-mix(in srgb, var(--blue) 12%, transparent); }
.slider-glow-two { width: 390px; height: 390px; bottom: -220px; left: 15%; background: color-mix(in srgb, var(--gold) 10%, transparent); }

.pendar-slides { height: calc(100% - 120px); position: relative; overflow: hidden; }
.pendar-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(300px, .84fr) minmax(390px, 1.16fr);
    align-items: center;
    gap: clamp(24px, 3vw, 52px);
    padding: clamp(34px, 5vh, 58px) clamp(38px, 4vw, 72px) clamp(24px, 3.8vh, 42px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-36px) scale(.985);
    transition: opacity .52s ease, transform .52s ease, visibility .52s;
    pointer-events: none;
}
.pendar-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0) scale(1); pointer-events: auto; }

.slide-copy { max-width: 520px; position: relative; z-index: 4; }
.slide-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--gold);
    background: var(--gold-soft);
    font-size: 10px;
    font-weight: 750;
}
.slide-kicker svg { width: 17px; height: 17px; }
.slide-copy h2 { margin: 14px 0 10px; color: var(--text); font-size: clamp(22px, 1.95vw, 31px); font-weight: 850; line-height: 1.58; letter-spacing: -.25px; }
.slide-copy > p { margin: 0; color: var(--muted); font-size: clamp(10px, .84vw, 13px); font-weight: 600; line-height: 1.95; }
.slide-points { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.slide-points li { display: grid; grid-template-columns: 12px 1fr; align-items: start; column-gap: 10px; row-gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--slide-card-2) 58%, transparent); color: var(--muted-strong); }
.slide-points li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 4px var(--gold-soft); }
.slide-points li b { grid-column: 2; color: var(--text); font-size: clamp(10px, .82vw, 12px); font-weight: 780; }
.slide-points li small { grid-column: 2; color: var(--muted); font-size: clamp(8px, .68vw, 10px); font-weight: 600; line-height: 1.75; }

.slide-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.slide-highlights span { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--text); background: color-mix(in srgb, var(--slide-card-2) 80%, transparent); font-size: 8px; font-weight: 760; }
.mock-mini-panels,
.mini-stat-bar { display: grid; gap: 8px; margin-top: 12px; }
.mock-mini-panels { grid-template-columns: repeat(3, 1fr); }
.mock-mini-panels span,
.mini-stat-bar span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; background: color-mix(in srgb, var(--slide-card-2) 70%, transparent); }
.mock-mini-panels b,
.mini-stat-bar b { color: var(--gold); font-size: 12px; }
.mock-mini-panels small,
.mini-stat-bar small { color: var(--muted); font-size: 7px; }
.mini-stat-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 430px); position: absolute; left: 10px; bottom: -2px; }
.slider-footer-top { display: flex; align-items: center; justify-content: flex-end; padding: 13px clamp(28px, 3vw, 48px) 0; }
.slider-auto-badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 999px; padding: 7px 11px; color: var(--gold); background: color-mix(in srgb, var(--gold-soft) 85%, transparent); font-size: 8px; font-weight: 750; }
.slider-auto-badge svg { width: 16px; height: 16px; }

.slide-visual { min-width: 0; min-height: 360px; display: grid; place-items: center; position: relative; }
.mock-window,
.schedule-card,
.exam-card,
.report-dashboard,
.finance-card,
.pro-visual-card {
    width: min(100%, 590px);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    background: linear-gradient(150deg, var(--slide-card-2), var(--slide-card));
    box-shadow: 0 28px 64px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
}

/* Slide 1 */
.mock-window { padding: 15px; transform: perspective(1100px) rotateY(-4deg) rotateX(1.5deg); }
.mock-toolbar { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 3px 10px; border-bottom: 1px solid var(--line); direction: ltr; }
.mock-toolbar > span { width: 8px; height: 8px; border-radius: 50%; background: var(--panel-border); }
.mock-toolbar b { margin-left: auto; color: var(--muted-strong); font-size: 10px; direction: rtl; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 13px 0; }
.mock-stats div { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 13px; padding: 11px; background: color-mix(in srgb, var(--slide-card-2) 72%, transparent); }
.mock-stats strong { color: var(--gold); font-size: 21px; }
.mock-stats small { color: var(--muted); font-size: 8px; }
.mock-user-list { display: grid; gap: 8px; }
.mock-user-list > div { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; padding: 9px 10px; background: color-mix(in srgb, var(--slide-card-2) 64%, transparent); }
.avatar { width: 35px; height: 35px; border-radius: 11px; background: linear-gradient(135deg, var(--blue), var(--gold)); opacity: .85; }
.avatar-b { filter: hue-rotate(32deg); }.avatar-c { filter: hue-rotate(75deg); }
.mock-user-list span { display: grid; gap: 2px; }.mock-user-list b { color: var(--text); font-size: 9px; }.mock-user-list small { color: var(--muted); font-size: 7px; }
.mock-user-list em { border-radius: 999px; padding: 4px 7px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); font-size: 7px; font-style: normal; }
.floating-badge { position: absolute; right: -8px; bottom: 12px; display: flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 14px; padding: 10px 12px; color: var(--gold); background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 18px 34px rgba(0,0,0,.2); }
.floating-badge svg { width: 24px; height: 24px; }.floating-badge span { display: grid; gap: 2px; }.floating-badge b { color: var(--text); font-size: 8px; }.floating-badge small { color: var(--muted); font-size: 7px; }

/* Slide 2 */
.schedule-card { padding: 16px; transform: perspective(1100px) rotateY(-3deg); }
.schedule-title { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.schedule-title > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--gold); background: var(--gold-soft); }
.schedule-title svg { width: 22px; height: 22px; }.schedule-title div { display: grid; gap: 2px; }.schedule-title b { color: var(--text); font-size: 11px; }.schedule-title small { color: var(--muted); font-size: 8px; }
.schedule-row { display: grid; grid-template-columns: 46px 12px 1fr auto; align-items: center; gap: 8px; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.schedule-row:last-child { border-bottom: 0; }.schedule-row time { color: var(--muted); font-size: 8px; direction: ltr; }.schedule-row > i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }.schedule-row.is-now > i { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.schedule-row div { display: grid; gap: 2px; }.schedule-row b { color: var(--text); font-size: 9px; }.schedule-row small { color: var(--muted); font-size: 7px; }.schedule-row em { border-radius: 999px; padding: 4px 7px; color: var(--muted); background: var(--blue-soft); font-size: 7px; font-style: normal; }.schedule-row.is-now em { color: var(--gold); background: var(--gold-soft); }
.attendance-card { position: absolute; left: -8px; bottom: 7px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--panel-border); border-radius: 16px; padding: 10px 13px; background: color-mix(in srgb, var(--panel) 95%, transparent); box-shadow: 0 18px 36px rgba(0,0,0,.2); }
.attendance-ring { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--gold) 0 94%, var(--line) 94%); position: relative; }.attendance-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel); }.attendance-ring b { position: relative; z-index: 1; color: var(--text); font-size: 9px; }.attendance-card > div { display: grid; gap: 2px; }.attendance-card > div b { color: var(--text); font-size: 8px; }.attendance-card small { color: var(--muted); font-size: 7px; }

/* Slide 3 */
.exam-card { padding: 17px; transform: perspective(1100px) rotateY(-3deg); }
.exam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.exam-head div { display: grid; gap: 2px; }.exam-head span { color: var(--text); font-size: 11px; font-weight: 750; }.exam-head small { color: var(--muted); font-size: 8px; }.exam-head em { border-radius: 999px; padding: 5px 8px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); font-size: 7px; font-style: normal; }
.exam-progress { height: 6px; margin: 13px 0; overflow: hidden; border-radius: 999px; background: var(--line); direction: ltr; }.exam-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--blue)); }
.exam-question { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: color-mix(in srgb, var(--slide-card-2) 60%, transparent); }.exam-question small { color: var(--gold); font-size: 8px; }.exam-question b { color: var(--text); font-size: 10px; line-height: 1.8; }.exam-question > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.exam-question span { border: 1px solid var(--line); border-radius: 10px; padding: 8px; color: var(--muted); font-size: 8px; }.exam-question span.selected { border-color: color-mix(in srgb, var(--gold) 48%, transparent); color: var(--gold); background: var(--gold-soft); }
.exam-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }.exam-footer span { color: var(--muted); font-size: 8px; }.exam-footer button { border: 0; border-radius: 9px; padding: 7px 12px; color: #102746; background: linear-gradient(135deg, var(--gold-2), var(--gold)); font-family: inherit; font-size: 8px; }
.score-card { position: absolute; left: -3px; bottom: 6px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--panel-border); border-radius: 16px; padding: 11px 14px; color: var(--gold); background: color-mix(in srgb, var(--panel) 95%, transparent); box-shadow: 0 18px 36px rgba(0,0,0,.2); }.score-card span { display: grid; gap: 1px; }.score-card b { color: var(--text); font-size: 17px; }.score-card small { color: var(--muted); font-size: 7px; }.score-card svg { width: 27px; height: 27px; }

/* Slide 4 */
.report-dashboard { padding: 16px; transform: perspective(1100px) rotateY(-3deg); }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.report-head div { display: grid; gap: 2px; }.report-head b { color: var(--text); font-size: 11px; }.report-head small { color: var(--muted); font-size: 8px; }.report-head > span { border-radius: 9px; padding: 6px 9px; color: var(--blue); background: var(--blue-soft); font-size: 7px; }
.report-chart { height: 190px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 20px; gap: 4px 8px; margin-top: 10px; position: relative; }.chart-axis { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: 7px; }.report-chart > svg { width: 100%; height: 100%; color: var(--blue); overflow: visible; border-bottom: 1px solid var(--line); }.chart-labels { grid-column: 2; display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; }
.report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.report-metrics div { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: color-mix(in srgb, var(--slide-card-2) 60%, transparent); }.report-metrics strong { color: var(--gold); font-size: 15px; }.report-metrics small { color: var(--muted); font-size: 7px; }
.report-card-mini { position: absolute; right: -4px; bottom: 5px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--panel-border); border-radius: 15px; padding: 10px 13px; color: var(--gold); background: color-mix(in srgb, var(--panel) 95%, transparent); box-shadow: 0 18px 36px rgba(0,0,0,.2); }.report-card-mini svg { width: 26px; height: 26px; }.report-card-mini span { display: grid; gap: 2px; }.report-card-mini b { color: var(--text); font-size: 8px; }.report-card-mini small { color: var(--muted); font-size: 7px; }

/* Slide 5 */
.finance-card { max-width: 500px; padding: 18px; transform: perspective(1100px) rotateY(-3deg); }.finance-head { display: flex; align-items: center; gap: 10px; }.finance-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--gold); background: var(--gold-soft); }.finance-head svg { width: 22px; height: 22px; }.finance-head div { display: grid; gap: 2px; }.finance-head b { color: var(--text); font-size: 11px; }.finance-head small { color: var(--muted); font-size: 8px; }
.finance-amount { display: grid; gap: 4px; margin: 18px 0 11px; }.finance-amount small { color: var(--muted); font-size: 8px; }.finance-amount strong { color: var(--text); font-size: 24px; direction: rtl; }.finance-amount em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; }.finance-progress { height: 7px; overflow: hidden; border-radius: 999px; background: var(--line); direction: ltr; }.finance-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--blue)); }.finance-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 13px 0; }.finance-meta span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; }.finance-meta b { color: var(--gold); font-size: 13px; }.finance-meta small { color: var(--muted); font-size: 7px; }.finance-card > button { width: 100%; border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent); border-radius: 11px; padding: 9px; color: var(--gold); background: var(--gold-soft); font-family: inherit; font-size: 8px; }
.chat-card { position: absolute; left: -4px; bottom: 7px; width: min(330px, 70%); display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--panel-border); border-radius: 15px; padding: 11px 13px; background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 18px 36px rgba(0,0,0,.2); }.chat-card > div { display: flex; align-items: center; gap: 9px; min-width: 0; }.chat-card svg { width: 24px; height: 24px; color: var(--blue); }.chat-card span { min-width: 0; display: grid; gap: 2px; }.chat-card b { color: var(--text); font-size: 8px; }.chat-card small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.chat-card em { color: var(--muted); font-size: 7px; font-style: normal; }


/* Expanded professional feature slides */
.pro-visual-card { width: min(100%, 600px); border: 1px solid var(--panel-border); border-radius: 22px; background: linear-gradient(150deg, var(--slide-card-2), var(--slide-card)); box-shadow: 0 28px 64px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(18px); }
.visual-card-head, .security-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.visual-card-head > span, .security-head > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--gold); background: var(--gold-soft); }
.visual-card-head svg, .security-head svg { width: 22px; height: 22px; }
.visual-card-head div, .security-head div { display: grid; gap: 2px; }.visual-card-head b, .security-head b { color: var(--text); font-size: 11px; }.visual-card-head small, .security-head small { color: var(--muted); font-size: 8px; }.visual-card-head em, .security-head em { border-radius: 999px; padding: 5px 8px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); font-size: 7px; font-style: normal; }
.admission-board { padding: 17px; transform: perspective(1100px) rotateY(-3deg); }
.admission-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0; position: relative; }
.admission-pipeline::before { content: ""; position: absolute; top: 17px; left: 12%; right: 12%; height: 2px; background: var(--line); }
.admission-pipeline > div { display: grid; justify-items: center; gap: 7px; text-align: center; position: relative; z-index: 2; }
.admission-pipeline i { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--panel-border); border-radius: 50%; color: var(--muted); background: var(--slide-card); font-size: 9px; font-style: normal; }
.admission-pipeline .is-complete i { border-color: var(--green); color: #fff; background: var(--green); }.admission-pipeline .is-current i { border-color: var(--gold); color: #102746; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 0 0 5px var(--gold-soft); }
.admission-pipeline span { display: grid; gap: 2px; }.admission-pipeline b { color: var(--text); font-size: 8px; }.admission-pipeline small { color: var(--muted); font-size: 7px; }
.admission-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.admission-summary span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }.admission-summary b { color: var(--gold); font-size: 16px; }.admission-summary small { color: var(--muted); font-size: 7px; }
.visual-floating-card { position: absolute; display: flex; align-items: center; gap: 9px; border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 15px; padding: 11px 13px; color: var(--gold); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 18px 36px rgba(0,0,0,.2); }.visual-floating-card svg { width: 24px; height: 24px; }.visual-floating-card span { display: grid; gap: 2px; }.visual-floating-card b { color: var(--text); font-size: 8px; }.visual-floating-card small { color: var(--muted); font-size: 7px; }.admission-floating { right: 0; bottom: 9px; }
.online-class-card { padding: 16px; transform: perspective(1100px) rotateY(-3deg); }.online-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.online-topbar > div { display: flex; align-items: center; gap: 8px; }.online-topbar b { color: var(--text); font-size: 10px; }.online-topbar em { color: var(--green); font-size: 7px; font-style: normal; }.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 0 5px rgba(255,92,108,.12); }
.video-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr; grid-template-rows: repeat(2, 100px); gap: 9px; margin: 13px 0; }.video-grid > div { min-width: 0; display: grid; align-content: center; justify-items: center; gap: 5px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--slide-card-2) 70%, transparent); }.teacher-tile { grid-row: 1 / 3; background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 16%, var(--slide-card)), var(--slide-card)) !important; }.teacher-tile > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; color: var(--blue); background: var(--blue-soft); }.teacher-tile svg { width: 31px; height: 31px; }.video-grid b { color: var(--text); font-size: 8px; }.video-grid small { color: var(--muted); font-size: 7px; }.student-circle { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,var(--blue),var(--gold)); }.student-two { filter: hue-rotate(35deg); }.student-three { filter: hue-rotate(70deg); }
.class-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.class-controls span { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; }.class-controls b { color: var(--gold); font-size: 13px; }.class-controls small { color: var(--muted); font-size: 7px; }.class-floating { left: -4px; bottom: 7px; }
.communication-panel { padding: 16px; transform: perspective(1100px) rotateY(-3deg); }
.communication-columns { display: grid; grid-template-columns: 1.06fr .94fr; gap: 12px; }
.messenger-card,
.notification-list,
.help-center-card { min-width: 0; border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: color-mix(in srgb, var(--slide-card-2) 70%, transparent); }
.messenger-card header,
.notification-list header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.messenger-card header b,
.notification-list header b { color: var(--text); font-size: 10px; }
.messenger-card header span,
.notification-list header span { color: var(--gold); font-size: 7px; }
.messenger-card article,
.notification-list article { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.messenger-card article:last-child,
.notification-list article:last-child { border-bottom: 0; }
.notify-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.notify-icon svg { width: 18px; height: 18px; }
.messenger-card article div,
.notification-list article div { min-width: 0; display: grid; gap: 2px; }
.messenger-card article b,
.notification-list article b { color: var(--text); font-size: 8px; }
.messenger-card article small,
.notification-list article small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-card article em,
.notification-list article em { color: var(--muted); font-size: 6px; font-style: normal; }
.communication-floating { right: 1px; bottom: 7px; }
.security-console { padding: 17px; transform: perspective(1100px) rotateY(-3deg); }.security-health { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 14px 0; }.security-health > div { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 13px; padding: 10px; }.health-ring { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 4px solid color-mix(in srgb, var(--green) 45%, var(--line)); border-top-color: var(--green); border-radius: 50%; font-style: normal; }.health-ring b { color: var(--text); font-size: 9px; }.security-health span { display: grid; gap: 2px; }.security-health span b { color: var(--text); font-size: 8px; }.security-health span small { color: var(--muted); font-size: 6px; }.backup-list { display: grid; gap: 8px; }.backup-list article { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; padding: 10px; }.backup-list article > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; color: var(--gold); background: var(--gold-soft); }.backup-list svg { width: 20px; height: 20px; }.backup-list article div { display: grid; gap: 2px; }.backup-list b { color: var(--text); font-size: 8px; }.backup-list small { color: var(--muted); font-size: 7px; }.backup-list em { border-radius: 999px; padding: 4px 7px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); font-size: 7px; font-style: normal; }.security-floating { left: -4px; bottom: 7px; }

html[data-pendar-theme="light"] .pro-visual-card { box-shadow: 0 24px 58px rgba(47,91,143,.16), inset 0 1px white; }

.slider-footer {
    height: 76px;
    display: grid;
    grid-template-columns: 1fr minmax(120px, 25%) auto;
    align-items: center;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding: 0 clamp(28px, 3vw, 48px);
    background: color-mix(in srgb, var(--panel) 50%, transparent);
}
.slider-pagination { display: flex; align-items: center; gap: 7px; }
.slider-dot { width: 8px; height: 8px; border: 0; border-radius: 999px; padding: 0; background: var(--panel-border); cursor: pointer; transition: width .22s ease, background-color .22s ease; }
.slider-dot.is-active { width: 28px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.slider-progress { height: 3px; overflow: hidden; border-radius: 999px; background: var(--line); direction: ltr; }
.slider-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--blue)); }
.pendar-slider.is-playing .slider-progress span { animation: sliderProgress 5.8s linear forwards; }
@keyframes sliderProgress { from { width: 0; } to { width: 100%; } }
.slider-actions { display: flex; align-items: center; gap: 9px; direction: ltr; }
.slider-arrow { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--panel-border); border-radius: 12px; padding: 0; color: var(--muted-strong); background: color-mix(in srgb, var(--slide-card) 75%, transparent); cursor: pointer; transition: color .16s ease, border-color .16s ease, transform .16s ease; }
.slider-arrow:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 48%, transparent); transform: translateY(-1px); }
.slider-arrow svg { width: 19px; height: 19px; }
.slider-counter { display: inline-flex; align-items: baseline; gap: 4px; min-width: 55px; justify-content: center; color: var(--muted); font-size: 9px; direction: ltr; }
.slider-counter b { color: var(--gold); font-size: 15px; }.slider-counter i { font-style: normal; opacity: .5; }

.pendar-footer {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gold) 29%, transparent);
    border-radius: clamp(17px, 1.4vw, 22px);
    background: var(--footer);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .11);
    backdrop-filter: blur(18px);
}
.pendar-footer article { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 8px 17px; }
.pendar-footer article + article { border-left: 1px solid var(--line); }
.pendar-footer article > span { flex: 0 0 auto; width: clamp(34px, 2.8vw, 42px); height: clamp(34px, 2.8vw, 42px); display: grid; place-items: center; color: var(--gold); }
.pendar-footer svg { width: 72%; height: 72%; }.pendar-footer strong, .pendar-footer small { display: block; }.pendar-footer strong { color: var(--text); font-size: clamp(9px, .8vw, 12px); font-weight: 750; }.pendar-footer small { margin-top: 3px; color: var(--muted); font-size: clamp(7px, .64vw, 9px); font-weight: 550; line-height: 1.6; }

html[data-pendar-theme="light"] body.pendar-login-page {
    background:
        radial-gradient(circle at 12% 10%, rgba(65, 144, 225, .1), transparent 28%),
        radial-gradient(circle at 72% 65%, rgba(226, 169, 60, .08), transparent 25%),
        linear-gradient(108deg, #dceeff 0%, #f0f8ff 48%, #fbfdff 100%);
}
html[data-pendar-theme="light"] .pendar-login-card,
html[data-pendar-theme="light"] .pendar-slider { box-shadow: 0 25px 66px rgba(47, 91, 143, .14), inset 0 1px rgba(255,255,255,.85); }
html[data-pendar-theme="light"] .pendar-login-brand strong { color: #b97816; }
html[data-pendar-theme="light"] .pendar-login-heading h1 { color: #174d88; }
html[data-pendar-theme="light"] .pendar-input-wrap { box-shadow: 0 8px 21px rgba(46, 88, 140, .045), inset 0 1px white; }
html[data-pendar-theme="light"] .slide-copy h2 { color: #16477f; }
html[data-pendar-theme="light"] .mock-window,
html[data-pendar-theme="light"] .schedule-card,
html[data-pendar-theme="light"] .exam-card,
html[data-pendar-theme="light"] .report-dashboard,
html[data-pendar-theme="light"] .finance-card { box-shadow: 0 24px 58px rgba(47, 91, 143, .16), inset 0 1px white; }
html[data-pendar-theme="light"] .slide-highlights span,
html[data-pendar-theme="light"] .mock-mini-panels span,
html[data-pendar-theme="light"] .mini-stat-bar span { background: rgba(255,255,255,.88); }
html[data-pendar-theme="light"] .slider-auto-badge { box-shadow: 0 10px 24px rgba(47,91,143,.08); }

@media (min-width: 901px) and (max-height: 760px) {
    .pendar-shell { grid-template-rows: minmax(0, 1fr) 70px; gap: 8px; padding-block: 9px 8px; }
    .login-card-content { gap: 9px; padding-block: 17px; }
    .pendar-login-brand { padding-bottom: 8px; }.pendar-login-brand img { width: 62px; max-height: 61px; }.pendar-login-brand strong { font-size: 20px; }
    .pendar-login-heading h1 { font-size: 23px; }.pendar-login-heading p { display: none; }
    .pendar-login-form { gap: 7px; }.pendar-input-wrap, .pendar-submit { min-height: 44px; }.pendar-register { min-height: 35px; }
    .pendar-slides { height: calc(100% - 64px); }.slider-footer { height: 64px; }
    .pendar-slide { padding-block: 25px 18px; }.slide-copy h2 { margin-block: 12px 7px; font-size: clamp(24px, 2.1vw, 34px); }.slide-points { margin-top: 13px; gap: 7px; }
    .slide-visual { min-height: 315px; }.report-chart { height: 155px; }.slider-arrow { width: 34px; height: 34px; }
    .pendar-footer small { display: none; }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .pendar-main-grid { grid-template-columns: 365px minmax(0, 1fr); gap: 10px; }
    .pendar-slide { grid-template-columns: minmax(270px, .9fr) minmax(330px, 1.1fr); gap: 20px; padding-inline: 28px; }
    .slide-copy h2 { font-size: clamp(23px, 2.3vw, 32px); }.slide-visual { min-height: 320px; }
}

@media (max-width: 900px) {
    body.pendar-login-page { overflow-y: auto; }
    .pendar-shell { height: auto; min-height: 100svh; grid-template-rows: auto; gap: 12px; padding: 64px 12px 12px; overflow: visible; }
    .pendar-main-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .pendar-login-card, .pendar-slider { height: auto; border-radius: 22px; }
    .pendar-login-card { grid-row: 1; width: min(560px, 100%); justify-self: center; }
    .login-card-content { width: 100%; padding: 22px 18px; }
    .pendar-slider {
        grid-row: 2;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }
    .pendar-slides {
        flex: 0 0 auto;
        width: 100%;
        height: auto !important;
        min-height: 0;
        overflow: hidden;
    }
    .pendar-slide {
        position: absolute;
        width: 100%;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 22px;
        padding: 32px 22px 20px;
    }
    .pendar-slide.is-active {
        position: relative;
        inset: auto;
    }
    .slide-copy { max-width: none; }
    .slide-copy h2 { font-size: 24px; }
    .slide-visual { min-height: 270px; }
    .slider-footer-top { justify-content: flex-start; padding: 12px 20px 0; }
    .slider-footer { height: 68px; padding-inline: 20px; }
    .pendar-footer { grid-template-columns: 1fr; }
    .pendar-footer article { justify-content: flex-start; padding: 11px 17px; }
    .pendar-footer article + article { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
    .pendar-theme-toggle { top: 12px; right: 12px; width: 41px; }
    .pendar-login-brand { justify-content: center; }
    .pendar-login-brand img { width: 58px; }
    .pendar-login-brand strong { font-size: 19px; }
    .pendar-login-brand span { font-size: 9px; }
    .pendar-login-heading h1 { font-size: 20px; }
    .pendar-login-heading p { font-size: 10px; }
    .pendar-form-meta { align-items: stretch; flex-direction: column; gap: 10px; }
    .pendar-remember { justify-content: flex-start; }
    .pendar-forgot { align-self: flex-start; }
    .pendar-input-wrap, .pendar-submit { min-height: 48px; }
    .pendar-slider { min-height: 0; }
    .pendar-slide { padding: 28px 16px 18px; gap: 18px; }
    .slide-copy h2 { font-size: 21px; }
    .slide-copy > p { font-size: 10px; }
    .slide-points { gap: 8px; }
    .slide-visual { min-height: 250px; }
    .slide-highlights span { font-size: 8px; }
    .mock-mini-panels, .mini-stat-bar, .security-health { grid-template-columns: 1fr; }
    .mock-window, .schedule-card, .exam-card, .report-dashboard, .finance-card, .pro-visual-card { transform: none; }
    .visual-floating-card { position: relative; inset: auto; width: min(100%, 320px); margin: 10px auto 0; }
    .communication-columns, .communication-columns-chat { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 135px 88px 88px; }
    .teacher-tile { grid-column: 1 / -1; grid-row: auto; }
    .admission-pipeline { grid-template-columns: repeat(2,1fr); }
    .admission-pipeline::before { display: none; }
    .mock-stats { grid-template-columns: 1fr 1fr; }
    .mock-stats div:last-child { grid-column: 1 / -1; }
    .floating-badge, .attendance-card, .score-card, .report-card-mini, .chat-card { position: relative; inset: auto; width: min(100%, 320px); margin: 10px auto 0; }
    .slider-footer { grid-template-columns: 1fr auto; gap: 12px; }
    .slider-progress { display: none; }
    .slider-actions { gap: 6px; }
    .slider-counter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .slider-progress span { animation: none !important; }
}


@media (max-width: 420px) {
    .login-card-content { padding: 20px 14px; }
    .pendar-field-label, .pendar-forgot, .pendar-remember { font-size: 11px; }
    .pendar-register { font-size: 11px; min-height: 42px; }
    .slider-pagination { gap: 6px; flex-wrap: wrap; }
    .slider-dot.is-active { width: 20px; }
    .slider-auto-badge span { line-height: 1.8; }
    .pendar-footer strong { font-size: 11px; }
    .pendar-footer small { font-size: 9px; }
}

/* Improved readability for small supporting text in both themes */
.pendar-login-brand span,
.pendar-login-heading p,
.pendar-field-label,
.pendar-remember,
.slide-copy > p,
.slide-points li small,
.mock-stats small,
.mock-mini-panels small,
.mini-stat-bar small,
.mock-toolbar b,
.mock-user-list small,
.schedule-title small,
.schedule-row small,
.attendance-card small,
.exam-head small,
.exam-question small,
.score-card small,
.report-head small,
.report-metrics small,
.report-card-mini small,
.finance-head small,
.finance-amount small,
.finance-meta small,
.chat-card small,
.visual-card-head small,
.admission-pipeline small,
.admission-summary small,
.online-topbar small,
.video-grid small,
.class-controls small,
.messenger-card article small,
.notification-list article small,
.security-head small,
.security-health small,
.backup-list small,
.visual-floating-card small,
.slider-counter,
.pendar-footer small {
    color: var(--micro-text);
    opacity: 1;
    font-weight: 650;
}

.slide-points li small,
.slide-copy > p,
.pendar-login-heading p,
.pendar-footer small {
    text-shadow: 0 1px 0 color-mix(in srgb, var(--panel) 32%, transparent);
}

html[data-pendar-theme="light"] .slide-points li small,
html[data-pendar-theme="light"] .slide-copy > p,
html[data-pendar-theme="light"] .pendar-login-heading p,
html[data-pendar-theme="light"] .pendar-footer small {
    text-shadow: none;
}