/* /admin only: the Astin design system v2.1 (tokens + components), copied from
   the Astin design-system artifact. The panel is its own root layout, so none of
   this reaches the public site. Fonts are the site's own files: nothing loads
   from Google. Don't edit the copied parts; panel additions live in admin.css. */
@font-face { font-family: "Peyda"; src: url("/fonts/peyda-vf.woff2") format("woff2-variations"), url("/fonts/peyda-vf.woff2") format("woff2"); font-weight: 100 950; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }

/* Astin — tokens (v2.1 values from tokens.json; family Peyda, as the Astin panel now ships) */
:root {
  --font-sans: "Peyda", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Peyda", ui-monospace, Menlo, monospace;
  --text-display: 2.75rem; --text-hero: 2.25rem; --text-h1: 1.75rem; --text-h2: 1.3125rem; --text-h3: 1.0625rem;
  --text-h4: 0.9375rem; --text-body: 0.9375rem; --text-sm: 0.8125rem; --text-caption: 0.75rem; --text-micro: 0.6875rem;
  --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.7;
  --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 800;
  --tracking-tight: -0.03em; --tracking-eyebrow: 0.08em;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --control-sm: 2.25rem; --control-md: 2.75rem; --control-lg: 3.25rem; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --maxw: 1280px; --sidebar-w: 256px; --header-h: 60px; --tabbar-h: 64px; --content-max: 920px;
  --dur-fast: 0.14s; --dur-base: 0.2s; --dur-slow: 0.32s;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-sticky: 10; --z-header: 30; --z-tabbar: 35; --z-drawer: 40; --z-overlay: 50; --z-modal: 60; --z-popover: 70; --z-toast: 80; --z-tooltip: 90;
}
:root, [data-theme="dark"] {
  --bg: #0b0b0c; --surface: #161617; --surface-2: #1f1f21; --surface-3: #2a2a2d; --surface-inv: #f4f4f2;
  --fg: #f4f4f2; --muted: #a3a3a8; --subtle: #88888f; --fg-inv: #0b0b0c;
  --line: #26262a; --line-2: #36363b; --line-strong: #4d4d54; --line-control: #6a6a72;
  --accent: #e2b53f; --accent-bg: #e2b53f22; --accent-fg: #f3d27a;
  --signal: #35c15b; --signal-bg: #35c15b22; --signal-fg: #7fe69b; --on-signal: #0b0b0c;
  --danger: #f2605b; --danger-bg: #f2605b22; --danger-fg: #ff9a96; --on-danger: #0b0b0c;
  --info: #5aa3ff; --info-bg: #5aa3ff22; --info-fg: #a9ccff; --on-info: #0b0b0c;
  --overlay: #00000099; --glow: 0 0 0 1px #ffffff14 inset;
  --shadow-float: 0 16px 40px -16px #000000e6, 0 2px 8px -2px #00000099; --shadow-sheet: 0 -12px 40px -16px #000000e6;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #ffffff; --surface: #f6f6f4; --surface-2: #ecece9; --surface-3: #e1e1dc; --surface-inv: #111112;
  --fg: #111112; --muted: #4d4d54; --subtle: #68686f; --fg-inv: #ffffff;
  --line: #e8e8e4; --line-2: #d6d6d1; --line-strong: #b9b9b3; --line-control: #86868d;
  --accent: #8a5f00; --accent-bg: #8a5f0018; --accent-fg: #6b4a00;
  --signal: #137a37; --signal-bg: #137a371c; --signal-fg: #0f5d2a; --on-signal: #ffffff;
  --danger: #c4261a; --danger-bg: #c4261a1a; --danger-fg: #8f1b12; --on-danger: #ffffff;
  --info: #1d63d8; --info-bg: #1d63d81a; --info-fg: #14458f; --on-info: #ffffff;
  --overlay: #111112a6; --glow: 0 0 0 1px #00000010 inset;
  --shadow-float: 0 16px 40px -18px #00000033, 0 2px 8px -4px #0000001a; --shadow-sheet: 0 -12px 40px -20px #00000033;
  color-scheme: light;
}
:root, [data-theme="dark"], [data-theme="light"] {
  --role-student: var(--accent); --role-student-bg: var(--accent-bg);
  --role-teacher: var(--signal); --role-teacher-bg: var(--signal-bg);
  --role-admin: var(--danger); --role-admin-bg: var(--danger-bg);
  --role-parent: var(--info); --role-parent-bg: var(--info-bg);
  --role-staff: var(--muted); --role-staff-bg: var(--surface-2);
  --live: var(--signal);
}

/* Astin Design System v2.1 — components/bundle.css
   Loaded after the generated tokens.css. Token VALUES live only in tokens.json;
   this file holds the composite tokens tokens.json can't express and every component. */

:root { --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; } }
/* v2.1: theme switch must not animate every surface (dash.astin.app flashes grey on toggle). */
html.is-theme-switching *, html.is-theme-switching *::before, html.is-theme-switching *::after { transition: none !important; }

