:root {
    --ux-radius-sm: 10px;
    --ux-radius-md: 16px;
    --ux-radius-lg: 24px;
    --ux-control-height: 44px;
    --ux-content-width: 1120px;
    --ux-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] :where(.page-home, .page-tool) {
    --bg-color: #090d16;
    --surface-color: #111827;
    --text-color: #eef2ff;
    --text-muted-color: #98a2b3;
    --border-color: rgba(148, 163, 184, .15);
    --primary-accent: #818cf8;
    --secondary-accent: #22d3ee;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
    --shadow-color: rgba(2, 6, 23, .34);
    --card-hover-shadow: 0 18px 45px rgba(49, 46, 129, .2);
}
html[data-theme="light"] :where(.page-home, .page-tool) {
    --bg-color: #f7f8fc;
    --surface-color: #ffffff;
    --text-color: #172033;
    --text-muted-color: #667085;
    --border-color: rgba(71, 84, 103, .14);
    --primary-accent: #4f46e5;
    --secondary-accent: #0891b2;
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #0891b2 100%);
    --shadow-color: rgba(16, 24, 40, .08);
    --card-hover-shadow: 0 18px 45px rgba(79, 70, 229, .13);
}

html { scroll-padding-top: 88px; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.page-tool::before, .page-tool::after { position: fixed; opacity: .15; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), select:not(:disabled), [role="button"] { cursor: pointer; }

::selection {
    color: #fff;
    background: color-mix(in srgb, var(--primary-accent, #3081f7) 78%, #111 22%);
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 10000;
    padding: 10px 16px;
    border-radius: 10px;
    color: #fff;
    background: var(--primary-accent, #3081f7);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s var(--ux-ease);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-accent, #3081f7) 72%, white 28%);
    outline-offset: 3px;
}

.ux-scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 9998;
    width: 0;
    height: 3px;
    pointer-events: none;
    background: var(--accent-gradient, linear-gradient(90deg, #3081f7, #29c5f6));
    box-shadow: 0 0 14px color-mix(in srgb, var(--primary-accent, #3081f7) 55%, transparent);
}

.ux-back-to-top {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 3000;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-color, rgba(255,255,255,.14));
    border-radius: 50%;
    color: var(--text-color, #fff);
    background: color-mix(in srgb, var(--surface-color, #161b22) 88%, transparent);
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
    opacity: 0;
    transform: translateY(12px) scale(.9);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s var(--ux-ease), border-color .2s ease;
}
.ux-back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.ux-back-to-top:hover { border-color: var(--primary-accent, #3081f7); }

.ux-connection-status {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 9999;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
    background: #1f2937;
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
    font-size: .86rem;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 14px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s var(--ux-ease);
}
.ux-connection-status.visible { opacity: 1; transform: translate(-50%, 0); }
.ux-connection-status.online { background: #087f5b; }
.ux-connection-status.offline { background: #b42318; }

.results-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
    margin: 6px 2px 14px;
    color: var(--text-muted-color, #8b949e);
    font-size: .84rem;
    font-weight: 500;
}
.results-meta[hidden] { display: none; }
.results-meta strong { color: var(--text-color, inherit); font-weight: 650; }
.page-tool :where(.no-results, .error-message) {
    width: min(100%, 560px);
    margin: 42px auto;
    padding: 18px 20px;
    color: var(--text-muted-color);
    text-align: center;
    line-height: 1.65;
}
.page-tool .error-message::before {
    content: '!';
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 10px;
    border-radius: 50%;
    color: #fda4af;
    background: rgba(244, 63, 94, .12);
    font-weight: 800;
}
.page-tool .retry-load-btn {
    min-height: 42px;
    margin-top: 14px;
    padding: 9px 16px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: var(--accent-gradient);
    font-weight: 700;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-accent) 20%, transparent);
}
.page-tool .loader { width: 38px; height: 38px; border-width: 3px; }

.page-tool header {
    position: relative;
    z-index: 120;
    margin-bottom: 28px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
}
.page-tool .header-title-wrapper { text-align: left; }
.page-tool .header-title-wrapper p { max-width: 42ch; }
.page-tool header h1 { letter-spacing: -.045em; line-height: 1.05; }
.page-tool .page-kicker,
.page-home .page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--secondary-accent, #29c5f6);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.page-tool .page-kicker::before,
.page-home .page-kicker::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 16%, transparent);
}

.page-tool :where(.controls, .my-schedule-controls, #free-rooms-controls) {
    box-shadow: none;
}
.page-tool :where(input, select, .filter-select, .filter-button, .clear-filters-btn) {
    min-height: var(--ux-control-height);
}
.page-tool :where(.day-btn, .view-btn, .campus-btn, .share-btn, .schedule-buttons button) {
    min-height: 42px;
}

.page-timetable .my-schedule-controls {
    padding: 8px 0 16px;
    border: 0;
    background: transparent;
}
.page-timetable .schedule-subtitle { margin-bottom: 12px; }
.page-timetable .choices { max-width: 680px; }
.page-timetable .choices__inner {
    border-radius: 13px;
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
}
.page-timetable .my-schedule-controls label { letter-spacing: -.025em; }
.page-timetable #schedule-select:not([hidden]) {
    display: block;
    width: min(100%, 600px);
    min-height: 52px;
    margin: 0 auto;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    background: var(--surface-color);
}
.page-timetable #schedule-select option { padding: 8px; }
.page-timetable .controls {
    padding: 0;
    border: 0;
    background: transparent;
}
.page-timetable .search-filter-bar {
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}
.page-timetable .search-filter-bar input,
.page-timetable .search-filter-bar .filter-select,
.page-timetable .search-filter-bar .clear-filters-btn {
    min-height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--surface-color);
}
.page-timetable .search-filter-bar input { padding-inline: 15px; }
.page-timetable .search-filter-bar .clear-filters-btn { width: 46px; height: 46px; opacity: .72; }
.page-timetable .day-selector,
.page-timetable .campus-toggle,
.page-timetable .view-toggle {
    border-color: color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--surface-color) 72%, transparent);
    box-shadow: none;
}

.page-tool :where(.class-card, .faculty-card, .free-room-card, .weekly-class-card) {
    content-visibility: auto;
    contain-intrinsic-size: auto 190px;
}
.page-tool :where(.class-card, .faculty-card) {
    border-radius: 16px;
    background: transparent;
    border: 0;
    box-shadow: 0 8px 28px var(--shadow-color);
    overflow: clip;
}
.page-tool :where(.class-card-inner, .faculty-card-inner) {
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-color) 97%, transparent);
}
.page-tool .class-card.is-changed,
.page-tool .class-card.is-new,
.page-tool .faculty-card.highlight { box-shadow: 0 0 0 2px var(--primary-accent), 0 12px 32px var(--shadow-color); }

.page-faculty .controls { gap: 12px; }
.page-faculty .search-container input,
.page-faculty :where(.filter-select, .filter-button) {
    min-height: 46px;
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--surface-color) 96%, transparent);
}
.page-faculty .filter-controls { margin: 12px 0 22px; }
.page-faculty #results-container { gap: 16px; }
.page-faculty .faculty-card-inner { padding: 18px; }
.page-faculty .faculty-image { width: 58px; height: 58px; }
.page-faculty .card-footer { gap: 8px; }

.page-admin {
    --primary: #6366f1;
    --primary-soft: rgba(99, 102, 241, .14);
    --surface-color: #121826;
    --surface-hover: #1a2333;
    --border-color: rgba(148, 163, 184, .13);
}
.page-admin .main-content { width: min(calc(100% - 280px), 1240px); }
.page-admin .card, .page-admin .stat-card { border-color: var(--border-color); box-shadow: 0 14px 38px rgba(0,0,0,.16); }
.page-admin :where(input, select, textarea) { min-height: 46px; }

@media (hover: hover) and (pointer: fine) {
    .page-tool :where(.class-card, .faculty-card):hover { transform: translateY(-3px); }
}
@media (hover: none), (pointer: coarse) {
    .page-tool :where(.class-card, .faculty-card):hover { transform: none; }
}

.page-home .brand-title { max-width: 720px; }
.page-home .container { justify-content: flex-start; padding-top: clamp(92px, 12vh, 138px); padding-bottom: 44px; }
.page-home .footer { position: relative; bottom: auto; flex: none; margin: 0 auto 18px; }
.page-home .brand-title h1 { letter-spacing: -.045em; }
.page-home .brand-subtitle { max-width: 610px; margin-inline: auto; }
.home-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.home-trust-row span {
    padding: 7px 11px;
    border: 1px solid var(--border-color, rgba(255,255,255,.1));
    border-radius: 999px;
    color: var(--text-muted-color, #8b949e);
    background: color-mix(in srgb, var(--surface-color, #161b22) 72%, transparent);
    font-size: .76rem;
    font-weight: 600;
}
.page-home .nav-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--ux-radius-lg);
}
.page-home .nav-card::after {
    content: '';
    position: absolute;
    inset: auto -35% -55% 25%;
    z-index: -1;
    height: 180px;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-accent) 18%, transparent), transparent 68%);
}
.tool-feature-list {
    display: grid;
    gap: 7px;
    width: 100%;
    margin: 16px 0 2px;
    padding: 0;
    list-style: none;
    color: var(--text-muted-color);
    font-size: .82rem;
}
.tool-feature-list li { display: flex; align-items: center; gap: 8px; }
.tool-feature-list li::before { content: '✓'; color: var(--secondary-accent); font-weight: 800; }
.tool-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--text-color);
    font-size: .86rem;
    font-weight: 700;
}
.tool-card-cta::after { content: '→'; transition: transform .2s var(--ux-ease); }
.nav-card:hover .tool-card-cta::after { transform: translateX(4px); }
.seo-section--refined { max-width: 820px; padding: 8px 20px 28px; text-align: center; }
.seo-section--refined h2 { margin-bottom: 12px; color: var(--text-color); font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.seo-section--refined p { color: var(--text-muted-color); font-size: .92rem; line-height: 1.75; }
.seo-section--refined p + p { margin-top: 12px; }
.seo-section--refined a { color: var(--primary-accent); font-weight: 600; text-underline-offset: 3px; }

.page-admin .mobile-menu-btn { min-width: 44px; min-height: 44px; }
.page-admin .nav-item { width: 100%; border: 0; color: var(--text-muted); background: transparent; font: inherit; text-align: left; }
.page-admin .card, .page-admin .stat-card { border-radius: var(--ux-radius-md); }

@media (max-width: 768px) {
    html { scroll-padding-top: 18px; }
    .page-tool { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .page-tool .container { padding: 14px max(14px, env(safe-area-inset-left)); }
    .page-tool header {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 10px;
        align-items: center;
        margin-bottom: 18px;
    }
    .page-tool #sidebar-toggle,
    .page-tool header #sheetsLinkBtn {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface-color) 88%, transparent);
    }
    .page-tool #sidebar-toggle svg { width: 23px; height: 23px; }
    .page-tool .header-title-wrapper { text-align: center; }
    .page-tool .page-kicker { justify-content: center; margin-bottom: 4px; font-size: .63rem; }
    .page-tool header h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
    .page-tool header p { display: none; }
    .page-tool .header-toggles { min-width: 42px; }
    .results-meta { margin-inline: 0; }
    .ux-back-to-top { right: 14px; bottom: calc(82px + env(safe-area-inset-bottom)); width: 42px; height: 42px; }
    .page-home .nav-card { border-radius: 20px; }
    .page-timetable .my-schedule-controls { padding-top: 2px; margin-bottom: 20px; }
    .page-timetable .my-schedule-controls label { font-size: 1.4rem; }
    .page-timetable .schedule-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .page-timetable .schedule-buttons button { width: 100%; padding-inline: 10px; }
    .page-timetable .day-campus-row { display: block; }
    .page-timetable .day-selector {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .page-timetable .day-selector::-webkit-scrollbar { display: none; }
    .page-timetable .day-selector button { flex: 1 0 58px; min-height: 44px; padding: 10px 12px; }
    .page-timetable .search-filter-bar { display: grid; grid-template-columns: 1fr 1fr 46px; padding: 0; }
    .page-timetable .search-filter-bar input { grid-column: 1 / -1; width: 100%; }
    .page-timetable .search-filter-bar .filter-select { width: 100%; max-width: none; }
    .page-timetable .view-toggle {
        position: fixed;
        left: 50%;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 3000;
        width: min(calc(100% - 24px), 430px);
        margin: 0;
        padding: 5px;
        transform: translateX(-50%);
        border: 1px solid var(--border-color);
        background: color-mix(in srgb, var(--surface-color) 92%, transparent);
        box-shadow: 0 14px 40px rgba(0,0,0,.26);
        backdrop-filter: blur(18px) saturate(140%);
    }
    .page-timetable .view-btn { flex: 1; min-width: 0; padding: 9px 8px; font-size: .79rem; white-space: nowrap; }
    .page-timetable .export-container { margin-bottom: 8px; }
    .page-tool :where(.class-card-inner, .faculty-card-inner) { padding: 15px; }
    .page-tool .class-card .course-title { font-size: 1.15rem; }
    .page-tool .location-badge { max-width: 42%; font-size: .82rem; }
    .page-faculty .filter-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 18px;
    }
    .page-faculty .controls {
        position: sticky;
        top: 8px;
        z-index: 110;
        padding: 4px 0;
        background: color-mix(in srgb, var(--bg-color) 88%, transparent);
        backdrop-filter: blur(14px);
    }
    .page-faculty .search-container input { box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 72%, transparent); }
    .page-faculty .filter-controls > :first-child,
    .page-faculty .filter-controls .filter-button { grid-column: 1 / -1; }
    .page-faculty .filter-controls .filter-select,
    .page-faculty .filter-controls .filter-button { width: 100%; }
    .page-faculty #results-container { grid-template-columns: 1fr; gap: 12px; }
    .page-faculty .faculty-card-inner { padding: 15px; }
    .page-faculty .faculty-info .name { font-size: 1.08rem; }
    .page-faculty .card-footer { display: grid; grid-template-columns: 1fr 1fr; }
    .page-faculty .card-footer.review-only { grid-template-columns: 1fr; }
    .page-faculty .faculty-rating { grid-column: 1 / -1; }
    .page-faculty :where(.review-btn, .schedule-btn) { width: 100%; justify-content: center; min-height: 42px; }
    .page-faculty .card-footer.review-only .review-btn { grid-column: 1 / -1; min-width: 0; max-width: none; }
    .page-faculty .review-modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 12px);
        margin: auto 0 0;
        border-radius: 22px 22px 0 0;
    }
    .page-faculty .schedule-modal-content {
        width: calc(100% - 24px);
        max-width: 950px;
        max-height: calc(100dvh - 32px);
        margin: auto;
        border-radius: 18px;
    }
    .page-admin .main-content { width: 100%; padding: 74px 14px 28px; }
    .page-admin .page-header { align-items: flex-start; gap: 12px; }
    .page-admin .page-header h2 { font-size: 1.45rem; }
    .page-admin .stats-grid { gap: 10px; }
    .page-admin .card { padding: 16px; }
    .page-admin .toast { left: 14px; right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
    .page-home { padding-inline: 0; }
    .page-home .top-nav {
        top: max(10px, env(safe-area-inset-top));
        left: 12px;
        width: auto;
        justify-content: space-between;
    }
    .page-home .container { width: 100%; gap: 24px; padding: 82px 14px 28px; }
    .page-home .brand-title { width: 100%; padding-inline: 4px; }
    .page-home .brand-title h1 { font-size: clamp(2.35rem, 15vw, 3.1rem); }
    .page-home .brand-subtitle { font-size: .96rem; }
    .home-trust-row { gap: 6px; }
    .home-trust-row span { padding: 6px 9px; font-size: .7rem; }
    .page-home .nav-card { align-items: flex-start; padding: 24px 20px; text-align: left; }
    .page-home .tools-grid { width: 100%; gap: 12px; }
    .page-home .icon-circle { width: 60px; height: 60px; margin-bottom: 15px; }
    .page-home .nav-card h2 { font-size: 1.45rem; }
    .page-home .tool-feature-list { font-size: .78rem; }
    .page-home .seo-section--refined { width: 100%; padding: 4px 6px 20px; text-align: left; }
    .page-home .footer { width: 100%; padding-inline: 14px; }
    .page-timetable .search-filter-bar { grid-template-columns: 1fr 1fr 44px; }
    .page-timetable .view-btn { font-size: .73rem; }
    .page-faculty .faculty-image { width: 52px; height: 52px; }
    .page-faculty .detail-item { font-size: .78rem; }
    .page-admin .stats-grid { grid-template-columns: 1fr 1fr; }
    .page-admin .stat-card { min-width: 0; padding: 14px; }
}

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

