:root {
    color-scheme: light;
    --color-ink: #173042;
    --color-ink-soft: #526777;
    --color-ink-faint: #708391;
    --color-white: #fff;
    --color-brand: #08796b;
    --color-brand-strong: #056357;
    --color-brand-soft: #d8f2eb;
    --color-focus: #176fc1;
    --glass-page: rgb(242 249 250 / 36%);
    --glass-surface: rgb(255 255 255 / 78%);
    --glass-surface-strong: rgb(255 255 255 / 90%);
    --glass-surface-soft: rgb(255 255 255 / 58%);
    --glass-border: rgb(255 255 255 / 82%);
    --glass-highlight: inset 0 1px 0 rgb(255 255 255 / 72%);
    --glass-blur: 18px;
    --status-success: #157a50;
    --status-success-bg: rgb(212 244 226 / 84%);
    --status-warning: #875d00;
    --status-warning-bg: rgb(255 238 183 / 88%);
    --status-error: #a43a37;
    --status-error-bg: rgb(255 221 218 / 88%);
    --status-info: #1769a8;
    --status-info-bg: rgb(218 237 252 / 88%);
    --status-neutral: #546775;
    --status-neutral-bg: rgb(229 237 241 / 88%);
    --accent-blue: #287fc0;
    --accent-green: #188169;
    --accent-violet: #7857b5;
    --accent-coral: #c8644d;
    --space-1: .35rem;
    --space-2: .6rem;
    --space-3: .9rem;
    --space-4: 1.2rem;
    --space-5: 1.6rem;
    --space-6: 2.2rem;
    --space-7: 3rem;
    --radius-sm: .65rem;
    --radius-md: 1rem;
    --radius-lg: 1.45rem;
    --radius-pill: 999px;
    --shadow-soft: 0 12px 32px rgb(37 67 83 / 12%);
    --shadow-float: 0 22px 64px rgb(35 62 76 / 20%);
    --content-width: 1080px;
    --touch-size: 46px;
    --transition-fast: 160ms ease;
    --season-background: url('/assets/images/school-autumn.webp');
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--color-ink); background: #dcebed var(--season-background) center / cover fixed no-repeat; line-height: 1.52; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
a { color: inherit; }
[hidden] { display: none !important; }

.background-scrim { position: fixed; inset: 0; z-index: -1; background: linear-gradient(145deg, rgb(238 249 249 / 48%), rgb(255 248 239 / 42%)); }
.glass-panel { background: var(--glass-surface); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight), var(--shadow-soft); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(118%); backdrop-filter: blur(var(--glass-blur)) saturate(118%); }
.skip-link { position: fixed; left: var(--space-4); top: -5rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-ink); font-weight: 750; }
.skip-link:focus { top: var(--space-4); }

.site-header { position: sticky; top: .5rem; z-index: 20; width: min(var(--content-width), calc(100% - 2rem)); min-height: 3.55rem; margin: .5rem auto 0; padding: .3rem .55rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); border-radius: var(--radius-md); }
.brand { min-height: var(--touch-size); display: inline-flex; align-items: center; gap: .7rem; color: var(--color-ink); text-decoration: none; }
.brand-mark, .auth-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .72rem; color: white; background: linear-gradient(145deg, #159686, #087064); box-shadow: 0 6px 16px rgb(8 121 107 / 20%); font-weight: 850; letter-spacing: -.03em; }
.brand-mark-wide { width: 3rem; font-size: .7rem; letter-spacing: .04em; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1rem; letter-spacing: .08em; }
.brand-copy small { color: var(--color-ink-soft); font-size: .74rem; }
.session-summary { justify-self: end; display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--color-ink-soft); font-size: .82rem; font-weight: 650; }
.online-dot { width: .6rem; height: .6rem; flex: 0 0 auto; border-radius: 50%; background: var(--status-neutral); box-shadow: 0 0 0 4px rgb(84 103 117 / 12%); }
.online-dot.is-authenticated { background: var(--status-success); box-shadow: 0 0 0 4px rgb(21 122 80 / 12%); }
.status { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-action { min-height: 2.3rem; display: inline-flex; align-items: center; padding: .38rem .65rem; border: 1px solid rgb(255 255 255 / 76%); border-radius: var(--radius-pill); color: var(--color-brand-strong); background: rgb(255 255 255 / 56%); cursor: pointer; font: inherit; font-weight: 750; text-decoration: none; }

.page-shell { width: min(var(--content-width), calc(100% - 2rem)); margin: var(--space-3) auto var(--space-6); display: grid; gap: var(--space-3); }
.hero, .card { border-radius: var(--radius-lg); }
.hero { min-height: 18rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); padding: clamp(1.6rem, 4vw, 3.25rem); }
.hero-copy { max-width: 44rem; }
.hero-text { max-width: 42rem; margin-bottom: var(--space-5); color: var(--color-ink-soft); font-size: clamp(1rem, 1.8vw, 1.15rem); }
.hero-actions, .action-buttons, .dialog-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-meta { min-width: 9.5rem; display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-4); border: 1px solid rgb(255 255 255 / 76%); border-radius: var(--radius-md); background: var(--glass-surface-soft); }
.meta-label, .optional { color: var(--color-ink-faint); font-size: .78rem; font-weight: 650; }
.eyebrow { margin: 0 0 .32rem; color: var(--color-brand-strong); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: .1rem 0 .45rem; font-size: clamp(1.75rem, 3.3vw, 2.65rem); line-height: 1.05; letter-spacing: -.035em; }
h2 { margin: .1rem 0 .45rem; font-size: clamp(1.18rem, 2vw, 1.55rem); line-height: 1.18; letter-spacing: -.02em; }
h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
p { margin-top: 0; }

