/* [next]/internal/font/google/dm_sans_78e3e10c.module.css [app-client] (css) */
@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../media/c3cb240f9c892514-s.163v2i5cux7-c.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: DM Sans;
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../media/5c285b27cdda1fe8-s.p.0yo6-5yoeeudq.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: DM Sans Fallback;
  src: local(Arial);
  ascent-override: 94.9%;
  descent-override: 29.66%;
  line-gap-override: 0.0%;
  size-adjust: 104.53%;
}

.dm_sans_78e3e10c-module__ZPtN2q__className {
  font-family: DM Sans, DM Sans Fallback;
  font-style: normal;
}

.dm_sans_78e3e10c-module__ZPtN2q__variable {
  --font-dm-sans: "DM Sans", "DM Sans Fallback";
}

/* [next]/internal/font/google/plus_jakarta_sans_2f34c5d8.module.css [app-client] (css) */
@font-face {
  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/0b1dc8ddaa74ba49-s.04o39dzmj.ey..woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/e629b5bc06499d58-s.0b_~8bw~gzh90.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/1a099d89ee94ee96-s.0_qb~~5cn13jl.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../media/fba5a26ea33df6a3-s.p.0eehd8tgys7nv.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Plus Jakarta Sans Fallback;
  src: local(Arial);
  ascent-override: 98.88%;
  descent-override: 21.15%;
  line-gap-override: 0.0%;
  size-adjust: 104.98%;
}

.plus_jakarta_sans_2f34c5d8-module__elNu7G__className {
  font-family: Plus Jakarta Sans, Plus Jakarta Sans Fallback;
  font-style: normal;
}

.plus_jakarta_sans_2f34c5d8-module__elNu7G__variable {
  --font-plus-jakarta-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback";
}

/* [next]/internal/font/google/jetbrains_mono_84d6efd.module.css [app-client] (css) */
@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/13bf9871fe164e7f-s.0s19wthhh_6~m.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/cc545e633e20c56d-s.0dza.stei.9v7.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/71b036adf157cdcf-s.03nf~dfjdkf~..woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/89b21bb081cb7469-s.0gfhww.tctz1o.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/3fe682a82f50d426-s.09q3q1i5159bl.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../media/70bc3e132a0a741e-s.p.1409xf.ylxg8g.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono Fallback;
  src: local(Arial);
  ascent-override: 75.79%;
  descent-override: 22.29%;
  line-gap-override: 0.0%;
  size-adjust: 134.59%;
}

.jetbrains_mono_84d6efd-module__5Hl15a__className {
  font-family: JetBrains Mono, JetBrains Mono Fallback;
  font-style: normal;
}

.jetbrains_mono_84d6efd-module__5Hl15a__variable {
  --font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback";
}