@media (forced-colors: active) {
    :where(button, a, input, select, textarea) { border: 1px solid CanvasText; }
}




.page-tool {
    --portal-radius-lg: 24px;
    --portal-radius-md: 17px;
    --portal-radius-sm: 12px;
    --portal-shadow: 0 18px 52px color-mix(in srgb, var(--shadow-color) 78%, transparent);
    background:
        radial-gradient(circle at 7% 3%, color-mix(in srgb, var(--primary-accent) 13%, transparent), transparent 30rem),
        radial-gradient(circle at 94% 28%, color-mix(in srgb, var(--secondary-accent) 9%, transparent), transparent 28rem),
        var(--bg-color);
}

.page-tool::before,
.page-tool::after { opacity: .08; filter: blur(120px); }
.page-tool .container { width: min(100%, 1200px); padding: 24px 20px 36px; }
.page-tool main { min-width: 0; }

.page-tool #sidebar {
    width: min(286px, calc(100vw - 48px));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border-right: 0;
    background: color-mix(in srgb, var(--surface-color) 97%, transparent);
    box-shadow: 24px 0 64px rgba(0, 0, 0, .22);
}
.page-tool .sidebar-header { padding: 22px 18px; border-color: var(--border-color); }
.page-tool .sidebar-links { display: grid; align-content: start; gap: 4px; padding: 12px; }
.page-tool .sidebar-links li a {
    min-height: 46px;
    padding: 11px 13px;
    border: 0;
    border-radius: 11px;
    color: var(--text-muted-color);
}
.page-tool .sidebar-links li a:hover { color: var(--text-color); background: color-mix(in srgb, var(--primary-accent) 8%, var(--bg-color)); }
.page-tool .sidebar-links li.active-link a { color: var(--primary-accent); background: color-mix(in srgb, var(--primary-accent) 12%, transparent); }
.page-tool .sidebar-footer { border-color: var(--border-color); }
.page-tool .sidebar-footer #themeToggleBtn { min-height: 46px; border: 0; background: color-mix(in srgb, var(--bg-color) 78%, transparent); }