/* ============================================================
   Astin Design System v2 — astin.css
   Elevation = surface layering (bg → surface → surface-2 → surface-3).
   Borders only on inputs, outlines, and hairline dividers.
   Controls are touch-scale (44/52). Primary actions are pills.
   RTL-first: logical properties only.
   ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: color-mix(in srgb, var(--fg) 18%, transparent); }
a { color: inherit; } img, svg { display: block; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

/* ---------- Typography ---------- */
.t-display { font-size: var(--text-display); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-hero { font-size: var(--text-hero); font-weight: 800; line-height: 1.1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
h1, .t-h1 { font-size: var(--text-h1); font-weight: 800; line-height: 1.25; letter-spacing: var(--tracking-tight); margin: 0; }
h2, .t-h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
h3, .t-h3 { font-size: var(--text-h3); font-weight: 700; line-height: 1.45; margin: 0; }
h4, .t-h4 { font-size: var(--text-h4); font-weight: 700; line-height: 1.5; margin: 0; }
p { margin: 0; }
.t-sm { font-size: var(--text-sm); } .t-caption { font-size: var(--text-caption); color: var(--muted); }
.t-muted { color: var(--muted); } .t-subtle { color: var(--subtle); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.eyebrow { font-size: var(--text-micro); font-weight: 500; color: var(--subtle); }
.eyebrow.tracked { font-family: var(--font-mono); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; direction: ltr; unicode-bidi: isolate; }
.label { display: block; font-size: var(--text-sm); font-weight: 700; margin-block-end: var(--space-2); }
.hint { font-size: var(--text-caption); color: var(--subtle); margin-block-start: var(--space-2); }
.hint.is-error { color: var(--danger-fg); }
.section-label { font-size: var(--text-caption); font-weight: 700; color: var(--muted); margin-block-end: var(--space-3); }
kbd { font-family: var(--font-mono); font-size: var(--text-micro); padding: 0.15rem 0.45rem; border-radius: var(--r-xs); background: var(--surface-2); color: var(--muted); direction: ltr; unicode-bidi: isolate; }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { gap: var(--space-2); } .stack-lg { gap: var(--space-8); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-2.keep-2 { grid-template-columns: 1fr 1fr; } .grid-2:not(.keep-2) { grid-template-columns: 1fr; } }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.divider-v { width: 1px; align-self: stretch; background: var(--line); }
.rail { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-2); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }

/* App shell */
.shell { display: grid; grid-template-rows: var(--header-h) 1fr; min-height: 100vh; }
.header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-inline: var(--space-5); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: var(--z-header); }
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 800; letter-spacing: var(--tracking-tight); }
.shell-body { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
.sidebar { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.sidebar .section-label { padding-inline: var(--space-3); margin-block: var(--space-3) var(--space-1); }
.nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 0.625rem var(--space-3); min-height: var(--control-md); border-radius: var(--r-sm); font-size: var(--text-body); font-weight: 500; color: var(--muted); text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
.nav-item:hover { background: var(--surface); color: var(--fg); }
.nav-item.is-active, .nav-item[aria-current="page"] { background: var(--surface-2); color: var(--fg); font-weight: 700; }
.nav-item svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.nav-item .badge { margin-inline-start: auto; }
.main { padding: var(--space-8) var(--space-6) var(--space-16); max-width: var(--content-max); margin-inline: auto; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-6); }
.page-head .actions { display: flex; gap: var(--space-2); flex: none; }
/* Mobile app bar + tab bar (Uber/Spotify-style). Styled unconditionally;
   the shell hides them ≥ 1024 and hides header/sidebar < 1024. */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); min-height: 56px; }
.appbar h1 { font-size: 1.375rem; }
.tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; inset-block-end: 0; height: var(--tabbar-h); padding-block-end: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); border-block-start: 1px solid var(--line); z-index: var(--z-tabbar); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--text-micro); font-weight: 600; color: var(--subtle); text-decoration: none; }
.tabbar a svg { width: var(--icon-lg); height: var(--icon-lg); }
.tabbar a.is-active, .tabbar a[aria-current="page"] { color: var(--fg); }
@media (min-width: 1024px) { .shell .appbar, .shell .tabbar { display: none; } }
@media (max-width: 1023px) {
  .shell { grid-template-rows: auto 1fr; }
  .shell .header, .shell .sidebar { display: none; }
  .shell-body { grid-template-columns: 1fr; }
  .main { padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--space-8)); }
  .page-head { flex-direction: column; align-items: stretch; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 1.25rem; font-size: var(--text-body); font-weight: 700; line-height: 1; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--fg); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.btn-primary { background: var(--surface-inv); color: var(--fg-inv); border-color: var(--surface-inv); }
