/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — dashboards (student · teacher · administration)
   The school's warm identity in an application shell: calm surfaces, crimson
   accents, gold highlights, El Messiri headings. Fast by design: no library,
   CSS-driven motion that finishes in under 400 ms, content-visibility for
   long tables, and a dark theme that follows the system or the toggle.
   ───────────────────────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── App tokens ────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    --app-bg: #F6F1EA;
    --app-surface: #FFFFFF;
    --app-surface-2: #FCF8F3;
    --app-sunken: #F2EAE0;
    --app-hover: rgb(60 30 24 / 0.045);
    --app-border: rgb(60 30 24 / 0.08);
    --app-border-strong: rgb(60 30 24 / 0.15);
    --app-text: #2B1D1B;
    --app-muted: #6B5752;
    --app-faint: #9A8680;

    --app-accent: #D7141F;
    --app-accent-strong: #B5121C;
    --app-accent-soft: #FFF0EB;
    --app-gold: #E9B23A;
    --app-gold-soft: #FFF4D6;
    --app-gold-text: #8E620C;

    --app-success: #15803D;
    --app-success-soft: #E8F6EE;
    --app-warn: #B45309;
    --app-warn-soft: #FFF4E0;
    --app-danger: #D92D20;
    --app-danger-soft: #FEEFEE;
    --app-info: #2563EB;
    --app-info-soft: #EDF3FF;

    /* Data colours: brand-led, with a cool pair for contrast in charts. */
    --c-1: #D7141F;
    --c-2: #E9B23A;
    --c-3: #0F8F7E;
    --c-4: #6D5BD0;
    --c-5: #2F7DE1;
    --c-6: #B7A69F;

    --app-shadow-sm: 0 1px 2px rgb(60 30 24 / 0.05);
    --app-shadow: 0 1px 2px rgb(60 30 24 / 0.04), 0 10px 28px -18px rgb(120 32 20 / 0.22);
    --app-shadow-lg: 0 2px 6px rgb(60 30 24 / 0.05), 0 30px 70px -30px rgb(120 32 20 / 0.35);
    --app-ring: 0 0 0 3px rgb(215 20 31 / 0.16);

    --sidebar-w: 17.25rem;
    --sidebar-w-collapsed: 5.25rem;
    --topbar-h: 4.25rem;
    --app-radius: 18px;
    --app-radius-sm: 12px;
    --app-radius-xs: 9px;
    --app-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
    --app-pad: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #120E0C;
    --app-surface: #1B1513;
    --app-surface-2: #211A17;
    --app-sunken: #0E0A09;
    --app-hover: rgb(255 240 230 / 0.05);
    --app-border: rgb(255 240 230 / 0.08);
    --app-border-strong: rgb(255 240 230 / 0.15);
    --app-text: #F4ECE7;
    --app-muted: #BCA9A2;
    --app-faint: #8C7872;
    --app-accent: #F2474D;
    --app-accent-strong: #F2474D;
    --app-accent-soft: rgb(242 71 77 / 0.14);
    --app-gold-soft: rgb(233 178 58 / 0.14);
    --app-gold-text: #F1C45D;
    --app-success: #34C27A;
    --app-success-soft: rgb(52 194 122 / 0.13);
    --app-warn: #F0A340;
    --app-warn-soft: rgb(240 163 64 / 0.13);
    --app-danger: #FF6B61;
    --app-danger-soft: rgb(255 107 97 / 0.13);
    --app-info: #6EA3FF;
    --app-info-soft: rgb(110 163 255 / 0.13);
    --c-1: #F2474D;
    --c-6: #6E5C56;
    --app-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --app-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 30px -18px rgb(0 0 0 / 0.6);
    --app-shadow-lg: 0 2px 6px rgb(0 0 0 / 0.35), 0 30px 70px -30px rgb(0 0 0 / 0.75);
    --app-ring: 0 0 0 3px rgb(242 71 77 / 0.28);

    /* Base tokens the shared components read */
    --ink: #F4ECE7;
    --ink-2: #BCA9A2;
    --bg: #120E0C;
    --bg-deep: #1B1513;
    --line: rgb(255 240 230 / 0.09);
    --line-strong: rgb(255 240 230 / 0.16);
    --red-soft: rgb(242 71 77 / 0.14);
    --red-border: rgb(242 71 77 / 0.32);
    --red-mist: rgb(242 71 77 / 0.08);
    --gold-soft: rgb(233 178 58 / 0.14);
    --gold-border: rgb(233 178 58 / 0.32);
    --gold-deep: #F1C45D;
    --red-strong: #E2323A;
    --glass-solid: rgb(33 26 23 / 0.8);
  }
}