.page-tool header { min-height: 94px; }
.page-tool header h1 { font-size: clamp(2.5rem, 5vw, 4rem); background: linear-gradient(100deg, #818cf8, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-tool #sidebar-toggle,
.page-tool header #sheetsLinkBtn {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 55%, transparent);
}

.page-tool :where(input, select, textarea, .filter-select, .choices__inner) {
    color: var(--text-color);
    border-color: var(--border-color);
    background-color: color-mix(in srgb, var(--surface-color) 96%, transparent);
}
.page-tool :where(input, select, textarea, .filter-select):hover { border-color: color-mix(in srgb, var(--primary-accent) 38%, var(--border-color)); }
.page-tool :where(input, select, textarea, .filter-select):focus {
    outline: 0;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-accent) 14%, transparent);
}
.page-tool :where(input, textarea)::placeholder { color: color-mix(in srgb, var(--text-muted-color) 78%, transparent); opacity: 1; }
.page-tool :where(button, [role="button"]) { touch-action: manipulation; }
.page-tool button:disabled { cursor: not-allowed; filter: grayscale(.25); opacity: .58; }

.page-tool :where(.filter-button, .day-btn, .view-btn, .campus-btn, .share-btn, .schedule-buttons button) {
    border: 0;
    transition: color .2s ease, background-color .2s ease, transform .2s var(--ux-ease), box-shadow .2s ease;
}
.page-tool :where(.filter-button, .day-btn, .view-btn, .campus-btn).active {
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 8px 22px rgba(79, 70, 229, .22);
}

