:root {
  --sky-50: #F4F8FD;
  --sky-100: #E8F1FB;
  --sky-200: #CFE2F7;
  --sky-300: #A9CBEF;
  --sky-400: #7FB0E6;
  --sky-500: #4F8FD8;
  --navy-950: #0A1C33;
  --navy-900: #0E2440;
  --navy-800: #13345C;
  --navy-700: #1E4A7F;
  --ink: #111A26;
  --ink-2: #3A4757;
  --muted: #5B6878;
  --line: #DDE6F0;
  --line-strong: #C3D1E0;
  --surface: #FFFFFF;
  --bg: #F4F8FD;
  --success: #177245;
  --success-bg: #E3F4EA;
  --danger: #B3261E;
  --danger-bg: #FCE9E7;
  --warning: #8A5300;
  --warning-bg: #FFF3DA;

  --font: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 36, 64, .05);
  --shadow-2: 0 12px 32px -14px rgba(14, 36, 64, .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  --sidebar-w: 268px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; overscroll-behavior: none; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; font-weight: 400;
  color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; touch-action: pan-x pan-y;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy-700); }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 2px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy-900); color: #fff; padding: 8px 16px; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }

.icon { width: 22px; height: 22px; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.duo { width: 44px; height: 44px; flex: none; }
.duo .f { fill: #93BEEB; }
.duo .s { fill: none; stroke: var(--navy-800); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: var(--pill); border: 1px solid transparent;
  font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--navy-800); color: #fff; }
.btn--primary:hover:not([disabled]) { background: var(--navy-700); }
.btn--sky { background: var(--sky-300); color: var(--navy-900); }
.btn--sky:hover:not([disabled]) { background: var(--sky-400); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover:not([disabled]) { background: var(--sky-50); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink-2);
  cursor: pointer; position: relative; text-decoration: none; transition: background var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--sky-100); }
.icon-btn .dot { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--navy-700); font-weight: 500; cursor: pointer; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: grid; gap: 6px; }
.field + .field { margin-top: 16px; }
.field label { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.field .req, label .req { color: var(--danger); display: inline; background: none; border: 0; padding: 0; border-radius: 0; }
.input { width: 100%; min-height: 48px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(79, 143, 216, .25); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.field__hint { font-size: 13px; color: var(--muted); }
.field__error { font-size: 13px; color: var(--danger); font-weight: 500; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 52px; }
.input-wrap .icon-btn { position: absolute; right: 2px; top: 2px; border: 0; background: transparent; }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; }
.alert .icon { width: 20px; height: 20px; margin-top: 1px; }
.alert--error { background: var(--danger-bg); color: var(--danger); }
.alert--info { background: var(--sky-100); color: var(--navy-800); }
.alert--warning { background: var(--warning-bg); color: var(--warning); }
.alert--success { background: var(--success-bg); color: var(--success); }

.boot { min-height: 100dvh; display: grid; place-items: center; background: var(--navy-800); }
.boot img { width: 96px; height: 96px; object-fit: contain; animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

.welcome { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--sky-300); color: var(--navy-950); padding: calc(32px + var(--safe-t)) 20px calc(32px + var(--safe-b)); }
.welcome__brand { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 24px 0 40px; }
.welcome__brand img { width: 120px; height: 120px; object-fit: contain; }
.welcome__name { font-weight: 700; font-size: 38px; letter-spacing: -.02em; }
.welcome__school { font-size: 15px; font-weight: 500; }
.welcome__choices { width: 100%; max-width: 440px; margin: 0 auto; }
.welcome__choices h1 { font-size: 19px; font-weight: 500; text-align: center; margin-bottom: 20px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 128px; padding: 16px 12px; background: #fff; color: var(--navy-900); border-radius: var(--r-lg); text-decoration: none; font-weight: 600; text-align: center; box-shadow: var(--shadow-2); transition: transform var(--dur) var(--ease); }
.choice:hover { transform: translateY(-2px); }
.choice .duo { width: 48px; height: 48px; }
.welcome__foot { margin-top: 28px; text-align: center; font-size: 13px; color: var(--navy-800); }

.auth { min-height: 100dvh; display: grid; background: var(--bg); }
.auth__band { background: var(--sky-300); color: var(--navy-950); padding: calc(20px + var(--safe-t)) 20px 56px; display: grid; gap: 16px; }
.auth__band .link-btn { color: var(--navy-800); justify-self: start; }
.auth__band-id { display: flex; align-items: center; gap: 12px; }
.auth__band-id img { width: 56px; height: 56px; object-fit: contain; }
.auth__band-id strong { font-size: 22px; font-weight: 600; display: block; }
.auth__band-id span { color: var(--navy-800); font-size: 14px; }
.auth__quote { display: none; }
.auth__panel { margin: -32px 16px 32px; background: var(--surface); border-radius: var(--r-xl); padding: 32px 22px; box-shadow: var(--shadow-2); align-self: start; }
.auth__panel h1 { font-size: 26px; }
.auth__panel .lead { color: var(--muted); margin: 8px 0 22px; }
.auth__panel form .btn--primary { margin-top: 22px; }
.auth__panel .alert { margin-bottom: 16px; }
.auth__links { display: flex; justify-content: center; margin-top: 10px; }
.space-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; background: var(--sky-100); color: var(--navy-800); border-radius: var(--pill); font-weight: 500; font-size: 14px; margin-bottom: 14px; }
.space-badge .duo { width: 28px; height: 28px; }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(360px, 42%) 1fr; }
  .auth__band { padding: 48px; align-content: space-between; }
  .auth__quote { display: block; font-size: 30px; font-weight: 500; line-height: 1.25; max-width: 15ch; }
  .auth__panel { margin: auto; width: min(420px, 90%); box-shadow: none; padding: 20px 0; background: transparent; }
}