.btn-primary:hover:not(:disabled) { opacity: 0.88; }
.btn-secondary { background: var(--surface-2); color: var(--fg); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); }
.btn-outline { border-color: var(--line-2); }
.btn-outline:hover:not(:disabled) { border-color: var(--fg); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); }
.btn-danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { opacity: 0.88; }
.btn-danger-ghost { color: var(--danger-fg); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-bg); }
.btn-live { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }  /* one accent moment: start/connect */
.btn-live:hover:not(:disabled) { opacity: 0.9; }
.btn-sm { min-height: var(--control-sm); padding-inline: 1rem; font-size: var(--text-sm); }
.btn-lg { min-height: var(--control-lg); padding-inline: 1.75rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--fg-inv); border-inline-end-color: transparent; animation: spin 0.7s linear infinite; }
.btn-secondary.is-loading::after, .btn-outline.is-loading::after, .btn-ghost.is-loading::after { border-color: var(--fg); border-inline-end-color: transparent; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-md); height: var(--control-md); border-radius: var(--r-pill); color: var(--muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
.icon-button:hover { background: var(--surface-2); color: var(--fg); }
.icon-button svg { width: var(--icon-md); height: var(--icon-md); }
.icon-button.is-filled { background: var(--surface-2); color: var(--fg); }
.icon-button.is-sm { width: var(--control-sm); height: var(--control-sm); }
.link { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.link:hover { text-decoration-color: var(--fg); }
.link.is-muted { color: var(--muted); font-weight: 500; }
.link.is-external::after { content: "↗"; font-size: 0.8em; margin-inline-start: 0.25em; }

/* ---------- Segmented control (Tesla/Uber) ---------- */
.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: var(--r-pill); gap: 2px; }
.segmented button { min-height: 34px; padding: 0 0.9rem; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; color: var(--muted); transition: background-color var(--dur-fast), color var(--dur-fast); }
.segmented button.is-active, .segmented button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--glow); }
.segmented.is-block { display: flex; } .segmented.is-block button { flex: 1; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-micro); font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: var(--r-pill); padding: 0.25rem 0.6rem; line-height: 1.4; white-space: nowrap; }
.badge.mono { font-weight: 500; }
.badge.is-count { padding-inline: 0.5rem; min-width: 1.4rem; justify-content: center; font-family: var(--font-mono); }
.state-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-micro); font-weight: 700; border-radius: var(--r-pill); padding: 0.22rem 0.6rem; line-height: 1.4; white-space: nowrap; }
.state-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.state-ok   { color: var(--signal-fg); background: var(--signal-bg); }
.state-bad  { color: var(--danger-fg); background: var(--danger-bg); }
.state-wait { color: var(--accent-fg); background: var(--accent-bg); }
.state-info { color: var(--info-fg);   background: var(--info-bg); }
.state-idle { color: var(--muted);     background: var(--surface-2); }
.state-idle::before { background: var(--subtle); }
.role-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-micro); font-weight: 700; border-radius: var(--r-pill); padding: 0.22rem 0.65rem; }
.role-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.role-student { color: var(--role-student); background: var(--role-student-bg); }
.role-teacher { color: var(--role-teacher); background: var(--role-teacher-bg); }
.role-admin   { color: var(--role-admin);   background: var(--role-admin-bg); }
.role-parent  { color: var(--role-parent);  background: var(--role-parent-bg); }
.role-staff   { color: var(--role-staff);   background: var(--role-staff-bg); }
[data-theme="light"] .role-student { color: var(--accent-fg); } [data-theme="light"] .role-teacher { color: var(--signal-fg); }
[data-theme="light"] .role-admin { color: var(--danger-fg); } [data-theme="light"] .role-parent { color: var(--info-fg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex: none; }
.dot-ok { background: var(--signal); } .dot-bad { background: var(--danger); } .dot-wait { background: var(--accent); } .dot-info { background: var(--info); }
.dot.is-live { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 50%, transparent); animation: pulse 2.4s ease-out infinite; }

/* ---------- Avatar ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); font-size: var(--text-sm); font-weight: 700; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--text-micro); }
.avatar-lg { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.75rem; }
.avatar.is-square { border-radius: var(--r-sm); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { margin-inline-start: -10px; box-shadow: 0 0 0 2px var(--bg); }
.avatar-group .avatar:first-child { margin-inline-start: 0; }

/* ---------- Tooltip ---------- */
.tooltip { position: relative; }
.tooltip::after { content: attr(data-tip); position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%); background: var(--surface-inv); color: var(--fg-inv); font-size: var(--text-caption); font-weight: 600; padding: 0.35rem 0.65rem; border-radius: var(--r-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); z-index: var(--z-tooltip); }
[dir="ltr"] .tooltip::after { transform: translateX(-50%); }
.tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }

/* ---------- Form controls ---------- */
.field { display: flex; flex-direction: column; }
.input, .textarea, .select { width: 100%; min-height: var(--control-md); font-size: var(--text-body); color: var(--fg); background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--r-sm); padding: 0.7rem 0.95rem; line-height: 1.4; transition: background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder, .textarea::placeholder { color: var(--subtle); }
.input:hover, .textarea:hover, .select:hover { background: var(--surface-3); }
.input:focus, .textarea:focus, .select:focus { background: var(--surface-2); border-color: var(--fg); box-shadow: none; outline: none; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.5; cursor: not-allowed; }
.input:read-only { color: var(--muted); }
.input-sm { min-height: var(--control-sm); padding: 0.45rem 0.8rem; font-size: var(--text-sm); }
.input-lg { min-height: var(--control-lg); font-size: 1.0625rem; padding-inline: 1.1rem; }
.textarea { min-height: 6.5rem; resize: vertical; }
.select { appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: left 0.85rem center; }
[dir="ltr"] .select { background-position: right 0.85rem center; }
.input.ltr { direction: ltr; text-align: left; font-family: var(--font-mono); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-start: 2.6rem; }
.input-group > svg { position: absolute; inset-inline-start: 0.9rem; width: var(--icon-sm); height: var(--icon-sm); color: var(--subtle); pointer-events: none; }
.input-group .input-aside { position: absolute; inset-inline-end: 0.9rem; font-size: var(--text-caption); color: var(--subtle); }
.input-group .input.has-aside { padding-inline-end: 3.4rem; }
.input-group.is-pill .input { border-radius: var(--r-pill); }