.page-tool :where(.class-card, .faculty-card, .free-room-card) {
    border: 0;
    border-radius: var(--portal-radius-md);
    background: var(--surface-color);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--shadow-color) 64%, transparent);
}
.page-tool :where(.class-card-inner, .faculty-card-inner, .free-room-card-inner) {
    border-radius: inherit;
    background: transparent;
}
.page-tool :where(.no-results, .error-message, .empty-state) {
    border-radius: var(--portal-radius-md);
    background: color-mix(in srgb, var(--surface-color) 68%, transparent);
}

.page-tool .footer {
    position: relative;
    inset: auto;
    width: fit-content;
    max-width: calc(100% - 28px);
    height: auto;
    min-height: 42px;
    margin: 46px auto 0;
    padding: 10px 17px;
    transform: none;
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--surface-color) 75%, transparent);
    box-shadow: none;
    animation: none;
    white-space: normal;
    text-align: center;
}
.page-tool .footer p { white-space: normal; }


.page-timetable .my-schedule-controls {
    position: relative;
    z-index: 120;
    max-width: 820px;
    margin: 0 auto 28px;
}
.page-timetable .my-schedule-controls label { font-size: clamp(1.55rem, 3vw, 2rem); }
.page-timetable .schedule-subtitle { color: var(--text-muted-color); }
.page-timetable .choices { position: relative; z-index: 1; width: 100%; }
.page-timetable .choices.is-open { z-index: 400; }
.page-timetable .choices__inner { min-height: 54px; padding: 7px 11px; border: 0; box-shadow: 0 10px 32px color-mix(in srgb, var(--shadow-color) 60%, transparent); }
.page-timetable .choices__list--dropdown { z-index: 401; overflow: hidden; border: 0; border-radius: 14px; box-shadow: var(--portal-shadow); }
.page-timetable .choices__list--dropdown .choices__item { min-height: 44px; padding: 11px 14px; }
.page-timetable .choices__item--choice.is-highlighted { background: color-mix(in srgb, var(--primary-accent) 12%, var(--surface-color)); }
.page-timetable .schedule-buttons button,
.page-timetable .export-container .share-btn {
    min-height: 46px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
}
.page-timetable #browseToggleBtn { color: var(--text-color); background: var(--surface-color); box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 50%, transparent); }
.page-timetable .notification-toggle-btn,
.page-timetable .export-container .share-btn { color: #fff; background: linear-gradient(135deg, #6366f1, #0891b2); }
.page-timetable .controls { gap: 12px; margin-bottom: 18px; }
.page-timetable .day-selector,
.page-timetable .campus-toggle,
.page-timetable .view-toggle { padding: 5px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--surface-color) 88%, transparent); }
.page-timetable .day-selector button { min-width: 58px; border-radius: 10px; }
.page-timetable .search-filter-bar :where(input, select, button) { border: 0; box-shadow: 0 7px 22px color-mix(in srgb, var(--shadow-color) 42%, transparent); }
.page-timetable #free-rooms-controls { border: 0; border-radius: var(--portal-radius-md); background: color-mix(in srgb, var(--surface-color) 84%, transparent); }
.page-timetable .class-card-inner { padding: 22px; }
.page-timetable .class-card .course-title { letter-spacing: -.025em; line-height: 1.35; }
.page-timetable .class-detail { color: var(--text-muted-color); line-height: 1.5; }
.page-timetable .location-badge { border: 0; color: var(--secondary-accent); background: color-mix(in srgb, var(--secondary-accent) 11%, transparent); }
.page-timetable .free-rooms-wrapper { min-width: 0; }
.page-timetable .free-room-card-inner { padding: 18px; }
.page-timetable .weekly-grid { overflow-x: auto; overscroll-behavior-x: contain; border: 0; border-radius: var(--portal-radius-md); box-shadow: 0 10px 32px color-mix(in srgb, var(--shadow-color) 55%, transparent); scrollbar-width: thin; }
.page-timetable .weekly-header-row { position: sticky; top: 0; z-index: 4; }
.page-timetable .weekly-class-card { border-radius: 10px; }

