/*
 * Budżet Domowy - "Ciepły Dom" Design System
 * A warm, friendly, home-like aesthetic
 * Mobile-first, OKLCH colors, modern browsers only
 *
 * Design Direction: Cozy, handcrafted feel like warm bread and afternoon light
 * Typography: Nunito (display) + Source Sans 3 (body)
 * Palette: Cream canvas, terracotta accents, sage success, soft amber highlights
 */

@layer reset, base, components, modules, utilities;

/* ══════════════════════════════════════════════════════════════════════════════
 * CUSTOM FONTS
 * ══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════════════
 * GLOBAL DESIGN TOKENS (no layer - always available)
 * Ciepły Dom - Warm Home Palette
 * ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Spacing Scale ─── */
  --space-2xs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */

  /* ─── Warm Canvas Colors ─── */
  /* Cream/Ivory base - like aged paper */
  --color-canvas: oklch(0.97 0.01 85);          /* Warm off-white */
  --color-canvas-subtle: oklch(0.99 0.005 85);  /* Nearly white with warmth */
  --color-canvas-muted: oklch(0.94 0.015 85);   /* Soft cream */
  --color-canvas-emphasis: oklch(0.91 0.02 85); /* Deeper cream */

  /* ─── Semantic Colors (OKLCH - Warm tones) ─── */

  /* Terracotta - Primary accent (warmth, action) */
  --color-primary: oklch(0.62 0.14 45);         /* Warm terracotta */
  --color-primary-soft: oklch(0.94 0.04 45);    /* Light terracotta wash */
  --color-primary-hover: oklch(0.55 0.16 45);   /* Deeper terracotta */
  --color-primary-muted: oklch(0.75 0.08 45);   /* Muted terracotta */

  /* Sage Green - Positive, Success, Income */
  --color-positive: oklch(0.58 0.12 155);       /* Earthy sage green */
  --color-positive-soft: oklch(0.94 0.04 155);  /* Light sage wash */
  --color-positive-hover: oklch(0.52 0.14 155); /* Deeper sage */
  --color-positive-muted: oklch(0.72 0.06 155); /* Muted sage */

  /* Burnt Sienna - Negative, Expenses, Errors */
  --color-negative: oklch(0.55 0.15 30);        /* Warm burnt sienna */
  --color-negative-soft: oklch(0.95 0.03 30);   /* Light sienna wash */
  --color-negative-hover: oklch(0.48 0.17 30);  /* Deeper sienna */
  --color-negative-muted: oklch(0.70 0.08 30);  /* Muted sienna */

  /* Amber - Warning, Highlights */
  --color-warning: oklch(0.78 0.14 75);         /* Warm amber */
  --color-warning-soft: oklch(0.96 0.04 75);    /* Light amber wash */
  --color-warning-hover: oklch(0.72 0.16 75);   /* Deeper amber */

  /* Dusty Blue - Links, Secondary actions (warm blue) */
  --color-link: oklch(0.55 0.10 240);           /* Dusty warm blue */
  --color-link-hover: oklch(0.48 0.12 240);     /* Deeper blue */
  --color-link-soft: oklch(0.94 0.03 240);      /* Light blue wash */

  /* ─── Warm Neutral Palette ─── */
  /* These have a slight warm tint */
  --color-neutral-0: oklch(1 0.005 85);         /* Warmest white */
  --color-neutral-50: oklch(0.98 0.008 85);     /* Near white */
  --color-neutral-100: oklch(0.96 0.01 85);     /* Very light */
  --color-neutral-150: oklch(0.93 0.012 85);    /* Light */
  --color-neutral-200: oklch(0.90 0.015 85);    /* Borders light */
  --color-neutral-300: oklch(0.84 0.018 75);    /* Borders */
  --color-neutral-400: oklch(0.72 0.02 70);     /* Placeholder */
  --color-neutral-500: oklch(0.60 0.025 65);    /* Secondary text */
  --color-neutral-600: oklch(0.50 0.03 60);     /* Medium */
  --color-neutral-700: oklch(0.40 0.025 55);    /* Dark */
  --color-neutral-800: oklch(0.28 0.02 50);     /* Text */
  --color-neutral-900: oklch(0.18 0.015 45);    /* Near black - warm */

  /* ─── Typography ─── */
  --font-family-display: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 2rem;       /* 32px */
  --font-size-4xl: 2.5rem;     /* 40px */

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

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;

  /* ─── Border & Radius (More rounded = friendlier) ─── */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-color: var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);

  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.625rem;   /* 10px */
  --radius-lg: 0.875rem;   /* 14px */
  --radius-xl: 1.25rem;    /* 20px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ─── Shadows (Warm, soft, layered) ─── */
  --shadow-color: 45 30% 20%;
  --shadow-xs: 0 1px 2px oklch(0.25 0.02 45 / 0.06);
  --shadow-sm:
    0 1px 3px oklch(0.25 0.02 45 / 0.08),
    0 1px 2px oklch(0.25 0.02 45 / 0.04);
  --shadow-md:
    0 4px 6px oklch(0.25 0.02 45 / 0.07),
    0 2px 4px oklch(0.25 0.02 45 / 0.05);
  --shadow-lg:
    0 10px 20px oklch(0.25 0.02 45 / 0.08),
    0 4px 8px oklch(0.25 0.02 45 / 0.04);
  --shadow-xl:
    0 20px 40px oklch(0.25 0.02 45 / 0.1),
    0 8px 16px oklch(0.25 0.02 45 / 0.05);

  /* Colored shadows for cards */
  --shadow-primary: 0 4px 14px oklch(0.62 0.14 45 / 0.25);
  --shadow-positive: 0 4px 14px oklch(0.58 0.12 155 / 0.2);
  --shadow-negative: 0 4px 14px oklch(0.55 0.15 30 / 0.2);

  /* ─── Transitions (Smooth, organic) ─── */
  --ease-out-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast: 150ms var(--ease-out-soft);
  --transition-normal: 250ms var(--ease-out-soft);
  --transition-slow: 400ms var(--ease-out-soft);
  --transition-bounce: 500ms var(--ease-out-back);

  /* ─── Layout ─── */
  --nav-height: 4rem;           /* 64px - taller for breathing room */
  --container-max: 34rem;       /* 544px */
  --container-wide: 52rem;      /* 832px */
  --touch-target-min: 44px;

  /* ─── Z-Index Scale ─── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ─── Decorative ─── */
  --gradient-warm: linear-gradient(135deg,
    oklch(0.97 0.015 85) 0%,
    oklch(0.95 0.02 75) 100%);
  --gradient-card: linear-gradient(180deg,
    oklch(1 0.005 85) 0%,
    oklch(0.98 0.01 85) 100%);
  --gradient-primary: linear-gradient(135deg,
    oklch(0.65 0.14 45) 0%,
    oklch(0.58 0.16 40) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════════
 * RESET LAYER
 * ══════════════════════════════════════════════════════════════════════════════ */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-feature-settings: "kern" 1, "liga" 1;
    font-variation-settings: normal;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
  }

  small {
    font-size: 85%;
  }

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

  sub { bottom: -0.25em; }
  sup { top: -0.5em; }

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

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }

  button,
  select {
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  :-moz-focusring {
    outline: auto;
  }

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

  progress {
    vertical-align: baseline;
  }

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

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

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

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  summary {
    display: list-item;
  }

  blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
    margin: 0;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

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

  dialog {
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    opacity: 1;
    color: var(--color-neutral-400);
  }

  button,
  [role="button"] {
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

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

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

  [hidden] {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * BASE LAYER
 * ══════════════════════════════════════════════════════════════════════════════ */

@layer base {
  /* ─── Document ─── */
  html {
    font-size: 16px;
  }

  body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-800);
    background: var(--gradient-warm);
    background-attachment: fixed;
    min-height: 100dvh;
  }

  /* ─── Typography ─── */
  h1, h2, h3, h4 {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
  }

  h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
  }

  h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
  }

  p {
    margin-bottom: var(--space-md);
    line-height: var(--line-height-relaxed);
  }

  p:last-child {
    margin-bottom: 0;
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-primary-hover);
  }

  a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  strong {
    font-weight: var(--font-weight-semibold);
  }

  small {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
  }

  ::selection {
    background-color: var(--color-primary-soft);
    color: var(--color-neutral-900);
  }

  /* ─── Focus States ─── */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* ─── Forms ─── */
  .form-group {
    margin-bottom: var(--space-lg);
  }

  .form-group:last-child {
    margin-bottom: 0;
  }

  .form-label {
    display: block;
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    margin-bottom: var(--space-sm);
    letter-spacing: var(--letter-spacing-wide);
  }

  .form-label--required::after {
    content: " *";
    color: var(--color-negative);
  }

  .form-input,
  .form-select,
  .form-textarea {
    display: block;
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-800);
    background-color: var(--color-neutral-0);
    border: var(--border-width-thick) solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      background-color var(--transition-fast);
    appearance: none;
    /* Prevent iOS zoom on focus */
    touch-action: manipulation;
  }

  /* Ensure minimum 16px font-size on iOS to prevent auto-zoom */
  @supports (-webkit-touch-callout: none) {
    .form-input,
    .form-select,
    .form-textarea {
      font-size: max(16px, var(--font-size-base));
    }
  }

  .form-input:hover,
  .form-select:hover,
  .form-textarea:hover {
    border-color: var(--color-neutral-300);
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow:
      var(--shadow-xs),
      0 0 0 3px var(--color-primary-soft);
  }

  .form-input:disabled,
  .form-select:disabled,
  .form-textarea:disabled {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-neutral-400);
  }

  .form-input--error,
  .form-select--error {
    border-color: var(--color-negative);
    background-color: var(--color-negative-soft);
  }

  .form-input--error:focus,
  .form-select--error:focus {
    border-color: var(--color-negative);
    box-shadow:
      var(--shadow-xs),
      0 0 0 3px var(--color-negative-soft);
  }

  .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238a7968' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-sm) center;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    padding-right: 2.75rem;
  }

  .form-textarea {
    min-height: 6.5rem;
    resize: vertical;
    line-height: var(--line-height-relaxed);
  }

  .form-error {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-negative);
    margin-top: var(--space-xs);
    font-weight: var(--font-weight-medium);
  }

  .form-error::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-negative);
    color: white;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .form-hint {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin-top: var(--space-xs);
  }

  .form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--color-neutral-200);
  }

  @media (min-width: 480px) {
    .form-actions {
      flex-direction: row;
      justify-content: flex-end;
    }
  }

  /* ─── Toggle Group (Transaction Type Selector) ─── */
  .toggle-group {
    display: flex;
    gap: 0;
    padding: var(--space-2xs);
    background-color: var(--color-canvas-muted);
    border-radius: var(--radius-xl);
    position: relative;
  }

  .toggle-group__option {
    flex: 1;
    position: relative;
    z-index: 1;
  }

  .toggle-group__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .toggle-group__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--touch-target-min) - var(--space-xs));
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    background-color: transparent;
    border-radius: calc(var(--radius-xl) - var(--space-2xs));
    cursor: pointer;
    transition:
      background-color var(--transition-normal),
      color var(--transition-normal),
      box-shadow var(--transition-normal),
      transform var(--transition-fast);
    user-select: none;
  }

  .toggle-group__label:hover {
    color: var(--color-neutral-700);
  }

  .toggle-group__input:checked + .toggle-group__label {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-800);
    box-shadow: var(--shadow-md);
  }

  .toggle-group__input:focus-visible + .toggle-group__label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Transaction type specific colors */
  .toggle-group--transaction .toggle-group__input[value="expense"]:checked + .toggle-group__label {
    color: var(--color-negative);
    background: linear-gradient(135deg, var(--color-neutral-0) 0%, var(--color-negative-soft) 100%);
  }

  .toggle-group--transaction .toggle-group__input[value="income"]:checked + .toggle-group__label {
    color: var(--color-positive);
    background: linear-gradient(135deg, var(--color-neutral-0) 0%, var(--color-positive-soft) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * COMPONENTS LAYER
 * ══════════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ─── Button ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-wide);
    border: var(--border-width-thick) solid transparent;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
    user-select: none;
    position: relative;
    overflow: hidden;
  }

  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      oklch(1 0 0 / 0.15) 0%,
      oklch(0 0 0 / 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .btn:hover::before {
    opacity: 1;
  }

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

  .btn:active {
    transform: scale(0.97);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  .btn:disabled::before {
    display: none;
  }

  /* Primary - Terracotta */
  .btn--primary {
    color: white;
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm), var(--shadow-primary);
  }

  .btn--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md), var(--shadow-primary);
  }

  /* Secondary - Outlined */
  .btn--secondary {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-0);
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-sm);
  }

  .btn--secondary:hover:not(:disabled) {
    background-color: var(--color-canvas-muted);
    border-color: var(--color-neutral-400);
  }

  /* Ghost - Subtle */
  .btn--ghost {
    color: var(--color-neutral-600);
    background-color: transparent;
    border-color: transparent;
  }

  .btn--ghost:hover:not(:disabled) {
    background-color: var(--color-canvas-muted);
    color: var(--color-neutral-800);
  }

  /* Danger - Burnt Sienna */
  .btn--danger {
    color: white;
    background-color: var(--color-negative);
    border-color: var(--color-negative);
    box-shadow: var(--shadow-sm), var(--shadow-negative);
  }

  .btn--danger:hover:not(:disabled) {
    background-color: var(--color-negative-hover);
    border-color: var(--color-negative-hover);
  }

  /* Positive - Sage */
  .btn--positive {
    color: white;
    background-color: var(--color-positive);
    border-color: var(--color-positive);
    box-shadow: var(--shadow-sm), var(--shadow-positive);
  }

  .btn--positive:hover:not(:disabled) {
    background-color: var(--color-positive-hover);
    border-color: var(--color-positive-hover);
  }

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

  .btn--sm {
    min-height: 2.25rem;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-lg);
  }

  .btn--lg {
    min-height: 3.25rem;
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--font-size-base);
  }

  .btn__icon {
    display: inline-flex;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .btn--icon-only {
    width: var(--touch-target-min);
    padding: 0;
  }

  /* ─── Card ─── */
  .card {
    background: var(--gradient-card);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition:
      box-shadow var(--transition-normal),
      transform var(--transition-normal);
  }

  .card:hover {
    box-shadow: var(--shadow-lg);
  }

  .card--interactive:hover {
    transform: translateY(-2px);
  }

  .card__header {
    padding: var(--space-lg) var(--space-xl);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    background-color: var(--color-canvas-subtle);
  }

  .card__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
  }

  .card__body {
    padding: var(--space-xl);
  }

  .card__footer {
    padding: var(--space-lg) var(--space-xl);
    border-top: var(--border-width) solid var(--color-neutral-200);
    background-color: var(--color-canvas-subtle);
  }

  /* ─── Stat Card ─── */
  .stat-card {
    padding: var(--space-lg) var(--space-xl);
    background: var(--gradient-card);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition:
      transform var(--transition-normal),
      box-shadow var(--transition-normal);
  }

  .stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-neutral-300);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  }

  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .stat-card__label {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-sm);
  }

  .stat-card__value {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-800);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  @media (min-width: 480px) {
    .stat-card__value {
      font-size: var(--font-size-3xl);
    }
  }

  /* Positive stat - Sage green */
  .stat-card--positive {
    border-color: oklch(0.58 0.12 155 / 0.3);
    background: linear-gradient(135deg,
      var(--color-neutral-0) 0%,
      var(--color-positive-soft) 100%);
  }

  .stat-card--positive::before {
    background: linear-gradient(90deg,
      var(--color-positive) 0%,
      var(--color-positive-muted) 100%);
  }

  .stat-card--positive .stat-card__value {
    color: var(--color-positive);
  }

  .stat-card--positive:hover {
    box-shadow: var(--shadow-md), var(--shadow-positive);
  }

  /* Negative stat - Burnt sienna */
  .stat-card--negative {
    border-color: oklch(0.55 0.15 30 / 0.3);
    background: linear-gradient(135deg,
      var(--color-neutral-0) 0%,
      var(--color-negative-soft) 100%);
  }

  .stat-card--negative::before {
    background: linear-gradient(90deg,
      var(--color-negative) 0%,
      var(--color-negative-muted) 100%);
  }

  .stat-card--negative .stat-card__value {
    color: var(--color-negative);
  }

  .stat-card--negative:hover {
    box-shadow: var(--shadow-md), var(--shadow-negative);
  }

  /* ─── Flash Messages ─── */
  .flash-container {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-md));
    left: var(--space-md);
    right: var(--space-md);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    pointer-events: none;
  }

  @media (min-width: 480px) {
    .flash-container {
      left: auto;
      max-width: 26rem;
    }
  }

  .flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-neutral-0);
    border: var(--border-width-thick) solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: flash-slide-in 400ms var(--ease-out-back);
  }

  @keyframes flash-slide-in {
    from {
      opacity: 0;
      transform: translateY(-1.5rem) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .flash--notice {
    border-color: var(--color-positive);
    background: linear-gradient(135deg,
      var(--color-neutral-0) 0%,
      var(--color-positive-soft) 100%);
  }

  .flash--alert {
    border-color: var(--color-negative);
    background: linear-gradient(135deg,
      var(--color-neutral-0) 0%,
      var(--color-negative-soft) 100%);
  }

  .flash--warning {
    border-color: var(--color-warning);
    background: linear-gradient(135deg,
      var(--color-neutral-0) 0%,
      var(--color-warning-soft) 100%);
  }

  .flash__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.125rem;
  }

  .flash--notice .flash__icon { color: var(--color-positive); }
  .flash--alert .flash__icon { color: var(--color-negative); }
  .flash--warning .flash__icon { color: var(--color-warning); }

  .flash__message {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-800);
    line-height: var(--line-height-normal);
  }

  .flash__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--color-neutral-400);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .flash__close:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-canvas-muted);
  }

  .flash__close-icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .flash--dismissing {
    animation: flash-slide-out 200ms var(--ease-out-soft) forwards;
  }

  @keyframes flash-slide-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(-0.75rem) scale(0.95);
    }
  }

  /* ─── Navigation ─── */
  .nav {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    height: var(--nav-height);
    padding: 0 var(--space-lg);
    background-color: var(--color-neutral-0);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 480px) {
    .nav {
      padding: 0 var(--space-xl);
    }
  }

  .nav__brand {
    position: relative;
  }

  .nav__brand-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-primary);
    background-color: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    letter-spacing: var(--letter-spacing-tight);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .nav__brand-trigger:hover {
    background-color: var(--color-primary-soft);
  }

  .nav__brand-trigger[aria-expanded="true"] {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-hover);
  }

  .nav__brand-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .nav__brand-text {
    display: inline;
  }

  .nav__brand-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform var(--transition-normal);
  }

  .nav__brand-trigger[aria-expanded="true"] .nav__brand-chevron {
    transform: rotate(180deg);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  @media (min-width: 480px) {
    .nav__actions {
      gap: var(--space-md);
    }
  }

  .nav__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: white;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm), var(--shadow-primary);
    transition:
      transform var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .nav__add-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md), var(--shadow-primary);
  }

  .nav__add-btn:active {
    transform: scale(0.95);
  }

  /* ─── Navigation Modal (Fizzy-style) ─── */
  .nav-modal {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: var(--z-dropdown);
    min-width: 16rem;
    margin-top: var(--space-sm);
    background-color: var(--color-neutral-0);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-0.5rem);
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
  }

  .nav-modal--open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav-modal__content {
    padding: var(--space-md);
  }

  .nav-modal__section {
    margin-bottom: var(--space-md);
  }

  .nav-modal__section:last-child {
    margin-bottom: 0;
  }

  .nav-modal__section-title {
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-400);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
  }

  .nav-modal__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .nav-modal__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .nav-modal__link:hover {
    background-color: var(--color-canvas-muted);
    color: var(--color-neutral-900);
  }

  .nav-modal__link--active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  .nav-modal__link--active:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-hover);
  }

  .nav-modal__link--danger {
    color: var(--color-negative);
  }

  .nav-modal__link--danger:hover {
    background-color: var(--color-negative-soft);
    color: var(--color-negative-hover);
  }

  .nav-modal__link svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .nav-modal__link--active svg {
    opacity: 1;
  }

  .nav-modal__divider {
    height: 0;
    margin: var(--space-sm) 0;
    border-top: var(--border-width) solid var(--color-neutral-200);
  }

  .nav-modal__user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
  }

  .nav-modal__user svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .nav-modal__role {
    margin-left: auto;
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    background-color: var(--color-canvas-muted);
    border-radius: var(--radius-md);
  }

  /* ─── Dropdown ─── */
  .dropdown {
    position: relative;
  }

  .dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-neutral-600);
    background-color: var(--color-canvas-subtle);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);
  }

  .dropdown__trigger:hover {
    background-color: var(--color-canvas-muted);
    border-color: var(--color-neutral-300);
    color: var(--color-neutral-800);
  }

  .dropdown__trigger[aria-expanded="true"] {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .dropdown__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 14rem;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background-color: var(--color-neutral-0);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem) scale(0.95);
    transform-origin: top right;
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
  }

  .dropdown__menu--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .dropdown__item:hover {
    background-color: var(--color-canvas-muted);
    text-decoration: none;
  }

  .dropdown__item--danger {
    color: var(--color-negative);
  }

  .dropdown__item--danger:hover {
    background-color: var(--color-negative-soft);
  }

  .dropdown__item svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.7;
  }

  .dropdown__divider {
    height: 0;
    margin: var(--space-sm) 0;
    border-top: var(--border-width) solid var(--color-neutral-200);
  }

  /* ─── Category Picker ─── */
  .category-picker {
    position: relative;
  }

  .category-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-800);
    background-color: var(--color-neutral-0);
    border: var(--border-width-thick) solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
    text-align: left;
  }

  .category-picker__trigger:hover {
    border-color: var(--color-neutral-300);
  }

  .category-picker__trigger:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--color-primary-soft);
  }

  .category-picker__trigger[aria-expanded="true"] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-xs), 0 0 0 3px var(--color-primary-soft);
  }

  .category-picker__trigger--error {
    border-color: var(--color-negative);
    background-color: var(--color-negative-soft);
  }

  .category-picker__display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-picker__display--placeholder {
    color: var(--color-neutral-400);
  }

  .category-picker__chevron {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-neutral-400);
    transition: transform var(--transition-normal);
  }

  .category-picker__trigger[aria-expanded="true"] .category-picker__chevron {
    transform: rotate(180deg);
  }

  /* Desktop Dropdown */
  .category-picker__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    margin-top: var(--space-sm);
    background-color: var(--color-neutral-0);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);
    max-height: 22rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .category-picker__dropdown--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .category-picker__search {
    padding: var(--space-sm);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .category-picker__search-input {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    background-color: var(--color-canvas-muted);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-lg);
    transition:
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .category-picker__search-input:focus {
    outline: none;
    background-color: var(--color-neutral-0);
    border-color: var(--color-primary);
  }

  .category-picker__list {
    overflow-y: auto;
    flex: 1;
    padding: var(--space-sm);
  }

  .category-picker__item {
    display: block;
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .category-picker__item:hover {
    background-color: var(--color-canvas-muted);
  }

  .category-picker__item--selected {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  .category-picker__item--selected:hover {
    background-color: var(--color-primary-soft);
  }

  .category-picker__empty {
    padding: var(--space-xl);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
  }

  /* Mobile Fullscreen Modal */
  .category-picker__mobile {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background-color: var(--color-neutral-0);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition:
      opacity var(--transition-slow),
      visibility var(--transition-slow),
      transform var(--transition-slow);
  }

  .category-picker__mobile--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .category-picker__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    flex-shrink: 0;
  }

  .category-picker__mobile-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
  }

  .category-picker__mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    color: var(--color-neutral-600);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .category-picker__mobile-close:hover {
    background-color: var(--color-canvas-muted);
    color: var(--color-neutral-800);
  }

  .category-picker__mobile-close svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .category-picker__mobile-search {
    padding: var(--space-md);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    flex-shrink: 0;
  }

  .category-picker__mobile-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
    -webkit-overflow-scrolling: touch;
  }

  @media (min-width: 640px) {
    .category-picker__mobile {
      display: none;
    }
  }

  @media (max-width: 639px) {
    .category-picker__dropdown {
      display: none;
    }
  }

  /* ─── Modal ─── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    background-color: oklch(0.2 0.02 45 / 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-normal),
      visibility var(--transition-normal);
  }

  .modal-backdrop--open {
    opacity: 1;
    visibility: visible;
  }

  .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-normal),
      visibility var(--transition-normal);
  }

  @media (min-width: 480px) {
    .modal {
      align-items: center;
    }
  }

  .modal--open {
    opacity: 1;
    visibility: visible;
  }

  .modal__dialog {
    position: relative;
    width: 100%;
    max-width: 26rem;
    max-height: 85dvh;
    background-color: var(--color-neutral-0);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: translateY(1rem);
    transition: transform var(--transition-normal);
  }

  @media (min-width: 480px) {
    .modal__dialog {
      transform: scale(0.95);
    }
  }

  .modal--open .modal__dialog {
    transform: translateY(0);
  }

  @media (min-width: 480px) {
    .modal--open .modal__dialog {
      transform: scale(1);
    }
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .modal__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
  }

  .modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--color-neutral-500);
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
  }

  .modal__close:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-canvas-muted);
  }

  .modal__close-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .modal__body {
    padding: var(--space-xl);
    overflow-y: auto;
    max-height: calc(85dvh - 5rem - 5rem);
  }

  .modal__footer {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-xl);
    border-top: var(--border-width) solid var(--color-neutral-200);
    background-color: var(--color-canvas-subtle);
  }

  .modal__footer--stacked {
    flex-direction: column;
  }

  .modal__footer--stacked .btn {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * MODULES LAYER
 * ══════════════════════════════════════════════════════════════════════════════ */