.check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-body); min-height: var(--control-sm); }
.check input { appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--line-control); border-radius: var(--r-xs); background: transparent; display: grid; place-content: center; transition: background-color var(--dur-fast), border-color var(--dur-fast); flex: none; }
.check input[type="radio"] { border-radius: 50%; }
.check input::before { content: ""; width: 12px; height: 12px; transform: scale(0); background: var(--fg-inv); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transition: transform var(--dur-fast); }
.check input[type="radio"]::before { clip-path: none; border-radius: 50%; width: 10px; height: 10px; }
.check input:checked, .check input:indeterminate { background: var(--surface-inv); border-color: var(--surface-inv); }
.check input:checked::before { transform: scale(1); }
.check input:indeterminate::before { transform: scale(1); clip-path: none; height: 2px; width: 12px; }
.check input:disabled { opacity: 0.4; cursor: not-allowed; }
.check.is-disabled { color: var(--subtle); cursor: not-allowed; }

.switch { position: relative; width: 52px; height: 32px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-3); display: inline-flex; align-items: center; transition: background-color var(--dur-base); flex: none; }
.switch-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--fg); transition: transform var(--dur-base) var(--ease-out); }
.switch.is-on { background: var(--signal); }
.switch.is-on .switch-dot { background: var(--on-signal); transform: translateX(-20px); }
[dir="ltr"] .switch.is-on .switch-dot { transform: translateX(20px); }
.switch:disabled { opacity: 0.4; cursor: not-allowed; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }
.switch-row + .switch-row { border-block-start: 1px solid var(--line); }

.dropzone { border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); background: var(--surface); transition: border-color var(--dur-fast), background-color var(--dur-fast); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--fg); background: var(--surface-2); }
.dropzone.is-error { border-color: var(--danger); }
.file-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--r-sm); font-size: var(--text-sm); }

.range { appearance: none; width: 100%; height: 6px; background: var(--surface-3); border-radius: 3px; outline: none; }
.range::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fg); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }

/* ---------- Feedback ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-md); background: var(--surface); font-size: var(--text-sm); }
.alert > svg { width: var(--icon-md); height: var(--icon-md); flex: none; }
.alert-title { font-weight: 700; font-size: var(--text-body); }
.alert-ok { background: var(--signal-bg); color: var(--signal-fg); }
.alert-bad { background: var(--danger-bg); color: var(--danger-fg); }
.alert-wait { background: var(--accent-bg); color: var(--accent-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); }
.toast { display: flex; align-items: center; gap: var(--space-3); min-width: 280px; max-width: 400px; padding: var(--space-3) var(--space-4); background: var(--surface-inv); color: var(--fg-inv); border-radius: var(--r-md); box-shadow: var(--shadow-float); font-size: var(--text-sm); font-weight: 600; }
.toast .btn-ghost { color: var(--fg-inv); min-height: var(--control-sm); }
.toast .btn-ghost:hover { background: color-mix(in srgb, var(--fg-inv) 12%, transparent); }
.toast-stack { position: fixed; inset-block-end: var(--space-5); inset-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); }
@media (max-width: 1023px) { .toast-stack { inset-inline: var(--space-4); inset-block-end: calc(var(--tabbar-h) + var(--space-4)); } .toast { max-width: none; } }
.notif { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); transition: background-color var(--dur-fast); }
.notif:hover { background: var(--surface); }
.notif.is-unread { background: var(--surface); }
.notif.is-unread .notif-title::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--info); margin-inline-start: 0.4rem; vertical-align: middle; }
.notif-title { font-weight: 700; font-size: var(--text-sm); }
.notif-meta { font-size: var(--text-caption); color: var(--subtle); }
.progress { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--fg); border-radius: 3px; transition: width var(--dur-slow) var(--ease-out); }
.progress.is-ok > span { background: var(--signal); } .progress.is-bad > span { background: var(--danger); }
.ring { --v: 0; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--fg) calc(var(--v) * 1%), var(--surface-3) 0); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 700; }
.ring::before { content: ""; position: absolute; width: 50px; height: 50px; border-radius: 50%; background: var(--surface); }
.ring span { position: relative; }
.ring { position: relative; }
.ring.is-ok { background: conic-gradient(var(--signal) calc(var(--v) * 1%), var(--surface-3) 0); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-xs); min-height: 0.9rem; }
.skeleton.is-text { height: 0.9rem; } .skeleton.is-title { height: 1.5rem; width: 40%; } .skeleton.is-circle { border-radius: 50%; } .skeleton.is-card { height: 120px; border-radius: var(--r-md); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); border-block-start-color: var(--fg); animation: spin 0.7s linear infinite; }
.spinner-sm { width: 14px; height: 14px; }
.empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--muted); background: var(--surface); border-radius: var(--r-md); }
.empty svg { width: 36px; height: 36px; margin: 0 auto var(--space-4); color: var(--subtle); }
.empty-title { font-weight: 700; color: var(--fg); font-size: var(--text-h3); margin-block-end: var(--space-1); }
.empty p { font-size: var(--text-sm); max-width: 34ch; margin-inline: auto; }
.empty .btn { margin-block-start: var(--space-5); }
.end-mark { text-align: center; color: var(--subtle); font-size: var(--text-caption); padding-block: var(--space-6); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 55%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Cards & tiles ---------- */
.card { background: var(--surface); border-radius: var(--r-md); }
.card.is-nested { background: var(--surface-2); border-radius: var(--r-sm); }
.card.is-outlined { background: transparent; border: 1px solid var(--line); }
.card-body { padding: var(--space-5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; }
.card-foot { padding: 0 var(--space-5) var(--space-5); display: flex; justify-content: flex-end; gap: var(--space-2); }
a.card, .card.is-interactive { display: block; text-decoration: none; color: inherit; transition: background-color var(--dur-fast), transform var(--dur-fast); }
a.card:hover, .card.is-interactive:hover { background: var(--surface-2); }
a.card:active, .card.is-interactive:active { transform: scale(0.99); }
.card.is-selected { box-shadow: 0 0 0 2px var(--fg); }
.card.is-live { background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 10%, var(--surface)), var(--surface) 60%); }
.module-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-height: 140px; }
.module-card .module-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--fg); margin-block-end: var(--space-1); }
.module-card .module-icon svg { width: var(--icon-md); height: var(--icon-md); }
.module-card p { color: var(--muted); font-size: var(--text-sm); flex: 1; }
.module-card .badge { align-self: flex-start; }
.tile { background: var(--surface); border-radius: var(--r-md); padding: var(--space-4); min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); text-decoration: none; color: inherit; transition: background-color var(--dur-fast), transform var(--dur-fast); }
.tile:hover { background: var(--surface-2); } .tile:active { transform: scale(0.98); }
.tile svg { width: var(--icon-lg); height: var(--icon-lg); color: var(--fg); }
.tile .tile-label { font-weight: 700; font-size: var(--text-sm); }
.tile .tile-value { font-size: var(--text-caption); color: var(--muted); }
.tile.is-on { background: var(--surface-inv); color: var(--fg-inv); } .tile.is-on svg { color: var(--fg-inv); } .tile.is-on .tile-value { color: color-mix(in srgb, var(--fg-inv) 70%, transparent); }

