:root {
    --theme-primary: #59a8ff;
    --theme-secondary: #2f76d0;
    --theme-accent: #59efd0;
    --theme-background: #06111e;
    --theme-surface: #132239;
    --theme-text: #eff6ff;
    --display-bg: var(--theme-background);
    --display-surface: color-mix(in srgb, var(--theme-surface) 86%, #08101c 14%);
    --display-surface-strong: color-mix(in srgb, var(--theme-surface) 92%, #040912 8%);
    --display-border: color-mix(in srgb, var(--theme-primary) 20%, rgba(255, 255, 255, 0.08));
    --display-text: var(--theme-text);
    --display-muted: color-mix(in srgb, var(--theme-text) 74%, #87a3c9 26%);
    --display-shadow: 0 20px 60px rgba(2, 8, 20, 0.34);
    --display-radius: 24px;
    --display-transition: 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; font-family: 'Outfit', sans-serif; }
html { background: #050d18; }
body.display-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--display-text);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary) 18%, transparent), transparent 26%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 28%),
        linear-gradient(135deg, #050c16 0%, color-mix(in srgb, var(--display-bg) 92%, #0b1728 8%) 54%, #07111e 100%);
    overflow: hidden;
    transition: background 260ms ease, color 220ms ease, opacity 180ms ease;
}
body.display-body.is-refreshing { opacity: 0.992; }
img, video { max-width: 100%; }

.display-topbar {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) minmax(260px, auto);
    align-items: center;
    gap: 20px;
    min-height: 116px;
    padding: 16px 22px;
    margin: 12px 12px 0;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 14%, rgba(255,255,255,0.08));
    border-radius: 26px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 80%, white 20%), color-mix(in srgb, var(--theme-secondary) 72%, #0d56b6 28%));
    box-shadow: var(--display-shadow);
    overflow: hidden;
}
.display-topbar__left, .display-topbar__center, .display-topbar__right { position: relative; z-index: 1; min-width: 0; }
.display-logo-frame {
    display: flex; align-items: center; justify-content: center;
    width: 86px; height: 86px; border-radius: 20px;
    background: rgba(255,255,255,0.14); backdrop-filter: blur(14px); overflow: hidden;
}
.display-logo-image { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.display-logo-fallback { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.12em; }
.display-kicker { margin: 0 0 6px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.84); }
.display-topbar__center { display: grid; align-content: center; min-height: 84px; }
.display-topbar__center h1 { margin: 0; font-size: clamp(1.72rem, 2.35vw, 2.5rem); line-height: 1.02; }
.display-subtitle { margin: 8px 0 0; font-size: 0.98rem; line-height: 1.2; color: rgba(255,255,255,0.92); }
.display-topbar__right { display: grid; align-content: center; justify-items: end; gap: 8px; min-height: 84px; }
.display-topbar__date-row { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; }
.display-date { margin-bottom: 4px; color: rgba(255,255,255,0.92); font-size: 0.92rem; }
.display-time { font-size: clamp(1.7rem, 2.15vw, 2.45rem); font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; line-height: 1; }
.display-theme-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; transition: transform 180ms ease, background-color 180ms ease; }
.display-theme-toggle:hover { transform: translateY(-1px); background: rgba(255,255,255,0.18); }
.display-theme-toggle__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(255,255,255,0.18); font-size: 0.7rem; font-weight: 700; }