.section-block { padding-block: var(--space-2); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.section-heading.compact { align-items: center; }
.section-heading h2 { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.topic-card { position: relative; overflow: hidden; min-height: 12.5rem; padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border-radius: var(--radius-md); }
.topic-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .3rem; background: var(--topic-accent); opacity: .72; }
.topic-card > div { flex: 1; }
.topic-card p { margin: 0; color: var(--color-ink-soft); font-size: .9rem; }
.accent-blue { --topic-accent: var(--accent-blue); background: linear-gradient(145deg, rgb(255 255 255 / 86%), rgb(224 241 252 / 73%)); }
.accent-green { --topic-accent: var(--accent-green); background: linear-gradient(145deg, rgb(255 255 255 / 86%), rgb(220 244 235 / 73%)); }
.accent-violet { --topic-accent: var(--accent-violet); background: linear-gradient(145deg, rgb(255 255 255 / 86%), rgb(237 229 250 / 73%)); }
.accent-coral { --topic-accent: var(--accent-coral); background: linear-gradient(145deg, rgb(255 255 255 / 86%), rgb(252 231 224 / 73%)); }
.topic-icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid rgb(255 255 255 / 85%); border-radius: .85rem; color: var(--topic-accent); background: rgb(255 255 255 / 58%); font-size: .8rem; font-weight: 850; }