/* Status hero (Tesla/Starlink) */
.hero-status { background: var(--surface); border-radius: var(--r-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.hero-status .hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hero-status .hero-state { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--signal-fg); }
.hero-status .hero-number { font-size: var(--text-display); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-status .hero-sub { color: var(--muted); font-size: var(--text-sm); }
.hero-status .hero-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.hero-status .hero-meta > div { display: flex; flex-direction: column; gap: 2px; }
.hero-status .hero-meta strong { font-size: var(--text-h3); font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-status .hero-meta span { font-size: var(--text-caption); color: var(--subtle); }
.hero-status.is-bad .hero-state { color: var(--danger-fg); }
.hero-status.is-idle .hero-state { color: var(--muted); }

.stat { padding: var(--space-5); }
.stat-label { font-size: var(--text-caption); color: var(--muted); font-weight: 600; }
.stat-value { font-size: var(--text-hero); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.1; margin-block-start: var(--space-2); }
.stat-delta { font-size: var(--text-caption); margin-block-start: var(--space-2); font-weight: 600; }
.stat-delta.is-up { color: var(--signal-fg); } .stat-delta.is-down { color: var(--danger-fg); }
.spark { height: 28px; margin-block-start: var(--space-3); }
.spark path { fill: none; stroke: var(--fg); stroke-width: 1.5; }

.summary-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.9rem; border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-sm); font-weight: 600; }
.summary-chip strong { font-family: var(--font-mono); font-size: 1rem; }
.summary-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); }
.summary-chip.is-ok::before { background: var(--signal); } .summary-chip.is-bad::before { background: var(--danger); } .summary-chip.is-wait::before { background: var(--accent); }
.summary-chip[aria-pressed="true"] { background: var(--surface-3); }

/* ---------- Lists (Tesla settings rows) ---------- */
.list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 56px; font-size: var(--text-body); text-decoration: none; color: inherit; }
.list-item + .list-item { border-block-start: 1px solid var(--line); }
a.list-item:hover, button.list-item:hover { background: var(--surface-2); }
.list-item .meta { color: var(--subtle); font-size: var(--text-caption); }
.list-item .value { color: var(--muted); font-size: var(--text-sm); }
.list-item .chev { width: var(--icon-sm); height: var(--icon-sm); color: var(--subtle); flex: none; transform: scaleX(-1); }
[dir="ltr"] .list-item .chev { transform: none; }
.list-item .lead { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; flex: none; }
.list-item .lead svg { width: var(--icon-md); height: var(--icon-md); }

/* ---------- Table ---------- */
.table-wrap { background: var(--surface); border-radius: var(--r-md); overflow: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: start; font-weight: 600; font-size: var(--text-caption); color: var(--subtle); padding: 0.85rem 1rem; white-space: nowrap; border-block-end: 1px solid var(--line); }
.table td { padding: 0.85rem 1rem; border-block-end: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-block-end: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table tr.is-selected td { background: var(--surface-2); }
.table .num, .table .mono { direction: ltr; unicode-bidi: isolate; text-align: end; }
.table .row-actions { opacity: 0; transition: opacity var(--dur-fast); }
.table tr:hover .row-actions, .table tr:focus-within .row-actions { opacity: 1; }
.table-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block-end: var(--space-3); }
.table-toolbar .input-group { flex: 1; min-width: 220px; }
.bulk-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); background: var(--surface-inv); color: var(--fg-inv); border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 600; }
.bulk-bar .btn { color: var(--fg-inv); background: color-mix(in srgb, var(--fg-inv) 12%, transparent); }
@media (max-width: 639px) {
  .table.is-responsive, .table.is-responsive tbody, .table.is-responsive tr, .table.is-responsive td { display: block; }
  .table.is-responsive thead { display: none; }
  .table.is-responsive tr { padding: var(--space-4); border-block-end: 1px solid var(--line); }
  .table.is-responsive td { border: 0; padding: 0.25rem 0; display: flex; justify-content: space-between; gap: var(--space-3); }
  .table.is-responsive td::before { content: attr(data-label); color: var(--subtle); font-size: var(--text-caption); }
  .table.is-responsive .row-actions { opacity: 1; }
  .bulk-bar { position: fixed; inset-inline: var(--space-4); inset-block-end: calc(var(--tabbar-h) + var(--space-3)); z-index: var(--z-sticky); box-shadow: var(--shadow-float); }
}