.page-timetable .modal { padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.page-timetable .modal-content {
    width: min(100%, 640px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: clamp(20px, 4vw, 30px);
    border: 0;
    border-radius: var(--portal-radius-lg);
    box-shadow: var(--portal-shadow);
}
.page-timetable .close-button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.page-timetable :where(.hidden-classes-list, .removed-classes-list) { overscroll-behavior: contain; }


.page-faculty .controls { max-width: none; }
.page-faculty .search-container { position: relative; }
.page-faculty .search-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 2px solid var(--text-muted-color);
    border-radius: 50%;
    opacity: .65;
    transform: translateY(-58%);
    pointer-events: none;
}
.page-faculty .search-container::after { content: ''; position: absolute; top: calc(50% + 5px); left: 29px; z-index: 2; width: 7px; height: 2px; border-radius: 2px; background: var(--text-muted-color); opacity: .65; transform: rotate(45deg); pointer-events: none; }
.page-faculty .search-container input { min-height: 52px; padding-left: 47px; border: 0; box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-color) 55%, transparent); }
.page-faculty .filter-controls { gap: 8px; }
.page-faculty :where(.filter-select, .filter-button) { min-height: 44px; border: 0; box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-color) 40%, transparent); }
.page-faculty .faculty-card-inner { padding: 20px; }
.page-faculty .faculty-image { border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent) 14%, transparent); }
.page-faculty .faculty-info .name { letter-spacing: -.025em; line-height: 1.3; }
.page-faculty .card-bottom { border-color: color-mix(in srgb, var(--border-color) 65%, transparent); }
.page-faculty .email-copy { min-height: 40px; margin: -5px -7px; padding: 5px 7px; border-radius: 9px; }
.page-faculty .email-copy:hover { background: color-mix(in srgb, var(--primary-accent) 8%, transparent); }
.page-faculty :where(.review-btn, .schedule-btn) { min-height: 44px; border: 0; border-radius: 11px; font-weight: 700; }
.page-faculty .review-btn { color: var(--text-color); background: color-mix(in srgb, var(--primary-accent) 11%, var(--surface-color)); }
.page-faculty .schedule-btn { color: #fff; background: linear-gradient(135deg, #6366f1, #0891b2); }
.page-faculty .teacher-status { border: 0; }
.page-faculty :where(.review-modal, .schedule-modal, .announcement-modal, .welcome-modal) { padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.page-faculty :where(.review-modal-content, .schedule-modal-content, .announcement-modal-content, .welcome-modal-content) { border: 0; box-shadow: var(--portal-shadow); }
.page-faculty :where(.review-modal-close, .schedule-modal-close, .announcement-modal-close) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; }
.page-faculty .review-form-section textarea { min-height: 118px; border-radius: 13px; }
.page-faculty .loading-reviews { padding: 28px 16px; border-radius: 14px; color: var(--text-muted-color); background: color-mix(in srgb, var(--bg-color) 50%, var(--surface-color)); text-align: center; }
.page-faculty .review-item { border: 0; border-radius: 14px; background: color-mix(in srgb, var(--bg-color) 54%, var(--surface-color)); }
.page-faculty .schedule-day-column { border: 0; box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 45%, transparent); }