@layer modules {
  /* ─── Auth Module ─── */
  .auth {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--gradient-warm);
    position: relative;
    overflow: hidden;
  }

  /* Decorative background elements */
  .auth::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(ellipse,
      oklch(0.62 0.14 45 / 0.08) 0%,
      transparent 70%);
    pointer-events: none;
  }

  .auth::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 60%;
    height: 70%;
    background: radial-gradient(ellipse,
      oklch(0.58 0.12 155 / 0.06) 0%,
      transparent 70%);
    pointer-events: none;
  }

  .auth__container {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    position: relative;
    z-index: 1;
  }

  .auth__card {
    width: 100%;
    max-width: 26rem;
    padding: var(--space-2xl);
    background: var(--gradient-card);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
  }

  .auth__header {
    text-align: center;
    margin-bottom: var(--space-2xl);
  }

  .auth__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-lg);
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg), var(--shadow-primary);
    animation: auth-logo-pulse 3s ease-in-out infinite;
  }

  @keyframes auth-logo-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: var(--shadow-lg), var(--shadow-primary);
    }
    50% {
      transform: scale(1.02);
      box-shadow: var(--shadow-xl), 0 6px 20px oklch(0.62 0.14 45 / 0.35);
    }
  }

  .auth__logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: white;
  }

  .auth__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    margin-bottom: var(--space-xs);
    letter-spacing: var(--letter-spacing-tight);
  }

  .auth__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-neutral-500);
    line-height: var(--line-height-relaxed);
  }

  .auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .auth__footer {
    padding: var(--space-xl);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    position: relative;
    z-index: 1;
  }

  .auth__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-xl);
    color: white;
    background: linear-gradient(135deg,
      var(--color-positive) 0%,
      var(--color-positive-hover) 100%);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg), var(--shadow-positive);
    animation: success-pop 600ms var(--ease-out-back);
  }

  @keyframes success-pop {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .auth__success-icon svg {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* ─── Dashboard Module ─── */
  .dashboard {
    padding: var(--space-lg);
    max-width: var(--container-wide);
    margin: 0 auto;
  }

  @media (min-width: 480px) {
    .dashboard {
      padding: var(--space-xl) var(--space-lg);
    }
  }

  .dashboard__header {
    margin-bottom: var(--space-xl);
    text-align: center;
  }

  @media (min-width: 480px) {
    .dashboard__header {
      text-align: left;
    }
  }

  .dashboard__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-xs);
  }

  .dashboard__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-neutral-500);
    font-weight: var(--font-weight-medium);
  }

  /* Month Navigation */
  .month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
  }

  .month-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .month-nav__btn:hover:not(.month-nav__btn--disabled) {
    background: var(--color-neutral-200);
    color: var(--color-neutral-900);
  }

  .month-nav__btn--disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .month-nav__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    min-width: 150px;
    text-align: center;
  }

  .dashboard__stats {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }

  @media (min-width: 480px) {
    .dashboard__stats {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-lg);
    }
  }

  .dashboard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-2xl);
  }

  @media (min-width: 480px) {
    .dashboard__actions {
      justify-content: flex-start;
    }
  }

  .dashboard__section {
    margin-bottom: var(--space-2xl);
  }

  .dashboard__section:last-child {
    margin-bottom: 0;
  }

  .dashboard__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
  }

  .dashboard__section-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* ─── Transactions Module ─── */
  .transactions {
    padding: var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .transactions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
  }

  .transactions__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* ─── Search Box - "Ciepły Dom" Card Style ─── */
  .search-box {
    margin-bottom: var(--space-lg);
  }

  .search-box__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,
      oklch(0.98 0.012 55) 0%,
      oklch(0.96 0.018 60) 100%);
    border: 2px solid oklch(0.88 0.04 55);
    border-radius: var(--radius-xl);
    box-shadow:
      0 2px 8px oklch(0.70 0.08 55 / 0.10),
      0 1px 3px oklch(0 0 0 / 0.04),
      inset 0 1px 2px oklch(1 0 0 / 0.5);
    transition:
      background 250ms ease-out,
      border-color 250ms ease-out,
      box-shadow 250ms ease-out,
      transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .search-box__input-wrapper:hover {
    background: linear-gradient(135deg,
      oklch(0.97 0.015 55) 0%,
      oklch(0.95 0.022 60) 100%);
    border-color: oklch(0.82 0.06 55);
    box-shadow:
      0 4px 12px oklch(0.70 0.08 55 / 0.14),
      0 2px 4px oklch(0 0 0 / 0.06),
      inset 0 1px 2px oklch(1 0 0 / 0.5);
  }

  .search-box__input-wrapper:focus-within {
    background: white;
    border-color: oklch(0.65 0.14 45);
    box-shadow:
      0 4px 16px oklch(0.65 0.14 45 / 0.18),
      0 2px 6px oklch(0 0 0 / 0.06),
      0 0 0 4px oklch(0.85 0.08 55 / 0.15);
    transform: translateY(-1px);
  }

  .search-box__icon {
    position: absolute;
    left: var(--space-md);
    color: oklch(0.60 0.10 55);
    pointer-events: none;
    flex-shrink: 0;
    transition:
      color 200ms ease-out,
      transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .search-box__input-wrapper:focus-within .search-box__icon {
    color: oklch(0.55 0.14 45);
    transform: scale(1.1);
  }

  .search-box--searching .search-box__icon {
    animation: search-pulse 800ms ease-in-out infinite;
  }

  @keyframes search-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.8; }
  }

  .search-box__input {
    width: 100%;
    min-height: var(--touch-target-comfortable);
    padding: var(--space-md) var(--space-lg);
    padding-left: calc(var(--space-md) + 24px + var(--space-sm));
    padding-right: calc(var(--space-md) + 2.5rem);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-neutral-800);
    background: transparent;
    border: none;
    outline: none;
  }

  .search-box__input::placeholder {
    color: oklch(0.65 0.04 55);
    font-weight: var(--font-weight-regular);
  }

  .search-box__input:focus::placeholder {
    color: oklch(0.72 0.02 55);
  }

  .search-box__clear {
    position: absolute;
    right: var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: oklch(0.55 0.06 55);
    background: oklch(0.94 0.02 55);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition:
      opacity 200ms ease-out,
      transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
      background-color 150ms ease-out,
      color 150ms ease-out;
    text-decoration: none;
  }

  .search-box--has-value .search-box__clear {
    opacity: 1;
    transform: scale(1);
  }

  .search-box__clear:hover {
    background: oklch(0.65 0.14 45);
    color: white;
    transform: scale(1.1);
  }

  .search-box__clear:active {
    transform: scale(0.95);
  }

  /* Search Results Info */
  .search-results-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    background: oklch(0.97 0.01 55);
    border-radius: var(--radius-lg);
    border: 1px solid oklch(0.92 0.02 55);
  }

  .search-results-info__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 var(--space-xs);
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    color: white;
    background: linear-gradient(135deg, oklch(0.62 0.14 45) 0%, oklch(0.55 0.12 40) 100%);
    border-radius: var(--radius-full);
  }

  .search-results-info--empty {
    background: oklch(0.96 0.01 30);
    border-color: oklch(0.90 0.02 30);
    color: var(--color-neutral-500);
  }

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

  .transaction {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    transition: background-color var(--transition-fast);
  }

  .transaction:last-child {
    border-bottom: none;
  }

  .transaction:hover {
    background-color: var(--color-canvas-muted);
  }

  .transaction__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-xl);
    background-color: var(--color-canvas-muted);
    color: var(--color-neutral-500);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
  }

  .transaction:hover .transaction__icon {
    transform: scale(1.05);
  }

  .transaction__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .transaction--income .transaction__icon {
    background: linear-gradient(135deg,
      var(--color-positive-soft) 0%,
      oklch(0.9 0.06 155) 100%);
    color: var(--color-positive);
  }

  .transaction--expense .transaction__icon {
    background: linear-gradient(135deg,
      var(--color-negative-soft) 0%,
      oklch(0.92 0.04 30) 100%);
    color: var(--color-negative);
  }

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

  .transaction__category {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-2xs);
  }

  .transaction__description {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .transaction__meta {
    text-align: right;
    flex-shrink: 0;
  }

  .transaction__amount {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2xs);
  }

  .transaction--income .transaction__amount {
    color: var(--color-positive);
  }

  .transaction--expense .transaction__amount {
    color: var(--color-negative);
  }

  .transaction__date {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
  }

  /* Transaction Form */
  .transaction-form {
    padding: var(--space-lg);
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .transaction-form__header {
    margin-bottom: var(--space-xl);
    text-align: center;
  }

  @media (min-width: 480px) {
    .transaction-form__header {
      text-align: left;
    }
  }

  .transaction-form__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* Empty State */
  .transactions__empty {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
  }

  .transactions__empty-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--space-lg);
    color: var(--color-neutral-300);
    opacity: 0.7;
  }

  .transactions__empty-text {
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-xl);
  }

  /* Pagination */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
    width: 100%;
  }

  .pagination__link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
  }

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

  .pagination__link--disabled {
    color: var(--color-neutral-400);
    cursor: default;
  }

  .pagination__info {
    color: var(--color-neutral-600);
  }

  /* ─── Transaction Actions ─── */
  /* Actions overlay the meta section on hover */
  .transaction {
    position: relative;
  }

  .transaction__actions {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: linear-gradient(to right, transparent 0%, var(--color-neutral-100) 20%);
    border-radius: var(--radius-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transaction:hover .transaction__actions {
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width: 640px) {
    .transaction__actions {
      display: none;
    }

    .transaction {
      cursor: pointer;
    }
  }

  .transaction__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-neutral-500);
    background-color: var(--color-neutral-50);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transform: scale(0.9);
    transition:
      transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
      color 150ms ease-out,
      background-color 150ms ease-out,
      box-shadow 150ms ease-out;
  }

  .transaction:hover .transaction__action {
    transform: scale(1);
  }

  .transaction__action--edit:hover {
    color: var(--color-link);
    background-color: oklch(0.55 0.18 250 / 0.12);
    box-shadow: 0 0 0 2px oklch(0.55 0.18 250 / 0.15);
    transform: scale(1.1);
  }

  .transaction__action--edit:active {
    transform: scale(0.95);
    transition-duration: 50ms;
  }

  .transaction__action--delete:hover {
    color: var(--color-negative);
    background-color: var(--color-negative-soft);
    box-shadow: 0 0 0 2px oklch(0.58 0.22 25 / 0.2);
    transform: scale(1.1);
  }

  .transaction__action--delete:active {
    transform: scale(0.95);
    transition-duration: 50ms;
  }

  .transaction__action svg {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .transaction__action:hover svg {
    transform: scale(1.1);
  }

  @keyframes subtle-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
  }

  .transaction__action--delete:hover svg {
    animation: subtle-shake 300ms ease-in-out;
    transform-origin: center bottom;
  }

  /* ─── Transaction Modal ─── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    background-color: oklch(0 0 0 / 0.5);
  }

  .transaction-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-md);
  }

  @media (min-width: 480px) {
    .transaction-modal {
      align-items: center;
    }
  }

  .transaction-modal__content {
    width: 100%;
    max-width: 28rem;
    max-height: calc(100dvh - var(--space-xl) * 2);
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
  }

  @media (min-width: 480px) {
    .transaction-modal__content {
      border-radius: var(--radius-xl);
    }
  }

  .transaction-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .transaction-modal__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-800);
  }

  .transaction-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-neutral-500);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }

  .transaction-modal__close:hover {
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-150);
  }

  .transaction-modal__body {
    padding: var(--space-lg);
    overflow-y: auto;
  }

  .transaction-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .transaction-type-badge--expense {
    background-color: var(--color-negative-soft);
    color: var(--color-negative);
  }

  .transaction-type-badge--income {
    background-color: var(--color-positive-soft);
    color: var(--color-positive);
  }

  .form__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-warning-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
  }

  .form__warning svg {
    flex-shrink: 0;
    color: var(--color-warning);
  }

  /* ─── Mobile Action Sheet ─── */
  .action-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .action-sheet__backdrop {
    position: absolute;
    inset: 0;
    background-color: oklch(0 0 0 / 0);
    transition: background-color var(--transition-base);
  }

  .action-sheet--visible .action-sheet__backdrop {
    background-color: oklch(0 0 0 / 0.5);
  }

  .action-sheet__content {
    position: relative;
    width: 100%;
    max-width: 24rem;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--transition-base);
  }

  .action-sheet--visible .action-sheet__content {
    transform: translateY(0);
  }

  .action-sheet__context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .action-sheet__category {
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-800);
  }

  .action-sheet__amount {
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
  }

  .action-sheet__actions {
    background-color: var(--color-neutral-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
  }

  .action-sheet__item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    background: none;
    border: none;
    border-top: var(--border-width) solid var(--color-neutral-200);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    text-decoration: none;
  }

  .action-sheet__item:first-child {
    border-top: none;
  }

  .action-sheet__item:hover,
  .action-sheet__item:active {
    background-color: var(--color-neutral-100);
  }

  .action-sheet__item--destructive {
    color: var(--color-negative);
  }

  .action-sheet__cancel {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  .action-sheet__cancel:hover,
  .action-sheet__cancel:active {
    background-color: var(--color-neutral-100);
  }

  /* ─── Form Actions Layout ─── */
  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: var(--border-width) solid var(--color-neutral-200);
  }

  .form-actions__left {
    display: flex;
    gap: var(--space-sm);
  }

  /* ─── Budget Table Module ─── */
  .budget-table {
    width: 100%;
    border-collapse: collapse;
  }

  .budget-table__header {
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    text-align: left;
    background-color: var(--color-canvas-subtle);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    white-space: nowrap;
  }

  .budget-table__header--numeric {
    text-align: right;
  }

  .budget-table__header--sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
  }

  .budget-table__header--sortable:hover {
    background-color: var(--color-canvas-muted);
  }

  .budget-table__sort-icon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: var(--space-xs);
    vertical-align: middle;
    opacity: 0.3;
  }

  .budget-table__sort-icon::after {
    content: "↕";
    font-size: 0.8em;
  }

  .budget-table__header--sorted .budget-table__sort-icon {
    opacity: 1;
    color: var(--color-primary);
  }

  .budget-table__header--asc .budget-table__sort-icon::after {
    content: "↑";
  }

  .budget-table__header--desc .budget-table__sort-icon::after {
    content: "↓";
  }

  .budget-table__row {
    transition: background-color var(--transition-fast);
  }

  .budget-table__row:hover {
    background-color: var(--color-canvas-subtle);
  }

  .budget-table__cell {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-800);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    vertical-align: middle;
  }

  .budget-table__row:last-child .budget-table__cell {
    border-bottom: none;
  }

  .budget-table__cell--numeric {
    text-align: right;
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .budget-table__cell--negative {
    color: var(--color-negative);
    font-weight: var(--font-weight-bold);
  }

  .budget-table__cell--progress {
    width: 8rem;
  }

  .budget-table__link {
    color: var(--color-neutral-800);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .budget-table__link:hover {
    color: var(--color-primary);
  }

  .budget-table__empty {
    color: var(--color-neutral-400);
  }

  /* ─── Budget Table Hierarchy ─── */
  .budget-table__row--parent {
    background-color: var(--color-canvas-subtle);
    font-weight: var(--font-weight-medium);
  }

  .budget-table__row--parent:hover {
    background-color: var(--color-canvas-muted);
  }

  .budget-table__row--child {
    background-color: var(--color-canvas-default);
  }

  .budget-table__row--child:hover {
    background-color: var(--color-canvas-subtle);
  }

  .budget-table__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-800);
    text-align: left;
  }

  .budget-table__toggle:hover {
    color: var(--color-primary);
  }

  .budget-table__toggle-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
    color: var(--color-neutral-500);
  }

  .budget-table__toggle--expanded .budget-table__toggle-icon {
    transform: rotate(90deg);
  }

  .budget-table__name {
    /* Category name in toggle button */
  }

  .budget-table__count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-neutral-500);
  }

  .budget-table__cell--indent {
    padding-left: calc(var(--space-md) + 1.25rem);
  }

  /* ─── Budget Progress Bar ─── */
  .budget-progress {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 1.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .budget-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--progress, 0%);
    background-color: var(--color-positive);
    opacity: 0.2;
    transition: width var(--transition-normal);
  }

  .budget-progress--positive::before {
    background-color: var(--color-positive);
  }

  .budget-progress--warning::before {
    background-color: var(--color-warning);
  }

  .budget-progress--negative::before {
    background-color: var(--color-negative);
  }

  .budget-progress__value {
    position: relative;
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-700);
  }

  .budget-progress--positive .budget-progress__value {
    color: var(--color-positive);
  }

  .budget-progress--warning .budget-progress__value {
    color: oklch(0.55 0.12 75);
  }

  .budget-progress--negative .budget-progress__value {
    color: var(--color-negative);
  }

  /* ─── Dashboard Empty State ─── */
  .dashboard__empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    background-color: var(--color-canvas-subtle);
    border: var(--border-width) dashed var(--color-neutral-300);
    border-radius: var(--radius-xl);
  }

  .dashboard__empty-text {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
  }

  /* ─── Charts Module ─── */
  .chart-container {
    padding: var(--space-lg);
  }

  .chart-container--line {
    min-height: 16rem;
  }

  .chart-container--bar {
    min-height: 12rem;
  }

  .chart-range {
    display: flex;
    align-items: center;
  }

  .chart-range__select {
    padding: var(--space-xs) var(--space-md);
    padding-right: var(--space-xl);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
    background-color: var(--color-canvas-muted);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238a7968' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-xs) center;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
      border-color var(--transition-fast),
      background-color var(--transition-fast);
    appearance: none;
  }

  .chart-range__select:hover {
    background-color: var(--color-neutral-0);
    border-color: var(--color-neutral-300);
  }

  .chart-range__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }

  .chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
    padding: var(--space-xl);
  }

  .chart-empty__text {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
  }

  .dashboard__charts-grid {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .dashboard__charts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Responsive table - Card layout on mobile */
  @media (max-width: 639px) {
    .budget-table {
      display: block;
    }

    .budget-table thead {
      display: none;
    }

    .budget-table tbody {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
    }

    .budget-table__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xs) var(--space-md);
      padding: var(--space-md);
      background: var(--color-neutral-0);
      border-radius: var(--radius-lg);
      border: var(--border-width) solid var(--color-neutral-200);
    }

    .budget-table__row:hover {
      background: var(--color-canvas-subtle);
    }

    .budget-table__cell {
      display: flex;
      align-items: center;
      padding: 0;
      border: none;
      font-size: var(--font-size-sm);
    }

    /* Category name - full width header */
    .budget-table__cell:first-child {
      grid-column: 1 / -1;
      padding-bottom: var(--space-xs);
      margin-bottom: var(--space-xs);
      border-bottom: var(--border-width) solid var(--color-neutral-200);
    }

    .budget-table__cell:first-child .budget-table__link {
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
    }

    /* Add labels before values */
    .budget-table__cell:not(:first-child)::before {
      content: attr(data-label);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
      color: var(--color-neutral-500);
      text-transform: uppercase;
      letter-spacing: var(--letter-spacing-wider);
      margin-right: auto;
    }

    .budget-table__cell--numeric {
      justify-content: space-between;
      text-align: right;
    }

    /* Progress bar - full width */
    .budget-table__cell--progress {
      grid-column: 1 / -1;
      width: auto;
      margin-top: var(--space-xs);
    }

    .budget-table__cell--progress::before {
      display: none;
    }

    .budget-table__cell--progress .budget-progress {
      width: 100%;
    }
  }

  /* ─── Budgets Module ─── */
  .budgets {
    padding: var(--space-lg);
    max-width: var(--container-wide);
    margin: 0 auto;
  }

  @media (min-width: 480px) {
    .budgets {
      padding: var(--space-xl) var(--space-lg);
    }
  }

  .budgets__header {
    margin-bottom: var(--space-xl);
    text-align: center;
  }

  @media (min-width: 480px) {
    .budgets__header {
      text-align: left;
    }
  }

  .budgets__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-xs);
  }

  .budgets__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-neutral-500);
    font-weight: var(--font-weight-medium);
  }

  .budgets__stats {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }

  @media (min-width: 480px) {
    .budgets__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg);
    }
  }

  .budgets__section {
    margin-bottom: var(--space-2xl);
  }

  .budgets__section:last-child {
    margin-bottom: 0;
  }

  .budgets__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
  }

  .budgets__section-title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
    letter-spacing: var(--letter-spacing-tight);
  }

  /* Budget Edit List */
  .budget-edit-list {
    display: flex;
    flex-direction: column;
  }

  .budget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    transition: background-color var(--transition-fast);
  }

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

  .budget-row:hover {
    background-color: var(--color-canvas-subtle);
  }

  .budget-row--saving {
    background-color: var(--color-canvas-muted);
  }

  .budget-row--saved {
    animation: budget-row-saved 1s ease-out;
  }

  @keyframes budget-row-saved {
    0% {
      background-color: var(--color-positive-soft);
    }
    100% {
      background-color: transparent;
    }
  }

  .budget-row--error {
    animation: budget-row-error 2s ease-out;
  }

  @keyframes budget-row-error {
    0%, 20%, 40% {
      background-color: var(--color-negative-soft);
    }
    10%, 30%, 50% {
      background-color: transparent;
    }
  }

  .budget-row__name {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-800);
    flex: 1;
    min-width: 0;
  }

  .budget-row__value {
    flex-shrink: 0;
  }

  .budget-row__display {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    min-width: 6rem;
    text-align: right;
  }

  .budget-row__display:hover {
    background-color: var(--color-canvas-muted);
  }

  .budget-row__display--readonly {
    cursor: default;
  }

  .budget-row__display--readonly:hover {
    background-color: transparent;
  }

  .budget-row__input {
    width: 8rem;
    padding: var(--space-xs) var(--space-sm);
    text-align: right;
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  /* ─── Categories Module ─── */
  .categories {
    padding: var(--space-lg);
    max-width: var(--container-wide);
    margin: 0 auto;
  }

  @media (min-width: 480px) {
    .categories {
      padding: var(--space-xl) var(--space-lg);
    }
  }

  .categories__header {
    margin-bottom: var(--space-xl);
    text-align: center;
  }

  @media (min-width: 480px) {
    .categories__header {
      text-align: left;
    }
  }

  .categories__title {
    font-family: var(--font-family-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-neutral-900);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-xs);
  }

  .categories__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-neutral-500);
    font-weight: var(--font-weight-medium);
  }

  .categories__grid {
    display: grid;
    gap: var(--space-xl);
  }

  @media (min-width: 768px) {
    .categories__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .categories__column {
    display: flex;
    flex-direction: column;
  }

  .categories__column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
  }

  .categories__column-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-800);
  }

  .categories__column-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-lg);
  }

  .categories__column-icon--expense {
    background: linear-gradient(135deg,
      var(--color-negative-soft) 0%,
      oklch(0.92 0.04 30) 100%);
    color: var(--color-negative);
  }

  .categories__column-icon--income {
    background: linear-gradient(135deg,
      var(--color-positive-soft) 0%,
      oklch(0.9 0.06 155) 100%);
    color: var(--color-positive);
  }

  .categories__count {
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    background-color: var(--color-canvas-muted);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
  }

  /* Category List */
  .category-list {
    display: flex;
    flex-direction: column;
  }

  /* Category Group (hierarchical) */
  .category-group {
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .category-group:last-child {
    border-bottom: none;
  }

  .category-group__header {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-sm) var(--space-lg) var(--space-2xs);
    background-color: var(--color-canvas-subtle);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .category-group .category-row {
    padding-left: calc(var(--space-lg) + var(--space-md));
  }

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

  .category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
    transition: background-color var(--transition-fast);
  }

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

  .category-row:hover {
    background-color: var(--color-canvas-subtle);
  }

  .category-row--discarded {
    opacity: 0.6;
  }

  .category-row__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-800);
    cursor: pointer;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    flex: 1;
    min-width: 0;
  }

  .category-row__name:hover {
    background-color: var(--color-canvas-muted);
  }

  .category-row__name--readonly {
    cursor: default;
  }

  .category-row__name--readonly:hover {
    background-color: transparent;
  }

  .category-row__kind {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    flex-shrink: 0;
  }

  .category-row__edit-form {
    flex: 1;
    min-width: 0;
  }

  .category-row__input {
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--font-size-sm);
  }

  .category-row__delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    color: var(--color-neutral-400);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast);
    flex-shrink: 0;
  }

  .category-row__delete:hover {
    color: var(--color-negative);
    background-color: var(--color-negative-soft);
  }

  /* New Category Form */
  .category-new {
    padding: var(--space-sm) var(--space-lg);
    border-bottom: var(--border-width) solid var(--color-neutral-200);
  }

  .category-new__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    background: transparent;
    border: var(--border-width) dashed var(--color-primary);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast);
    width: 100%;
    justify-content: center;
  }

  .category-new__trigger:hover {
    background-color: var(--color-primary-soft);
  }

  .category-new__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .category-new__input {
    width: 100%;
    font-size: var(--font-size-sm);
  }

  .category-new__actions {
    display: flex;
    gap: var(--space-xs);
    justify-content: flex-end;
  }

  /* Discarded Categories */
  .categories__discarded {
    margin-top: var(--space-2xl);
  }

  .categories__discarded-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-family-display);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    width: 100%;
    text-align: left;
  }

  .categories__discarded-toggle:hover {
    color: var(--color-neutral-700);
  }

  .categories__discarded-toggle svg {
    transition: transform var(--transition-fast);
  }

  .categories__discarded-toggle--open svg {
    transform: rotate(180deg);
  }

  .categories__discarded-list {
    margin-top: var(--space-md);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
 * UTILITIES LAYER
 * ══════════════════════════════════════════════════════════════════════════════ */

@layer utilities {
  /* ─── Spacing (Margin) ─── */
  .m-0 { margin: 0; }
  .m-xs { margin: var(--space-xs); }
  .m-sm { margin: var(--space-sm); }
  .m-md { margin: var(--space-md); }
  .m-lg { margin: var(--space-lg); }
  .m-xl { margin: var(--space-xl); }

  .mt-0 { margin-top: 0; }
  .mt-xs { margin-top: var(--space-xs); }
  .mt-sm { margin-top: var(--space-sm); }
  .mt-md { margin-top: var(--space-md); }
  .mt-lg { margin-top: var(--space-lg); }
  .mt-xl { margin-top: var(--space-xl); }
  .mt-2xl { margin-top: var(--space-2xl); }

  .mb-0 { margin-bottom: 0; }
  .mb-xs { margin-bottom: var(--space-xs); }
  .mb-sm { margin-bottom: var(--space-sm); }
  .mb-md { margin-bottom: var(--space-md); }
  .mb-lg { margin-bottom: var(--space-lg); }
  .mb-xl { margin-bottom: var(--space-xl); }
  .mb-2xl { margin-bottom: var(--space-2xl); }

  .ml-0 { margin-left: 0; }
  .ml-xs { margin-left: var(--space-xs); }
  .ml-sm { margin-left: var(--space-sm); }
  .ml-md { margin-left: var(--space-md); }
  .ml-auto { margin-left: auto; }

  .mr-0 { margin-right: 0; }
  .mr-xs { margin-right: var(--space-xs); }
  .mr-sm { margin-right: var(--space-sm); }
  .mr-md { margin-right: var(--space-md); }
  .mr-auto { margin-right: auto; }

  .mx-auto { margin-left: auto; margin-right: auto; }
  .mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
  .mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

  .my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
  .my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
  .my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

  /* ─── Spacing (Padding) ─── */
  .p-0 { padding: 0; }
  .p-xs { padding: var(--space-xs); }
  .p-sm { padding: var(--space-sm); }
  .p-md { padding: var(--space-md); }
  .p-lg { padding: var(--space-lg); }
  .p-xl { padding: var(--space-xl); }

  .pt-0 { padding-top: 0; }
  .pt-sm { padding-top: var(--space-sm); }
  .pt-md { padding-top: var(--space-md); }
  .pt-lg { padding-top: var(--space-lg); }

  .pb-0 { padding-bottom: 0; }
  .pb-sm { padding-bottom: var(--space-sm); }
  .pb-md { padding-bottom: var(--space-md); }
  .pb-lg { padding-bottom: var(--space-lg); }

  .px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
  .px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

  .py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
  .py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
  .py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

  /* ─── Gap ─── */
  .gap-xs { gap: var(--space-xs); }
  .gap-sm { gap: var(--space-sm); }
  .gap-md { gap: var(--space-md); }
  .gap-lg { gap: var(--space-lg); }
  .gap-xl { gap: var(--space-xl); }

  /* ─── Layout (Display) ─── */
  .hidden { display: none; }
  .block { display: block; }
  .inline { display: inline; }
  .inline-block { display: inline-block; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }

  /* ─── Layout (Flexbox) ─── */
  .flex-row { flex-direction: row; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }

  .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; }

  .flex-1 { flex: 1; }
  .flex-auto { flex: auto; }
  .flex-none { flex: none; }
  .flex-shrink-0 { flex-shrink: 0; }
  .flex-grow { flex-grow: 1; }

  /* ─── Layout (Width & Height) ─── */
  .w-full { width: 100%; }
  .w-auto { width: auto; }
  .max-w-container { max-width: var(--container-max); }
  .max-w-wide { max-width: var(--container-wide); }

  .h-full { height: 100%; }
  .min-h-screen { min-height: 100dvh; }

  /* ─── Layout (Position) ─── */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .sticky { position: sticky; }

  .inset-0 { inset: 0; }
  .top-0 { top: 0; }
  .right-0 { right: 0; }
  .bottom-0 { bottom: 0; }
  .left-0 { left: 0; }

  /* ─── Z-Index ─── */
  .z-0 { z-index: 0; }
  .z-10 { z-index: 10; }
  .z-20 { z-index: 20; }
  .z-dropdown { z-index: var(--z-dropdown); }
  .z-modal { z-index: var(--z-modal); }

  /* ─── Overflow ─── */
  .overflow-hidden { overflow: hidden; }
  .overflow-auto { overflow: auto; }
  .overflow-x-auto { overflow-x: auto; }
  .overflow-y-auto { overflow-y: auto; }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ─── Responsive Visibility ─── */
  .hide-mobile {
    display: none;
  }

  @media (min-width: 480px) {
    .hide-mobile {
      display: block;
    }

    .hide-desktop {
      display: none;
    }
  }

  /* ─── Text ─── */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }

  .text-xs { font-size: var(--font-size-xs); }
  .text-sm { font-size: var(--font-size-sm); }
  .text-base { font-size: var(--font-size-base); }
  .text-lg { font-size: var(--font-size-lg); }
  .text-xl { font-size: var(--font-size-xl); }

  .font-normal { font-weight: var(--font-weight-normal); }
  .font-medium { font-weight: var(--font-weight-medium); }
  .font-semibold { font-weight: var(--font-weight-semibold); }
  .font-bold { font-weight: var(--font-weight-bold); }

  .text-muted { color: var(--color-neutral-500); }
  .text-positive { color: var(--color-positive); }
  .text-negative { color: var(--color-negative); }
  .text-primary { color: var(--color-primary); }

  /* ─── Decorative ─── */
  .gradient-warm { background: var(--gradient-warm); }
  .gradient-primary { background: var(--gradient-primary); }
}