/* ---------- Timeline / accordion ---------- */
.timeline { position: relative; padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: var(--space-5); }
.timeline::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 5px; width: 2px; background: var(--surface-3); border-radius: 1px; }
.timeline-item { position: relative; font-size: var(--text-sm); }
.timeline-item::before { content: ""; position: absolute; inset-inline-start: -1.5rem; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); }
.timeline-item.is-ok::before { background: var(--signal); } .timeline-item.is-bad::before { background: var(--danger); }
.timeline-item .meta { color: var(--subtle); font-size: var(--text-caption); }
.accordion { background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
.accordion details + details { border-block-start: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4); font-weight: 700; font-size: var(--text-body); min-height: 56px; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; width: 9px; height: 9px; border-inline-end: 2px solid var(--subtle); border-block-end: 2px solid var(--subtle); transform: rotate(45deg); transition: transform var(--dur-fast); margin-inline-end: 6px; }
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion .accordion-body { padding: 0 var(--space-4) var(--space-4); color: var(--muted); font-size: var(--text-sm); }

/* ---------- Menus / popovers / tabs / pagination ---------- */
.menu { min-width: 220px; background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-2); box-shadow: var(--shadow-float), var(--glow); display: flex; flex-direction: column; gap: 1px; z-index: var(--z-popover); }
.menu-label { font-size: var(--text-micro); font-weight: 600; color: var(--subtle); padding: 0.45rem 0.7rem; }
.menu-item { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 0.5rem 0.7rem; border-radius: var(--r-xs); color: var(--fg); font-size: var(--text-sm); font-weight: 500; text-align: start; width: 100%; text-decoration: none; transition: background-color var(--dur-fast); }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-3); }
.menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-item.is-danger { color: var(--danger-fg); }
.menu-item svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
.menu-item kbd { margin-inline-start: auto; }
.menu-sep { border: 0; border-top: 1px solid var(--line); margin: 0.35rem 0; }
.popover { background: var(--surface-2); border-radius: var(--r-md); padding: var(--space-4); box-shadow: var(--shadow-float), var(--glow); max-width: 340px; font-size: var(--text-sm); z-index: var(--z-popover); }
.tabs { display: flex; gap: var(--space-1); border-block-end: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--control-md); padding: 0 0.9rem; margin-block-end: -1px; border-block-end: 2px solid transparent; color: var(--muted); font-size: var(--text-body); font-weight: 600; white-space: nowrap; text-decoration: none; transition: color var(--dur-fast), border-color var(--dur-fast); }
.tab:hover { color: var(--fg); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--fg); font-weight: 700; border-block-end-color: var(--fg); }
.tab svg { width: var(--icon-sm); height: var(--icon-sm); }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-caption); color: var(--subtle); }
.breadcrumb a { color: var(--subtle); text-decoration: none; } .breadcrumb a:hover { color: var(--fg); }
.breadcrumb .current { color: var(--muted); font-weight: 600; }
.pagination { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.pagination .page { min-width: var(--control-sm); height: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); color: var(--muted); font-family: var(--font-mono); font-weight: 600; }
.pagination .page:hover { background: var(--surface-2); color: var(--fg); }
.pagination .page.is-active { background: var(--surface-inv); color: var(--fg-inv); }
.pagination .page:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .info { color: var(--subtle); font-size: var(--text-caption); margin-inline-start: var(--space-2); }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); z-index: var(--z-overlay); display: grid; place-items: center; padding: var(--space-4); }
.modal { width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float), var(--glow); display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--space-4)); }
.modal-lg { max-width: 740px; } .modal-sm { max-width: 400px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-5) 0; }
.modal-body { padding: var(--space-4) var(--space-5); overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.modal-foot { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-5); }
.modal-foot .btn-primary, .modal-foot .btn-danger { flex: 1; }
.modal-help { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-caption); }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: var(--space-2) auto 0; display: none; }
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(440px, 100%); background: var(--surface); box-shadow: var(--shadow-float); z-index: var(--z-drawer); display: flex; flex-direction: column; border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); }
.drawer.is-start { inset-inline-end: auto; inset-inline-start: 0; border-radius: 0; border-start-end-radius: var(--r-lg); border-end-end-radius: var(--r-lg); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); }
.drawer-body { padding: 0 var(--space-5) var(--space-5); overflow: auto; flex: 1; }
.drawer-foot { padding: var(--space-3) var(--space-5) var(--space-5); display: flex; gap: var(--space-2); }
@media (max-width: 639px) {
  .overlay { align-items: end; padding: 0; }
  .modal { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; padding-block-end: env(safe-area-inset-bottom); }
  .sheet-handle { display: block; }
  .modal-foot { flex-direction: column; }
  .drawer { inset-block-start: 8vh; inset-inline: 0; width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ---------- Astin chrome ---------- */
.org-switcher { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 0.85rem 0 0.35rem; border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-sm); font-weight: 700; }
.org-switcher:hover { background: var(--surface-2); }
.org-switcher svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--subtle); }
.wallet { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 0.9rem; border-radius: var(--r-pill); background: var(--surface); font-size: var(--text-sm); box-shadow: var(--glow); }
.wallet strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-body); }
.wallet .unit { color: var(--subtle); font-size: var(--text-caption); }
.att-time { font-family: var(--font-mono); color: var(--muted); font-size: var(--text-caption); direction: ltr; unicode-bidi: isolate; }

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-mobile { display: none; }
@media (max-width: 639px) { .hide-mobile { display: none !important; } .show-mobile { display: initial; } }

