:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #666;
  --primary: #3f5af2;
  --accent: #00ffd0;
  --warning: #ffc107;
  --danger: #dc3545;
  --success: #28a745;
  --info: #17a2b8;
  --blue: #2196f3;
  --green: #008000;
  --yellow: #ffb703;
  --red: #c1121f;
  --orange: #f9844a;
  --surface: #f7f7f9;
  --surface-opaque: #f7f7f9;
  --surface-strong: #eef2f7;
  --border: #d9d9e3;
  --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --on-accent: #031217;
  --on-accent-muted: rgba(3, 18, 23, 0.72);

  --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-size: clamp(16px, 0.9rem + 0.8vw, 20px);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition: 0.2s ease-in-out;
  --control-min-height: clamp(44px, 2.75rem, 56px);
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 3.5rem;
  --space-10: 4rem;
  --space-11: 4.5rem;
  --space-12: 5rem;
  --space-13: 5.5rem;
  --space-14: 6rem;
  --space-15: 6.5rem;
}

/* Automatic dark theme when no explicit theme has been selected. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0b0f1a;
    --fg: #e5ecff;
    --muted: rgba(203, 214, 247, 0.75);
    --surface: rgba(18, 24, 38, 0.92);
    --surface-opaque: #121826;
    --surface-strong: rgba(6, 8, 14, 0.9);
    --border: rgba(70, 92, 132, 0.4);
    --shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
    --on-accent: #031217;
    --on-accent-muted: rgba(3, 18, 23, 0.86);
  }
}

/* Explicit theme override set by frontend controls. */
[data-theme="dark"] {
  --bg: #0b0f1a;
  --fg: #e5ecff;
  --muted: rgba(203, 214, 247, 0.75);
  --surface: rgba(18, 24, 38, 0.92);
  --surface-opaque: #121826;
  --surface-strong: rgba(6, 8, 14, 0.9);
  --border: rgba(70, 92, 132, 0.4);
  --shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
  --on-accent: #031217;
  --on-accent-muted: rgba(3, 18, 23, 0.86);
}