.content-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-4); align-items: start; }
.card { padding: clamp(1.25rem, 3vw, 2rem); }
.item-list { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.list-row { min-height: 4.4rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .75rem .85rem; border: 1px solid rgb(255 255 255 / 80%); border-radius: var(--radius-sm); background: rgb(255 255 255 / 54%); box-shadow: 0 5px 14px rgb(42 72 86 / 6%); }
.list-marker { width: .34rem; height: 2rem; border-radius: var(--radius-pill); }
.marker-blue { background: var(--status-info); }
.marker-yellow { background: #d19a22; }
.marker-red { background: var(--status-error); }
.list-copy { min-width: 0; display: grid; }
.list-copy strong, .list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-copy small { color: var(--color-ink-faint); font-size: .78rem; }

.status-badge, .role-chip { width: fit-content; min-height: 1.75rem; display: inline-flex; align-items: center; gap: .38rem; padding: .24rem .62rem; border: 1px solid rgb(255 255 255 / 75%); border-radius: var(--radius-pill); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.role-chip { color: var(--color-brand-strong); background: var(--color-brand-soft); }
.status-dot { width: .48rem; height: .48rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.status-success { color: var(--status-success); background: var(--status-success-bg); }
.status-warning { color: var(--status-warning); background: var(--status-warning-bg); }
.status-error { color: var(--status-error); background: var(--status-error-bg); }
.status-info { color: var(--status-info); background: var(--status-info-bg); }
.status-neutral { color: var(--status-neutral); background: var(--status-neutral-bg); }

.control-form, .local-login { display: grid; gap: var(--space-3); }
label, legend { color: var(--color-ink); font-size: .86rem; font-weight: 750; }
label { display: grid; gap: .38rem; }
input, select { width: 100%; min-height: var(--touch-size); padding: .68rem .78rem; border: 1px solid rgb(119 145 158 / 48%); border-radius: var(--radius-sm); color: var(--color-ink); background: rgb(255 255 255 / 72%); box-shadow: inset 0 1px 2px rgb(50 75 87 / 5%); }
input::placeholder { color: #7a8b96; }
input:hover, select:hover { background: rgb(255 255 255 / 90%); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgb(23 111 193 / 34%); outline-offset: 2px; }
.button-fieldset { min-width: 0; padding: 0; border: 0; }
.button-fieldset legend { margin-bottom: .38rem; }
.button-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .3rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: .8rem; background: rgb(235 244 246 / 64%); }
.segment { min-height: var(--touch-size); border: 0; border-radius: .58rem; color: var(--color-ink-soft); background: transparent; cursor: pointer; font-size: .83rem; font-weight: 750; transition: transform var(--transition-fast); }
.segment.is-selected { color: var(--status-info); background: rgb(255 255 255 / 88%); box-shadow: 0 4px 12px rgb(35 70 88 / 9%); }

.button { min-height: var(--touch-size); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .68rem 1rem; border: 1px solid transparent; border-radius: .72rem; cursor: pointer; font-weight: 780; text-decoration: none; transition: transform var(--transition-fast); }
.button:hover, .icon-button:hover, .segment:hover { transform: translateY(-1px); }
.button:active, .icon-button:active, .segment:active { transform: translateY(0); }
.button:disabled { cursor: wait; opacity: .62; }
.button-primary { color: white; background: linear-gradient(145deg, var(--color-brand), var(--color-brand-strong)); box-shadow: 0 8px 20px rgb(8 121 107 / 21%); }
.button-primary:hover { box-shadow: 0 11px 24px rgb(8 121 107 / 28%); }
.button-glass, .button-quiet { color: var(--color-ink); border-color: rgb(255 255 255 / 76%); background: rgb(255 255 255 / 58%); }
.button-info { color: var(--status-info); background: var(--status-info-bg); }
.button-warning { color: var(--status-warning); background: var(--status-warning-bg); }
.button-wide { width: 100%; }
.icon-button { width: var(--touch-size); height: var(--touch-size); border: 1px solid rgb(255 255 255 / 78%); border-radius: var(--radius-sm); color: var(--color-brand-strong); background: var(--glass-surface-soft); cursor: pointer; font-size: 1.2rem; transition: transform var(--transition-fast); }
.action-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.action-card p:last-child { margin-bottom: 0; color: var(--color-ink-soft); }
.action-buttons { justify-content: flex-end; }

.app-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.app-card { --app-accent: var(--accent-blue); position: relative; overflow: hidden; min-height: 13.5rem; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); }
.app-card::before { content: ''; position: absolute; inset: 0 0 auto; height: .3rem; background: var(--app-accent); opacity: .75; }
.app-card-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.app-icon { min-width: 2.7rem; height: 2.7rem; display: grid; place-items: center; padding-inline: .4rem; border: 1px solid rgb(255 255 255 / 80%); border-radius: .78rem; color: var(--app-accent); background: rgb(255 255 255 / 56%); font-size: .85rem; font-weight: 850; }
.app-card-copy { flex: 1; }
.app-card-copy h2 { font-size: 1.18rem; }
.app-card-copy p { margin: 0; color: var(--color-ink-soft); font-size: .87rem; }
.app-accent-blue { --app-accent: var(--accent-blue); }
.app-accent-green { --app-accent: var(--accent-green); }
.app-accent-violet { --app-accent: var(--accent-violet); }
.app-accent-coral { --app-accent: var(--accent-coral); }
.app-toolbar { --app-accent: var(--accent-blue); min-height: 4.4rem; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: var(--radius-md); }
.app-toolbar h1 { margin: 0; overflow: hidden; font-size: clamp(1.35rem, 2.4vw, 1.85rem); text-overflow: ellipsis; white-space: nowrap; }
.back-link { width: var(--touch-size); min-height: var(--touch-size); display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-brand-strong); background: rgb(255 255 255 / 52%); font-size: 1.25rem; font-weight: 750; text-decoration: none; }
.compact-empty-state { text-align: center; }
.compact-empty-state p { margin: 0; color: var(--color-ink-soft); }
.empty-state { min-height: 16rem; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-state p { max-width: 36rem; color: var(--color-ink-soft); }
.empty-state-icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; margin-bottom: var(--space-3); border-radius: 1rem; color: var(--color-brand-strong); background: var(--color-brand-soft); font-size: 1.4rem; font-weight: 850; }

.auth-card { width: min(100%, 720px); margin: .65rem auto; padding: 1.15rem 1.25rem; }
.login-page .page-shell { margin-top: .65rem; margin-bottom: .65rem; }
.auth-compact-title { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; }
.auth-compact-title h1 { margin: 0; font-size: 1.7rem; }
.auth-intro { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.auth-intro h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 3.4rem); }
.auth-mark { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; border-radius: .9rem; font-size: 1rem; }
.auth-mark-wide { font-size: .78rem; letter-spacing: .06em; }
.notice { min-height: var(--touch-size); display: flex; align-items: center; gap: .6rem; margin-block: var(--space-5); padding: .8rem 1rem; border: 1px solid rgb(255 255 255 / 75%); border-radius: var(--radius-sm); font-size: .88rem; font-weight: 650; }
.notice-info { color: var(--status-info); background: var(--status-info-bg); }
.local-login { gap: .7rem; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / 72%); }
.local-login-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.local-login-heading h2 { margin: 0; }
.local-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem .8rem; }
.login-provider-note { min-height: 2.2rem; display: flex; align-items: center; gap: .5rem; margin-top: .65rem; padding: .45rem .65rem; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 650; }
.form-message { min-height: 1.35rem; margin: 0; color: var(--status-error); font-size: .84rem; font-weight: 650; }
.denied-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-4); border-radius: 1rem; color: var(--status-error); background: var(--status-error-bg); font-size: 1.6rem; font-weight: 850; }