/* ---------- In-app notifications (v2) ---------- */
/* Bell with unread badge */
.bell { position: relative; }
.bell .bell-badge { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--info); color: var(--on-info); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 700; display: grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
.bell .bell-badge.is-dot { min-width: 8px; height: 8px; padding: 0; inset-block-start: 9px; inset-inline-end: 9px; }

/* Push-style banner that slides in from the top (Uber/iOS-style) */
.inapp-stack { position: fixed; inset-block-start: var(--space-3); inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-inline: var(--space-4); z-index: var(--z-toast); pointer-events: none; }
.inapp { pointer-events: auto; width: min(420px, 100%); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--shadow-float), var(--glow); backdrop-filter: blur(16px); font-size: var(--text-sm); touch-action: pan-x; }
.inapp .inapp-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-3); display: grid; place-items: center; color: var(--fg); flex: none; }
.inapp .inapp-icon svg { width: var(--icon-md); height: var(--icon-md); }
.inapp .inapp-icon.is-ok { background: var(--signal-bg); color: var(--signal-fg); }
.inapp .inapp-icon.is-bad { background: var(--danger-bg); color: var(--danger-fg); }
.inapp .inapp-icon.is-wait { background: var(--accent-bg); color: var(--accent-fg); }
.inapp .inapp-icon.is-info { background: var(--info-bg); color: var(--info-fg); }
.inapp .inapp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inapp .inapp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.inapp .inapp-title { font-weight: 700; font-size: var(--text-body); }
.inapp .inapp-time { font-size: var(--text-micro); color: var(--subtle); white-space: nowrap; }
.inapp .inapp-text { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inapp .inapp-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.inapp .inapp-close { align-self: start; }
.inapp .inapp-progress { grid-column: 1 / -1; height: 2px; background: var(--surface-3); border-radius: 1px; overflow: hidden; margin-block-start: var(--space-1); }
.inapp .inapp-progress > span { display: block; height: 100%; background: var(--fg); width: 100%; transform-origin: right; }
[dir="ltr"] .inapp .inapp-progress > span { transform-origin: left; }
.inapp.is-entering { animation: inapp-in var(--dur-slow) var(--ease-out); }
.inapp.is-leaving { animation: inapp-out var(--dur-base) var(--ease-standard) forwards; }
@keyframes inapp-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes inapp-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@media (max-width: 1023px) { .inapp-stack { inset-block-start: calc(env(safe-area-inset-top) + var(--space-2)); } }

/* Notification center (bell panel) */
.notif-center { width: min(400px, 100%); max-height: 70vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float), var(--glow); overflow: hidden; }
.notif-center .nc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); }
.notif-center .nc-head h2 { font-size: var(--text-h3); }
.notif-center .nc-filters { padding: 0 var(--space-4) var(--space-3); }
.notif-center .nc-body { overflow: auto; flex: 1; padding: 0 var(--space-2) var(--space-2); }
.notif-center .nc-day { font-size: var(--text-micro); font-weight: 700; color: var(--subtle); padding: var(--space-3) var(--space-2) var(--space-1); }
.notif-center .nc-foot { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); text-align: center; }
.notif { align-items: flex-start; }
.notif .notif-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--fg); flex: none; }
.notif .notif-icon svg { width: var(--icon-sm); height: var(--icon-sm); }
.notif .notif-icon.is-ok { background: var(--signal-bg); color: var(--signal-fg); } .notif .notif-icon.is-bad { background: var(--danger-bg); color: var(--danger-fg); } .notif .notif-icon.is-wait { background: var(--accent-bg); color: var(--accent-fg); } .notif .notif-icon.is-info { background: var(--info-bg); color: var(--info-fg); }
.notif .notif-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.notif.is-unread { background: var(--surface-2); }
.notif .notif-module { font-weight: 600; color: var(--muted); }
a.notif, button.notif { text-decoration: none; color: inherit; text-align: start; width: 100%; }
.notif .grow { display: flex; flex-direction: column; gap: 3px; line-height: 1.5; }

/* ============================================================
   v2.1 additions — documented in references but never built
   ============================================================ */

/* ---------- Combobox ---------- */
.combobox { position: relative; }
.combobox-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: var(--control-md); padding: 0.35rem 0.6rem; padding-inline-start: 2.6rem; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--r-sm); position: relative; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.combobox-field:hover { background: var(--surface-3); }
.combobox-field:focus-within { border-color: var(--fg); background: var(--surface-2); }
.combobox-field > svg { position: absolute; inset-inline-start: 0.9rem; width: var(--icon-sm); height: var(--icon-sm); color: var(--subtle); }
.combobox-field input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; font-size: var(--text-body); color: var(--fg); padding: 0.3rem 0.2rem; }
.combobox-field input::placeholder { color: var(--subtle); }
.combobox-field .spinner { margin-inline-start: auto; }
.chip { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding-inline: 0.65rem 0.2rem; border-radius: var(--r-pill); background: var(--surface-3); color: var(--fg); font-size: var(--text-sm); font-weight: 600; }
.chip button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
.chip button:hover { background: var(--surface-2); color: var(--fg); }
.chip button svg { width: 14px; height: 14px; }
.combobox .menu { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px); z-index: var(--z-popover); max-height: 280px; overflow: auto; }
.menu-item[aria-selected="true"], .menu-item.is-highlighted { background: var(--surface-3); }
.menu-item .check-mark { margin-inline-start: auto; width: var(--icon-sm); height: var(--icon-sm); color: var(--fg); }
.menu-item.is-create { color: var(--fg); font-weight: 700; }