@layer shared {

  /* ── Shell ─────────────────────────────────────────────────────────────── */
  .app-body { background: var(--app-bg); color: var(--app-text); line-height: 1.7; }
  .app-body h1, .app-body h2, .app-body h3, .app-body h4 { color: var(--app-text); }
  .app-body :focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
  .app-body ::selection { background: var(--app-gold-soft); color: var(--app-text); }

  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100svh;
    transition: grid-template-columns 0.35s var(--ease-out);
  }
  :root[data-sidebar="collapsed"] .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  .app__main { min-width: 0; display: flex; flex-direction: column; }
  .app-scrim { display: none; }
  .app__content {
    flex: 1;
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding: var(--app-pad);
    padding-top: calc(var(--app-pad) * 0.75);
    outline: none;
  }

  /* ── Sidebar ───────────────────────────────────────────────────────────── */
  .app-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 100svh;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-3);
    background: var(--app-surface);
    border-inline-end: 1px solid var(--app-border);
    overflow: hidden;
  }
  .app-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-inline: var(--s-2); min-height: 3rem; }
  .app-brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; color: var(--app-text); }
  .app-brand__logo { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--app-surface), 0 6px 14px -6px rgb(181 18 28 / 0.5); }
  .app-brand__text { display: grid; line-height: 1.25; min-width: 0; }
  .app-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; white-space: nowrap; }
  .app-brand__role { font-size: var(--fs-caption); color: var(--app-accent); font-weight: 500; white-space: nowrap; }

  .app-nav { flex: 1; display: grid; align-content: start; gap: 2px; overflow-y: auto; overflow-x: hidden; padding-inline: 2px; margin-inline: -2px; scrollbar-width: thin; scrollbar-color: var(--app-border-strong) transparent; }
  .app-nav__label { margin: var(--s-4) var(--s-3) var(--s-1); color: var(--app-faint); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
  .app-nav__label:first-child { margin-top: var(--s-1); }
  .app-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 2.75rem;
    padding: 0 var(--s-3);
    border-radius: var(--app-radius-sm);
    color: var(--app-muted);
    font-size: var(--fs-small);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.18s linear, color 0.18s linear;
  }
  .app-nav__link svg { width: 1.3rem; height: 1.3rem; flex: none; transition: transform 0.3s var(--ease-out); }
  .app-nav__link:hover { background: var(--app-hover); color: var(--app-text); }
  .app-nav__link:hover svg { transform: scale(1.08); }
  .app-nav__link[aria-current="page"] {
    background: linear-gradient(to left, var(--app-accent-soft), transparent 140%);
    color: var(--app-accent-strong);
    font-weight: 600;
  }
  .app-nav__link[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: 0.55rem;
    inset-inline-start: -0.75rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(to bottom, var(--app-gold), var(--app-accent));
  }
  .app-nav__text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .app-nav__badge {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--app-accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .app-nav__badge--soft { background: var(--app-gold-soft); color: var(--app-gold-text); }

  .app-sidebar__foot { display: grid; gap: var(--s-3); }
  .app-promo {
    position: relative;
    overflow: hidden;
    padding: var(--s-4);
    border-radius: var(--app-radius);
    background: linear-gradient(150deg, #C3141D, #8A0D15);
    color: #fff;
    isolation: isolate;
  }
  .app-promo::before {
    content: "";
    position: absolute;
    inset: -40% -30% auto auto;
    width: 12rem;
    aspect-ratio: 1;
    z-index: -1;
    background: repeating-conic-gradient(rgb(247 209 74 / 0.28) 0 6deg, transparent 6deg 16deg);
    -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 70%);
    mask: radial-gradient(closest-side, #000 15%, transparent 70%);
  }
  .app-promo__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
  .app-promo__text { margin-top: var(--s-1); font-size: var(--fs-caption); line-height: 1.6; color: rgb(255 255 255 / 0.85); }
  .app-promo .app-progress { margin-top: var(--s-3); --track: rgb(255 255 255 / 0.2); --bar: linear-gradient(to left, #FFE285, #E9B23A); }

  .app-user { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--app-radius-sm); border: 1px solid var(--app-border); background: var(--app-surface-2); min-width: 0; }
  .app-user__text { display: grid; min-width: 0; line-height: 1.35; }
  .app-user__name { font-weight: 600; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-user__role { color: var(--app-muted); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Collapsed sidebar: icons only, labels as tooltips */
  :root[data-sidebar="collapsed"] .app-sidebar { padding-inline: var(--s-2); }
  :root[data-sidebar="collapsed"] .app-sidebar__head { flex-direction: column; padding-inline: 0; }
  :root[data-sidebar="collapsed"] :is(.app-brand__text, .app-nav__text, .app-nav__label, .app-promo, .app-user__text) { display: none; }
  :root[data-sidebar="collapsed"] .app-nav__link { justify-content: center; padding: 0; }
  :root[data-sidebar="collapsed"] .app-nav__badge { position: absolute; top: 0.25rem; inset-inline-end: 0.35rem; min-width: 1.05rem; height: 1.05rem; font-size: 0.62rem; padding: 0 0.25rem; }
  :root[data-sidebar="collapsed"] .app-nav__link[aria-current="page"]::before { inset-inline-start: -0.5rem; }
  :root[data-sidebar="collapsed"] .app-user { justify-content: center; padding: var(--s-1); }
  :root[data-sidebar="collapsed"] .app-sidebar__collapse svg { transform: scaleX(-1); }

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: var(--topbar-h);
    padding: var(--s-2) var(--app-pad);
    background: color-mix(in srgb, var(--app-bg) 82%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s linear, box-shadow 0.2s linear;
  }
  .app-topbar.is-stuck { border-bottom-color: var(--app-border); box-shadow: 0 8px 24px -22px rgb(60 30 24 / 0.5); }
  .app-topbar__menu { display: none; }
  .app-topbar__title { display: grid; line-height: 1.3; min-width: 0; }
  .app-topbar__section { color: var(--app-faint); font-size: var(--fs-caption); white-space: nowrap; }
  .app-topbar__page { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-topbar__actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }

  .app-search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: min(24rem, 32vw);
    min-height: 2.6rem;
    margin-inline-start: auto;
    padding: 0 var(--s-3);
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-faint);
    font-size: var(--fs-small);
    transition: border-color 0.18s linear, box-shadow 0.25s var(--ease-out);
  }
  .app-search:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow-sm); }
  .app-search svg { width: 1.1rem; height: 1.1rem; flex: none; }
  .app-search span { flex: 1; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-search + .app-topbar__actions { margin-inline-start: 0; }
  kbd, .kbd {
    display: inline-flex;
    align-items: center;
    min-height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--app-border-strong);
    border-bottom-width: 2px;
    background: var(--app-surface-2);
    color: var(--app-muted);
    font: 500 0.7rem/1 var(--font-body);
    direction: ltr;
  }

  .app-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
    transition: color 0.18s linear, background-color 0.18s linear, transform 0.25s var(--ease-out), border-color 0.18s linear;
  }
  .app-icon-btn:hover { color: var(--app-text); border-color: var(--app-border-strong); }
  .app-icon-btn:active { transform: scale(0.94); }
  .app-icon-btn svg { width: 1.2rem; height: 1.2rem; }
  .app-icon-btn--ghost { border-color: transparent; background: transparent; }
  .app-icon-btn--ghost:hover { background: var(--app-hover); }
  .app-icon-btn--sm { width: 2.1rem; height: 2.1rem; }
  .app-icon-btn--sm svg { width: 1rem; height: 1rem; }
  .app-dot { position: absolute; top: 0.45rem; inset-inline-end: 0.5rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--app-accent); box-shadow: 0 0 0 2px var(--app-surface); }
  .app-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: dot-ping 2s var(--ease-out) infinite; }
  @keyframes dot-ping { 70%, 100% { transform: scale(2.4); opacity: 0; } }

  .theme-toggle .i-dark { display: none; }
  :root[data-theme="dark"] .theme-toggle .i-dark { display: block; }
  :root[data-theme="dark"] .theme-toggle .i-light { display: none; }

  .app-avatar-btn { display: flex; align-items: center; gap: var(--s-2); padding: 0.2rem; padding-inline-end: var(--s-2); border-radius: 999px; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); transition: border-color 0.18s linear; }
  .app-avatar-btn:hover { border-color: var(--app-border-strong); }
  .app-avatar-btn svg { width: 1rem; height: 1rem; color: var(--app-faint); }
  .app-avatar-btn__name { font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }

  /* ── Dropdown ──────────────────────────────────────────────────────────── */
  .dropdown { position: relative; }
  .dropdown__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 60;
    width: max-content;
    min-width: 13rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: var(--s-2);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
    opacity: 0;
    visibility: hidden;
    translate: 0 -6px;
    scale: 0.98;
    transform-origin: top left;
    transition: opacity 0.16s linear, translate 0.25s var(--ease-out), scale 0.25s var(--ease-out), visibility 0s linear 0.25s;
  }
  .dropdown__panel--start { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top right; }
  .dropdown.is-open > .dropdown__panel { opacity: 1; visibility: visible; translate: 0 0; scale: 1; transition-delay: 0s; }
  .dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--app-border); margin-bottom: var(--s-2); }
  .dropdown__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
  .menu-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--s-3);
    border-radius: var(--app-radius-xs);
    color: var(--app-text);
    font-size: var(--fs-small);
    text-align: start;
    transition: background-color 0.15s linear;
  }
  .menu-item:hover, .menu-item:focus-visible { background: var(--app-hover); }
  .menu-item svg { width: 1.1rem; height: 1.1rem; color: var(--app-muted); flex: none; }
  .menu-item--danger, .menu-item--danger svg { color: var(--app-danger); }
  .menu-sep { height: 1px; margin: var(--s-2) 0; background: var(--app-border); }

  .notif-list { display: grid; gap: 2px; max-height: 22rem; overflow-y: auto; width: min(22rem, calc(100vw - 2rem)); }
  .notif { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); border-radius: var(--app-radius-sm); transition: background-color 0.15s linear; }
  .notif:hover { background: var(--app-hover); }
  .notif__icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--app-accent-soft); color: var(--app-accent); }
  .notif__icon svg { width: 1.05rem; height: 1.05rem; }
  .notif__title { font-size: var(--fs-small); font-weight: 600; line-height: 1.5; }
  .notif__text { color: var(--app-muted); font-size: var(--fs-caption); line-height: 1.55; }
  .notif__time { color: var(--app-faint); font-size: 0.72rem; }
  .notif.is-unread .notif__title::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-start: 0.4rem; border-radius: 50%; background: var(--app-accent); vertical-align: middle; }

  /* ── Page head ─────────────────────────────────────────────────────────── */
  .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--app-gap); }
  .page-head__text { display: grid; gap: var(--s-1); min-width: 0; }
  .page-head__eyebrow { color: var(--app-accent); font-size: var(--fs-caption); font-weight: 600; }
  .page-head__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); line-height: 1.3; }
  .page-head__lead { color: var(--app-muted); font-size: var(--fs-small); max-width: 46rem; }
  .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

  /* Welcome banner (dashboard home) */
  .hello {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    padding: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
    border-radius: calc(var(--app-radius) + 6px);
    background:
      radial-gradient(80% 140% at 0% 0%, rgb(247 209 74 / 0.35), transparent 60%),
      linear-gradient(135deg, #C3141D 0%, #9E0F17 55%, #7A0B12 100%);
    color: #fff;
    box-shadow: 0 30px 60px -36px rgb(149 14 23 / 0.7);
  }
  .hello::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60%;
    inset-inline-end: -10%;
    width: 30rem;
    aspect-ratio: 1;
    background: repeating-conic-gradient(rgb(255 226 133 / 0.18) 0 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 12%, transparent 70%);
    mask: radial-gradient(closest-side, #000 12%, transparent 70%);
    animation: rays-spin 90s linear infinite;
  }
  .hello h1, .hello h2 { color: #fff; }
  .hello__eyebrow { color: #FFE285; font-size: var(--fs-small); font-weight: 500; }
  .hello__title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.3; margin-top: var(--s-1); }
  .hello__text { margin-top: var(--s-2); color: rgb(255 255 255 / 0.85); font-size: var(--fs-small); max-width: 38rem; }
  .hello__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
  .hello .btn--light { --btn-bg: #fff; --btn-fg: #9E0F17; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.35); }
  .hello .btn--glass { --btn-bg: rgb(255 255 255 / 0.14); --btn-fg: #fff; --btn-border: rgb(255 255 255 / 0.3); backdrop-filter: blur(10px); }
  .hello__art { width: clamp(6rem, 12vw, 10rem); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.3)); animation: float-y 6s ease-in-out infinite; }
  @keyframes float-y { 50% { translate: 0 -8px; } }

  /* ── Grid ──────────────────────────────────────────────────────────────── */
  .grid { display: grid; gap: var(--app-gap); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
  .stack { display: grid; gap: var(--app-gap); align-content: start; }
  .row { display: flex; align-items: center; gap: var(--s-2); }
  .row--between { justify-content: space-between; }
  .row--wrap { flex-wrap: wrap; }
  .mt-gap { margin-top: var(--app-gap); }
  .muted { color: var(--app-muted); }
  .faint { color: var(--app-faint); }
  .small { font-size: var(--fs-small); }
  .caption { font-size: var(--fs-caption); }
  .strong { font-weight: 600; }
  .text-success { color: var(--app-success); } .text-danger { color: var(--app-danger); } .text-warn { color: var(--app-warn); } .text-accent { color: var(--app-accent); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Panel ─────────────────────────────────────────────────────────────── */
  .panel {
    position: relative;
    min-width: 0;
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
  }
  .panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-4) var(--s-5) 0; }
  .panel__title { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; line-height: 1.4; }
  .panel__title svg { width: 1.2rem; height: 1.2rem; color: var(--app-accent); }
  .panel__sub { color: var(--app-muted); font-size: var(--fs-caption); }
  .panel__body { padding: var(--s-4) var(--s-5) var(--s-5); }
  .panel__body--flush { padding: var(--s-3) 0 0; }
  .panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: var(--fs-small); }
  .panel--flat { box-shadow: none; }
  .panel--sunken { background: var(--app-surface-2); box-shadow: none; }
  .panel--accent { border-color: transparent; background: linear-gradient(160deg, var(--app-accent-soft), var(--app-surface) 70%); }
  .panel--interactive { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.2s linear; }
  .panel--interactive:hover { transform: translateY(-3px); box-shadow: var(--app-shadow-lg); border-color: var(--app-border-strong); }
  .link-more { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--app-accent-strong); font-size: var(--fs-small); font-weight: 500; }
  .link-more svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease-out); }
  .link-more:hover svg { transform: translateX(-3px); }

  /* ── KPI ───────────────────────────────────────────────────────────────── */
  .kpi {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--s-2);
    padding: var(--s-5);
    border-radius: var(--app-radius);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }
  .kpi:hover { transform: translateY(-2px); box-shadow: var(--app-shadow-lg); }
  .kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .kpi__label { color: var(--app-muted); font-size: var(--fs-small); font-weight: 500; }
  .kpi__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; background: var(--kpi-soft, var(--app-accent-soft)); color: var(--kpi-color, var(--app-accent)); }
  .kpi__icon svg { width: 1.25rem; height: 1.25rem; }
  .kpi__value { font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .kpi__value small { font-size: 0.5em; color: var(--app-muted); font-weight: 600; margin-inline-start: 0.2rem; }
  .kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-caption); color: var(--app-muted); }
  .kpi__spark { height: 2.4rem; margin-inline: calc(var(--s-5) * -1); margin-bottom: calc(var(--s-5) * -1); }
  .kpi--red    { --kpi-color: var(--c-1); --kpi-soft: var(--app-accent-soft); }
  .kpi--gold   { --kpi-color: var(--app-gold-text); --kpi-soft: var(--app-gold-soft); }
  .kpi--teal   { --kpi-color: var(--c-3); --kpi-soft: color-mix(in srgb, var(--c-3) 13%, transparent); }
  .kpi--violet { --kpi-color: var(--c-4); --kpi-soft: color-mix(in srgb, var(--c-4) 13%, transparent); }
  .kpi--blue   { --kpi-color: var(--c-5); --kpi-soft: color-mix(in srgb, var(--c-5) 13%, transparent); }

  .delta { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }
  .delta svg { width: 0.85rem; height: 0.85rem; }
  .delta--up { background: var(--app-success-soft); color: var(--app-success); }
  .delta--down { background: var(--app-danger-soft); color: var(--app-danger); }
  .delta--flat { background: var(--app-sunken); color: var(--app-muted); }

  /* ── Badges / status ───────────────────────────────────────────────────── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.6rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    background: var(--app-sunken);
    color: var(--app-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  .badge::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; opacity: 0.9; }
  .badge--plain::before { display: none; }
  .badge--success { background: var(--app-success-soft); color: var(--app-success); }
  .badge--warn { background: var(--app-warn-soft); color: var(--app-warn); }
  .badge--danger { background: var(--app-danger-soft); color: var(--app-danger); }
  .badge--info { background: var(--app-info-soft); color: var(--app-info); }
  .badge--accent { background: var(--app-accent-soft); color: var(--app-accent-strong); }
  .badge--gold { background: var(--app-gold-soft); color: var(--app-gold-text); }

  /* ── Avatars ───────────────────────────────────────────────────────────── */
  .avatar {
    --size: 2.4rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    flex: none;
    border-radius: 50%;
    background: var(--av-bg, var(--app-accent-soft));
    color: var(--av-fg, var(--app-accent-strong));
    font-family: var(--font-display);
    font-size: calc(var(--size) * 0.42);
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar--sm { --size: 2rem; }
  .avatar--lg { --size: 3.25rem; }
  .avatar--xl { --size: 5.5rem; box-shadow: 0 0 0 4px var(--app-surface), 0 0 0 6px var(--app-gold-soft); }
  .avatar[data-tone="1"] { --av-bg: var(--app-accent-soft); --av-fg: var(--app-accent-strong); }
  .avatar[data-tone="2"] { --av-bg: var(--app-gold-soft); --av-fg: var(--app-gold-text); }
  .avatar[data-tone="3"] { --av-bg: color-mix(in srgb, var(--c-3) 15%, transparent); --av-fg: var(--c-3); }
  .avatar[data-tone="4"] { --av-bg: color-mix(in srgb, var(--c-4) 15%, transparent); --av-fg: var(--c-4); }
  .avatar[data-tone="5"] { --av-bg: color-mix(in srgb, var(--c-5) 15%, transparent); --av-fg: var(--c-5); }
  .avatar__status { position: absolute; bottom: 0; inset-inline-end: 0; width: 28%; height: 28%; border-radius: 50%; background: var(--app-success); box-shadow: 0 0 0 2px var(--app-surface); }
  .avatar-stack { display: flex; }
  .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--app-surface); }
  .avatar-stack .avatar + .avatar { margin-inline-start: -0.6rem; }
  .person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
  .person__text { display: grid; min-width: 0; line-height: 1.4; }
  .person__name { font-weight: 600; font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .person__meta { color: var(--app-muted); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── Buttons (app additions) ───────────────────────────────────────────── */
  .app-body .btn { min-height: 2.6rem; padding: 0 var(--s-5); font-size: var(--fs-small); }
  .app-body .btn--lg { min-height: 3rem; padding: 0 var(--s-6); font-size: var(--fs-body); }
  .app-body .btn--sm { min-height: 2.15rem; padding: 0 var(--s-4); font-size: var(--fs-caption); }
  .app-body .btn__icon { width: 1.1em; height: 1.1em; }
  .btn--soft { --btn-bg: var(--app-accent-soft); --btn-fg: var(--app-accent-strong); }
  .btn--soft:hover { --btn-bg: color-mix(in srgb, var(--app-accent) 18%, transparent); }
  .btn--outline { --btn-bg: var(--app-surface); --btn-fg: var(--app-text); --btn-border: var(--app-border-strong); }
  .btn--outline:hover { --btn-border: var(--app-accent); --btn-fg: var(--app-accent-strong); }
  .btn--danger { --btn-bg: var(--app-danger); --btn-fg: #fff; }
  .btn--success { --btn-bg: var(--app-success); --btn-fg: #fff; }
  .btn--quiet { --btn-bg: transparent; --btn-fg: var(--app-muted); }
  .btn--quiet:hover { --btn-bg: var(--app-hover); --btn-fg: var(--app-text); }
  :root[data-theme="dark"] .btn--ghost { --btn-bg: rgb(255 255 255 / 0.06); --btn-fg: var(--app-text); --btn-border: var(--app-border-strong); }
  :root[data-theme="dark"] .icon-btn { background: var(--app-surface-2); color: var(--app-text); border-color: var(--app-border); }
  .btn-group { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--app-sunken); }

  /* Segmented control */
  .segmented { position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--app-sunken); }
  .segmented button {
    position: relative;
    z-index: 1;
    min-height: 2.1rem;
    padding: 0 var(--s-4);
    border-radius: 999px;
    color: var(--app-muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.18s linear, background-color 0.18s linear, box-shadow 0.25s var(--ease-out);
  }
  .segmented button:hover { color: var(--app-text); }
  .segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--app-surface); color: var(--app-accent-strong); box-shadow: var(--app-shadow-sm), 0 0 0 1px var(--app-border); }

  /* ── Tabs ──────────────────────────────────────────────────────────────── */
  .tabs__list { position: relative; display: flex; gap: var(--s-1); border-bottom: 1px solid var(--app-border); overflow-x: auto; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.9rem;
    padding: 0 var(--s-4);
    color: var(--app-muted);
    font-size: var(--fs-small);
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.18s linear;
  }
  .tabs__tab:hover { color: var(--app-text); }
  .tabs__tab[aria-selected="true"] { color: var(--app-accent-strong); }
  .tabs__tab .badge { min-height: 1.3rem; }
  .tabs__ink { position: absolute; bottom: -1px; left: 0; height: 3px; width: var(--ink-w, 0); translate: var(--ink-x, 0) 0; border-radius: 3px 3px 0 0; background: linear-gradient(to left, var(--app-accent), var(--app-gold)); transition: translate 0.35s var(--ease-out), width 0.35s var(--ease-out); }
  .tabs__panel { padding-top: var(--app-gap); }
  .tabs__panel[hidden] { display: none; }
  .tabs__panel.is-entering { animation: panel-in 0.3s var(--ease-out); }
  @keyframes panel-in { from { opacity: 0; translate: 0 6px; } }

  /* ── Forms ─────────────────────────────────────────────────────────────── */
  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .form-field { display: grid; gap: var(--s-2); min-width: 0; }
  .form-label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--app-text); font-size: var(--fs-small); font-weight: 600; }
  .form-label .faint { font-weight: 400; }
  .form-help { color: var(--app-faint); font-size: var(--fs-caption); }
  .input, .select, .textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--s-3);
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border-strong);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: var(--fs-small);
    transition: border-color 0.18s linear, box-shadow 0.25s var(--ease-out), background-color 0.18s linear;
  }
  .textarea { min-height: 7rem; padding: var(--s-3); line-height: 1.7; resize: vertical; }
  .select { appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem; background-position: left 0.85rem center; }
  .input::placeholder, .textarea::placeholder { color: var(--app-faint); }
  .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--app-accent) 35%, var(--app-border-strong)); }
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--app-accent); box-shadow: var(--app-ring); }
  .input-icon { position: relative; }
  .input-icon > svg { position: absolute; top: 50%; inset-inline-start: 0.85rem; translate: 0 -50%; width: 1.05rem; height: 1.05rem; color: var(--app-faint); pointer-events: none; }
  .input-icon > .input { padding-inline-start: 2.5rem; }
  .input--sm { min-height: 2.25rem; }

  .switch { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-size: var(--fs-small); }
  .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .switch__track { position: relative; width: 2.6rem; height: 1.5rem; flex: none; border-radius: 999px; background: var(--app-border-strong); transition: background-color 0.2s linear; }
  .switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: inset-inline-start 0.25s var(--ease-out); }
  .switch input:checked + .switch__track { background: var(--app-accent); }
  .switch input:checked + .switch__track::after { inset-inline-start: calc(100% - 1.5rem + 3px); }
  .switch input:focus-visible + .switch__track { box-shadow: var(--app-ring); }

  .checkbox { width: 1.15rem; height: 1.15rem; accent-color: var(--app-accent); cursor: pointer; }

  .choice-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .choice-pills label { position: relative; }
  .choice-pills input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .choice-pills span { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.3rem; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--app-border-strong); color: var(--app-muted); font-size: var(--fs-caption); font-weight: 600; transition: all 0.18s linear; }
  .choice-pills input:checked + span { border-color: var(--app-accent); background: var(--app-accent-soft); color: var(--app-accent-strong); }
  .choice-pills input:focus-visible + span { box-shadow: var(--app-ring); }

  .dropzone { display: grid; place-items: center; gap: var(--s-2); padding: var(--s-6); border: 2px dashed var(--app-border-strong); border-radius: var(--app-radius); background: var(--app-surface-2); color: var(--app-muted); text-align: center; transition: border-color 0.2s linear, background-color 0.2s linear; }
  .dropzone svg { width: 2rem; height: 2rem; color: var(--app-accent); }
  .dropzone.is-over, .dropzone:hover { border-color: var(--app-accent); background: var(--app-accent-soft); }

  /* ── Data table ────────────────────────────────────────────────────────── */
  .table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  .table-toolbar .input-icon { flex: 1 1 16rem; max-width: 22rem; }
  .table-toolbar__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
  .table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--app-border-strong) transparent; }
  .dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
  .dtable th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--s-3) var(--s-4);
    background: var(--app-surface-2);
    border-block: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
  }
  .dtable td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--app-border); vertical-align: middle; white-space: nowrap; }
  .dtable tbody tr { transition: background-color 0.12s linear; }
  .dtable tbody tr:hover { background: var(--app-hover); }
  .dtable tbody tr.is-selected { background: color-mix(in srgb, var(--app-accent) 7%, transparent); }
  .dtable tbody tr:last-child td { border-bottom: 0; }
  .dtable .num, .dtable td.num { font-variant-numeric: tabular-nums; }
  .dtable .col-check { width: 2.5rem; padding-inline-end: 0; }
  .dtable .col-actions { width: 1%; text-align: end; }
  .dtable--compact td, .dtable--compact th { padding-block: var(--s-2); }
  .sort-btn { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; font: inherit; }
  .sort-btn::after { content: ""; width: 0.55rem; height: 0.55rem; opacity: 0.35; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 8 4H2zM5 9 2 6h6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 8 4H2zM5 9 2 6h6z'/%3E%3C/svg%3E") center / contain no-repeat; }
  th[aria-sort="ascending"] .sort-btn, th[aria-sort="descending"] .sort-btn { color: var(--app-accent-strong); }
  th[aria-sort="ascending"] .sort-btn::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2 8.5 7h-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2 8.5 7h-7z'/%3E%3C/svg%3E"); }
  th[aria-sort="descending"] .sort-btn::after { opacity: 1; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8 1.5 3h7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8 1.5 3h7z'/%3E%3C/svg%3E"); }
  .table-empty { display: none; padding: var(--s-10) var(--s-4); text-align: center; color: var(--app-muted); }
  .table-empty.is-shown { display: block; }

  .bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0 var(--s-5) var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
    border-radius: var(--app-radius-sm);
    background: var(--app-text);
    color: var(--app-surface);
    font-size: var(--fs-small);
    animation: panel-in 0.25s var(--ease-out);
  }
  .bulk-bar[hidden] { display: none; }
  .bulk-bar .btn { --btn-bg: rgb(255 255 255 / 0.12); --btn-fg: var(--app-surface); }
  :root[data-theme="dark"] .bulk-bar .btn { --btn-bg: rgb(0 0 0 / 0.08); }
  .bulk-bar__count { font-weight: 600; margin-inline-end: auto; }

  .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: var(--fs-caption); }
  .pager__pages { display: flex; gap: 3px; }
  .pager__btn { min-width: 2.1rem; height: 2.1rem; padding: 0 0.5rem; border-radius: var(--app-radius-xs); color: var(--app-muted); font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 0.15s linear, color 0.15s linear; }
  .pager__btn:hover:not(:disabled) { background: var(--app-hover); color: var(--app-text); }
  .pager__btn[aria-current="true"] { background: var(--app-accent); color: #fff; }
  .pager__btn:disabled { opacity: 0.35; cursor: default; }
  .pager__btn svg { width: 1rem; height: 1rem; }

  .filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .filter-chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.25rem; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--app-border-strong); background: var(--app-surface); color: var(--app-muted); font-size: var(--fs-caption); font-weight: 600; transition: all 0.15s linear; }
  .filter-chip:hover { color: var(--app-text); border-color: var(--app-accent); }
  .filter-chip[aria-pressed="true"] { background: var(--app-text); border-color: var(--app-text); color: var(--app-surface); }
  .filter-chip .count { min-width: 1.35rem; padding: 0 0.3rem; border-radius: 999px; background: var(--app-sunken); color: var(--app-muted); font-size: 0.7rem; text-align: center; }
  .filter-chip[aria-pressed="true"] .count { background: rgb(255 255 255 / 0.18); color: inherit; }

  /* ── Progress ──────────────────────────────────────────────────────────── */
  .app-progress { --value: 0; height: 0.5rem; border-radius: 999px; background: var(--track, var(--app-sunken)); overflow: hidden; }
  .app-progress > span { display: block; height: 100%; width: calc(var(--value) * 1%); border-radius: inherit; background: var(--bar, linear-gradient(to left, var(--app-accent), var(--app-gold))); transition: width 0.9s var(--ease-out); }
  .app-progress--sm { height: 0.35rem; }
  .app-progress--success > span { background: var(--app-success); }
  .app-progress--warn > span { background: var(--app-warn); }

  .ring { --value: 0; --size: 5.5rem; --stroke: 9; position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); flex: none; }
  .ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
  .ring circle { fill: none; stroke-width: var(--stroke); stroke-linecap: round; }
  .ring__track { stroke: var(--app-sunken); }
  .ring__bar { stroke: var(--ring-color, var(--app-accent)); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--value)); transition: stroke-dashoffset 1.1s var(--ease-out); }
  .ring__label { display: grid; justify-items: center; line-height: 1.1; }
  .ring__value { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--size) * 0.24); font-variant-numeric: tabular-nums; }
  .ring__caption { color: var(--app-muted); font-size: 0.68rem; }

  /* ── Lists ─────────────────────────────────────────────────────────────── */
  .list { display: grid; }
  .list__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--app-border); min-width: 0; transition: background-color 0.12s linear; }
  .list__item:last-child { border-bottom: 0; }
  a.list__item:hover, .list__item--hover:hover { background: var(--app-hover); }
  .list__body { flex: 1; min-width: 0; display: grid; line-height: 1.5; }
  .list__title { font-weight: 600; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list__meta { color: var(--app-muted); font-size: var(--fs-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .list__end { display: flex; align-items: center; gap: var(--s-2); flex: none; }
  .icon-chip { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 13px; background: var(--chip-bg, var(--app-accent-soft)); color: var(--chip-fg, var(--app-accent)); }
  .icon-chip svg { width: 1.2rem; height: 1.2rem; }
  .icon-chip--gold { --chip-bg: var(--app-gold-soft); --chip-fg: var(--app-gold-text); }
  .icon-chip--teal { --chip-bg: color-mix(in srgb, var(--c-3) 14%, transparent); --chip-fg: var(--c-3); }
  .icon-chip--violet { --chip-bg: color-mix(in srgb, var(--c-4) 14%, transparent); --chip-fg: var(--c-4); }
  .icon-chip--blue { --chip-bg: color-mix(in srgb, var(--c-5) 14%, transparent); --chip-fg: var(--c-5); }
  .icon-chip--success { --chip-bg: var(--app-success-soft); --chip-fg: var(--app-success); }
  .icon-chip--warn { --chip-bg: var(--app-warn-soft); --chip-fg: var(--app-warn); }
  .icon-chip--danger { --chip-bg: var(--app-danger-soft); --chip-fg: var(--app-danger); }

  /* Timeline / activity feed */
  .timeline { position: relative; display: grid; gap: var(--s-4); padding-inline-start: var(--s-6); }
  .timeline::before { content: ""; position: absolute; top: 0.5rem; bottom: 0.5rem; inset-inline-start: 0.55rem; width: 2px; background: var(--app-border); border-radius: 2px; }
  .timeline__item { position: relative; display: grid; gap: 2px; font-size: var(--fs-small); }
  .timeline__item::before { content: ""; position: absolute; top: 0.45rem; inset-inline-start: calc(var(--s-6) * -1 + 0.2rem); width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--app-surface); border: 2px solid var(--dot, var(--app-accent)); }
  .timeline__time { color: var(--app-faint); font-size: var(--fs-caption); }

  /* ── Calendar / timetable ──────────────────────────────────────────────── */
  .timetable { display: grid; grid-template-columns: 4.5rem repeat(var(--days, 5), minmax(8.5rem, 1fr)); border: 1px solid var(--app-border); border-radius: var(--app-radius); overflow: hidden; background: var(--app-surface); }
  .timetable__head { padding: var(--s-3); background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); font-size: var(--fs-caption); font-weight: 600; text-align: center; color: var(--app-muted); }
  .timetable__head.is-today { color: var(--app-accent-strong); background: var(--app-accent-soft); }
  .timetable__time { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--app-border); color: var(--app-faint); font-size: 0.72rem; text-align: center; font-variant-numeric: tabular-nums; }
  .timetable__cell { min-height: 4.75rem; padding: 0.35rem; border-bottom: 1px solid var(--app-border); border-inline-start: 1px solid var(--app-border); }
  .slot { height: 100%; display: grid; align-content: start; gap: 2px; padding: var(--s-2) var(--s-3); border-radius: var(--app-radius-xs); background: var(--slot-bg, var(--app-accent-soft)); border-inline-start: 3px solid var(--slot-c, var(--app-accent)); font-size: var(--fs-caption); line-height: 1.45; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
  .slot:hover { transform: translateY(-1px); box-shadow: var(--app-shadow); }
  .slot__title { font-weight: 700; color: var(--app-text); }
  .slot__meta { color: var(--app-muted); }
  .slot--gold { --slot-bg: var(--app-gold-soft); --slot-c: var(--app-gold); }
  .slot--teal { --slot-bg: color-mix(in srgb, var(--c-3) 12%, transparent); --slot-c: var(--c-3); }
  .slot--violet { --slot-bg: color-mix(in srgb, var(--c-4) 12%, transparent); --slot-c: var(--c-4); }
  .slot--blue { --slot-bg: color-mix(in srgb, var(--c-5) 12%, transparent); --slot-c: var(--c-5); }
  .slot--break { --slot-bg: var(--app-sunken); --slot-c: var(--app-border-strong); }
  .slot.is-now { box-shadow: 0 0 0 2px var(--slot-c, var(--app-accent)); }

  /* ── Kanban ────────────────────────────────────────────────────────────── */
  .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: var(--app-gap); overflow-x: auto; padding-bottom: var(--s-3); }
  .kanban__col { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--app-radius); background: var(--app-surface-2); border: 1px solid var(--app-border); min-height: 18rem; transition: background-color 0.2s linear, border-color 0.2s linear; }
  .kanban__col.is-over { background: var(--app-accent-soft); border-color: var(--app-accent); }
  .kanban__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-1) var(--s-2); font-weight: 700; font-size: var(--fs-small); }
  .kanban__card { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--app-radius-sm); background: var(--app-surface); border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm); cursor: grab; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), opacity 0.2s linear; }
  .kanban__card:hover { box-shadow: var(--app-shadow); transform: translateY(-2px); }
  .kanban__card.is-dragging { opacity: 0.45; cursor: grabbing; }

  /* ── Chat ──────────────────────────────────────────────────────────────── */
  .chat { display: grid; grid-template-columns: 20rem minmax(0, 1fr); height: calc(100svh - var(--topbar-h) - var(--app-pad) * 2); min-height: 32rem; overflow: hidden; }
  .chat__list { display: flex; flex-direction: column; border-inline-end: 1px solid var(--app-border); min-height: 0; }
  .chat__threads { flex: 1; overflow-y: auto; }
  .chat__thread { display: flex; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); text-align: start; border-bottom: 1px solid var(--app-border); transition: background-color 0.12s linear; }
  .chat__thread:hover { background: var(--app-hover); }
  .chat__thread[aria-current="true"] { background: var(--app-accent-soft); }
  .chat__main { display: flex; flex-direction: column; min-height: 0; }
  .chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--app-border); }
  .chat__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); background: radial-gradient(circle at 20% 10%, var(--app-gold-soft), transparent 40%), var(--app-surface-2); }
  .bubble { max-width: min(34rem, 80%); padding: var(--s-3) var(--s-4); border-radius: 18px; border-start-start-radius: 6px; background: var(--app-surface); box-shadow: var(--app-shadow-sm); font-size: var(--fs-small); line-height: 1.75; align-self: flex-start; animation: panel-in 0.25s var(--ease-out); }
  .bubble--me { align-self: flex-end; background: var(--app-accent); color: #fff; border-start-start-radius: 18px; border-start-end-radius: 6px; }
  .bubble__time { display: block; margin-top: 2px; font-size: 0.68rem; opacity: 0.65; }
  .chat__day { align-self: center; padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--app-sunken); color: var(--app-muted); font-size: 0.72rem; }
  .chat__composer { display: flex; align-items: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--app-border); }
  .chat__composer .textarea { min-height: 2.75rem; max-height: 8rem; resize: none; }

  /* ── Empty state / skeleton ────────────────────────────────────────────── */
  .empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); text-align: center; color: var(--app-muted); }
  .empty svg { width: 2.75rem; height: 2.75rem; color: var(--app-gold); }
  .empty__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--app-text); }
  .skeleton { position: relative; overflow: hidden; border-radius: var(--app-radius-xs); background: var(--app-sunken); }
  .skeleton::after { content: ""; position: absolute; inset: 0; translate: 100% 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent); animation: shimmer 1.3s infinite; }
  @keyframes shimmer { to { translate: -100% 0; } }

  /* ── Dialogs: modal, drawer, command palette ───────────────────────────── */
  .modal, .drawer, .cmdk {
    padding: 0;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-lg);
  }
  .modal::backdrop, .drawer::backdrop, .cmdk::backdrop { background: rgb(20 10 8 / 0.45); backdrop-filter: blur(4px); animation: fade-in 0.2s linear; }
  @keyframes fade-in { from { opacity: 0; } }
  .modal { width: min(38rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); margin: auto; border-radius: calc(var(--app-radius) + 4px); overflow: hidden; }
  .modal--lg { width: min(56rem, calc(100vw - 2rem)); }
  .modal[open] { display: flex; flex-direction: column; animation: modal-in 0.3s var(--ease-out); }
  @keyframes modal-in { from { opacity: 0; translate: 0 12px; scale: 0.98; } }
  .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-3); }
  .modal__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
  .modal__sub { color: var(--app-muted); font-size: var(--fs-small); margin-top: 2px; }
  .modal__body { padding: var(--s-3) var(--s-6) var(--s-5); overflow-y: auto; }
  .modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--app-border); background: var(--app-surface-2); }

  .drawer { width: min(32rem, 100vw); height: 100svh; max-height: none; margin: 0; margin-inline-start: auto; border-radius: 0; border-block: 0; border-inline-end: 0; }
  .drawer--wide { width: min(46rem, 100vw); }
  .drawer[open] { display: flex; flex-direction: column; animation: drawer-in 0.35s var(--ease-out); }
  @keyframes drawer-in { from { translate: -100% 0; } }
  .drawer .modal__body { flex: 1; }

  .cmdk { width: min(40rem, calc(100vw - 2rem)); margin: 12vh auto auto; border-radius: calc(var(--app-radius) + 4px); overflow: hidden; }
  .cmdk[open] { animation: modal-in 0.22s var(--ease-out); }
  .cmdk__search { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--app-border); }
  .cmdk__search svg { width: 1.25rem; height: 1.25rem; color: var(--app-faint); }
  .cmdk__input { flex: 1; min-height: 3rem; border: 0; background: transparent; color: var(--app-text); font-size: var(--fs-body); outline: none; }
  .app-body .cmdk__input:focus-visible { outline: none; }
  .cmdk__list { max-height: min(24rem, 55svh); overflow-y: auto; padding: var(--s-2); }
  .cmdk__group { padding: var(--s-2) var(--s-3) var(--s-1); color: var(--app-faint); font-size: 0.72rem; font-weight: 600; }
  .cmdk__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.75rem; padding: 0 var(--s-3); border-radius: var(--app-radius-xs); color: var(--app-text); font-size: var(--fs-small); text-align: start; }
  .cmdk__item svg { width: 1.15rem; height: 1.15rem; color: var(--app-muted); flex: none; }
  .cmdk__item[aria-selected="true"] { background: var(--app-accent-soft); color: var(--app-accent-strong); }
  .cmdk__item[aria-selected="true"] svg { color: var(--app-accent); }
  .cmdk__hint { margin-inline-start: auto; color: var(--app-faint); font-size: var(--fs-caption); }
  .cmdk__foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-5); border-top: 1px solid var(--app-border); color: var(--app-faint); font-size: var(--fs-caption); }
  .cmdk__empty { padding: var(--s-8); text-align: center; color: var(--app-muted); font-size: var(--fs-small); }

  /* ── Toasts ────────────────────────────────────────────────────────────── */
  .toasts { position: fixed; z-index: 100; inset-block-end: var(--s-5); inset-inline-start: 50%; translate: 50% 0; display: grid; gap: var(--s-2); width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
  .toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--app-radius-sm); background: var(--app-text); color: var(--app-surface); box-shadow: var(--app-shadow-lg); font-size: var(--fs-small); pointer-events: auto; animation: toast-in 0.35s var(--ease-out); }
  .toast svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--toast-c, #FFE285); }
  .toast--success { --toast-c: #4ADE80; }
  .toast--danger { --toast-c: #FF8A80; }
  .toast.is-leaving { animation: toast-out 0.25s var(--ease-out) forwards; }
  @keyframes toast-in { from { opacity: 0; translate: 0 12px; scale: 0.97; } }
  @keyframes toast-out { to { opacity: 0; translate: 0 8px; } }

  /* ── Tooltip ───────────────────────────────────────────────────────────── */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    z-index: 70;
    translate: -50% 4px;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    background: var(--app-text);
    color: var(--app-surface);
    font: 500 0.72rem/1.4 var(--font-body);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s linear, translate 0.2s var(--ease-out);
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
  :root[data-sidebar="collapsed"] .app-nav__link[data-tip]::after { bottom: auto; top: 50%; left: auto; inset-inline-start: calc(100% + 0.6rem); translate: 4px -50%; }
  :root[data-sidebar="collapsed"] .app-nav__link[data-tip]:hover::after { translate: 0 -50%; }
  :root:not([data-sidebar="collapsed"]) .app-nav__link[data-tip]::after { display: none; }

  /* ── Charts ────────────────────────────────────────────────────────────── */
  .chart { position: relative; width: 100%; min-height: var(--chart-h, 240px); }
  .chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .chart__grid line { stroke: var(--app-border); stroke-dasharray: 3 5; }
  .chart__axis text { fill: var(--app-faint); font: 500 11px var(--font-body); }
  .chart__line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart__area { opacity: 0.9; }
  .chart__bar { transition: opacity 0.2s linear; }
  .chart__bar:hover { opacity: 0.8; }
  .chart__dot { stroke: var(--app-surface); stroke-width: 2.5; }
  .chart__guide { stroke: var(--app-border-strong); stroke-width: 1; }
  .chart__tip {
    position: absolute;
    z-index: 5;
    min-width: 8rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--app-radius-xs);
    background: var(--app-text);
    color: var(--app-surface);
    font-size: var(--fs-caption);
    line-height: 1.6;
    pointer-events: none;
    opacity: 0;
    translate: -50% -110%;
    transition: opacity 0.12s linear;
    white-space: nowrap;
  }
  .chart__tip.is-shown { opacity: 1; }
  .chart__tip b { font-weight: 700; font-variant-numeric: tabular-nums; }
  .chart__tip i { display: inline-block; width: 0.55rem; height: 0.55rem; margin-inline-end: 0.35rem; border-radius: 50%; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--app-muted); font-size: var(--fs-caption); }
  .chart-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
  .chart-legend i { width: 0.65rem; height: 0.65rem; border-radius: 3px; background: var(--c); }
  .donut-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-6); }
  .donut-legend { display: grid; gap: var(--s-3); font-size: var(--fs-small); }
  .donut-legend__row { display: flex; align-items: center; gap: var(--s-2); }
  .donut-legend__row i { width: 0.7rem; height: 0.7rem; border-radius: 4px; background: var(--c); flex: none; }
  .donut-legend__row b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .chart-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
  .chart-center b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
  .chart-center span { color: var(--app-muted); font-size: var(--fs-caption); }

  /* Heat map (attendance) */
  .heat { display: grid; grid-template-columns: repeat(var(--cols, 20), minmax(0, 1fr)); gap: 4px; }
  .heat i { aspect-ratio: 1; border-radius: 4px; background: var(--app-sunken); }
  .heat i[data-l="1"] { background: color-mix(in srgb, var(--app-success) 25%, transparent); }
  .heat i[data-l="2"] { background: color-mix(in srgb, var(--app-success) 50%, transparent); }
  .heat i[data-l="3"] { background: color-mix(in srgb, var(--app-success) 80%, transparent); }
  .heat i[data-l="x"] { background: color-mix(in srgb, var(--app-danger) 55%, transparent); }
  .heat i[data-l="w"] { background: color-mix(in srgb, var(--app-warn) 55%, transparent); }

  /* ── Content entrance: fast and calm ───────────────────────────────────── */
  .app__content > * { animation: app-in 0.42s var(--ease-out) backwards; }
  .app__content > *:nth-child(2) { animation-delay: 40ms; }
  .app__content > *:nth-child(3) { animation-delay: 80ms; }
  .app__content > *:nth-child(4) { animation-delay: 120ms; }
  .app__content > *:nth-child(n + 5) { animation-delay: 160ms; }
  .stagger > * { animation: app-in 0.42s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
  @keyframes app-in { from { opacity: 0; translate: 0 10px; } }
  .content-auto { content-visibility: auto; contain-intrinsic-size: auto 600px; }

  /* Spinner, typing dots */
  .spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin 0.7s linear infinite; }
  @keyframes spin { to { rotate: 360deg; } }
  .bubble--typing { padding-block: var(--s-3); }
  .typing { display: inline-flex; gap: 4px; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-faint); animation: typing 1s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes typing { 50% { translate: 0 -4px; opacity: 0.5; } }

  /* Grade inputs */
  .grade-input { width: 4.25rem; min-height: 2.25rem; padding: 0 var(--s-2); border-radius: var(--app-radius-xs); border: 1px solid var(--app-border); background: var(--app-surface-2); color: var(--app-text); font: 600 var(--fs-small) var(--font-body); font-variant-numeric: tabular-nums; text-align: center; transition: border-color 0.15s linear, box-shadow 0.2s var(--ease-out), background-color 0.15s linear; }
  .grade-input:hover { border-color: var(--app-border-strong); }
  .grade-input:focus-visible { outline: none; border-color: var(--app-accent); box-shadow: var(--app-ring); background: var(--app-surface); }
  .grade-input.is-invalid { border-color: var(--app-danger); background: var(--app-danger-soft); color: var(--app-danger); }
  .grade-input::-webkit-outer-spin-button, .grade-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .grade-input { -moz-appearance: textfield; appearance: textfield; }

  /* Checklist rows */
  .check-btn { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; border: 2px solid var(--app-border-strong); color: transparent; transition: all 0.2s var(--ease-out); }
  .check-btn svg { width: 0.95rem; height: 0.95rem; }
  .check-btn:hover { border-color: var(--app-success); }
  .check-btn[aria-pressed="true"] { background: var(--app-success); border-color: var(--app-success); color: #fff; transform: scale(1.05); }
  .is-done .list__title { text-decoration: line-through; color: var(--app-faint); }

  /* Attendance register */
  .att-choice { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--app-sunken); }
  .att-choice label { position: relative; }
  .att-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
  .att-choice span { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--s-3); border-radius: 999px; color: var(--app-muted); font-size: var(--fs-caption); font-weight: 600; transition: all 0.18s linear; }
  .att-choice input:hover + span { color: var(--app-text); }
  .att-choice input:focus-visible + span { box-shadow: var(--app-ring); }
  .att-choice input[value="present"]:checked + span { background: var(--app-success); color: #fff; }
  .att-choice input[value="late"]:checked + span { background: var(--app-warn); color: #fff; }
  .att-choice input[value="absent"]:checked + span { background: var(--app-danger); color: #fff; }
  .att-choice input[value="excused"]:checked + span { background: var(--app-info); color: #fff; }
  [data-att-row][data-state="absent"] { background: color-mix(in srgb, var(--app-danger) 5%, transparent); }

  .chart__slice { cursor: pointer; outline: none; }
  .legend-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--c, var(--app-accent)); }
  .stat-inline { display: grid; gap: 2px; }
  .stat-inline b { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .stat-inline span { color: var(--app-muted); font-size: var(--fs-caption); }
  .divider { height: 1px; background: var(--app-border); margin-block: var(--s-4); }

  /* Lessons of the day */
  .lessons { display: grid; gap: var(--s-2); }
  .lesson { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--app-radius-sm); border: 1px solid transparent; transition: background-color 0.15s linear; }
  .lesson:hover { background: var(--app-hover); }
  .lesson__time { width: 3rem; flex: none; color: var(--app-faint); font-size: var(--fs-caption); font-weight: 600; }
  .lesson.is-done { opacity: 0.62; }
  .lesson.is-now { border-color: color-mix(in srgb, var(--app-accent) 30%, transparent); background: linear-gradient(to left, var(--app-accent-soft), transparent); }
  .lesson.is-now .lesson__time { color: var(--app-accent-strong); }
  .lesson.is-now::before { content: ""; position: absolute; inset-inline-start: -1px; inset-block: 0.8rem; width: 3px; border-radius: 3px; background: var(--app-accent); }

  /* Meters (subject progress) */
  .meters { display: grid; gap: var(--s-4); }
  .meters li { display: grid; gap: var(--s-2); }

  /* Medals */
  .medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--s-3); }
  .medal { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); border-radius: var(--app-radius-sm); text-align: center; transition: transform 0.3s var(--ease-out), background-color 0.2s linear; }
  .medal:hover { transform: translateY(-3px); background: var(--app-hover); }
  .medal__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE9A8, #E9B23A 60%, #B8860F); color: #7A4E00; box-shadow: 0 0 0 3px var(--app-surface), 0 0 0 5px var(--app-gold-soft), 0 10px 18px -10px rgb(142 98 12 / 0.7); }
  .medal__icon svg { width: 1.45rem; height: 1.45rem; }
  .medal__name { font-size: var(--fs-caption); font-weight: 600; line-height: 1.4; }
  .medal.is-locked .medal__icon { background: var(--app-sunken); color: var(--app-faint); box-shadow: 0 0 0 3px var(--app-surface), 0 0 0 5px var(--app-border); }
  .medal.is-locked .medal__name { color: var(--app-faint); }

  /* Demo notice */
  .demo-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--app-gold-soft); color: var(--app-gold-text); font-size: 0.7rem; font-weight: 600; }

  /* ── Responsive ────────────────────────────────────────────────────────── */
  @media (max-width: 1280px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 1100px) {
    .grid-12 > [class*="span-"] { grid-column: 1 / -1; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-avatar-btn__name { display: none; }
  }
  @media (max-width: 1024px) {
    .app, :root[data-sidebar="collapsed"] .app { grid-template-columns: minmax(0, 1fr); }
    .app-sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      width: min(19rem, 86vw);
      translate: 100% 0;
      box-shadow: var(--app-shadow-lg);
      transition: translate 0.35s var(--ease-out), visibility 0s linear 0.35s;
      visibility: hidden;
      z-index: 80;
    }
    :root.sidebar-open .app-sidebar { translate: 0 0; visibility: visible; transition-delay: 0s; }
    :root[data-sidebar="collapsed"] .app-sidebar { padding-inline: var(--s-3); }
    :root[data-sidebar="collapsed"] :is(.app-brand__text, .app-nav__text, .app-nav__label, .app-promo, .app-user__text) { display: revert; }
    :root[data-sidebar="collapsed"] .app-nav__text { display: block; }
    :root[data-sidebar="collapsed"] .app-nav__link { justify-content: flex-start; padding: 0 var(--s-3); }
    :root[data-sidebar="collapsed"] .app-sidebar__head { flex-direction: row; }
    .app-sidebar__collapse { display: none; }
    .app-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgb(20 10 8 / 0.4); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s linear, visibility 0s linear 0.25s; }
    :root.sidebar-open .app-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
    .app-topbar__menu { display: inline-grid; }
    .chat { grid-template-columns: minmax(0, 1fr); }
    .chat.is-thread-open .chat__list, .chat:not(.is-thread-open) .chat__main { display: none; }
  }
  @media (max-width: 720px) {
    .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .grid-4 > .kpi { padding: var(--s-4); }
    .grid-4 > .kpi .kpi__icon { width: 2.2rem; height: 2.2rem; border-radius: 11px; }
    .grid-4 > .kpi .kpi__foot { flex-wrap: wrap; }
    .grid-4 > .kpi .kpi__spark { margin-inline: calc(var(--s-4) * -1); margin-bottom: calc(var(--s-4) * -1); }
    .app-search { width: auto; flex: none; min-height: 2.6rem; padding: 0; justify-content: center; width: 2.6rem; }
    .app-search span, .app-search kbd { display: none; }
    .app-topbar__section { display: none; }
    .hello { grid-template-columns: minmax(0, 1fr); }
    .hello__art { display: none; }
    .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .table-toolbar .input-icon { max-width: none; }
    .page-head__actions { width: 100%; }
    .page-head__actions > .btn { flex: 1 1 auto; }
  }
  @media (max-width: 480px) {
    .app-topbar { gap: var(--s-2); }
    .app-topbar__actions .theme-toggle { display: none; }
  }
}

@media print {
  .app-sidebar, .app-topbar, .app-scrim, .toasts, .page-head__actions, .table-toolbar, .pager, .bulk-bar { display: none !important; }
  .app { display: block; }
  .app-body { background: #fff; }
  .panel, .kpi { box-shadow: none; break-inside: avoid; }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .app__content > *, .stagger > *, .hello::before, .hello__art, .app-dot::after, .skeleton::after,
    .modal[open], .drawer[open], .cmdk[open], .toast, .bubble, .tabs__panel.is-entering { animation: none; }
    .app, .app-sidebar, .app-progress > span, .ring__bar, .tabs__ink, .dropdown__panel { transition-duration: 0.01ms; }
  }
}