.app-dialog { width: min(92vw, 34rem); max-height: min(88vh, 42rem); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); color: var(--color-ink); background: transparent; }
.app-dialog::backdrop { background: rgb(28 55 67 / 30%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.dialog-shell { position: relative; max-height: min(88vh, 42rem); overflow-y: auto; padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: var(--radius-lg); }
.dialog-close { position: absolute; top: 0; right: 0; width: 3.25rem; height: 3.25rem; border: 0; border-radius: 0 var(--radius-lg) 0 1.1rem; color: var(--color-ink-soft); background: rgb(255 255 255 / 66%); cursor: pointer; font-size: 1.7rem; line-height: 1; }
.dialog-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-4); border-radius: .9rem; color: var(--status-info); background: var(--status-info-bg); font-size: 1.25rem; font-weight: 850; }
.dialog-actions { justify-content: flex-end; margin-top: var(--space-5); }
.loading-row { display: flex; align-items: center; gap: .7rem; min-height: 3rem; margin-top: var(--space-4); padding: .65rem .8rem; border-radius: var(--radius-sm); color: var(--status-info); background: var(--status-info-bg); font-size: .88rem; font-weight: 700; }
.spinner { width: 1.15rem; height: 1.15rem; border: 2px solid rgb(23 105 168 / 25%); border-top-color: var(--status-info); border-radius: 50%; animation: spin .8s linear infinite; }
.dialog-result { min-height: 1.5rem; margin: var(--space-3) 0 0; color: var(--status-success); font-weight: 750; }
.toast { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 50; max-width: min(24rem, calc(100% - 2rem)); padding: .85rem 1rem; border: 1px solid rgb(255 255 255 / 80%); border-radius: var(--radius-sm); color: var(--status-warning); background: var(--status-warning-bg); box-shadow: var(--shadow-float); font-weight: 700; animation: toast-in var(--transition-fast) both; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-meta { grid-template-columns: repeat(3, auto); align-items: center; justify-content: start; }
    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .app-catalog { grid-template-columns: repeat(2, 1fr); }
    .app-card { min-height: 12.5rem; }
    .topic-card { min-height: 9.5rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
    .content-grid { grid-template-columns: 1fr; }
    .action-card { align-items: flex-start; flex-direction: column; }
    .action-buttons { justify-content: flex-start; }
}

@media (max-width: 560px) {
    :root { --glass-blur: 14px; --space-5: 1.25rem; }
    body { background-attachment: scroll; }
    .site-header, .page-shell { width: min(100% - 1rem, var(--content-width)); }
    .site-header { top: .35rem; grid-template-columns: auto 1fr; gap: .5rem; margin-top: .35rem; border-radius: 1.05rem; }
    .brand-copy small { display: none; }
    .session-summary .status, .session-summary .online-dot { display: none; }
    .header-action { min-height: var(--touch-size); }
    .page-shell { margin-top: .75rem; }
    .hero, .card, .topic-card { border-radius: var(--radius-md); }
    .hero-meta { grid-template-columns: 1fr; }
    .topic-card { grid-template-columns: auto 1fr; }
    .topic-card .status-badge { grid-column: 2; }
    .section-heading { align-items: flex-start; }
    .list-row { grid-template-columns: auto minmax(0, 1fr); }
    .list-row .status-badge { grid-column: 2; }
    .button-group { grid-template-columns: 1fr; }
    .app-catalog, .card-grid, .local-login-grid { grid-template-columns: 1fr; }
    .app-toolbar { grid-template-columns: auto auto minmax(0, 1fr); }
    .app-toolbar .status-badge { display: none; }
    .hero-actions .button, .action-buttons .button, .dialog-actions .button { flex: 1 1 100%; }
    .dialog-actions { flex-direction: column-reverse; }
    .auth-intro { align-items: flex-start; }
}

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

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .glass-panel { background: var(--glass-surface-strong); }
}