/* ---------- Jalali date picker ---------- */
.datepicker { width: 304px; padding: var(--space-4); background: var(--surface-2); border-radius: var(--r-md); box-shadow: var(--shadow-float), var(--glow); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-block-end: var(--space-3); }
.dp-title { font-weight: 700; font-size: var(--text-body); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-dow { font-size: var(--text-caption); font-weight: 600; color: var(--subtle); height: 28px; display: grid; place-items: center; }
.dp-day { height: 38px; border-radius: var(--r-pill); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--fg); transition: background-color var(--dur-fast); }
.dp-day:hover:not(:disabled) { background: var(--surface-3); }
.dp-day.is-friday { color: var(--muted); }
.dp-day.is-outside, .dp-day:disabled { color: var(--subtle); cursor: not-allowed; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--line-control); }
.dp-day.is-in-range { background: var(--surface-3); border-radius: 0; }
.dp-day.is-selected, .dp-day[aria-selected="true"] { background: var(--surface-inv); color: var(--fg-inv); font-weight: 700; }
.dp-presets { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--line); }

/* ---------- Number stepper (numbers are LTR objects) ---------- */
.stepper { display: inline-flex; align-items: center; direction: ltr; background: var(--surface-2); border: 1px solid var(--line-control); border-radius: var(--r-pill); height: var(--control-md); }
.stepper button { width: var(--control-md); height: 100%; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--fg); }
.stepper button:hover:not(:disabled) { background: var(--surface-3); }
.stepper button:disabled { color: var(--subtle); cursor: not-allowed; }
.stepper button svg { width: var(--icon-sm); height: var(--icon-sm); }
.stepper output, .stepper input { min-width: 3ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border: 0; background: none; font-size: var(--text-body); color: var(--fg); width: 4ch; }

/* ---------- Command palette (⌘K) ---------- */
.cmdk { width: min(640px, 100%); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-float), var(--glow); overflow: hidden; }
.cmdk-search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); }
.cmdk-search svg { width: var(--icon-md); height: var(--icon-md); color: var(--subtle); flex: none; }
.cmdk-search input { flex: 1; border: 0; outline: none; background: none; font-size: var(--text-h3); color: var(--fg); }
.cmdk-search input::placeholder { color: var(--subtle); }
.cmdk-body { max-height: 360px; overflow: auto; padding: var(--space-2); }
.cmdk-body .menu-item { min-height: var(--control-md); }
.cmdk-body .menu-item kbd { margin-inline-start: auto; }
.cmdk-foot { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-block-start: 1px solid var(--line); font-size: var(--text-caption); color: var(--subtle); }

/* ---------- Chart primitives (Reports only; never on a module home) ---------- */
.chart { display: grid; gap: var(--space-3); }
.chart-bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 160px; padding-block-end: var(--space-1); border-block-end: 1px solid var(--line); }
.chart-bar { flex: 1; min-width: 12px; background: var(--fg); border-radius: var(--r-xs) var(--r-xs) 2px 2px; position: relative; transition: height var(--dur-slow) var(--ease-out); }
.chart-bar.is-muted { background: var(--surface-3); }
.chart-bar.is-ok { background: var(--signal); } .chart-bar.is-bad { background: var(--danger); } .chart-bar.is-wait { background: var(--accent); } .chart-bar.is-info { background: var(--info); }
.chart-axis { display: flex; gap: var(--space-2); font-size: var(--text-caption); color: var(--subtle); font-variant-numeric: tabular-nums; }
.chart-axis > span { flex: 1; text-align: center; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-caption); color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--fg); }

/* ---------- Media cover (user-uploaded class/library covers) ----------
   Fixes the classes page: uploaded scans rendered full-height and dominated the grid. */
.media-cover { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; display: grid; place-items: center; color: var(--subtle); }
.media-cover > img { width: 100%; height: 100%; object-fit: cover; }
.media-cover > svg { width: var(--icon-lg); height: var(--icon-lg); }
.card.has-cover { padding: var(--space-2); display: grid; gap: var(--space-3); }
.card.has-cover .card-text { padding: 0 var(--space-3) var(--space-3); }

/* ---------- Brand mark ---------- */
.brand-mark { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-h3); color: var(--fg); text-decoration: none; min-height: var(--control-md); padding-inline: var(--space-1); border-radius: var(--r-sm); }
.brand-mark svg { height: 26px; width: auto; }

/* ---------- Marketing section rhythm (astin.app) ---------- */
.mk-section { padding-block: var(--space-16); }
.mk-section + .mk-section { padding-block-start: 0; }
@media (max-width: 639px) { .mk-section { padding-block: var(--space-10); } }

/* ---------- Skip link ---------- */
.skip-link { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100px; z-index: var(--z-tooltip); background: var(--surface-inv); color: var(--fg-inv); padding: var(--space-3) var(--space-4); border-radius: var(--r-pill); font-weight: 700; }
.skip-link:focus { inset-block-start: var(--space-3); }