.shell { min-height: 100dvh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(var(--sidebar-w), 86vw);
  display: flex; flex-direction: column; background: var(--sky-300); color: var(--navy-950);
  padding: calc(20px + var(--safe-t)) 14px calc(16px + var(--safe-b));
  transform: translateX(-100%); transition: transform 220ms var(--ease); overflow-y: auto;
}
.shell.is-open .sidebar { transform: none; box-shadow: var(--shadow-2); }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(10, 28, 51, .5); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); }
.shell.is-open .scrim { opacity: 1; pointer-events: auto; }
.sidebar__brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 18px; }
.sidebar__brand img { width: 44px; height: 44px; object-fit: contain; }
.sidebar__brand strong { font-size: 22px; font-weight: 700; display: block; line-height: 1.1; }
.sidebar__badge { display: inline-block; margin-top: 3px; padding: 2px 10px; border-radius: var(--pill); background: var(--navy-800); color: #fff; font-size: 11px; font-weight: 500; }
.sidebar__close { margin-left: auto; background: rgba(255, 255, 255, .5); border: 0; }
.nav-group { margin-top: 14px; }
.nav-group__title { padding: 0 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-700); }
.nav-link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin-bottom: 2px;
  color: var(--navy-950); text-decoration: none; border-radius: var(--r-md); font-size: 14.5px; font-weight: 400;
  transition: background var(--dur) var(--ease);
}
.nav-link .icon { width: 20px; height: 20px; color: var(--navy-800); }
.nav-link:hover { background: rgba(255, 255, 255, .45); }
.nav-link[aria-current="page"] { background: #fff; font-weight: 600; box-shadow: var(--shadow-1); }
.sidebar__user { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(19, 52, 92, .18); display: flex; align-items: center; gap: 10px; }
.sidebar__user .avatar { width: 40px; height: 40px; font-size: 15px; }
.sidebar__user div { min-width: 0; flex: 1; }
.sidebar__user strong { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user div span { font-size: 12px; color: var(--navy-700); }
.sidebar__user .icon-btn { background: rgba(255, 255, 255, .55); border: 0; }

.avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-weight: 600; font-size: 16px; }

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 16px 10px; background: rgba(244, 248, 253, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar__title { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.year-chip { display: none; align-items: center; gap: 8px; padding: 0 14px; min-height: 40px; border-radius: var(--pill); background: var(--sky-100); color: var(--navy-800); font-size: 13px; font-weight: 500; }
.main { padding: 20px 16px calc(40px + var(--safe-b)); max-width: 1320px; margin: 0 auto; }
.main:focus { outline: none; }

@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar { position: sticky; top: 0; height: 100dvh; width: auto; transform: none; border-radius: 0 var(--r-xl) var(--r-xl) 0; }
  .sidebar__close, .menu-btn, .scrim { display: none; }
  .topbar { padding: 14px 32px; }
  .topbar__title { font-size: 19px; }
  .year-chip { display: inline-flex; }
  .main { padding: 28px 32px 48px; }
}
@media (min-width: 700px) { .year-chip { display: inline-flex; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: 26px; }
.page-head p { color: var(--muted); margin-top: 4px; }

.dash { display: grid; gap: 20px; }
.dash-row { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .dash-row--hero { grid-template-columns: 1.35fr 1fr; }
  .dash-row--2 { grid-template-columns: 1fr 1fr; }
  .dash-row--cal { grid-template-columns: 1.2fr 1fr; }
}

.banner {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
  background: var(--navy-800); color: #fff; border-radius: var(--r-xl); padding: 24px;
}
.banner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 28px solid rgba(169, 203, 239, .12); }
.banner__text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.banner h2 { font-size: 22px; font-weight: 500; line-height: 1.3; }
.banner h2 strong { color: var(--sky-300); font-weight: 600; }
.banner p { color: var(--sky-200); margin: 8px 0 18px; font-size: 14px; }
.ring { position: relative; width: 108px; height: 108px; flex: none; z-index: 1; }
.ring svg { width: 108px; height: 108px; transform: rotate(-90deg); }
.ring__track { stroke: rgba(255, 255, 255, .15); }
.ring__bar { stroke: var(--sky-300); transition: stroke-dashoffset 600ms var(--ease); }
.ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__label strong { font-size: 22px; font-weight: 600; line-height: 1; }
.ring__label span { font-size: 11px; color: var(--sky-200); margin-top: 4px; }
@media (max-width: 520px) { .banner { flex-direction: column-reverse; align-items: flex-start; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 0; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel__head h2 { font-size: 17px; }
.panel__head .link-btn { font-size: 14px; min-height: 36px; }

.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.action {
  display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 116px; padding: 14px 8px;
  background: var(--sky-50); border: 1px solid transparent; border-radius: var(--r-lg);
  text-decoration: none; color: var(--ink); text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.3;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.action:hover { background: #fff; border-color: var(--sky-400); }
.action:active { transform: scale(.97); }
.action .badge { position: absolute; }
.action__icon { position: relative; }
.action__count { position: absolute; top: -6px; right: -12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 600; line-height: 22px; }

.feature { position: relative; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy-800); }
.feature--sky { border-left-color: var(--sky-400); background: linear-gradient(180deg, var(--sky-50), #fff 55%); }
.feature__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.feature__value { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 16px; line-height: 1.1; }
.feature__value small { font-size: 18px; font-weight: 600; color: var(--muted); }
.rows { border-top: 1px solid var(--line); padding-top: 10px; }
.rows__item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--ink-2); }
.rows__item strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rows__item a { color: inherit; text-decoration: none; }
.rows__item a:hover { text-decoration: underline; }
.feature__note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.t-success { color: var(--success) !important; }
.t-danger { color: var(--danger) !important; }
.t-sky { color: var(--sky-500) !important; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .stats { grid-template-columns: repeat(6, 1fr); } }
.stat { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); display: grid; gap: 6px; min-height: 104px; align-content: space-between; }
a.stat:hover { border-color: var(--sky-400); }
.stat__label { font-size: 13px; color: var(--muted); }
.stat__value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.stat__value small { font-size: 14px; font-weight: 500; color: var(--muted); }
.stat__sub { font-size: 12px; color: var(--muted); }

.watch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .watch { grid-template-columns: repeat(3, 1fr); } }
.watch__item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); background: var(--sky-50); text-decoration: none; color: var(--ink); min-height: 64px; }
.watch__item:hover { background: var(--sky-100); }
.watch__num { min-width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-weight: 700; font-size: 17px; }
.watch__item.is-hot .watch__num { background: var(--navy-800); color: #fff; }
.watch__item.is-alarm .watch__num { background: var(--danger); color: #fff; }
.watch__item span:last-child { font-size: 13px; line-height: 1.3; }

.chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 190px; padding-top: 10px; }
.chart__col { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
.chart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.chart__bar { width: min(18px, 40%); border-radius: 6px 6px 3px 3px; min-height: 3px; }
.chart__bar--in { background: var(--navy-800); }
.chart__bar--out { background: var(--sky-300); }
.chart__month { text-align: center; font-size: 12px; color: var(--muted); text-transform: capitalize; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__head strong { font-size: 16px; font-weight: 600; text-transform: capitalize; }
.cal__nav { display: flex; gap: 6px; }
.cal__nav .icon-btn { width: 38px; height: 38px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal__dow { font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.cal__day {
  height: 40px; display: grid; place-items: center; position: relative;
  border: 0; border-radius: 12px; background: var(--sky-50); font-size: 14px; cursor: pointer; color: var(--ink);
}
.cal__day:hover { background: var(--sky-100); }
.cal__day.is-out { visibility: hidden; }
.cal__day.is-event { background: var(--sky-300); font-weight: 600; }
.cal__day.is-today { background: var(--navy-800); color: #fff; font-weight: 600; }
.cal__day[aria-pressed="true"] { outline: 2px solid var(--navy-700); outline-offset: 1px; }
.cal__day.is-event::after { content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--navy-800); }
.cal__day.is-today.is-event::after { background: var(--sky-300); }
.cal__events { margin-top: 14px; display: grid; gap: 8px; }
.cal__event { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); background: var(--sky-50); font-size: 14px; }
.cal__event i { width: 4px; align-self: stretch; border-radius: 4px; background: var(--navy-800); }
.cal__event small { display: block; color: var(--muted); font-size: 12px; }

.notices { display: grid; gap: 10px; }
.notice { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-md); background: var(--sky-100); text-decoration: none; color: var(--ink); }
.notice:nth-child(even) { background: var(--sky-300); }
.notice__date { width: 52px; flex: none; text-align: center; background: #fff; border-radius: 12px; padding: 6px 0; }
.notice__date strong { display: block; font-size: 18px; line-height: 1.1; }
.notice__date span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.notice__title { font-weight: 600; line-height: 1.3; }
.notice__meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }
.list__item:first-child { border-top: 0; padding-top: 0; }
.list__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sky-100); color: var(--navy-800); flex: none; }
.list__icon--alert { background: var(--danger-bg); color: var(--danger); }
.list__body { flex: 1; min-width: 0; }
.list__title { font-weight: 500; font-size: 14px; }
.list__meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.tag { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: var(--pill); background: var(--sky-100); color: var(--navy-800); white-space: nowrap; }

.empty-mini { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
.empty { text-align: center; padding: 56px 16px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty .duo { width: 64px; height: 64px; margin: 0 auto 14px; }
.empty h2 { font-size: 20px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 46ch; margin: 0 auto; }
.empty .btn { margin-top: 18px; }
.empty--danger .duo .f { fill: #F6C9C5; }
.empty--danger .duo .s { stroke: var(--danger); }

.skeleton { background: linear-gradient(90deg, #E8EEF6 0%, #F4F8FD 50%, #E8EEF6 100%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }

.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(20px + var(--safe-b)); display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.toast { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--navy-950); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: 14px; animation: toast-in var(--dur) var(--ease); }
.toast .icon { width: 20px; height: 20px; }
.toast--success .icon { color: #86E0B0; }
.toast--error .icon { color: #FFA59E; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 559px) {
  .actions { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .action { min-height: 104px; font-size: 12.5px; padding: 12px 4px; }
  .action .duo { width: 38px; height: 38px; }
}
.filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; }
.filter {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.filter:hover { background: var(--sky-50); }
.filter[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.filter .count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sky-100); color: var(--navy-800); font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.filter[aria-pressed="true"] .count { background: rgba(255, 255, 255, .2); color: #fff; }

.cards { display: grid; gap: 14px; }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.req { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 14px; align-content: start; }
.req__top { display: flex; align-items: flex-start; gap: 12px; }
.req__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sky-100); color: var(--navy-800); flex: none; }
.req__title { font-weight: 600; font-size: 16px; line-height: 1.3; }
.req__meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.req__payload { display: grid; gap: 6px; padding: 12px 14px; background: var(--sky-50); border-radius: var(--r-md); font-size: 14px; }
.req__payload div { display: flex; justify-content: space-between; gap: 14px; }
.req__payload span:first-child { color: var(--muted); }
.req__payload span:last-child { font-weight: 500; text-align: right; }
.req__note { font-size: 14px; color: var(--ink-2); border-left: 3px solid var(--line-strong); padding-left: 12px; }
.req__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.req__actions .btn { flex: 1; min-width: 140px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--pill); font-size: 12.5px; font-weight: 600; }
.status--pending { background: var(--warning-bg); color: var(--warning); }
.status--approved { background: var(--success-bg); color: var(--success); }
.status--rejected { background: var(--danger-bg); color: var(--danger); }

dialog.modal {
  border: 0; border-radius: var(--r-xl); padding: 0; width: min(460px, calc(100% - 32px));
  box-shadow: var(--shadow-2); color: var(--ink); background: var(--surface);
}
dialog.modal::backdrop { background: rgba(10, 28, 51, .55); }
.modal__body { padding: 24px; }
.modal__body h2 { font-size: 20px; margin-bottom: 8px; }
.modal__body p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.modal__body textarea { width: 100%; min-height: 110px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); resize: vertical; font-family: inherit; }
.modal__body textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(79, 143, 216, .25); }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy-800); display: grid; gap: 4px; }
.kpi--sky { border-left-color: var(--sky-400); }
.kpi--danger { border-left-color: var(--danger); }
.kpi--success { border-left-color: var(--success); }
.kpi__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.kpi__sub { font-size: 13px; color: var(--muted); }

.bars { display: grid; gap: 12px; }
.bar__head { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 5px; }
.bar__head strong { font-weight: 600; white-space: nowrap; }
.bar__track { height: 10px; border-radius: 6px; background: var(--sky-100); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 6px; background: var(--navy-800); }
.bar--sky .bar__fill { background: var(--sky-400); }

.gauge { height: 14px; border-radius: 8px; background: var(--sky-100); overflow: hidden; margin: 10px 0 8px; }
.gauge__fill { height: 100%; background: var(--success); border-radius: 8px; }

.table-list { list-style: none; margin: 0; padding: 0; }
.table-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.table-list li:first-child { border-top: 0; }
.table-list .main { flex: 1; min-width: 0; }
.table-list .main strong { display: block; font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table-list .main span { font-size: 12.5px; color: var(--muted); }
.table-list .amount { font-weight: 600; white-space: nowrap; font-size: 14.5px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.data-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.data-table th, .data-table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table th { font-weight: 600; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--sky-50); }
.data-table th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.data-table th:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: var(--sky-50); }
.data-table td strong { font-weight: 600; }
.report-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.report-head select { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.split { display: grid; gap: 18px; }
@media (min-width: 1000px) { .split { grid-template-columns: 320px 1fr; align-items: start; } }
.year-list { display: grid; gap: 10px; }
.year-item {
  width: 100%; text-align: left; display: grid; gap: 6px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer;
}
.year-item:hover { border-color: var(--sky-400); }
.year-item[aria-pressed="true"] { border-color: var(--navy-800); box-shadow: inset 3px 0 0 var(--navy-800); }
.year-item__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.year-item strong { font-size: 17px; font-weight: 600; }
.year-item span { font-size: 13px; color: var(--muted); }
.status--draft { background: var(--sky-100); color: var(--navy-800); }
.status--closed { background: #ECEFF3; color: var(--muted); }
.status--current { background: var(--success-bg); color: var(--success); }
.status--open { background: var(--success-bg); color: var(--success); }
.status--grading { background: var(--warning-bg); color: var(--warning); }
.status--upcoming { background: var(--sky-100); color: var(--navy-800); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.detail-head h2 { font-size: 22px; }
.detail-head p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions .icon-btn { width: 38px; height: 38px; }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-grid .field + .field { margin-top: 0; }
.modal--lg { width: min(560px, calc(100% - 32px)); }
.hint-box { background: var(--sky-50); border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); }
.picker { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.picker .field { gap: 4px; }
.picker select { min-height: 44px; min-width: 170px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.picker .spacer { flex: 1; }
.tt-wrap { overflow-x: auto; padding-bottom: 6px; }
.tt-grid { display: grid; grid-template-columns: repeat(var(--days, 6), minmax(168px, 1fr)); gap: 10px; min-width: 780px; }
.tt-day { background: var(--sky-50); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 8px; align-content: start; min-height: 120px; }
.tt-day__title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-700); padding: 2px 4px 6px; }
.tt-slot { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy-800); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 3px; text-align: left; width: 100%; cursor: pointer; }
.tt-slot:hover { border-color: var(--sky-400); border-left-color: var(--navy-800); }
.tt-slot strong { font-size: 14px; font-weight: 600; }
.tt-slot span { font-size: 12.5px; color: var(--muted); }
.tt-slot .hours { font-variant-numeric: tabular-nums; color: var(--navy-700); font-weight: 500; }
.tt-empty { font-size: 13px; color: var(--muted); padding: 10px 4px; }
.tt-add { border: 1px dashed var(--line-strong); background: transparent; border-radius: var(--r-md); min-height: 40px; color: var(--navy-700); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tt-add:hover { background: #fff; border-color: var(--sky-400); }
.summary { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.summary strong { color: var(--ink); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--pill); background: var(--sky-100); font-size: 13px; }
.chip-tag button { border: 0; background: transparent; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--navy-800); }
.chip-tag button:hover { background: rgba(255, 255, 255, .8); }
.chip-tag .icon { width: 14px; height: 14px; }
.assign-grid { display: grid; gap: 10px; }
.assign-row { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); flex-wrap: wrap; }
.assign-row .main { flex: 1; min-width: 160px; }
.assign-row .main strong { display: block; font-size: 14.5px; font-weight: 600; }
.assign-row .main span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tt-flag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 3px 8px; border-radius: var(--pill); background: var(--warning-bg); color: var(--warning); font-size: 11.5px; font-weight: 500; }
.bulletin__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--navy-800); margin-bottom: 16px; }
.bulletin__head strong { display: block; font-size: 17px; font-weight: 600; }
.bulletin__head span { display: block; font-size: 13px; color: var(--muted); }
.bulletin__title { text-align: right; }
.bulletin__title h2 { font-size: 20px; }
.bulletin__id { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-bottom: 18px; }
@media (min-width: 700px) { .bulletin__id { grid-template-columns: repeat(4, 1fr); } }
.bulletin__id span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bulletin__id strong { font-size: 15px; font-weight: 600; }
.bulletin__summary { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 700px) { .bulletin__summary { grid-template-columns: repeat(3, 1fr); } }
.bulletin__notes { margin-top: 18px; padding: 14px 16px; background: var(--sky-50); border-radius: var(--r-md); font-size: 14px; display: grid; gap: 8px; }
.bulletin__footer { margin-top: 16px; font-size: 12.5px; color: var(--muted); text-align: center; }
.data-table tfoot th { background: var(--sky-50); font-weight: 600; color: var(--ink); text-transform: none; font-size: 14px; }