.page-admin {
    --bg-color: #080c14;
    --bg-secondary: #0e1522;
    --surface-color: #111827;
    --surface-hover: #182234;
    --text-color: #f5f7ff;
    --text-muted: #9aa4b5;
    --border-color: rgba(148, 163, 184, .12);
    background:
        radial-gradient(circle at 10% 2%, rgba(99, 102, 241, .12), transparent 30rem),
        radial-gradient(circle at 92% 35%, rgba(34, 211, 238, .07), transparent 28rem),
        var(--bg-color);
}
.page-admin .login-form { border: 0; border-radius: 24px; background: var(--surface-color); box-shadow: 0 28px 76px rgba(0, 0, 0, .35); }
.page-admin .login-logo-icon { color: #fff; background: linear-gradient(135deg, #6366f1, #0891b2); }
.page-admin .input-wrapper input,
.page-admin :where(input:not([type="checkbox"]), select, textarea) { min-height: 48px; border-color: var(--border-color); border-radius: 12px; background: var(--bg-secondary); }
.page-admin :where(input:not([type="checkbox"]), select, textarea):focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.page-admin .btn { min-height: 44px; border: 0; border-radius: 11px; touch-action: manipulation; }
.page-admin .btn-primary { background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 8px 22px rgba(79, 70, 229, .22); }
.page-admin .btn-outline { color: var(--text-color); background: var(--surface-hover); }
.page-admin .sidebar { width: 272px; border: 0; background: color-mix(in srgb, var(--surface-color) 97%, transparent); box-shadow: 20px 0 54px rgba(0, 0, 0, .18); }
.page-admin .sidebar-logo { border-color: var(--border-color); }
.page-admin .sidebar-logo-icon { color: #fff; background: linear-gradient(135deg, #6366f1, #0891b2); }
.page-admin .nav-item { min-height: 46px; border-radius: 11px; }
.page-admin .nav-item.active { color: #a5b4fc; background: rgba(99, 102, 241, .14); }
.page-admin .main-content { width: min(calc(100% - 272px), 1320px); max-width: calc(100% - 272px); margin-left: 272px; padding: 32px; }
.page-admin .page-header { margin-bottom: 26px; }
.page-admin .page-header h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.page-admin :where(.card, .stat-card, .review-card, .purge-panel) { border: 0; background: var(--surface-color); box-shadow: 0 12px 36px rgba(0, 0, 0, .16); }
.page-admin .card { border-radius: 20px; padding: clamp(20px, 3vw, 28px); }
.page-admin .stat-card { border-radius: 17px; }
.page-admin .toolbar { gap: 12px; border-radius: 16px; }
.page-admin .filters { scrollbar-width: none; }
.page-admin .filters::-webkit-scrollbar { display: none; }
.page-admin .filter-btn { min-height: 42px; white-space: nowrap; border: 0; border-radius: 10px; }
.page-admin .filter-btn.active { color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); }
.page-admin .bulk-actions { overflow-x: auto; padding-bottom: 2px; }
.page-admin .purge-panel { border-radius: 18px; }
.page-admin .review-card { border-radius: 17px; }
.page-admin .empty-state { border-radius: 18px; background: var(--surface-color); }
.page-admin .loading { min-height: 180px; border-radius: 18px; background: var(--surface-color); }
.page-admin .toast { border: 0; border-radius: 14px; box-shadow: 0 20px 48px rgba(0, 0, 0, .32); }
.page-admin .mobile-menu-btn { border: 0; border-radius: 13px; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.page-admin .admin-sidebar-overlay { display: none; }

@media (hover: hover) and (pointer: fine) {
    .page-tool :where(.class-card, .faculty-card, .free-room-card):hover { transform: translateY(-4px); box-shadow: var(--portal-shadow); }
    .page-tool :where(button, .filter-button, .share-btn):not(:disabled):hover { transform: translateY(-1px); }
    .page-admin .btn:not(:disabled):hover { transform: translateY(-1px); }
}

@media (max-width: 900px) {
    .page-admin .main-content { width: 100%; max-width: 100%; margin-left: 0; padding: 78px 16px 30px; }
    .page-admin .sidebar { width: min(286px, calc(100vw - 44px)); box-shadow: 24px 0 60px rgba(0, 0, 0, .36); }
    .page-admin .admin-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 90;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: rgba(3, 7, 18, .62);
        opacity: 0;
        pointer-events: none;
        backdrop-filter: blur(4px);
        transition: opacity .22s ease;
    }
    .page-admin.admin-sidebar-open .admin-sidebar-overlay { opacity: 1; pointer-events: auto; }
    .page-admin .purge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .page-tool .container { padding: 12px 12px 30px; }
    .page-timetable {
        --mobile-view-toggle-clearance: calc(78px + env(safe-area-inset-bottom));
    }
    .page-timetable .container {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }
    .page-tool header { min-height: 76px; }
    .page-tool header h1 { font-size: clamp(1.85rem, 9vw, 2.45rem); }
    .page-tool #sidebar-toggle,
    .page-tool header #sheetsLinkBtn { border: 0; }
    .page-tool .footer { margin-top: 32px; font-size: .75rem; }

    .page-timetable .my-schedule-controls { margin-bottom: 20px; }
    .page-timetable .choices__inner { min-height: 50px; }
    .page-timetable .controls { gap: 9px; }
    .page-timetable .day-selector { position: sticky; top: 6px; z-index: 105; box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow-color) 65%, transparent); backdrop-filter: blur(16px); }
    .page-timetable .current-class-widget {
        bottom: var(--mobile-view-toggle-clearance);
        z-index: 2900;
        max-height: calc(100dvh - var(--mobile-view-toggle-clearance) - 16px);
        overflow-y: auto;
    }
    .page-timetable .widget-bubble {
        bottom: var(--mobile-view-toggle-clearance);
        z-index: 2900;
    }
    .page-timetable .class-card-inner { padding: 17px; }
    .page-timetable .class-detail { gap: 9px; font-size: .84rem; }
    .page-timetable .export-container { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .page-timetable .export-container .share-btn { width: 100%; justify-content: center; }
    .page-timetable .weekly-grid { border-radius: 14px; }
    .page-timetable .weekly-row,
    .page-timetable .weekly-header-row { min-width: 760px; }
    .page-timetable .modal-content { width: calc(100% - 8px); max-height: calc(100dvh - 24px); }

    .page-faculty .controls {
        top: 4px;
        padding: 0;
        background: transparent;
        backdrop-filter: none;
    }
    .page-faculty .search-container input { min-height: 50px; }
    .page-faculty .filter-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .page-faculty .faculty-card-inner { padding: 17px; }
    .page-faculty .card-top { gap: 12px; }
    .page-faculty .faculty-info { padding-right: 34px; }
    .page-faculty .card-actions-top { top: -6px; right: -6px; }
    .page-faculty .detail-item span { white-space: normal; overflow-wrap: anywhere; }
    .page-faculty .review-modal-content { max-height: calc(100dvh - 8px); }
    .page-faculty .review-modal-header,
    .page-faculty .schedule-modal-header { position: sticky; top: 0; z-index: 5; }
    .page-faculty .schedule-grid-container { padding: 14px; }
    .page-faculty .schedule-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

    .page-admin .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-admin .stat-card { padding: 17px; }
    .page-admin .toolbar { position: sticky; top: 10px; z-index: 20; padding: 9px; background: color-mix(in srgb, var(--bg-color) 84%, transparent); backdrop-filter: blur(16px); }
    .page-admin .filters { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
    .page-admin .filter-btn { flex: 0 0 auto; scroll-snap-align: start; }
    .page-admin .purge-grid { grid-template-columns: 1fr; }
    .page-admin .purge-field[style] { grid-column: auto !important; }
    .page-admin .btn-row { display: grid; grid-template-columns: 1fr; }
    .page-admin .btn-row .btn { width: 100%; }
    .page-admin .review-card { padding: 17px; }
    .page-admin .review-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-admin .review-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
    .page-timetable .schedule-buttons { grid-template-columns: 1fr; }
    .page-timetable .search-filter-bar { grid-template-columns: 1fr 1fr 44px; }
    .page-timetable .view-btn { font-size: .7rem; }
    .page-faculty .filter-controls { grid-template-columns: 1fr; }
    .page-faculty .filter-controls > * { grid-column: auto !important; }
    .page-faculty .card-footer { grid-template-columns: 1fr; }
    .page-faculty .faculty-rating { grid-column: auto; }
    .page-faculty .schedule-actions { grid-template-columns: 1fr; }
    .page-admin .stats-grid { grid-template-columns: 1fr; }
    .page-admin .page-header { display: grid; grid-template-columns: 1fr; }
    .page-admin .page-header .btn { width: 100%; }
    .page-admin .review-actions { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .page-timetable .search-filter-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
        grid-template-rows: auto auto;
        gap: 10px;
    }
    .page-timetable .search-filter-bar input {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
    }
    .page-timetable .search-filter-bar .filter-select {
        min-width: 0;
    }
    .page-timetable .search-filter-bar .filter-select:first-of-type {
        grid-column: 1;
        grid-row: 2;
    }
    .page-timetable .search-filter-bar .filter-select:last-of-type {
        grid-column: 2;
        grid-row: 2;
    }
    .page-timetable .search-filter-bar .clear-filters-btn {
        grid-column: 3;
        grid-row: 2;
        align-self: stretch;
        width: 44px;
        height: auto;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
    }
}

@media (prefers-contrast: more) {
    .page-tool :where(input, select, textarea, button),
    .page-admin :where(input, select, textarea, button) { border: 1px solid currentColor; }
}

@media (forced-colors: active) {
    .page-tool header h1 { color: CanvasText; background: none; }
}