.display-shell {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 12px 14px;
}
.display-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.display-grid--home { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.display-card {
    position: relative; overflow: hidden; min-height: 0; height: 100%; padding: 16px;
    border: 1px solid var(--display-border); border-radius: var(--display-radius);
    background: linear-gradient(180deg, var(--display-surface), var(--display-surface-strong));
    box-shadow: var(--display-shadow); isolation: isolate;
}
.display-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 9%, transparent), transparent 44%); pointer-events: none; }
.display-card__header { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.display-card__eyebrow { margin: 0 0 6px; color: color-mix(in srgb, var(--theme-primary) 86%, white 14%); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
.display-card h2 { position: relative; z-index: 1; margin: 0; color: color-mix(in srgb, var(--theme-primary) 92%, white 8%); font-size: clamp(1.12rem, 1.32vw, 1.5rem); line-height: 1.12; }
.card-video, .card-schedule, .card-attendance, .card-teachers, .card-announcements, .card-achievements { grid-column: span 4; }
.display-loop { position: relative; z-index: 1; display: grid; min-height: 0; height: calc(100% - 52px); }
.display-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px) scale(0.99); transition: opacity 680ms ease, transform 680ms ease, visibility 0ms linear 680ms; }
.display-slide.is-entering-left, .display-slide.is-entering-right, .display-slide.is-entering-fade, .display-slide.is-leaving-left, .display-slide.is-leaving-right, .display-slide.is-leaving-fade { visibility: visible; }
.display-slide.is-entering-left { opacity: 0; transform: translateX(52px) scale(0.985); }
.display-slide.is-entering-right { opacity: 0; transform: translateX(-52px) scale(0.985); }
.display-slide.is-entering-fade { opacity: 0; transform: scale(0.992); }
.display-slide.is-leaving-left { opacity: 0; transform: translateX(-52px) scale(0.985); }
.display-slide.is-leaving-right { opacity: 0; transform: translateX(52px) scale(0.985); }
.display-slide.is-leaving-fade { opacity: 0; transform: scale(1.008); }
.display-slide.is-entering-left, .display-slide.is-entering-right, .display-slide.is-entering-fade, .display-slide.is-leaving-left, .display-slide.is-leaving-right, .display-slide.is-leaving-fade { visibility: visible; }
.display-slide.is-entering-left { opacity: 0; transform: translateX(42px) scale(0.985); }
.display-slide.is-entering-right { opacity: 0; transform: translateX(-42px) scale(0.985); }
.display-slide.is-entering-fade { opacity: 0; transform: scale(0.992); }
.display-slide.is-leaving-left { opacity: 0; transform: translateX(-42px) scale(0.985); }
.display-slide.is-leaving-right { opacity: 0; transform: translateX(42px) scale(0.985); }
.display-slide.is-leaving-fade { opacity: 0; transform: scale(1.008); }
.display-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0) translateY(0) scale(1); }
.display-video-wrap, .display-info-media, .display-achievement-media, .display-profile-photo { position: relative; overflow: hidden; border-radius: 18px; background: rgba(255,255,255,0.05); }
.display-video-wrap { height: calc(100% - 56px); min-height: 0; }
.display-video-player { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.display-media-caption { margin-top: 10px; }
.display-media-caption strong, .display-profile-body strong, .display-info-body strong, .display-achievement-body strong, .display-schedule-body strong, .display-person-card strong { display: block; font-size: 1rem; line-height: 1.24; }
.display-media-caption p, .display-profile-body p, .display-profile-body small, .display-info-body p, .display-achievement-body p, .display-achievement-body small, .display-schedule-body p, .display-schedule-body small, .display-person-card p, .display-person-card small { margin: 4px 0 0; color: var(--display-muted); line-height: 1.42; font-size: 0.88rem; }
.display-schedule-scroll {
    position: relative;
    z-index: 1;
    height: calc(100% - 52px);
    min-height: 0;
    overflow: hidden;
    mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.display-schedule-list { display: grid; gap: 8px; }
.display-schedule-list--compact {
    align-content: start;
    gap: 6px;
    padding-right: 4px;
    will-change: transform;
}
.display-schedule-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(112px, 1.15fr) minmax(132px, 1.45fr) minmax(120px, 0.95fr) minmax(84px, 0.8fr);
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.display-schedule-row::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-accent) 36%, transparent), 0 0 18px color-mix(in srgb, var(--theme-primary) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--theme-accent) 10%, transparent);
    transition: opacity 220ms ease;
}
.display-schedule-row.is-current {
    border-color: color-mix(in srgb, var(--theme-primary) 58%, rgba(255,255,255,0.16));
    background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 20%, rgba(255,255,255,0.03)), rgba(255,255,255,0.045));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 10px 28px rgba(0,0,0,0.2);
    animation: scheduleGlow 2.8s ease-in-out infinite;
}
.display-schedule-row.is-current::after { opacity: 1; }
.display-schedule-col { min-width: 0; }
.display-schedule-col--title strong { font-size: 0.92rem; }
.display-schedule-col--description p,
.display-schedule-col--location span,
.display-schedule-range {
    margin: 0;
    font-size: 0.82rem;
    color: var(--display-muted);
}
.display-schedule-col--time { display: block; min-width: 0; }
.display-schedule-range {
    display: block;
    color: color-mix(in srgb, var(--theme-accent) 84%, white 16%);
    font-weight: 700;
    white-space: nowrap;
}
.display-attendance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.display-attendance-panel { position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; height: calc(100% - 52px); min-height: 0; }
.display-attendance-scroll { height: 100%; min-height: 0; }
.display-attendance-stack { display: grid; gap: 8px; align-content: start; padding-right: 4px; will-change: transform; }
.display-attendance-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; background: linear-gradient(180deg, rgba(5,11,21,0.42), rgba(4,10,18,0.22)); }
.display-attendance-row__identity { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; }
.display-attendance-row__identity .display-avatar-badge { width: 44px; height: 44px; margin: 0; font-size: 0.84rem; }
.display-attendance-row__identity p { margin: 4px 0 0; color: var(--display-muted); font-size: 0.82rem; }
.display-attendance-row__meta { display: grid; justify-items: end; gap: 6px; text-align: right; }
.display-attendance-row__meta small { color: var(--display-muted); font-size: 0.8rem; }
.display-attendance-notices { height: 86px; min-height: 86px; }
.display-tap-notice { display: grid; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.04); min-height: 86px; }
.display-tap-notice__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.display-tap-notice__head strong { font-size: 0.9rem; line-height: 1.2; }
.display-tap-notice__head span { color: var(--display-muted); font-size: 0.78rem; white-space: nowrap; }
.display-tap-notice p { margin: 0; color: var(--display-muted); font-size: 0.84rem; line-height: 1.45; }
.display-tap-notice--accepted { border-color: rgba(34,197,94,0.24); background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(255,255,255,0.03)); }
.display-tap-notice--duplicate, .display-tap-notice--ignored { border-color: rgba(245,158,11,0.24); background: linear-gradient(180deg, rgba(245,158,11,0.08), rgba(255,255,255,0.03)); }
.display-tap-notice--unknown_uid { border-color: rgba(239,68,68,0.24); background: linear-gradient(180deg, rgba(239,68,68,0.08), rgba(255,255,255,0.03)); }
.display-tap-notice--too_early_checkout { border-color: rgba(56,189,248,0.24); background: linear-gradient(180deg, rgba(56,189,248,0.08), rgba(255,255,255,0.03)); }
.display-person-card { display: grid; justify-items: center; align-content: start; min-height: 0; padding: 12px 10px; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; background: linear-gradient(180deg, rgba(5,11,21,0.42), rgba(4,10,18,0.22)); text-align: center; }
.display-avatar-badge, .display-profile-photo.is-fallback span, .display-achievement-media.is-fallback span, .display-info-media.is-fallback-media span, .display-logo-frame.is-fallback-media span, .display-profile-photo.is-fallback-media span, .display-achievement-media.is-fallback-media span { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)); color: #04101b; font-weight: 800; margin-bottom: 10px; }
.display-status-chip, .display-badge-pill, .display-info-tag, .display-link-label { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.display-status-chip, .display-info-tag { margin-top: 8px; color: #fff; background: rgba(255,255,255,0.09); }
.display-status-chip--late { background: rgba(245, 158, 11, 0.2); }
.display-status-chip--present, .display-status-chip--checkout { background: rgba(34, 197, 94, 0.18); }
.display-profile-showcase, .display-info-card { display: grid; gap: 14px; align-items: center; height: 100%; }
.display-achievement-card {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 12px;
    height: 100%;
    min-height: 0;
}
.display-profile-showcase {
    grid-template-columns: 336px minmax(0, 1fr);
    align-items: center;
    min-height: 100%;
}
.display-profile-photo {
    width: 336px;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 336px;
    max-width: min(100%, 38vh);
    max-height: min(100%, 38vh);
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.08);
    align-self: center;
    justify-self: start;
}
.display-profile-body {
    display: grid;
    align-content: center;
    min-height: 100%;
    gap: 8px;
}
.display-badge-pill { margin-top: 10px; background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent)); color: #04101b; }
.display-info-stack { display: grid; gap: 10px; height: 100%; }
.display-info-stack--compact { align-content: start; gap: 12px; padding: 4px 4px 8px 0; will-change: transform; }
.display-info-card { grid-template-columns: minmax(0, 1fr) 120px; min-height: 0; padding: 10px; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; background: rgba(255,255,255,0.03); }
.display-info-card--text-only { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 14px 16px; min-height: 118px; border-radius: 18px; }
.display-info-card.is-birthday { border-color: color-mix(in srgb, var(--theme-accent) 44%, rgba(255,255,255,0.08)); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)); box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 18px color-mix(in srgb, var(--theme-accent) 16%, transparent); animation: birthdayGlow 2.8s ease-in-out infinite; }
.display-info-media { height: 100px; }
.display-info-tag--birthday { background: rgba(255,255,255,0.12); color: #fff7d6; }
.display-info-tag--birthday::before { content: ""; display: inline-block; width: 0.95rem; height: 0.95rem; margin-right: 6px; vertical-align: -0.15rem; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 21a2 2 0 0 1-2-2v-2.5A4.5 4.5 0 0 1 8.5 12H9V9.5a1.5 1.5 0 0 1 3 0V12h.5A4.5 4.5 0 0 1 17 16.5V19a2 2 0 0 1-2 2H6Zm8.2-13.8c.6-.6 1.5-.6 2.1 0 .7.7.7 1.7 0 2.4L14 12l-2.3-2.4a1.7 1.7 0 0 1 0-2.4c.6-.6 1.5-.6 2.1 0l.2.2.2-.2ZM7.8 4.2c.5-.5 1.3-.5 1.8 0 .6.6.6 1.4 0 2L8 8 6.4 6.2a1.4 1.4 0 0 1 0-2c.5-.5 1.3-.5 1.8 0l.1.1.1-.1Zm8 0c.5-.5 1.3-.5 1.8 0 .6.6.6 1.4 0 2L16 8l-1.6-1.8a1.4 1.4 0 0 1 0-2c.5-.5 1.3-.5 1.8 0l.1.1.1-.1Z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6 21a2 2 0 0 1-2-2v-2.5A4.5 4.5 0 0 1 8.5 12H9V9.5a1.5 1.5 0 0 1 3 0V12h.5A4.5 4.5 0 0 1 17 16.5V19a2 2 0 0 1-2 2H6Zm8.2-13.8c.6-.6 1.5-.6 2.1 0 .7.7.7 1.7 0 2.4L14 12l-2.3-2.4a1.7 1.7 0 0 1 0-2.4c.6-.6 1.5-.6 2.1 0l.2.2.2-.2ZM7.8 4.2c.5-.5 1.3-.5 1.8 0 .6.6.6 1.4 0 2L8 8 6.4 6.2a1.4 1.4 0 0 1 0-2c.5-.5 1.3-.5 1.8 0l.1.1.1-.1Zm8 0c.5-.5 1.3-.5 1.8 0 .6.6.6 1.4 0 2L16 8l-1.6-1.8a1.4 1.4 0 0 1 0-2c.5-.5 1.3-.5 1.8 0l.1.1.1-.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.display-info-body--flow { display: grid; align-content: start; justify-items: start; gap: 10px; width: 100%; }
.display-info-headline { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.display-info-headline strong { min-width: 0; margin: 0; }
.display-info-separator { color: rgba(255,255,255,0.4); font-weight: 700; }
.display-info-card--text-only strong { font-size: 1rem; line-height: 1.28; }
.display-info-card--text-only p { margin: 0; width: 100%; font-size: 0.9rem; line-height: 1.58; color: var(--display-muted); }
.display-achievement-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: clamp(180px, 26vh, 260px);
    align-self: start;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.display-achievement-body {
    min-height: 0;
    padding: 4px 4px 12px;
}
.display-achievement-body strong {
    color: #f8fbff;
}
.display-achievement-body p {
    color: rgba(244, 248, 255, 0.88);
}
.display-achievement-body small {
    color: rgba(230, 238, 249, 0.84);
}
.display-info-media.is-fallback-media, .display-achievement-media.is-fallback-media, .display-logo-frame.is-fallback-media, .display-profile-photo.is-fallback-media { display: grid; place-items: center; background: linear-gradient(135deg, rgba(89,168,255,0.12), rgba(89,239,208,0.06)); }
.display-empty-state { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100%; padding: 18px; border: 1px dashed rgba(255,255,255,0.12); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015)); text-align: center; }
.display-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.06); color: var(--theme-primary); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 auto 12px; }
.display-empty-state strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.display-empty-state p { margin: 0; max-width: 320px; color: var(--display-muted); line-height: 1.5; font-size: 0.88rem; }
.display-copy-clamp { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.display-copy-clamp--1 { -webkit-line-clamp: 1; }
.display-copy-clamp--2 { -webkit-line-clamp: 2; }
.display-copy-clamp--3 { -webkit-line-clamp: 3; }
.display-copy-clamp--4 { -webkit-line-clamp: 4; }
.display-footer { flex: 0 0 auto; padding: 0 12px 12px; }
.display-footer p { margin: 0; color: rgba(192,208,229,0.8); font-size: 0.78rem; text-align: center; }
@keyframes birthdayGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 0 14px color-mix(in srgb, var(--theme-accent) 10%, transparent); }
    50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 24px color-mix(in srgb, var(--theme-primary) 22%, transparent), 0 0 32px color-mix(in srgb, var(--theme-accent) 16%, transparent); }
}
@keyframes scheduleGlow {
    0%, 100% {
        transform: translateX(0);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 10px 28px rgba(0,0,0,0.2), 0 0 0 color-mix(in srgb, var(--theme-primary) 0%, transparent);
    }
    50% {
        transform: translateX(1px);
        box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 12px 30px rgba(0,0,0,0.22), 0 0 22px color-mix(in srgb, var(--theme-primary) 24%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) { .display-slide, .display-theme-toggle, body.display-body, .display-schedule-row, .display-schedule-list--compact { transition: none !important; animation: none !important; } }
@media (max-width: 1400px) { .display-topbar { grid-template-columns: 92px minmax(0, 1fr) 232px; min-height: 112px; } }
@media (max-width: 1200px) { .card-video, .card-schedule, .card-attendance, .card-teachers, .card-announcements, .card-achievements { grid-column: span 6; } .display-grid--home { grid-template-rows: repeat(3, minmax(0, 1fr)); } body.display-body { overflow: auto; } .display-shell { height: auto; } }
@media (max-width: 900px) { .display-topbar { grid-template-columns: 1fr; min-height: auto; } .display-topbar__right { justify-items: start; } .display-topbar__date-row { justify-content: flex-start; flex-wrap: wrap; } .display-profile-showcase, .display-info-card, .display-achievement-card { grid-template-columns: 1fr; } .display-profile-photo { width: min(100%, 240px); min-height: 0; max-width: 100%; max-height: none; aspect-ratio: 1 / 1; } .display-schedule-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .card-video, .card-schedule, .card-attendance, .card-teachers, .card-announcements, .card-achievements { grid-column: span 12; } .display-attendance-grid { grid-template-columns: 1fr; } .display-schedule-row { grid-template-columns: 1fr; } }


















.display-toast-stack {
    position: fixed;
    top: 132px;
    right: 18px;
    z-index: 40;
    width: min(440px, calc(100vw - 36px));
    pointer-events: none;
}
.display-tap-toast {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(10,16,28,0.96), rgba(8,14,24,0.92));
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    animation: tapToastIn 260ms ease forwards;
}
.display-tap-toast__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.display-tap-toast__head strong { font-size: 1rem; line-height: 1.2; }
.display-tap-toast__head span { color: var(--display-muted); font-size: 0.82rem; white-space: nowrap; }
.display-tap-toast p { margin: 0; color: var(--display-text); font-size: 0.92rem; line-height: 1.52; }
.display-tap-toast--accepted { border-color: rgba(34,197,94,0.34); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 24px rgba(34,197,94,0.12); }
.display-tap-toast--duplicate, .display-tap-toast--ignored { border-color: rgba(245,158,11,0.34); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 24px rgba(245,158,11,0.12); }
.display-tap-toast--unknown_uid { border-color: rgba(239,68,68,0.34); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 24px rgba(239,68,68,0.12); }
.display-tap-toast--too_early_checkout { border-color: rgba(56,189,248,0.34); box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 24px rgba(56,189,248,0.12); }
.display-empty-state--attendance-inline {
    min-height: 160px;
    height: 100%;
}
@keyframes tapToastIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 900px) {
    .display-toast-stack { top: 118px; right: 12px; left: 12px; width: auto; }
}