@media print {
  .sidebar, .topbar, .scrim, .no-print, .toasts { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .panel { border: 0; padding: 0; }
  .data-table { min-width: 0; font-size: 12px; }
  .data-table th, .data-table td { padding: 6px 8px; }
  body { background: #fff; }
}
.chart-wrap { overflow-x: auto; }
.curve { width: 100%; min-width: 560px; height: auto; }
.curve__grid { stroke: var(--line); stroke-width: 1; }
.curve__pass { stroke: #E0A800; stroke-width: 1.5; stroke-dasharray: 6 5; }
.curve__axis { font-size: 11px; fill: var(--muted); }
.curve__line { fill: none; stroke: var(--navy-800); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.curve__line--class { stroke: var(--sky-400); stroke-width: 2; stroke-dasharray: 5 4; }
.curve__dot { fill: #fff; stroke: var(--navy-800); stroke-width: 2.5; }
.curve__dot.is-low { stroke: var(--danger); }
.proofs { display: flex; gap: 12px; flex-wrap: wrap; }
.proof { margin: 0; flex: 1; min-width: 140px; }
.proof__img {
  aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--sky-50); border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden; font-size: 13px; color: var(--muted); text-align: center; padding: 8px;
}
.proof__img img { width: 100%; height: 100%; object-fit: cover; }
.proof figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.messaging { display: grid; gap: 18px; }
@media (min-width: 1000px) { .messaging { grid-template-columns: 330px 1fr; align-items: start; } }
.threads { display: grid; gap: 8px; max-height: 70vh; overflow-y: auto; }
.thread { width: 100%; text-align: left; display: grid; gap: 6px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; }
.thread:hover { border-color: var(--sky-400); }
.thread[aria-pressed="true"] { border-color: var(--navy-800); box-shadow: inset 3px 0 0 var(--navy-800); }
.thread__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.thread__top strong { font-size: 15px; font-weight: 600; }
.thread__dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.thread__meta { font-size: 12.5px; color: var(--muted); }
.thread__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.chat { display: flex; flex-direction: column; min-height: 420px; }
.chat__head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.chat__head h2 { font-size: 18px; }
.chat__head p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.chat__list { list-style: none; margin: 0; padding: 0 2px; display: grid; gap: 12px; max-height: 52vh; overflow-y: auto; }
.bubble { display: flex; }
.bubble--school { justify-content: flex-end; }
.bubble__body { max-width: min(560px, 85%); padding: 12px 14px; border-radius: var(--r-lg); background: var(--sky-50); border: 1px solid var(--line); }
.bubble--school .bubble__body { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.bubble__author { display: block; font-size: 12px; font-weight: 600; color: var(--navy-700); margin-bottom: 4px; }
.bubble--school .bubble__author { color: var(--sky-200); }
.bubble__body p { font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.bubble__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.bubble--school .bubble__meta { color: var(--sky-200); justify-content: flex-end; }
.receipt { display: inline-flex; align-items: center; gap: 4px; }
.receipt .icon { width: 15px; height: 15px; }
.receipt.is-read { color: #7FE0AE; }
.chat__composer { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.chat__composer textarea { flex: 1; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); resize: vertical; font-family: inherit; }
.chat__composer textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(79, 143, 216, .25); }
.chat__composer textarea:disabled { background: var(--sky-50); color: var(--muted); }
.credentials { margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--sky-50); border: 1px solid var(--sky-300); }
.credentials__label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 10px; }
.credentials__row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14px; }
.credentials__row span { color: var(--muted); }
.credentials__code { font-size: 20px; letter-spacing: .12em; font-weight: 700; }
.credentials__hint { margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tabs button { flex: 1; min-height: 44px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; cursor: pointer; }
.auth-tabs button[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.checks { display: grid; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; cursor: pointer; }
.check:hover { border-color: var(--sky-400); }
.check input { margin-top: 3px; flex-shrink: 0; }
.check .tag { margin-left: 6px; }
.perm-group { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; }
.perm-group summary { padding: 11px 14px; font-weight: 500; font-size: 14px; cursor: pointer; text-transform: capitalize; }
.perm-group[open] summary { border-bottom: 1px solid var(--line); }
.perm-group .checks { padding: 10px; }
.docs { display: grid; gap: 12px; }
.doc { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); flex-wrap: wrap; }
.doc__icon { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--sky-100); color: var(--navy-800); display: grid; place-items: center; }
.doc__icon .icon { width: 22px; height: 22px; }
.doc__body { flex: 1; min-width: 200px; }
.doc__body h3 { font-size: 16px; font-weight: 600; }
.doc__desc { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.doc__meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.doc__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input[type="file"].input { padding: 10px 12px; font-size: 14px; }
.dash-row--wide { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .dash-row--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.pick-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.pick-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; }
.pick-list button:hover:not(:disabled) { border-color: var(--sky-400); }
.pick-list button:disabled { opacity: .6; cursor: default; }
.pick-list strong { display: block; font-size: 14px; font-weight: 600; }
.pick-list span span { font-size: 12.5px; color: var(--muted); }
.panel > .cards { grid-template-columns: 1fr; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not([disabled]) { background: #931F18; }
.field__label { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.input.textarea { min-height: 96px; padding: 12px 16px; line-height: 1.6; resize: vertical; }
.input--title { font-size: 18px; font-weight: 500; }
.journal-tabs { max-width: 560px; }

.jcards { display: grid; gap: 14px; }
@media (min-width: 1000px) { .jcards { grid-template-columns: repeat(2, 1fr); } }
.jcard, .adcard { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); align-content: start; }
.jcard__media, .adcard__media { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--sky-100); color: var(--navy-700); display: grid; place-items: center; overflow: hidden; }
.jcard__media img, .adcard__media img { width: 100%; height: 100%; object-fit: cover; }
.adcard__media { aspect-ratio: auto; min-height: 90px; background: var(--sky-50); }
.adcard__media img { object-fit: contain; }
.jcard__body, .adcard__body { min-width: 0; display: grid; gap: 6px; align-content: start; }
.jcard__tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jcard__cat { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-700); }
.jcard h3, .adcard h3 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.jcard__excerpt { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jcard__meta { font-size: 12.5px; color: var(--muted); }
.adcard__link { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jcard__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.adcard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.adcard__stats div { background: var(--sky-50); border-radius: var(--r-sm); padding: 8px 10px; display: grid; }
.adcard__stats strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.adcard__stats span { font-size: 12px; color: var(--muted); }
@media (max-width: 479px) {
  .jcard, .adcard { grid-template-columns: 1fr; }
  .jcard__media { aspect-ratio: 16 / 9; }
}

.editor { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .editor { grid-template-columns: minmax(0, 1fr) 320px; } .editor__side { position: sticky; top: 84px; } }
.editor__main { min-width: 0; }
.editor__actions { display: grid; gap: 8px; margin-top: 18px; }
.editor__mode button { min-height: 36px; padding: 0 16px; font-size: 14px; }
.cover-drop { position: relative; display: grid; place-items: center; gap: 6px; text-align: center; aspect-ratio: 16 / 9; max-height: 360px; width: 100%; padding: 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--sky-50); color: var(--navy-700); cursor: pointer; align-content: center; }
.cover-drop:hover { border-color: var(--sky-400); }
.cover-drop strong { font-weight: 500; }
.cover-drop span:not(.spinner) { font-size: 13px; color: var(--muted); }
.cover-drop .icon { width: 28px; height: 28px; }
.cover-drop:focus-within { outline: 3px solid var(--sky-500); outline-offset: 2px; }
.cover-drop--filled { padding: 0; border-style: solid; overflow: hidden; cursor: default; }
.cover-drop--filled img { width: 100%; height: 100%; object-fit: cover; }
.cover-drop--ad { aspect-ratio: auto; min-height: 140px; }
.cover-drop--ad.cover-drop--filled img { object-fit: contain; max-height: 240px; }
.cover-drop__actions { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.cover-drop__actions .btn { box-shadow: var(--shadow-2); }
.rt-toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; margin-bottom: 8px; background: var(--sky-50); border-radius: var(--r-md); }
.rt-toolbar button, .rt-toolbar label { min-height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rt-toolbar button:hover, .rt-toolbar label:hover { background: var(--surface); border-color: var(--line); }
.rt-toolbar label:focus-within { outline: 3px solid var(--sky-500); }
.rt-toolbar label.is-busy { opacity: .5; pointer-events: none; }
.input.textarea--body { min-height: 420px; font-size: 16px; line-height: 1.7; }
.md-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.md-help code { font-size: 12.5px; background: var(--sky-100); color: var(--navy-800); padding: 1px 6px; border-radius: 6px; margin-right: 4px; }

.modal--read { width: min(780px, calc(100% - 32px)); max-height: calc(100dvh - 40px); }
.article { max-width: 720px; margin: 0 auto; }
.article__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 18px; }
.article__kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-700); }
.article__title { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; margin-top: 6px; }
.modal__body .article__byline, .article__byline { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.modal__body .article__lead, .article__lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); font-weight: 500; margin: 18px 0 0; padding-left: 14px; border-left: 3px solid var(--sky-400); }
.article__body { margin-top: 22px; font-size: 16.5px; line-height: 1.75; color: var(--ink); }
.modal__body .article__body p, .article__body p { font-size: inherit; color: inherit; margin: 0 0 16px; }
.article__body h2 { font-size: 22px; margin: 28px 0 10px; }
.article__body h3 { font-size: 18px; margin: 22px 0 8px; }
.article__body ul, .article__body ol { margin: 0 0 16px; padding-left: 22px; }
.article__body li + li { margin-top: 4px; }
.article__body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 4px solid var(--navy-800); background: var(--sky-50); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 17px; color: var(--ink-2); font-style: italic; }
.article__body figure { margin: 22px 0; }
.article__body figure img { width: 100%; border-radius: var(--r-md); }
.article__body figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }

.paper { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 20px; display: grid; gap: 18px; }
.paper__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--navy-800); }
.paper__head span { font-size: 22px; font-weight: 700; color: var(--navy-800); letter-spacing: -.01em; }
.paper__head small { font-size: 13px; color: var(--muted); }
.news-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.news-card { display: grid; align-content: start; gap: 0; padding: 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.news-card:hover { border-color: var(--sky-400); box-shadow: var(--shadow-2); }
.news-card__media { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--sky-200), var(--sky-100)); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.news-card__kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--navy-700); }
.news-card strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.news-card__excerpt { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__meta { font-size: 12.5px; color: var(--muted); }
@media (min-width: 800px) {
  .news-card--big { grid-template-columns: 1.4fr 1fr; }
  .news-card--big .news-card__media { aspect-ratio: auto; min-height: 280px; }
  .news-card--big .news-card__body { align-content: center; padding: 24px; }
}
.news-card--big strong { font-size: 22px; line-height: 1.2; }
.news-card--big .news-card__excerpt { font-size: 15.5px; -webkit-line-clamp: 4; }
.ad { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sky-50); text-decoration: none; }
.ad img { width: 100%; height: 100%; object-fit: cover; }
.ad--journal_top img { max-height: 220px; }
.ad--journal_inline { align-self: stretch; min-height: 180px; }
.ad__label { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--pill); background: rgba(10, 28, 51, .72); color: #fff; }

