/**
 * Oak UI — v1.0.0
 * Ultra-lightweight semantic HTML + CSS component library.
 * Zero dependencies. No build step. Just drop in and go.
 * https://github.com/oak-ui/oak
 */

@layer theme, base, components, animations, utilities;

/* ============================================================
   THEME — Design tokens
   ============================================================ */

@layer theme {
  :root {
    color-scheme: light dark;

    /* Surfaces */
    --background:          light-dark(#ffffff, #0c0c0e);
    --foreground:          light-dark(#111118, #f0f0f5);
    --card:                light-dark(#ffffff, #17171c);
    --card-foreground:     light-dark(#111118, #f0f0f5);
    --overlay:             light-dark(#f8f8fb, #1f1f26);
    --overlay-foreground:  light-dark(#111118, #f0f0f5);

    /* Brand */
    --primary:             light-dark(#2a5af5, #5b82ff);
    --primary-foreground:  #ffffff;
    --primary-muted:       light-dark(color-mix(in srgb, var(--primary) 10%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));

    /* Neutrals */
    --secondary:           light-dark(#f0f0f5, #26262e);
    --secondary-foreground: light-dark(#111118, #f0f0f5);
    --muted:               light-dark(#f0f0f5, #1f1f26);
    --muted-foreground:    light-dark(#6b6b80, #9898aa);
    --faint:               light-dark(#f8f8fb, #141419);

    /* Semantic */
    --success:             light-dark(#0a7c52, #34c88a);
    --success-foreground:  light-dark(#ffffff, #0a0f0c);
    --success-muted:       light-dark(color-mix(in srgb, var(--success) 10%, transparent), color-mix(in srgb, var(--success) 20%, transparent));

    --warning:             light-dark(#b45309, #f59e0b);
    --warning-foreground:  light-dark(#ffffff, #1a0d00);
    --warning-muted:       light-dark(color-mix(in srgb, var(--warning) 10%, transparent), color-mix(in srgb, var(--warning) 20%, transparent));

    --danger:              light-dark(#d0190f, #ff6b63);
    --danger-foreground:   light-dark(#ffffff, #0f0000);
    --danger-muted:        light-dark(color-mix(in srgb, var(--danger) 10%, transparent), color-mix(in srgb, var(--danger) 20%, transparent));

    --info:                light-dark(#0369a1, #38bdf8);
    --info-foreground:     light-dark(#ffffff, #00111a);
    --info-muted:          light-dark(color-mix(in srgb, var(--info) 10%, transparent), color-mix(in srgb, var(--info) 20%, transparent));

    /* Chrome */
    --border:              light-dark(#e2e2ec, #2e2e3a);
    --border-strong:       light-dark(#c5c5d6, #44444e);
    --input:               light-dark(#e2e2ec, #2e2e3a);
    --ring:                light-dark(#2a5af5, #5b82ff);
    --ring-offset:         light-dark(#ffffff, #0c0c0e);

    /* Spacing scale */
    --space-px:   1px;
    --space-0-5:  0.125rem;
    --space-1:    0.25rem;
    --space-1-5:  0.375rem;
    --space-2:    0.5rem;
    --space-2-5:  0.625rem;
    --space-3:    0.75rem;
    --space-4:    1rem;
    --space-5:    1.25rem;
    --space-6:    1.5rem;
    --space-7:    1.75rem;
    --space-8:    2rem;
    --space-10:   2.5rem;
    --space-12:   3rem;
    --space-14:   3.5rem;
    --space-16:   4rem;
    --space-20:   5rem;
    --space-24:   6rem;

    /* Border radius */
    --radius-none:   0;
    --radius-sm:     0.25rem;
    --radius-md:     0.5rem;
    --radius-lg:     0.75rem;
    --radius-xl:     1rem;
    --radius-2xl:    1.5rem;
    --radius-full:   9999px;

    /* Typography */
    --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:  ui-monospace, "Cascadia Code", "Fira Code", Consolas, monospace;
    --font-serif: "Georgia", "Times New Roman", serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  clamp(1.375rem, 1.25rem + 0.4vw, 1.5rem);
    --text-3xl:  clamp(1.625rem, 1.4rem + 0.7vw, 1.875rem);
    --text-4xl:  clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
    --text-5xl:  clamp(2.5rem, 2rem + 1.5vw, 3.25rem);

    --leading-tight:   1.2;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;
    --tracking-wider:  0.05em;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;

    /* Shadows */
    --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);

    /* Transitions */
    --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-fast:   100ms;
    --duration:        160ms;
    --duration-slow:   280ms;

    --transition-fast: var(--duration-fast) var(--ease);
    --transition:      var(--duration) var(--ease);
    --transition-slow: var(--duration-slow) var(--ease);

    /* Z-index */
    --z-sticky:   40;
    --z-drawer:   50;
    --z-dropdown: 100;
    --z-modal:    200;
    --z-toast:    300;

    /* Component tokens */
    --btn-height-sm:  1.875rem;
    --btn-height-md:  2.25rem;
    --btn-height-lg:  2.75rem;
    --input-height-sm: 1.875rem;
    --input-height-md: 2.25rem;
    --input-height-lg: 2.75rem;
    --bar-height: 0.375rem;
  }
}


/* ============================================================
   BASE — HTML element resets and sensible defaults
   ============================================================ */

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  * { margin: 0; }

  html {
    tab-size: 4;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body, dialog, [popover] {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--foreground);
  }

  body {
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100dvh;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

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

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);

    &:first-child { margin-block-start: 0; }
  }

  h1 { font-size: var(--text-4xl); margin: var(--space-10) 0 var(--space-5); }
  h2 { font-size: var(--text-3xl); margin: var(--space-8) 0 var(--space-4); }
  h3 { font-size: var(--text-2xl); margin: var(--space-6) 0 var(--space-3); }
  h4 { font-size: var(--text-xl);  margin: var(--space-5) 0 var(--space-3); }
  h5 { font-size: var(--text-lg);  margin: var(--space-4) 0 var(--space-2); }
  h6 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }

  p {
    margin-block-end: var(--space-4);
    line-height: var(--leading-relaxed);
    &:last-child { margin-block-end: 0; }
  }

  a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    &:hover { opacity: 0.8; }
  }

  strong, b { font-weight: var(--font-semibold); }
  em, i { font-style: italic; }
  small { font-size: var(--text-sm); }

  sub, sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }

  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.15em var(--space-1-5);
    background-color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--foreground);
  }

  pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    padding: var(--space-5);
    background-color: light-dark(#1e1e2e, #111118);
    color: light-dark(#cdd6f4, #d4d4d8);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    tab-size: 2;

    code {
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      color: inherit;
      font-size: inherit;
    }
  }

  blockquote {
    border-inline-start: 3px solid var(--primary);
    padding: var(--space-3) var(--space-5);
    margin: var(--space-6) 0;
    color: var(--muted-foreground);
    font-style: italic;
    background-color: var(--primary-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }

  hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
  }

  ul, ol {
    padding-inline-start: var(--space-6);
    margin-block-end: var(--space-4);
  }
  ul { list-style-type: disc; }
  ol { list-style-type: decimal; }
  li { margin-block-end: var(--space-1-5); }

  mark {
    background-color: light-dark(#fef08a, #713f12);
    color: light-dark(#713f12, #fef08a);
    padding: 0.1em var(--space-1);
    border-radius: var(--radius-sm);
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  details > summary {
    cursor: pointer;
    list-style: none;
    &::marker, &::-webkit-details-marker { display: none; }
  }

  table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
  }

  [hidden] { display: none !important; }

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

  :disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* ---- Forms ---- */

  label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--foreground);

    &:has(input:where([type=checkbox],[type=radio])) {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-weight: var(--font-normal);
      cursor: pointer;
    }
  }

  :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset]),
         textarea,
         select) {
    width: 100%;
    height: var(--input-height-md);
    margin-block-start: var(--space-1);
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1;
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &::placeholder { color: var(--muted-foreground); }

    &:hover:not(:disabled) {
      border-color: var(--border-strong);
    }

    &:focus {
      outline: none;
      border-color: var(--ring);
      box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.15);
    }

    &:disabled { background-color: var(--muted); }

    &:is([aria-invalid=true], :user-invalid) {
      border-color: var(--danger);
      &:focus {
        box-shadow: 0 0 0 3px rgb(from var(--danger) r g b / 0.15);
      }
    }
  }

  textarea {
    height: auto;
    min-height: 6rem;
    padding: var(--space-3);
    resize: vertical;
    line-height: var(--leading-normal);
  }

  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-inline-end: var(--space-8);
    cursor: pointer;
  }

  input[type=checkbox],
  input[type=radio] {
    appearance: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    position: relative;
    background-color: var(--background);
    border: 1.5px solid var(--input);
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
    cursor: pointer;

    &:hover { border-color: var(--primary); }

    &:focus { outline: none; box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.15); }

    &:checked {
      background-color: var(--primary);
      border-color: var(--primary);

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--primary-foreground);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: 75%;
      }
    }
  }

  input[type=checkbox] {
    border-radius: var(--radius-sm);
    &:checked::after {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    }

    /* Switch variant */
    &[role=switch] {
      --_h: 1.25rem;
      --_inset: 2px;
      --_thumb: calc(var(--_h) - var(--_inset) * 2 - 1px);

      width: calc(var(--_h) * 1.85);
      height: var(--_h);
      border-radius: var(--radius-full);
      background-color: var(--muted-foreground);
      border-color: transparent;

      &::before {
        content: "";
        position: absolute;
        top: var(--_inset);
        left: var(--_inset);
        width: var(--_thumb);
        height: var(--_thumb);
        background-color: white;
        border-radius: var(--radius-full);
        transition: transform var(--transition);
        box-shadow: var(--shadow-xs);
      }

      &:hover { background-color: var(--border-strong); border-color: transparent; }

      &:checked {
        background-color: var(--primary);
        border-color: transparent;

        &::after { content: none; }

        &::before {
          transform: translateX(calc(var(--_h) * 1.85 - var(--_thumb) - var(--_inset) * 2));
        }
      }
    }
  }

  input[type=radio] {
    border-radius: var(--radius-full);
    &:checked::after {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='currentColor'/%3E%3C/svg%3E");
    }
  }

  input[type=range] {
    width: 100%;
    height: var(--bar-height);
    appearance: none;
    background: var(--muted);
    border-radius: var(--radius-full);
    cursor: pointer;

    &::-webkit-slider-thumb {
      appearance: none;
      width: 1.125rem;
      height: 1.125rem;
      background: var(--primary);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);

      &:hover {
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgb(from var(--primary) r g b / 0.2);
      }
    }

    &::-moz-range-thumb {
      width: 1.125rem;
      height: 1.125rem;
      background: var(--primary);
      border: none;
      border-radius: var(--radius-full);
    }
  }

  input[type=color] {
    width: 2.5rem;
    height: var(--input-height-md);
    padding: var(--space-1);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    cursor: pointer;

    &::-webkit-color-swatch-wrapper { padding: 0; }
    &::-webkit-color-swatch { border: none; border-radius: var(--radius-sm); }
  }

  input[type=file] {
    width: 100%;
    font-size: var(--text-sm);
    cursor: pointer;
  }

  ::file-selector-button {
    height: var(--input-height-md);
    padding: 0 var(--space-3);
    margin-inline-end: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);

    &:hover { background-color: var(--border); }
  }

  fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-block-end: var(--space-5);
  }

  legend {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    padding: 0 var(--space-2);
    color: var(--muted-foreground);
  }

  /* ---- Buttons ---- */

  :is(button, [type=submit], [type=reset], [type=button], a.btn) {
    --_bg:     var(--primary);
    --_color:  var(--primary-foreground);
    --_border: transparent;
    --_hov:    color-mix(in srgb, var(--_bg), white 12%);
    --_act:    color-mix(in srgb, var(--_bg), black 8%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--_color);
    background-color: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);

    &:hover:not(:disabled)  { background-color: var(--_hov); }
    &:active:not(:disabled) {
      background-color: var(--_act);
      transform: translateY(1px);
    }

    /* Sizes */
    &.btn-sm {
      height: var(--btn-height-sm);
      padding: 0 var(--space-3);
      font-size: var(--text-xs);
      border-radius: var(--radius-sm);
      gap: var(--space-1-5);
    }

    &.btn-lg {
      height: var(--btn-height-lg);
      padding: 0 var(--space-6);
      font-size: var(--text-base);
      border-radius: var(--radius-lg);
      gap: var(--space-3);
    }

    /* Icon-only */
    &.btn-icon {
      width: var(--btn-height-md);
      padding: 0;

      &.btn-sm { width: var(--btn-height-sm); }
      &.btn-lg { width: var(--btn-height-lg); }
    }

    /* Variants */
    &[data-variant=secondary] {
      --_bg:    var(--secondary);
      --_color: var(--secondary-foreground);
      --_hov:   color-mix(in srgb, var(--secondary), black 6%);
    }

    &[data-variant=outline] {
      --_bg:     transparent;
      --_color:  var(--foreground);
      --_border: var(--border);
      --_hov:    var(--muted);
      --_act:    var(--secondary);
    }

    &[data-variant=ghost] {
      --_bg:    transparent;
      --_color: var(--foreground);
      --_hov:   var(--muted);
      --_act:   var(--secondary);
    }

    &[data-variant=link] {
      --_bg:    transparent;
      --_color: var(--primary);
      --_hov:   transparent;
      --_act:   transparent;
      height: auto;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 3px;

      &:hover { opacity: 0.8; }
      &:active { transform: none; }
    }

    &[data-variant=danger] {
      --_bg:    var(--danger);
      --_color: var(--danger-foreground);
      --_hov:   color-mix(in srgb, var(--danger), white 12%);
    }

    &[data-variant=success] {
      --_bg:    var(--success);
      --_color: var(--success-foreground);
      --_hov:   color-mix(in srgb, var(--success), white 12%);
    }

    /* Loading state */
    &[aria-busy=true] {
      position: relative;
      color: transparent !important;
      pointer-events: none;

      &::after {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgb(from var(--_color) r g b / 0.3);
        border-top-color: var(--primary-foreground);
        border-radius: var(--radius-full);
        animation: oak-spin 0.7s linear infinite;
      }
    }
  }

  /* ---- Tables ---- */

  .table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  table {
    th, td {
      padding: var(--space-3) var(--space-4);
      text-align: start;
      border-bottom: 1px solid var(--border);
    }

    th {
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      background-color: var(--faint);
      white-space: nowrap;
    }

    td {
      font-size: var(--text-sm);
      vertical-align: middle;
    }

    tr:last-child td { border-bottom: none; }

    &.striped tr:nth-child(even) td { background-color: var(--faint); }

    &.hoverable tbody tr {
      transition: background-color var(--transition-fast);
      &:hover td { background-color: var(--primary-muted); }
    }
  }

  /* ---- Progress / Meter ---- */

  progress {
    appearance: none;
    display: block;
    width: 100%;
    height: var(--bar-height);
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    background-color: var(--muted);

    &::-webkit-progress-bar { background-color: var(--muted); border-radius: var(--radius-full); }
    &::-webkit-progress-value {
      background-color: var(--primary);
      border-radius: var(--radius-full);
      transition: width var(--transition-slow);
    }
    &::-moz-progress-bar { background-color: var(--primary); border-radius: var(--radius-full); }

    &.progress-success::-webkit-progress-value { background-color: var(--success); }
    &.progress-warning::-webkit-progress-value { background-color: var(--warning); }
    &.progress-danger::-webkit-progress-value  { background-color: var(--danger); }

    &.progress-lg { height: calc(var(--bar-height) * 2.5); }
    &.progress-sm { height: calc(var(--bar-height) * 0.66); }

    /* Striped animated */
    &.progress-striped::-webkit-progress-value {
      background-image: linear-gradient(
        45deg,
        rgb(255 255 255 / 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgb(255 255 255 / 0.15) 50%,
        rgb(255 255 255 / 0.15) 75%,
        transparent 75%
      );
      background-size: 1rem 1rem;
      animation: oak-progress-stripe 1s linear infinite;
    }
  }

  meter {
    appearance: none;
    display: block;
    width: 100%;
    height: var(--bar-height);
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--muted);

    &::-webkit-meter-bar { background: var(--muted); border: none; border-radius: var(--radius-full); }
    &::-webkit-meter-optimum-value      { background: var(--success); border-radius: var(--radius-full); }
    &::-webkit-meter-suboptimum-value   { background: var(--warning); border-radius: var(--radius-full); }
    &::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: var(--radius-full); }
    &::-moz-meter-bar                   { background: var(--success); border-radius: var(--radius-full); }
    &:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warning); }
    &:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
  }
}


/* ============================================================
   COMPONENTS
   ============================================================ */

@layer components {

  /* ---- Card ---- */
  .card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;

    &.card-hover {
      transition: box-shadow var(--transition), transform var(--transition);
      &:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
      }
    }

    .card-header {
      padding: var(--space-6);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);

      h1, h2, h3, h4, h5, h6 {
        margin: 0;
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
      }
      p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
    }

    .card-body  { padding: var(--space-6); }
    .card-footer {
      padding: var(--space-4) var(--space-6);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--space-2);
      background-color: var(--faint);
    }
  }

  /* ---- Badge ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2-5);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    border-radius: var(--radius-full);
    white-space: nowrap;
    background-color: var(--primary);
    color: var(--primary-foreground);

    &.badge-secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
    &.badge-outline   { background-color: transparent; color: var(--foreground); border: 1px solid var(--border); }
    &.badge-success   { background-color: var(--success-muted); color: var(--success); }
    &.badge-warning   { background-color: var(--warning-muted); color: var(--warning); }
    &.badge-danger    { background-color: var(--danger-muted); color: var(--danger); }
    &.badge-info      { background-color: var(--info-muted); color: var(--info); }

    &.badge-lg {
      padding: var(--space-1) var(--space-3);
      font-size: var(--text-sm);
    }

    /* Dot indicator */
    &.badge-dot::before {
      content: "";
      width: 0.45em;
      height: 0.45em;
      border-radius: var(--radius-full);
      background-color: currentColor;
      flex-shrink: 0;
    }
  }

  /* ---- Alert ---- */
  [role=alert] {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--foreground);
    background-color: var(--overlay);

    .alert-icon { flex-shrink: 0; margin-top: 0.1em; }

    .alert-title {
      font-weight: var(--font-semibold);
      font-size: var(--text-base);
      margin-block-end: var(--space-1);
    }

    .alert-desc { color: var(--muted-foreground); line-height: var(--leading-relaxed); }

    &[data-variant=info] {
      color: var(--info);
      background-color: var(--info-muted);
      border-color: color-mix(in srgb, var(--info) 30%, transparent);
      a { color: var(--info); }
      .alert-desc { color: color-mix(in srgb, var(--info) 80%, var(--foreground)); }
    }

    &[data-variant=success] {
      color: var(--success);
      background-color: var(--success-muted);
      border-color: color-mix(in srgb, var(--success) 30%, transparent);
      a { color: var(--success); }
      .alert-desc { color: color-mix(in srgb, var(--success) 80%, var(--foreground)); }
    }

    &[data-variant=warning] {
      color: var(--warning);
      background-color: var(--warning-muted);
      border-color: color-mix(in srgb, var(--warning) 30%, transparent);
      a { color: var(--warning); }
      .alert-desc { color: color-mix(in srgb, var(--warning) 80%, var(--foreground)); }
    }

    &[data-variant=danger] {
      color: var(--danger);
      background-color: var(--danger-muted);
      border-color: color-mix(in srgb, var(--danger) 30%, transparent);
      a { color: var(--danger); }
      .alert-desc { color: color-mix(in srgb, var(--danger) 80%, var(--foreground)); }
    }
  }

  /* ---- Tabs ---- */
  [role=tablist] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    background-color: var(--muted);
    border-radius: var(--radius-lg);

    &.tabs-line {
      background: none;
      padding: 0;
      gap: 0;
      border-bottom: 2px solid var(--border);
      border-radius: 0;
      width: 100%;

      [role=tab] {
        border-radius: 0;
        padding: var(--space-3) var(--space-4);
        margin-bottom: -2px;
        color: var(--muted-foreground);
        background: none;
        border-bottom: 2px solid transparent;
        transition: color var(--transition-fast), border-color var(--transition-fast);

        &:hover { color: var(--foreground); }
        &[aria-selected=true] {
          color: var(--primary);
          border-bottom-color: var(--primary);
          background: none;
          box-shadow: none;
        }
      }
    }
  }

  [role=tab] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    white-space: nowrap;
    background-color: transparent;
    color: var(--muted-foreground);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast);

    &:hover { color: var(--foreground); }
    &[aria-selected=true] {
      background-color: var(--card);
      color: var(--foreground);
      box-shadow: var(--shadow-sm);
    }
  }

  [role=tabpanel] {
    padding: var(--space-5) 0;
    &:focus-visible { outline: none; }
  }

  /* ---- Dialog / Modal ---- */
  dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    width: min(calc(100% - var(--space-8)), 36rem);
    max-height: min(90vh, 700px);
    margin: auto;
    padding: 0;
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    opacity: 0;
    transform: scale(0.96) translateY(-8px);
    transition:
      opacity var(--duration) var(--ease-out),
      transform var(--duration) var(--ease-out),
      overlay var(--duration) var(--ease-out) allow-discrete,
      display var(--duration) var(--ease-out) allow-discrete;

    &[open] {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
      }
    }

    &::backdrop {
      background-color: rgb(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition:
        background-color var(--duration) var(--ease-out),
        backdrop-filter var(--duration) var(--ease-out),
        overlay var(--duration) var(--ease-out) allow-discrete,
        display var(--duration) var(--ease-out) allow-discrete;
    }

    &[open]::backdrop {
      background-color: rgb(0 0 0 / 0.4);
      backdrop-filter: blur(4px);
    }

    @starting-style {
      &[open]::backdrop {
        background-color: rgb(0 0 0 / 0);
        backdrop-filter: blur(0px);
      }
    }

    .dialog-header {
      padding: var(--space-6) var(--space-6) 0;
      flex-shrink: 0;

      h2, h3, h4 {
        margin: 0 0 var(--space-1-5);
        font-size: var(--text-lg);
        font-weight: var(--font-semibold);
      }
      p {
        margin: 0;
        font-size: var(--text-sm);
        color: var(--muted-foreground);
        line-height: var(--leading-relaxed);
      }
    }

    .dialog-body {
      flex: 1;
      padding: var(--space-6);
      overflow-y: auto;
    }

    .dialog-footer {
      padding: 0 var(--space-6) var(--space-6);
      display: flex;
      justify-content: flex-end;
      gap: var(--space-2-5);
      flex-shrink: 0;
    }

    &.dialog-sm { width: min(calc(100% - var(--space-8)), 26rem); }
    &.dialog-lg { width: min(calc(100% - var(--space-8)), 52rem); }
    &.dialog-full {
      width: calc(100% - var(--space-8));
      max-height: calc(100% - var(--space-8));
    }
  }

  /* ---- Dropdown ---- */
  oak-dropdown {
    [popover] {
      position: fixed;
      margin: 0;
      padding: var(--space-1-5);
      min-width: 11rem;
      background-color: var(--card);
      color: var(--card-foreground);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);

      opacity: 0;
      transform: translateY(-6px) scale(0.97);
      transition:
        opacity var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out),
        display var(--duration-fast) allow-discrete,
        overlay var(--duration-fast) allow-discrete;

      &:popover-open {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      @starting-style {
        &:popover-open {
          opacity: 0;
          transform: translateY(-6px) scale(0.97);
        }
      }
    }

    [role=menuitem] {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      width: 100%;
      padding: var(--space-2) var(--space-2-5);
      font-size: var(--text-sm);
      text-align: start;
      color: var(--foreground);
      background: none;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background-color var(--transition-fast);

      &:hover, &:focus { background-color: var(--muted); outline: none; }
      &[data-variant=danger] { color: var(--danger); }
      &[data-variant=danger]:hover { background-color: var(--danger-muted); }
    }

    [role=separator] {
      height: 1px;
      background-color: var(--border);
      margin: var(--space-1-5) 0;
    }

    .menu-label {
      padding: var(--space-1-5) var(--space-2-5) var(--space-1);
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
      color: var(--muted-foreground);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
  }

  /* ---- Tooltip ---- */
  [data-tooltip] {
    position: relative;

    &::before, &::after {
      position: absolute;
      inset-inline-start: 50%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: var(--z-dropdown);
      transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
    }

    &::after {
      content: attr(data-tooltip);
      inset-block-end: calc(100% + 8px);
      transform: translateX(-50%) translateY(4px);
      padding: var(--space-1-5) var(--space-3);
      font-size: var(--text-xs);
      line-height: var(--leading-snug);
      font-weight: var(--font-medium);
      white-space: nowrap;
      background: var(--foreground);
      color: var(--background);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      max-width: 15rem;
      white-space: normal;
      text-align: center;
    }

    &::before {
      content: "";
      inset-block-end: calc(100% - 3px);
      transform: translateX(-50%) translateY(4px);
      border: 5px solid transparent;
      border-top-color: var(--foreground);
    }

    &:is(:hover, :focus-visible)::before,
    &:is(:hover, :focus-visible)::after {
      opacity: 1;
      visibility: visible;
      transition-delay: 400ms;
      transform: translateX(-50%) translateY(0);
    }

    /* Placement variants */
    &[data-tooltip-placement=bottom]::after {
      inset-block-end: auto;
      inset-block-start: calc(100% + 8px);
      transform: translateX(-50%) translateY(-4px);
    }
    &[data-tooltip-placement=bottom]::before {
      inset-block-end: auto;
      inset-block-start: calc(100% - 3px);
      border-top-color: transparent;
      border-bottom-color: var(--foreground);
      transform: translateX(-50%) translateY(-4px);
    }
    &[data-tooltip-placement=bottom]:is(:hover, :focus-visible)::after,
    &[data-tooltip-placement=bottom]:is(:hover, :focus-visible)::before {
      transform: translateX(-50%) translateY(0);
    }
  }

  /* ---- Toast ---- */
  .oak-toaster {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
    margin: 0;
    padding: var(--space-4);
    border: none;
    background: transparent;
    overflow: visible;
    z-index: var(--z-toast);

    &::backdrop { display: none; }

    &[data-placement=top-left]     { inset: 0 auto auto 0; }
    &[data-placement=top-center]   { inset: 0 auto auto 50%; transform: translateX(-50%); }
    &[data-placement=top-right]    { inset: 0 0 auto auto; }
    &[data-placement=bottom-left]  { inset: auto auto 0 0; flex-direction: column-reverse; }
    &[data-placement=bottom-center] { inset: auto auto 0 50%; transform: translateX(-50%); flex-direction: column-reverse; }
    &[data-placement=bottom-right] { inset: auto 0 0 auto; flex-direction: column-reverse; }
  }

  .oak-toast {
    --_duration: 280ms;

    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
    max-width: 26rem;
    min-width: 18rem;
    pointer-events: auto;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;

    transition:
      opacity var(--_duration) var(--ease),
      transform var(--_duration) var(--ease-spring),
      max-height var(--_duration) var(--ease),
      margin var(--_duration) var(--ease),
      padding var(--_duration) var(--ease);

    &[data-entering] {
      opacity: 0;
      transform: translateX(100%);
    }

    &[data-exiting] {
      opacity: 0;
      max-height: 0 !important;
      margin: 0;
      padding-block: 0;
      transform: translateX(100%);
    }

    .toast-icon { flex-shrink: 0; display: flex; align-items: center; margin-top: 1px; }
    .toast-body { min-width: 0; }

    .toast-title {
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      line-height: var(--leading-snug);
      margin-block-end: var(--space-0-5);
    }

    .toast-message {
      font-size: var(--text-sm);
      color: var(--muted-foreground);
      line-height: var(--leading-normal);
    }

    .toast-close {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.25rem;
      height: 1.25rem;
      padding: 0;
      background: none;
      border: none;
      border-radius: var(--radius-sm);
      color: var(--muted-foreground);
      cursor: pointer;
      opacity: 0.6;
      font-size: 1rem;
      line-height: 1;
      transition: opacity var(--transition-fast), background-color var(--transition-fast);
      height: auto;

      &:hover { opacity: 1; background-color: var(--muted); }
    }

    &[data-variant=success] .toast-icon { color: var(--success); }
    &[data-variant=warning] .toast-icon { color: var(--warning); }
    &[data-variant=danger]  .toast-icon { color: var(--danger); }
    &[data-variant=info]    .toast-icon { color: var(--info); }
  }

  /* ---- Skeleton ---- */
  [role=status].skeleton {
    --_shine: light-dark(
      color-mix(in srgb, var(--muted) 30%, white),
      color-mix(in srgb, var(--muted) 70%, white)
    );

    background: linear-gradient(90deg, var(--muted) 0%, var(--_shine) 50%, var(--muted) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: oak-skeleton 1.8s ease infinite;
  }

  /* ---- Spinner ---- */
  [aria-busy=true]:not(button) {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1.5rem;
      height: 1.5rem;
      border: 2px solid var(--muted);
      border-top-color: var(--primary);
      border-radius: var(--radius-full);
      animation: oak-spin 0.7s linear infinite;
    }

    > * { opacity: 0.3; pointer-events: none; }
  }

  .spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--muted);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: oak-spin 0.7s linear infinite;

    &.spinner-sm { width: 1rem; height: 1rem; }
    &.spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }

    &.spinner-success { border-top-color: var(--success); }
    &.spinner-danger  { border-top-color: var(--danger); }
  }

  /* ---- Sidebar ---- */
  oak-sidebar {
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 17rem;
      background-color: var(--card);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      z-index: var(--z-drawer);
      transform: translateX(-100%);
      transition: transform var(--transition-slow) var(--ease-spring);

      &[data-open] { transform: translateX(0); }
    }

    .sidebar-backdrop {
      position: fixed;
      inset: 0;
      background-color: rgb(0 0 0 / 0);
      z-index: calc(var(--z-drawer) - 1);
      pointer-events: none;
      transition: background-color var(--transition-slow);

      &[data-open] {
        background-color: rgb(0 0 0 / 0.4);
        pointer-events: auto;
      }
    }

    &[data-mode=push] .sidebar-backdrop { display: none; }
  }

  /* ---- Accordion ---- */
  oak-accordion {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;

    details {
      border-bottom: 1px solid var(--border);

      &:last-child { border-bottom: none; }

      summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-4) var(--space-5);
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        cursor: pointer;
        transition: background-color var(--transition-fast);

        &:hover { background-color: var(--faint); }

        &::after {
          content: "";
          flex-shrink: 0;
          width: 1rem;
          height: 1rem;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-size: contain;
          transition: transform var(--transition);
        }
      }

      &[open] > summary::after {
        transform: rotate(180deg);
      }

      .accordion-body {
        padding: 0 var(--space-5) var(--space-5);
        font-size: var(--text-sm);
        color: var(--muted-foreground);
        line-height: var(--leading-relaxed);
      }
    }
  }

  /* ---- Form field ---- */
  [data-field] {
    margin-block-end: var(--space-5);

    [data-hint] {
      display: block;
      font-size: var(--text-xs);
      color: var(--muted-foreground);
      margin-block-start: var(--space-1-5);
    }

    .field-error {
      display: none;
      font-size: var(--text-xs);
      color: var(--danger);
      margin-block-start: var(--space-1-5);
    }

    &[data-field=error] {
      .field-error { display: block; }
      :where(input, textarea, select) { border-color: var(--danger); }
    }
  }

  /* ---- Input group ---- */
  .input-group {
    display: flex;
    align-items: stretch;

    :where(input, textarea, select) {
      flex: 1;
      margin: 0;
      border-radius: 0;
      position: relative;
      z-index: 0;

      &:focus { z-index: 1; }
      &:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
      &:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
    }

    :where(button, [type=submit], [type=button]) {
      border-radius: 0;
      border: 1px solid var(--border);
      &:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
      &:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
      &:not(:first-child) { border-inline-start: none; }
    }

    .input-addon {
      display: inline-flex;
      align-items: center;
      padding: 0 var(--space-3);
      font-size: var(--text-sm);
      color: var(--muted-foreground);
      background-color: var(--muted);
      border: 1px solid var(--border);
      white-space: nowrap;

      &:first-child {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
        border-inline-end: none;
      }
      &:last-child {
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        border-inline-start: none;
      }

      + :where(input, textarea, select) { border-inline-start: none; }
    }
  }

  /* ---- Button group ---- */
  .btn-group {
    display: inline-flex;

    > :is(button, a.btn, [type=button], [type=submit]) {
      border-radius: 0;
      &:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
      &:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
      &:not(:last-child) { border-inline-end-color: rgb(from var(--primary-foreground) r g b / 0.2); }
    }
  }

  /* ---- Grid ---- */
  .grid {
    display: grid;
    gap: var(--space-4);

    &.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    &.grid-auto  { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
    &.grid-dense { grid-auto-flow: dense; }

    @media (max-width: 640px) {
      &.grid-2, &.grid-3, &.grid-4 { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      &.grid-3, &.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1200px) {
      &.grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    .col-span-2 { grid-column: span 2; }
    .col-span-3 { grid-column: span 3; }
    .col-full   { grid-column: 1 / -1; }
  }

  /* ---- Chip / Tag ---- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);

    &.chip-active {
      background-color: var(--primary-muted);
      border-color: color-mix(in srgb, var(--primary) 40%, transparent);
      color: var(--primary);
    }

    button.chip-remove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      border-radius: var(--radius-full);
      color: currentColor;
      opacity: 0.5;
      cursor: pointer;
      font-size: 0.75rem;
      line-height: 1;
      height: auto;
      transition: opacity var(--transition-fast);

      &:hover { opacity: 1; }
    }
  }

  /* ---- Breadcrumbs ---- */
  nav[aria-label~=breadcrumb] ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);

    li {
      display: flex;
      align-items: center;
      gap: var(--space-1-5);
      margin: 0;
      color: var(--muted-foreground);

      &:last-child { color: var(--foreground); font-weight: var(--font-medium); }
      &:not(:last-child)::after { content: "/"; color: var(--border-strong); }

      a { color: var(--muted-foreground); text-decoration: none; &:hover { color: var(--foreground); } }
    }
  }

  /* ---- Avatar ---- */
  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--primary-muted);
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    overflow: hidden;
    border: 2px solid var(--background);

    img { width: 100%; height: 100%; object-fit: cover; }

    &.avatar-sm  { width: 2rem;   height: 2rem;   font-size: var(--text-xs);  }
    &.avatar-lg  { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg);  }
    &.avatar-xl  { width: 5rem;   height: 5rem;   font-size: var(--text-2xl); }
    &.avatar-sq  { border-radius: var(--radius-lg); }

    &.avatar-success { background-color: var(--success-muted); color: var(--success); }
    &.avatar-warning { background-color: var(--warning-muted); color: var(--warning); }
    &.avatar-danger  { background-color: var(--danger-muted);  color: var(--danger);  }
  }

  .avatar-group {
    display: flex;
    .avatar { margin-inline-start: -0.5rem; }
    .avatar:first-child { margin-inline-start: 0; }
  }

  /* ---- Empty state ---- */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12);
    text-align: center;
    color: var(--muted-foreground);

    .empty-icon { font-size: 3rem; opacity: 0.3; }
    .empty-title {
      font-size: var(--text-lg);
      font-weight: var(--font-semibold);
      color: var(--foreground);
    }
    p { max-width: 28rem; }
  }

  /* ---- Kbd ---- */
  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1em var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background-color: var(--faint);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    color: var(--muted-foreground);
    min-width: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-xs);
  }

  /* ---- Divider ---- */
  .divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: var(--space-4) 0;

    &::before, &::after {
      content: "";
      flex: 1;
      height: 1px;
      background-color: var(--border);
    }
  }

  /* ---- Stat / KPI ---- */
  .stat {
    padding: var(--space-5) var(--space-6);

    .stat-label {
      font-size: var(--text-xs);
      font-weight: var(--font-semibold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      color: var(--muted-foreground);
      margin-block-end: var(--space-1);
    }

    .stat-value {
      font-size: var(--text-3xl);
      font-weight: var(--font-bold);
      letter-spacing: var(--tracking-tight);
      line-height: 1;
      margin-block-end: var(--space-1);
    }

    .stat-desc {
      font-size: var(--text-sm);
      color: var(--muted-foreground);
    }

    .stat-trend {
      display: inline-flex;
      align-items: center;
      gap: var(--space-0-5);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);

      &.trend-up   { color: var(--success); }
      &.trend-down { color: var(--danger); }
    }
  }
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@layer animations {
  @keyframes oak-spin            { to { transform: rotate(360deg); } }
  @keyframes oak-skeleton        { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  @keyframes oak-progress-stripe { from { background-position: 0 0; } to { background-position: 2rem 0; } }
  @keyframes oak-fade-in         { from { opacity: 0; } to { opacity: 1; } }
  @keyframes oak-slide-up        { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes oak-slide-down      { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes oak-scale-in        { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
  @keyframes oak-bounce          {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-25%); }
  }

  .animate-fade-in  { animation: oak-fade-in  var(--duration) var(--ease) forwards; }
  .animate-slide-up { animation: oak-slide-up var(--duration) var(--ease) forwards; }
  .animate-scale-in { animation: oak-scale-in var(--duration) var(--ease) forwards; }
  .animate-bounce   { animation: oak-bounce 1s ease infinite; }
  .animate-spin     { animation: oak-spin   0.7s linear infinite; }
  .animate-pulse    { animation: oak-fade-in 1.5s ease-in-out infinite alternate; }
}


/* ============================================================
   UTILITIES
   ============================================================ */

@layer utilities {
  /* Text */
  .text-xs     { font-size: var(--text-xs); }
  .text-sm     { font-size: var(--text-sm); }
  .text-base   { font-size: var(--text-base); }
  .text-lg     { font-size: var(--text-lg); }
  .text-xl     { font-size: var(--text-xl); }
  .text-2xl    { font-size: var(--text-2xl); }
  .text-3xl    { font-size: var(--text-3xl); }
  .text-4xl    { font-size: var(--text-4xl); }

  .text-left   { text-align: start; }
  .text-center { text-align: center; }
  .text-right  { text-align: end; }

  .font-normal   { font-weight: var(--font-normal); }
  .font-medium   { font-weight: var(--font-medium); }
  .font-semibold { font-weight: var(--font-semibold); }
  .font-bold     { font-weight: var(--font-bold); }
  .font-mono     { font-family: var(--font-mono); }
  .italic        { font-style: italic; }

  .text-muted   { color: var(--muted-foreground); }
  .text-faint   { color: light-dark(#a1a1aa, #6b6b80); }
  .text-primary { color: var(--primary); }
  .text-success { color: var(--success); }
  .text-warning { color: var(--warning); }
  .text-danger  { color: var(--danger); }
  .text-info    { color: var(--info); }

  .truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .leading-tight   { line-height: var(--leading-tight); }
  .leading-snug    { line-height: var(--leading-snug); }
  .leading-normal  { line-height: var(--leading-normal); }
  .leading-relaxed { line-height: var(--leading-relaxed); }

  /* Layout */
  .flex       { display: flex; }
  .flex-col   { flex-direction: column; }
  .flex-row   { flex-direction: row; }
  .flex-wrap  { flex-wrap: wrap; }
  .flex-1     { flex: 1; }
  .flex-none  { flex: none; }
  .inline-flex { display: inline-flex; }
  .grid       { display: grid; }
  .block      { display: block; }
  .inline     { display: inline; }
  .hidden     { display: none; }

  .items-start    { align-items: flex-start; }
  .items-center   { align-items: center; }
  .items-end      { align-items: flex-end; }
  .items-stretch  { align-items: stretch; }
  .justify-start  { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end    { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  .self-start  { align-self: flex-start; }
  .self-center { align-self: center; }
  .self-end    { align-self: flex-end; }

  .hstack { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .vstack { display: flex; flex-direction: column; gap: var(--space-3); }

  .gap-0   { gap: 0; }
  .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); }
  .gap-8   { gap: var(--space-8); }

  /* Spacing */
  .m-0   { margin: 0; }
  .m-auto { margin: auto; }
  .mx-auto { margin-inline: auto; }
  .mt-0  { margin-block-start: 0; }
  .mt-1  { margin-block-start: var(--space-1); }
  .mt-2  { margin-block-start: var(--space-2); }
  .mt-3  { margin-block-start: var(--space-3); }
  .mt-4  { margin-block-start: var(--space-4); }
  .mt-5  { margin-block-start: var(--space-5); }
  .mt-6  { margin-block-start: var(--space-6); }
  .mt-8  { margin-block-start: var(--space-8); }
  .mt-10 { margin-block-start: var(--space-10); }
  .mb-0  { margin-block-end: 0; }
  .mb-1  { margin-block-end: var(--space-1); }
  .mb-2  { margin-block-end: var(--space-2); }
  .mb-3  { margin-block-end: var(--space-3); }
  .mb-4  { margin-block-end: var(--space-4); }
  .mb-5  { margin-block-end: var(--space-5); }
  .mb-6  { margin-block-end: var(--space-6); }
  .mb-8  { margin-block-end: var(--space-8); }
  .ms-auto { margin-inline-start: auto; }
  .me-auto { margin-inline-end: auto; }

  .p-0  { padding: 0; }
  .p-2  { padding: var(--space-2); }
  .p-3  { padding: var(--space-3); }
  .p-4  { padding: var(--space-4); }
  .p-5  { padding: var(--space-5); }
  .p-6  { padding: var(--space-6); }
  .p-8  { padding: var(--space-8); }
  .px-2 { padding-inline: var(--space-2); }
  .px-3 { padding-inline: var(--space-3); }
  .px-4 { padding-inline: var(--space-4); }
  .px-6 { padding-inline: var(--space-6); }
  .py-2 { padding-block: var(--space-2); }
  .py-3 { padding-block: var(--space-3); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }

  /* Sizing */
  .w-full  { width: 100%; }
  .w-auto  { width: auto; }
  .h-full  { height: 100%; }
  .h-auto  { height: auto; }
  .min-w-0 { min-width: 0; }
  .max-w-sm { max-width: 24rem; }
  .max-w-md { max-width: 32rem; }
  .max-w-lg { max-width: 48rem; }
  .max-w-xl { max-width: 64rem; }

  /* Borders */
  .rounded    { border-radius: var(--radius-md); }
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-full { border-radius: var(--radius-full); }

  .border     { border: 1px solid var(--border); }
  .border-0   { border: none; }
  .border-t   { border-top: 1px solid var(--border); }
  .border-b   { border-bottom: 1px solid var(--border); }

  /* Colors / backgrounds */
  .bg-muted    { background-color: var(--muted); }
  .bg-card     { background-color: var(--card); }
  .bg-overlay  { background-color: var(--overlay); }
  .bg-primary  { background-color: var(--primary); color: var(--primary-foreground); }
  .bg-success  { background-color: var(--success); color: var(--success-foreground); }
  .bg-warning  { background-color: var(--warning); color: var(--warning-foreground); }
  .bg-danger   { background-color: var(--danger);  color: var(--danger-foreground); }
  .bg-info     { background-color: var(--info);    color: var(--info-foreground); }

  /* Shadow */
  .shadow-xs { box-shadow: var(--shadow-xs); }
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-xl { box-shadow: var(--shadow-xl); }

  /* Position */
  .relative  { position: relative; }
  .absolute  { position: absolute; }
  .fixed     { position: fixed; }
  .sticky    { position: sticky; top: 0; }
  .inset-0   { inset: 0; }

  /* Overflow */
  .overflow-hidden { overflow: hidden; }
  .overflow-auto   { overflow: auto; }
  .overflow-x-auto { overflow-x: auto; }

  /* Opacity */
  .opacity-0   { opacity: 0; }
  .opacity-50  { opacity: 0.5; }
  .opacity-75  { opacity: 0.75; }
  .opacity-100 { opacity: 1; }

  /* Pointer / interaction */
  .cursor-pointer { cursor: pointer; }
  .cursor-not-allowed { cursor: not-allowed; }
  .select-none { user-select: none; }

  /* Lists */
  ul.unstyled, ol.unstyled {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
  }

  /* Visually hidden for a11y */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Container */
  .container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .container-sm { max-width: 48rem; }
  .container-md { max-width: 64rem; }
  .container-lg { max-width: 80rem; }
  .container-xl { max-width: 96rem; }

  /* Ring */
  .ring {
    box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.2);
  }
}