/* Resets */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: var(--font-size); -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: color-mix(in oklab, var(--primary) 85%, #004);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover { color: color-mix(in oklab, var(--primary) 95%, #002); }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

p { margin: var(--space-2) 0 var(--space-3); }
strong,
b {
  color: var(--fg);
  font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}
h1 { font-size: clamp(1.75rem, 1.1rem + 3vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.0rem + 2vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 0.95rem + 1.2vw, 1.5rem); }
label { font-weight: 600; display: inline-block; }

/* Layout primitives */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: clamp(1rem, 2.5vw, 2rem);
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.col { flex: 1 1 0; padding: 0.5rem; }
.col-1 { flex-basis: 8.3333%; }
.col-2 { flex-basis: 16.6667%; }
.col-3 { flex-basis: 25%; }
.col-4 { flex-basis: 33.3333%; }
.col-5 { flex-basis: 41.6667%; }
.col-6 { flex-basis: 50%; }
.col-8 { flex-basis: 66.6667%; }
.col-9 { flex-basis: 75%; }
.col-10 { flex-basis: 83.3333%; }
.col-11 { flex-basis: 91.6667%; }
.col-12 { flex-basis: 100%; }

@media (min-width: 576px) {
  .col-sm-1 { flex-basis: 8.3333%; }
  .col-sm-2 { flex-basis: 16.6667%; }
  .col-sm-3 { flex-basis: 25%; }
  .col-sm-4 { flex-basis: 33.3333%; }
  .col-sm-5 { flex-basis: 41.6667%; }
  .col-sm-6 { flex-basis: 50%; }
  .col-sm-8 { flex-basis: 66.6667%; }
  .col-sm-9 { flex-basis: 75%; }
  .col-sm-10 { flex-basis: 83.3333%; }
  .col-sm-11 { flex-basis: 91.6667%; }
  .col-sm-12 { flex-basis: 100%; }
}
@media (min-width: 768px) {
  .col-md-1 { flex-basis: 8.3333%; }
  .col-md-2 { flex-basis: 16.6667%; }
  .col-md-3 { flex-basis: 25%; }
  .col-md-4 { flex-basis: 33.3333%; }
  .col-md-5 { flex-basis: 41.6667%; }
  .col-md-6 { flex-basis: 50%; }
  .col-md-8 { flex-basis: 66.6667%; }
  .col-md-9 { flex-basis: 75%; }
  .col-md-10 { flex-basis: 83.3333%; }
  .col-md-11 { flex-basis: 91.6667%; }
  .col-md-12 { flex-basis: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1 { flex-basis: 8.3333%; }
  .col-lg-2 { flex-basis: 16.6667%; }
  .col-lg-3 { flex-basis: 25%; }
  .col-lg-4 { flex-basis: 33.3333%; }
  .col-lg-5 { flex-basis: 41.6667%; }
  .col-lg-6 { flex-basis: 50%; }
  .col-lg-8 { flex-basis: 66.6667%; }
  .col-lg-9 { flex-basis: 75%; }
  .col-lg-10 { flex-basis: 83.3333%; }
  .col-lg-11 { flex-basis: 91.6667%; }
  .col-lg-12 { flex-basis: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-1 { flex-basis: 8.3333%; }
  .col-xl-2 { flex-basis: 16.6667%; }
  .col-xl-3 { flex-basis: 25%; }
  .col-xl-4 { flex-basis: 33.3333%; }
  .col-xl-5 { flex-basis: 41.6667%; }
  .col-xl-6 { flex-basis: 50%; }
  .col-xl-8 { flex-basis: 66.6667%; }
  .col-xl-9 { flex-basis: 75%; }
  .col-xl-10 { flex-basis: 83.3333%; }
  .col-xl-11 { flex-basis: 91.6667%; }
  .col-xl-12 { flex-basis: 100%; }
}

.grid { display: grid; }
.grid-area-1 { grid-area: 1 / 1; }
.justify-self-end { justify-self: end; }
.grid-auto-100 { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.grid-auto-120 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.grid-auto-160 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-315 { grid-template-columns: repeat(auto-fit, minmax(315px, 1fr)); }
.grid-140-1fr { grid-template-columns: 140px minmax(0, 1fr); }
.grid-cols-30px-1fr { grid-template-columns: 30px minmax(0, 1fr); }
.grid-cols-1fr-auto { grid-template-columns: minmax(0, 1fr) auto; }
.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-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-flow-dense { grid-auto-flow: dense; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

@media (min-width: 576px) {
  .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .grid-cols-md-auto-1fr-auto { grid-template-columns: auto minmax(0, 1fr) auto; }
  .grid-cols-md-1fr-auto { grid-template-columns: minmax(0, 1fr) auto; }
  .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .grid-cols-lg-auto-1fr-auto { grid-template-columns: auto minmax(0, 1fr) auto; }
  .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .col-span-lg-2 { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .grid-cols-xl-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 auto; }
.shrink-0 { flex-shrink: 0; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.col-gap-4 { column-gap: var(--space-4); }


/* Spacing utilities */
.p-0 { padding: var(--space-0) !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-page { padding: 24mm 20mm !important; }
.px-0 { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.pl-0 { padding-left: var(--space-0) !important; }
.pl-1 { padding-left: var(--space-1) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pl-3 { padding-left: var(--space-3) !important; }
.pl-4 { padding-left: var(--space-4) !important; }
.pl-5 { padding-left: var(--space-5) !important; }
.pl-10 { padding-left: var(--space-11) !important; }
.pr-0 { padding-right: var(--space-0) !important; }
.pr-1 { padding-right: var(--space-1) !important; }
.pr-2 { padding-right: var(--space-2) !important; }
.pr-3 { padding-right: var(--space-3) !important; }
.pr-4 { padding-right: var(--space-4) !important; }
.pr-5 { padding-right: var(--space-5) !important; }
.py-0 { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.pt-0 { padding-top: var(--space-0) !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-3) !important; }
.pt-4 { padding-top: var(--space-4) !important; }
.pt-5 { padding-top: var(--space-5) !important; }
.pt-6 { padding-top: var(--space-6) !important; }
.pt-7 { padding-top: var(--space-7) !important; }
.pt-8 { padding-top: var(--space-8) !important; }
.pt-10 { padding-top: var(--space-10) !important; }
.pt-12 { padding-top: var(--space-12) !important; }
.pb-0 { padding-bottom: var(--space-0) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pb-4 { padding-bottom: var(--space-4) !important; }
.pb-5 { padding-bottom: var(--space-5) !important; }
.m-0 { margin: var(--space-0) !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-3) !important; }
.m-4 { margin: var(--space-4) !important; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-0 { margin-left: var(--space-0) !important; margin-right: var(--space-0); }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1); }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4); }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5); }
.ml-0 { margin-left: var(--space-0) !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }
.ml-5 { margin-left: var(--space-5) !important; }
.mr-0 { margin-right: var(--space-0) !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }
.mr-5 { margin-right: var(--space-5) !important; }
.mr--2 { margin-right: -2px !important; }
.my-0 { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.mt-0 { margin-top: var(--space-0) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-10 { margin-top: var(--space-10) !important; }
.mt-15 { margin-top: var(--space-15) !important; }
.mb-0 { margin-bottom: var(--space-0) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }

@media (min-width: 576px) {
  .p-sm-0 { padding: var(--space-0) !important; }
  .p-sm-1 { padding: var(--space-1) !important; }
  .p-sm-2 { padding: var(--space-2) !important; }
  .p-sm-3 { padding: var(--space-3) !important; }
  .p-sm-4 { padding: var(--space-4) !important; }
  .p-sm-5 { padding: var(--space-5) !important; }
  .pt-sm-0 { padding-top: var(--space-0) !important; }
  .pt-sm-1 { padding-top: var(--space-1) !important; }
  .pt-sm-2 { padding-top: var(--space-2) !important; }
  .pt-sm-3 { padding-top: var(--space-3) !important; }
  .pt-sm-4 { padding-top: var(--space-4) !important; }
  .pt-sm-5 { padding-top: var(--space-5) !important; }
  .pt-sm-7 { padding-top: var(--space-7) !important; }
}
@media (min-width: 768px) {
  .p-md-0 { padding: var(--space-0) !important; }
  .p-md-1 { padding: var(--space-1) !important; }
  .p-md-2 { padding: var(--space-2) !important; }
  .p-md-3 { padding: var(--space-3) !important; }
  .p-md-4 { padding: var(--space-4) !important; }
  .p-md-5 { padding: var(--space-5) !important; }
  .p-md-page { padding: 24mm 20mm !important; }
  .pt-md-0 { padding-top: var(--space-0) !important; }
  .pt-md-1 { padding-top: var(--space-1) !important; }
  .pt-md-2 { padding-top: var(--space-2) !important; }
  .pt-md-3 { padding-top: var(--space-3) !important; }
  .pt-md-4 { padding-top: var(--space-4) !important; }
  .pt-md-5 { padding-top: var(--space-5) !important; }
  .pt-md-7 { padding-top: var(--space-7) !important; }
}
@media (min-width: 992px) {

}
@media (min-width: 1200px) {

}

/* Display & positioning */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-inline-flex { display: inline-flex; }
.d-none { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

@media (min-width: 576px) {
  .d-sm-block { display: block; }
  .d-sm-inline { display: inline; }
  .d-sm-inline-block { display: inline-block; }
  .d-sm-none { display: none; }
  .relative-sm { position: relative; }
  .absolute-sm { position: absolute; }
  .fixed-sm { position: fixed; }
  .sticky-sm { position: sticky; }
}
@media (min-width: 768px) {
  .d-md-block { display: block; }
  .d-md-inline { display: inline; }
  .d-md-inline-block { display: inline-block; }
  .d-md-none { display: none; }
  .relative-md { position: relative; }
  .absolute-md { position: absolute; }
  .fixed-md { position: fixed; }
  .sticky-md { position: sticky; }
}
@media (min-width: 992px) {
  .d-lg-block { display: block; }
  .d-lg-inline { display: inline; }
  .d-lg-inline-block { display: inline-block; }
  .d-lg-none { display: none; }
  .relative-lg { position: relative; }
  .absolute-lg { position: absolute; }
  .fixed-lg { position: fixed; }
  .sticky-lg { position: sticky; }
}
@media (min-width: 1200px) {
  .d-xl-block { display: block; }
  .d-xl-inline { display: inline; }
  .d-xl-inline-block { display: inline-block; }
  .d-xl-none { display: none; }
  .relative-xl { position: relative; }
  .absolute-xl { position: absolute; }
  .fixed-xl { position: fixed; }
  .sticky-xl { position: sticky; }
}

.inset-0 { inset: 0; }
.top-50 { top: 50%; }
.top-0 { top: 0; }
.top-100 { top: 100%; }
.top-15 { top: 15%; }
.top-20 { top: 20%; }
.top-25 { top: 25%; }
.top-60 { top: 60%; }
.bottom-50 { bottom: 50; }
.bottom-0 { bottom: 0; }
.bottom-15 { bottom: 15%; }
.bottom-20 { bottom: 20%; }
.bottom-25 { bottom: 25%; }
.left-50 { left: 50%; }
.left-10 { left: var(--space-10); }
.left-0 { left: 0; }
.left-15 { left: 15%; }
.left-20 { left: 20%; }
.left-25 { left: 25%; }
.left-60 { left: 60%; }
.right-50 { right: 50%; }
.right-0 { right: 0; }
.right-15 { right: 15%; }
.right-20 { right: 20%; }
.right-25 { right: 25%; }

.translate-center { transform: translate(-50%, -50%); }

/* Sizing */
.aspect-1 { aspect-ratio: 1 / 1; }
.w-100 { width: 100%; }
.w-4p { width: 4%; }
.w-6p { width: 6%; }
.w-8p { width: 8%; }
.w-10p { width: 10%; }
.w-12p { width: 12%; }
.w-14p { width: 14%; }
.w-90dvw { width: 90dvw; }
.w-80dvw { width: 80dvw; }
.w-70dvw { width: 70dvw; }
.w-60dvw { width: 60dvw; }
.w-50dvw { width: 50dvw; }
.w-300px { width: 300px; }
.w-200px { width: 200px; }
.w-100px { width: 100px; }
.w-62px { width: 62px; }
.w-48px { width: 48px; }
.w-40px { width: 40px; }
.w-30px { width: 30px; }
.w-2px { width: 2px; }
.w-8px { width: 8px; }
.w-a4 { width: min(100%, 210mm); }
.w-page-a4-portrait { width: min(100%, 210mm); }
.w-page-a4-landscape { width: min(100%, 297mm); }
.w-page-letter-portrait { width: min(100%, 8.5in); }
.w-page-letter-landscape { width: min(100%, 11in); }
.w-page-legal-portrait { width: min(100%, 8.5in); }
.w-page-legal-landscape { width: min(100%, 14in); }
.w-page-a5-portrait { width: min(100%, 148mm); }
.w-page-a5-landscape { width: min(100%, 210mm); }
.h-auto { height: auto; }
.h-100 { height: 100%; }
.h-4p { height: 4%; }
.h-6p { height: 6%; }
.h-8p { height: 8%; }
.h-10p { height: 10%; }
.h-12p { height: 12%; }
.h-14p { height: 14%; }
.h-100vh { height: 100vh; }
.h-90vh { height: 90vh; }
.h-80vh { height: 80vh; }
.h-60vh { height: 60vh; }
.h-50vh { height: 50vh; }
.h-100dvh { height: 100dvh; }
.h-80dvh { height: 80dvh; }
.h-60dvh { height: 60dvh; }
.minh-100dvh { min-height: 100dvh; }
.h-1_2em { height: 1.2em; }
.h-200px { height: 200px; }
.h-100px { height: 100px; }
.h-48px { height: 48px; }
.h-40px { height: 40px; }
.h-30px { height: 30px; }
.h-8px { height: 8px; }
.h-a4 { height: 297mm; }
.h-page-a4-portrait { height: 297mm; }
.h-page-a4-landscape { height: 210mm; }
.h-page-letter-portrait { height: 11in; }
.h-page-letter-landscape { height: 8.5in; }
.h-page-legal-portrait { height: 14in; }
.h-page-legal-landscape { height: 8.5in; }
.h-page-a5-portrait { height: 210mm; }
.h-page-a5-landscape { height: 148mm; }
.minw-8rem { min-width: 8rem; }
.minw-10rem { min-width: 10rem; }
.minw-12rem { min-width: 12rem; }
.minw-14rem { min-width: 14rem; }
.maxw-10rem { max-width: 10rem; }
.maxw-12rem { max-width: 12rem; }
.maxw-14rem { max-width: 14rem; }
.maxw-1040 { max-width: 1040px; }
.minh-a4 { min-height: 297mm; }
.minh-page-a4-portrait { min-height: 297mm; }
.minh-page-a4-landscape { min-height: 210mm; }
.minh-page-letter-portrait { min-height: 11in; }
.minh-page-letter-landscape { min-height: 8.5in; }
.minh-page-legal-portrait { min-height: 14in; }
.minh-page-legal-landscape { min-height: 8.5in; }
.minh-page-a5-portrait { min-height: 210mm; }
.minh-page-a5-landscape { min-height: 148mm; }
.minh-100 { min-height: 100%; }
.minh-0 { min-height: 0; }
.minh-control { min-height: var(--control-min-height); }
.minh-100px { min-height: 100px; }

@media (min-width: 576px) {
  .w-sm-100 { width: 100%; }
  .h-sm-100 { height: 100%; }
  .h-sm-100dvh { height: 100dvh; }
}
@media (min-width: 768px) {
  .w-md-100 { width: 100%; }
  .h-md-100 { height: 100%; }
  .h-md-100dvh { height: 100dvh; }
}
@media (min-width: 992px) {
  .w-lg-100 { width: 100%; }
  .basis-lg-0 { flex-basis: 0; }
  .flex-lg-collapse-empty:has([data-empty-state]) { flex: 0 0 auto; }
  .h-lg-100 { height: 100%; }
  .h-lg-80dvh { height: 80dvh; }
  .h-lg-100dvh { height: 100dvh; }
}
@media (min-width: 1200px) {
  .w-xl-100 { width: 100%; }
  .h-xl-100 { height: 100%; }
  .h-xl-100dvh { height: 100dvh; }
}

@media (max-width: 960px) {
  .p-page { padding: 18mm 14mm !important; }
  .p-md-page { padding: 18mm 14mm !important; }
}

.p-page-normal { padding: 24mm 20mm !important; }
.p-page-narrow { padding: 14mm 12mm !important; }
.p-page-wide { padding: 32mm 26mm !important; }

@media (max-width: 960px) {
  .p-page-normal { padding: 18mm 14mm !important; }
  .p-page-narrow { padding: 12mm 10mm !important; }
  .p-page-wide { padding: 24mm 18mm !important; }
}

/* Text utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text { color: var(--fg); }
.text-muted { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-primary { color: var(--primary); }
.text-on-accent-muted { color: var(--on-accent-muted); }
.text-error { color: var(--danger); }
.text-sm { font-size: 0.7rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.2rem; }
.text-2xl { font-size: 1.5rem; }
.bold { font-weight: 700; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.font-arial { font-family: Arial, sans-serif; }
.font-georgia { font-family: Georgia, serif; }
.font-times-new-roman { font-family: "Times New Roman", serif; }
.font-courier-new { font-family: "Courier New", monospace; }
.font-verdana { font-family: Verdana, sans-serif; }
.text-6pt { font-size: 6pt; }
.text-7pt { font-size: 7pt; }
.text-8pt { font-size: 8pt; }
.text-9pt { font-size: 9pt; }
.text-10pt { font-size: 10pt; }
.text-10_5pt { font-size: 10.5pt; }
.text-11pt { font-size: 11pt; }
.text-12pt { font-size: 12pt; }
.text-14pt { font-size: 14pt; }
.text-16pt { font-size: 16pt; }
.text-18pt { font-size: 18pt; }
.text-20pt { font-size: 20pt; }
.text-22pt { font-size: 22pt; }
.text-24pt { font-size: 24pt; }
.text-26pt { font-size: 26pt; }
.text-28pt { font-size: 28pt; }
.text-30pt { font-size: 30pt; }
.text-32pt { font-size: 32pt; }
.text-36pt { font-size: 36pt; }
.text-48pt { font-size: 48pt; }
.text-60pt { font-size: 60pt; }
.text-72pt { font-size: 72pt; }
.text-96pt { font-size: 96pt; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }
.list-lower-alpha { list-style: lower-alpha; }
.list-none { list-style: none; }
.nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.overflow-wrap-anywhere { overflow-wrap: anywhere; }
.select-none { user-select: none; -webkit-user-select: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.text-decoration-none { text-decoration: none; }

/* Disclosure helpers */
.summary-marker-none::-webkit-details-marker { display: none; }

/* Borders & radii */
.hr { background-color: var(--border); height: 1px; }
.border { border: 1px solid var(--border); }
.border-0 { border: none; }
.border-dashed { border-style: dashed; }
.border-2 { border-width: 2px; }
.border-primary { border-color: var(--primary); }
.ring-primary {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--primary) 35%, transparent);
}
.rounded-none { border-radius: 0px !important; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 999px; }
.rounded-tl-0 { border-top-left-radius: 0 !important; }
.rounded-tr-0 { border-top-right-radius: 0 !important; }
.rounded-br-0 { border-bottom-right-radius: 0 !important; }
.rounded-bl-0 { border-bottom-left-radius: 0 !important; }
.rounded-l-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.rounded-r-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.rounded-t-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.rounded-b-0 {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.rounded-tl-sm { border-top-left-radius: var(--radius-sm) !important; }
.rounded-tr-sm { border-top-right-radius: var(--radius-sm) !important; }
.rounded-br-sm { border-bottom-right-radius: var(--radius-sm) !important; }
.rounded-bl-sm { border-bottom-left-radius: var(--radius-sm) !important; }
.rounded-tl-md { border-top-left-radius: var(--radius-md) !important; }
.rounded-tr-md { border-top-right-radius: var(--radius-md) !important; }
.rounded-br-md { border-bottom-right-radius: var(--radius-md) !important; }
.rounded-bl-md { border-bottom-left-radius: var(--radius-md) !important; }
.rounded-tl-lg { border-top-left-radius: var(--radius-lg) !important; }
.rounded-tr-lg { border-top-right-radius: var(--radius-lg) !important; }
.rounded-br-lg { border-bottom-right-radius: var(--radius-lg) !important; }
.rounded-bl-lg { border-bottom-left-radius: var(--radius-lg) !important; }
.rounded-l-sm {
  border-top-left-radius: var(--radius-sm) !important;
  border-bottom-left-radius: var(--radius-sm) !important;
}
.rounded-r-sm {
  border-top-right-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}
.rounded-l-md {
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
}
.rounded-r-md {
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}
.rounded-l-lg {
  border-top-left-radius: var(--radius-lg) !important;
  border-bottom-left-radius: var(--radius-lg) !important;
}
.rounded-r-lg {
  border-top-right-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}
.rounded-t-sm {
  border-top-left-radius: var(--radius-sm) !important;
  border-top-right-radius: var(--radius-sm) !important;
}
.rounded-b-sm {
  border-bottom-left-radius: var(--radius-sm) !important;
  border-bottom-right-radius: var(--radius-sm) !important;
}
.rounded-t-md {
  border-top-left-radius: var(--radius-md) !important;
  border-top-right-radius: var(--radius-md) !important;
}
.rounded-b-md {
  border-bottom-left-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}
.rounded-t-lg {
  border-top-left-radius: var(--radius-lg) !important;
  border-top-right-radius: var(--radius-lg) !important;
}
.rounded-b-lg {
  border-bottom-left-radius: var(--radius-lg) !important;
  border-bottom-right-radius: var(--radius-lg) !important;
}
.fill-none { fill: none; }
.fill-primary { fill: var(--primary); }
.fill-fg { fill: var(--fg); }
.fill-blue { fill: var(--blue); }
.fill-green { fill: var(--green); }
.fill-yellow { fill: var(--yellow); }
.fill-red { fill: var(--red); }
.fill-orange { fill: var(--orange); }
.fill-opacity-50 { fill-opacity: 0.5; }
.stroke-primary { stroke: var(--primary); }
.stroke-fg { stroke: var(--fg); }
.stroke-blue { stroke: var(--blue); }
.stroke-green { stroke: var(--green); }
.stroke-yellow { stroke: var(--yellow); }
.stroke-red { stroke: var(--red); }
.stroke-orange { stroke: var(--orange); }
.stroke-w-1 { stroke-width: 1; }
.stroke-w-2 { stroke-width: 2; }
.paint-order-stroke { paint-order: stroke; }
.maxw-300px { max-width: 300px; }

/* Surfaces */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-selectable {
  cursor: pointer;
  transition: border-color var(--transition), transform 0.15s ease, box-shadow var(--transition), background var(--transition);
}
.card-selectable:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
.card-selected {
  border-color: color-mix(in oklab, var(--primary) 80%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.12);
}
.panel-surface {
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Buttons */
.btn {
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  font: 600 0.95rem/1.15 var(--font-sans);
  background: color-mix(in oklab, var(--surface) 70%, #000 10%);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset: 2px; }
.btn:hover {
  background: color-mix(in oklab, var(--surface) 60%, var(--primary) 20%);
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.25);
}
.btn-accent {
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 80%, #000);
  color: #fff;
}
.btn-accent:hover { background: color-mix(in oklab, var(--accent) 85%, #000); }
.btn-warning {
  background: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 80%, #000);
  color: #000;
}
.btn-warning:hover { background: color-mix(in oklab, var(--warning) 85%, #000); }
.btn-danger {
  background: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 80%, #000);
  color: #fff;
}
.btn-danger:hover { background: color-mix(in oklab, var(--danger) 85%, #000); }
.btn-success {
  background: var(--success);
  border-color: color-mix(in oklab, var(--success) 80%, #000);
  color: #fff;
}
.btn-success:hover { background: color-mix(in oklab, var(--success) 85%, #000); }
.btn-info {
  background: var(--info);
  border-color: color-mix(in oklab, var(--info) 80%, #000);
  color: #fff;
}
.btn-info:hover { background: color-mix(in oklab, var(--info) 85%, #000); }
.btn[disabled], .disabled { opacity: 0.6; cursor: not-allowed; }

/* Forms */
input, select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding-inline: clamp(0.75rem, 2vw, 1rem);
  padding-block: clamp(0.55rem, 1.2vw, 0.85rem);
  min-height: var(--control-min-height);
  font-size: 1rem;
  transition: var(--transition);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--primary) 35%, transparent);
}
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
}

.field-outline {
  position: relative;
  padding-top: var(--space-1);
}
.field-outline > label {
  position: absolute;
  z-index: 1;
  top: var(--space-1);
  left: var(--space-3);
  max-width: calc(100% - (var(--space-3) * 2));
  padding-inline: var(--space-1);
  overflow: hidden;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.3rem var(--surface);
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color var(--transition);
}
.field-outline:focus-within > label {
  color: var(--primary);
}

:where(dropdown-ui[mode="select"]) {
  display: block;
  width: 100%;
}
.dropdown-select-trigger {
  font: inherit;
  transition: var(--transition);
}
.dropdown-select-trigger:focus-visible,
.dropdown-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--primary) 35%, transparent);
}
.dropdown-select-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dropdown-select-trigger[data-dropdown-side="bottom"][aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown-select-trigger[data-dropdown-side="top"][aria-expanded="true"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dropdown-select-panel {
  max-height: min(18rem, calc(100dvh - 1.5rem));
}
.dropdown-select-panel[data-dropdown-side="bottom"] {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.dropdown-select-panel[data-dropdown-side="top"] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.dropdown-select-option {
  font: inherit;
}
.dropdown-select-option:hover,
.dropdown-select-option.is-active {
  background: color-mix(in oklab, var(--surface) 65%, var(--primary) 20%);
}
.dropdown-select-option[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}
.dropdown-select-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Scrollbars */
::-webkit-scrollbar { width: 12px; height: 12px; }
.scrollbar-md::-webkit-scrollbar { width: 16px; height: 16px; }
.scrollbar-sm::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track,
.scrollbar-md::-webkit-scrollbar-track,
.scrollbar-sm::-webkit-scrollbar-track {
  background: var(--surface);
}
.scrollbar-rounded::-webkit-scrollbar-track {
  border-radius: 999px;
}
.scrollbar-rounded::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb,
.scrollbar-md::-webkit-scrollbar-thumb,
.scrollbar-sm::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover,
.scrollbar-md::-webkit-scrollbar-thumb:hover,
.scrollbar-sm::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--border) 75%, var(--fg));
}

::-webkit-scrollbar-thumb:active,
.scrollbar-md::-webkit-scrollbar-thumb:active,
.scrollbar-sm::-webkit-scrollbar-thumb:active {
  background: color-mix(in oklab, var(--border) 60%, var(--fg));
}

.scrollbar-md,
.scrollbar-sm {
  scrollbar-color: var(--border) var(--surface);
}

.scrollbar-md {
  scrollbar-width: auto;
}

.scrollbar-sm {
  scrollbar-width: thin;
}

/* Scroll behavior / snap */
.scroll-behavior-smooth { scroll-behavior: smooth; }
.scroll-snap-type-y-mandatory { scroll-snap-type: y mandatory; }
.scroll-snap-type-y-proximity { scroll-snap-type: y proximity; }
.scroll-snap-align-start { scroll-snap-align: start; }

/* Opacity / visibility */
.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1; }
.opacity-15 { opacity: 0.15; }
.opacity-25 { opacity: 0.25; }
.opacity-35 { opacity: 0.35; }
.opacity-55 { opacity: 0.55; }
.opacity-75 { opacity: 0.75; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.object-fit-cover { object-fit: cover; }
.object-fit-contain { object-fit: contain; }
.outline-none { outline: none !important; }
.shadow-none { box-shadow: none !important; }
.blur-2px { filter: blur(2px); }
.blur-4px { filter: blur(4px); }
.perspective-1000px { perspective: 1000px; }
.backface-visibility-hidden { backface-visibility:hidden; }
.z-front { z-index: 999; }
.z-overlay { z-index: 1100; }
.z-menu { z-index: 1150; }
.z-popover { z-index: 1200; }
.z-middle { z-index: 500; }
.z-back { z-index: 0; }

/* Background helpers */
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }
.bg-primary {
  --bg-tone: var(--primary);
  background: var(--primary);
  color: #f7faff;
  border-color: color-mix(in oklab, var(--primary) 75%, #000);
}
.bg-accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: color-mix(in oklab, var(--accent) 75%, #000);
}
.bg-warning {
  --bg-tone: var(--warning);
  background: var(--warning);
  color: #161100;
  border-color: color-mix(in oklab, var(--warning) 80%, #000);
}
.bg-danger {
  background: var(--danger);
  color: #fff4f5;
  border-color: color-mix(in oklab, var(--danger) 80%, #000);
}
.bg-success {
  --bg-tone: var(--success);
  background: var(--success);
  color: #f3fff7;
  border-color: color-mix(in oklab, var(--success) 80%, #000);
}
.bg-info {
  --bg-tone: var(--info);
  background: var(--info);
  color: #f3fcff;
  border-color: color-mix(in oklab, var(--info) 80%, #000);
}
.bg-blue {
  background: var(--blue);
  color: #f3faff;
  border-color: color-mix(in oklab, var(--blue) 80%, #000);
}
.bg-green {
  background: var(--green);
  color: #f3fff7;
  border-color: color-mix(in oklab, var(--green) 80%, #000);
}
.bg-yellow {
  background: var(--yellow);
  color: #1b1500;
  border-color: color-mix(in oklab, var(--yellow) 80%, #000);
}
.bg-red {
  background: var(--red);
  color: #fff4f5;
  border-color: color-mix(in oklab, var(--red) 80%, #000);
}
.bg-orange {
  background: var(--orange);
  color: #1d0d03;
  border-color: color-mix(in oklab, var(--orange) 80%, #000);
}
.bg-depth-1 {
  background: color-mix(in oklab, var(--bg-tone) 70%, #000);
  border-color: var(--bg-tone);
}
.bg-depth-2 {
  background: color-mix(in oklab, var(--bg-tone) 52%, #000);
  border-color: var(--bg-tone);
}
.bg-depth-3 {
  background: color-mix(in oklab, var(--bg-tone) 38%, #000);
  border-color: var(--bg-tone);
}
.bg-depth-4 {
  background: color-mix(in oklab, var(--bg-tone) 26%, #000);
  border-color: var(--bg-tone);
}
.bg-selection {
  background: color-mix(in oklab, var(--primary) 42%, transparent);
  color: inherit;
}
.bg-surface {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border);
}
.bg-surface-opaque {
  background: var(--surface-opaque);
  color: var(--fg);
  border-color: var(--border);
}
.bg-surface-strong {
  background: var(--surface-strong);
  color: var(--fg);
  border-color: var(--border);
}
.bg-border { background: var(--border); }
.bg-transparent { background: transparent; }

/* Shadows */
.shadow-sm { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.shadow-md { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.shadow-lg { box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25); }
.shadow-primary { box-shadow: 0 0 24px color-mix(in oklab, var(--primary) 28%, transparent); }
.shadow-accent { box-shadow: 0 0 24px color-mix(in oklab, var(--accent) 26%, transparent); }
.glow-tone { box-shadow: 0 0 0 2px var(--bg-tone), 0 0 16px color-mix(in oklab, var(--bg-tone) 72%, transparent); }
.spin { animation: spin 1s linear infinite; }
.animate-bob { animation: bob 1s ease-in-out infinite; }
.animate-caret-blink { animation: caret-blink 1s steps(1, end) infinite; }
.animate-float-slow { animation: float-slow 4.6s ease-in-out infinite; }
.animate-float-soft { animation: float-soft 3.6s ease-in-out infinite; }
.animate-float-reverse { animation: float-reverse 5.2s ease-in-out infinite; }
.animation-delay-150 { animation-delay: 0.15s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-450 { animation-delay: 0.45s; }

marquee-ui {
  display: block;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
marquee-ui [data-marquee-viewport] { overflow: hidden; }
marquee-ui [data-marquee-track] {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
  will-change: transform;
}
marquee-ui[speed="slow"] [data-marquee-track] { animation-duration: 52s; }
marquee-ui[speed="fast"] [data-marquee-track] { animation-duration: 22s; }
marquee-ui:hover [data-marquee-track] { animation-play-state: paused; }
marquee-ui [data-marquee-group] {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-2);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes bob {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  marquee-ui {
    mask-image: none;
  }
  marquee-ui [data-marquee-track] {
    width: auto;
    animation: none;
  }
  marquee-ui [data-marquee-group] {
    flex-wrap: wrap;
    justify-content: center;
  }
  marquee-ui [data-marquee-group][aria-hidden="true"] {
    display: none;
  }
}

@keyframes float-slow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10%, 0) scale(1.08); }
}

@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, -8%, 0) scale(1.06); }
}

@keyframes float-reverse {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-8%, 10%, 0) scale(0.94); }
}

/* Helpers específicos */
.collapsible {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.2s ease, opacity 0.2s ease;
}
.collapsible-content { min-height: 0; }
.collapsible.is-hidden { grid-template-rows: 0fr; opacity: 0; }
.collapsible.is-hidden > .collapsible-content { overflow: hidden; }
.accordion-item-bare + .accordion-item-bare {
  border-top: 1px solid color-mix(in oklab, var(--border) 85%, transparent);
}
.accordion-toggle {
  width: 100%;
  border: 0;
  padding: 0.25rem 0;
  background: transparent;
  color: var(--fg);
  font: 700 1rem/1.2 var(--font-sans);
  cursor: pointer;
}
.accordion-toggle:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: color-mix(in oklab, var(--fg) 88%, var(--primary));
}
.accordion-toggle[aria-expanded="true"] {
  color: color-mix(in oklab, var(--fg) 82%, var(--primary));
}
.accordion-toggle:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--primary) 70%, transparent);
  outline-offset: 3px;
}
.accordion-panel-bare {
  margin-inline: -0.25rem;
  padding: 0.75rem 0.25rem 0.25rem;
}
.scalex-50 { transform: scaleX(0.5); display: block; }
.scaley-0 { transform: scaleY(0); }
.scaley-1 { transform: scaleY(1); }
.translatex--50 { transform: translateX(-50%); }
.transition-all { transition-property: all; }
.transition-transform { transition-property: transform; }
.transition-opacity { transition-property: opacity; }
.transition-none { transition: none !important; }
.duration-08s { transition-duration: 0.8s; }
.duration-1s { transition-duration: 1s; }
.ease { transition-timing-function: ease; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.opacity-1s-ease { transition: opacity 1s ease; }
.transform-1s-ease { transition: transform 1s ease; }
.transform-08s { transition: transform 0.8s; }
.transition-delay-150 { transition-delay: 150ms; }
.transition-delay-300 { transition-delay: 300ms; }
.transition-delay-450 { transition-delay: 450ms; }
.transition-delay-600 { transition-delay: 600ms; }
.origin-top { transform-origin: top; }
.transform-origin-bottom { transform-origin: bottom; }
.valign-text-bottom { vertical-align: text-bottom; }
.valign-middle { vertical-align: middle; }
.lh-1 { line-height: 1; }
.translatey-0 { transform: translateY(0); }
.translatey-2px { transform: translateY(2px); }
.translatey-40px { transform: translateY(40px); }
.rotatey-180deg { transform: rotateY(180deg); }
.preserve-3d { transform-style: preserve-3d; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.minw-0 { min-width: 0; }

@media (min-width: 768px) {
  .position-md-relative { position: relative; }
  .inset-md-auto { inset: auto; }
  .zindex-md-back { z-index: 0; }
  .overflow-md-hidden { overflow: hidden; }
}
@media (min-width: 992px) {
  .overflow-lg-hidden { overflow: hidden; }
}

/* Popovers */
.popover-center {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: min(92vw, 960px);
}
.popover-center::backdrop { background: rgba(0, 0, 0, 0.55); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 998;
}

.switch-track { width: 60px; height: 34px; background: var(--border); position: relative; }
.switch-track[data-state="on"] { background: var(--primary); }
.switch-thumb { position: absolute; width: 26px; height: 26px; background: #fff; left: 4px; top: 4px; transition: transform .2s; display: grid; place-items: center; line-height: 1; font-size: 16px; }
.switch-thumb[data-state="on"] { transform: translateX(26px); }

/* Drag and drop */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.dragging { opacity: 0.6; transform: scale(0.98); }
.drag-over {
  outline: 2px dashed color-mix(in oklab, var(--primary) 55%, var(--border));
  outline-offset: 4px;
  background: color-mix(in oklab, var(--surface) 70%, var(--primary) 10%);
}

/* cursors */
.cursor-pointer { cursor: pointer; }
.cursor-text { cursor: text; }
.cursor-cell { cursor: cell; }
.cursor-grab { cursor: grab; cursor: -webkit-grab; }
.cursor-grabbing { cursor: grabbing; cursor: -webkit-grabbing; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-progress { cursor: progress; }
.cursor-wait { cursor: wait; }