.pay { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pay::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pay--ok { background: var(--success-bg); color: var(--success); }
.pay--late { background: var(--danger-bg); color: var(--danger); }
.pay--stop { background: var(--danger); color: #fff; }
.pay--part { background: var(--warning-bg); color: var(--warning); }
.pay--none { background: #ECEFF3; color: var(--muted); }
.payer { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 4px; border-radius: var(--pill); }
.payer:not(:has(strong)) { padding-left: 10px; }
.payer strong { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; background: rgba(255, 255, 255, .7); }
.payer--good { background: var(--success-bg); color: var(--success); }
.payer--fair { background: var(--sky-100); color: var(--navy-800); }
.payer--warn { background: var(--warning-bg); color: var(--warning); }
.payer--bad { background: var(--danger-bg); color: var(--danger); }
.payer--new { background: #ECEFF3; color: var(--muted); }
.tu-trend { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tu-trend--hausse { color: var(--success); }
.tu-trend--baisse { color: var(--danger); }
.tu-rank { font-size: 12.5px; color: var(--muted); }
.tu-tabs { max-width: 380px; }
.tu-picker select { min-width: 140px; }
.tu-search { flex: 1; min-width: 220px; }
.tu-picker .icon-btn { font-size: 18px; font-weight: 600; }
.tu-count { font-size: 13px; color: var(--muted); margin: -6px 0 12px; }
.tu-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 460px) { .tu-grid { grid-template-columns: 1fr; } }
.tu-card { position: relative; display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: inherit; text-decoration: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tu-card:hover { border-color: var(--sky-400); box-shadow: var(--shadow-2); }
.tu-card__corner { flex: none; margin: -4px -4px 0 auto; align-self: flex-start; }
.tu-card__who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.tu-card__name { flex: 1; min-width: 0; }
.tu-card__who strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.tu-card__name > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tu-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tu-card__stats > span { display: grid; gap: 2px; padding: 8px 10px; background: var(--sky-50); border-radius: var(--r-sm); min-width: 0; }
.tu-card__stats em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tu-card__stats b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.tu-card__stats small { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.tu-card__foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tu-hero { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.tu-hero h1 { font-size: 24px; }
.tu-hero p { color: var(--muted); margin-top: 2px; }
.tu-avatar { width: 56px; height: 56px; font-size: 19px; }
.tu-sub { font-size: 14px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 22px 0 10px; }
.cap-legend { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.cap-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; }
.cap-dot--paid { background: var(--success); }
.cap-dot--late { background: var(--danger); }
.cap-dot--due { background: #E08A00; }
.caps { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.cap { display: grid; gap: 4px; align-content: start; padding: 12px 12px 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); border-left: 5px solid var(--line-strong); background: var(--surface); }
.cap__top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cap__month { font-size: 15px; font-weight: 600; text-transform: capitalize; }
.cap__month small { font-size: 12px; font-weight: 400; color: var(--muted); }
.cap__state { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.cap__amount { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cap__meta { font-size: 12px; color: var(--muted); }
.cap__bar { height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; margin-top: 2px; }
.cap__bar span { display: block; height: 100%; background: currentColor; }
.cap--paid { border-left-color: var(--success); background: var(--success-bg); }
.cap--paid .cap__state { color: var(--success); }
.cap--late { border-left-color: var(--danger); background: var(--danger-bg); }
.cap--late .cap__state, .cap--late .cap__bar { color: var(--danger); }
.cap--due { border-left-color: #E08A00; background: var(--warning-bg); }
.cap--due .cap__state, .cap--due .cap__bar { color: var(--warning); }
.cap--next { border-left-color: #F2B544; }
.cap--next .cap__state { color: var(--warning); }
.cap--void { opacity: .55; }
.cap__btn { margin-top: 6px; background: var(--surface); border-color: currentColor; color: var(--danger); min-height: 36px; padding: 0 12px; justify-content: space-between; }
.cap--due .cap__btn { color: var(--warning); }
.cap__btn:hover { background: #fff; filter: brightness(.95); }
.cap__left { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--pill); background: currentColor; }
.cap__left { color: inherit; background: rgba(179, 38, 30, .12); }
.cap__stop { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: #fff; background: var(--danger); padding: 6px 10px; border-radius: var(--r-sm); }
.score { display: flex; align-items: center; gap: 16px; }
.score-ring { --v: 0; --c: var(--success); flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--sky-100) 0); }
.score-ring span { width: 82px; height: 82px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-content: center; font-size: 26px; font-weight: 700; line-height: 1; }
.score-ring small { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.tu-preview { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.tu-preview .icon { color: var(--navy-700); margin-top: 2px; }
.tu-pick { max-height: 240px; overflow-y: auto; }

a.tu-card__who { color: inherit; text-decoration: none; }
a.tu-card__who:hover strong { color: var(--navy-700); }
.pr-actions { display: flex; gap: 8px; margin-left: auto; }
.momo { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.momo__head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: var(--navy-800); color: #fff; }
.momo__head strong { display: block; font-size: 22px; font-weight: 700; }
.momo__head span { font-size: 13px; opacity: .85; }
.momo__icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; flex: none; }
.momo__lines { list-style: none; margin: 0; padding: 6px 16px; max-height: 200px; overflow-y: auto; }
.momo__lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.momo__lines li:last-child { border-bottom: 0; }
.momo__lines span { color: var(--ink-2); text-transform: capitalize; }
.momo__steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cap__btn:not(:has(.cap__left)) { justify-content: center; }
.form-grid--2 { align-items: start; }

.dash-row--xp { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .dash-row--xp { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .xp-form { position: sticky; top: 84px; } }
.dash-row--xp > .panel:only-child { grid-column: 1 / -1; }
.xps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xp { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--r-md); background: var(--surface); }
.xp__main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.xp__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.xp__top strong { font-size: 15px; font-weight: 600; }
.xp__amount { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--danger); white-space: nowrap; }
.xp__reason { font-size: 14px; color: var(--ink-2); }
.xp__meta { font-size: 12.5px; color: var(--muted); }
.xp .icon-btn { width: 36px; height: 36px; }
.xp--void { border-left-color: var(--line-strong); background: var(--bg); }
.xp--void .xp__amount { color: var(--muted); }
.xp--void .xp__num { text-decoration: line-through; }
.xp-toggle { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }

.fr-period { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.fr-period select { min-height: 42px; min-width: 240px; }
.fr-sub { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.fr-sub:first-of-type { margin-top: 0; }
.bar__head small { color: var(--muted); font-weight: 400; }
.fr-chart { position: relative; }
.fr-cross { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.fr-tip { position: absolute; top: 6px; z-index: 2; min-width: 210px; padding: 10px 12px; border-radius: var(--r-md); background: var(--navy-950); color: #fff; font-size: 12.5px; display: grid; gap: 4px; box-shadow: var(--shadow-2); pointer-events: none; }
.fr-tip strong { font-size: 13px; margin-bottom: 2px; }
.fr-tip span { display: flex; align-items: center; gap: 6px; }
.fr-tip i { width: 8px; height: 8px; border-radius: 50%; }
.fr-tip b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.fr-tip__net { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 4px; margin-top: 2px; }
.mvs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 460px; overflow-y: auto; }
.mv { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.mv:last-child { border-bottom: 0; }
.mv__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.mv__main { flex: 1; min-width: 0; display: grid; }
.mv__main strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv__main span { font-size: 12.5px; color: var(--muted); }
.mv__amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mv--in .mv__icon { background: #E6EEF8; color: #1E5AA8; }
.mv--in .mv__amount { color: var(--success); }
.mv--sal .mv__icon { background: #E3F3F1; color: #1F7A6E; }
.mv--out .mv__icon { background: #FBEDE4; color: #A2480A; }
.mv--sal .mv__amount, .mv--out .mv__amount { color: var(--ink); }
.dash-row--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .dash-row--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.fr-chart .curve { min-width: 0; }

.check-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.perm-group summary span { float: right; font-size: 12.5px; color: var(--muted); font-weight: 500; text-transform: none; }
.accs { display: grid; gap: 12px; }
.acc { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.acc--off { background: var(--bg); }
.acc--off .acc__id strong { color: var(--muted); }
.acc__who { display: flex; align-items: center; gap: 12px; }
.acc__id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.acc__id strong { font-size: 15.5px; font-weight: 600; }
.acc__id span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.acc__roles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acc__roles .chip-tag { padding: 4px 12px; }
.acc__foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
.acc__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acc__actions .icon-btn { width: 38px; height: 38px; }

.au-note { display: flex; gap: 10px; align-items: flex-start; }
.au-note .icon { color: var(--navy-700); margin-top: 1px; }
.au-of { font-size: 14px; font-weight: 500; color: var(--muted); }
.au-days { display: grid; gap: 22px; }
.au-day__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 10px; }
.au-day__title::first-letter { text-transform: uppercase; }
.au-day__title span { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sky-100); border-radius: var(--pill); padding: 1px 8px; letter-spacing: 0; }
.au-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.au { display: grid; grid-template-columns: 46px 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.au:last-child { border-bottom: 0; }
.au__time { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 7px; }
.au__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 12px; font-weight: 600; }
.au__avatar--system { background: var(--sky-100); color: var(--navy-700); }
.au__body { min-width: 0; display: grid; gap: 3px; }
.au__body > p:first-child { font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.au__body strong { color: var(--ink); font-weight: 600; }
.au__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.au__cat { font-weight: 600; color: var(--navy-700); background: var(--sky-50); border-radius: var(--pill); padding: 1px 8px; }
.au--delete .au__meta { color: var(--danger); }
.au__changes { margin-top: 4px; font-size: 13px; }
.au__changes summary { cursor: pointer; color: var(--navy-700); font-weight: 500; width: fit-content; }
.au__changes dl { margin: 8px 0 0; display: grid; gap: 6px; padding: 10px 12px; background: var(--bg); border-radius: var(--r-md); }
.au__changes dl div { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: 10px; }
.au__changes dt { color: var(--muted); }
.au__changes dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.au__changes dd .icon { color: var(--muted); }
.au__old { color: var(--muted); text-decoration: line-through; }
@media (max-width: 559px) {
  .au { grid-template-columns: 34px minmax(0, 1fr); }
  .au__time { grid-column: 2; grid-row: 1; padding-top: 0; font-size: 12px; }
  .au__avatar { grid-row: 1 / span 2; }
  .au__body { grid-column: 2; }
  .au__changes dl div { grid-template-columns: 1fr; gap: 2px; }
}

.set-tabs { max-width: 520px; }
.set-grid { display: grid; gap: 20px; }
@media (min-width: 1000px) { .set-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.set-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; grid-column: 1 / -1; }
.set-actions--sticky { position: sticky; bottom: 0; z-index: 3; margin: 16px -4px 0; padding: 12px 4px calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.set-logo { display: flex; gap: 16px; align-items: center; }
.set-logo__img { width: 84px; height: 84px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--sky-50); display: grid; place-items: center; color: var(--navy-700); overflow: hidden; flex: none; }
.set-logo__img img { width: 100%; height: 100%; object-fit: contain; }
.set-logo__img .icon { width: 34px; height: 34px; }
.set-note { display: flex; gap: 10px; align-items: flex-start; }
.set-note .icon { color: var(--navy-700); margin-top: 1px; }
.set-type-cfg { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.set-cycles { display: grid; gap: 14px; }
.set-cycle { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) minmax(120px, 170px); gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.set-row > div { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.set-row > div > span:not(.tag) { font-size: 12.5px; color: var(--muted); }
.set-row strong { font-weight: 600; }
.set-row--cycle { border-top: 0; background: var(--sky-50); }
.set-row--cycle strong { color: var(--navy-800); font-size: 15px; }
.set-row:not(.set-row--cycle) { padding-left: 30px; }
.set-row.is-custom .set-amount .input { border-color: var(--navy-700); background: #fff; font-weight: 600; }
.set-row:not(.is-custom):not(.set-row--cycle) .set-amount .input { color: var(--ink-2); background: var(--bg); }
.set-amount { position: relative; display: block; }
.set-amount .input { min-height: 42px; padding-right: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.set-amount span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.set-total { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.set-total .link-btn { min-height: 32px; font-size: 12.5px; margin-left: auto; }
@media (max-width: 640px) {
  .set-row { grid-template-columns: minmax(0, 1fr) minmax(130px, 150px); }
  .set-total { grid-column: 1 / -1; text-align: left; }
  .set-total:empty { display: none; }
  .set-total .link-btn { margin-left: 0; }
}

/* ===================== Espace élève (mobile) ===================== */
.st-app { min-height: 100dvh; max-width: 480px; margin: 0 auto; background: var(--bg); position: relative; }
@media (min-width: 520px) { .st-app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px -40px rgba(14, 36, 64, .35); } }
.st-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + var(--safe-t)) 18px 12px; background: rgba(244, 248, 253, .92); backdrop-filter: blur(10px); }
.st-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-brand img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.st-brand strong { display: block; font-size: 18px; font-weight: 600; color: var(--navy-800); line-height: 1.1; }
.st-brand span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.st-top__actions { display: flex; gap: 8px; }
.st-round { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--navy-800); display: grid; place-items: center; cursor: pointer; }
.st-round .icon { width: 21px; height: 21px; }
.st-dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; border: 2px solid var(--bg); box-sizing: content-box; }
.st-main { padding: 6px 18px calc(110px + var(--safe-b)); }
.st-main:focus { outline: none; }

.st-nav { position: fixed; z-index: 25; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); width: min(444px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; border-radius: 24px; background: var(--surface); box-shadow: 0 14px 40px -12px rgba(14, 36, 64, .35), 0 0 0 1px var(--line); }
.st-nav__item { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 18px; color: var(--muted); text-decoration: none; font-size: 11.5px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.st-nav__item .icon { width: 22px; height: 22px; }
.st-nav__item[aria-current="page"] { background: var(--navy-800); color: #fff; }

.st-hello { padding: 8px 2px 16px; }
.st-hello p { color: var(--muted); font-size: 15px; }
.st-hello h1 { font-size: 26px; font-weight: 600; color: var(--navy-900); margin-top: 2px; }
.st-hello h1 span { color: var(--sky-500); }

.st-hero { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 26px; background: var(--navy-800); color: #fff; box-shadow: 0 18px 40px -22px rgba(19, 52, 92, .8); }
.st-hero__main { flex: 1; min-width: 0; }
.st-hero__who { display: flex; align-items: center; gap: 10px; }
.st-hero__avatar { width: 42px; height: 42px; font-size: 15px; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .35); }
.st-hero__who > div strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.st-hero__who > div span { display: block; font-size: 12.5px; opacity: .78; }
.st-hero__label { margin-top: 14px; font-size: 14px; opacity: .88; }
.st-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 3px; font-size: 13px; font-weight: 500; }
.st-trend { padding: 2px 8px; border-radius: var(--pill); font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .14); }
.st-trend.is-up { color: #9BE3BE; }
.st-trend.is-down { color: #FFB4AB; }
.st-hero__btn { margin-top: 14px; min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--pill); background: var(--sky-300); color: var(--navy-900); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.st-ring { position: relative; width: 108px; height: 108px; flex: none; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.st-ring circle { fill: none; stroke-width: 9; }
.st-ring__track { stroke: rgba(255, 255, 255, .14); }
.st-ring__bar { stroke: var(--sky-300); stroke-linecap: round; transition: stroke-dasharray 600ms var(--ease); }
.st-ring.is-low .st-ring__bar { stroke: #FFB4AB; }
.st-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.st-ring strong { font-size: 24px; font-weight: 600; line-height: 1; }
.st-ring small { font-size: 12px; opacity: .75; margin-top: 3px; }

.st-h2 { display: flex; align-items: center; justify-content: space-between; font-size: 17.5px; font-weight: 600; color: var(--navy-900); margin: 26px 2px 12px; }
.st-card { background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: 0 1px 0 var(--line); }
.st-card--muted { background: transparent; border: 1.5px dashed var(--line-strong); box-shadow: none; text-align: center; color: var(--muted); font-size: 14px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-tile { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 128px; padding: 16px; border: 0; border-radius: 22px; background: var(--sky-100); color: var(--navy-900); cursor: pointer; font: inherit; }
.st-tile strong { font-size: 15.5px; font-weight: 600; line-height: 1.25; margin-top: 6px; }
.st-tile span:not(.st-tile__tag) { font-size: 12.5px; color: var(--ink-2); }
.st-tile__tag { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 9px; border-radius: var(--pill); background: rgba(255, 255, 255, .75); font-size: 11.5px; font-weight: 600; color: var(--navy-700); }
.st-tile--exam { background: var(--navy-800); color: #fff; }
.st-tile--exam span:not(.st-tile__tag) { color: rgba(255, 255, 255, .8); }
.st-tile--exam .st-tile__tag { background: rgba(255, 255, 255, .16); color: #fff; }

.st-news { display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 1px 0 var(--line); }
.st-news img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.st-news__icon { display: grid; place-items: center; height: 88px; background: linear-gradient(135deg, var(--sky-200), var(--sky-100)); color: var(--navy-800); }
.st-news__icon .icon { width: 32px; height: 32px; }
.st-news__body { display: grid; gap: 5px; padding: 16px 18px 18px; }
.st-news__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sky-500); }
.st-news strong { font-size: 16.5px; font-weight: 600; line-height: 1.3; color: var(--navy-900); }
.st-news__sum { font-size: 14px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-news__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--navy-700); }
.st-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.st-list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface); text-align: left; font: inherit; color: var(--navy-800); cursor: pointer; }
.st-list button > span { flex: 1; min-width: 0; display: grid; }
.st-list strong { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-list em { font-style: normal; font-size: 12px; color: var(--muted); }

.st-feed { list-style: none; margin: 0; padding: 4px 18px; background: var(--surface); border-radius: 22px; }
.st-feed li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.st-feed li:last-child { border-bottom: 0; }
.st-feed__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--sky-100); color: var(--navy-800); }
.st-feed .is-note .st-feed__icon { background: var(--success-bg); color: var(--success); }
.st-feed .is-absence .st-feed__icon { background: var(--warning-bg); color: var(--warning); }
.st-feed li > div { display: grid; gap: 1px; min-width: 0; }
.st-feed strong { font-size: 14.5px; font-weight: 600; }
.st-feed span { font-size: 13px; color: var(--ink-2); }
.st-feed em { font-style: normal; font-size: 12px; color: var(--muted); }

.st-empty { display: grid; justify-items: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.st-empty .icon { width: 34px; height: 34px; color: var(--sky-400); }
.st-empty--page { min-height: 55vh; align-content: center; }
.st-empty--page h1 { font-size: 20px; color: var(--navy-900); }
.st-article { padding: 20px; margin-top: 8px; }
.st-article .article__cover { border-radius: 16px; }
.st-announce { margin-top: 8px; display: grid; gap: 8px; }
.st-announce h1 { font-size: 22px; color: var(--navy-900); }
.st-announce__date { font-size: 13px; color: var(--muted); }
.st-announce__body { font-size: 15.5px; line-height: 1.7; color: var(--ink); }

/* Feuilles (bottom sheets) */
dialog.sheet { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: flex-end; justify-content: center; }
dialog.sheet::backdrop { background: rgba(10, 28, 51, 0); transition: background 220ms var(--ease); }
dialog.sheet.is-open::backdrop { background: rgba(10, 28, 51, .5); }
.sheet__panel { width: min(480px, 100%); max-height: 78dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 28px 28px 0 0; padding: 8px 18px calc(18px + var(--safe-b)); transform: translateY(100%); transition: transform 220ms var(--ease); box-shadow: 0 -20px 50px -20px rgba(14, 36, 64, .4); }
.sheet--tall .sheet__panel { height: 86dvh; max-height: 86dvh; }
dialog.sheet.is-open .sheet__panel { transform: none; }
.sheet__grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 4px auto 10px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet__head h2 { font-size: 19px; font-weight: 600; color: var(--navy-900); }
.sheet__close { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.sheet__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; overscroll-behavior: contain; }
.sheet__tools { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.nt-list, .th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nt, .th { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border: 0; border-radius: 18px; background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.nt.is-unread { background: #fff; box-shadow: inset 3px 0 0 var(--sky-500); }
.nt__icon, .th__icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--sky-100); color: var(--navy-800); }
.th__icon--signalement { background: var(--danger-bg); color: var(--danger); }
.nt__body, .th__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nt__body strong, .th__body strong { font-size: 14.5px; font-weight: 600; }
.nt.is-unread strong { color: var(--navy-900); }
.nt__body span { font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nt__body em, .th__body span { font-style: normal; font-size: 12px; color: var(--muted); }
.th__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th__dot { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; align-self: center; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-head strong { font-size: 15px; font-weight: 600; }
.chat-st { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.bubble-st { max-width: 84%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface); align-self: flex-start; }
.bubble-st.is-mine { align-self: flex-end; background: var(--navy-800); color: #fff; border-radius: 18px 18px 6px 18px; }
.bubble-st p { font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.bubble-st time { display: block; margin-top: 4px; font-size: 11px; opacity: .65; }
.chat-compose { display: grid; gap: 8px; }
.chat-compose__row { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea { flex: 1; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 18px; resize: none; font: inherit; font-size: 15px; background: var(--surface); }
.chat-compose textarea:focus { outline: none; border-color: var(--navy-700); }
.chat-send { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--navy-800); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; }
.seg__opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border-radius: var(--pill); font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg__opt input:checked + span { background: var(--navy-800); color: #fff; }
.seg__opt input[value="signalement"]:checked + span { background: var(--danger); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--sky-500); }

/* Ma classe */
.st-classhead { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 20px; border-radius: 26px; background: var(--navy-800); color: #fff; margin-top: 4px; }
.st-classhead::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(169, 203, 239, .12); }
.st-classhead p { font-size: 13px; opacity: .75; }
.st-classhead h1 { font-size: 28px; font-weight: 600; line-height: 1.1; margin: 2px 0 4px; }
.st-classhead > div > span { font-size: 13px; opacity: .85; }
.st-classhead__stats { display: flex; gap: 8px; align-self: start; position: relative; z-index: 1; }
.st-classhead__stats span { display: grid; justify-items: center; min-width: 58px; padding: 8px 6px; border-radius: 16px; background: rgba(255, 255, 255, .12); font-size: 11.5px; opacity: .95; }
.st-classhead__stats strong { font-size: 19px; font-weight: 600; }
.st-classhead__main { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9 !important; position: relative; z-index: 1; }
.st-tabs { margin: 16px 0 4px; grid-template-columns: repeat(3, 1fr); }
.st-tabs .seg__opt span { font-size: 13px; min-height: 40px; padding: 0 4px; text-align: center; line-height: 1.15; }
.st-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 16px; }
.st-days button { display: grid; justify-items: center; gap: 2px; padding: 9px 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink-2); font: inherit; cursor: pointer; }
.st-days span { font-size: 11.5px; }
.st-days strong { font-size: 17px; font-weight: 600; }
.st-days .is-today { box-shadow: inset 0 0 0 2px var(--sky-400); }
.st-days .is-empty { opacity: .55; }
.st-days [aria-selected="true"] { background: var(--navy-800); color: #fff; opacity: 1; }
.st-tt { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-tt__row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: stretch; }
.st-tt__time { display: grid; align-content: space-between; padding: 12px 0; font-variant-numeric: tabular-nums; }
.st-tt__time strong { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.st-tt__time span { font-size: 12px; color: var(--muted); }
.st-tt__card { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--sky-100); }
.st-tt__card strong { font-size: 15.5px; font-weight: 600; color: var(--navy-900); }
.st-tt__card > span:not(.st-tt__badge) { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.st-tt__card em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.st-tt__card.is-live { background: var(--navy-800); }
.st-tt__card.is-live strong, .st-tt__card.is-live > span:not(.st-tt__badge) { color: #fff; }
.st-tt__card.is-cancelled { background: var(--surface); border: 1.5px dashed var(--line-strong); }
.st-tt__card.is-cancelled strong { text-decoration: line-through; color: var(--muted); }
.st-tt__card.is-changed { background: var(--warning-bg); }
.st-tt__badge { justify-self: start; padding: 2px 9px; border-radius: var(--pill); font-size: 11.5px; font-weight: 600; background: var(--danger-bg); color: var(--danger); }
.st-tt__card.is-changed .st-tt__badge { background: #fff; color: var(--warning); }
.st-tt__badge.is-live { background: var(--sky-300); color: var(--navy-900); }
.st-search { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 16px; min-height: 48px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.st-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15px; min-width: 0; }
.st-search input:focus { outline: none; }
.st-count { font-size: 13px; color: var(--muted); margin: 12px 2px 8px; }
.st-people { list-style: none; margin: 0; padding: 4px 16px; background: var(--surface); border-radius: 22px; }
.st-people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.st-people li:last-child { border-bottom: 0; }
.st-people li > span:not(.tag) { flex: 1; min-width: 0; }
.st-people strong { font-size: 14.5px; font-weight: 600; }
.st-people .is-me strong { color: var(--navy-700); }
.st-people__avatar { width: 40px; height: 40px; font-size: 14px; background: var(--sky-200); color: var(--navy-800); }
.st-teachers { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.st-teacher { display: flex; align-items: center; gap: 12px; }
.st-teacher strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--navy-900); }
.st-main-tag { display: inline-block; margin-top: 3px; padding: 2px 9px; border-radius: var(--pill); background: var(--sky-100); color: var(--navy-700); font-size: 11.5px; font-weight: 600; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.st-chips span { padding: 5px 12px; border-radius: var(--pill); background: var(--bg); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.st-report { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1.5px solid var(--danger); border-radius: var(--pill); background: transparent; color: var(--danger); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.st-report:active { background: var(--danger-bg); }

/* Examens et devoirs */
.st-pagehead { margin: 4px 2px 0; }
.st-pagehead h1 { font-size: 24px; font-weight: 600; color: var(--navy-900); line-height: 1.15; }
.st-pagehead p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.st-mt { margin-top: 16px; }
.st-card--muted .icon { display: block; margin: 0 auto 8px; opacity: .7; }
.st-exams { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.st-exam { width: 100%; display: grid; gap: 4px; padding: 16px 18px; border: 0; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.st-exam:active { transform: scale(.99); }
.st-exam > strong, .st-exam__main > strong { font-size: 16.5px; font-weight: 600; color: var(--navy-900); line-height: 1.25; }
.st-exam--session { background: var(--navy-800); color: rgba(255, 255, 255, .85); }
.st-exam--session > strong { color: #fff; }
.st-exam__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.st-exam__tag { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 10px; border-radius: var(--pill); background: var(--sky-100); color: var(--navy-700); font-size: 11.5px; font-weight: 600; }
.st-exam--session .st-exam__tag { background: rgba(255, 255, 255, .14); color: #fff; }
.st-exam__when { font-size: 12px; font-weight: 600; color: var(--warning); white-space: nowrap; }
.st-exam--session .st-exam__when { color: var(--sky-300); }
.st-exam__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; }
.st-exam__more { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: #fff; }
.st-unplanned { display: inline-block; padding: 2px 9px; border-radius: var(--pill); background: var(--warning-bg); color: var(--warning); font-size: 12px; font-weight: 600; }
.st-exam--past { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.st-exam__main { display: grid; gap: 4px; min-width: 0; }
.st-exam__rank { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--navy-700); }
.st-exam__avg { display: grid; justify-items: center; min-width: 76px; padding: 10px 8px; border-radius: 18px; background: var(--bg); }
.st-exam__avg strong { font-size: 22px; font-weight: 600; line-height: 1; }
.st-exam__avg small { font-size: 11.5px; color: var(--muted); }
.st-exam__avg em { font-style: normal; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.is-good, .st-exam__avg.is-good strong { color: var(--success); }
.is-low, .st-exam__avg.is-low strong { color: var(--danger); }
.st-exam__avg.is-good { background: var(--success-bg); }
.st-exam__avg.is-low { background: var(--danger-bg); }

.st-sheet-intro { display: grid; gap: 6px; margin-bottom: 14px; }
.st-sheet-intro p { font-size: 14px; color: var(--ink-2); }
.st-seat { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy-800) !important; }
.st-h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--navy-900); margin: 18px 2px 8px; }
.st-papers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-paper { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.st-paper__time { display: grid; align-content: center; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.st-paper__time strong { font-size: 14px; color: var(--navy-900); }
.st-paper__body { display: grid; gap: 2px; min-width: 0; }
.st-paper__body strong { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.st-paper__body span { font-size: 12.5px; color: var(--muted); }
.st-info { display: grid; margin: 0; padding: 4px 16px; border-radius: 20px; background: var(--surface); }
.st-info div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-info div:last-child { border-bottom: 0; }
.st-info dt { color: var(--muted); }
.st-info dd { margin: 0; font-weight: 600; color: var(--navy-900); text-align: right; }

.st-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.st-sort { display: flex; gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); }
.st-sort button, .st-filters button { border: 0; border-radius: var(--pill); background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.st-sort button[aria-pressed="true"] { background: var(--navy-800); color: #fff; }
.st-filters { display: flex; gap: 6px; margin: 10px -18px 0; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; }
.st-filters::-webkit-scrollbar { display: none; }
.st-filters button { background: var(--surface); border: 1px solid var(--line); }
.st-filters button[aria-pressed="true"] { background: var(--sky-200); border-color: var(--sky-300); color: var(--navy-900); font-weight: 600; }
.st-count strong { font-weight: 600; }
.st-avg { font-size: 13px; font-weight: 600; }
.st-grades { list-style: none; margin: 0; padding: 2px 16px; border-radius: 22px; background: var(--surface); }
.st-grade { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.st-grade:last-child { border-bottom: 0; }
.st-grade__dot { width: 8px; height: 34px; border-radius: 4px; }
.st-grade__body { display: grid; gap: 2px; min-width: 0; }
.st-grade__body strong { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.st-grade__body span { font-size: 13px; color: var(--ink-2); }
.st-grade__body em { font-style: normal; font-size: 12px; color: var(--muted); }
.st-grade__body q { font-size: 12.5px; font-style: italic; color: var(--ink-2); quotes: "« " " »"; }
.st-grade__score { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.st-grade__score strong { font-size: 19px; font-weight: 600; }
.st-grade__score small { font-size: 12px; color: var(--muted); }
.st-grade__score.is-absent { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 3px 9px; border-radius: var(--pill); background: var(--bg); }
.st-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: 22px; background: var(--surface); }
.st-result__avg { display: grid; justify-items: center; width: 104px; padding: 14px 6px; border-radius: 20px; background: var(--bg); }
.st-result__avg strong { font-size: 30px; font-weight: 600; line-height: 1; }
.st-result__avg small { font-size: 12px; color: var(--muted); }
.st-result__avg span { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; }
.st-result__avg.is-good { background: var(--success-bg); }
.st-result__avg.is-low { background: var(--danger-bg); }
.st-result dl { margin: 0; display: grid; gap: 8px; }
.st-result dt { font-size: 12px; color: var(--muted); }
.st-result dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--navy-900); }
.sheet .st-chips span { background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* Profil élève */
.st-profile { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; padding: 26px 20px 20px; border-radius: 26px; background: var(--navy-800); color: #fff; margin-top: 4px; }
.st-profile::before { content: ""; position: absolute; left: -50px; top: -70px; width: 190px; height: 190px; border-radius: 50%; border: 24px solid rgba(169, 203, 239, .1); }
.st-profile__photo { position: relative; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.st-profile__avatar { width: 92px; height: 92px; font-size: 30px; background: var(--sky-300); color: var(--navy-900); }
.st-profile h1 { position: relative; font-size: 22px; font-weight: 600; margin-top: 12px; line-height: 1.2; }
.st-profile > p { font-size: 13.5px; opacity: .8; margin-top: 2px; }
.st-profile__stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 18px; }
.st-profile__stats span { display: grid; gap: 2px; padding: 12px 8px; border-radius: 18px; background: rgba(255, 255, 255, .1); font-size: 11.5px; opacity: .95; }
.st-profile__stats strong { font-size: 24px; font-weight: 600; line-height: 1.1; color: #fff; }
.st-profile__stats strong.is-good { color: #8FE0B0; }
.st-profile__stats strong.is-low { color: #FFB4AB; }
.st-profile__stats sup { font-size: 12px; }
.st-apprs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-appr { padding: 14px 16px; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.st-appr.is-general { background: var(--sky-100); box-shadow: none; }
.st-appr__head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--navy-900); }
.st-appr__head .st-grade__dot { height: 16px; }
.st-appr blockquote { margin: 8px 0 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.st-appr blockquote::before { content: "« "; color: var(--muted); }
.st-appr blockquote::after { content: " »"; color: var(--muted); }
.st-appr__meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.st-more { font-size: 14px; }
.st-actions { display: grid; gap: 10px; }
.st-action { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); color: var(--navy-800); font: inherit; text-align: left; cursor: pointer; }
.st-action > .icon:first-child { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 14px; background: var(--sky-100); }
.st-action span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.st-action strong { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.st-action em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.st-action--danger > .icon:first-child { background: var(--danger-bg); color: var(--danger); }
.st-action--danger strong { color: var(--danger); }
.st-logout { width: 100%; margin-top: 22px; }
.st-form { display: grid; gap: 14px; }
.st-form .field + .field { margin-top: 0; }
.st-form__hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.st-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.st-textarea { min-height: 120px; padding: 12px 16px; resize: none; font: inherit; }
.st-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-kinds legend { font-weight: 500; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; padding: 0; }
.st-kinds label { position: relative; }
.st-kinds input { position: absolute; opacity: 0; inset: 0; }
.st-kinds span { display: inline-flex; padding: 8px 14px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line-strong); font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.st-kinds input:checked + span { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.st-kinds input:focus-visible + span { outline: 3px solid var(--sky-500); outline-offset: 2px; }
@media (max-width: 340px) { .st-form__row { grid-template-columns: 1fr; } }

/* Espace parent */
.st-top .st-brand { flex: 1; }
.st-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 132px; height: 42px; padding: 0 10px 0 4px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--navy-800); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.st-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-child[disabled] { cursor: default; opacity: 1; }
.st-child__avatar { width: 32px; height: 32px; font-size: 12px; background: var(--sky-200); color: var(--navy-800); }
.st-child .icon { flex: none; color: var(--muted); }
.st-tabs--2 { grid-template-columns: repeat(2, 1fr); }

.st-picker .st-main { padding-bottom: calc(40px + var(--safe-b)); }
.st-kids { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.st-kid { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid transparent; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.st-kid:active { transform: scale(.99); }
.st-kid.is-current { border-color: var(--sky-400); }
.st-kid__avatar { width: 54px; height: 54px; font-size: 18px; background: var(--sky-200); color: var(--navy-800); }
.st-kid__body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.st-kid__body strong { font-size: 16.5px; font-weight: 600; color: var(--navy-900); }
.st-kid__body span { font-size: 13.5px; }
.st-kid__body em { font-style: normal; font-size: 12px; color: var(--muted); }
.st-picker__hint { margin: 14px 2px 0; font-size: 12.5px; color: var(--muted); text-align: center; }

.st-fee { margin-top: 12px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); border-left: 5px solid var(--sky-400); }
.st-fee__main { display: flex; gap: 12px; align-items: flex-start; }
.st-fee__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--sky-100); color: var(--navy-700); }
.st-fee__main > div { display: grid; gap: 2px; min-width: 0; }
.st-fee__kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.st-fee__main strong { font-size: 16px; font-weight: 600; color: var(--navy-900); }
.st-fee__main span { font-size: 13.5px; color: var(--ink-2); }
.st-fee__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 14px; border: 0; border-radius: var(--pill); background: var(--navy-800); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.st-fee.is-near { background: var(--warning-bg); border-left-color: #E08A00; }
.st-fee.is-near .st-fee__icon { background: #FFE1A8; color: var(--warning); }
.st-fee.is-near strong { color: var(--warning); }
.st-fee.is-near .st-fee__btn { background: #C77700; }
.st-fee.is-late { background: var(--danger-bg); border-left-color: var(--danger); }
.st-fee.is-late .st-fee__icon { background: #F8C9C4; color: var(--danger); }
.st-fee.is-late strong { color: var(--danger); }
.st-fee.is-late .st-fee__btn { background: var(--danger); }
.st-fee.is-ok .st-fee__icon { background: var(--success-bg); color: var(--success); }
.st-fee.is-ok { border-left-color: var(--success); }
.st-fee__pending { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(19, 52, 92, .1); display: grid; gap: 6px; }
.st-fee__pending li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); }
.st-fee__pending li > span { display: flex; align-items: flex-start; gap: 6px; }
.st-fee__pending .link-btn { min-height: 32px; font-size: 13px; color: var(--danger); flex: none; }

.st-pay { display: grid; gap: 14px; }
.st-pay .field + .field { margin-top: 0; }
.st-pay__who { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy-800); }
.st-pay__months { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); font-size: 14.5px; font-weight: 500; }
.st-stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--bg); }
.st-stepper button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface); color: var(--navy-800); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 1px 0 var(--line); }
.st-stepper button:disabled { opacity: .35; cursor: default; }
.st-stepper output { min-width: 64px; text-align: center; font-weight: 600; color: var(--navy-900); }
.st-pay__lines { list-style: none; margin: 0; padding: 4px 14px; border-radius: 18px; background: var(--surface); }
.st-pay__lines li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-pay__lines li:last-child { border-bottom: 0; }
.st-pay__lines li > span { display: grid; }
.st-pay__lines em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.st-pay__lines li.is-late em { color: var(--danger); font-weight: 600; }
.st-pay__lines li.is-advance em { color: var(--success); font-weight: 600; }
.st-pay__lines strong { font-weight: 600; white-space: nowrap; }
.st-pay__total { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; font-size: 14px; color: var(--muted); }
.st-pay__total strong { font-size: 22px; font-weight: 600; color: var(--navy-900); }
.st-pay__net { display: flex; align-items: center; gap: 6px; min-height: 20px; font-size: 13px; color: var(--muted); }
.st-pay__net.is-mtn { color: #8A6A00; font-weight: 600; }
.st-pay__net.is-airtel { color: #C0181F; font-weight: 600; }
.st-pay__done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 8px 0; }
.st-pay__done > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-bg); color: var(--success); }
.st-pay__done > span .icon { width: 30px; height: 30px; }
.st-pay__done h3 { font-size: 19px; font-weight: 600; color: var(--navy-900); }
.st-pay__done p { font-size: 14px; color: var(--ink-2); }
.st-pay__done .btn { margin-top: 10px; }

/* Paiements mobile money à confirmer (admin) */
.mm-panel { margin-bottom: 20px; border-left: 4px solid #E08A00; }
.mm-panel h2 { display: flex; align-items: center; gap: 8px; }
.mm-panel .count { margin-left: 4px; padding: 1px 9px; border-radius: var(--pill); background: var(--warning-bg); color: var(--warning); font-size: 13px; }
.mm-hint { font-size: 13.5px; color: var(--muted); margin: -4px 0 12px; }
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.mm__body { display: grid; gap: 2px; min-width: 0; }
.mm__body strong { font-size: 15px; font-weight: 600; }
.mm__body strong span { font-weight: 400; color: var(--muted); font-size: 13px; }
.mm__body > span { font-size: 13.5px; color: var(--ink-2); }
.mm__body em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.mm__amount { font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm__actions { display: flex; gap: 8px; }
@media (max-width: 700px) {
  .mm { grid-template-columns: minmax(0, 1fr) auto; }
  .mm__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ===================== Espace enseignant ===================== */
.st-nav__brand { display: none; }
.st-child--class { padding-left: 6px; }
.st-child__class { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-200); color: var(--navy-800); flex: none; }
.tc-classbadge { flex: none; display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 8px; border-radius: 18px; background: var(--navy-800); color: #fff; font-weight: 600; font-size: 14px; }
.tc-muted { color: var(--muted); font-style: normal; font-size: 13.5px; }
.tc-grid { display: grid; gap: 0 24px; }
.tc-col { min-width: 0; }

.tc-alert { margin-top: 22px; padding: 16px; border-radius: 22px; background: var(--warning-bg); border: 1px solid #F3D9A4; }
.tc-alert h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--warning); margin-bottom: 10px; }
.tc-alert__empty { font-size: 13.5px; color: var(--ink-2); }
.tc-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-next li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface); }
.tc-next__when { display: grid; min-width: 74px; font-variant-numeric: tabular-nums; }
.tc-next__when strong { font-size: 15px; color: var(--navy-900); font-weight: 600; }
.tc-next__when em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tc-next__body { display: grid; gap: 1px; min-width: 0; }
.tc-next__body strong { font-size: 14.5px; font-weight: 600; color: var(--navy-900); }
.tc-next__body span { font-size: 12.5px; color: var(--ink-2); }
.tc-next__body em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--warning); }
.tc-next li.is-cancelled strong { text-decoration: line-through; color: var(--muted); }
.tc-next li.is-cancelled em { color: var(--danger); }

.tc-classcard { position: relative; overflow: hidden; padding: 20px; border-radius: 26px; background: var(--navy-800); color: #fff; box-shadow: 0 18px 40px -22px rgba(19, 52, 92, .8); }
.tc-classcard::after { content: ""; position: absolute; right: -40px; top: -60px; width: 170px; height: 170px; border-radius: 50%; border: 22px solid rgba(169, 203, 239, .12); }
.tc-classcard__top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.tc-classcard p { font-size: 13px; opacity: .75; }
.tc-classcard h2 { font-size: 28px; font-weight: 600; line-height: 1.1; margin: 2px 0 4px; }
.tc-classcard__top > div > span { font-size: 13px; opacity: .85; }
.tc-classcard__subjects { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tc-classcard__subjects span { padding: 4px 11px; border-radius: var(--pill); background: rgba(255, 255, 255, .12); font-size: 12.5px; }
.tc-classcard__subjects .is-main { background: var(--sky-300); color: var(--navy-900); font-weight: 600; }
.tc-shortcuts { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tc-shortcuts button { display: flex; align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 18px; background: var(--surface); color: var(--navy-800); font: inherit; text-align: left; cursor: pointer; }
.tc-shortcuts button > .icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--sky-100); }
.tc-shortcuts span { display: grid; min-width: 0; }
.tc-shortcuts strong { font-size: 14.5px; font-weight: 600; color: var(--navy-900); }
.tc-shortcuts em { font-style: normal; font-size: 12px; color: var(--muted); }
.tc-todo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tc-todo button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 0 var(--line); color: var(--navy-800); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; }
.tc-todo button span { flex: 1; }
.tc-todo .is-late { background: var(--danger-bg); color: var(--danger); }
.tc-todo .is-near { background: var(--warning-bg); color: var(--warning); }
.st-tt__card.is-other { background: var(--surface); box-shadow: 0 1px 0 var(--line); }

.tc-best { list-style: none; margin: 0; padding: 4px 14px; border-radius: 22px; background: var(--surface); }
.tc-best li + li { border-top: 1px solid var(--line); }
.tc-best button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.tc-best__rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sky-100); color: var(--navy-800); font-size: 13px; font-weight: 600; flex: none; }
.tc-best li:first-child .tc-best__rank { background: #F5C451; color: #5A3E00; }
.tc-best__avatar { width: 38px; height: 38px; font-size: 13px; background: var(--sky-200); color: var(--navy-800); }
.tc-best__name { flex: 1; display: grid; min-width: 0; }
.tc-best__name strong { font-size: 14.5px; font-weight: 600; }
.tc-best__name em { font-style: normal; font-size: 12px; color: var(--muted); }
.tc-best__avg { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-best__avg small { font-size: 11px; color: var(--muted); margin-left: 2px; }

.tc-avgs { display: grid; gap: 12px; }
.tc-avgs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.tc-avgs__head strong { font-size: 24px; font-weight: 600; }
.tc-avgs__head small { font-size: 12px; color: var(--muted); }
.tc-bar { display: grid; grid-template-columns: minmax(90px, 36%) 1fr 44px; align-items: center; gap: 10px; font-size: 13.5px; }
.tc-bar__label { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-bar__label i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.tc-bar__track { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.tc-bar__track span { display: block; height: 100%; border-radius: 4px; background: var(--sky-400); }
.tc-bar__track span.is-good { background: var(--success); }
.tc-bar__track span.is-low { background: var(--danger); }
.tc-bar__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-bar__value em { font-style: normal; color: var(--muted); font-weight: 400; }

.tc-students { list-style: none; margin: 0; padding: 2px 14px; border-radius: 22px; background: var(--surface); }
.tc-student { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tc-student:last-child { border-bottom: 0; }
.tc-student__who { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.tc-student__who > span { display: grid; min-width: 0; }
.tc-student__who strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-student__who em { font-style: normal; font-size: 12px; color: var(--muted); }
.tc-student__who b { font-weight: 600; }
.tc-absent-btn { flex: none; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--danger); border-radius: var(--pill); background: transparent; color: var(--danger); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tc-absent-btn:active { background: var(--danger-bg); }
.tc-student.is-absent .tc-student__who strong { color: var(--danger); }
.tc-abs-tag { flex: none; padding: 5px 11px; border-radius: var(--pill); background: var(--danger); color: #fff; font-size: 12px; font-weight: 600; }
.tc-undo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg); color: var(--muted); cursor: pointer; }
.tc-abs-who { display: flex; align-items: center; gap: 12px; font-size: 16px; }

.tc-profile__abs { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; opacity: .85; }
.tc-chart { position: relative; margin: 0; padding: 14px 12px 8px; }
.tc-chart figcaption { font-size: 12.5px; color: var(--muted); margin: 0 4px 6px; }
.tc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.tc-chart__grid { stroke: var(--line); stroke-width: 1; }
.tc-chart__grid.is-pass { stroke: var(--line-strong); stroke-dasharray: 4 4; }
.tc-chart__tick { font-size: 11px; fill: var(--muted); text-anchor: end; }
.tc-chart__line { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tc-chart__dot { fill: var(--navy-700); stroke: var(--surface); stroke-width: 2; }
.tc-chart__hit { fill: transparent; cursor: pointer; }
.tc-chart__pt:focus { outline: none; }
.tc-chart__pt:focus .tc-chart__dot, .tc-chart__pt:hover .tc-chart__dot { r: 7; }
.tc-chart__label { font-size: 12px; font-weight: 600; fill: var(--navy-900); }
.tc-chart__tip { position: absolute; transform: translate(-50%, -100%); max-width: 180px; padding: 6px 10px; border-radius: 10px; background: var(--navy-900); color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; text-align: center; }

.tc-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tc-pagehead .btn { flex: none; }
.tc-work { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.tc-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.tc-item__dot { flex: none; width: 8px; align-self: stretch; border-radius: 4px; }
.tc-item__body { flex: 1; display: grid; gap: 3px; min-width: 0; }
.tc-item__body > strong { font-size: 15.5px; font-weight: 600; color: var(--navy-900); }
.tc-item__body > span { font-size: 13px; color: var(--ink-2); }
.tc-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; font-size: 12.5px !important; color: var(--muted) !important; }
.tc-item__warn { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 12.5px; color: var(--danger); }
.tc-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--pill); background: var(--bg); color: var(--ink-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tc-pill.is-open, .tc-pill.is-draft { background: var(--sky-100); color: var(--navy-700); }
.tc-pill.is-todo, .tc-pill.is-returned { background: var(--warning-bg); color: var(--warning); }
.tc-pill.is-done, .tc-pill.is-validated, .tc-pill.is-published { background: var(--success-bg); color: var(--success); }
.tc-pill.is-submitted { background: #EDE7FB; color: #5B3FA8; }
.tc-pill.is-missing { background: var(--danger-bg); color: var(--danger); }
.tc-pill.is-closed { background: var(--bg); color: var(--muted); }

.tc-hw h1 { font-size: 20px; font-weight: 600; color: var(--navy-900); margin: 8px 0 4px; line-height: 1.25; }
.tc-hw__due { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tc-hw__text, .st-hw-text { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.tc-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.tc-files button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--navy-800); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.tc-files span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-files em { font-style: normal; font-size: 12px; color: var(--muted); }
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 14px 0; }
.tc-stats span { display: grid; gap: 1px; padding: 10px 12px; border-radius: 16px; background: var(--surface); font-size: 12px; color: var(--muted); }
.tc-stats strong { font-size: 19px; font-weight: 600; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.tc-score { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-score small { font-size: 11px; color: var(--muted); }
.tc-rendu__when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.tc-grade-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tc-photo-edit { display: flex; align-items: center; gap: 14px; }
.tc-photo-edit .st-profile__avatar { width: 72px; height: 72px; font-size: 24px; object-fit: cover; }

.tc-gridwrap { overflow-x: auto; border-radius: 20px; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.tc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tc-table th, .tc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tc-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; background: var(--sky-50); }
.tc-table tbody tr:last-child > * { border-bottom: 0; }
.tc-table__who { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.tc-table__who > span { display: grid; }
.tc-table__who em { font-style: normal; font-size: 11px; color: var(--success); font-weight: 600; }
.tc-table__avatar { width: 32px; height: 32px; font-size: 12px; background: var(--sky-200); color: var(--navy-800); }
.tc-score-in { width: 84px; min-height: 40px; padding: 0 10px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.tc-score-in[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
.tc-abs-in { width: 20px; height: 20px; accent-color: var(--danger); }
.tc-comment-in { min-height: 40px; min-width: 160px; }
.tc-gridbar { position: sticky; bottom: calc(96px + var(--safe-b)); z-index: 5; display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 10px; border-radius: 20px; background: rgba(244, 248, 253, .94); backdrop-filter: blur(8px); }
@media (max-width: 560px) {
  .tc-table__comment { display: none; }
  .tc-table th, .tc-table td { padding: 8px 6px; }
  .tc-gridbar .btn { flex: 1; min-width: 0; padding: 0 10px; white-space: normal; line-height: 1.2; }
  .tc-gridbar .btn .icon { display: none; }
  .tc-stats strong { font-size: 17px; }
}

.st-exams--tight { margin-top: 0; }
.st-hw-state { padding: 2px 9px; border-radius: var(--pill); background: var(--sky-100); color: var(--navy-700); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.st-hw-state.is-sent { background: #EDE7FB; color: #5B3FA8; }
.st-hw-state.is-done { background: var(--success-bg); color: var(--success); }
.st-hw-state.is-late { background: var(--danger-bg); color: var(--danger); }
.st-hw-grade { margin-top: 12px; display: grid; gap: 4px; background: var(--success-bg); }
.st-hw-grade strong { font-size: 20px; font-weight: 600; color: var(--success); }
.st-hw-grade q { font-size: 13.5px; font-style: italic; color: var(--ink-2); quotes: "« " " »"; }
.st-h2 .link-btn { min-height: 32px; font-size: 13.5px; }

/* Version bureau : barre latérale comme l'administration */
@media (min-width: 960px) {
  .st-app--wide { max-width: none; display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto 1fr; box-shadow: none; }
  .st-app--wide .st-top { grid-column: 2; grid-row: 1; padding: 18px 36px; }
  .st-app--wide .st-top .st-brand { visibility: hidden; }
  .st-app--wide .st-main { grid-column: 2; grid-row: 2; width: 100%; max-width: 1180px; padding: 6px 36px 48px; }
  .st-app--wide .st-nav { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; left: auto; bottom: auto; transform: none; width: auto; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; border-radius: 0 28px 28px 0; background: var(--sky-300); box-shadow: none; }
  .st-app--wide .st-nav__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; }
  .st-app--wide .st-nav__brand img { width: 44px; height: 44px; object-fit: contain; }
  .st-app--wide .st-nav__brand strong { display: block; font-size: 19px; font-weight: 600; color: var(--navy-900); }
  .st-app--wide .st-nav__brand span { font-size: 12px; color: var(--navy-800); opacity: .8; }
  .st-app--wide .st-nav__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--navy-900); font-size: 15px; }
  .st-app--wide .st-nav__item:hover { background: rgba(255, 255, 255, .45); }
  .st-app--wide .st-nav__item[aria-current="page"] { background: var(--surface); color: var(--navy-900); font-weight: 600; }
  .st-app--wide .tc-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  .st-app--wide .tc-gridbar { bottom: 16px; }
  .st-app--wide .st-hello h1 { font-size: 30px; }
}