/* [project]/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--font-sans);
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: var(--font-mono);
    --spacing: .25rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-semibold: 600;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-bg: var(--bg);
    --color-primary: var(--primary);
    --spacing-1: var(--sp-1);
    --spacing-4: var(--sp-4);
    --font-display: var(--font-display);
  }
}

@layer tokens {
  :root {
    --surface: #fff;
    --on-primary: #fff;
    --accent: #cf752d;
    --gold: #ca9d33;
    --plum: #7e539c;
    --teal: #008c8c;
    --cyan: #008fae;
    --success: #318c4c;
    --info: #0e84b7;
    --warning: #dc932e;
    --danger: #c04442;
    --success-soft: #d8f9dd;
    --info-soft: #dcf2ff;
    --warning-soft: #ffeacf;
    --danger-soft: #ffe7e4;
    --accent-soft: #ffe9d7;
    --gold-soft: #ffecc4;
    --hue-success: 150;
    --hue-info: 235;
    --hue-warning: 70;
    --hue-danger: 25;
    --hue-accent: 55;
    --hue-gold: 85;
    --hue-plum: 310;
    --hue-teal: 195;
    --hue-cyan: 220;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 48px;
    --r-1: 4px;
    --r-2: 7px;
    --r-3: 10px;
    --r-4: 14px;
    --r-5: 18px;
    --r-pill: 999px;
    --fs-xs: .75rem;
    --fs-sm: .8125rem;
    --fs-base: .875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.6875rem;
    --z-sticky: 10;
    --z-overlay: 100;
    --z-modal: 110;
    --row-h: 56px;
    --ctl-h: 40px;
    --card-pad: 20px;
    --font-sans: var(--font-dm-sans, "DM Sans", system-ui, sans-serif);
    --font-display: var(--font-plus-jakarta-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    --font-mono: var(--font-jetbrains-mono, "JetBrains Mono", monospace);
  }

  @supports (color: lab(0% 0 0)) {
    :root {
      --surface: lab(100% 0 0);
      --on-primary: lab(100% 0 0);
      --accent: lab(58.6831% 32.4309 53.32);
      --gold: lab(67.7008% 9.57128 58.8412);
      --plum: lab(42.5454% 29.0309 -33.1565);
      --teal: lab(52.3368% -32.7193 -9.81976);
      --cyan: lab(54.1716% -26.7603 -28.1369);
      --success: lab(51.755% -39.2699 25.9125);
      --info: lab(51.3206% -16.305 -35.5156);
      --warning: lab(67.2417% 22.388 60.9729);
      --danger: lab(47.3653% 50.4116 29.9252);
      --success-soft: lab(94.8646% -14.8135 9.47288);
      --info-soft: lab(94.2953% -7.24405 -12.3377);
      --warning-soft: lab(94.1857% 7.75608 22.3147);
      --danger-soft: lab(93.8292% 12.2803 6.63641);
      --accent-soft: lab(94.0275% 10.1204 16.0984);
      --gold-soft: lab(94.3887% 2.61948 23.6209);
    }
  }

  [data-density="compact"] {
    --sp-3: 10px;
    --sp-4: 12px;
    --sp-5: 14px;
    --sp-6: 16px;
    --row-h: 48px;
    --ctl-h: 36px;
    --card-pad: 14px;
  }

  [data-density="comfy"] {
    --sp-3: 14px;
    --sp-4: 20px;
    --sp-5: 24px;
    --sp-6: 28px;
    --row-h: 64px;
    --ctl-h: 44px;
    --card-pad: 24px;
  }

  :root, [data-palette="terracota"] {
    --brand-h: 40;
    --brand-c: .135;
    --brand-l: 58%;
    --neutral-h: 70;
  }

  [data-palette="olivo"] {
    --brand-h: 130;
    --brand-c: .075;
    --brand-l: 50%;
    --neutral-h: 120;
  }

  [data-palette="cobalto"] {
    --brand-h: 250;
    --brand-c: .14;
    --brand-l: 52%;
    --neutral-h: 240;
  }

  [data-palette="granate"] {
    --brand-h: 10;
    --brand-c: .14;
    --brand-l: 48%;
    --neutral-h: 10;
  }

  :root, [data-palette] {
    --primary: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
    --primary-2: oklch(calc(var(--brand-l) + 14%) calc(var(--brand-c) * .75) var(--brand-h));
    --primary-soft: oklch(96% .025 var(--brand-h));
    --primary-ink: oklch(min(44%, calc(var(--brand-l) - 10%)) calc(var(--brand-c) * .9) var(--brand-h));
    --primary-dark: oklch(calc(var(--brand-l) - 16%) calc(var(--brand-c) * .85) var(--brand-h));
    --sidebar-bg: oklch(24% calc(var(--brand-c) * .45) var(--brand-h));
    --sidebar-fg: oklch(88% .015 var(--brand-h));
    --sidebar-strong: oklch(98% .005 var(--brand-h));
    --sidebar-muted: oklch(66% .03 var(--brand-h));
    --sidebar-hover: #ffffff0f;
    --sidebar-active: #ffffff1a;
    --bg: oklch(96.4% .01 var(--neutral-h));
    --bg-2: oklch(95% .01 var(--neutral-h));
    --surface-2: oklch(97.6% .008 var(--neutral-h));
    --line: oklch(91.5% .01 var(--neutral-h));
    --line-2: oklch(80% .012 var(--neutral-h));
    --muted: oklch(53% .02 var(--neutral-h));
    --fg: oklch(22% .025 var(--brand-h));
    --fg-2: oklch(36% .02 var(--brand-h));
    --shadow-1: 0 1px 2px oklch(25% .04 var(--brand-h) / .06), 0 12px 30px -12px oklch(25% .06 var(--brand-h) / .22);
    --shadow-2: 0 2px 6px oklch(25% .04 var(--brand-h) / .08), 0 24px 48px -16px oklch(25% .06 var(--brand-h) / .3);
    --shadow-brand: 0 6px 16px -6px var(--primary);
    --focus-ring: 0 0 0 3px var(--primary);
  }

  @supports (color: lab(0% 0 0)) {
    :root, [data-palette] {
      --sidebar-hover: lab(100% 0 0 / .06);
      --sidebar-active: lab(100% 0 0 / .1);
    }
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root, [data-palette] {
      --focus-ring: 0 0 0 3px color-mix(in oklch, var(--primary) 22%, transparent);
    }
  }
}

@layer base {
  *, :before, :after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    background: var(--bg);
    height: 100%;
    color: var(--fg);
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
  }

  :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
  }

  h1, h2, h3, h4 {
    color: var(--fg);
    font-family: var(--font-display);
    letter-spacing: -.01em;
    line-height: 1.2;
  }

  a {
    color: inherit;
  }

  .num {
    font-variant-numeric: tabular-nums;
  }

  .mono {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .text-ink {
    color: var(--primary-ink);
  }

  .kbd {
    border-radius: var(--r-1);
    box-shadow: inset 0 0 0 1px var(--line);
    font-family: var(--font-mono);
    color: var(--muted);
    padding: 1px 5px;
    font-size: .625rem;
  }

  .note {
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .note--danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  .note--xs {
    font-size: var(--fs-xs);
  }

  .text-secondary {
    color: var(--fg-2);
  }

  .is-danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  .is-primary {
    color: var(--primary-ink);
  }

  .is-success {
    color: oklch(45% .13 var(--hue-success));
  }

  .is-warning {
    color: oklch(48% .11 var(--hue-warning));
  }

  .title-lg {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: -.015em;
    color: var(--fg);
    font-weight: 700;
  }

  .note--center {
    padding-top: var(--sp-8);
    text-align: center;
  }

  .section-title {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    letter-spacing: -.01em;
    color: var(--fg);
    font-weight: 700;
  }

  .text-strong {
    color: var(--fg);
    font-weight: 600;
  }

  .eyebrow {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 600;
  }

  .link {
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    cursor: pointer;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
  }

  .link:hover {
    text-decoration: underline;
  }

  .link-button {
    color: var(--fg);
    font-size: var(--fs-base);
    text-align: left;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--line-2);
    text-decoration-color: var(--line-2);
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    font-weight: 500;
  }

  .link-button:hover {
    color: var(--primary-ink);
  }

  .amount {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }

  .amount--danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  .amount--success {
    color: oklch(45% .13 var(--hue-success));
  }

  .screen {
    background: var(--bg);
    flex-direction: column;
    min-height: 100dvh;
    display: flex;
  }

  .scroll {
    -webkit-overflow-scrolling: touch;
    flex: 1;
    overflow-y: auto;
  }

  .hr {
    background: var(--line);
    border: none;
    height: 1px;
    margin: 0;
  }

  .press {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .sr-only {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components {
  .btn {
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    height: var(--ctl-h);
    padding: 0 var(--sp-4);
    border-radius: var(--r-3);
    background: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    white-space: nowrap;
    box-shadow: var(--shadow-brand);
    -webkit-tap-highlight-color: transparent;
    border: 1px solid #0000;
    font-weight: 600;
    line-height: 1;
    transition: background .15s, box-shadow .15s, opacity .15s;
    display: inline-flex;
  }

  .btn:hover {
    background: var(--primary-dark);
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn:disabled {
    opacity: .45;
    box-shadow: none;
    transform: none;
  }

  .btn--secondary {
    background: var(--surface);
    border-color: var(--line);
    color: var(--fg);
    box-shadow: none;
  }

  .btn--secondary:hover {
    background: var(--surface-2);
  }

  .btn--ghost {
    color: var(--primary-ink);
    box-shadow: none;
    background: none;
  }

  .btn--ghost:hover {
    background: var(--primary-soft);
  }

  .btn--soft {
    background: var(--primary-soft);
    color: var(--primary-ink);
    box-shadow: none;
  }

  .btn--soft:hover {
    background: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn--soft:hover {
      background: color-mix(in oklch, var(--primary) 18%, var(--surface));
    }
  }

  .btn--danger {
    background: var(--danger);
    box-shadow: 0 6px 16px -6px var(--danger);
  }

  .btn--danger:hover {
    background: var(--danger);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn--danger:hover {
      background: color-mix(in oklch, var(--danger) 85%, black);
    }
  }

  .btn--sm {
    height: 32px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    border-radius: var(--r-2);
  }

  .btn--icon {
    width: var(--ctl-h);
    padding: 0;
  }

  .btn--icon.btn--sm {
    width: 32px;
  }

  .btn--pill {
    border-radius: var(--r-pill);
  }

  .btn--full {
    width: 100%;
  }

  .icon-btn {
    padding: var(--sp-1);
    border-radius: var(--r-2);
    color: var(--muted);
    background: none;
    border: none;
    place-items: center;
    display: inline-grid;
  }

  .icon-btn:hover {
    background: var(--surface-2);
    color: var(--fg);
  }

  .icon-btn:disabled {
    opacity: .4;
  }

  .icon-btn--danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  .icon-btn--primary {
    color: var(--primary-ink);
  }

  .bare-btn {
    background: none;
    border: none;
    padding: 0;
  }

  .icon-btn--danger:disabled {
    color: var(--muted);
  }

  .btn--outline, .btn--tint {
    box-shadow: none;
    border-color: var(--btn-tone);
    color: var(--btn-ink);
    background: none;
  }

  .btn--outline:hover {
    background: var(--surface-2);
  }

  .btn--tint {
    background: var(--btn-tone);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn--tint {
      background: color-mix(in oklch, var(--btn-tone) 12%, var(--surface));
    }
  }

  .btn--tint:hover {
    background: var(--btn-tone);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .btn--tint:hover {
      background: color-mix(in oklch, var(--btn-tone) 20%, var(--surface));
    }
  }

  .btn--tone-success {
    --btn-tone: var(--success);
    --btn-ink: oklch(40% .12 var(--hue-success));
  }

  .btn--tone-danger {
    --btn-tone: var(--danger);
    --btn-ink: oklch(48% .16 var(--hue-danger));
  }

  .btn--tone-warning {
    --btn-tone: var(--warning);
    --btn-ink: oklch(44% .1 var(--hue-warning));
  }

  .btn--tone-primary {
    --btn-tone: var(--primary);
    --btn-ink: var(--primary-ink);
  }

  .btn--text {
    height: auto;
    box-shadow: none;
    color: var(--primary-ink);
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
  }

  .btn--text:hover {
    background: none;
    text-decoration: underline;
  }

  .btn--text.btn--tone-danger {
    color: var(--btn-ink);
  }

  .btn--text.btn--muted {
    color: var(--muted);
    font-weight: 500;
    font-size: var(--fs-xs);
  }

  .btn--text.btn--muted:hover {
    color: var(--fg);
  }

  .card {
    background: var(--surface);
    border-radius: var(--r-4);
    padding: var(--card-pad);
    box-shadow: var(--shadow-1);
    min-width: 0;
  }

  .card:has( > .card__header,  > .card__body,  > .card__footer,  > .tabs) {
    flex-direction: column;
    padding: 0;
    display: flex;
    overflow: hidden;
  }

  .card__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: 18px var(--card-pad) 6px;
    display: flex;
  }

  .card__title {
    font-size: var(--fs-md);
    letter-spacing: -.01em;
    font-weight: 700;
  }

  .card__actions {
    align-items: center;
    gap: var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-sm);
    display: flex;
  }

  .card__body {
    padding: var(--sp-4) var(--card-pad) var(--card-pad);
    flex: 1;
  }

  .card__header + .card__body {
    padding-top: var(--sp-3);
  }

  .card__footer {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--card-pad) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--muted);
    display: flex;
  }

  .card > .tabs:first-child {
    padding: var(--sp-4) var(--card-pad) 0;
  }

  .card__body:has( > .table-wrap) {
    padding-left: 0;
    padding-right: 0;
  }

  .card-grid {
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    display: grid;
  }

  .card-grid--wide {
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .chip {
    --chip-bg: var(--surface-2);
    --chip-fg: var(--fg-2);
    align-items: center;
    gap: var(--sp-1);
    border-radius: var(--r-2);
    background: var(--chip-bg);
    color: var(--chip-fg);
    white-space: nowrap;
    padding: 4px 10px;
    font-size: .71875rem;
    font-weight: 700;
    line-height: 1.3;
    display: inline-flex;
  }

  .chip--primary {
    --chip-bg: var(--primary-soft);
    --chip-fg: var(--primary-ink);
  }

  .chip--success, .chip--info, .chip--warning, .chip--danger, .chip--accent, .chip--gold, .chip--plum, .chip--teal, .chip--cyan {
    --chip-bg: oklch(93% .065 var(--chip-h));
    --chip-fg: oklch(40% .12 var(--chip-h));
  }

  .chip--success {
    --chip-h: var(--hue-success);
  }

  .chip--info {
    --chip-h: var(--hue-info);
  }

  .chip--warning {
    --chip-h: var(--hue-warning);
    --chip-fg: oklch(44% .1 var(--hue-warning));
  }

  .chip--danger {
    --chip-h: var(--hue-danger);
  }

  .chip--accent {
    --chip-h: var(--hue-accent);
  }

  .chip--gold {
    --chip-h: var(--hue-gold);
    --chip-fg: oklch(44% .1 var(--hue-gold));
  }

  .chip--plum {
    --chip-h: var(--hue-plum);
  }

  .chip--teal {
    --chip-h: var(--hue-teal);
  }

  .chip--cyan {
    --chip-h: var(--hue-cyan);
  }

  .chip--neutral {
    --chip-bg: var(--surface-2);
    --chip-fg: var(--fg-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .input, .field__control, .select__control {
    width: 100%;
    min-height: var(--ctl-h);
    border-radius: var(--r-3);
    background: var(--surface-2);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    border: 1px solid #0000;
    transition: border-color .15s, box-shadow .15s, background .15s;
  }

  .input {
    padding: 0 var(--sp-3);
  }

  .input::placeholder, .field__input::placeholder {
    color: var(--muted);
  }

  .input:hover, .field__control:hover {
    border-color: var(--line);
  }

  .input:focus, .field__control:focus-within, .select__control--is-focused {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: var(--focus-ring);
    outline: none;
  }

  .input[aria-invalid="true"], .select[data-invalid] .select__control {
    border-color: var(--danger);
  }

  .field__control:has([aria-invalid="true"]) {
    border-color: var(--danger);
  }

  .input:disabled, .field__input:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .input--select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px), calc(100% - 12px);
    background-repeat: no-repeat;
    background-size: 5px 5px;
    padding-right: 34px;
  }

  .input--textarea {
    min-height: 88px;
    padding: var(--sp-2) var(--sp-3);
    resize: vertical;
    line-height: 1.45;
  }

  .form-field {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex;
  }

  .form-field__label, .field__label {
    font-size: var(--fs-sm);
    color: var(--fg);
    font-weight: 600;
  }

  .form-field__required, .field__required {
    color: var(--danger);
    margin-left: 2px;
  }

  .form-field__hint, .field__note {
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .form-field__error, .field__note--error {
    font-size: var(--fs-xs);
    color: oklch(50% .16 var(--hue-danger));
  }

  .field {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    display: flex;
  }

  .field__control {
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3);
    display: flex;
  }

  .field__icon, .field__trailing {
    color: var(--muted);
    flex-shrink: 0;
    align-items: center;
    display: flex;
  }

  .field__trailing {
    background: none;
    border: none;
    padding: 0;
  }

  button.field__trailing:hover {
    color: var(--fg);
  }

  .field__input {
    min-width: 0;
    height: calc(var(--ctl-h) - 2px);
    color: var(--fg);
    font-size: var(--fs-base);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .check {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
    cursor: pointer;
    display: inline-flex;
  }

  .check__box {
    appearance: none;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-1);
    background: var(--surface);
    cursor: pointer;
    flex: none;
    place-items: center;
    width: 16px;
    height: 16px;
    display: inline-grid;
  }

  .check__box:checked {
    background: var(--primary);
    border-color: var(--primary);
  }

  .check__box:checked:after {
    content: "";
    border: 2px solid var(--on-primary);
    border-top: 0;
    border-right: 0;
    width: 8px;
    height: 4px;
    margin-top: -2px;
    transform: rotate(-45deg);
  }

  .check__box--radio {
    border-radius: 50%;
  }

  .check__box--radio:checked {
    background: var(--surface);
    border-width: 5px;
  }

  .check__box--radio:checked:after {
    content: none;
  }

  .check__box:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
  }

  .check__box:disabled, .check__box:disabled + .check__label {
    opacity: .5;
    cursor: not-allowed;
  }

  .input--sm {
    min-height: 32px;
    font-size: var(--fs-sm);
    border-radius: var(--r-2);
    padding: 0 10px;
  }

  .input--sm.input--select {
    padding-right: 30px;
  }

  .search-box {
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    padding: 0 var(--sp-3);
    border-radius: var(--r-3);
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid #0000;
    display: flex;
  }

  .search-box:focus-within {
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: var(--focus-ring);
  }

  .search-box__input {
    min-width: 0;
    color: var(--fg);
    font-size: var(--fs-base);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .input--auto {
    width: auto;
  }

  .grade-input {
    width: 90px;
  }

  .grade-input[data-tone="danger"] {
    color: oklch(50% .16 var(--hue-danger));
  }

  .grade-input__saved {
    color: var(--success);
    margin-left: 6px;
  }

  .option-card {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    cursor: pointer;
    display: flex;
  }

  .option-card:has(:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
  }

  .option-card[data-busy] {
    cursor: wait;
    opacity: .6;
  }

  .credential-value {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    -webkit-user-select: all;
    user-select: all;
    overflow-wrap: anywhere;
  }

  .evidence-image {
    border-radius: var(--r-3);
    width: 100%;
    box-shadow: inset 0 0 0 1px var(--line);
  }

  .help-dot {
    background: var(--surface-2);
    width: 16px;
    height: 16px;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--muted);
    cursor: help;
    border-radius: 50%;
    place-items: center;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    display: inline-grid;
  }

  .logo-preview {
    object-fit: contain;
    border-radius: var(--r-2);
    height: 64px;
  }

  .suggest-list {
    z-index: var(--z-sticky);
    max-height: 200px;
    margin-top: var(--sp-1);
    padding: var(--sp-1) 0;
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow-y: auto;
  }

  .input-icon {
    color: var(--muted);
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
  }

  .table-wrap {
    background: var(--surface);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-1);
    overflow-x: auto;
  }

  .card .table-wrap {
    box-shadow: none;
    border-radius: 0;
  }

  .table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-base);
  }

  .table__th {
    padding: 10px var(--sp-5);
    background: var(--primary-soft);
    color: var(--primary-ink);
    text-align: left;
    font-size: var(--fs-sm);
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 700;
  }

  .table__th[data-sortable] {
    cursor: pointer;
  }

  .table__th-inner {
    align-items: center;
    gap: var(--sp-1);
    display: inline-flex;
  }

  .table__sort-icon {
    opacity: .45;
    align-items: center;
    display: flex;
  }

  .table__th[data-sorted] .table__sort-icon {
    opacity: 1;
  }

  .table__th[data-sortable]:hover .table__sort-icon {
    opacity: .8;
  }

  .table__row {
    border-top: 1px solid var(--line);
  }

  .table__row:hover {
    background: var(--surface-2);
  }

  .table__row[data-highlight="true"] {
    background: oklch(96% .03 var(--hue-danger));
  }

  .table__row[data-clickable] {
    cursor: pointer;
  }

  .table__row[data-clickable]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }

  .table__row[data-selected="true"] {
    background: var(--primary-soft);
  }

  .table__td {
    height: var(--row-h);
    padding: 0 var(--sp-5);
    color: var(--fg-2);
  }

  .table__empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--muted);
  }

  .table--compact .table__th {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
  }

  .table--compact .table__td {
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    border-top: 1px solid var(--line);
  }

  .report__campo {
    vertical-align: top;
    text-align: left;
    border-right: 1px solid var(--line);
    font-weight: 600;
  }

  .report__block {
    padding: 10px var(--sp-4);
    background: var(--surface-2);
    color: var(--muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 700;
  }

  .report__field-total {
    background: var(--surface-2);
    font-weight: 600;
  }

  .report__total {
    border-top: 2px solid var(--line);
    font-weight: 700;
  }

  .table--compact .table__td.text-center, .report__total .table__td, .report__field-total .table__td {
    text-align: center;
  }

  .table--compact .table__td.text-left {
    text-align: left;
  }

  .avatar {
    --avatar-h: var(--brand-h);
    border-radius: var(--r-pill);
    background: oklch(93.5% .045 var(--avatar-h));
    width: 36px;
    height: 36px;
    color: oklch(42% .11 var(--avatar-h));
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    text-transform: uppercase;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    display: inline-flex;
  }

  .avatar--xs {
    width: 22px;
    height: 22px;
    font-size: .625rem;
  }

  .avatar--sm {
    width: 32px;
    height: 32px;
    font-size: .71875rem;
  }

  .avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 1.125rem;
  }

  .avatar--xl {
    width: 64px;
    height: 64px;
    font-size: 1.375rem;
  }

  .avatar--olive {
    --avatar-h: 130;
  }

  .avatar--gold {
    --avatar-h: var(--hue-gold);
  }

  .avatar--plum {
    --avatar-h: var(--hue-plum);
  }

  .avatar--teal {
    --avatar-h: var(--hue-teal);
  }

  .avatar--solid {
    background: oklch(55% .12 var(--slot-h, var(--avatar-h)));
    color: var(--on-primary);
  }

  .page-header {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-4);
    flex-wrap: wrap;
    display: flex;
  }

  .page-header__text {
    min-width: 0;
  }

  .page-header__crumbs {
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--muted);
    flex-wrap: wrap;
    display: flex;
  }

  .page-header__crumb + .page-header__crumb:before {
    content: "/";
    margin-right: var(--sp-1);
    opacity: .6;
  }

  .page-header__crumbs a {
    text-decoration: none;
  }

  .page-header__crumbs a:hover {
    color: var(--primary-ink);
  }

  .page-header__title {
    font-size: var(--fs-xl);
    letter-spacing: -.02em;
    font-weight: 700;
  }

  .page-header__subtitle {
    font-size: var(--fs-base);
    color: var(--muted);
    margin-top: 3px;
  }

  .page-header--actions {
    justify-content: flex-end;
  }

  .page-header__actions {
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .kpi {
    --kpi-tone: var(--primary);
    min-width: 0;
    padding: 18px var(--card-pad);
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    flex-direction: column;
    gap: 6px;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .kpi:after {
    content: "";
    background: var(--kpi-tone);
    border-radius: 50%;
    width: 130px;
    height: 130px;
    position: absolute;
    top: -36px;
    right: -36px;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .kpi:after {
      background: color-mix(in oklch, var(--kpi-tone) 11%, transparent);
    }
  }

  .kpi:after {
    pointer-events: none;
  }

  .kpi--primary {
    --kpi-tone: var(--primary);
  }

  .kpi--success {
    --kpi-tone: var(--success);
  }

  .kpi--info {
    --kpi-tone: var(--info);
  }

  .kpi--warning {
    --kpi-tone: var(--warning);
  }

  .kpi--danger {
    --kpi-tone: var(--danger);
  }

  .kpi--teal {
    --kpi-tone: var(--teal);
  }

  .kpi__icon {
    z-index: 1;
    background: var(--kpi-tone);
    border-radius: 11px;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    display: grid;
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .kpi__icon {
      background: color-mix(in oklch, var(--kpi-tone) 13%, var(--surface));
    }
  }

  .kpi__icon {
    color: var(--kpi-tone);
  }

  .kpi__label {
    font-size: var(--fs-sm);
    color: var(--muted);
    font-weight: 600;
  }

  .kpi__value {
    letter-spacing: -.02em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .kpi__foot {
    font-size: var(--fs-xs);
    color: var(--muted);
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .kpi--hero {
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
  }

  .kpi--hero:after {
    content: none;
  }

  .kpi--hero .kpi__icon {
    color: var(--on-primary);
    background: #ffffff29;
    background: lab(100% 0 0 / .16);
  }

  .kpi--hero .kpi__value {
    color: var(--on-primary);
  }

  .kpi--hero .kpi__label, .kpi--hero .kpi__foot {
    color: #ffffffd1;
    color: lab(100% 0 0 / .82);
  }

  .kpi--hero .chip {
    --chip-bg: #fff3;
    --chip-fg: var(--on-primary);
  }

  @supports (color: lab(0% 0 0)) {
    .kpi--hero .chip {
      --chip-bg: lab(100% 0 0 / .2);
    }
  }

  .kpi__spark {
    color: #ffffffe6;
    color: lab(100% 0 0 / .9);
    width: 120px;
    height: 44px;
    position: absolute;
    top: 22px;
    right: 16px;
  }

  .kpi-row {
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    display: grid;
  }

  .kpi-row.kpi-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 640px) {
    .kpi-row.kpi-row--3 {
      gap: var(--sp-2);
    }

    .kpi-row--3 .kpi {
      padding: var(--sp-3);
    }

    .kpi-row--3 .kpi__value {
      font-size: 1.25rem;
    }

    .kpi-row {
      gap: var(--sp-3);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi {
      padding: var(--sp-4);
    }

    .kpi__value {
      font-size: 1.5rem;
    }

    .kpi__spark {
      display: none;
    }
  }

  .tabs {
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .tabs__tab {
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-base);
    white-space: nowrap;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-weight: 600;
    display: inline-flex;
  }

  .tabs__tab:hover {
    color: var(--fg);
  }

  .tabs__tab[aria-selected="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
  }

  .tabs__count {
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    padding: 1px 7px;
    font-size: .71875rem;
  }

  .tabs__tab[aria-selected="true"] .tabs__count {
    color: var(--on-primary);
    background: #ffffff38;
    background: lab(100% 0 0 / .22);
  }

  .section-tabs {
    padding: var(--sp-2) var(--sp-7) var(--sp-3);
  }

  @media (max-width: 900px) {
    .section-tabs {
      padding: var(--sp-2) var(--sp-4) var(--sp-3);
      flex-wrap: nowrap;
      overflow-x: auto;
    }
  }

  .underline-tabs {
    gap: var(--sp-1);
    border-bottom: 1px solid var(--line);
    display: flex;
  }

  .underline-tabs__tab {
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    color: var(--fg-2);
    font-size: var(--fs-base);
    background: none;
    border: none;
    border-bottom: 2px solid #0000;
    margin-bottom: -1px;
    font-weight: 500;
    display: flex;
  }

  .underline-tabs__tab[aria-pressed="true"] {
    border-bottom-color: var(--primary);
    color: var(--primary-ink);
    font-weight: 600;
  }

  .choice-pill {
    padding: var(--sp-2) var(--sp-4);
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    color: var(--fg);
    font-size: var(--fs-base);
    background: none;
  }

  .choice-pill[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-weight: 600;
  }

  .choice-pill--solid {
    padding: 5px var(--sp-3);
    background: var(--surface-2);
    color: var(--fg-2);
    white-space: nowrap;
    border: none;
  }

  .choice-pill--solid[aria-pressed="true"] {
    background: var(--primary);
    color: var(--on-primary);
  }

  .toolbar {
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    display: flex;
  }

  .toolbar__search {
    flex: 280px;
    max-width: 360px;
  }

  .toolbar__filters {
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .toolbar__actions {
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-left: auto;
    display: flex;
  }

  @media (max-width: 640px) {
    .toolbar__search {
      flex-basis: 100%;
      max-width: none;
    }

    .toolbar__actions {
      margin-left: 0;
    }
  }

  .toolbar .select__control {
    border-radius: var(--r-2);
    min-height: 32px;
  }

  .selection-bar {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--primary);
    border-radius: var(--r-3);
    background: var(--primary-soft);
    flex-wrap: wrap;
    display: flex;
  }

  .selection-bar__clear {
    background: none;
    border: none;
    margin-left: auto;
  }

  .filter-field {
    gap: var(--sp-1);
    width: 220px;
    font-size: var(--fs-xs);
    color: var(--muted);
    flex-direction: column;
    font-weight: 600;
    display: flex;
  }

  .filter-panel {
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--line-2);
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    flex-direction: column;
    display: flex;
  }

  .filter-panel__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    min-height: 32px;
    display: flex;
  }

  .filter-panel__title {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--fg);
    margin: 0;
    font-weight: 600;
    display: flex;
  }

  .filter-panel__fields {
    align-items: flex-end;
    gap: var(--sp-4);
    flex-wrap: wrap;
    display: flex;
  }

  .filter-panel__field {
    gap: var(--sp-2);
    flex-direction: column;
    flex: 180px;
    min-width: 0;
    display: flex;
  }

  .filter-panel__field--wide {
    flex: 2 260px;
  }

  .filter-panel__label {
    font-size: var(--fs-sm);
    color: var(--fg-2);
    font-weight: 500;
  }

  .filter-panel__field .input {
    width: 100%;
  }

  .filter-panel__field .select__control {
    min-height: var(--ctl-h);
  }

  .filter-panel__control--icon {
    display: block;
    position: relative;
  }

  .filter-panel__control--icon > svg {
    top: 50%;
    left: var(--sp-3);
    color: var(--muted);
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
  }

  .filter-panel__control--icon > .input {
    padding-left: calc(var(--sp-3) + 24px);
  }

  .filter-panel--sticky {
    z-index: var(--z-sticky);
    position: sticky;
    top: 0;
  }

  .modal__overlay {
    z-index: var(--z-overlay);
    padding: var(--sp-4);
    background: oklch(20% .02 var(--brand-h) / .45);
    place-items: center;
    display: grid;
    position: fixed;
    inset: 0;
  }

  .modal {
    z-index: var(--z-modal);
    width: 100%;
    max-height: calc(100dvh - 2 * var(--sp-4));
    border-radius: var(--r-5);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .modal--sm {
    max-width: 420px;
  }

  .modal--md {
    max-width: 560px;
  }

  .modal--lg {
    max-width: 820px;
  }

  .modal--xl {
    max-width: 960px;
  }

  .modal--padded {
    gap: var(--sp-5);
    padding: var(--card-pad);
    overflow-y: auto;
  }

  .modal__header {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6) var(--sp-2);
    display: flex;
  }

  .modal__title {
    font-size: var(--fs-lg);
    letter-spacing: -.015em;
    font-weight: 700;
  }

  .modal__body {
    padding: var(--sp-3) var(--sp-6) var(--sp-5);
    gap: var(--sp-4);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .modal__footer {
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    display: flex;
  }

  @media (max-width: 640px) {
    .modal__overlay {
      place-items: end stretch;
      padding: 0;
    }

    .modal {
      border-radius: var(--r-5) var(--r-5) 0 0;
      max-width: none;
      padding-bottom: env(safe-area-inset-bottom, 0);
    }
  }

  .drawer__overlay {
    z-index: var(--z-overlay);
    background: oklch(20% .02 var(--brand-h) / .3);
    justify-content: flex-end;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .drawer {
    background: var(--surface);
    width: 480px;
    max-width: 100vw;
    height: 100%;
    box-shadow: var(--shadow-2);
    flex-direction: column;
    display: flex;
    overflow: hidden;
  }

  .drawer__header {
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    display: flex;
  }

  .drawer__body {
    gap: var(--sp-3);
    min-height: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-6);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .empty-state {
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .empty-state__icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-2);
    border-radius: var(--r-4);
    background: var(--primary-soft);
    color: var(--primary-ink);
    place-items: center;
    display: grid;
  }

  .empty-state__title {
    color: var(--fg);
    font-weight: 700;
  }

  .empty-state__desc {
    max-width: 42ch;
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .empty-state__action {
    margin-top: var(--sp-3);
  }

  .progress {
    --progress-tone: var(--primary);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    height: 8px;
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
  }

  .progress__bar {
    height: 100%;
    width: calc(var(--value, 0) * 1%);
    border-radius: inherit;
    background: var(--progress-tone);
    transition: width .3s;
    display: block;
  }

  .progress--success {
    --progress-tone: var(--success);
  }

  .progress--info {
    --progress-tone: var(--info);
  }

  .progress--warning {
    --progress-tone: var(--warning);
  }

  .progress--danger {
    --progress-tone: var(--danger);
  }

  .stat-list {
    flex-direction: column;
    display: flex;
  }

  .stat-list__row {
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-base);
    color: var(--fg-2);
    padding: 9px 0;
    display: flex;
  }

  .stat-list__row + .stat-list__row {
    border-top: 1px solid var(--line);
  }

  .stat-list__row dd {
    text-align: right;
    margin: 0;
  }

  .stat-list__row--strong {
    color: var(--fg);
    font-weight: 700;
  }

  .detail-tiles {
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    display: grid;
  }

  .detail-tiles__item {
    gap: var(--sp-1);
    flex-direction: column;
    display: flex;
  }

  .detail-tiles__label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
  }

  .detail-tiles__value {
    font-size: var(--fs-base);
    color: var(--fg);
    font-weight: 600;
  }

  .detail-rows {
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    grid-template-columns: max-content 1fr;
    display: grid;
  }

  .detail-rows__row {
    display: contents;
  }

  .detail-rows__row dt {
    color: var(--muted);
  }

  .item-list {
    flex-direction: column;
    gap: 10px;
    list-style: none;
    display: flex;
  }

  .item-list__row {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    display: flex;
  }

  .count-tile {
    flex-direction: column;
    flex: 1;
    align-items: center;
    gap: 2px;
    display: flex;
  }

  .count-tile__value {
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 700;
  }

  .count-tile__label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
  }

  .summary-tile {
    border-radius: var(--r-3);
    background: var(--surface-2);
    flex-direction: column;
    gap: 2px;
    min-width: 110px;
    padding: 10px 14px;
    display: flex;
  }

  .summary-tile__value {
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 700;
  }

  .summary-tile__label {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
  }

  .summary-tile--danger {
    background: oklch(95% .04 var(--hue-danger));
  }

  .summary-tile--card {
    padding: var(--sp-4);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    border-radius: var(--r-4);
    flex: 160px;
  }

  .summary-tile--danger .summary-tile__value {
    color: oklch(48% .16 var(--hue-danger));
  }

  .profile-header {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    display: flex;
  }

  .profile-header__id {
    align-items: center;
    gap: var(--sp-4);
    min-width: 0;
    display: flex;
  }

  .profile-header__text {
    gap: var(--sp-2);
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .profile-header__title-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .profile-header__name {
    letter-spacing: -.015em;
    font-size: 1.375rem;
    font-weight: 700;
  }

  .profile-header__facts {
    gap: var(--sp-4);
    flex-wrap: wrap;
    display: flex;
  }

  .profile-header__fact {
    font-size: var(--fs-sm);
  }

  .profile-header__fact strong {
    font-weight: 600;
  }

  .tile {
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-3);
    background: var(--surface-2);
    flex-direction: column;
    display: flex;
  }

  .tile--muted {
    opacity: .6;
  }

  .tile--action {
    text-align: left;
    cursor: pointer;
    border: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .tile--action:hover {
    background: var(--primary-soft);
  }

  .list-row {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--line);
  }

  .list-row:last-child {
    border-bottom: none;
  }

  .chip-row {
    align-items: center;
    gap: var(--sp-2);
    border-radius: var(--r-2);
    background: var(--surface-2);
    font-size: var(--fs-sm);
    padding: 6px 10px;
    display: flex;
  }

  .person-option {
    border-radius: var(--r-3);
    text-align: left;
    background: none;
    border: none;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    display: flex;
  }

  .person-option:hover {
    background: var(--surface-2);
  }

  .person-option[aria-pressed="true"] {
    background: var(--primary-soft);
  }

  .person-option__text {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .person-option__name, .person-option__sub {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .person-option__name {
    color: var(--fg);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.2;
  }

  .person-option[aria-pressed="true"] .person-option__name {
    color: var(--primary-ink);
    font-weight: 700;
  }

  .person-option__sub {
    color: var(--muted);
    font-size: var(--fs-xs);
    margin-top: 1px;
  }

  .person-option__meta {
    font-size: var(--fs-xs);
    color: var(--muted);
    flex-shrink: 0;
    font-weight: 600;
  }

  .person-option[aria-pressed="true"] .person-option__meta {
    color: var(--primary-ink);
  }

  .palette-picker {
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    display: grid;
  }

  .palette-picker__option {
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-3);
    background: var(--surface);
    cursor: pointer;
    flex-direction: column;
    display: flex;
  }

  .palette-picker__option:has(:checked) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
  }

  .palette-picker__option:has(:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .palette-picker__preview {
    border-radius: var(--r-2);
    background: var(--bg);
    height: 56px;
    display: flex;
    overflow: hidden;
  }

  .palette-picker__sidebar {
    background: var(--sidebar-bg);
    width: 26%;
  }

  .palette-picker__main {
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    padding: 6px;
    display: flex;
  }

  .palette-picker__hero {
    border-radius: var(--r-1);
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    height: 22px;
  }

  .palette-picker__button {
    border-radius: var(--r-pill);
    background: var(--primary);
    align-self: flex-end;
    width: 40%;
    height: 10px;
  }

  .palette-picker__name {
    font-size: var(--fs-sm);
    text-align: center;
    font-weight: 600;
  }

  .popover__scrim {
    z-index: var(--z-overlay);
    position: fixed;
    inset: 0;
  }

  .popover {
    z-index: var(--z-modal);
    border-radius: var(--r-4);
    background: var(--surface);
    width: 340px;
    box-shadow: var(--shadow-2);
    position: fixed;
    overflow: hidden;
  }

  .popover--topbar {
    top: 60px;
    right: var(--sp-6);
  }

  .popover--mobile {
    top: 56px;
    left: var(--sp-3);
    right: var(--sp-3);
    width: auto;
  }

  .dropdown-panel {
    left: calc(var(--left) * 1px);
    bottom: calc(var(--bottom) * 1px);
    width: calc(var(--width) * 1px);
    z-index: var(--z-modal);
    border-radius: var(--r-3);
    background: var(--surface);
    max-height: 260px;
    box-shadow: var(--shadow-2);
    position: fixed;
    overflow-y: auto;
  }

  .list-item {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--line);
    display: flex;
  }

  .list-item:last-child {
    border-bottom: none;
  }

  .dropdown-panel__option {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-size: var(--fs-base);
    text-align: left;
    background: none;
    display: block;
  }

  .dropdown-panel__option:hover {
    background: var(--surface-2);
  }

  .popover__header {
    padding: 14px var(--sp-4) 12px;
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .notif-row {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    gap: 10px;
    display: flex;
  }

  .notif-row__link {
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    padding: 0;
    display: block;
  }

  .pill-btn {
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--fg);
    font-size: var(--fs-xs);
    padding: 3px 9px;
    font-weight: 500;
  }

  .pill-btn:hover {
    background: var(--surface-2);
  }

  .pill-btn--muted {
    color: var(--muted);
  }

  .dataviz--primary {
    --viz: var(--primary);
  }

  .dataviz--success {
    --viz: var(--success);
  }

  .dataviz--gold {
    --viz: var(--gold);
  }

  .dataviz--warning {
    --viz: var(--warning);
  }

  .dataviz--danger {
    --viz: var(--danger);
  }

  .dataviz--info {
    --viz: var(--info);
  }

  .dataviz--teal {
    --viz: var(--teal);
  }

  .dataviz--plum {
    --viz: var(--plum);
  }

  .dataviz--accent {
    --viz: var(--accent);
  }

  .dataviz--cyan {
    --viz: var(--cyan);
  }

  .dataviz--muted {
    --viz: var(--line-2);
  }

  .dot {
    background: var(--viz);
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
  }

  .icon-tile {
    border-radius: var(--r-3);
    background: var(--viz);
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    display: grid;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .icon-tile {
      background: color-mix(in oklch, var(--viz) 13%, var(--surface));
    }
  }

  .icon-tile {
    color: var(--viz);
  }

  .icon-tile--lg {
    width: 40px;
    height: 40px;
  }

  .stack {
    border-radius: var(--r-pill);
    background: var(--surface-2);
    gap: 2px;
    height: 14px;
    display: flex;
    overflow: hidden;
  }

  .stack__seg {
    width: calc(var(--value, 0) * 1%);
    background: var(--viz);
  }

  .legend {
    margin-top: var(--sp-4);
    flex-direction: column;
    gap: 10px;
    display: flex;
  }

  .legend--row {
    gap: var(--sp-4);
    flex-direction: row;
  }

  .legend__item {
    gap: var(--sp-1);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .legend__key {
    font-size: var(--fs-sm);
    color: var(--muted);
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .legend__value {
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    font-size: 1.375rem;
    font-weight: 700;
  }

  .legend__value--danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  .bar-list {
    gap: var(--sp-2);
    flex-direction: column;
    display: flex;
  }

  .bar-list__row {
    align-items: center;
    gap: 14px;
    display: flex;
  }

  .bar-list__label {
    width: 90px;
    color: var(--fg-2);
    font-size: var(--fs-sm);
    flex: none;
    font-weight: 500;
  }

  .bar-list__track {
    flex: 1;
    height: 28px;
  }

  .bar-list__fill {
    width: calc(var(--value, 0) * 1%);
    border-radius: var(--r-2);
    background: var(--viz);
    height: 100%;
    color: var(--on-primary);
    font-size: var(--fs-sm);
    align-items: center;
    padding-left: 10px;
    font-weight: 600;
    display: flex;
  }

  .col-chart {
    height: 220px;
    padding: var(--sp-2) 0 var(--sp-6) var(--sp-6);
    align-items: flex-end;
    gap: 14px;
    display: flex;
    position: relative;
  }

  .col-chart__grid {
    inset: var(--sp-2) 0 var(--sp-6) var(--sp-6);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    position: absolute;
  }

  .col-chart__line {
    background: var(--line);
    height: 1px;
    position: relative;
  }

  .col-chart__tick {
    color: var(--muted);
    font-size: .625rem;
    font-weight: 500;
    position: absolute;
    top: -8px;
    left: -22px;
  }

  .col-chart__group {
    z-index: 1;
    flex-direction: column;
    flex: 1;
    align-items: center;
    height: 100%;
    display: flex;
    position: relative;
  }

  .col-chart__bars {
    flex: 1;
    align-items: flex-end;
    gap: 4px;
    display: flex;
  }

  .col-chart__bar {
    width: 16px;
    height: calc(var(--value, 0) * 1%);
    background: var(--viz);
    border-radius: 4px 4px 1px 1px;
  }

  .col-chart__label {
    color: var(--muted);
    font-size: .6875rem;
    font-weight: 600;
    position: absolute;
    bottom: -20px;
  }

  .agenda-list, .attention-list {
    flex-direction: column;
    gap: 10px;
    list-style: none;
    display: flex;
  }

  .agenda-list__row, .attention-list__row {
    align-items: center;
    gap: var(--sp-3);
    display: flex;
  }

  .agenda-list__time {
    width: 44px;
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 600;
  }

  .agenda-list__title {
    font-size: var(--fs-sm);
    flex: 1;
    font-weight: 500;
  }

  .attention-list__row {
    cursor: pointer;
    color: var(--muted);
  }

  .attention-list__text {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .attention-list__title {
    color: var(--fg);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
  }

  .attention-list__sub {
    font-size: var(--fs-xs);
  }

  .alert {
    --alert-h: var(--brand-h);
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-3);
    font-size: var(--fs-sm);
    background: oklch(95% .045 var(--alert-h));
    color: oklch(42% .12 var(--alert-h));
    line-height: 1.45;
    display: flex;
  }

  .alert--danger {
    --alert-h: var(--hue-danger);
  }

  .alert--warning {
    --alert-h: var(--hue-warning);
  }

  .alert--success {
    --alert-h: var(--hue-success);
  }

  .alert--info {
    --alert-h: var(--hue-info);
  }

  .alert__icon {
    background: oklch(62% .16 var(--alert-h));
    color: #fff;
    color: lab(100% 0 0);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    display: grid;
  }

  .alert__body {
    flex: 1;
    min-width: 0;
  }

  .alert__close {
    padding: var(--sp-1);
    border-radius: var(--r-2);
    color: var(--fg-2);
    cursor: pointer;
    background: none;
    border: 0;
    flex-shrink: 0;
    place-items: center;
    display: grid;
  }

  .alert__close:hover {
    color: var(--fg);
    background: #0000000f;
    background: lab(0% 0 0 / .06);
  }

  .pager {
    justify-content: center;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--muted);
    display: flex;
  }

  .month-grid__grid {
    background: var(--bg);
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    display: grid;
  }

  .month-grid__week-day {
    text-align: center;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 6px 0 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .month-grid__empty-cell {
    border-radius: 10px;
    min-height: 92px;
  }

  .month-grid__weekend {
    background: var(--line);
    opacity: .6;
  }

  .month-grid__day-cell {
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    border: .5px solid var(--line);
    min-height: 92px;
    font-family: var(--font-sans);
    border-radius: 10px;
    flex-direction: column;
    gap: 3px;
    padding: 7px;
    transition: border-color .12s;
    display: flex;
    overflow: hidden;
  }

  .month-grid__day-cell:hover {
    border-color: var(--primary);
  }

  .month-grid__day-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    display: flex;
  }

  .month-grid__day-number {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
  }

  .month-grid__today-badge {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 8.5px;
    font-weight: 700;
  }

  .month-grid__today {
    border-color: var(--accent) !important;
  }

  .month-grid__today .month-grid__day-number {
    color: var(--accent);
    font-weight: 700;
  }

  .month-grid__selected {
    background: var(--primary-soft);
    border-color: var(--primary) !important;
  }

  .month-grid__selected .month-grid__day-number {
    color: var(--primary-2);
    font-weight: 700;
  }

  .month-grid__event-pill {
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    font-family: var(--font-sans);
    border: none;
    border-radius: 5px;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    line-height: 1.25;
    transition: background .1s, color .1s;
    display: flex;
  }

  .month-grid__event-pill:hover {
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .month-grid__event-pill-active {
    background: var(--primary);
    color: var(--on-primary);
  }

  .month-grid__event-pill-active .month-grid__event-dot {
    background: #ffffffb3;
    background: lab(100% 0 0 / .7);
  }

  .month-grid__event-dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 5px;
    height: 5px;
  }

  .month-grid__event-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    font-weight: 600;
    overflow: hidden;
  }

  .mini-month__container {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .mini-month__month-name {
    color: var(--fg);
    letter-spacing: -.01em;
    padding: 0 2px 2px;
    font-size: 12px;
    font-weight: 700;
  }

  .mini-month__grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    display: grid;
    overflow: visible;
  }

  .mini-month__week-day {
    text-align: center;
    color: var(--muted);
    text-transform: uppercase;
    padding: 2px 0 4px;
    font-size: 9px;
    font-weight: 600;
  }

  .mini-month__empty-cell {
    border-radius: 4px;
    height: 22px;
  }

  .mini-month__day-wrapper {
    position: relative;
  }

  .mini-month__day {
    width: 100%;
    height: 22px;
    color: var(--fg-2);
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    line-height: 1;
    transition: background .1s, color .1s;
    display: flex;
  }

  .mini-month__day:hover {
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .mini-month__weekend {
    background: var(--line);
    opacity: .65;
  }

  .mini-month__weekend:hover {
    opacity: 1;
  }

  .mini-month__has-event {
    opacity: .82;
    font-weight: 700;
    background: var(--primary) !important;
    color: var(--on-primary) !important;
  }

  .mini-month__has-event:hover {
    opacity: 1;
  }

  .mini-month__today {
    font-weight: 700;
    background: var(--accent) !important;
    color: var(--on-primary) !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .mini-month__tooltip {
    background: var(--fg);
    color: var(--bg);
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    border-radius: 6px;
    min-width: max-content;
    padding: 5px 8px;
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px #0000002e;
    box-shadow: 0 2px 8px lab(0% 0 0 / .18);
  }

  .mini-month__day-wrapper:hover .mini-month__tooltip {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .mini-month__tooltip-row {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1.3;
  }

  .year-grid__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 20px;
    display: grid;
  }

  .month-strip__strip {
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    display: flex;
    overflow-x: auto;
  }

  .month-strip__strip::-webkit-scrollbar {
    display: none;
  }

  .month-strip__chip {
    border: .5px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    text-align: left;
    border-radius: 10px;
    flex: 1 0 auto;
    min-width: 78px;
    padding: 8px 10px;
    transition: border-color .12s;
  }

  .month-strip__chip:hover {
    border-color: var(--primary);
  }

  .month-strip__active {
    border-color: var(--primary);
    background: var(--primary-soft);
  }

  .month-strip__abbr {
    color: var(--fg);
    font-size: 12.5px;
    font-weight: 700;
    display: block;
  }

  .month-strip__active .month-strip__abbr {
    color: var(--primary-2);
  }

  .month-strip__count {
    color: var(--muted);
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    display: block;
  }

  .month-strip__active .month-strip__count {
    color: var(--primary-2);
  }

  .event-type-chip__chip {
    border: .5px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    color: var(--fg-2);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex;
  }

  .event-type-chip__chip:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-2);
  }

  .event-type-chip__selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
  }

  .event-type-chip__selected:hover {
    background: var(--primary);
    color: var(--on-primary);
  }

  .event-type-chip__dot {
    border-radius: 50%;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    display: block;
  }

  .event-form__card {
    background: var(--surface);
    border: .5px solid var(--line);
    box-shadow: var(--shadow-1);
    border-radius: 14px;
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  .event-form__card-header {
    border-bottom: .5px solid var(--line);
    align-items: center;
    gap: 9px;
    padding: 14px;
    display: flex;
  }

  .event-form__plus-icon {
    background: var(--primary-soft);
    width: 30px;
    height: 30px;
    color: var(--primary-2);
    border-radius: 9px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    display: flex;
  }

  .event-form__header-title {
    color: var(--fg);
    letter-spacing: -.005em;
    font-size: 14.5px;
    font-weight: 600;
  }

  .event-form__header-sub {
    color: var(--muted);
    margin-top: 1px;
    font-size: 11.5px;
  }

  .event-form__form {
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    display: flex;
  }

  .event-form__field {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .event-form__label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10.5px;
    font-weight: 600;
  }

  .event-form__input {
    box-sizing: border-box;
    border: .5px solid var(--line);
    background: var(--bg);
    width: 100%;
    height: 40px;
    color: var(--fg);
    font-size: 13.5px;
    font-family: var(--font-sans);
    border-radius: 10px;
    outline: none;
    align-items: center;
    padding: 0 12px;
    display: flex;
  }

  .event-form__input:focus {
    border-color: var(--primary);
  }

  .event-form__input-row {
    grid-template-columns: 1.3fr 1fr;
    gap: 6px;
    display: grid;
  }

  .event-form__input-row .event-form__input {
    height: 36px;
    padding: 0 8px;
    font-size: 12.5px;
  }

  .event-form__input-with-icon {
    border: .5px solid var(--line);
    background: var(--bg);
    height: 40px;
    color: var(--muted);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    display: flex;
  }

  .event-form__input-with-icon input {
    color: var(--fg);
    font-size: 13.5px;
    font-family: var(--font-sans);
    background: none;
    border: none;
    outline: none;
    flex: 1;
  }

  .event-form__input-with-icon input::placeholder {
    color: var(--muted);
  }

  .event-form__chips {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .event-form__scope-group {
    gap: 6px;
    display: flex;
  }

  .event-form__scope-btn {
    border: .5px solid var(--line);
    height: 36px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    background: none;
    border-radius: 9px;
    flex: 1;
    padding: 0 6px;
    transition: border-color .12s, background .12s;
  }

  .event-form__scope-btn-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .event-form__group-select {
    border: .5px solid var(--line);
    background: var(--bg);
    height: 40px;
    color: var(--fg);
    font-size: 13.5px;
    font-family: var(--font-sans);
    box-sizing: border-box;
    border-radius: 10px;
    outline: none;
    width: 100%;
    margin-top: 6px;
    padding: 0 12px;
  }

  .event-form__locked-scope {
    border: .5px solid var(--accent-soft, #e3e9c7);
    background: var(--accent-soft, #e3e9c7);
    height: 40px;
    color: var(--accent);
    border-radius: 10px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
  }

  @supports (color: lab(0% 0 0)) {
    .event-form__locked-scope {
      border: .5px solid var(--accent-soft, lab(91.1444% -6.19632 15.8087));
      background: var(--accent-soft, lab(91.1444% -6.19632 15.8087));
    }
  }

  .event-form__toggle-row {
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    display: flex;
  }

  .event-form__toggle-label {
    color: var(--fg);
    font-size: 13px;
    font-weight: 500;
  }

  .event-form__toggle-switch {
    background: var(--line);
    cursor: pointer;
    border: none;
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    width: 40px;
    height: 24px;
    padding: 2px;
    transition: background .15s, justify-content;
    display: flex;
  }

  .event-form__toggle-on {
    background: var(--primary);
    justify-content: flex-end;
  }

  .event-form__toggle-thumb {
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    box-shadow: 0 1px 3px #00000026;
    box-shadow: 0 1px 3px lab(0% 0 0 / .15);
  }

  .event-form__error {
    color: var(--danger);
    font-size: 11px;
  }

  .event-form__actions {
    gap: 8px;
    margin-top: 4px;
    display: flex;
  }

  .event-form__cancel-btn {
    border: .5px solid var(--line);
    cursor: pointer;
    height: 42px;
    color: var(--fg);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    background: none;
    border-radius: 999px;
    flex: 1;
  }

  .event-form__submit-btn {
    background: var(--primary);
    height: 42px;
    color: var(--on-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: none;
    border-radius: 999px;
    flex: 1.4;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .event-form__submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .event-form__delete-btn {
    border: .5px solid var(--danger);
    cursor: pointer;
    height: 42px;
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    background: none;
    border-radius: 999px;
    margin-right: auto;
    padding: 0 14px;
  }

  .event-types__container {
    background: var(--surface);
    border: .5px solid var(--line);
    box-shadow: var(--shadow-1);
    border-radius: 14px;
    padding: 16px;
  }

  .event-types__section-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
  }

  .event-types__section-title {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    font-weight: 600;
  }

  .event-types__list {
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .event-types__row {
    color: var(--fg-2);
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    display: flex;
  }

  .event-types__row-actions {
    align-items: center;
    gap: 6px;
    margin-left: auto;
    display: flex;
  }

  .event-types__dot {
    border-radius: 3px;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    display: inline-block;
  }

  .event-types__name {
    color: var(--fg-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    overflow: hidden;
  }

  .event-types__empty {
    text-align: center;
    color: var(--muted);
    grid-column: 1 / -1;
    padding: 12px 0;
    font-size: 12px;
  }

  .event-types__form {
    border-top: .5px solid var(--line);
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    display: flex;
  }

  .event-types__field {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
  }

  .event-types__input {
    border: .5px solid var(--line);
    background: var(--bg);
    height: 36px;
    color: var(--fg);
    font-size: 13px;
    font-family: var(--font-sans);
    border-radius: 8px;
    outline: none;
    padding: 0 10px;
  }

  .event-types__color-input {
    border: .5px solid var(--line);
    cursor: pointer;
    border-radius: 6px;
    width: 48px;
    height: 32px;
    padding: 2px;
  }

  .event-types__actions {
    justify-content: flex-end;
    gap: 8px;
    display: flex;
  }

  .event-types__add-btn {
    background: var(--primary);
    height: 30px;
    color: var(--on-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: none;
    border-radius: 999px;
    padding: 0 12px;
  }

  .event-types__edit-btn {
    border: .5px solid var(--line);
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    font-family: var(--font-sans);
    background: none;
    border-radius: 5px;
    padding: 2px 8px;
  }

  .event-types__delete-btn {
    border: .5px solid var(--danger);
    cursor: pointer;
    color: var(--danger);
    font-size: 11px;
    font-family: var(--font-sans);
    background: none;
    border-radius: 5px;
    padding: 2px 8px;
  }

  .event-types__confirm-btn {
    background: var(--danger);
    color: var(--on-primary);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-sans);
    border: none;
    border-radius: 5px;
    padding: 2px 8px;
  }

  .event-types__cancel-sm-btn {
    border: .5px solid var(--line);
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    font-family: var(--font-sans);
    background: none;
    border-radius: 5px;
    padding: 2px 8px;
  }

  .event-types__error {
    color: var(--danger);
    font-size: 11px;
  }

  .calendar-page__page {
    box-sizing: border-box;
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-height: 0;
    padding: 20px 24px 32px;
    display: flex;
    overflow-y: auto;
  }

  .calendar-page__header {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .calendar-page__title-block {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .calendar-page__big-title {
    color: var(--fg);
    letter-spacing: -.02em;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
  }

  .calendar-page__big-title-year {
    color: var(--muted);
    font-weight: 400;
  }

  .calendar-page__header-right {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .calendar-page__segmented {
    background: var(--bg-2);
    border-radius: 9px;
    gap: 2px;
    padding: 3px;
    display: flex;
  }

  .calendar-page__seg-btn {
    cursor: pointer;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-sans);
    background: none;
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    transition: background .12s, color .12s;
  }

  .calendar-page__seg-btn-active {
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
  }

  .calendar-page__nav-btn {
    background: var(--surface);
    border: .5px solid var(--line);
    cursor: pointer;
    width: 38px;
    height: 38px;
    color: var(--fg);
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    display: flex;
  }

  .calendar-page__nav-btn:hover {
    border-color: var(--primary);
  }

  .calendar-page__new-btn {
    background: var(--primary);
    height: 38px;
    color: var(--on-primary);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: none;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    display: flex;
  }

  .calendar-page__body {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 16px;
    display: grid;
  }

  .calendar-page__grid-card {
    background: var(--surface);
    border: .5px solid var(--line);
    box-shadow: var(--shadow-1);
    border-radius: 14px;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    display: flex;
  }

  .calendar-page__right-col {
    flex-direction: column;
    gap: 16px;
    display: flex;
  }

  .calendar-page__year-card {
    background: var(--surface);
    border: .5px solid var(--line);
    box-shadow: var(--shadow-1);
    border-radius: 14px;
    padding: 24px 28px;
  }

  .calendar-page__calendar-select {
    border: .5px solid var(--line);
    background: var(--bg);
    height: 36px;
    color: var(--fg);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-sans);
    border-radius: 8px;
    outline: none;
    padding: 0 10px;
  }

  .event-types__dialog {
    width: 100%;
    max-width: 440px;
  }

  .slot-tone-0 {
    --slot-h: 40;
  }

  .slot-tone-1 {
    --slot-h: 235;
  }

  .slot-tone-2 {
    --slot-h: 150;
  }

  .slot-tone-3 {
    --slot-h: 85;
  }

  .slot-tone-4 {
    --slot-h: 310;
  }

  .slot-tone-5 {
    --slot-h: 165;
  }

  .slot-dot {
    background: oklch(62% .13 var(--slot-h));
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
  }

  .timetable-scroll {
    overflow-x: auto;
  }

  .timetable {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    min-width: 600px;
  }

  .timetable__day {
    padding: 0 6px var(--sp-2);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    font-weight: 600;
  }

  .timetable__time {
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    padding: 4px 12px 4px 0;
  }

  .timetable__start {
    font-size: var(--fs-xs);
    color: var(--fg-2);
    font-weight: 600;
    line-height: 1.3;
  }

  .timetable__end {
    color: var(--muted);
    font-size: .6875rem;
    line-height: 1.3;
  }

  .timetable__break-time {
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: right;
    padding: 6px 12px 6px 0;
  }

  .timetable__break {
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 0;
    font-size: .6875rem;
    font-weight: 700;
  }

  .timetable__cell {
    vertical-align: top;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    height: 72px;
    padding: 4px;
  }

  .timetable__slot {
    border-radius: var(--r-2);
    background: oklch(93% .05 var(--slot-h));
    height: 100%;
    color: oklch(42% .11 var(--slot-h));
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 8px;
    display: flex;
  }

  .timetable__subject {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
  }

  .timetable__meta {
    opacity: .75;
    font-size: .6875rem;
    line-height: 1.2;
  }

  .print-header {
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
    grid-template-columns: 80px 1fr 80px;
    display: grid;
  }

  .print-header__logo {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .print-header__logo img {
    object-fit: contain;
    max-width: 72px;
    max-height: 72px;
  }

  .print-header__text {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--fg-2);
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .print-header__institution {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 600;
  }

  .print-header__school {
    color: var(--fg);
    font-size: .9375rem;
    font-weight: 700;
  }

  .print-header__title {
    font-size: var(--fs-base);
    color: var(--fg);
    font-weight: 700;
  }

  .timetable--editable .timetable__cell {
    cursor: pointer;
    height: 80px;
  }

  .timetable--editable .timetable__cell[data-occupied] {
    cursor: default;
  }

  .timetable--editable .timetable__slot {
    padding: var(--sp-2) 10px;
  }

  .timetable__cell--action {
    text-align: center;
    vertical-align: middle;
    cursor: default;
  }

  .timetable__slot--other {
    background: var(--surface-2);
    color: var(--muted);
    box-shadow: inset 0 0 0 1.5px var(--line);
  }

  .timetable__slot--add {
    color: var(--muted);
    box-shadow: inset 0 0 0 1.5px var(--line);
    border: 1.5px dashed var(--line);
    background: none;
    justify-content: center;
    align-items: center;
  }

  .teacher-summary {
    align-items: center;
    gap: var(--sp-5);
    margin: var(--sp-4) var(--sp-4) 0;
    display: flex;
  }

  .teacher-summary__divider {
    width: 1px;
    margin: 0 var(--sp-2);
    background: var(--line);
    align-self: stretch;
  }

  .ack-banner__banner-list {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .ack-banner__banner {
    background: var(--surface);
    border-bottom: .5px solid var(--line);
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    display: flex;
  }

  .ack-banner__color-bar {
    background: var(--tone, var(--primary));
    border-radius: 4px;
    flex-shrink: 0;
    align-self: stretch;
    width: 4px;
    height: 100%;
    min-height: 24px;
  }

  .ack-banner__text {
    color: inherit;
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
  }

  .ack-banner__text:hover {
    text-decoration: underline;
  }

  .ack-banner__dismiss {
    background: var(--bg-2);
    cursor: pointer;
    width: 26px;
    height: 26px;
    color: var(--muted);
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    display: flex;
  }

  .ack-card__card {
    border: none;
    border-bottom: .5px solid var(--line);
    cursor: pointer;
    text-align: left;
    background: none;
    border-radius: 0;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    padding: 12px 4px;
    font-family: inherit;
    transition: background .1s;
    display: flex;
  }

  .ack-card__card:first-child {
    border-top: .5px solid var(--line);
  }

  .ack-card__card:hover {
    background: var(--bg-2);
  }

  .ack-card__card.ack-card__selected {
    background: var(--primary-soft);
  }

  .ack-card__body {
    flex: 1;
    min-width: 0;
  }

  .ack-card__top-row {
    align-items: center;
    gap: 7px;
    display: flex;
  }

  .ack-card__dot {
    background: var(--tone, var(--primary));
    border-radius: 50%;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
  }

  .ack-card__category-text {
    color: var(--tone, var(--primary-ink));
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    overflow: hidden;
  }

  .ack-card__pin-icon {
    color: var(--muted);
    flex-shrink: 0;
  }

  .ack-card__status-chip {
    border-radius: 999px;
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
  }

  .ack-card__status-draft {
    background: var(--gold-soft);
    color: #633f00;
    color: lab(30.2342% 14.5298 50.2812);
  }

  .ack-card__status-published {
    background: var(--success-soft);
    color: var(--success);
  }

  .ack-card__date {
    color: var(--line-2);
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 500;
  }

  .ack-card__title {
    letter-spacing: -.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
  }

  .ack-card__audience {
    color: var(--muted);
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
  }

  .ack-form__form {
    background: var(--on-primary);
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    display: flex;
  }

  .ack-form__field {
    flex-direction: column;
    gap: 6px;
    display: flex;
  }

  .ack-form__label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    font-size: 12px;
    font-weight: 600;
  }

  .ack-form__input, .ack-form__select, .ack-form__textarea {
    background: var(--bg-2);
    border: .5px solid var(--line);
    width: 100%;
    color: var(--fg);
    border-radius: 10px;
    outline: none;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .15s;
  }

  .ack-form__input:focus, .ack-form__select:focus, .ack-form__textarea:focus {
    border-color: var(--primary);
  }

  .ack-form__textarea {
    resize: vertical;
    min-height: 100px;
  }

  .ack-form__color-row {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .ack-form__color-input {
    border: .5px solid var(--line);
    cursor: pointer;
    background: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    padding: 2px;
  }

  .ack-form__color-hex {
    flex: 1;
  }

  .ack-form__radio-group {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
  }

  .ack-form__radio-label {
    cursor: pointer;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    display: flex;
  }

  .ack-form__toggle-row {
    background: var(--bg-2);
    border: .5px solid var(--line);
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    display: flex;
  }

  .ack-form__toggle-label {
    font-size: 13.5px;
    font-weight: 500;
  }

  .ack-form__actions {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    display: flex;
  }

  .ack-form__btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    cursor: pointer;
    border: none;
    border-radius: 10px;
    flex: 1;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
  }

  .ack-form__btn-publish {
    background: var(--success);
    color: var(--on-primary);
    cursor: pointer;
    border: none;
    border-radius: 10px;
    flex: 1;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
  }

  .ack-form__btn-danger {
    color: var(--danger);
    border: .5px solid var(--danger);
    cursor: pointer;
    background: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
  }

  .ack-categories__overlay {
    z-index: 200;
    background: #0006;
    background: lab(0% 0 0 / .4);
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .ack-categories__modal {
    background: var(--surface);
    border: .5px solid var(--line);
    border-radius: 20px;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    max-height: 80vh;
    display: flex;
    box-shadow: 0 8px 40px #00000026;
    box-shadow: 0 8px 40px lab(0% 0 0 / .15);
  }

  .ack-categories__header {
    border-bottom: .5px solid var(--line);
    justify-content: space-between;
    align-items: center;
    padding: 20px 22px 16px;
    display: flex;
  }

  .ack-categories__header-title {
    letter-spacing: -.01em;
    font-size: 16px;
    font-weight: 700;
  }

  .ack-categories__close-btn {
    background: var(--bg-2);
    cursor: pointer;
    width: 30px;
    height: 30px;
    color: var(--muted);
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    display: flex;
  }

  .ack-categories__list {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
  }

  .ack-categories__row {
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    display: flex;
  }

  .ack-categories__row-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
  }

  .ack-categories__delete-btn {
    color: var(--danger);
    border: .5px solid var(--danger);
    cursor: pointer;
    background: none;
    border-radius: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
  }

  .ack-categories__delete-btn:disabled {
    opacity: .4;
    cursor: default;
  }

  .ack-categories__error-msg {
    color: var(--danger);
    padding: 0 22px 6px;
    font-size: 11.5px;
  }

  .ack-categories__add-form {
    border-top: .5px solid var(--line);
    gap: 10px;
    padding: 16px 22px;
    display: flex;
  }

  .ack-categories__add-input {
    background: var(--bg-2);
    border: .5px solid var(--line);
    color: var(--fg);
    border-radius: 10px;
    outline: none;
    flex: 1;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
  }

  .ack-categories__add-input:focus {
    border-color: var(--primary);
  }

  .ack-categories__add-btn {
    background: var(--primary);
    color: var(--on-primary);
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
  }

  .circulars__wrapper {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .circulars__inbox {
    gap: var(--sp-4);
    min-height: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    background: var(--bg);
    flex: 1;
    grid-template-rows: auto minmax(260px, 1fr) minmax(260px, 1.2fr);
    display: grid;
    overflow-y: auto;
  }

  .circulars__kpis {
    padding: var(--sp-4) 0;
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .circulars__kpi {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .circulars__kpi + .circulars__kpi {
    border-left: 1px solid var(--line);
  }

  .circulars__kpi-icon {
    border: 2px solid var(--primary);
    width: 52px;
    height: 52px;
    color: var(--primary);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 6px;
    display: grid;
  }

  .circulars__kpi + .circulars__kpi .circulars__kpi-icon {
    border-color: var(--success);
    color: var(--success);
  }

  .circulars__kpi-value {
    letter-spacing: -.02em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
  }

  .circulars__kpi-label {
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .circulars__sheet-body .circulars__kpis {
    margin: var(--sp-4);
  }

  .circulars__table-card {
    min-height: 0;
  }

  .circulars__tabs {
    padding: var(--sp-3) var(--card-pad) 0;
  }

  .circulars__tabs .underline-tabs__tab {
    padding: var(--sp-2) var(--sp-4) var(--sp-3);
    cursor: pointer;
  }

  .circulars__table-card .table-wrap {
    min-height: 0;
    box-shadow: none;
    border-radius: 0;
    flex: 1;
    overflow: auto;
  }

  .circulars__table-card .table__th {
    z-index: 1;
    background: var(--surface-2);
    color: var(--fg-2);
    padding-block: var(--sp-3);
    font-weight: 600;
    position: sticky;
    top: 0;
  }

  .circulars__table-card .table__row:first-child {
    border-top: 0;
  }

  .circulars__table-card .table__th:first-child, .circulars__table-card .table__td:first-child {
    padding-left: var(--card-pad);
  }

  .circulars__table-card .table__th:last-child, .circulars__table-card .table__td:last-child {
    padding-right: var(--card-pad);
  }

  .circulars__row-title {
    align-items: center;
    gap: var(--sp-2);
    display: inline-flex;
  }

  .circulars__row-dot {
    background: var(--tone, var(--primary));
    border-radius: 50%;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
  }

  .circulars__row-link {
    color: var(--primary-ink);
    font-weight: 600;
  }

  .circulars__table-footer {
    padding: var(--sp-3) var(--card-pad);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
  }

  .circulars__footer-link {
    color: var(--primary-ink);
    font-size: var(--fs-base);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
  }

  .circulars__footer-link:hover {
    text-decoration: underline;
  }

  .circulars__preview-card {
    min-height: 0;
  }

  .circulars__preview {
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .circulars__preview-header {
    border-bottom: .5px solid var(--line);
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 16px;
    display: flex;
  }

  .circulars__preview-heading {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-width: 0;
    display: flex;
  }

  .circulars__filter-bar {
    border-bottom: .5px solid var(--line);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    display: flex;
  }

  .circulars__filter-chip {
    cursor: pointer;
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    border: 0;
    border-radius: 999px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
  }

  .circulars__filter-chip.circulars__active {
    background: var(--fg);
    color: var(--bg);
    box-shadow: none;
  }

  .circulars__category-select {
    border: .5px solid var(--line);
    background: var(--bg-2);
    color: var(--fg);
    cursor: pointer;
    border-radius: 8px;
    margin-left: auto;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12.5px;
  }

  .circulars__table-footer .circulars__category-select {
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--fs-sm);
    margin-left: 0;
    padding: 7px 12px;
  }

  .circulars__list {
    flex-direction: column;
    flex: 1;
    gap: 0;
    padding: 10px 12px;
    display: flex;
    overflow-y: auto;
  }

  .circulars__load-more {
    border: .5px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    background: none;
    border-radius: 10px;
    margin: 4px 0 8px;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
  }

  .circulars__empty {
    color: var(--muted);
    text-align: center;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px;
    font-size: 14px;
    display: flex;
  }

  .circulars__empty-icon {
    opacity: .3;
    font-size: 32px;
  }

  .circulars__editor {
    gap: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .circulars__editor .ack-form__form {
    background: none;
    padding: 0;
  }

  .circulars__notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .circulars__notice-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    font-size: 19px;
    font-weight: 700;
  }

  .circulars__sheet {
    z-index: calc(var(--z-overlay) - 1);
    background: var(--bg);
    flex-direction: column;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .circulars__sheet-header {
    border-bottom: .5px solid var(--line);
    background: var(--surface);
    align-items: center;
    padding: 16px;
    display: flex;
  }

  .circulars__sheet-close {
    background: var(--bg-2);
    cursor: pointer;
    width: 32px;
    height: 32px;
    color: var(--muted);
    border: none;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    font-size: 16px;
    display: flex;
  }

  .circulars__sheet-body {
    flex: 1;
    overflow-y: auto;
  }

  .circulars__detail-color {
    background: var(--tone, var(--primary));
    border-radius: 4px;
    flex-shrink: 0;
    width: 6px;
    height: 48px;
  }

  .circulars__detail-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
  }

  .circulars__detail-meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .circulars__detail-category-chip {
    background: var(--primary-soft);
    color: var(--primary-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .circulars__detail-date {
    color: var(--muted);
    font-size: 12px;
  }

  .circulars__detail-message {
    color: var(--fg-2);
    white-space: pre-wrap;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
  }

  .circulars__btn-danger {
    color: var(--danger);
    border: .5px solid var(--danger);
    cursor: pointer;
    background: none;
    border-radius: 10px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
  }

  .circulars__mobile-actions {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    gap: 10px;
    display: flex;
  }

  .chat-row {
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 14px var(--sp-5);
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    background: none;
    display: flex;
  }

  .chat-row:hover {
    background: var(--surface-2);
  }

  .chat-row--compact {
    padding: 10px var(--sp-2);
    border-radius: var(--r-2);
  }

  .chat-row__name {
    font-size: var(--fs-base);
    color: var(--fg);
    font-weight: 600;
    line-height: 1.2;
  }

  .chat-row__preview {
    color: var(--fg-2);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    overflow: hidden;
  }

  .chat-row__meta {
    align-items: flex-end;
    gap: var(--sp-1);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
  }

  .chat-row__time {
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .chat-row__time--unread {
    color: var(--primary-ink);
    font-weight: 600;
  }

  .count-badge {
    border-radius: var(--r-pill);
    background: var(--primary);
    min-width: 18px;
    height: 18px;
    color: var(--on-primary);
    place-items: center;
    padding: 0 5px;
    font-size: .6875rem;
    font-weight: 700;
    display: grid;
  }

  .load-more {
    width: 100%;
    padding: var(--sp-3);
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    background: none;
    border: none;
    font-weight: 600;
  }

  .chat-thread__list {
    gap: var(--sp-2);
    padding: var(--sp-4);
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .chat-thread__empty {
    color: var(--muted);
    flex: 1;
    place-items: center;
    display: grid;
  }

  .chat-thread__grouped {
    margin-top: -4px;
  }

  .chat-day {
    padding: var(--sp-2) 0;
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: .05em;
    color: var(--muted);
    font-weight: 600;
  }

  .chat-notice {
    margin: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) 14px;
    border-radius: var(--r-3);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-xs);
    text-align: center;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .chat-footnote {
    padding: var(--sp-3) var(--sp-5);
    text-align: center;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .bubble {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    display: flex;
  }

  .bubble--own {
    align-items: flex-end;
  }

  .bubble__author {
    padding-left: var(--sp-1);
    color: var(--fg-2);
    font-size: .6875rem;
  }

  .bubble__row {
    align-items: flex-end;
    gap: 6px;
    display: flex;
  }

  .bubble--own .bubble__row {
    flex-direction: row-reverse;
  }

  .bubble__body {
    max-width: 320px;
    padding: var(--sp-2) var(--sp-3);
    background: oklch(90% .015 var(--neutral-h));
    color: var(--fg);
    overflow-wrap: anywhere;
    border-radius: 18px 18px 18px 4px;
  }

  .bubble--own .bubble__body {
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 18px 18px 4px;
  }

  .bubble__body[data-deleted] {
    opacity: .55;
  }

  .bubble__time {
    padding: 0 var(--sp-1);
    color: var(--muted);
    font-size: .625rem;
  }

  .bubble__delete {
    color: var(--muted);
    font-size: var(--fs-xs);
    background: none;
    border: none;
    padding: 2px;
    line-height: 1;
  }

  .composer {
    align-items: flex-end;
    gap: var(--sp-2);
    padding: 10px var(--sp-4);
    border-top: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    display: flex;
  }

  .composer--mobile {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  .composer__send {
    background: var(--primary);
    width: 44px;
    height: 44px;
    color: var(--on-primary);
    border: none;
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    font-size: 1.125rem;
    transition: background .15s;
    display: grid;
  }

  .composer__send[data-empty] {
    background: var(--surface-2);
    color: var(--muted);
    cursor: default;
  }

  .chat-screen {
    z-index: var(--z-overlay);
    background: var(--bg);
    flex-direction: column;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .chat-screen__header {
    align-items: center;
    gap: var(--sp-3);
    padding: calc(12px + env(safe-area-inset-top, 0px)) var(--sp-4) 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    display: flex;
  }

  .chat-screen__back {
    color: var(--primary-ink);
    font-size: 1.625rem;
    line-height: 1;
  }

  .chat-screen__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9375rem;
    font-weight: 700;
    overflow: hidden;
  }

  .mobile-title-row {
    padding: var(--sp-5) var(--sp-5) 10px;
    align-items: center;
    display: flex;
  }

  .mobile-title {
    letter-spacing: -.02em;
    flex: 1;
    font-size: 1.625rem;
    font-weight: 700;
  }

  .icon-btn--round {
    background: var(--surface);
    width: 36px;
    height: 36px;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--fg-2);
    border-radius: 50%;
    font-weight: 600;
  }

  .search-box--pill {
    border-radius: var(--r-pill);
  }

  .chat-inbox__head {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    flex-shrink: 0;
  }

  .chat-inbox__stat {
    min-width: 116px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-4);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .chat-inbox__stat-label {
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    font-weight: 700;
  }

  .chat-inbox__stat-value {
    font-size: var(--fs-xl);
    margin-top: 2px;
    font-weight: 800;
    line-height: 1;
  }

  .chat-inbox__actions {
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .chat-inbox__actions .btn {
    color: var(--primary-dark);
    box-shadow: var(--shadow-1);
    background: #fff;
    background: lab(100% 0 0);
  }

  .chat-inbox__actions .btn--secondary {
    color: var(--on-primary);
    box-shadow: none;
    background: #ffffff1a;
    background: lab(100% 0 0 / .1);
    border-color: #ffffff3d;
    border-color: lab(100% 0 0 / .24);
  }

  .chat-inbox__actions .btn--secondary:hover {
    background: #ffffff2e;
    background: lab(100% 0 0 / .18);
  }

  .chat-inbox__list {
    gap: var(--sp-2);
    padding: 0 var(--sp-5) var(--sp-5);
    flex-direction: column;
    display: flex;
  }

  .chat-inbox .chat-row {
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    border-bottom: 0;
    transition: background .15s, box-shadow .15s;
  }

  .chat-inbox .chat-row:hover {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary), var(--shadow-2);
  }

  .chat-inbox .chat-row[data-unread] {
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
  }

  .chat-inbox .chat-row[data-unread] .chat-row__name {
    font-weight: 800;
  }

  .chat-inbox .chat-row[data-unread] .chat-row__preview {
    color: var(--fg);
    font-weight: 600;
  }

  .chat-inbox .chat-row .avatar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line-2);
  }

  .chat-inbox .chat-row__meta .note, .chat-inbox__list > .note {
    color: var(--fg-2);
    font-weight: 600;
  }

  .chat-header {
    z-index: 1;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) var(--sp-5) 0;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-5);
    background: radial-gradient(circle at 92% -60%, var(--primary), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    flex-shrink: 0;
    display: flex;
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .chat-header {
      background: radial-gradient(circle at 92% -60%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    }
  }

  .chat-header {
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
  }

  .chat-header .btn {
    border-radius: var(--r-pill);
    color: #ffffffdb;
    color: lab(100% 0 0 / .86);
    background: #ffffff1a;
    background: lab(100% 0 0 / .1);
    padding: 6px 12px;
  }

  .chat-header .btn:hover {
    color: var(--on-primary);
    background: #ffffff2e;
    background: lab(100% 0 0 / .18);
  }

  .chat-header .text-strong {
    color: var(--on-primary);
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
    font-weight: 700;
  }

  .chat-thread {
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-6);
  }

  .chat-thread .chat-thread__empty {
    color: var(--fg-2);
    font-weight: 600;
  }

  .chat-thread .bubble__body {
    background: var(--surface);
    max-width: 520px;
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  }

  .chat-thread .bubble--own .bubble__body {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
    box-shadow: var(--shadow-brand);
  }

  .chat-thread .bubble__author {
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-2);
    font-weight: 700;
  }

  .chat-thread .bubble__time {
    color: var(--fg-2);
    font-weight: 600;
  }

  .chat-thread .bubble__delete {
    color: var(--fg-2);
  }

  .chat-thread .bubble__delete:hover {
    color: var(--fg);
  }

  .chat-composer {
    padding: var(--sp-3) var(--sp-5);
    box-shadow: 0 -1px 0 var(--line), var(--shadow-2);
    border-top: 0;
    align-items: center;
  }

  .chat-composer .input--textarea {
    border-radius: var(--r-4);
    background: var(--surface-2);
    min-height: 44px;
  }

  .chat-composer .btn {
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
  }

  .parent-calendar__page {
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px;
    display: flex;
  }

  .parent-calendar__header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .parent-calendar__header-left {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .parent-calendar__title {
    font-family: var(--font-display);
    letter-spacing: -.025em;
    color: var(--fg);
    font-size: 1.625rem;
    font-weight: 700;
  }

  .parent-calendar__nav-btn {
    border: 1.5px solid var(--line);
    cursor: pointer;
    color: var(--fg);
    background: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 1.1rem;
  }

  .parent-calendar__body {
    gap: 16px;
    display: flex;
  }

  .parent-calendar__grid-area {
    flex: 1;
    overflow: auto;
  }

  .parent-calendar__panel {
    border: .5px solid var(--line);
    background: var(--surface);
    width: 280px;
    box-shadow: var(--shadow-1);
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .parent-calendar__detail-header {
    background: var(--primary);
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    display: flex;
  }

  .parent-calendar__detail-title {
    color: var(--on-primary);
    font-size: .95rem;
    font-weight: 600;
  }

  .parent-calendar__close-btn {
    cursor: pointer;
    color: var(--on-primary);
    opacity: .8;
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: .9rem;
  }

  .parent-calendar__detail-body {
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    display: flex;
  }

  .parent-calendar__detail-row {
    flex-direction: column;
    gap: 2px;
    font-size: .875rem;
    display: flex;
  }

  .parent-calendar__detail-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .75rem;
    font-weight: 600;
  }

  .parent-calendar__detail-category {
    align-items: center;
    gap: 5px;
    display: flex;
  }

  .parent-calendar__dot {
    border-radius: 50%;
    width: 8px;
    height: 8px;
  }

  .parent-avisos__wrapper {
    flex-direction: column;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .parent-avisos__chips {
    scrollbar-width: none;
    border-bottom: .5px solid var(--line);
    gap: 6px;
    padding: 12px 28px;
    display: flex;
    overflow-x: auto;
  }

  .parent-avisos__chips::-webkit-scrollbar {
    display: none;
  }

  .parent-avisos__chip {
    cursor: pointer;
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    border: 0;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
  }

  .parent-avisos__chip.parent-avisos__active {
    background: var(--fg);
    color: var(--bg);
    box-shadow: none;
  }

  .parent-avisos__body {
    gap: var(--sp-4);
    min-height: 0;
    padding: var(--sp-4) 24px 24px;
    flex: 1;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    display: grid;
  }

  .parent-avisos__side {
    min-height: 0;
  }

  .parent-avisos__feed {
    min-height: 0;
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    flex-direction: column;
    flex: 1;
    gap: 10px;
    display: flex;
    overflow-y: auto;
  }

  .parent-avisos__item {
    cursor: pointer;
  }

  .parent-avisos__dot {
    background: var(--tone, var(--primary));
    border-radius: 50%;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
  }

  .parent-avisos__view {
    gap: var(--sp-4);
    flex-direction: column;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .parent-avisos__info {
    font-size: var(--fs-base);
    grid-template-columns: max-content 1fr;
    gap: 10px 24px;
    margin: 0;
    display: grid;
  }

  .parent-avisos__info dt {
    color: var(--muted);
  }

  .parent-avisos__info dd {
    color: var(--fg);
    margin: 0;
  }

  .parent-avisos__hero-card {
    background: linear-gradient(135deg, var(--tone, var(--primary)), var(--tone, var(--primary-2)));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .parent-avisos__hero-card {
      background: linear-gradient(135deg, var(--tone, var(--primary)), color-mix(in oklch, var(--tone, var(--primary-2)) 80%, transparent));
    }
  }

  .parent-avisos__hero-card {
    color: var(--on-primary);
    flex-shrink: 0;
    padding: 24px;
  }

  .parent-avisos__hero-category-row {
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .85;
    font-size: 11px;
    font-weight: 700;
  }

  .parent-avisos__hero-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin-top: 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
  }

  .parent-avisos__hero-date {
    opacity: .8;
    margin-top: 8px;
    font-size: 12px;
  }

  .parent-avisos__detail-category-chip {
    background: var(--primary-soft);
    color: var(--primary-2);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .parent-avisos__detail-message {
    color: var(--fg-2);
    white-space: pre-wrap;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
  }

  .parent-avisos__empty {
    color: var(--muted);
    text-align: center;
    opacity: .7;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px;
    font-size: 14px;
    display: flex;
  }

  .mobile-avisos__screen {
    background: var(--bg);
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .mobile-avisos__header {
    border-bottom: .5px solid var(--line);
    background: var(--surface);
    align-items: center;
    gap: 12px;
    padding: 14px 16px 10px;
    display: flex;
  }

  .mobile-avisos__back-btn {
    background: var(--bg-2);
    cursor: pointer;
    width: 34px;
    height: 34px;
    color: var(--fg);
    border: none;
    border-radius: 10px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    display: flex;
  }

  .mobile-avisos__header-text {
    flex: 1;
  }

  .mobile-avisos__header-title {
    letter-spacing: -.01em;
    font-size: 17px;
    font-weight: 700;
  }

  .mobile-avisos__header-sub {
    color: var(--muted);
    margin-top: 1px;
    font-size: 11.5px;
  }

  .mobile-avisos__chips {
    scrollbar-width: none;
    border-bottom: .5px solid var(--line);
    gap: 6px;
    padding: 10px 16px;
    display: flex;
    overflow-x: auto;
  }

  .mobile-avisos__chips::-webkit-scrollbar {
    display: none;
  }

  .mobile-avisos__chip {
    cursor: pointer;
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    border: 0;
    border-radius: 999px;
    flex-shrink: 0;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
  }

  .mobile-avisos__chip.mobile-avisos__active {
    background: var(--fg);
    color: var(--bg);
    box-shadow: none;
  }

  .mobile-avisos__scroll {
    flex: 1;
    padding: 12px 0 30px;
    overflow-y: auto;
  }

  .mobile-avisos__hero-wrap {
    padding: 4px 16px 12px;
  }

  .mobile-avisos__hero-card {
    background: linear-gradient(135deg, var(--tone, var(--primary)), var(--tone, var(--primary-2)));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .mobile-avisos__hero-card {
      background: linear-gradient(135deg, var(--tone, var(--primary)), color-mix(in oklch, var(--tone, var(--primary-2)) 80%, transparent));
    }
  }

  .mobile-avisos__hero-card {
    color: var(--on-primary);
    border-radius: 20px;
    padding: 20px;
  }

  .mobile-avisos__hero-pin-row {
    letter-spacing: .4px;
    opacity: .85;
    text-transform: uppercase;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
  }

  .mobile-avisos__hero-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }

  .mobile-avisos__hero-body {
    opacity: .92;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .mobile-avisos__hero-footer {
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    display: flex;
  }

  .mobile-avisos__hero-read-btn {
    color: var(--tone, var(--primary-ink));
    background: var(--on-primary);
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
  }

  .mobile-avisos__hero-date {
    opacity: .85;
    font-size: 11.5px;
  }

  .mobile-avisos__card-wrap {
    padding: 0 16px 12px;
  }

  .mobile-avisos__card {
    background: var(--surface);
    border: .5px solid var(--line);
    cursor: pointer;
    text-align: left;
    border-radius: 18px;
    width: 100%;
    padding: 16px;
    font-family: inherit;
  }

  .mobile-avisos__card-meta {
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .mobile-avisos__card-chip {
    background: var(--primary-soft);
    color: var(--primary-2);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
  }

  .mobile-avisos__card-date {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
  }

  .mobile-avisos__card-title {
    font-family: var(--font-display);
    letter-spacing: -.015em;
    margin-top: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }

  .mobile-avisos__card-body {
    color: var(--fg-2);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    overflow: hidden;
  }

  .mobile-avisos__empty {
    color: var(--muted);
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 60px 40px;
    font-size: 14px;
    display: flex;
  }

  .notice-option {
    width: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--surface);
    text-align: left;
  }

  .notice-option[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
  }

  .student-switcher {
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    display: flex;
  }

  .student-switcher__label {
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  .student-switcher__select {
    flex: 1;
  }

  .student-switcher__option {
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    display: flex;
  }

  .student-switcher__name {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    overflow: hidden;
  }

  .student-switcher__meta {
    padding-left: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--muted);
    white-space: nowrap;
    margin-left: auto;
    font-weight: 400;
  }

  .sidebar .student-switcher {
    align-items: stretch;
    gap: var(--sp-1);
    padding: 0 0 var(--sp-3);
    border-bottom: 1px solid var(--sidebar-hover);
    background: none;
    flex-direction: column;
  }

  .sidebar .student-switcher__label {
    color: var(--sidebar-muted);
  }

  .week-grid {
    gap: var(--sp-2);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    display: grid;
  }

  .week-grid__day {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--muted);
    border-bottom: 2px solid #0000;
    padding: 6px 0;
    font-weight: 500;
  }

  .week-grid__day[data-today] {
    border-bottom-color: var(--primary);
    color: var(--primary-ink);
    font-weight: 700;
  }

  .week-grid__slot {
    padding: var(--sp-2) 10px;
    border-left: 3px solid var(--line);
    border-radius: var(--r-2);
    background: var(--surface-2);
  }

  .week-grid__slot[data-today] {
    border-left-color: var(--primary);
    background: var(--primary-soft);
  }

  .week-grid__subject {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
  }

  .week-grid__teacher {
    color: var(--fg-2);
    margin-top: 1px;
    font-size: .6875rem;
  }

  .week-grid__slot[data-today] .week-grid__teacher {
    color: var(--primary-ink);
  }

  .mini-row {
    align-items: center;
    gap: var(--sp-3);
    border-radius: var(--r-3);
    background: var(--surface);
    padding: 10px 14px;
    display: flex;
  }

  .card .mini-row {
    background: var(--surface-2);
  }

  .subject-tile {
    border-radius: var(--r-2);
    background: oklch(95% .05 var(--slot-h, var(--brand-h)));
    width: 32px;
    height: 32px;
    color: oklch(48% .12 var(--slot-h, var(--brand-h)));
    letter-spacing: .03em;
    flex-shrink: 0;
    place-items: center;
    font-size: .5625rem;
    font-weight: 700;
    display: grid;
  }

  .student-hero {
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    flex-wrap: wrap;
    display: flex;
  }

  .timeline-row {
    border-left: 3px solid var(--line);
    border-radius: var(--r-3);
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    display: flex;
  }

  .timeline-row[data-active] {
    border-left-color: var(--primary);
    background: var(--primary-soft);
  }

  .timeline-row__subject {
    font-size: var(--fs-sm);
    font-weight: 500;
  }

  .timeline-row[data-active] .timeline-row__subject {
    font-weight: 600;
  }

  .pay-row {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    flex-wrap: wrap;
    display: flex;
  }

  .student-hero--compact {
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    gap: 14px;
  }

  .badge-dot {
    background: var(--primary);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -3px;
    right: -3px;
  }

  .month-mini__head, .month-mini__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    display: grid;
  }

  .month-mini__head {
    margin-bottom: var(--sp-2);
  }

  .month-mini__grid {
    row-gap: var(--sp-1);
  }

  .month-mini__dow {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--muted);
    padding: 6px 0;
    font-weight: 600;
  }

  .month-mini__cell {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 2px 0;
    display: flex;
  }

  .month-mini__day {
    width: 32px;
    height: 32px;
    font-size: var(--fs-sm);
    border-radius: 50%;
    place-items: center;
    display: grid;
  }

  .month-mini__day[data-today] {
    border-radius: var(--r-3);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
  }

  .month-mini__dot {
    background: var(--primary);
    border-radius: 50%;
    width: 4px;
    height: 4px;
  }

  .segmented {
    gap: var(--sp-1);
    padding: var(--sp-1);
    border-radius: var(--r-3);
    background: var(--surface-2);
    display: flex;
  }

  .segmented__option {
    padding: var(--sp-2) 0;
    border-radius: var(--r-2);
    color: var(--muted);
    font-size: var(--fs-base);
    background: none;
    border: none;
    flex: 1;
    font-weight: 500;
  }

  .segmented__option[aria-pressed="true"] {
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    font-weight: 600;
  }

  .date-badge {
    border-radius: var(--r-3);
    background: var(--viz, var(--primary));
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    gap: 1px;
    width: 46px;
    padding: 6px 0;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .date-badge {
      background: color-mix(in oklch, var(--viz, var(--primary)) 13%, var(--surface));
    }
  }

  .date-badge {
    color: var(--viz, var(--primary));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .date-badge {
      color: color-mix(in oklch, var(--viz, var(--primary)) 75%, var(--fg));
    }
  }

  .date-badge__small {
    letter-spacing: .04em;
    font-size: .625rem;
    font-weight: 700;
  }

  .date-badge__day {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
  }

  .brand-card {
    padding: var(--sp-5);
    border-radius: var(--r-4);
    background: linear-gradient(140deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
  }

  .brand-card__title {
    color: var(--on-primary);
  }

  .brand-card__sub {
    font-size: var(--fs-sm);
    opacity: .85;
  }

  .segmented__option--active {
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-1);
    font-weight: 600;
  }

  .dash-hero {
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-6) var(--sp-7);
    border-radius: var(--r-5);
    background: radial-gradient(circle at 92% -20%, var(--primary), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    flex-wrap: wrap;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dash-hero {
      background: radial-gradient(circle at 92% -20%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    }
  }

  .dash-hero {
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
  }

  .dash-hero__avatar {
    background: var(--primary);
    box-shadow: 0 0 0 4px #ffffff2e;
    box-shadow: 0 0 0 4px lab(100% 0 0 / .18);
  }

  .dash-hero__eyebrow {
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
  }

  .dash-hero__name {
    font-size: var(--fs-xl);
    letter-spacing: -.02em;
    margin-top: 2px;
    font-weight: 700;
    line-height: 1.15;
  }

  .dash-hero__stats {
    gap: var(--sp-3);
    flex-wrap: wrap;
    display: flex;
  }

  .dash-hero__stat {
    min-width: 116px;
    max-width: 200px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .dash-hero .kpi__value {
    color: var(--on-primary);
  }

  .dash-hero__label {
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    font-weight: 600;
  }

  .dash-hero__next {
    font-size: var(--fs-base);
    margin: 2px 0;
    font-weight: 700;
    line-height: 1.25;
  }

  .today-card {
    padding: var(--sp-6);
  }

  .today-card__head {
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    display: flex;
  }

  .today-card__date {
    border-radius: var(--r-3);
    background: var(--fg);
    width: 54px;
    color: var(--bg);
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    padding: 6px 0 7px;
    display: flex;
  }

  .today-card__day {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.05;
  }

  .today-card__month {
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
    font-size: .625rem;
    font-weight: 700;
  }

  .today-card__count {
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    padding: 5px 12px;
    font-weight: 700;
  }

  .today-timeline {
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .today-slot {
    align-items: center;
    gap: var(--sp-3);
    grid-template-columns: 52px 14px 1fr;
    padding: 5px 0;
    display: grid;
    position: relative;
  }

  .today-slot:before {
    content: "";
    top: 0;
    bottom: 0;
    left: calc(52px + var(--sp-3) + 6px);
    background: var(--line);
    width: 2px;
    position: absolute;
  }

  .today-slot:first-child:before {
    top: 50%;
  }

  .today-slot:last-child:before {
    bottom: 50%;
  }

  .today-slot:only-child:before {
    content: none;
  }

  .today-slot__time {
    font-size: var(--fs-sm);
    color: var(--fg);
    flex-direction: column;
    align-items: flex-end;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
  }

  .today-slot__end {
    font-size: var(--fs-xs);
    color: var(--muted);
    font-weight: 500;
  }

  .today-slot__marker {
    z-index: 1;
    background: var(--surface);
    width: 14px;
    height: 14px;
    box-shadow: inset 0 0 0 3px var(--line-2);
    border-radius: 50%;
    position: relative;
  }

  .today-slot__body {
    align-items: center;
    gap: var(--sp-3);
    border-radius: var(--r-3);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: 10px 14px;
    display: flex;
  }

  .today-slot__subject {
    min-width: 0;
    font-size: var(--fs-base);
    color: var(--fg);
    flex: 1;
    font-weight: 600;
  }

  .today-slot__badge {
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    white-space: nowrap;
    padding: 3px 10px;
    font-weight: 700;
  }

  .today-slot[data-state="past"] .today-slot__body {
    box-shadow: inset 0 0 0 1px var(--line);
    background: none;
  }

  .today-slot[data-state="past"] .today-slot__subject, .today-slot[data-state="past"] .today-slot__time {
    color: var(--muted);
  }

  .today-slot[data-state="past"] .subject-tile {
    opacity: .55;
  }

  .today-slot[data-state="past"] .today-slot__marker {
    background: var(--line-2);
    box-shadow: none;
  }

  .today-slot[data-state="active"] .today-slot__body {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
  }

  .today-slot[data-state="active"] .today-slot__subject {
    color: var(--on-primary);
    font-weight: 700;
  }

  .today-slot[data-state="active"] .subject-tile {
    color: var(--on-primary);
    background: #fff3;
    background: lab(100% 0 0 / .2);
  }

  .today-slot[data-state="active"] .today-slot__badge {
    background: var(--on-primary);
    color: var(--primary-ink);
  }

  .today-slot[data-state="active"] .today-slot__time {
    color: var(--primary-ink);
  }

  .today-slot[data-state="active"] .today-slot__marker {
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .today-slot[data-state="active"] .today-slot__marker {
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 25%, transparent);
    }
  }

  .today-slot[data-state="next"] .today-slot__body {
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--primary);
  }

  .today-slot[data-state="next"] .today-slot__badge {
    background: var(--primary-soft);
    color: var(--primary-ink);
  }

  .today-slot[data-state="next"] .today-slot__marker {
    box-shadow: inset 0 0 0 3px var(--primary);
  }

  .pay-card {
    background: var(--fg);
    color: var(--bg);
    box-shadow: var(--shadow-2);
  }

  .pay-card .kpi__value {
    color: var(--bg);
  }

  .pay-card__label {
    font-size: var(--fs-sm);
    color: var(--bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .pay-card__label {
      color: color-mix(in oklch, var(--bg) 70%, transparent);
    }
  }

  .pay-card .pay-card__btn {
    background: var(--primary);
    color: var(--on-primary);
  }

  .parent-page .table-wrap {
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
  }

  .parent-page .table__th {
    background: var(--fg);
    color: var(--bg);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .6875rem;
  }

  .parent-page .table__td {
    color: var(--fg);
  }

  .parent-page .report__campo {
    border-right: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--primary);
    color: var(--fg);
    font-weight: 700;
  }

  .parent-page .report__field-total {
    background: var(--primary-soft);
  }

  .parent-page .report__field-total .table__td {
    color: var(--primary-ink);
    font-weight: 700;
  }

  .parent-page .report__block {
    background: var(--bg-2);
    color: var(--fg-2);
  }

  .parent-page .report__total {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    border-top: 0;
  }

  .parent-page .report__total .table__td {
    color: var(--on-primary);
    font-weight: 700;
  }

  .parent-page .week-grid {
    gap: var(--sp-3);
  }

  .parent-page .week-grid__day {
    margin-bottom: var(--sp-1);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--fg-2);
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 0;
    padding: 7px 0;
    font-weight: 700;
  }

  .parent-page .week-grid__day[data-today] {
    background: var(--fg);
    color: var(--bg);
  }

  .parent-page .week-grid__slot {
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: inset 4px 0 0 oklch(62% .13 var(--slot-h, var(--brand-h))), inset 0 0 0 1px var(--line);
    border-left: 0;
    padding: 10px 12px;
  }

  .parent-page .week-grid__subject {
    font-size: var(--fs-sm);
    color: var(--fg);
    font-weight: 700;
  }

  .parent-page .week-grid__teacher {
    color: var(--muted);
  }

  .parent-page .week-grid__slot .note {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    font-weight: 700;
  }

  .parent-page .week-grid__slot[data-today] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
  }

  .parent-page .week-grid__slot[data-today] .week-grid__subject, .parent-page .week-grid__slot[data-today] .note {
    color: var(--on-primary);
  }

  .parent-page .week-grid__slot[data-today] .week-grid__teacher {
    color: #ffffffc7;
    color: lab(100% 0 0 / .78);
  }

  .parent-page .parent-calendar__title {
    font-family: var(--font-sans);
    letter-spacing: -.02em;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .parent-page .parent-calendar__nav-btn {
    background: var(--fg);
    width: 34px;
    height: 34px;
    color: var(--bg);
    border: 0;
    border-radius: 50%;
    padding: 0;
  }

  .parent-page .month-strip__chip {
    box-shadow: var(--shadow-1);
    border: 0;
  }

  .parent-page .month-strip__active {
    background: var(--fg);
  }

  .parent-page .month-strip__active .month-strip__abbr, .parent-page .month-strip__active .month-strip__count {
    color: var(--bg);
  }

  .parent-page .month-grid__week-day {
    color: var(--fg-2);
    font-weight: 700;
  }

  .parent-page .month-grid__day-cell {
    border: 1px solid var(--line);
  }

  .parent-page .month-grid__day-number {
    color: var(--fg);
    font-weight: 700;
  }

  .parent-page .month-grid__weekend {
    background: var(--bg-2);
    opacity: 1;
  }

  .parent-page .month-grid__weekend .month-grid__day-number {
    color: var(--muted);
  }

  .parent-page .month-grid__today {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
    border-color: #0000 !important;
  }

  .parent-page .month-grid__today .month-grid__day-number {
    color: var(--on-primary);
  }

  .parent-page .month-grid__today-badge {
    border-radius: var(--r-pill);
    background: var(--on-primary);
    color: var(--primary-ink);
    padding: 1px 6px;
  }

  .parent-page .parent-calendar__panel {
    border-radius: var(--r-4);
    box-shadow: var(--shadow-2);
    border: 0;
  }

  .parent-page .parent-calendar__detail-header {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
  }

  .parent-page .parent-avisos__chip.parent-avisos__active {
    background: var(--fg);
    color: var(--bg);
  }

  .parent-page .notice-option {
    border-color: var(--line-2);
  }

  .parent-page .notice-option[aria-pressed="true"] {
    background: var(--fg);
    border-color: #0000;
  }

  .parent-page .notice-option[aria-pressed="true"] .section-title {
    color: var(--bg);
  }

  .parent-page .notice-option[aria-pressed="true"] .note, .parent-page .notice-option[aria-pressed="true"] .text-secondary {
    color: var(--bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .parent-page .notice-option[aria-pressed="true"] .note, .parent-page .notice-option[aria-pressed="true"] .text-secondary {
      color: color-mix(in oklch, var(--bg) 72%, transparent);
    }
  }

  .parent-page .parent-avisos__hero-card {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--tone, var(--primary-dark)));
  }

  .parent-page .summary-tile--card {
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
  }

  .parent-page .summary-tile__value {
    letter-spacing: -.02em;
    font-size: 1.875rem;
  }

  .parent-page .pay-summary--pending {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
  }

  .parent-page .pay-summary--paid {
    background: var(--fg);
  }

  .parent-page .pay-summary--pending .form-field__label, .parent-page .pay-summary--paid .form-field__label {
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
  }

  .parent-page .pay-summary--pending .summary-tile__value {
    color: var(--on-primary);
  }

  .parent-page .pay-summary--paid .summary-tile__value {
    color: var(--bg);
  }

  .parent-page .pay-row {
    padding: var(--sp-4) var(--sp-5);
    box-shadow: inset 4px 0 0 var(--primary), inset 0 0 0 1px var(--line-2);
  }

  .parent-page .pay-row .text-strong {
    font-size: var(--fs-md);
  }

  .parent-page .kpi {
    box-shadow: inset 0 4px 0 var(--kpi-tone), var(--shadow-1);
  }

  .parent-page .kpi:after {
    background: var(--kpi-tone);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .parent-page .kpi:after {
      background: color-mix(in oklch, var(--kpi-tone) 18%, transparent);
    }
  }

  .parent-page .kpi__value {
    font-size: 2.25rem;
  }

  .parent-page .pill-btn {
    background: var(--fg);
    color: var(--bg);
    border-color: #0000;
    padding: 4px 12px;
    font-weight: 700;
  }

  .parent-page .pill-btn:hover {
    background: var(--primary-dark);
  }

  .parent-page .profile-header {
    background: radial-gradient(circle at 92% -20%, var(--primary), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .parent-page .profile-header {
      background: radial-gradient(circle at 92% -20%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    }
  }

  .parent-page .profile-header {
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
    border-radius: var(--r-5);
    padding: var(--sp-6) var(--sp-7);
  }

  .parent-page .profile-header .avatar {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 0 0 4px #ffffff2e;
    box-shadow: 0 0 0 4px lab(100% 0 0 / .18);
  }

  .parent-page .profile-header__name {
    color: var(--on-primary);
    font-size: var(--fs-xl);
  }

  .parent-page .profile-header__fact {
    border-radius: var(--r-3);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    padding: 6px 12px;
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .parent-page .hub-grid .card {
    box-shadow: var(--shadow-2);
  }

  .parent-page .hub-grid .card__header {
    box-shadow: inset 0 -1px 0 var(--line);
    padding-bottom: var(--sp-3);
  }

  .parent-page .detail-rows {
    gap: var(--sp-3) var(--sp-5);
    font-size: var(--fs-base);
  }

  .parent-page .detail-rows__row dt {
    color: var(--fg-2);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    align-self: center;
    font-weight: 700;
  }

  .parent-page .detail-rows__row dd {
    color: var(--fg);
    font-weight: 600;
  }

  .teacher-agenda__page {
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    display: flex;
  }

  .teacher-agenda__banner {
    background: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .teacher-agenda__banner {
      background: color-mix(in oklch, var(--warning) 15%, transparent);
    }
  }

  .teacher-agenda__banner {
    border: 1.5px solid var(--warning);
    color: oklch(44% .1 var(--hue-warning));
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .85rem;
  }

  .teacher-agenda__header {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .teacher-agenda__header-left {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .teacher-agenda__title {
    color: var(--fg);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .teacher-agenda__nav-btn {
    border: 1.5px solid var(--line);
    cursor: pointer;
    color: var(--fg);
    background: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 1.1rem;
  }

  .teacher-agenda__new-btn {
    background: var(--primary);
    color: var(--on-primary);
    cursor: pointer;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 500;
  }

  .teacher-agenda__body {
    flex: 1;
    gap: 16px;
    display: flex;
  }

  .teacher-agenda__grid-area {
    flex: 1;
    overflow: auto;
  }

  .teacher-agenda__panel {
    border: 1.5px solid var(--line);
    background: var(--bg);
    border-radius: 10px;
    flex-shrink: 0;
    width: 300px;
    overflow: auto;
  }

  .teacher-agenda__detail-header {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px;
    font-size: .95rem;
    font-weight: 600;
    display: flex;
  }

  .teacher-agenda__detail-body {
    color: var(--fg);
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    font-size: .875rem;
    display: flex;
  }

  .teacher-page .card {
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
    border: 0;
  }

  .teacher-page .card-grid .card {
    box-shadow: inset 0 4px 0 var(--primary), var(--shadow-2);
  }

  .teacher-page .card__title {
    color: var(--fg);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .teacher-page .card-grid .title-lg {
    color: var(--fg);
    font-weight: 800;
  }

  .teacher-page .card-grid .note {
    color: var(--fg-2);
  }

  .teacher-page .table-wrap {
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
  }

  .teacher-page .table__th {
    background: var(--fg);
    color: var(--bg);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .6875rem;
  }

  .teacher-page .table__row:hover {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .teacher-page .section-tabs .tabs__tab[aria-selected="true"] {
    border-color: var(--fg);
    background: var(--fg);
    color: var(--bg);
  }

  .teacher-page .class-row__time {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page .class-row[data-active] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
    color: var(--on-primary);
  }

  .teacher-page .class-row[data-active] .class-row__time, .teacher-page .class-row[data-active] .text-strong {
    color: var(--on-primary);
  }

  .teacher-page .class-row[data-active] .note {
    color: #ffffffc7;
    color: lab(100% 0 0 / .78);
  }

  .teacher-page .class-row:not([data-active]):hover {
    background: var(--primary-soft);
  }

  .teacher-page .todo-item__title {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page .chip-row {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-3);
    box-shadow: inset 4px 0 0 var(--primary);
    background: var(--surface-2);
  }

  .teacher-page .chip-row:hover {
    background: var(--primary-soft);
  }

  .teacher-hero__back {
    color: var(--on-primary);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    border: 0;
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .teacher-hero__back:hover {
    background: #ffffff29;
    background: lab(100% 0 0 / .16);
  }

  .teacher-page .workspace {
    margin: var(--sp-5) var(--sp-7) var(--sp-7);
    border-radius: var(--r-5);
    background: var(--surface);
    box-shadow: var(--shadow-2);
  }

  .teacher-page .workspace .workspace {
    box-shadow: none;
    border-radius: 0;
    margin: 0;
  }

  .teacher-page .workspace__empty {
    color: var(--fg-2);
    font-weight: 600;
  }

  .teacher-page .choice-pill--solid[aria-pressed="true"] {
    background: var(--fg);
    color: var(--bg);
  }

  .teacher-page .hw-item {
    border-radius: var(--r-4);
    box-shadow: inset 4px 0 0 var(--line-2), var(--shadow-1);
    border: 0;
  }

  .teacher-page .hw-item:hover {
    background: var(--primary-soft);
  }

  .teacher-page .hw-item[aria-pressed="true"] {
    background: var(--primary-soft);
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
  }

  .teacher-page .teacher-agenda__header {
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-5);
    background: radial-gradient(circle at 92% -20%, var(--primary), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .teacher-page .teacher-agenda__header {
      background: radial-gradient(circle at 92% -20%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    }
  }

  .teacher-page .teacher-agenda__header {
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
  }

  .teacher-page .teacher-agenda__title {
    color: var(--on-primary);
    letter-spacing: -.02em;
    font-size: 1.5rem;
  }

  .teacher-page .teacher-agenda__nav-btn {
    width: 34px;
    height: 34px;
    color: var(--on-primary);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    border: 0;
    border-radius: 50%;
    padding: 0;
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .teacher-page .teacher-agenda__nav-btn:hover {
    background: #ffffff29;
    background: lab(100% 0 0 / .16);
  }

  .teacher-page .teacher-agenda__new-btn {
    border-radius: var(--r-pill);
    background: var(--primary);
    font-weight: 700;
    box-shadow: 0 0 0 4px #ffffff24;
    box-shadow: 0 0 0 4px lab(100% 0 0 / .14);
  }

  .teacher-page .teacher-agenda__banner {
    border-radius: var(--r-4);
    box-shadow: inset 4px 0 0 var(--warning);
    border: 0;
    font-weight: 600;
  }

  .teacher-page .month-strip__chip {
    box-shadow: var(--shadow-1);
    border: 0;
  }

  .teacher-page .month-strip__active {
    background: var(--fg);
  }

  .teacher-page .month-strip__active .month-strip__abbr, .teacher-page .month-strip__active .month-strip__count {
    color: var(--bg);
  }

  .teacher-page .month-grid__week-day {
    color: var(--fg-2);
    font-weight: 700;
  }

  .teacher-page .month-grid__day-cell {
    border: 1px solid var(--line);
  }

  .teacher-page .month-grid__day-number {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page .month-grid__weekend {
    background: var(--bg-2);
    opacity: 1;
  }

  .teacher-page .month-grid__weekend .month-grid__day-number {
    color: var(--muted);
  }

  .teacher-page .month-grid__today {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: var(--shadow-brand);
    border-color: #0000 !important;
  }

  .teacher-page .month-grid__today .month-grid__day-number {
    color: var(--on-primary);
  }

  .teacher-page .month-grid__today-badge {
    border-radius: var(--r-pill);
    background: var(--on-primary);
    color: var(--primary-ink);
    padding: 1px 6px;
  }

  .teacher-page .teacher-agenda__panel {
    border-radius: var(--r-4);
    box-shadow: var(--shadow-2);
    border: 0;
  }

  .teacher-page .teacher-agenda__detail-header {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    color: var(--on-primary);
  }

  .teacher-page .criteria-hero__period {
    margin-top: var(--sp-1);
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    font-weight: 600;
  }

  .teacher-page .criteria-editor {
    gap: var(--sp-4);
    padding: var(--sp-5);
    box-shadow: inset 0 4px 0 var(--primary), var(--shadow-2);
    flex-direction: column;
    display: flex;
  }

  .teacher-page .criteria-editor__head {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-3);
    flex-wrap: wrap;
    display: flex;
  }

  .teacher-page .criteria-editor__head .note {
    margin-top: var(--sp-1);
    color: var(--fg-2);
  }

  .teacher-page .criteria-editor__total {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-lg);
    display: flex;
  }

  .teacher-page .criteria-list {
    gap: var(--sp-2);
    flex-direction: column;
    display: flex;
  }

  .teacher-page .criteria-list__head, .teacher-page .criteria-row {
    align-items: center;
    gap: var(--sp-3);
    grid-template-columns: 32px minmax(0, 2fr) 120px minmax(0, 3fr) 36px;
    display: grid;
  }

  .teacher-page .criteria-list__head {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-3);
    background: var(--fg);
    color: var(--bg);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 700;
  }

  .teacher-page .criteria-list__rows {
    gap: var(--sp-2);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .teacher-page .criteria-row {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: inset 4px 0 0 var(--line-2), var(--shadow-1);
    transition: background .15s, box-shadow .15s;
  }

  .teacher-page .criteria-row:hover, .teacher-page .criteria-row:focus-within {
    background: var(--primary-soft);
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
  }

  .teacher-page .criteria-row__index {
    border-radius: var(--r-pill);
    background: var(--fg);
    width: 28px;
    height: 28px;
    color: var(--bg);
    font-size: var(--fs-xs);
    place-items: center;
    font-weight: 700;
    display: grid;
  }

  .teacher-page .criteria-row__pct {
    position: relative;
  }

  .teacher-page .criteria-row__pct .input {
    padding-right: calc(var(--sp-3) + 14px);
    text-align: right;
    font-weight: 700;
  }

  .teacher-page .criteria-row__pct span {
    top: 50%;
    right: var(--sp-3);
    color: var(--fg-2);
    pointer-events: none;
    font-weight: 700;
    position: absolute;
    transform: translateY(-50%);
  }

  .teacher-page .criteria-row .input {
    background: var(--surface-2);
  }

  .teacher-page .criteria-row .input:disabled {
    color: var(--fg);
    cursor: default;
    background: none;
  }

  .teacher-page .criteria-add {
    justify-content: center;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--ctl-h);
    border: 1.5px dashed var(--line-2);
    border-radius: var(--r-4);
    color: var(--fg-2);
    cursor: pointer;
    background: none;
    font-weight: 700;
    transition: border-color .15s, background .15s, color .15s;
    display: flex;
  }

  .teacher-page .criteria-add:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary-ink);
  }

  .teacher-page .criteria-editor__actions {
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    display: flex;
  }

  @media (max-width: 720px) {
    .teacher-page .criteria-list__head {
      display: none;
    }

    .teacher-page .criteria-row {
      grid-template-columns: 28px minmax(0, 1fr) 96px 36px;
    }

    .teacher-page .criteria-row > .input:nth-of-type(2) {
      grid-area: 2 / 2 / auto / -1;
    }
  }

  .teacher-page .eval-matrix .table__th {
    vertical-align: bottom;
  }

  .teacher-page .eval-matrix__period {
    align-items: flex-start;
    gap: var(--sp-1);
    flex-direction: column;
    display: flex;
  }

  .teacher-page .eval-matrix__period .chip {
    letter-spacing: .04em;
    font-size: .625rem;
  }

  .teacher-page .eval-matrix .table__td {
    vertical-align: top;
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
  }

  .teacher-page .eval-matrix__subject {
    color: var(--fg);
    box-shadow: inset 4px 0 0 var(--primary);
    font-weight: 700;
  }

  .teacher-page .eval-matrix .table__row:hover .eval-matrix__subject {
    box-shadow: none;
  }

  .teacher-page .eval-matrix td[data-period-status="CLOSED"] {
    background: var(--bg-2);
  }

  .teacher-page .eval-cell {
    align-items: flex-start;
    gap: var(--sp-2);
    flex-direction: column;
    display: flex;
  }

  .teacher-page .eval-cell__pending {
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--line-2);
    color: var(--fg-2);
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .teacher-page .eval-cell__link {
    color: var(--fg-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
  }

  .teacher-page .eval-cell__link:hover {
    color: var(--primary-ink);
    text-decoration: underline;
  }

  .teacher-page .eval-cell__link .chip {
    text-decoration: none;
  }

  .teacher-page .results-hero__period {
    margin-top: var(--sp-1);
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    font-weight: 600;
  }

  .teacher-page .results-hero__meta {
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
    font-weight: 600;
    display: flex;
  }

  .teacher-page .results-hero__meta .chip {
    color: var(--on-primary);
    background: #ffffff14;
    background: lab(100% 0 0 / .08);
    border: 0;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px #ffffff24;
    box-shadow: inset 0 0 0 1px lab(100% 0 0 / .14);
  }

  .teacher-page .results-sheet .table__td.text-strong {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page .results-sheet .grade-input {
    background: var(--surface-2);
    text-align: right;
    font-weight: 700;
  }

  .teacher-page .results-sheet .grade-input:read-only {
    box-shadow: none;
    background: none;
  }

  .teacher-page .results-sheet .table__row[data-highlight="true"] {
    box-shadow: inset 3px 0 0 var(--danger);
  }

  .teacher-page .evidence-list .table__td.text-strong {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page .evidence-list .table__row[aria-selected="true"] {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .teacher-page.evidence-scores .note {
    color: var(--fg-2);
    font-weight: 600;
  }

  .teacher-page.evidence-scores .table-wrap {
    box-shadow: var(--shadow-1);
  }

  .teacher-page.evidence-scores .table__td.text-strong {
    color: var(--fg);
    font-weight: 700;
  }

  .teacher-page.evidence-scores .input {
    background: var(--surface-2);
    font-weight: 700;
  }

  .class-row {
    padding: 14px var(--card-pad);
    border-top: 1px solid var(--line);
    align-items: center;
    gap: 14px;
    display: flex;
    position: relative;
  }

  .class-row[data-active] {
    background: var(--primary-soft);
  }

  .class-row__bar {
    background: oklch(62% .13 var(--slot-h, var(--brand-h)));
    width: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .class-row__time {
    min-width: 90px;
    font-size: var(--fs-xs);
    color: var(--muted);
    padding-left: 6px;
  }

  .grade-big {
    letter-spacing: -.02em;
    color: var(--muted);
    font-size: 2rem;
    font-weight: 700;
  }

  [data-tone="danger"] .grade-big {
    color: oklch(50% .16 var(--hue-danger));
  }

  [data-tone="warning"] .grade-big {
    color: oklch(48% .11 var(--hue-gold));
  }

  [data-tone="success"] .grade-big {
    color: oklch(45% .13 var(--hue-success));
  }

  .todo-item {
    align-items: flex-start;
    gap: var(--sp-3);
    color: inherit;
    text-decoration: none;
    display: flex;
  }

  .todo-item__box {
    border-radius: var(--r-1);
    background: var(--surface);
    width: 18px;
    height: 18px;
    box-shadow: inset 0 0 0 1.5px var(--line-2);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .todo-item__title {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    display: block;
  }

  .hw-item {
    width: 100%;
    padding: var(--sp-3) 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--surface);
    text-align: left;
    border-left: 3px solid #0000;
  }

  .hw-item:hover {
    background: var(--surface-2);
  }

  .hw-item[aria-pressed="true"] {
    border-color: var(--primary-2);
    border-left-color: var(--primary);
    background: var(--primary-soft);
  }

  .hw-item__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 1.3;
  }

  .hw-detail {
    padding: var(--sp-5) 28px 28px;
    overflow-y: auto;
  }

  .hw-steps {
    flex-direction: column;
    gap: 10px;
    list-style: none;
    display: flex;
  }

  .hw-steps__item {
    font-size: var(--fs-base);
    gap: 14px;
    line-height: 1.5;
    display: flex;
  }

  .hw-steps__num {
    min-width: 16px;
    color: var(--muted);
    flex-shrink: 0;
    font-weight: 600;
  }

  .file-link {
    align-items: center;
    gap: var(--sp-3);
    max-width: 320px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    color: inherit;
    font-size: var(--fs-sm);
    text-decoration: none;
    display: inline-flex;
  }

  button.file-link {
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border: 0;
  }

  .file-link:hover {
    background: var(--surface-2);
  }

  .file-preview__frame {
    border-radius: var(--r-3);
    width: 100%;
    height: 70vh;
    box-shadow: inset 0 0 0 1px var(--line);
    border: 0;
    display: block;
  }

  .file-preview__image {
    border-radius: var(--r-3);
    max-width: 100%;
    max-height: 70vh;
    margin-inline: auto;
    display: block;
  }

  .file-link__icon {
    flex-shrink: 0;
    font-size: 1.375rem;
  }

  .file-link__name {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
  }

  .eyebrow__hint {
    letter-spacing: 0;
    text-transform: none;
    font-size: .6875rem;
    font-weight: 400;
  }

  .drop-btn {
    padding: var(--sp-2) 14px;
    border: 1.5px dashed var(--line-2);
    border-radius: var(--r-2);
    color: var(--fg-2);
    font-size: var(--fs-sm);
    cursor: pointer;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .drop-btn:hover {
    border-color: var(--primary);
    color: var(--primary-ink);
  }

  .mode-card {
    padding: 14px 14px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--surface);
    text-align: left;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    display: flex;
    position: relative;
  }

  .mode-card[aria-pressed="true"] {
    border: 2px solid var(--primary);
    background: var(--primary-soft);
  }

  .mode-card__label {
    font-size: var(--fs-sm);
    color: var(--fg);
    font-weight: 700;
  }

  .mode-card[aria-pressed="true"] .mode-card__label {
    color: var(--primary-ink);
  }

  .mode-card__check {
    top: var(--sp-2);
    right: var(--sp-2);
    background: var(--primary);
    width: 18px;
    height: 18px;
    color: var(--on-primary);
    border-radius: 50%;
    place-items: center;
    font-size: .6875rem;
    display: grid;
    position: absolute;
  }

  .student-file {
    gap: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .student-file__card {
    gap: var(--sp-5);
    padding: var(--card-pad);
    flex-direction: column;
    display: flex;
  }

  .student-file__header {
    align-items: center;
    gap: var(--sp-4);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    display: flex;
  }

  .student-photo {
    object-fit: cover;
    border-radius: var(--r-4);
    background: var(--surface-2);
    flex-shrink: 0;
    width: 112px;
    height: 136px;
  }

  .student-photo--placeholder {
    place-items: center;
    font-size: 1.75rem;
    display: grid;
  }

  .student-file__identity {
    gap: var(--sp-1);
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .student-file__name {
    font-size: var(--fs-lg);
    letter-spacing: -.015em;
    font-weight: 700;
  }

  .student-file__heading {
    font-size: var(--fs-md);
    margin-bottom: var(--sp-3);
    font-weight: 700;
  }

  .student-file__tiles {
    gap: var(--sp-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    display: grid;
  }

  .student-file__tile {
    gap: var(--sp-1);
    color: var(--muted);
    flex-direction: column;
    display: flex;
  }

  .student-file__tile-label {
    font-size: var(--fs-xs);
    font-weight: 600;
  }

  .student-file__tile-value {
    font-size: var(--fs-md);
    color: var(--fg);
    margin: 0;
    font-weight: 600;
  }

  .student-file__safety {
    gap: var(--sp-2);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--danger-soft);
    flex-direction: column;
    display: flex;
  }

  .student-file__safety-title {
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    color: var(--danger);
    font-weight: 700;
    display: flex;
  }

  .student-file__safety-list {
    gap: var(--sp-2);
    flex-direction: column;
    list-style: none;
    display: flex;
  }

  .student-file__safety-list li {
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .student-file__rows {
    flex-direction: column;
    list-style: none;
    display: flex;
  }

  .student-file__rows li + li {
    border-top: 1px solid var(--line);
  }

  .student-file__row {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    color: var(--fg);
    text-decoration: none;
    display: flex;
  }

  .student-file__row:hover .student-file__row-title {
    color: var(--primary);
  }

  .student-file__row-text {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .student-file__row-title {
    font-weight: 600;
  }

  .student-file__repeat {
    align-items: end;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    display: grid;
  }

  .student-file__photo-actions {
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    display: flex;
  }

  .card-form {
    gap: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .card-form__row {
    gap: var(--sp-3);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .card-form__mono {
    font-family: var(--font-mono);
    letter-spacing: .04em;
  }

  .card-form__accepted {
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .card-form__accepted li {
    border-radius: var(--r-1);
    box-shadow: 0 0 0 1px var(--line);
    transition: opacity .2s, filter .2s;
    display: flex;
  }

  .card-form__accepted li[data-active="false"] {
    opacity: .35;
    filter: grayscale();
  }

  .card-form .field__trailing svg[role="img"] {
    border-radius: var(--r-1);
    box-shadow: 0 0 0 1px var(--line);
  }

  .card-form__secure {
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
  }

  .card-preview {
    --card-from: oklch(32% .06 var(--brand-h));
    --card-to: oklch(52% .12 var(--brand-h));
    aspect-ratio: 1.586;
    width: 100%;
    max-width: 340px;
    padding: var(--sp-5);
    border-radius: var(--r-5);
    color: #fff;
    background: radial-gradient(120% 90% at 100% 0%, #ffffff2e, transparent 55%), linear-gradient(135deg, var(--card-from), var(--card-to));
    box-shadow: 0 14px 30px -12px oklch(20% .05 var(--brand-h) / .55);
    flex-direction: column;
    justify-content: space-between;
    margin: 0 auto;
    transition: background .4s;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  @supports (color: lab(0% 0 0)) {
    .card-preview {
      background: radial-gradient(120% 90% at 100% 0%, lab(100% 0 0 / .18), transparent 55%), linear-gradient(135deg, var(--card-from), var(--card-to));
    }
  }

  .card-preview:after {
    content: "";
    aspect-ratio: 1;
    pointer-events: none;
    background: #ffffff12;
    background: lab(100% 0 0 / .07);
    border-radius: 50%;
    width: 90%;
    position: absolute;
    bottom: -55%;
    right: -30%;
  }

  .card-preview[data-brand="visa"] {
    --card-from: #122555;
    --card-to: #0e5caf;
  }

  @supports (color: lab(0% 0 0)) {
    .card-preview[data-brand="visa"] {
      --card-from: lab(15.5199% 7.37186 -31.8361);
      --card-to: lab(38.5303% 3.47616 -51.474);
    }
  }

  .card-preview[data-brand="mastercard"] {
    --card-from: #281c18;
    --card-to: #684231;
  }

  @supports (color: lab(0% 0 0)) {
    .card-preview[data-brand="mastercard"] {
      --card-from: lab(11.7044% 5.35208 5.12853);
      --card-to: lab(32.3428% 15.484 17.6531);
    }
  }

  .card-preview[data-brand="amex"] {
    --card-from: #004d75;
    --card-to: #2c94b0;
  }

  @supports (color: lab(0% 0 0)) {
    .card-preview[data-brand="amex"] {
      --card-from: lab(30.2185% -9.13744 -31.0345);
      --card-to: lab(56.4256% -23.0511 -23.6231);
    }
  }

  .card-preview__top {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .card-preview__chip {
    background: linear-gradient(90deg, #0000 45%, #67522d80 45% 55%, #0000 55%), linear-gradient(0deg, #0000 30%, #67522d80 30% 36%, #0000 36% 64%, #67522d80 64% 70%, #0000 70%), linear-gradient(135deg, #eed592, #c99d4e);
    background: linear-gradient(90deg, #0000 45%, lab(36.2583% 5.483 24.9447 / .5) 45% 55%, #0000 55%), linear-gradient(0deg, #0000 30%, lab(36.2583% 5.483 24.9447 / .5) 30% 36%, #0000 36% 64%, lab(36.2583% 5.483 24.9447 / .5) 64% 70%, #0000 70%), linear-gradient(135deg, lab(86.4074% 2.17065 36.6728), lab(67.5963% 10.5772 46.9335));
    border-radius: 6px;
    width: 40px;
    height: 30px;
  }

  .card-brand__bg {
    fill: #fff;
  }

  .card-brand--visa .card-brand__ink {
    fill: #1a1f71;
  }

  .card-brand--amex .card-brand__bg {
    fill: #1f72cd;
  }

  .card-brand--amex .card-brand__ink {
    fill: #fff;
  }

  .card-brand__mc-red {
    fill: #eb001b;
  }

  .card-brand__mc-yellow {
    fill: #f79e1b;
  }

  .card-brand__mc-overlap {
    fill: #ff5f00;
  }

  .card-preview__brand {
    border-radius: var(--r-1);
    width: 52px;
    height: auto;
  }

  .card-preview__number {
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-shadow: 0 1px 2px #00000059;
    text-shadow: 0 1px 2px lab(0% 0 0 / .35);
    white-space: nowrap;
    font-size: clamp(1rem, 4.6vw, 1.3rem);
  }

  .card-preview__bottom {
    justify-content: space-between;
    gap: var(--sp-3);
    display: flex;
  }

  .card-preview__meta {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .card-preview__caption {
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .7;
    font-size: .625rem;
  }

  .card-preview__value {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    overflow: hidden;
  }

  .pay-modal__header {
    align-items: center;
    gap: var(--sp-3);
    display: flex;
  }

  .pay-modal__icon, .pay-method__icon {
    border-radius: var(--r-4);
    background: var(--primary-soft);
    width: 44px;
    height: 44px;
    color: var(--primary);
    flex: none;
    place-items: center;
    display: grid;
  }

  .pay-summary {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-4);
    background: radial-gradient(120% 140% at 100% 0%, var(--primary-soft), transparent 60%), var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    flex-direction: column;
    gap: 2px;
    display: flex;
    position: relative;
  }

  .pay-summary__concept {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--fg);
    font-weight: 600;
  }

  .pay-summary__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    font-weight: 600;
  }

  .pay-summary__amount {
    font-size: var(--fs-xl);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    font-weight: 700;
  }

  .pay-summary__amount .text-muted {
    font-size: var(--fs-xs);
    letter-spacing: 0;
    font-weight: 500;
    display: block;
  }

  .pay-methods {
    gap: var(--sp-3);
    flex-direction: column;
    display: flex;
  }

  .pay-method {
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s, background .15s;
    display: flex;
  }

  .pay-method:hover:not(:disabled) {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
  }

  .pay-method:focus-visible {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
  }

  .pay-method:disabled {
    opacity: .55;
    cursor: wait;
  }

  .pay-method__body {
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .pay-method__title {
    font-size: var(--fs-md);
    font-weight: 600;
  }

  .pay-method__desc {
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .pay-method__brands {
    margin-top: var(--sp-2);
    gap: 6px;
    display: flex;
  }

  .pay-method__brands svg {
    width: 32px;
    height: auto;
    box-shadow: 0 0 0 1px var(--line);
    border-radius: 3px;
  }

  .pay-method__chevron {
    color: var(--muted);
    flex: none;
    transition: transform .15s, color .15s;
  }

  .pay-method:hover:not(:disabled) .pay-method__chevron {
    color: var(--primary);
    transform: translateX(2px);
  }

  .pay-modal__back {
    color: var(--primary);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    background: none;
    border: none;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    padding: 0;
    font-weight: 600;
    display: inline-flex;
  }

  .pay-modal__back:hover:not(:disabled) {
    text-decoration: underline;
  }

  .pay-modal__back:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .pay-status {
    --pay-status-tone: var(--primary);
    --pay-status-soft: var(--primary-soft);
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-5);
    background: radial-gradient(90% 110% at 50% 0%, var(--pay-status-soft), transparent 70%);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .pay-status--success {
    --pay-status-tone: var(--success);
    --pay-status-soft: var(--success-soft);
  }

  .pay-status--danger {
    --pay-status-tone: var(--danger);
    --pay-status-soft: var(--danger-soft);
  }

  .pay-status--warning {
    --pay-status-tone: var(--warning);
    --pay-status-soft: var(--warning-soft);
  }

  .pay-status__badge {
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-2);
    background: var(--pay-status-tone);
    color: var(--bg);
    box-shadow: 0 0 0 8px var(--pay-status-soft), var(--shadow-2);
    border-radius: 50%;
    place-items: center;
    animation: .35s cubic-bezier(.34, 1.56, .64, 1) both pay-status-pop;
    display: grid;
  }

  .pay-status__badge svg {
    stroke-width: 2.6px;
  }

  .pay-status__spinner {
    width: 56px;
    height: 56px;
    margin-bottom: var(--sp-2);
    border: 5px solid var(--primary-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: .8s linear infinite pay-status-spin;
  }

  .pay-status__title {
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
    color: var(--fg);
    margin: 0;
    font-weight: 800;
  }

  .pay-status__text {
    max-width: 36ch;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    margin: 0;
  }

  .pay-status__meta {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }

  .pay-status .btn {
    margin-top: var(--sp-3);
  }

  @keyframes pay-status-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes pay-status-pop {
    from {
      opacity: 0;
      transform: scale(.6);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pay-status__badge {
      animation: none;
    }

    .pay-status__spinner {
      animation-duration: 2.4s;
    }
  }

  .admin-hero {
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-5);
    background: radial-gradient(circle at 92% -20%, var(--primary), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    flex-wrap: wrap;
    display: flex;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .admin-hero {
      background: radial-gradient(circle at 92% -20%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 55%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    }
  }

  .admin-hero {
    color: var(--on-primary);
    box-shadow: var(--shadow-2);
  }

  .admin-hero__icon {
    border-radius: var(--r-4);
    background: var(--primary);
    flex-shrink: 0;
    place-items: center;
    width: 48px;
    height: 48px;
    display: grid;
    box-shadow: 0 0 0 4px #ffffff24;
    box-shadow: 0 0 0 4px lab(100% 0 0 / .14);
  }

  .admin-hero__count {
    letter-spacing: -.02em;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
  }

  .admin-hero__label {
    font-size: var(--fs-sm);
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
    margin-top: 4px;
    font-weight: 600;
  }

  .admin-hero__search {
    width: min(320px, 100%);
    color: var(--on-primary);
    background: #ffffff1a;
    background: lab(100% 0 0 / .1);
    border-color: #fff3;
    border-color: lab(100% 0 0 / .2);
  }

  .admin-hero__search::placeholder {
    color: #fff9;
    color: lab(100% 0 0 / .6);
  }

  .admin-hero__search:focus {
    background: #ffffff29;
    background: lab(100% 0 0 / .16);
    border-color: #ffffff80;
    border-color: lab(100% 0 0 / .5);
  }

  .admin-page .table-wrap {
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
  }

  .admin-page .table__th {
    background: var(--fg);
    color: var(--bg);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .6875rem;
  }

  .admin-page .table__row:hover {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .admin-page .table__td .note {
    color: var(--fg-2);
  }

  .admin-page .table__td .avatar {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line-2);
  }

  .admin-page .icon-btn {
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--fg);
  }

  .admin-page .icon-btn:hover {
    background: var(--fg);
    color: var(--bg);
  }

  .admin-page .filter-panel {
    border-radius: var(--r-5);
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
    border: 0;
  }

  .admin-page .filter-panel__label {
    color: var(--fg);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .admin-page .chart-card {
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
  }

  .admin-page .chart-card .card__title {
    color: var(--fg);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .admin-page .section-tabs .tabs__tab[aria-selected="true"] {
    border-color: var(--fg);
    background: var(--fg);
    color: var(--bg);
  }

  .admin-page .pager .note {
    border-radius: var(--r-pill);
    background: var(--fg);
    color: var(--bg);
    padding: 4px 12px;
    font-weight: 700;
  }

  .admin-page .card-grid .card {
    border-radius: var(--r-5);
    box-shadow: inset 0 4px 0 var(--primary), var(--shadow-2);
  }

  .admin-page .card-grid .kpi__value {
    color: var(--fg);
    font-weight: 800;
  }

  .admin-page .timetable__day {
    border-radius: var(--r-pill);
    background: var(--fg);
    color: var(--bg);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 7px 6px;
    font-weight: 700;
  }

  .admin-page .timetable__start {
    color: var(--fg);
    font-weight: 700;
  }

  .admin-page .timetable__slot {
    box-shadow: inset 4px 0 0 oklch(55% .13 var(--slot-h));
  }

  .admin-page .timetable__subject {
    font-weight: 700;
  }

  .admin-page .timetable__slot--other {
    box-shadow: inset 0 0 0 1.5px var(--line-2);
  }

  .admin-page .timetable__break {
    border-radius: var(--r-2);
    background: var(--bg-2);
    color: var(--fg-2);
    border: 0;
  }

  .admin-page .person-option[aria-pressed="true"] {
    background: var(--fg);
  }

  .admin-page .person-option[aria-pressed="true"] .person-option__name, .admin-page .person-option[aria-pressed="true"] .person-option__meta {
    color: var(--bg);
  }

  .admin-page .person-option[aria-pressed="true"] .person-option__sub {
    color: var(--bg);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .admin-page .person-option[aria-pressed="true"] .person-option__sub {
      color: color-mix(in oklch, var(--bg) 72%, transparent);
    }
  }

  .admin-page .tenant-stats .kpi {
    border-radius: var(--r-5);
    box-shadow: inset 0 4px 0 var(--kpi-tone), var(--shadow-2);
  }

  .admin-page .tenant-stats .kpi__label {
    color: var(--fg-2);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .admin-page .tenant-stats .kpi__value {
    font-weight: 800;
  }

  .admin-page .tenant-stats .kpi__foot {
    color: var(--fg-2);
    font-weight: 600;
  }

  .admin-page .tenant-stats .card {
    border-radius: var(--r-5);
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
    border: 0;
  }

  .admin-page .tenant-stats .eyebrow {
    color: var(--fg);
    font-weight: 700;
  }

  .admin-page .tenant-stats .stat-list__row dd {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .admin-page .tenant-stats .title-lg {
    font-weight: 800;
  }

  .messaging-sections {
    gap: var(--sp-7);
    margin-top: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .messaging-section {
    gap: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .messaging-section__header {
    gap: var(--sp-1);
    flex-direction: column;
    display: flex;
  }

  .messaging-section__title {
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
    color: var(--fg);
    font-weight: 800;
  }

  .channel-grid {
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
    display: grid;
  }

  .channel-card .card__header {
    padding-top: var(--sp-5);
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .channel-card .card__body {
    padding-top: var(--sp-4);
  }

  .channel-fields {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc(50% - var(--sp-5)))), 1fr));
    gap: var(--sp-4) var(--sp-5);
    display: grid;
  }

  .channel-fields__full {
    grid-column: 1 / -1;
  }

  .assignment-cell {
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    flex-wrap: wrap;
    display: flex;
  }

  .assignment-cell .input {
    flex: 220px;
    width: auto;
    min-width: 220px;
  }

  .admin-page .channel-card {
    border-radius: var(--r-5);
    box-shadow: inset 0 4px 0 var(--primary), var(--shadow-2);
  }

  .admin-page .channel-card .card__title {
    font-weight: 800;
  }

  .admin-page .channel-card .form-field__label {
    color: var(--fg);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
  }

  .admin-page .table__td:has( > .assignment-cell) {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
  }

  .fiscal-step {
    align-items: center;
    gap: var(--sp-2);
    display: inline-flex;
  }

  .fiscal-step__icon {
    color: var(--muted);
  }

  .fiscal-step__icon--done {
    color: var(--success);
  }

  .invoice-timeline {
    gap: var(--sp-3);
    border-left: 2px solid var(--line);
    padding-left: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .invoice-timeline__item {
    flex-direction: column;
    gap: 2px;
    display: flex;
  }

  .invoice-dl {
    gap: var(--sp-1) var(--sp-4);
    grid-template-columns: max-content 1fr;
    display: grid;
  }

  .invoice-dl dt {
    color: var(--fg-2);
  }

  .invoice-control {
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .invoice-control__note {
    color: oklch(45% .12 var(--hue-warning));
  }
}

@layer shell {
  .workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .workspace__side {
    gap: var(--sp-5);
    width: 260px;
    padding: var(--sp-4);
    border-right: 1px solid var(--line);
    background: var(--surface);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    overflow-y: auto;
  }

  .workspace__side--end {
    gap: var(--sp-3);
    border-right: none;
    border-left: 1px solid var(--line);
    width: 240px;
  }

  .workspace__main {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: auto;
  }

  .workspace__empty {
    padding: var(--sp-8);
    text-align: center;
    color: var(--muted);
    flex: 1;
    place-items: center;
    display: grid;
  }

  .workspace__side--list {
    gap: 0;
    width: 340px;
    padding: 0;
  }

  .app-shell {
    background: var(--bg);
    height: 100dvh;
    display: flex;
  }

  .app-shell__main {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex;
    overflow: hidden;
  }

  .app-shell__content {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow-y: auto;
  }

  .page-bar {
    padding: var(--sp-6) var(--sp-7) var(--sp-2);
  }

  .page-bar:empty {
    display: none;
  }

  @media (max-width: 900px) {
    .page-bar {
      padding: var(--sp-4) var(--sp-4) var(--sp-2);
    }
  }

  .page-body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
  }

  .page-content {
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-7) var(--sp-7);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 900px) {
    .page-content {
      gap: var(--sp-4);
      padding: var(--sp-4);
    }
  }

  .hub-grid {
    gap: var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .hub-grid__full {
    grid-column: 1 / -1;
    min-width: 0;
  }

  @media (max-width: 900px) {
    .hub-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .app-loading {
    background: var(--bg);
    min-height: 100dvh;
    color: var(--muted);
    font-size: var(--fs-base);
    place-items: center;
    display: grid;
  }

  .pane-header {
    align-items: center;
    gap: var(--sp-3);
    padding: 14px var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    display: flex;
  }

  .shell-locked {
    display: contents;
  }

  .shell-locked .sidebar__nav, .shell-locked .tabbar {
    opacity: .45;
  }

  .sidebar {
    gap: var(--sp-3);
    width: 240px;
    height: 100%;
    padding: var(--sp-5) var(--sp-3);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex-direction: column;
    flex-shrink: 0;
    display: flex;
    overflow: hidden;
  }

  .sidebar__brand {
    padding: 2px var(--sp-2) 6px;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .sidebar__crest, .sidebar__logo {
    border-radius: 9px;
    flex: none;
    width: 36px;
    height: 36px;
    box-shadow: 0 0 0 3px #ffffff14;
    box-shadow: 0 0 0 3px lab(100% 0 0 / .08);
  }

  .sidebar__crest {
    background: var(--primary);
    color: var(--on-primary);
    letter-spacing: .02em;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
    display: grid;
  }

  .sidebar__logo {
    object-fit: cover;
    background: var(--surface);
  }

  .sidebar__brand-text {
    flex-direction: column;
    min-width: 0;
    display: flex;
  }

  .sidebar__name {
    color: var(--sidebar-strong);
    font-size: var(--fs-base);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
  }

  .sidebar__role {
    font-size: var(--fs-xs);
    color: var(--sidebar-muted);
  }

  .sidebar__nav {
    gap: var(--sp-4);
    scrollbar-width: thin;
    scrollbar-color: oklch(100% 0 0 / .15) transparent;
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow-y: auto;
  }

  .sidebar__section {
    flex-direction: column;
    gap: 1px;
    display: flex;
  }

  .sidebar__label {
    padding: 0 var(--sp-2) 6px;
    color: var(--sidebar-muted);
    letter-spacing: .09em;
    text-transform: uppercase;
    font-size: .65625rem;
    font-weight: 700;
  }

  .sidebar__item {
    border-radius: var(--r-2);
    color: var(--sidebar-fg);
    align-items: center;
    gap: 11px;
    padding: 7px 9px;
    font-size: .84375rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
  }

  .sidebar__item svg {
    opacity: .85;
  }

  .sidebar__item:hover {
    background: var(--sidebar-hover);
  }

  .sidebar__item[aria-current="page"] {
    background: var(--sidebar-active);
    color: var(--sidebar-strong);
    font-weight: 600;
  }

  .sidebar__item[aria-current="page"] svg {
    color: var(--primary-2);
    opacity: 1;
  }

  .sidebar__item--stub {
    opacity: .55;
  }

  .sidebar__item-label {
    flex: 1;
    min-width: 0;
  }

  .sidebar__badge {
    border-radius: var(--r-pill);
    background: var(--primary);
    min-width: 20px;
    height: 18px;
    color: var(--on-primary);
    place-items: center;
    padding: 0 6px;
    font-size: .6875rem;
    font-weight: 700;
    display: grid;
  }

  .topbar {
    z-index: var(--z-sticky);
    align-items: center;
    gap: var(--sp-3);
    min-height: 64px;
    padding: var(--sp-3) var(--sp-7);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    flex-shrink: 0;
    display: flex;
    position: relative;
  }

  .topbar__page {
    flex: 1;
    min-width: 0;
  }

  .topbar__page .page-header__crumbs {
    font-size: var(--fs-xs);
    margin-bottom: 0;
  }

  .topbar__page .page-header__title {
    font-size: var(--fs-lg);
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.25;
    overflow: hidden;
  }

  .topbar__page .page-header__subtitle {
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 0;
    overflow: hidden;
  }

  .topbar__context {
    border-radius: var(--r-3);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    font-weight: 600;
    display: inline-flex;
  }

  .topbar__icon-btn {
    width: 36px;
    height: 36px;
    color: var(--muted);
    background: none;
    border: none;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: relative;
  }

  .topbar__icon-btn:hover {
    background: var(--surface-2);
    color: var(--fg);
  }

  .topbar__dot {
    background: var(--danger);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px var(--surface);
    border-radius: 50%;
    position: absolute;
    top: 7px;
    right: 8px;
  }

  .topbar__menu-anchor {
    position: relative;
  }

  .topbar__user {
    border-radius: var(--r-pill);
    color: var(--muted);
    text-align: left;
    background: none;
    border: none;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    display: flex;
  }

  .topbar__user:hover {
    background: var(--surface-2);
  }

  .topbar__user-text {
    flex-direction: column;
    line-height: 1.2;
    display: flex;
  }

  .topbar__user-name {
    color: var(--fg);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .topbar__user-role {
    font-size: var(--fs-xs);
  }

  .topbar__scrim {
    z-index: var(--z-overlay);
    position: fixed;
    inset: 0;
  }

  .topbar__dropdown {
    z-index: var(--z-modal);
    min-width: 220px;
    padding: var(--sp-1);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
  }

  .topbar__menu-item {
    border-radius: var(--r-2);
    width: 100%;
    color: var(--fg);
    font-size: var(--fs-base);
    text-align: left;
    background: none;
    border: none;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-weight: 500;
    display: flex;
  }

  .topbar__menu-item:hover {
    background: var(--surface-2);
  }

  .topbar__menu-item--danger {
    color: oklch(50% .16 var(--hue-danger));
  }

  @media (max-width: 900px) {
    .topbar {
      padding: var(--sp-3) var(--sp-4);
    }

    .topbar__user-text {
      display: none;
    }
  }

  .mobile-shell {
    background: var(--bg);
    flex-direction: column;
    height: 100dvh;
    display: flex;
  }

  .mobile-shell__content {
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .mobile-appbar {
    min-height: 56px;
    padding: env(safe-area-inset-top, 0) var(--sp-4) 0;
    padding-left: max(var(--sp-4), env(safe-area-inset-left, 0));
    padding-right: max(var(--sp-4), env(safe-area-inset-right, 0));
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .mobile-appbar__crest, .mobile-appbar__logo {
    border-radius: var(--r-2);
    flex: none;
    width: 32px;
    height: 32px;
  }

  .mobile-appbar__crest {
    background: var(--primary);
    color: var(--on-primary);
    place-items: center;
    font-size: .6875rem;
    font-weight: 700;
    display: grid;
  }

  .mobile-appbar__logo {
    object-fit: cover;
    background: var(--surface);
  }

  .mobile-appbar__title {
    min-width: 0;
    color: var(--sidebar-strong);
    font-size: var(--fs-md);
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-weight: 600;
    overflow: hidden;
  }

  .mobile-appbar__btn {
    background: var(--sidebar-hover);
    width: 36px;
    height: 36px;
    color: var(--sidebar-strong);
    border: none;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: relative;
  }

  .mobile-appbar__dot {
    background: var(--danger);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 2px var(--sidebar-bg);
    border-radius: 50%;
    position: absolute;
    top: 7px;
    right: 8px;
  }

  .mobile-appbar__account {
    border-radius: var(--r-pill);
    background: var(--sidebar-hover);
    color: var(--sidebar-strong);
    border: none;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 2px;
    display: flex;
  }

  .mobile-appbar__menu {
    top: 56px;
    right: var(--sp-3);
    min-width: 248px;
    position: fixed;
  }

  .mobile-appbar__user {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--line);
    display: flex;
  }

  .appbar {
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    box-shadow: 0 1px 0 var(--line);
    display: flex;
  }

  .appbar__content {
    flex: 1;
    min-width: 0;
  }

  .appbar__title {
    color: var(--fg);
    font-size: var(--fs-md);
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    overflow: hidden;
  }

  .appbar__sub {
    color: var(--muted);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
    overflow: hidden;
  }

  .tabbar {
    background: var(--surface);
    box-shadow: 0 -1px 0 var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    flex-shrink: 0;
    align-items: stretch;
    display: flex;
  }

  .tabbar__item {
    min-height: 60px;
    padding: var(--sp-2) var(--sp-1);
    color: var(--muted);
    -webkit-tap-highlight-color: transparent;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 3px;
    font-size: .6875rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
  }

  .tabbar__item[aria-current="page"] {
    color: var(--primary);
    font-weight: 700;
  }

  .tabbar__item[aria-current="page"] .tabbar__icon {
    background: var(--primary-soft);
  }

  .tabbar__item[aria-disabled="true"] {
    opacity: .4;
  }

  .tabbar__icon {
    border-radius: var(--r-pill);
    place-items: center;
    width: 48px;
    height: 28px;
    display: grid;
    position: relative;
  }

  .tabbar__alert {
    border-radius: var(--r-pill);
    background: var(--danger);
    min-width: 14px;
    height: 14px;
    color: var(--on-primary);
    box-shadow: 0 0 0 1.5px var(--surface);
    place-items: center;
    padding: 0 2px;
    font-size: .5625rem;
    font-weight: 700;
    display: grid;
    position: absolute;
    top: -2px;
    right: 6px;
  }

  .login {
    background: var(--bg);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100dvh;
    display: grid;
  }

  .login__brand {
    padding: var(--sp-8);
    color: var(--sidebar-strong);
    background: radial-gradient(60% 50% at 85% 15%, var(--primary), transparent 70%), radial-gradient(50% 40% at 10% 90%, var(--primary-2), transparent 70%), var(--sidebar-bg);
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .login__brand {
      background: radial-gradient(60% 50% at 85% 15%, color-mix(in oklch, var(--primary) 55%, transparent), transparent 70%), radial-gradient(50% 40% at 10% 90%, color-mix(in oklch, var(--primary-2) 30%, transparent), transparent 70%), var(--sidebar-bg);
    }
  }

  .login__brand-inner {
    gap: var(--sp-4);
    flex-direction: column;
    max-width: 460px;
    display: flex;
  }

  .login__crest, .login__logo {
    border-radius: var(--r-4);
    width: 56px;
    height: 56px;
  }

  .login__crest {
    background: var(--primary);
    color: var(--on-primary);
    place-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    display: grid;
  }

  .login__logo {
    object-fit: cover;
    background: var(--surface);
  }

  .login__name {
    color: var(--sidebar-strong);
    font-family: var(--font-display);
    letter-spacing: -.03em;
    font-size: 2.875rem;
    font-weight: 700;
    line-height: 1.05;
  }

  .login__tagline {
    margin-top: var(--sp-2);
    color: var(--sidebar-fg);
    opacity: .85;
    font-size: .90625rem;
  }

  .login__pane {
    padding: var(--sp-7);
    place-items: center;
    display: grid;
  }

  .login__card {
    gap: var(--sp-5);
    border-radius: var(--r-5);
    background: var(--surface);
    width: 100%;
    max-width: 410px;
    box-shadow: var(--shadow-1);
    flex-direction: column;
    padding: 34px 32px;
    display: flex;
  }

  .login__title {
    letter-spacing: -.02em;
    font-size: 1.625rem;
    font-weight: 700;
  }

  .login__form {
    gap: var(--sp-4);
    flex-direction: column;
    display: flex;
  }

  .login__link {
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
  }

  .login__link:hover {
    text-decoration: underline;
  }

  .login__forgot {
    align-self: flex-end;
  }

  .login__notice {
    font-size: var(--fs-sm);
    color: var(--muted);
    text-align: center;
  }

  .login__notice--error {
    color: oklch(50% .16 var(--hue-danger));
  }

  .login__foot {
    font-size: var(--fs-sm);
    color: var(--muted);
    text-align: center;
  }

  @media (max-width: 768px) {
    .login {
      grid-template-rows: auto 1fr;
      grid-template-columns: 1fr;
    }

    .login__brand {
      padding: var(--sp-6) var(--sp-5);
    }

    .login__brand-inner {
      align-items: center;
      gap: var(--sp-3);
      flex-direction: row;
    }

    .login__crest, .login__logo {
      width: 44px;
      height: 44px;
      font-size: .9375rem;
    }

    .login__name {
      font-size: 1.375rem;
    }

    .login__tagline {
      font-size: var(--fs-sm);
      margin-top: 2px;
    }

    .login__pane {
      padding: var(--sp-5) var(--sp-4);
      place-items: start center;
    }

    .login__card {
      padding: var(--sp-6) var(--sp-5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html:has(.landing) {
      scroll-behavior: smooth;
    }

    .landing__card, .landing__audience {
      transition: transform .2s, box-shadow .2s;
    }
  }

  .landing {
    --landing-header-h: 68px;
    --landing-ring: inset 0 0 0 1px var(--sidebar-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing {
      --landing-ring: inset 0 0 0 1px color-mix(in oklch, var(--sidebar-strong) 14%, transparent);
    }
  }

  .landing {
    --landing-dark: linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    background: var(--surface);
    min-height: 100dvh;
    color: var(--fg);
    font-size: var(--fs-md);
    overflow-x: clip;
  }

  .landing__container {
    width: 100%;
    max-width: 1180px;
    padding: 0 var(--sp-6);
    margin: 0 auto;
  }

  .landing__eyebrow {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    align-self: flex-start;
    font-weight: 700;
    display: inline-flex;
  }

  .landing__eyebrow--on-dark {
    background: var(--sidebar-active);
    color: var(--sidebar-strong);
    box-shadow: var(--landing-ring);
  }

  .landing__header {
    z-index: var(--z-sticky);
    background: var(--sidebar-bg);
    position: sticky;
    top: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing__header {
      background: color-mix(in oklch, var(--sidebar-bg) 94%, transparent);
    }
  }

  .landing__header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sidebar-active);
  }

  .landing__header-inner {
    align-items: center;
    gap: var(--sp-6);
    height: var(--landing-header-h);
    display: flex;
  }

  .landing__brand {
    align-items: center;
    gap: var(--sp-3);
    color: var(--sidebar-strong);
    text-decoration: none;
    display: inline-flex;
  }

  .landing__crest {
    border-radius: var(--r-3);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    width: 38px;
    height: 38px;
    color: var(--on-primary);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-brand);
    place-items: center;
    font-weight: 700;
    display: grid;
  }

  .landing__brand-name {
    letter-spacing: -.01em;
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .landing__nav {
    gap: var(--sp-6);
    margin-left: auto;
    display: flex;
  }

  .landing__nav-link {
    color: var(--sidebar-fg);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
  }

  .landing__nav-link:hover {
    color: var(--sidebar-strong);
  }

  .landing__header-inner > .btn {
    flex-shrink: 0;
  }

  .landing__hero {
    padding: calc(var(--sp-8) * 2) 0 calc(var(--sp-8) * 2.25);
    background: radial-gradient(50% 60% at 90% 0%, var(--primary), transparent 70%), var(--landing-dark);
    position: relative;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing__hero {
      background: radial-gradient(50% 60% at 90% 0%, color-mix(in oklch, var(--primary) 45%, transparent), transparent 70%), var(--landing-dark);
    }
  }

  .landing__hero {
    color: var(--sidebar-strong);
  }

  .landing__hero-inner {
    align-items: center;
    gap: calc(var(--sp-8) + var(--sp-2));
    grid-template-columns: 1.05fr 1fr;
    display: grid;
  }

  .landing__hero-copy {
    gap: var(--sp-5);
    flex-direction: column;
    display: flex;
  }

  .landing__hero-title {
    color: var(--sidebar-strong);
    font-family: var(--font-display);
    letter-spacing: -.035em;
    font-size: clamp(2.25rem, 3.6vw + 1rem, 3.75rem);
    font-weight: 800;
    line-height: 1.06;
  }

  .landing__hero-message {
    max-width: 540px;
    color: var(--sidebar-fg);
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .landing__hero-actions {
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
    display: flex;
  }

  .landing__hero-actions .btn {
    height: 50px;
    padding: 0 var(--sp-6);
    font-size: var(--fs-md);
  }

  .landing__btn-glass {
    background: var(--sidebar-active);
    color: var(--sidebar-strong);
    box-shadow: var(--landing-ring);
  }

  .landing__btn-glass:hover {
    background: var(--sidebar-strong);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing__btn-glass:hover {
      background: color-mix(in oklch, var(--sidebar-strong) 16%, transparent);
    }
  }

  .landing__highlights {
    gap: var(--sp-3) var(--sp-5);
    flex-wrap: wrap;
    list-style: none;
    display: flex;
  }

  .landing__highlight {
    align-items: center;
    gap: var(--sp-2);
    color: var(--sidebar-fg);
    font-size: var(--fs-sm);
    font-weight: 600;
    display: inline-flex;
  }

  .landing__highlight svg {
    color: var(--primary-2);
  }

  .landing__hero-media {
    position: relative;
  }

  .landing__hero-photo {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--r-5);
    width: 100%;
    height: auto;
    box-shadow: var(--shadow-2), var(--landing-ring);
    display: block;
  }

  .landing__floats {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .landing__float {
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-4);
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-2);
    display: flex;
    position: absolute;
  }

  .landing__float--1 {
    top: 10%;
    left: -40px;
  }

  .landing__float--2 {
    top: 46%;
    right: -32px;
  }

  .landing__float--3 {
    bottom: -26px;
    left: 12%;
  }

  .landing__float-icon {
    border-radius: var(--r-3);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    width: 36px;
    height: 36px;
    color: var(--on-primary);
    place-items: center;
    display: grid;
  }

  .landing__float--1 .landing__float-icon {
    background: var(--success);
  }

  .landing__float-text {
    flex-direction: column;
    line-height: 1.25;
    display: flex;
  }

  .landing__float-text strong {
    font-size: var(--fs-sm);
    font-weight: 700;
  }

  .landing__float-text span {
    color: var(--muted);
    font-size: var(--fs-xs);
  }

  .landing__section {
    padding: calc(var(--sp-8) * 2) 0;
    scroll-margin-top: var(--landing-header-h);
  }

  .landing__section--plain + .landing__section--plain {
    padding-top: 0;
  }

  .landing__section--tinted {
    background: var(--bg);
  }

  .landing__section--dark {
    background: radial-gradient(40% 50% at 0% 100%, var(--primary), transparent 70%), var(--landing-dark);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing__section--dark {
      background: radial-gradient(40% 50% at 0% 100%, color-mix(in oklch, var(--primary) 35%, transparent), transparent 70%), var(--landing-dark);
    }
  }

  .landing__section--dark {
    color: var(--sidebar-fg);
  }

  .landing__section-head {
    align-items: center;
    gap: var(--sp-3);
    max-width: 680px;
    margin: 0 auto var(--sp-8);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  .landing__section-head .landing__eyebrow {
    align-self: center;
  }

  .landing__section-title {
    color: var(--fg);
    letter-spacing: -.025em;
    font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
  }

  .landing__section-desc {
    color: var(--fg-2);
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .landing__section--dark .landing__section-title {
    color: var(--sidebar-strong);
  }

  .landing__section--dark .landing__section-desc {
    color: var(--sidebar-fg);
  }

  .landing__section--dark .landing__eyebrow {
    background: var(--sidebar-active);
    color: var(--sidebar-strong);
    box-shadow: var(--landing-ring);
  }

  .landing__section--split .landing__section-layout {
    align-items: start;
    gap: calc(var(--sp-8) + var(--sp-2));
    grid-template-columns: 5fr 7fr;
    display: grid;
  }

  .landing__section--split .landing__section-intro {
    top: calc(var(--landing-header-h) + var(--sp-6));
    position: sticky;
  }

  .landing__section--split .landing__section-head {
    text-align: left;
    align-items: flex-start;
    margin: 0;
  }

  .landing__section--split .landing__section-head .landing__eyebrow {
    align-self: flex-start;
  }

  .landing__section-photo {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    margin-top: var(--sp-7);
    object-fit: cover;
    border-radius: var(--r-5);
    box-shadow: var(--shadow-2);
    display: block;
  }

  .landing__grid {
    gap: var(--sp-6);
    list-style: none;
    display: grid;
  }

  .landing__grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing__grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing__grid--flow {
    --cols: 3;
    flex-wrap: wrap;
    justify-content: center;
    display: flex;
  }

  .landing__grid--flow > * {
    flex: 0 1 calc((100% - (var(--cols) - 1) * var(--sp-6)) / var(--cols));
  }

  .landing__card-title {
    color: var(--fg);
    font-size: var(--fs-lg);
    letter-spacing: -.01em;
    font-weight: 700;
  }

  .landing__card-text {
    color: var(--fg-2);
    font-size: .9375rem;
    line-height: 1.6;
  }

  .landing__icon {
    border-radius: var(--r-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    width: 52px;
    height: 52px;
    color: var(--on-primary);
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
    place-items: center;
    display: grid;
  }

  .landing__icon--glass {
    background: var(--sidebar-active);
    color: var(--primary-2);
    box-shadow: var(--landing-ring);
  }

  .landing__card {
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-6);
    border-radius: var(--r-5);
    background: var(--surface);
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
    flex-direction: column;
    display: flex;
  }

  .landing__card .landing__icon {
    margin-bottom: var(--sp-2);
  }

  .landing__card:hover {
    transform: translateY(-3px);
  }

  .landing__audience {
    border-radius: var(--r-5);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    overflow: hidden;
  }

  .landing__audience:hover {
    transform: translateY(-3px);
  }

  .landing__audience-media {
    position: relative;
  }

  .landing__audience-photo {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
  }

  .landing__audience-media .landing__icon {
    bottom: -26px;
    left: var(--sp-7);
    box-shadow: var(--shadow-brand), 0 0 0 4px var(--surface);
    position: absolute;
  }

  .landing__audience-body {
    gap: var(--sp-3);
    padding: calc(var(--sp-8) - var(--sp-2)) var(--sp-7) var(--sp-7);
    flex-direction: column;
    display: flex;
  }

  .landing__points {
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    flex-direction: column;
    list-style: none;
    display: flex;
  }

  .landing__point {
    align-items: flex-start;
    gap: var(--sp-3);
    color: var(--fg);
    font-size: .9375rem;
    font-weight: 500;
    display: flex;
  }

  .landing__point-icon {
    background: var(--success-soft);
    width: 22px;
    height: 22px;
    color: var(--success);
    border-radius: 50%;
    flex-shrink: 0;
    padding: 3px;
  }

  .landing__benefits {
    gap: var(--sp-4);
    flex-direction: column;
    list-style: none;
    display: flex;
  }

  .landing__benefit {
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--r-5);
    background: var(--sidebar-hover);
    box-shadow: var(--landing-ring);
    display: flex;
  }

  .landing__benefit .landing__card-title {
    color: var(--sidebar-strong);
  }

  .landing__benefit .landing__card-text {
    margin-top: var(--sp-1);
    color: var(--sidebar-fg);
  }

  .landing__step {
    gap: var(--sp-3);
    padding: var(--sp-7) var(--sp-6);
    border-radius: var(--r-5);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .landing__step:not(:last-child):after {
    content: "";
    top: calc(var(--sp-7) + 27px);
    left: calc(var(--sp-6) + 70px);
    right: calc(var(--sp-6) * -1);
    border-top: 2px dashed var(--line-2);
    position: absolute;
  }

  .landing__step-num {
    width: 54px;
    height: 54px;
    margin-bottom: var(--sp-2);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--on-primary);
    font-family: var(--font-display);
    box-shadow: var(--shadow-brand);
    border-radius: 50%;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    display: grid;
  }

  .landing__faq {
    gap: var(--sp-3);
    flex-direction: column;
    display: flex;
  }

  .landing__faq-item {
    border-radius: var(--r-4);
    background: var(--surface);
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
  }

  .landing__faq-item[open] {
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-2);
  }

  .landing__faq-q {
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    color: var(--fg);
    font-size: var(--fs-md);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    display: flex;
  }

  .landing__faq-q::-webkit-details-marker {
    display: none;
  }

  .landing__faq-toggle {
    background: var(--primary-soft);
    width: 32px;
    height: 32px;
    color: var(--primary-ink);
    border-radius: 50%;
    flex-shrink: 0;
    place-items: center;
    transition: transform .15s, background .15s;
    display: grid;
  }

  .landing__faq-item[open] .landing__faq-toggle {
    background: var(--fg);
    color: var(--bg);
    transform: rotate(180deg);
  }

  .landing__faq-a {
    padding: 0 var(--sp-6) var(--sp-5);
    color: var(--fg-2);
    font-size: .9375rem;
    line-height: 1.65;
  }

  .landing__contact {
    align-items: center;
    gap: var(--sp-4);
    padding: calc(var(--sp-8) * 1.75) var(--sp-7);
    border-radius: var(--r-5);
    background: var(--sidebar-bg);
    box-shadow: var(--shadow-2);
    text-align: center;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .landing__contact > :not(.landing__contact-bg) {
    z-index: 1;
    position: relative;
  }

  .landing__contact .landing__eyebrow {
    align-self: center;
  }

  .landing__contact-bg {
    position: absolute;
    inset: 0;
  }

  .landing__contact-bg:after {
    content: "";
    background: radial-gradient(50% 70% at 100% 0%, var(--primary), transparent 70%), linear-gradient(135deg, var(--sidebar-bg), var(--primary-dark));
    position: absolute;
    inset: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .landing__contact-bg:after {
      background: radial-gradient(50% 70% at 100% 0%, color-mix(in oklch, var(--primary) 45%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in oklch, var(--sidebar-bg) 94%, transparent), color-mix(in oklch, var(--primary-dark) 82%, transparent));
    }
  }

  .landing__contact-photo {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .landing__contact .landing__section-title {
    color: var(--sidebar-strong);
  }

  .landing__contact-text {
    max-width: 540px;
    color: var(--sidebar-fg);
    font-size: 1.0625rem;
  }

  .landing__contact-btn {
    height: 52px;
    margin-top: var(--sp-2);
    padding: 0 var(--sp-7);
    font-size: var(--fs-md);
  }

  .landing__contact-email {
    color: var(--sidebar-fg);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
  }

  .landing__contact-address {
    color: var(--sidebar-strong);
    font-weight: 700;
  }

  .landing__footer {
    padding: var(--sp-8) 0 var(--sp-6);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
  }

  .landing__footer-inner {
    justify-content: space-between;
    gap: var(--sp-6);
    flex-wrap: wrap;
    display: flex;
  }

  .landing__footer-brand {
    gap: var(--sp-3);
    flex-direction: column;
    max-width: 360px;
    display: flex;
  }

  .landing__footer-desc {
    color: var(--sidebar-fg);
    font-size: var(--fs-base);
  }

  .landing__footer-nav {
    gap: var(--sp-3) var(--sp-5);
    flex-wrap: wrap;
    align-content: flex-start;
    display: flex;
  }

  .landing__footer-link {
    color: var(--sidebar-fg);
    font-size: var(--fs-base);
    text-decoration: none;
  }

  .landing__footer-link:hover {
    color: var(--sidebar-strong);
  }

  .landing__copy {
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--sidebar-active);
    color: var(--sidebar-muted);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
    display: flex;
  }

  .landing__credit-line {
    color: var(--sidebar-fg);
    font-size: var(--fs-xs);
  }

  .landing__credit {
    color: var(--sidebar-strong);
    text-underline-offset: 2px;
    text-decoration: underline;
  }

  .landing__credit:hover {
    color: var(--sidebar-strong);
  }

  @media (max-width: 1024px) {
    .landing__grid--3 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing__grid--flow {
      --cols: 2;
    }

    .landing__step:not(:last-child):after {
      display: none;
    }

    .landing__section--split .landing__section-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .landing__section--split .landing__section-intro {
      position: static;
    }

    .landing__section-photo {
      aspect-ratio: 16 / 9;
    }

    .landing__float--1 {
      left: -16px;
    }

    .landing__float--2 {
      right: -16px;
    }
  }

  @media (max-width: 767px) {
    .landing {
      --landing-header-h: 60px;
    }

    .landing__container {
      padding: 0 var(--sp-4);
    }

    .landing__header-inner {
      justify-content: space-between;
      gap: var(--sp-3);
    }

    .landing__nav, .landing__floats {
      display: none;
    }

    .landing__hero {
      padding: var(--sp-8) 0;
    }

    .landing__hero-inner {
      gap: var(--sp-7);
      grid-template-columns: minmax(0, 1fr);
    }

    .landing__hero-actions {
      flex-direction: column;
    }

    .landing__section {
      padding: calc(var(--sp-8) * 1.25) 0;
    }

    .landing__section-head {
      margin-bottom: var(--sp-7);
    }

    .landing__grid--2, .landing__grid--3 {
      grid-template-columns: minmax(0, 1fr);
    }

    .landing__grid--flow {
      --cols: 1;
    }

    .landing__audience-body {
      padding: calc(var(--sp-8) - var(--sp-2)) var(--sp-5) var(--sp-6);
    }

    .landing__audience-media .landing__icon {
      left: var(--sp-5);
    }

    .landing__benefit {
      gap: var(--sp-4);
      padding: var(--sp-5);
    }

    .landing__contact {
      padding: var(--sp-8) var(--sp-5);
    }
  }
}

@layer vendors {
  .sidebar .student-switcher .select__control {
    border-color: var(--sidebar-muted);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .sidebar .student-switcher .select__control {
      border-color: color-mix(in oklch, var(--sidebar-muted) 45%, transparent);
    }
  }

  .sidebar .student-switcher .select__control {
    background: var(--sidebar-active);
  }

  .sidebar .student-switcher .select__control:hover {
    border-color: var(--sidebar-muted);
  }

  .sidebar .student-switcher .select__control--is-focused {
    border-color: var(--primary-2);
    background: var(--sidebar-active);
  }

  .sidebar .student-switcher .select__single-value {
    color: var(--sidebar-strong);
  }

  .sidebar .student-switcher .select__single-value .student-switcher__meta {
    color: var(--sidebar-muted);
  }

  .sidebar .student-switcher .select__indicator {
    color: var(--sidebar-fg);
  }

  .sidebar .student-switcher .select__indicator:hover {
    color: var(--sidebar-strong);
  }

  .sidebar .student-switcher .select__menu {
    color: var(--fg);
  }

  .select {
    min-width: 0;
  }

  .select__control {
    padding: 0 var(--sp-2) 0 var(--sp-3);
    cursor: pointer;
    align-items: center;
    display: flex;
  }

  .select__control:hover {
    border-color: var(--line);
  }

  .select__control--is-disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .select__value-container {
    gap: var(--sp-1);
    padding: 2px 0;
  }

  .select__placeholder {
    color: var(--muted);
  }

  .select__single-value, .select__input-container {
    color: var(--fg);
  }

  .select__indicators {
    gap: var(--sp-1);
    color: var(--muted);
  }

  .select__indicator {
    padding: var(--sp-1);
  }

  .select__indicator:hover {
    color: var(--fg);
  }

  .select__indicator-separator {
    display: none;
  }

  .select__multi-value {
    border-radius: var(--r-2);
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-size: var(--fs-sm);
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    font-weight: 600;
    display: inline-flex;
  }

  .select__multi-value__remove {
    border-radius: var(--r-1);
  }

  .select__multi-value__remove:hover {
    background: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .select__multi-value__remove:hover {
      background: color-mix(in oklch, var(--primary) 20%, transparent);
    }
  }

  .select__menu {
    margin-top: var(--sp-1);
    padding: var(--sp-1);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    z-index: var(--z-modal);
  }

  .select__option {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-2);
    font-size: var(--fs-base);
    cursor: pointer;
  }

  .select__option--is-focused {
    background: var(--surface-2);
  }

  .select__option--is-selected {
    background: var(--primary-soft);
    color: var(--primary-ink);
    font-weight: 600;
  }

  .select__menu-notice {
    padding: var(--sp-2) var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-sm);
  }

  .recharts-cartesian-grid line, .recharts-cartesian-axis-line, .recharts-cartesian-axis-tick-line {
    stroke: var(--line);
  }

  .recharts-cartesian-axis-tick-value, .recharts-text.recharts-label {
    fill: var(--muted);
    font-size: 11px;
    font-family: var(--font-sans);
  }

  .recharts-legend-item-text {
    font-size: var(--fs-sm);
    color: var(--fg-2) !important;
  }

  .recharts-default-tooltip {
    box-shadow: var(--shadow-2);
    font-size: var(--fs-sm);
    border-radius: var(--r-3) !important;
    background: var(--surface) !important;
    border: none !important;
  }

  .recharts-tooltip-label {
    color: var(--fg);
    font-weight: 700;
  }

  .chart-row {
    gap: var(--sp-4);
    flex-wrap: wrap;
    display: flex;
  }

  .chart-card {
    flex: 300px;
    min-width: 280px;
  }

  .chart-card--wide {
    flex: 2 400px;
  }

  .chart-card--placeholder {
    background: var(--surface-2);
    height: 260px;
    box-shadow: none;
  }

  .chart-tooltip {
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    color: var(--fg);
    font-size: var(--fs-sm);
    padding: 6px 10px;
  }
}

@layer utilities {
  .parent-page .profile-header__fact .text-muted {
    color: #ffffffb8;
    color: lab(100% 0 0 / .72);
  }

  .\@container {
    container-type: inline-size;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-6 {
    margin: var(--sp-6);
  }

  .mx-6 {
    margin-inline: var(--sp-6);
  }

  .mt-1 {
    margin-top: var(--sp-1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: var(--sp-2);
  }

  .mt-4 {
    margin-top: var(--sp-4);
  }

  .mt-5 {
    margin-top: var(--sp-5);
  }

  .mb-1 {
    margin-bottom: var(--sp-1);
  }

  .mb-2 {
    margin-bottom: var(--sp-2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: var(--sp-3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: var(--sp-4);
  }

  .mb-6 {
    margin-bottom: var(--sp-6);
  }

  .mb-7 {
    margin-bottom: var(--sp-7);
  }

  .ml-1 {
    margin-left: var(--sp-1);
  }

  .ml-2 {
    margin-left: var(--sp-2);
  }

  .ml-\[18px\] {
    margin-left: 18px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .block {
    display: block;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-full {
    height: 100%;
  }

  .max-h-100 {
    max-height: calc(var(--spacing) * 100);
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-px {
    min-height: 1px;
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-18 {
    width: calc(var(--spacing) * 18);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-full {
    width: 100%;
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }

  .min-w-\[42px\] {
    min-width: 42px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-\[1fr_1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr 1fr auto;
  }

  .grid-cols-\[60px_1fr_1fr_auto\] {
    grid-template-columns: 60px 1fr 1fr auto;
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(200px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: var(--sp-1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: var(--sp-2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: var(--sp-3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: var(--sp-4);
  }

  .gap-5 {
    gap: var(--sp-5);
  }

  .gap-6 {
    gap: var(--sp-6);
  }

  .gap-\[var\(--sp-5\)\] {
    gap: var(--sp-5);
  }

  .gap-px {
    gap: 1px;
  }

  .gap-x-6 {
    column-gap: var(--sp-6);
  }

  .gap-y-2 {
    row-gap: var(--sp-2);
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-line {
    border-color: var(--line);
  }

  .bg-primary {
    background-color: var(--primary);
  }

  .bg-surface {
    background-color: var(--surface);
  }

  .p-3 {
    padding: var(--sp-3);
  }

  .p-4 {
    padding: var(--sp-4);
  }

  .p-5 {
    padding: var(--sp-5);
  }

  .p-6 {
    padding: var(--sp-6);
  }

  .p-7 {
    padding: var(--sp-7);
  }

  .p-8 {
    padding: var(--sp-8);
  }

  .px-3 {
    padding-inline: var(--sp-3);
  }

  .px-4 {
    padding-inline: var(--sp-4);
  }

  .px-5 {
    padding-inline: var(--sp-5);
  }

  .px-6 {
    padding-inline: var(--sp-6);
  }

  .py-2 {
    padding-block: var(--sp-2);
  }

  .py-3 {
    padding-block: var(--sp-3);
  }

  .py-4 {
    padding-block: var(--sp-4);
  }

  .py-5 {
    padding-block: var(--sp-5);
  }

  .py-6 {
    padding-block: var(--sp-6);
  }

  .pe-1 {
    padding-inline-end: var(--sp-1);
  }

  .pe-2 {
    padding-inline-end: var(--sp-2);
  }

  .pt-1 {
    padding-top: var(--sp-1);
  }

  .pt-2 {
    padding-top: var(--sp-2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: var(--sp-3);
  }

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

  .pt-4 {
    padding-top: var(--sp-4);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-1 {
    padding-bottom: var(--sp-1);
  }

  .pb-2 {
    padding-bottom: var(--sp-2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: var(--sp-3);
  }

  .pb-4 {
    padding-bottom: var(--sp-4);
  }

  .pb-5 {
    padding-bottom: var(--sp-5);
  }

  .pb-6 {
    padding-bottom: var(--sp-6);
  }

  .pl-2 {
    padding-left: var(--sp-2);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-muted {
    color: var(--muted);
  }

  .text-primary {
    color: var(--primary);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .shadow, .shadow\/radius {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  @media (min-width: 40rem) {
    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 40rem) {
    .sm\:block {
      display: block;
    }
  }

  @media (min-width: 40rem) {
    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
  }

  @media (min-width: 48rem) {
    .md\:hidden {
      display: none;
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 48rem) {
    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[1fr_300px\] {
      grid-template-columns: 1fr 300px;
    }
  }

  @media (min-width: 64rem) {
    .lg\:grid-cols-\[1fr_320px\] {
      grid-template-columns: 1fr 320px;
    }
  }

  .palette-olivo\:bg-primary:where([data-palette="olivo"], [data-palette="olivo"] *) {
    background-color: var(--primary);
  }
}

@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0-edi3e._.css.map*/