/* ═══════════════════════════════════════════════════════════════
   NAOWEE DESIGN SYSTEM — Foundations + Components
   Source of truth: Figma "01 - Main library [NT]"
   Collection: Naowee Theming · Core values: Color, Font, Dimensions
   ═══════════════════════════════════════════════════════════════ */

/* ── FOUNDATIONS: CORE COLORS ──────────────────────────────── */
/* Extracted from Figma Core values page (node 95785:8280)      */
:root {
  /* ── Blue ── */
  --naowee-color-blue-100: #E9F1FF;
  --naowee-color-blue-200: #DEE9FF;
  --naowee-color-blue-300: #C6D8FF;
  --naowee-color-blue-400: #A3BCFE;
  --naowee-color-blue-500: #7A95FF;
  --naowee-color-blue-600: #5C70FA;
  --naowee-color-blue-700: #434CE4;
  --naowee-color-blue-800: #353AC5;
  --naowee-color-blue-900: #002B5B;

  /* ── Dark Blue ── */
  --naowee-color-dark-blue-100: #1E1F34;
  --naowee-color-dark-blue-200: #202546;
  --naowee-color-dark-blue-300: #273268;
  --naowee-color-dark-blue-400: #304291;
  --naowee-color-dark-blue-500: #435DCB;
  --naowee-color-dark-blue-600: #4F6DE8;
  --naowee-color-dark-blue-700: #6382FD;
  --naowee-color-dark-blue-800: #7D99FC;
  --naowee-color-dark-blue-900: #94AEFF;

  /* ── Green ── */
  --naowee-color-green-100: #DEFADE;
  --naowee-color-green-200: #BDF5BE;
  --naowee-color-green-300: #8BEA8D;
  --naowee-color-green-400: #50D853;
  --naowee-color-green-500: #28BF2D;
  --naowee-color-green-600: #14A919;
  --naowee-color-green-700: #1F8923;
  --naowee-color-green-800: #17641A;

  /* ── Dark Green ── */
  --naowee-color-dark-green-100: #17211B;
  --naowee-color-dark-green-200: #1D2F1F;
  --naowee-color-dark-green-300: #2D532F;
  --naowee-color-dark-green-400: #3C7C3F;
  --naowee-color-dark-green-500: #469B49;
  --naowee-color-dark-green-600: #5ABA5D;
  --naowee-color-dark-green-700: #6CD56E;
  --naowee-color-dark-green-800: #85E587;
  --naowee-color-dark-green-900: #A0EEA2;

  /* ── Orange (Brand primary) ── */
  --naowee-color-orange-100: #FFEDC7;
  --naowee-color-orange-200: #FFDAA3;
  --naowee-color-orange-300: #FFBF75;
  --naowee-color-orange-400: #FF9D47;
  --naowee-color-orange-500: #FF7B24;
  --naowee-color-orange-600: #F05705;
  --naowee-color-orange-700: #D74009;
  --naowee-color-orange-800: #B83100;
  --naowee-color-orange-900: #942700;

  /* ── Dark Orange ── */
  --naowee-color-dark-orange-100: #281A15;
  --naowee-color-dark-orange-200: #452717;
  --naowee-color-dark-orange-300: #6F3E20;
  --naowee-color-dark-orange-400: #98572F;
  --naowee-color-dark-orange-500: #C8743C;
  --naowee-color-dark-orange-600: #F29050;
  --naowee-color-dark-orange-700: #FFA366;
  --naowee-color-dark-orange-800: #FFB780;
  --naowee-color-dark-orange-900: #FFC894;

  /* ── Red ── */
  --naowee-color-red-100: #FFE5E9;
  --naowee-color-red-200: #FECDD4;
  --naowee-color-red-300: #FCABB6;
  --naowee-color-red-400: #FE8091;
  --naowee-color-red-500: #FB5067;
  --naowee-color-red-600: #ED314A;
  --naowee-color-red-700: #DA1630;
  --naowee-color-red-800: #C4031D;
  --naowee-color-red-900: #9E0015;

  /* ── Dark Red ── */
  --naowee-color-dark-red-100: #2B171D;
  --naowee-color-dark-red-200: #3D1A22;
  --naowee-color-dark-red-300: #672834;
  --naowee-color-dark-red-400: #9D3F4E;
  --naowee-color-dark-red-500: #C15767;
  --naowee-color-dark-red-600: #EC7486;
  --naowee-color-dark-red-700: #FE94A3;
  --naowee-color-dark-red-800: #FFA8B4;
  --naowee-color-dark-red-900: #FFB8C1;

  /* ── Yellow ── */
  --naowee-color-yellow-100: #FFFBD9;
  --naowee-color-yellow-200: #FFF7B9;
  --naowee-color-yellow-300: #FFF394;
  --naowee-color-yellow-400: #FFEE67;
  --naowee-color-yellow-500: #FFE600;
  --naowee-color-yellow-600: #FDDD00;
  --naowee-color-yellow-700: #FBD100;
  --naowee-color-yellow-800: #F9C200;
  --naowee-color-yellow-900: #F5B800;

  /* ── Dark Yellow ── */
  --naowee-color-dark-yellow-100: #292419;
  --naowee-color-dark-yellow-200: #3D341A;
  --naowee-color-dark-yellow-300: #4E401D;
  --naowee-color-dark-yellow-400: #7A662A;
  --naowee-color-dark-yellow-500: #A38E38;
  --naowee-color-dark-yellow-600: #DDC44B;
  --naowee-color-dark-yellow-700: #FAE76B;
  --naowee-color-dark-yellow-800: #FCEE92;
  --naowee-color-dark-yellow-900: #FFF5A8;

  /* ── Gray ── */
  --naowee-color-gray-100: #F4F5F9;
  --naowee-color-gray-200: #E7E9F3;
  --naowee-color-gray-300: #D0D4E6;
  --naowee-color-gray-400: #B5B9D4;
  --naowee-color-gray-500: #9C9EBF;
  --naowee-color-gray-600: #8788AB;
  --naowee-color-gray-700: #646587;
  --naowee-color-gray-800: #434565;
  --naowee-color-gray-900: #282834;

  /* ── Dark Gray ── */
  --naowee-color-dark-gray-50: #09090C;
  --naowee-color-dark-gray-100: #181820;
  --naowee-color-dark-gray-200: #1E1E29;
  --naowee-color-dark-gray-300: #20202C;
  --naowee-color-dark-gray-400: #292938;
  --naowee-color-dark-gray-500: #45455E;
  --naowee-color-dark-gray-600: #6D6D8D;
  --naowee-color-dark-gray-700: #A3A3BD;
  --naowee-color-dark-gray-800: #C8C8DA;
  --naowee-color-dark-gray-900: #DEDFED;

  /* ── Accent colors ── */
  --naowee-color-turquoise-100: #DBFBFF;
  --naowee-color-turquoise-200: #007B89;
  --naowee-color-turquoise-300: #22575D;
  --naowee-color-violet-100: #F9EBFF;
  --naowee-color-violet-200: #9D30D4;
  --naowee-color-violet-300: #6D3082;

  /* ── White Alpha ── */
  --naowee-color-white-alpha-10: rgba(255,255,255,.1);
  --naowee-color-white-alpha-20: rgba(255,255,255,.2);
  --naowee-color-white-alpha-30: rgba(255,255,255,.3);
  --naowee-color-white-alpha-40: rgba(255,255,255,.4);
  --naowee-color-white-alpha-50: rgba(255,255,255,.5);
  --naowee-color-white-alpha-60: rgba(255,255,255,.6);
  --naowee-color-white-alpha-70: rgba(255,255,255,.7);
  --naowee-color-white-alpha-80: rgba(255,255,255,.8);
  --naowee-color-white-alpha-90: rgba(255,255,255,.9);
  --naowee-color-white-alpha-100: #FFFFFF;

  /* ── Black Alpha ── */
  --naowee-color-black-alpha-10: rgba(40,40,52,.1);
  --naowee-color-black-alpha-20: rgba(40,40,52,.2);
  --naowee-color-black-alpha-30: rgba(40,40,52,.3);
  --naowee-color-black-alpha-40: rgba(40,40,52,.4);
  --naowee-color-black-alpha-50: rgba(40,40,52,.5);
  --naowee-color-black-alpha-60: rgba(40,40,52,.6);
  --naowee-color-black-alpha-70: rgba(40,40,52,.7);
  --naowee-color-black-alpha-80: rgba(40,40,52,.8);
  --naowee-color-black-alpha-90: rgba(40,40,52,.9);
  --naowee-color-black-alpha-100: #282834;

  /* ── Transparent ── */
  --naowee-color-transparent: transparent;
}

/* ── FOUNDATIONS: SEMANTIC COLOR ALIASES ────────────────────── */
/* From Figma Semantic values page (node 95785:12729)           */
/* Naowee theme: accent = orange (not blue base from Andes)     */
:root {
  /* ── Brand ── */
  --naowee-color-brand-fill-loud: var(--naowee-color-orange-700);
  --naowee-color-brand-fill-quiet: var(--naowee-color-orange-100);
  --naowee-color-brand-text-loud: var(--naowee-color-orange-700);
  --naowee-color-brand-text-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-brand-icon-loud: var(--naowee-color-orange-700);
  --naowee-color-brand-icon-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-brand-gradient-start: var(--naowee-color-orange-500);
  --naowee-color-brand-gradient-end: var(--naowee-color-orange-700);

  /* ── Interactive fills — Loud (primary) ── */
  --naowee-color-interactive-fill-loud-idle: var(--naowee-color-orange-700);
  --naowee-color-interactive-fill-loud-hover: var(--naowee-color-orange-800);
  --naowee-color-interactive-fill-loud-active: var(--naowee-color-orange-900);
  --naowee-color-interactive-fill-loud-idle-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-interactive-fill-loud-hover-on-fill: var(--naowee-color-white-alpha-90);
  --naowee-color-interactive-fill-loud-active-on-fill: var(--naowee-color-white-alpha-80);
  --naowee-color-interactive-fill-loud-disabled: var(--naowee-color-gray-300);

  /* ── Interactive fills — Quiet (secondary) ── */
  --naowee-color-interactive-fill-quiet-idle: var(--naowee-color-orange-100);
  --naowee-color-interactive-fill-quiet-hover: var(--naowee-color-orange-200);
  --naowee-color-interactive-fill-quiet-active: var(--naowee-color-orange-300);

  /* ── Interactive fills — Mute (ghost) ── */
  --naowee-color-interactive-fill-mute-idle: transparent;
  --naowee-color-interactive-fill-mute-hover: var(--naowee-color-orange-100);
  --naowee-color-interactive-fill-mute-active: var(--naowee-color-orange-200);
  --naowee-color-interactive-fill-mute-idle-on-fill: transparent;
  --naowee-color-interactive-fill-mute-hover-on-fill: var(--naowee-color-white-alpha-20);
  --naowee-color-interactive-fill-mute-active-on-fill: var(--naowee-color-white-alpha-30);

  /* ── Interactive borders ── */
  --naowee-color-interactive-border-idle: var(--naowee-color-gray-300);
  --naowee-color-interactive-border-hover: var(--naowee-color-gray-500);
  --naowee-color-interactive-border-active: var(--naowee-color-orange-700);

  /* ── Text ── */
  --naowee-color-text-primary: var(--naowee-color-gray-900);
  --naowee-color-text-secondary: var(--naowee-color-gray-700);
  --naowee-color-text-accent: var(--naowee-color-orange-700);
  --naowee-color-text-inverse: var(--naowee-color-white-alpha-100);
  --naowee-color-text-disabled: var(--naowee-color-gray-500);
  --naowee-color-text-disabled-on-fill: var(--naowee-color-black-alpha-30);
  --naowee-color-text-disabled-on-fill-inverse: var(--naowee-color-white-alpha-30);
  --naowee-color-text-link-idle: var(--naowee-color-orange-700);
  --naowee-color-text-link-hover: var(--naowee-color-orange-800);
  --naowee-color-text-link-active: var(--naowee-color-orange-900);
  --naowee-color-text-link-idle-inverse: var(--naowee-color-white-alpha-100);
  --naowee-color-text-link-idle-neutral: var(--naowee-color-gray-900);

  /* ── Icon ── */
  --naowee-color-icon-primary: var(--naowee-color-gray-900);
  --naowee-color-icon-secondary: var(--naowee-color-gray-700);
  --naowee-color-icon-accent: var(--naowee-color-orange-700);
  --naowee-color-icon-accent-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-icon-accent-quiet-on-fill: var(--naowee-color-orange-700);
  --naowee-color-icon-inverse: var(--naowee-color-white-alpha-100);
  --naowee-color-icon-disabled: var(--naowee-color-gray-500);
  --naowee-color-icon-disabled-on-fill: var(--naowee-color-black-alpha-30);
  --naowee-color-icon-disabled-on-fill-inverse: var(--naowee-color-white-alpha-30);

  /* ── Fill (surfaces) ── */
  --naowee-color-fill-primary: var(--naowee-color-white-alpha-100);
  --naowee-color-fill-primary-on-fill: var(--naowee-color-black-alpha-100);
  --naowee-color-fill-primary-on-fill-inverse: var(--naowee-color-white-alpha-100);
  --naowee-color-fill-secondary: var(--naowee-color-gray-300);
  --naowee-color-fill-secondary-on-fill: var(--naowee-color-black-alpha-30);
  --naowee-color-fill-secondary-on-fill-inverse: var(--naowee-color-white-alpha-50);
  --naowee-color-fill-inverse: var(--naowee-color-gray-900);
  --naowee-color-fill-disabled: var(--naowee-color-gray-300);
  --naowee-color-fill-disabled-on-fill: var(--naowee-color-black-alpha-20);
  --naowee-color-fill-accent-loud: var(--naowee-color-orange-700);
  --naowee-color-fill-accent-quiet: var(--naowee-color-orange-100);

  /* ── Background ── */
  --naowee-color-background-primary: var(--naowee-color-white-alpha-100);
  --naowee-color-background-secondary: var(--naowee-color-gray-100);
  --naowee-color-background-disabled: transparent;

  /* ── Border ── */
  --naowee-color-border-primary: var(--naowee-color-gray-300);
  --naowee-color-border-default: var(--naowee-color-gray-200);
  --naowee-color-border-dark: var(--naowee-color-gray-300);
  --naowee-color-border-accent: var(--naowee-color-orange-700);
  --naowee-color-border-inverse: var(--naowee-color-white-alpha-100);
  --naowee-color-border-disabled: var(--naowee-color-gray-400);

  /* ── Feedback — Positive (success) ── */
  --naowee-color-feedback-fill-positive-loud: var(--naowee-color-green-700);
  --naowee-color-feedback-fill-positive-quiet: var(--naowee-color-green-100);
  --naowee-color-feedback-border-positive-loud: var(--naowee-color-green-600);
  --naowee-color-feedback-text-positive-loud: var(--naowee-color-green-700);
  --naowee-color-feedback-text-positive-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-feedback-text-positive-quiet-on-fill: var(--naowee-color-green-800);
  --naowee-color-feedback-icon-positive-loud: var(--naowee-color-green-700);
  /* aliases */
  --naowee-color-feedback-success: var(--naowee-color-green-700);
  --naowee-color-feedback-success-bg: var(--naowee-color-green-100);
  --naowee-color-feedback-success-border: var(--naowee-color-green-200);

  /* ── Feedback — Caution (warning) ── */
  /* Naowee theme: caution = orange (from Figma #d74009), not yellow */
  --naowee-color-feedback-fill-caution-loud: var(--naowee-color-orange-700);
  --naowee-color-feedback-fill-caution-quiet: var(--naowee-color-orange-100);
  --naowee-color-feedback-border-caution-loud: var(--naowee-color-orange-600);
  --naowee-color-feedback-text-caution-loud: var(--naowee-color-orange-700);
  --naowee-color-feedback-text-caution-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-feedback-text-caution-quiet-on-fill: var(--naowee-color-orange-900);
  --naowee-color-feedback-icon-caution-loud: var(--naowee-color-orange-700);
  /* aliases */
  --naowee-color-feedback-warning: var(--naowee-color-orange-400);
  --naowee-color-feedback-warning-bg: var(--naowee-color-orange-100);
  --naowee-color-feedback-warning-border: var(--naowee-color-orange-300);

  /* ── Feedback — Negative (error) ── */
  --naowee-color-feedback-fill-negative-loud: var(--naowee-color-red-700);
  --naowee-color-feedback-fill-negative-quiet: var(--naowee-color-red-100);
  --naowee-color-feedback-border-negative-loud: var(--naowee-color-red-600);
  --naowee-color-feedback-text-negative-loud: var(--naowee-color-red-800);
  --naowee-color-feedback-text-negative-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-feedback-text-negative-quiet-on-fill: var(--naowee-color-red-800);
  --naowee-color-feedback-icon-negative-loud: var(--naowee-color-red-700);
  /* aliases */
  --naowee-color-feedback-error: var(--naowee-color-red-700);
  --naowee-color-feedback-error-bg: var(--naowee-color-red-100);
  --naowee-color-feedback-error-border: var(--naowee-color-red-200);

  /* ── Feedback — Informative ── */
  /* Note: Naowee theme uses #006aff / #cef4ff (from Figma), not core blue palette */
  --naowee-color-feedback-fill-informative-loud: #006aff;
  --naowee-color-feedback-fill-informative-quiet: #cef4ff;
  --naowee-color-feedback-border-informative-loud: var(--naowee-color-blue-200);
  --naowee-color-feedback-text-informative-loud: #006aff;
  --naowee-color-feedback-text-informative-loud-on-fill: var(--naowee-color-white-alpha-100);
  --naowee-color-feedback-text-informative-quiet-on-fill: var(--naowee-color-blue-900);
  --naowee-color-feedback-icon-informative-loud: #006aff;
  /* aliases */
  --naowee-color-feedback-info: #006aff;
  --naowee-color-feedback-info-bg: #cef4ff;
  --naowee-color-feedback-info-border: var(--naowee-color-blue-200);

  /* ── Feedback — Neutral ── */
  --naowee-color-feedback-fill-neutral-loud: var(--naowee-color-gray-700);
  --naowee-color-feedback-fill-neutral-quiet: var(--naowee-color-gray-100);

  /* ── Button split borders ── */
  --naowee-button-split-loud-color-border: var(--naowee-color-orange-900);
  --naowee-button-split-quiet-color-border: var(--naowee-color-orange-300);
}

/* ── FOUNDATIONS: DIMENSIONS ───────────────────────────────── */
/* From Figma Core values → Dimensions                          */
:root {
  --naowee-dimension-0: 0px;
  --naowee-dimension-1: 1px;
  --naowee-dimension-2: 2px;
  --naowee-dimension-3: 3px;
  --naowee-dimension-4: 4px;
  --naowee-dimension-6: 6px;
  --naowee-dimension-8: 8px;
  --naowee-dimension-12: 12px;
  --naowee-dimension-16: 16px;
  --naowee-dimension-20: 20px;
  --naowee-dimension-24: 24px;
  --naowee-dimension-28: 28px;
  --naowee-dimension-32: 32px;
  --naowee-dimension-40: 40px;
  --naowee-dimension-48: 48px;
  --naowee-dimension-56: 56px;
  --naowee-dimension-64: 64px;
  --naowee-dimension-72: 72px;
  --naowee-dimension-80: 80px;
  --naowee-dimension-88: 88px;
  --naowee-dimension-96: 96px;
  --naowee-dimension-112: 112px;
  --naowee-dimension-120: 120px;
  --naowee-dimension-128: 128px;
  --naowee-dimension-144: 144px;
  --naowee-dimension-160: 160px;
  --naowee-dimension-176: 176px;
  --naowee-dimension-240: 240px;
  --naowee-dimension-320: 320px;

  /* Negative dimensions */
  --naowee-dimension-negative-2: -2px;
  --naowee-dimension-negative-4: -4px;
  --naowee-dimension-negative-6: -6px;
  --naowee-dimension-negative-8: -8px;
  --naowee-dimension-negative-12: -12px;
  --naowee-dimension-negative-16: -16px;
}

/* ── FOUNDATIONS: SPACING PADDING (from Figma semantic values) ── */
/* Scale: none→xmega (17 steps)                                   */
:root {
  --naowee-spacing-padding-none: 0px;
  --naowee-spacing-padding-pico: 2px;
  --naowee-spacing-padding-xnano: 4px;
  --naowee-spacing-padding-nano: 6px;
  --naowee-spacing-padding-xmicro: 8px;
  --naowee-spacing-padding-micro: 12px;
  --naowee-spacing-padding-xtiny: 16px;
  --naowee-spacing-padding-tiny: 20px;
  --naowee-spacing-padding-xsmall: 24px;
  --naowee-spacing-padding-small: 32px;
  --naowee-spacing-padding-medium: 40px;
  --naowee-spacing-padding-large: 48px;
  --naowee-spacing-padding-xlarge: 56px;
  --naowee-spacing-padding-huge: 64px;
  --naowee-spacing-padding-xhuge: 72px;
  --naowee-spacing-padding-mega: 80px;
  --naowee-spacing-padding-xmega: 88px;
}

/* ── FOUNDATIONS: SPACING GAP (from Figma semantic values) ────── */
:root {
  --naowee-spacing-gap-none: 0px;
  --naowee-spacing-gap-pico: 2px;
  --naowee-spacing-gap-xnano: 4px;
  --naowee-spacing-gap-nano: 6px;
  --naowee-spacing-gap-xmicro: 8px;
  --naowee-spacing-gap-micro: 12px;
  --naowee-spacing-gap-xtiny: 16px;
  --naowee-spacing-gap-tiny: 20px;
  --naowee-spacing-gap-xsmall: 24px;
  --naowee-spacing-gap-small: 32px;
  --naowee-spacing-gap-medium: 40px;
  --naowee-spacing-gap-large: 48px;
  --naowee-spacing-gap-xlarge: 56px;
  --naowee-spacing-gap-huge: 64px;
  --naowee-spacing-gap-xhuge: 72px;
  --naowee-spacing-gap-mega: 80px;
  --naowee-spacing-gap-xmega: 88px;
  /* Negative gaps */
  --naowee-spacing-gap-negative-pico: -2px;
  --naowee-spacing-gap-negative-xnano: -4px;
  --naowee-spacing-gap-negative-nano: -6px;
  --naowee-spacing-gap-negative-xmicro: -8px;
  --naowee-spacing-gap-negative-xtiny: -16px;
  /* Form-specific gaps */
  --naowee-spacing-gap-forms-horizontal-near: 8px;
  --naowee-spacing-gap-forms-horizontal-mid: 12px;
  --naowee-spacing-gap-forms-horizontal-related: 16px;
  --naowee-spacing-gap-forms-horizontal-wide: 24px;
  --naowee-spacing-gap-forms-vertical-near: 8px;
  --naowee-spacing-gap-forms-vertical-mid: 16px;
  --naowee-spacing-gap-forms-vertical-wide: 24px;
}

/* ── FOUNDATIONS: SIZING (from Figma semantic values) ───────── */
:root {
  /* Generic scale */
  --naowee-size-xnano: 4px;
  --naowee-size-nano: 6px;
  --naowee-size-xmicro: 8px;
  --naowee-size-micro: 12px;
  --naowee-size-xtiny: 16px;
  --naowee-size-tiny: 20px;
  --naowee-size-xsmall: 24px;
  --naowee-size-small: 32px;
  --naowee-size-medium: 40px;
  --naowee-size-large: 48px;
  --naowee-size-xlarge: 56px;
  --naowee-size-huge: 64px;
  --naowee-size-xhuge: 72px;
  --naowee-size-mega: 80px;
  --naowee-size-xmega: 88px;

  /* Generic heights */
  --naowee-size-height-xsmall: 24px;
  --naowee-size-height-small: 32px;
  --naowee-size-height-medium: 40px;
  --naowee-size-height-large: 48px;

  /* Actions (buttons) */
  --naowee-size-height-actions-small: 32px;
  --naowee-size-height-actions-medium: 40px;
  --naowee-size-height-actions-large: 48px;

  /* Inputs */
  --naowee-size-height-inputs-small: 32px;
  --naowee-size-height-inputs-medium: 40px;
  --naowee-size-height-inputs-large: 48px;

  /* Selection controls */
  --naowee-size-selection-controls-tiny: 20px;

  /* Icons */
  --naowee-size-icon-micro: 12px;
  --naowee-size-icon-xtiny: 16px;
  --naowee-size-icon-tiny: 20px;
  --naowee-size-icon-xsmall: 24px;
  --naowee-size-icon-small: 32px;
  --naowee-size-icon-medium: 40px;
  --naowee-size-icon-large: 48px;

  /* Media */
  --naowee-size-media-xlarge: 240px;
  --naowee-size-media-huge: 320px;
}

/* ── FOUNDATIONS: BORDER RADIUS (from Figma semantic values) ── */
:root {
  /* Generic scale */
  --naowee-border-radius-none: 0px;
  --naowee-border-radius-tiny: 4px;
  --naowee-border-radius-xsmall: 6px;
  --naowee-border-radius-small: 8px;
  --naowee-border-radius-medium: 12px;
  --naowee-border-radius-large: 16px;
  --naowee-border-radius-xlarge: 20px;
  --naowee-border-radius-full: 9999px;

  /* Context-specific */
  --naowee-border-radius-actions-inputs-default: 12px;
  --naowee-border-radius-actions-inputs-compact: 8px;
  --naowee-border-radius-containers-default: 20px;
  --naowee-border-radius-containers-compact: 12px;
  --naowee-border-radius-square-to-circle-small: 8px;
  --naowee-border-radius-square-to-circle-large: 12px;

  /* Alias for backward compatibility */
  --naowee-border-radius-default: var(--naowee-border-radius-actions-inputs-default);
}

/* ── FOUNDATIONS: BORDER WIDTH (from Figma semantic values) ─── */
:root {
  --naowee-border-width-none: 0px;
  --naowee-border-width-small: 1px;
  --naowee-border-width-medium: 2px;
  --naowee-border-width-large: 3px;
  --naowee-border-width-xlarge: 4px;
}

/* ── FOUNDATIONS: TYPOGRAPHY ────────────────────────────────── */
/* From Figma Core values → Font                                */
:root {
  /* Family */
  --naowee-font-family: 'Inter', sans-serif;

  /* Sizes (from naotech-font-size-*) */
  --naowee-font-size-10: 10px;
  --naowee-font-size-12: 12px;
  --naowee-font-size-14: 14px;
  --naowee-font-size-16: 16px;
  --naowee-font-size-18: 18px;
  --naowee-font-size-20: 20px;
  --naowee-font-size-24: 24px;
  --naowee-font-size-28: 28px;
  --naowee-font-size-32: 32px;
  --naowee-font-size-40: 40px;
  --naowee-font-size-48: 48px;
  --naowee-font-size-56: 56px;

  /* Weights (from naotech-font-weight-*) */
  --naowee-font-weight-regular: 400;
  --naowee-font-weight-medium: 500;
  --naowee-font-weight-semibold: 600;
  --naowee-font-weight-bold: 700;

  /* Line heights (from naotech-font-line-height-*) */
  --naowee-font-line-height-12: 12px;
  --naowee-font-line-height-16: 16px;
  --naowee-font-line-height-18: 18px;
  --naowee-font-line-height-20: 20px;
  --naowee-font-line-height-22: 22px;
  --naowee-font-line-height-24: 24px;
  --naowee-font-line-height-28: 28px;
  --naowee-font-line-height-34: 34px;
  --naowee-font-line-height-40: 40px;
  --naowee-font-line-height-48: 48px;
  --naowee-font-line-height-56: 56px;
  --naowee-font-line-height-66: 66px;

  /* Letter spacing */
  --naowee-font-letter-spacing-default: 0px;
  --naowee-font-letter-spacing-negative: -1px;
  --naowee-font-letter-spacing-caps: 0.5px;

  /* Paragraph spacing */
  --naowee-font-paragraph-spacing-10: 10px;
  --naowee-font-paragraph-spacing-12: 12px;
  --naowee-font-paragraph-spacing-14: 14px;
  --naowee-font-paragraph-spacing-16: 16px;
}

/* ── FOUNDATIONS: SHADOWS ──────────────────────────────────── */
:root {
  --naowee-shadow-small: 0 1px 4px rgba(0,0,0,.08);
  --naowee-shadow-medium: 0 4px 16px rgba(0,0,0,.12);
  --naowee-shadow-card: 0 0 2px rgba(145,158,171,.2), 0 12px 24px -4px rgba(145,158,171,.12);
  --naowee-shadow-modal: 0 20px 60px rgba(0,0,0,.25);
  --naowee-shadow-focus-accent: 0 0 0 3px rgba(215,64,9,.15);
  --naowee-shadow-focus-success: 0 0 0 3px rgba(31,137,35,.1);
  --naowee-shadow-focus-error: 0 0 0 3px rgba(220,38,38,.1);
}

/* ── FOUNDATIONS: TRANSITIONS ──────────────────────────────── */
:root {
  --naowee-transition-fast: 0.12s ease;
  --naowee-transition-default: 0.15s ease;
  --naowee-transition-smooth: 0.25s cubic-bezier(.4,0,.2,1);
  --naowee-transition-spring: 0.3s cubic-bezier(.4,0,.2,1);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: BUTTON
   Variants: Loud (primary), Quiet (secondary), Mute (ghost)
   Sizes: Large (48px), Medium (40px), Small (32px)
   States: Idle, Hover, Active, Disabled, Loading
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ── */
.naowee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--naowee-spacing-gap-xmicro);
  height: var(--naowee-size-height-actions-medium);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xsmall);
  border-radius: var(--naowee-border-radius-default);
  border: none;
  cursor: pointer;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-medium);
  line-height: var(--naowee-font-line-height-18);
  letter-spacing: var(--naowee-font-letter-spacing-default);
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: background var(--naowee-transition-default), color var(--naowee-transition-default), box-shadow var(--naowee-transition-default), transform var(--naowee-transition-fast);
  position: relative;
  font-feature-settings: 'case' 1;
}
.naowee-btn:active { transform: scale(0.97); }
.naowee-btn:focus-visible { outline: none; box-shadow: var(--naowee-shadow-focus-accent); }
.naowee-btn svg { flex-shrink: 0; width: var(--naowee-size-icon-tiny); height: var(--naowee-size-icon-tiny); } /* 20px */

/* ── Sizes ── */
.naowee-btn--large {
  height: var(--naowee-size-height-actions-large);
  font-size: var(--naowee-font-size-16);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-small);
}
.naowee-btn--small {
  height: var(--naowee-size-height-actions-small);
  font-size: var(--naowee-font-size-12);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xtiny);
}
.naowee-btn--small svg { width: var(--naowee-size-icon-xtiny); height: var(--naowee-size-icon-xtiny); } /* 16px */

/* ── Full width ── */
.naowee-btn--full { width: 100%; }

/* ── Hierarchy: Loud (Primary) ── */
.naowee-btn--loud {
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-text-inverse);
}
.naowee-btn--loud:hover { background: var(--naowee-color-interactive-fill-loud-hover); }
.naowee-btn--loud:active { background: var(--naowee-color-interactive-fill-loud-active); }
.naowee-btn--loud:disabled,
.naowee-btn--loud[disabled] {
  background: var(--naowee-color-interactive-fill-loud-disabled);
  color: var(--naowee-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.naowee-btn--loud svg { stroke: var(--naowee-color-icon-inverse); color: var(--naowee-color-icon-inverse); }
.naowee-btn--loud:disabled svg,
.naowee-btn--loud[disabled] svg { stroke: var(--naowee-color-icon-disabled); color: var(--naowee-color-icon-disabled); }

/* ── Hierarchy: Quiet (Secondary) ── */
.naowee-btn--quiet {
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
}
.naowee-btn--quiet:hover { background: var(--naowee-color-interactive-fill-quiet-hover); }
.naowee-btn--quiet:active { background: var(--naowee-color-interactive-fill-quiet-active); }
.naowee-btn--quiet:disabled,
.naowee-btn--quiet[disabled] {
  background: var(--naowee-color-fill-disabled);
  color: var(--naowee-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.naowee-btn--quiet svg { stroke: var(--naowee-color-icon-accent); color: var(--naowee-color-icon-accent); }
.naowee-btn--quiet:disabled svg,
.naowee-btn--quiet[disabled] svg { stroke: var(--naowee-color-icon-disabled); color: var(--naowee-color-icon-disabled); }

/* ── Hierarchy: Mute (Ghost/Tertiary) ── */
.naowee-btn--mute {
  background: var(--naowee-color-interactive-fill-mute-idle);
  color: var(--naowee-color-text-accent);
}
.naowee-btn--mute:hover { background: var(--naowee-color-interactive-fill-mute-hover); }
.naowee-btn--mute:active { background: var(--naowee-color-interactive-fill-mute-active); }
.naowee-btn--mute:disabled,
.naowee-btn--mute[disabled] {
  background: transparent;
  color: var(--naowee-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.naowee-btn--mute svg { stroke: var(--naowee-color-icon-accent); color: var(--naowee-color-icon-accent); }
.naowee-btn--mute:disabled svg { stroke: var(--naowee-color-icon-disabled); color: var(--naowee-color-icon-disabled); }

/* ── Loading state ── */
.naowee-btn--loading {
  pointer-events: none;
  color: transparent !important;
}
.naowee-btn--loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: naowee-spin 0.6s linear infinite;
}
.naowee-btn--loud.naowee-btn--loading::after { border-color: rgba(255,255,255,.3); border-top-color: white; }
.naowee-btn--quiet.naowee-btn--loading::after { border-color: rgba(215,64,9,.2); border-top-color: var(--naowee-color-text-accent); }

/* ── Icon button (square) ── */
/* Figma: Large 48x48 icon 24px, Medium 40x40 icon 20px, Small 32x32 icon 16px */
.naowee-btn--icon {
  width: var(--naowee-size-height-actions-medium);
  padding: 0;
  flex-shrink: 0;
}
.naowee-btn--icon svg { width: var(--naowee-size-icon-tiny); height: var(--naowee-size-icon-tiny); } /* 20px */
.naowee-btn--icon.naowee-btn--large { width: var(--naowee-size-height-actions-large); }
.naowee-btn--icon.naowee-btn--large svg { width: var(--naowee-size-icon-xsmall); height: var(--naowee-size-icon-xsmall); } /* 24px */
.naowee-btn--icon.naowee-btn--small { width: var(--naowee-size-height-actions-small); }
.naowee-btn--icon.naowee-btn--small svg { width: var(--naowee-size-icon-xtiny); height: var(--naowee-size-icon-xtiny); } /* 16px */

/* ── Bg type: On fill (for buttons on colored/dark backgrounds) ── */
.naowee-btn--on-fill.naowee-btn--loud {
  background: var(--naowee-color-interactive-fill-loud-idle-on-fill);
  color: var(--naowee-color-text-primary);
}
.naowee-btn--on-fill.naowee-btn--loud:hover { background: var(--naowee-color-interactive-fill-loud-hover-on-fill); }
.naowee-btn--on-fill.naowee-btn--loud:active { background: var(--naowee-color-interactive-fill-loud-active-on-fill); }
.naowee-btn--on-fill.naowee-btn--loud svg { color: var(--naowee-color-icon-primary); }
.naowee-btn--on-fill.naowee-btn--quiet {
  background: var(--naowee-color-interactive-fill-mute-idle-on-fill);
  color: var(--naowee-color-white-alpha-100);
}
.naowee-btn--on-fill.naowee-btn--quiet:hover { background: var(--naowee-color-interactive-fill-mute-hover-on-fill); }
.naowee-btn--on-fill.naowee-btn--mute {
  background: transparent;
  color: var(--naowee-color-white-alpha-100);
}
.naowee-btn--on-fill.naowee-btn--mute:hover { background: var(--naowee-color-interactive-fill-mute-hover-on-fill); }

/* ── Bg type: On fill inverse ── */
.naowee-btn--on-fill-inverse.naowee-btn--loud {
  background: var(--naowee-color-fill-inverse);
  color: var(--naowee-color-text-inverse);
}
.naowee-btn--on-fill-inverse.naowee-btn--loud:hover { opacity: 0.88; }
.naowee-btn--on-fill-inverse.naowee-btn--quiet {
  background: var(--naowee-color-black-alpha-20);
  color: var(--naowee-color-white-alpha-100);
}
.naowee-btn--on-fill-inverse.naowee-btn--quiet:hover { background: var(--naowee-color-black-alpha-30); }
.naowee-btn--on-fill-inverse.naowee-btn--mute {
  background: transparent;
  color: var(--naowee-color-white-alpha-100);
}
.naowee-btn--on-fill-inverse.naowee-btn--mute:hover { background: var(--naowee-color-white-alpha-10); }

/* ── Button Split ── */
.naowee-btn-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--naowee-border-radius-default);
  overflow: hidden;
}
.naowee-btn-split .naowee-btn {
  border-radius: 0;
}
.naowee-btn-split .naowee-btn:first-child {
  border-radius: var(--naowee-border-radius-default) 0 0 var(--naowee-border-radius-default);
}
.naowee-btn-split__divider {
  width: 1px;
  align-self: stretch;
}
.naowee-btn-split--loud .naowee-btn-split__divider { background: var(--naowee-button-split-loud-color-border); }
.naowee-btn-split--quiet .naowee-btn-split__divider { background: var(--naowee-button-split-quiet-color-border); }
.naowee-btn-split .naowee-btn--icon {
  border-radius: 0 var(--naowee-border-radius-default) var(--naowee-border-radius-default) 0;
}

/* ── Text link button ── */
.naowee-btn--link {
  background: none;
  border: none;
  color: var(--naowee-color-text-link-idle);
  height: auto;
  padding: var(--naowee-spacing-tiny) var(--naowee-spacing-small);
  border-radius: var(--naowee-border-radius-default);
}
.naowee-btn--link:hover {
  background: var(--naowee-color-interactive-fill-mute-hover);
  color: var(--naowee-color-text-link-hover);
}

/* ── Animations ── */
@keyframes naowee-spin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TABS
   Modes: Proportional (equal width), Variable (content width)
   States: Idle, Hover, Active
   Selected: On (active tab), Off (inactive tab)
   Features: Optional icon, optional badge dot
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab tokens (from Figma) ── */
:root {
  --naowee-tabs-pipe-height: 3px;
  --naowee-tabs-pipe-radius: var(--naowee-border-radius-tiny);
  --naowee-color-selected-text-idle: var(--naowee-color-orange-700);
  --naowee-color-selected-text-hover: var(--naowee-color-orange-800);
  --naowee-color-selected-text-active: var(--naowee-color-orange-900);
  --naowee-color-selected-fill-idle: var(--naowee-color-orange-700);
  --naowee-color-selected-fill-hover: var(--naowee-color-orange-800);
  --naowee-color-selected-fill-active: var(--naowee-color-orange-900);
}

/* ── Tabs container ── */
.naowee-tabs {
  display: flex;
  border-bottom: var(--naowee-border-width-small) solid var(--naowee-color-border-primary);
  background: var(--naowee-color-fill-primary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.naowee-tabs::-webkit-scrollbar { display: none; }

/* Proportional: tabs share equal width */
.naowee-tabs--proportional .naowee-tab { flex: 1; }

/* ── Single tab ── */
.naowee-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--naowee-spacing-gap-nano);
  height: var(--naowee-size-large);
  padding: var(--naowee-spacing-padding-none) var(--naowee-spacing-padding-xtiny);
  background: var(--naowee-color-interactive-fill-mute-idle);
  border: none;
  border-radius: var(--naowee-border-radius-small) var(--naowee-border-radius-small) 0 0;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--naowee-transition-default), color var(--naowee-transition-default);
  /* Typography: heading/small/narrow */
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: var(--naowee-font-line-height-18);
  letter-spacing: var(--naowee-font-letter-spacing-default);
  text-align: center;
  text-decoration: none;
  font-feature-settings: 'case' 1;
  /* Default: unselected */
  color: var(--naowee-color-text-primary);
}

/* ── Hover (all tabs) ── */
.naowee-tab:hover {
  background: var(--naowee-color-interactive-fill-mute-hover);
}

/* ── Active indicator (underline pipe) ── */
.naowee-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--naowee-tabs-pipe-height);
  border-radius: var(--naowee-tabs-pipe-radius) var(--naowee-tabs-pipe-radius) 0 0;
  background: transparent;
  transition: background var(--naowee-transition-default);
}

/* ── Selected state ── */
.naowee-tab--selected {
  color: var(--naowee-color-selected-text-idle);
}
.naowee-tab--selected::after {
  background: var(--naowee-color-selected-fill-idle);
}
.naowee-tab--selected:hover {
  color: var(--naowee-color-selected-text-hover);
}
.naowee-tab--selected:hover::after {
  background: var(--naowee-color-selected-fill-hover);
}

/* ── Unselected hover ── */
.naowee-tab:not(.naowee-tab--selected):hover {
  color: var(--naowee-color-text-secondary);
}

/* ── Tab icon ── */
.naowee-tab svg,
.naowee-tab__icon {
  width: var(--naowee-size-icon-xtiny);
  height: var(--naowee-size-icon-xtiny);
  flex-shrink: 0;
  opacity: .7;
}
.naowee-tab--selected svg,
.naowee-tab--selected .naowee-tab__icon {
  opacity: 1;
}

/* ── Tab badge (dot indicator) ── */
.naowee-tab__badge {
  width: 8px;
  height: 8px;
  border-radius: var(--naowee-border-radius-full);
  background: var(--naowee-color-fill-accent-loud);
  flex-shrink: 0;
}

/* ── Tab badge (count) ── */
.naowee-tab__count {
  font-size: var(--naowee-font-size-10);
  font-weight: var(--naowee-font-weight-medium);
  background: var(--naowee-color-border-default);
  color: var(--naowee-color-text-secondary);
  padding: 1px 6px;
  border-radius: var(--naowee-border-radius-full);
  min-width: 16px;
  text-align: center;
  line-height: 14px;
}
.naowee-tab--selected .naowee-tab__count {
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
}

/* ── Disabled tab ── */
.naowee-tab--disabled {
  color: var(--naowee-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-tab--disabled::after { background: transparent !important; }

/* ── Sticky tabs (for modals/panels) ── */
.naowee-tabs--sticky {
  position: sticky;
  top: 0;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: BADGE
   Types: Pill (text label), Dot (indicator), Icon
   Hierarchies: Loud (solid bg), Quiet (tinted bg)
   Colors: Informative, Brand, Positive, Caution, Negative, Neutral
   Sizes: Large (20px), Small (16px)
   ═══════════════════════════════════════════════════════════════ */

/* ── Badge tokens ── */
:root {
  --naowee-badge-border-radius: var(--naowee-border-radius-full);
  --naowee-badge-dot-size: 8px;
}

/* ── Badge Pill (base) ── */
.naowee-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--naowee-spacing-gap-xnano);
  height: 20px;
  min-width: 20px;
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
  border-radius: var(--naowee-badge-border-radius);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-10);
  font-weight: var(--naowee-font-weight-medium);
  line-height: var(--naowee-font-line-height-12);
  letter-spacing: var(--naowee-font-letter-spacing-default);
  text-align: center;
  white-space: nowrap;
  border: none;
  font-feature-settings: 'case' 1;
}

/* ── Size: Small ── */
.naowee-badge--small {
  height: 16px;
  min-width: 16px;
  padding: 1px 6px;
  font-size: 9px;
  line-height: 10px;
}

/* ── Loud hierarchy (solid bg, light text) ── */
.naowee-badge--informative {
  background: var(--naowee-color-feedback-fill-informative-loud);
  color: var(--naowee-color-feedback-text-informative-loud-on-fill);
}
.naowee-badge--brand {
  background: var(--naowee-color-orange-700);
  color: var(--naowee-color-white-alpha-100);
}
.naowee-badge--positive {
  background: var(--naowee-color-feedback-fill-positive-loud);
  color: var(--naowee-color-feedback-text-positive-loud-on-fill);
}
.naowee-badge--caution {
  background: var(--naowee-color-feedback-fill-caution-loud);
  color: var(--naowee-color-feedback-text-caution-loud-on-fill);
}
.naowee-badge--negative {
  background: var(--naowee-color-feedback-fill-negative-loud);
  color: var(--naowee-color-feedback-text-negative-loud-on-fill);
}
.naowee-badge--neutral {
  background: var(--naowee-color-feedback-fill-neutral-loud);
  color: var(--naowee-color-white-alpha-100);
}

/* ── Quiet hierarchy (tinted bg, dark text) ── */
.naowee-badge--informative.naowee-badge--quiet {
  background: var(--naowee-color-feedback-fill-informative-quiet);
  color: var(--naowee-color-feedback-text-informative-quiet-on-fill);
}
.naowee-badge--brand.naowee-badge--quiet {
  background: var(--naowee-color-orange-100);
  color: var(--naowee-color-orange-900);
}
.naowee-badge--positive.naowee-badge--quiet {
  background: var(--naowee-color-feedback-fill-positive-quiet);
  color: var(--naowee-color-feedback-text-positive-quiet-on-fill);
}
.naowee-badge--caution.naowee-badge--quiet {
  background: var(--naowee-color-feedback-fill-caution-quiet);
  color: var(--naowee-color-feedback-text-caution-quiet-on-fill);
}
.naowee-badge--negative.naowee-badge--quiet {
  background: var(--naowee-color-feedback-fill-negative-quiet);
  color: var(--naowee-color-feedback-text-negative-quiet-on-fill);
}
.naowee-badge--neutral.naowee-badge--quiet {
  background: var(--naowee-color-feedback-fill-neutral-quiet);
  color: var(--naowee-color-gray-900);
}

/* ── Size: Large (explicit) ── */
.naowee-badge--large {
  height: 24px;
  min-width: 24px;
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-micro);
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}

/* ── Icon inside pill: Left or Right ── */
.naowee-badge svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.naowee-badge--large svg {
  width: 12px;
  height: 12px;
}

/* ── Background type: On fill (for badges on colored backgrounds) ── */
.naowee-badge--on-fill {
  background: var(--naowee-color-white-alpha-100);
  color: var(--naowee-color-text-primary);
}
.naowee-badge--on-fill-inverse {
  background: var(--naowee-color-black-alpha-60);
  color: var(--naowee-color-white-alpha-100);
}

/* ── Badge Dot ── */
.naowee-badge-dot {
  width: var(--naowee-badge-dot-size);
  height: var(--naowee-badge-dot-size);
  border-radius: var(--naowee-badge-border-radius);
  flex-shrink: 0;
}
.naowee-badge-dot--informative { background: var(--naowee-color-feedback-fill-informative-loud); }
.naowee-badge-dot--brand { background: var(--naowee-color-brand-fill-loud); }
.naowee-badge-dot--positive { background: var(--naowee-color-feedback-fill-positive-loud); }
.naowee-badge-dot--caution { background: var(--naowee-color-feedback-fill-caution-loud); }
.naowee-badge-dot--negative { background: var(--naowee-color-feedback-fill-negative-loud); }
.naowee-badge-dot--neutral { background: var(--naowee-color-feedback-fill-neutral-loud); }

/* ── Badge Icon (circle with icon inside) ── */
/* Sizes: Large (20px, icon 16px), Medium (16px, icon 12px), Small (12px, icon 8px) */
.naowee-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--naowee-badge-border-radius);
  flex-shrink: 0;
}
.naowee-badge-icon svg {
  width: 12px;
  height: 12px;
}
.naowee-badge-icon--large {
  width: 20px;
  height: 20px;
}
.naowee-badge-icon--large svg {
  width: 16px;
  height: 16px;
}
.naowee-badge-icon--small {
  width: 12px;
  height: 12px;
}
.naowee-badge-icon--small svg {
  width: 8px;
  height: 8px;
}
.naowee-badge-icon--informative { background: var(--naowee-color-feedback-fill-informative-loud); color: var(--naowee-color-feedback-text-informative-loud-on-fill); }
.naowee-badge-icon--brand { background: var(--naowee-color-brand-fill-loud); color: var(--naowee-color-brand-text-loud-on-fill); }
.naowee-badge-icon--positive { background: var(--naowee-color-feedback-fill-positive-loud); color: var(--naowee-color-feedback-text-positive-loud-on-fill); }
.naowee-badge-icon--caution { background: var(--naowee-color-feedback-fill-caution-loud); color: var(--naowee-color-feedback-text-caution-loud-on-fill); }
.naowee-badge-icon--negative { background: var(--naowee-color-feedback-fill-negative-loud); color: var(--naowee-color-feedback-text-negative-loud-on-fill); }
.naowee-badge-icon--neutral { background: var(--naowee-color-feedback-fill-neutral-loud); color: var(--naowee-color-white-alpha-100); }

/* Quiet variants for icon badge */
.naowee-badge-icon--informative.naowee-badge--quiet { background: var(--naowee-color-feedback-fill-informative-quiet); color: var(--naowee-color-feedback-text-informative-quiet-on-fill); }
.naowee-badge-icon--brand.naowee-badge--quiet { background: var(--naowee-color-brand-fill-quiet); color: var(--naowee-color-orange-900); }
.naowee-badge-icon--positive.naowee-badge--quiet { background: var(--naowee-color-feedback-fill-positive-quiet); color: var(--naowee-color-feedback-text-positive-quiet-on-fill); }
.naowee-badge-icon--caution.naowee-badge--quiet { background: var(--naowee-color-feedback-fill-caution-quiet); color: var(--naowee-color-feedback-text-caution-quiet-on-fill); }
.naowee-badge-icon--negative.naowee-badge--quiet { background: var(--naowee-color-feedback-fill-negative-quiet); color: var(--naowee-color-feedback-text-negative-quiet-on-fill); }
.naowee-badge-icon--neutral.naowee-badge--quiet { background: var(--naowee-color-feedback-fill-neutral-quiet); color: var(--naowee-color-gray-900); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: THUMBNAIL / AVATAR
   Shapes: Rounded (circle), Squared (rounded square)
   Content: Image, Text (initials), Icon
   Sizes: XTiny (16px) → Mega (80px) — 10 steps
   Features: Optional border, stacked groups, addon badge
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ── */
.naowee-thumbnail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--naowee-color-fill-accent-loud);
  color: var(--naowee-color-text-inverse);
  font-family: var(--naowee-font-family);
  font-weight: var(--naowee-font-weight-semibold);
  text-align: center;
  white-space: nowrap;
  font-feature-settings: 'case' 1;
  position: relative;
  /* Default: Medium 40px rounded */
  width: var(--naowee-size-medium);
  height: var(--naowee-size-medium);
  border-radius: var(--naowee-border-radius-full);
  font-size: var(--naowee-font-size-14);
  line-height: var(--naowee-font-line-height-18);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xnano);
}

/* ── Image content ── */
.naowee-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ── Shape: Squared ── */
.naowee-thumbnail--squared { border-radius: var(--naowee-border-radius-square-to-circle-large); }

/* ── Show border ── */
.naowee-thumbnail--bordered {
  border: var(--naowee-border-width-medium) solid var(--naowee-color-border-primary, #d0d4e6);
}

/* ── Sizes ── */
.naowee-thumbnail--xtiny {
  width: 16px; height: 16px;
  font-size: 0; padding: 0;
}
.naowee-thumbnail--tiny {
  width: var(--naowee-size-tiny); height: var(--naowee-size-tiny);
  font-size: var(--naowee-font-size-10); line-height: var(--naowee-font-line-height-12);
  padding: var(--naowee-spacing-padding-pico);
}
.naowee-thumbnail--xsmall {
  width: var(--naowee-size-xsmall); height: var(--naowee-size-xsmall);
  font-size: var(--naowee-font-size-10); line-height: var(--naowee-font-line-height-12);
  padding: var(--naowee-spacing-padding-pico);
}
.naowee-thumbnail--small {
  width: var(--naowee-size-small); height: var(--naowee-size-small);
  font-size: var(--naowee-font-size-12); line-height: var(--naowee-font-line-height-16);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xnano);
}
/* .naowee-thumbnail--medium is default (40px) */
.naowee-thumbnail--large {
  width: var(--naowee-size-large); height: var(--naowee-size-large);
  font-size: var(--naowee-font-size-16); line-height: var(--naowee-font-line-height-18);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xnano);
}
.naowee-thumbnail--xlarge {
  width: var(--naowee-size-xlarge); height: var(--naowee-size-xlarge);
  font-size: var(--naowee-font-size-18); line-height: var(--naowee-font-line-height-22);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
}
.naowee-thumbnail--huge {
  width: var(--naowee-size-huge); height: var(--naowee-size-huge);
  font-size: var(--naowee-font-size-20); line-height: var(--naowee-font-line-height-24);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
}
.naowee-thumbnail--xhuge {
  width: var(--naowee-size-xhuge); height: var(--naowee-size-xhuge);
  font-size: var(--naowee-font-size-24); line-height: var(--naowee-font-line-height-28);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
}
.naowee-thumbnail--mega {
  width: var(--naowee-size-mega); height: var(--naowee-size-mega);
  font-size: var(--naowee-font-size-28); line-height: var(--naowee-font-line-height-34);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
}

/* ── Squared size adjustments ── */
.naowee-thumbnail--squared.naowee-thumbnail--xtiny { border-radius: var(--naowee-border-radius-tiny); }
.naowee-thumbnail--squared.naowee-thumbnail--tiny { border-radius: var(--naowee-border-radius-tiny); }
.naowee-thumbnail--squared.naowee-thumbnail--xsmall { border-radius: var(--naowee-border-radius-xsmall); }
.naowee-thumbnail--squared.naowee-thumbnail--small { border-radius: var(--naowee-border-radius-small); }
.naowee-thumbnail--squared.naowee-thumbnail--large { border-radius: var(--naowee-border-radius-medium); }
.naowee-thumbnail--squared.naowee-thumbnail--xlarge { border-radius: var(--naowee-border-radius-large); }
.naowee-thumbnail--squared.naowee-thumbnail--huge { border-radius: var(--naowee-border-radius-large); }
.naowee-thumbnail--squared.naowee-thumbnail--xhuge { border-radius: var(--naowee-border-radius-xlarge); }
.naowee-thumbnail--squared.naowee-thumbnail--mega { border-radius: var(--naowee-border-radius-xlarge); }

/* ── Hierarchy: Loud (default — solid accent bg, white text) ── */
/* Already default via .naowee-thumbnail base */

/* ── Hierarchy: Quiet (tinted accent bg, accent icon/text) ── */
.naowee-thumbnail--quiet {
  background: var(--naowee-color-fill-accent-quiet, #ffedc7);
  color: var(--naowee-color-text-accent);
}

/* ── Hierarchy: Mute (white bg, secondary icon/text) ── */
.naowee-thumbnail--mute {
  background: var(--naowee-color-fill-primary);
  color: var(--naowee-color-text-secondary);
}

/* ── Custom color (webapp: inline style overrides bg, these set text/contrast) ── */
.naowee-thumbnail--custom { color: var(--naowee-color-text-inverse); }

/* ── Feedback colors (for status indicators) ── */
.naowee-thumbnail--positive { background: var(--naowee-color-feedback-fill-positive-loud); color: var(--naowee-color-text-inverse); }
.naowee-thumbnail--positive.naowee-thumbnail--quiet { background: var(--naowee-color-feedback-fill-positive-quiet); color: var(--naowee-color-green-800); }
.naowee-thumbnail--negative { background: var(--naowee-color-feedback-fill-negative-loud); color: var(--naowee-color-text-inverse); }
.naowee-thumbnail--negative.naowee-thumbnail--quiet { background: var(--naowee-color-feedback-fill-negative-quiet); color: var(--naowee-color-red-800); }
.naowee-thumbnail--informative { background: var(--naowee-color-feedback-fill-informative-loud); color: var(--naowee-color-text-inverse); }
.naowee-thumbnail--informative.naowee-thumbnail--quiet { background: var(--naowee-color-feedback-fill-informative-quiet); color: var(--naowee-color-blue-900); }
.naowee-thumbnail--neutral { background: var(--naowee-color-gray-400); color: var(--naowee-color-text-inverse); }
.naowee-thumbnail--neutral.naowee-thumbnail--quiet { background: var(--naowee-color-fill-secondary); color: var(--naowee-color-text-secondary); }

/* ── Hover state (for clickable thumbnails) ── */
.naowee-thumbnail--clickable { cursor: pointer; transition: transform var(--naowee-transition-fast), box-shadow var(--naowee-transition-default); }
.naowee-thumbnail--clickable:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* ── Icon content ── */
.naowee-thumbnail svg {
  width: 60%;
  height: 60%;
}

/* ── Stacked group ── */
/* ── Stacked thumbnails (overlapping) ── */
.naowee-thumbnail-stack {
  display: flex;
  align-items: flex-start;
}
.naowee-thumbnail-stack .naowee-thumbnail {
  border: var(--naowee-border-width-medium) solid var(--naowee-color-border-primary, #d0d4e6);
  background: var(--naowee-color-fill-primary);
  color: var(--naowee-color-icon-primary);
  flex-shrink: 0;
}
.naowee-thumbnail-stack .naowee-thumbnail + .naowee-thumbnail { margin-left: -8px; z-index: -1; }
.naowee-thumbnail-stack .naowee-thumbnail { position: relative; z-index: 4; }
.naowee-thumbnail-stack .naowee-thumbnail:nth-child(2) { z-index: 3; }
.naowee-thumbnail-stack .naowee-thumbnail:nth-child(3) { z-index: 2; }
.naowee-thumbnail-stack .naowee-thumbnail:nth-child(4) { z-index: 1; }
.naowee-thumbnail-stack--small .naowee-thumbnail + .naowee-thumbnail { margin-left: -6px; }
.naowee-thumbnail-stack--large .naowee-thumbnail + .naowee-thumbnail { margin-left: -12px; }
.naowee-thumbnail-stack--mega .naowee-thumbnail + .naowee-thumbnail { margin-left: -16px; }

/* ── Overflow counter ("+4") ── */
.naowee-thumbnail--overflow {
  background: var(--naowee-color-fill-secondary);
  color: var(--naowee-color-text-secondary);
  font-family: var(--naowee-font-family);
  font-weight: var(--naowee-font-weight-semibold);
  display: flex; align-items: center; justify-content: center;
}

/* ── Addon (badge overlay on thumbnail) ── */
.naowee-thumbnail-addon {
  position: relative;
  display: inline-flex;
}
.naowee-thumbnail-addon .naowee-badge-icon,
.naowee-thumbnail-addon__badge {
  position: absolute;
  bottom: 0; right: 0;
  width: 16px; height: 16px;
  border-radius: var(--naowee-border-radius-full);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.naowee-thumbnail-addon__badge svg { width: 12px; height: 12px; }
/* Addon badge colors */
.naowee-thumbnail-addon--informative .naowee-thumbnail-addon__badge { background: var(--naowee-color-feedback-fill-informative-loud); }
.naowee-thumbnail-addon--positive .naowee-thumbnail-addon__badge { background: var(--naowee-color-feedback-fill-positive-loud); }
.naowee-thumbnail-addon--caution .naowee-thumbnail-addon__badge { background: var(--naowee-color-feedback-fill-caution-loud, #d74009); }
.naowee-thumbnail-addon--negative .naowee-thumbnail-addon__badge { background: var(--naowee-color-feedback-fill-negative-loud); }

/* ── Grid thumbnails (2x2 grid) ── */
.naowee-thumbnail-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--naowee-spacing-gap-xnano);
  padding: var(--naowee-spacing-padding-xnano);
  background: var(--naowee-color-fill-secondary);
  border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
  overflow: hidden;
}
.naowee-thumbnail-grid .naowee-thumbnail {
  width: 100%; height: auto; aspect-ratio: 1;
  background: var(--naowee-color-fill-primary);
  color: var(--naowee-color-icon-primary);
}
.naowee-thumbnail-grid--small { border-radius: var(--naowee-border-radius-small, 8px); }
.naowee-thumbnail-grid--large { border-radius: var(--naowee-border-radius-xlarge, 20px); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: MODAL
   Types: Eventful (header/body/footer), Confirmation, Slot (free)
   Desktop: 480px default, 800px wide
   Mobile: full-width bottom sheet
   Footer layouts: spread, end-aligned, stacked
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal tokens (from Figma) ── */
:root {
  --naowee-shadow-modal-ds: 0px 8px 12px 0px rgba(40,40,52,.1);
  --naowee-shadow-modal-sticky-header: 0 6px 16px 0 rgba(0,0,0,.1);
  --naowee-modal-width-default: 480px;
  --naowee-modal-width-wide: 800px;
  --naowee-modal-width-max: calc(100vw - 64px);
}

/* ── Overlay / Dimmer ── */
.naowee-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(40, 40, 52, 0.6);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px; /* Margins */
  animation: naowee-fadeIn .2s ease;
}
.naowee-modal-overlay.open { display: flex; }

/* ── Modal container ── */
.naowee-modal {
  background: var(--naowee-color-fill-primary);
  border-radius: var(--naowee-border-radius-containers-default); /* 20px */
  width: var(--naowee-modal-width-default);
  max-width: var(--naowee-modal-width-max);
  max-height: calc(100vh - 64px);
  box-shadow: var(--naowee-shadow-modal-ds);
  animation: naowee-scaleIn .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding: var(--naowee-spacing-padding-small) 0; /* 32px top + bottom */
  overflow: clip;
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}
.naowee-modal--wide { width: var(--naowee-modal-width-wide); }
/* Scrollable modes give full viewport height to allow inner scroll */
.naowee-modal--scrollable {
  width: var(--naowee-modal-width-wide);
  height: calc(100vh - 64px);
}

/* ── Header (static) ── */
.naowee-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0 var(--naowee-spacing-padding-small); /* 0 32px */
  width: 100%;
  flex-shrink: 0;
}
.naowee-modal__title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-xmicro); /* 8px */
  min-height: 24px;
  justify-content: center;
}
.naowee-modal__pagination {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-secondary);
}
.naowee-modal__title {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-20);
  font-weight: var(--naowee-font-weight-bold);
  line-height: var(--naowee-font-line-height-24);
  color: var(--naowee-color-text-primary);
  margin: 0;
}
.naowee-modal__subtitle {
  font-size: var(--naowee-font-size-12);
  color: var(--naowee-color-text-secondary);
  margin-top: 2px;
}

/* ── Dismiss button (static header: 24x24) ── */
.naowee-modal__dismiss {
  width: 24px;
  height: 24px;
  border-radius: var(--naowee-border-radius-small);
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--naowee-color-text-primary);
  padding: 0;
  transition: background var(--naowee-transition-fast);
}
.naowee-modal__dismiss:hover {
  background: var(--naowee-color-gray-100, #f4f5f9);
}
.naowee-modal__dismiss svg { width: 20px; height: 20px; }

/* ── Body ── */
.naowee-modal__body {
  padding: var(--naowee-spacing-padding-xtiny) var(--naowee-spacing-padding-small) 0;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  width: 100%;
  flex: 1;
  min-height: 0;
}
.naowee-modal__body p { margin: 0 0 14px 0; }
.naowee-modal__body p:last-child { margin-bottom: 0; }
.naowee-modal__body ul { margin: 0 0 14px 0; padding-left: 20px; }
.naowee-modal__body ul li { margin-bottom: 8px; }

/* ── Footer (static) ── */
.naowee-modal__footer {
  padding: var(--naowee-spacing-padding-small) var(--naowee-spacing-padding-small) 0;
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  width: 100%;
  flex-shrink: 0;
  justify-content: flex-start;
}
/* Footer layouts (custom) */
.naowee-modal__footer--spread { justify-content: space-between; }
.naowee-modal__footer--end { justify-content: flex-end; }
.naowee-modal__footer--center { justify-content: center; }
.naowee-modal__footer--stacked {
  flex-direction: column;
  align-items: stretch;
}
.naowee-modal__footer--stacked .naowee-btn { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Fixed header / Fixed footer (scrollable)
   ═══════════════════════════════════════════════════════════════ */

/* When fixed header is active, switch layout so body scrolls between them */
.naowee-modal--fixed-header,
.naowee-modal--fixed-footer {
  padding: 0; /* remove py 32 — header/footer handle their own padding */
}
.naowee-modal--fixed-header .naowee-modal__header {
  padding: var(--naowee-spacing-padding-xtiny) var(--naowee-spacing-padding-small); /* 16 32 */
  background: var(--naowee-color-fill-primary);
  box-shadow: var(--naowee-shadow-modal-sticky-header);
  gap: var(--naowee-spacing-gap-xmicro);
  position: relative;
  z-index: 2;
}
.naowee-modal--fixed-header .naowee-modal__title {
  font-size: 18px;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naowee-modal--fixed-header .naowee-modal__dismiss {
  width: 32px;
  height: 32px;
}
.naowee-modal--fixed-header .naowee-modal__dismiss svg { width: 24px; height: 24px; }

.naowee-modal--fixed-header .naowee-modal__body,
.naowee-modal--fixed-footer .naowee-modal__body {
  overflow-y: auto;
  padding: var(--naowee-spacing-padding-small);
  white-space: normal;
}
.naowee-modal--fixed-header:not(.naowee-modal--fixed-footer) .naowee-modal__body {
  padding-bottom: var(--naowee-spacing-padding-small);
}
.naowee-modal--fixed-footer .naowee-modal__footer {
  padding: var(--naowee-spacing-padding-small);
  background: var(--naowee-color-fill-primary);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.naowee-modal--fixed-footer:not(.naowee-modal--fixed-header) .naowee-modal__header {
  padding-top: var(--naowee-spacing-padding-small);
}
.naowee-modal--fixed-footer:not(.naowee-modal--fixed-header) .naowee-modal__body {
  padding-top: var(--naowee-spacing-padding-xtiny);
}

/* Thumbnail-centered content helpers (not a variant, just helpers) */
.naowee-modal__centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--naowee-spacing-gap-small, 16px);
}
.naowee-modal__centered .naowee-modal__title { text-align: center; }
.naowee-modal--centered .naowee-modal__header { justify-content: center; }
.naowee-modal--centered .naowee-modal__footer { justify-content: center; }

/* ── Modal animations ── */
@keyframes naowee-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes naowee-scaleIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

/* ── Mobile: bottom sheet ── */
@media (max-width: 600px) {
  .naowee-modal-overlay { align-items: flex-end; }
  .naowee-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--naowee-border-radius-containers-default) var(--naowee-border-radius-containers-default) 0 0;
    animation: naowee-slideUp .3s cubic-bezier(.4,0,.2,1);
  }
}
@keyframes naowee-slideUp {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TEXTFIELD
   Sizes: Large (48px), Medium (40px — default), Small (32px)
   States: Idle, Hover, Focus, Error, Disabled, Filled
   Features: Label, Helper text, Prefix/Suffix, Icon, Counter
   ═══════════════════════════════════════════════════════════════ */

/* ── Textfield wrapper ── */
.naowee-textfield {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}

/* ── Label ── */
.naowee-textfield__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  padding-bottom: var(--naowee-spacing-padding-pico);
}
.naowee-textfield__label--required::after {
  content: ' *';
  color: var(--naowee-color-feedback-fill-negative-loud);
}

/* ── Input container (the bordered box) ── */
.naowee-textfield__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  height: 48px; /* Large default per Figma */
  padding: 0 var(--naowee-spacing-padding-micro);
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-600, #8788ab); /* Figma: interactive-border-idle */
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  transition: border-color var(--naowee-transition-default), border-width var(--naowee-transition-default), box-shadow var(--naowee-transition-default);
}

/* Fix: compensate padding for 2px border so height stays 48px */
.naowee-textfield__input-wrap {
  box-sizing: border-box;
}

/* ── Input element ── */
.naowee-textfield__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  padding: 0;
  font-feature-settings: 'case' 1;
}
.naowee-textfield__input::placeholder {
  color: var(--naowee-color-text-secondary);
  font-weight: var(--naowee-font-weight-regular);
}

/* ── States ── */
/* Hover — darker border */
.naowee-textfield__input-wrap:hover {
  border-color: var(--naowee-color-gray-700, #646587);
}
/* Focus / Active — accent 2px */
.naowee-textfield__input-wrap:focus-within,
.naowee-textfield--active .naowee-textfield__input-wrap {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 0 11px; /* compensate 1px extra border */
}

/* ── Error (idle) ── */
.naowee-textfield--error .naowee-textfield__input-wrap {
  border-color: var(--naowee-color-feedback-border-negative-loud, #ed314a);
}
/* Error active (focus/click) */
.naowee-textfield--error.naowee-textfield--active .naowee-textfield__input-wrap,
.naowee-textfield--error .naowee-textfield__input-wrap:focus-within {
  border-width: 2px;
  border-color: var(--naowee-color-feedback-border-negative-loud, #ed314a);
  padding: 0 11px;
}

/* ── Caution (idle) — same as idle border, feedback only in helper ── */
.naowee-textfield--caution .naowee-textfield__input-wrap {
  border-color: var(--naowee-color-gray-600, #8788ab);
}
/* Caution active — accent 2px */
.naowee-textfield--caution.naowee-textfield--active .naowee-textfield__input-wrap,
.naowee-textfield--caution .naowee-textfield__input-wrap:focus-within {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 0 11px;
}

/* ── Validated — accent 2px border + green check icon ── */
.naowee-textfield--validated .naowee-textfield__input-wrap {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 0 11px;
}
.naowee-textfield__check {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--naowee-color-feedback-fill-positive-loud);
  display: flex; align-items: center; justify-content: center;
}
.naowee-textfield__check svg { width: 20px; height: 20px; }

/* ── Loading — accent 2px + orange spinner ── */
.naowee-textfield--loading .naowee-textfield__input-wrap {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 0 11px;
}
.naowee-textfield__spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--naowee-color-interactive-border-active);
  animation: naowee-spin 0.8s linear infinite;
}
.naowee-textfield__spinner svg { width: 16px; height: 16px; }

/* ── Disabled ── */
.naowee-textfield--disabled .naowee-textfield__input-wrap {
  background: var(--naowee-color-fill-primary);
  border-color: var(--naowee-color-border-disabled, #b5b9d4);
  cursor: not-allowed;
}
.naowee-textfield--disabled .naowee-textfield__input,
.naowee-textfield--disabled .naowee-textfield__input::placeholder {
  color: var(--naowee-color-text-disabled, #9c9ebf);
  cursor: not-allowed;
}
.naowee-textfield--disabled .naowee-textfield__label {
  color: var(--naowee-color-text-disabled, #9c9ebf);
}
.naowee-textfield--disabled .naowee-textfield__prefix,
.naowee-textfield--disabled .naowee-textfield__suffix {
  color: var(--naowee-color-text-disabled, #9c9ebf);
}

/* ── Read only — no border, no background ── */
.naowee-textfield--readonly .naowee-textfield__input-wrap {
  background: transparent;
  border-color: transparent;
  padding: 0;
}
.naowee-textfield--readonly .naowee-textfield__input { cursor: default; }
.naowee-textfield--readonly .naowee-textfield__label {
  color: var(--naowee-color-text-secondary);
}

/* ── Sizes ── */
.naowee-textfield--small .naowee-textfield__input-wrap {
  height: 32px;
  padding: 0 var(--naowee-spacing-padding-nano, 6px);
  border-radius: var(--naowee-border-radius-actions-inputs-compact);
}
.naowee-textfield--small .naowee-textfield__input,
.naowee-textfield--small .naowee-textfield__prefix,
.naowee-textfield--small .naowee-textfield__suffix {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-textfield--small .naowee-textfield__label {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-textfield--small.naowee-textfield--active .naowee-textfield__input-wrap,
.naowee-textfield--small .naowee-textfield__input-wrap:focus-within {
  padding: 0 5px; /* compensate 2px border */
}

/* ── Prefix / Suffix ── */
.naowee-textfield__prefix,
.naowee-textfield__suffix {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.naowee-textfield__prefix svg,
.naowee-textfield__suffix svg {
  width: 20px;
  height: 20px;
}

/* ── Clear button (X) ── */
.naowee-textfield__clear {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--naowee-border-radius-small);
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-secondary);
  cursor: pointer;
  transition: background var(--naowee-transition-fast);
}
.naowee-textfield__clear:hover {
  background: var(--naowee-color-fill-secondary);
}
.naowee-textfield__clear svg { width: 20px; height: 20px; }
.naowee-textfield--small .naowee-textfield__clear { width: 16px; height: 16px; border-radius: var(--naowee-border-radius-tiny); }
.naowee-textfield--small .naowee-textfield__clear svg { width: 16px; height: 16px; }

/* ── Textarea variant ── */
.naowee-textfield--textarea .naowee-textfield__input-wrap {
  height: auto;
  min-height: 80px;
  align-items: flex-start;
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
}
.naowee-textfield--textarea .naowee-textfield__input {
  resize: vertical;
  min-height: 60px;
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: INPUT STEPPER
   Numeric +/- stepper with Value + Complementary text
   Sizes: Large (48px), Small (32px)
   States: Idle, Hover, Active, Loading, Caution, Error, Disabled
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.naowee-input-stepper {
  display: flex; flex-direction: column;
  width: 100%;
  font-feature-settings: 'case' 1;
}

/* ── Content (input container) ── */
.naowee-input-stepper__content {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  height: var(--naowee-size-height-inputs-large, 48px);
  padding: var(--naowee-spacing-padding-xmicro);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  overflow: clip;
  transition: border-color var(--naowee-transition-default);
}

/* ── Input row (- [value] +) ── */
.naowee-input-stepper__input {
  display: flex; align-items: center;
  justify-content: space-between;
  width: 100%; flex: 1; min-height: 0;
}

/* ── +/- Buttons ── */
.naowee-input-stepper__btn {
  width: 32px; height: 32px; flex-shrink: 0;
  border: none; cursor: pointer;
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
  display: flex; align-items: center; justify-content: center;
  padding: var(--naowee-spacing-padding-pico);
  transition: background var(--naowee-transition-default);
  font-family: var(--naowee-font-family);
}
.naowee-input-stepper__btn:hover { background: var(--naowee-color-interactive-fill-quiet-hover); }
.naowee-input-stepper__btn:active { background: var(--naowee-color-interactive-fill-quiet-active); }
.naowee-input-stepper__btn svg { width: 16px; height: 16px; }
.naowee-input-stepper__btn:disabled,
.naowee-input-stepper__btn--disabled {
  background: var(--naowee-color-fill-disabled, #d0d4e6);
  color: var(--naowee-color-icon-disabled);
  cursor: not-allowed; pointer-events: none;
}

/* ── Value area (center) ── */
.naowee-input-stepper__value {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: var(--naowee-spacing-gap-xnano);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  overflow: clip; white-space: nowrap;
  height: 100%;
}
.naowee-input-stepper__value-text { color: var(--naowee-color-text-primary); }
.naowee-input-stepper__value-input {
  border: none; background: transparent; outline: none;
  font: inherit; color: var(--naowee-color-text-primary);
  text-align: center; width: 48px;
  -moz-appearance: textfield;
}
.naowee-input-stepper__value-input::-webkit-inner-spin-button,
.naowee-input-stepper__value-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.naowee-input-stepper__value-comp { color: var(--naowee-color-text-secondary); }

/* ── States ── */
.naowee-input-stepper__content:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-input-stepper--active .naowee-input-stepper__content {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}
.naowee-input-stepper--caution .naowee-input-stepper__content {
  border-color: var(--naowee-color-feedback-border-caution-loud);
}
.naowee-input-stepper--caution-active .naowee-input-stepper__content {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}
.naowee-input-stepper--error .naowee-input-stepper__content {
  border-color: var(--naowee-color-feedback-border-negative-loud);
}
.naowee-input-stepper--error-active .naowee-input-stepper__content {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-feedback-border-negative-loud);
}
.naowee-input-stepper--disabled .naowee-input-stepper__content {
  border-color: var(--naowee-color-border-disabled);
}
.naowee-input-stepper--disabled .naowee-input-stepper__value {
  color: var(--naowee-color-text-disabled);
}
.naowee-input-stepper--disabled .naowee-input-stepper__value-text,
.naowee-input-stepper--disabled .naowee-input-stepper__value-comp {
  color: var(--naowee-color-text-disabled);
}
.naowee-input-stepper--disabled .naowee-input-stepper__btn {
  background: var(--naowee-color-fill-disabled, #d0d4e6);
  color: var(--naowee-color-icon-disabled);
  cursor: not-allowed; pointer-events: none;
}
.naowee-input-stepper--disabled .naowee-input-stepper__label {
  color: var(--naowee-color-text-disabled);
}

/* ── Label ── */
.naowee-input-stepper__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-primary);
  padding-bottom: var(--naowee-spacing-padding-pico);
}

/* ── Small size ── */
.naowee-input-stepper--small .naowee-input-stepper__content {
  height: var(--naowee-size-height-inputs-small, 32px);
  padding: var(--naowee-spacing-padding-xnano);
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
}
.naowee-input-stepper--small .naowee-input-stepper__btn {
  width: 24px; height: 24px;
  border-radius: var(--naowee-border-radius-tiny, 4px);
}
.naowee-input-stepper--small .naowee-input-stepper__btn svg { width: 12px; height: 12px; }
.naowee-input-stepper--small .naowee-input-stepper__value {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-input-stepper--small .naowee-input-stepper__label {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SEARCHBOX
   States: Idle, Hover, Focus, Error, Disabled
   Features: Search icon, clear button, suggestions dropdown
   ═══════════════════════════════════════════════════════════════ */

/* ── Searchbox wrapper ── */
.naowee-searchbox {
  position: relative;
  width: 100%;
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
}
.naowee-searchbox--collapsed {
  width: 48px;
}
.naowee-searchbox--collapsed.naowee-searchbox--small {
  width: 32px;
}

/* ── Input container ── */
.naowee-searchbox__input-wrap {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  height: var(--naowee-size-height-inputs-large, 48px);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-full);
  transition: border-color 0.25s cubic-bezier(.4,0,.2,1),
              width 0.35s cubic-bezier(.4,0,.2,1),
              padding 0.35s cubic-bezier(.4,0,.2,1),
              gap 0.35s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  font-feature-settings: 'case' 1;
}
.naowee-searchbox__input-wrap:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-searchbox__input-wrap:focus-within {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}

/* ── Shape: Squared ── */
.naowee-searchbox--squared .naowee-searchbox__input-wrap {
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
}

/* ── Search icon ── */
.naowee-searchbox__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--naowee-color-icon-secondary);
}
.naowee-searchbox__icon svg { width: 24px; height: 24px; }

/* ── Input ── */
.naowee-searchbox__input {
  flex: 1; min-width: 0; height: 100%;
  border: none; background: transparent; outline: none;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-primary);
  padding: 0;
}
.naowee-searchbox__input::placeholder { color: var(--naowee-color-text-secondary); }

/* ── Clear button ── */
.naowee-searchbox__clear {
  width: 24px; height: 24px;
  border-radius: var(--naowee-border-radius-small, 8px);
  border: none;
  background: transparent;
  color: var(--naowee-color-icon-secondary);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background var(--naowee-transition-default);
}
.naowee-searchbox__clear svg { width: 20px; height: 20px; }
.naowee-searchbox__clear:hover { background: var(--naowee-color-interactive-fill-mute-hover); }
.naowee-searchbox--has-value .naowee-searchbox__clear { display: flex; }
.naowee-searchbox__input:not(:placeholder-shown) ~ .naowee-searchbox__clear { display: flex; }

/* ── Size: Medium (40px, default for medium) ── */
.naowee-searchbox--medium .naowee-searchbox__input-wrap {
  height: var(--naowee-size-height-inputs-medium, 40px);
  padding: var(--naowee-spacing-padding-nano, 6px) var(--naowee-spacing-padding-xmicro);
}

/* ── Size: Small (32px) ── */
.naowee-searchbox--small .naowee-searchbox__input-wrap {
  height: var(--naowee-size-height-inputs-small, 32px);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-nano, 6px);
}
.naowee-searchbox--small .naowee-searchbox__icon { width: 20px; height: 20px; }
.naowee-searchbox--small .naowee-searchbox__icon svg { width: 20px; height: 20px; }
.naowee-searchbox--small .naowee-searchbox__input { font-size: var(--naowee-font-size-12); line-height: var(--naowee-font-line-height-16); }
.naowee-searchbox--small.naowee-searchbox--squared .naowee-searchbox__input-wrap {
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
}

/* ── Collapsed (icon-only) with smooth transition ── */
.naowee-searchbox__input,
.naowee-searchbox__clear,
.naowee-searchbox__split {
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1),
              max-width 0.35s cubic-bezier(.4,0,.2,1);
  max-width: 999px;
  opacity: 1;
}
.naowee-searchbox--collapsed .naowee-searchbox__input-wrap {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.naowee-searchbox--collapsed .naowee-searchbox__input,
.naowee-searchbox--collapsed .naowee-searchbox__clear,
.naowee-searchbox--collapsed .naowee-searchbox__split {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
  overflow: hidden;
}
.naowee-searchbox--collapsed.naowee-searchbox--small .naowee-searchbox__input-wrap {
  width: 32px;
  height: 32px;
}

/* ── Suggestions dropdown ── */
.naowee-searchbox__menu {
  position: absolute;
  top: calc(100% + var(--naowee-spacing-gap-xnano));
  left: 0; right: 0;
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-border-dark);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  box-shadow: var(--naowee-shadow-modal-ds);
  z-index: 999; max-height: 260px; overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity var(--naowee-transition-default), max-height var(--naowee-transition-smooth);
}
.naowee-searchbox__menu.open { opacity: 1; pointer-events: auto; }

/* ── Suggestion item ── */
.naowee-searchbox__item {
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-primary); cursor: pointer;
  display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro);
  transition: background var(--naowee-transition-fast);
}
.naowee-searchbox__item:hover { background: var(--naowee-color-fill-secondary); }
.naowee-searchbox__item--selected {
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
  font-weight: var(--naowee-font-weight-semibold);
}

/* ── Split variant: dropdown selector on the left ── */
.naowee-searchbox__split {
  display: flex; align-items: center;
  align-self: stretch;
  padding: 0 var(--naowee-spacing-padding-micro);
  border-right: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  flex-shrink: 0; cursor: pointer;
  gap: var(--naowee-spacing-gap-pico, 2px);
}
.naowee-searchbox__split-label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-secondary);
  white-space: nowrap;
}
.naowee-searchbox__split-chevron {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--naowee-color-icon-secondary);
}
.naowee-searchbox__split-chevron svg { width: 16px; height: 16px; }
.naowee-searchbox--small .naowee-searchbox__split {
  padding: 0 var(--naowee-spacing-padding-xmicro) 0 var(--naowee-spacing-padding-micro);
}
.naowee-searchbox--small .naowee-searchbox__split-label {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-searchbox--small .naowee-searchbox__split-chevron { width: 12px; height: 12px; }
.naowee-searchbox--small .naowee-searchbox__split-chevron svg { width: 12px; height: 12px; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: DROPDOWN
   Types: Single select, Multiple select, Standalone (inline)
   Sizes: Large (48px), Medium (40px — default), Small (32px)
   States: Idle, Hover, Active/Open, Error, Disabled, Read-only
   Features: Label, Helper, Left icon, Clear button, Chevron
   ═══════════════════════════════════════════════════════════════ */

/* ── Dropdown wrapper ── */
.naowee-dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

/* ── Label ── */
.naowee-dropdown__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  padding-bottom: var(--naowee-spacing-padding-pico);
}

/* ── Trigger (the clickable input area) ── */
.naowee-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  width: 100%;
  height: var(--naowee-size-height-inputs-large);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  cursor: pointer;
  transition: border-color var(--naowee-transition-default), box-shadow var(--naowee-transition-default);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  text-align: left;
}

/* ── Placeholder text ── */
.naowee-dropdown__placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--naowee-color-text-secondary);
}
/* Value selected */
.naowee-dropdown__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--naowee-color-text-primary);
}

/* ── Controls group (clear + chevron, right side) ── */
.naowee-dropdown__controls {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
  flex-shrink: 0;
}

/* ── Chevron arrow ── */
.naowee-dropdown__chevron {
  width: var(--naowee-size-icon-tiny);
  height: var(--naowee-size-icon-tiny);
  flex-shrink: 0;
  color: var(--naowee-color-icon-primary);
  transition: transform var(--naowee-transition-default);
  display: flex;
  align-items: center;
}
.naowee-dropdown--open .naowee-dropdown__chevron { transform: rotate(180deg); }

/* ── Clear button ── */
.naowee-dropdown__clear {
  width: var(--naowee-size-xsmall);
  height: var(--naowee-size-xsmall);
  border-radius: var(--naowee-border-radius-small);
  border: none;
  background: var(--naowee-color-interactive-fill-mute-idle);
  color: var(--naowee-color-icon-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--naowee-transition-default);
  padding: 0;
}
.naowee-dropdown__clear:hover { background: var(--naowee-color-interactive-fill-mute-hover); }
.naowee-dropdown__clear svg { width: 16px; height: 16px; }

/* ── Tags container (multiple select) ── */
.naowee-dropdown__tags {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
  flex-wrap: wrap;
  overflow: hidden;
}

/* ── Helper container ── */
.naowee-dropdown__helper {
  padding-top: var(--naowee-spacing-padding-xnano);
}

/* ── Left icon ── */
.naowee-dropdown__icon {
  width: var(--naowee-size-icon-xsmall);
  height: var(--naowee-size-icon-xsmall);
  flex-shrink: 0;
  color: var(--naowee-color-icon-secondary);
}

/* ── States ── */
.naowee-dropdown__trigger:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-dropdown--open .naowee-dropdown__trigger {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}
.naowee-dropdown--error .naowee-dropdown__trigger {
  border-color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-dropdown--error.naowee-dropdown--open .naowee-dropdown__trigger {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-dropdown--disabled .naowee-dropdown__trigger {
  background: var(--naowee-color-fill-primary);
  border-color: var(--naowee-color-border-disabled);
  cursor: not-allowed;
  color: var(--naowee-color-text-disabled);
}
.naowee-dropdown--disabled .naowee-dropdown__label { color: var(--naowee-color-text-disabled); }
.naowee-dropdown--disabled .naowee-dropdown__placeholder { color: var(--naowee-color-text-disabled); }
.naowee-dropdown--disabled .naowee-dropdown__chevron { color: var(--naowee-color-icon-disabled); }

/* ── Loading state ── */
.naowee-dropdown--loading .naowee-dropdown__trigger {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
  pointer-events: none;
}

/* ── Standalone (inline, no border/bg) ── */
.naowee-dropdown--standalone .naowee-dropdown__trigger {
  border: none;
  background: none;
  padding: 0;
  height: auto;
  gap: var(--naowee-spacing-gap-xnano);
}
.naowee-dropdown--standalone .naowee-dropdown__trigger:hover { background: none; }

/* ── Small size overrides ── */
.naowee-dropdown--small .naowee-dropdown__label { font-size: var(--naowee-font-size-12); line-height: var(--naowee-font-line-height-16); }
.naowee-dropdown--small .naowee-dropdown__trigger {
  height: var(--naowee-size-height-inputs-small);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-nano);
  border-radius: var(--naowee-border-radius-actions-inputs-compact);
  font-size: var(--naowee-font-size-12);
  gap: var(--naowee-spacing-gap-pico);
}
.naowee-dropdown--small .naowee-dropdown__chevron { width: var(--naowee-size-icon-xtiny); height: var(--naowee-size-icon-xtiny); }
.naowee-dropdown--readonly .naowee-dropdown__trigger {
  background: var(--naowee-color-fill-secondary);
  border-color: transparent;
  cursor: default;
}

/* ── Sizes ── */
/* Default is Large (48px) */
.naowee-dropdown--medium .naowee-dropdown__trigger {
  height: var(--naowee-size-height-inputs-medium);
}
.naowee-dropdown--small .naowee-dropdown__trigger {
  height: var(--naowee-size-height-inputs-small);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-xmicro);
  font-size: var(--naowee-font-size-12);
}
.naowee-dropdown--small .naowee-dropdown__label { font-size: var(--naowee-font-size-12); }

/* ── Helper text ── */
.naowee-dropdown__helper {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-16);
  color: var(--naowee-color-text-secondary);
  padding-top: var(--naowee-spacing-padding-xnano);
}
.naowee-dropdown--error .naowee-dropdown__helper { color: var(--naowee-color-feedback-fill-negative-loud); }

/* ── Menu (dropdown options) ── */
.naowee-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--naowee-spacing-padding-pico);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-border-dark);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  box-shadow: var(--naowee-shadow-modal-ds);
  z-index: 999;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height var(--naowee-transition-smooth), opacity var(--naowee-transition-default);
}
.naowee-dropdown--open .naowee-dropdown__menu {
  max-height: 260px;
  overflow-y: auto;
  opacity: 1;
  pointer-events: auto;
}

/* ── Option item ── */
.naowee-dropdown__option {
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  transition: background var(--naowee-transition-fast);
}
.naowee-dropdown__option:hover { background: var(--naowee-color-fill-secondary); }
.naowee-dropdown__option--selected {
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
  font-weight: var(--naowee-font-weight-semibold);
}
.naowee-dropdown__option--disabled {
  color: var(--naowee-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Standalone variant (no border, compact) ── */
.naowee-dropdown--standalone .naowee-dropdown__trigger {
  border: none;
  background: transparent;
  height: auto;
  padding: 0;
  gap: var(--naowee-spacing-gap-pico);
}
.naowee-dropdown--standalone .naowee-dropdown__trigger:hover {
  box-shadow: none;
}
.naowee-dropdown--standalone .naowee-dropdown__chevron {
  width: var(--naowee-size-icon-xtiny);
  height: var(--naowee-size-icon-xtiny);
}

/* ── Multiple select: selected tags ── */
.naowee-dropdown__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--naowee-spacing-gap-nano, 6px);
  flex: 1;
  min-width: 0;
  align-items: center;
}
.naowee-dropdown__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
  padding: 2px 8px;
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
  border-radius: var(--naowee-border-radius-full);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-medium);
}
.naowee-dropdown__tag-remove {
  width: 14px; height: 14px;
  cursor: pointer;
  color: var(--naowee-color-icon-accent);
  display: flex; align-items: center; justify-content: center;
}

/* ── Option with checkbox (multiple) ── */
.naowee-dropdown__option-check {
  width: 18px;
  height: 18px;
  border: var(--naowee-border-width-medium) solid var(--naowee-color-border-dark);
  border-radius: var(--naowee-border-radius-tiny);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--naowee-transition-default);
}
.naowee-dropdown__option--selected .naowee-dropdown__option-check {
  background: var(--naowee-color-interactive-fill-loud-idle);
  border-color: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-white-alpha-100);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TABLE
   Based on webapp patterns (lista.html, evento-detalle.html)
   Variants: Default, Compact, Borderless
   Features: Sortable headers, row hover, sticky header, responsive
   NOTE: No Figma page — built from webapp patterns + DS tokens
   ═══════════════════════════════════════════════════════════════ */

/* ── Table container ── */
.naowee-table-wrap { overflow-x: auto; }

.naowee-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-primary);
}

/* ── Header ── */
.naowee-table thead th {
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-medium);
  color: var(--naowee-color-text-secondary);
  text-align: left;
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  letter-spacing: var(--naowee-font-letter-spacing-caps);
  white-space: nowrap;
  background: transparent;
  border-bottom: none;
  user-select: none;
}

/* ── Sortable header ── */
.naowee-table th[data-sort] { cursor: pointer; }
.naowee-table th[data-sort]:hover { color: var(--naowee-color-text-primary); }
.naowee-table th[data-sort]::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--naowee-color-border-dark);
  vertical-align: middle;
  opacity: .4;
}
.naowee-table th[data-sort="asc"]::after {
  border-top: none;
  border-bottom: 4px solid var(--naowee-color-text-accent);
  opacity: 1;
}
.naowee-table th[data-sort="desc"]::after {
  border-top: 4px solid var(--naowee-color-text-accent);
  opacity: 1;
}

/* ── Body rows ── */
.naowee-table tbody td {
  padding: var(--naowee-spacing-padding-micro) var(--naowee-spacing-padding-micro);
  border-bottom: var(--naowee-border-width-small) solid var(--naowee-color-border-default);
  vertical-align: middle;
  line-height: var(--naowee-font-line-height-18);
}
.naowee-table tbody tr:last-child td { border-bottom: none; }
.naowee-table tbody tr {
  transition: background var(--naowee-transition-fast);
}
.naowee-table tbody tr:hover {
  background: var(--naowee-color-fill-secondary);
}

/* ── Clickable row ── */
.naowee-table tbody tr[onclick],
.naowee-table tbody tr.naowee-table__row--clickable {
  cursor: pointer;
}

/* ── Row number column ── */
.naowee-table__num {
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-secondary);
  width: 36px;
  text-align: center;
}

/* ── Cell: primary text + subtitle ── */
.naowee-table__cell-primary {
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.naowee-table__cell-sub {
  font-size: var(--naowee-font-size-12);
  color: var(--naowee-color-text-secondary);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
}

/* ── Cell: action link ── */
.naowee-table__action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.naowee-table__action a,
.naowee-table__action button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--naowee-size-small);
  height: var(--naowee-size-small);
  border-radius: var(--naowee-border-radius-small);
  border: none;
  background: transparent;
  color: var(--naowee-color-icon-accent);
  cursor: pointer;
  transition: background var(--naowee-transition-default);
}
.naowee-table__action a:hover,
.naowee-table__action button:hover {
  background: var(--naowee-color-interactive-fill-mute-hover);
}

/* ── Row arrow (navigate indicator) ── */
.naowee-table__arrow {
  color: var(--naowee-color-text-accent);
  display: flex;
  align-items: center;
  opacity: .6;
  transition: opacity var(--naowee-transition-default);
}
.naowee-table tbody tr:hover .naowee-table__arrow { opacity: 1; }

/* ── Compact variant ── */
.naowee-table--compact thead th {
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-xmicro);
  font-size: var(--naowee-font-size-10);
}
.naowee-table--compact tbody td {
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-xmicro);
  font-size: var(--naowee-font-size-12);
}

/* ── Borderless variant ── */
.naowee-table--borderless tbody td { border-bottom: none; }

/* ── Striped variant ── */
.naowee-table--striped tbody tr:nth-child(even) {
  background: var(--naowee-color-fill-secondary);
}

/* ── Sticky header ── */
.naowee-table--sticky-header thead th {
  position: sticky;
  top: 0;
  background: var(--naowee-color-fill-primary);
  z-index: 1;
}

/* ── Empty state ── */
.naowee-table__empty {
  padding: var(--naowee-spacing-padding-medium) var(--naowee-spacing-padding-xlarge);
  text-align: center;
  color: var(--naowee-color-text-secondary);
  font-size: var(--naowee-font-size-14);
}

/* ── Standings table (sport-specific) ── */
.naowee-table--standings .naowee-table__pos {
  width: 28px;
  height: 28px;
  border-radius: var(--naowee-border-radius-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-bold);
  background: var(--naowee-color-fill-secondary);
  color: var(--naowee-color-text-secondary);
}
.naowee-table--standings .naowee-table__pos--gold {
  background: var(--naowee-color-yellow-100);
  color: var(--naowee-color-yellow-900);
}
.naowee-table--standings .naowee-table__pos--silver {
  background: var(--naowee-color-gray-100);
  color: var(--naowee-color-gray-700);
}
.naowee-table--standings .naowee-table__pos--bronze {
  background: var(--naowee-color-orange-100);
  color: var(--naowee-color-orange-900);
}
.naowee-table--standings td.naowee-table__pts {
  font-weight: var(--naowee-font-weight-bold);
  color: var(--naowee-color-text-accent);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SWITCH
   States: Idle, Hover, Active, Disabled
   Selected: True (on), False (off)
   Label: Right, Left, None
   ═══════════════════════════════════════════════════════════════ */

/* ── Switch tokens ── */
:root {
  --naowee-switch-width: 35px;
  --naowee-switch-height: 20px;
  --naowee-switch-handle-size: 20px;
  --naowee-color-selected-border-idle: var(--naowee-color-orange-700);
  --naowee-shadow-highlight-accent: 0 0 0 2px var(--naowee-color-orange-200);
  --naowee-shadow-highlight-positive: 0 0 0 2px var(--naowee-color-green-100);
  --naowee-shadow-highlight-caution: 0 0 0 2px var(--naowee-color-orange-100);
  --naowee-shadow-highlight-negative: 0 0 0 2px var(--naowee-color-red-100);
}

/* ── Switch wrapper ── */
.naowee-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  cursor: pointer;
  padding: var(--naowee-spacing-padding-pico) 0;
  user-select: none;
}

/* ── Track ── */
.naowee-switch__track {
  width: var(--naowee-switch-width);
  height: var(--naowee-switch-height);
  border-radius: var(--naowee-border-radius-full);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  background: var(--naowee-color-fill-primary);
  position: relative;
  transition: background 0.25s cubic-bezier(.4,0,.2,1),
              border-color 0.25s cubic-bezier(.4,0,.2,1),
              box-shadow 0.25s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}

/* ── Handle ── */
.naowee-switch__handle {
  width: var(--naowee-switch-handle-size);
  height: var(--naowee-switch-handle-size);
  border-radius: var(--naowee-border-radius-full);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  position: absolute;
  top: -1px;
  left: -1px;
  transition: left 0.3s cubic-bezier(.68,-0.4,.32,1.4),
              border-color 0.25s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.naowee-switch:active .naowee-switch__handle {
  width: calc(var(--naowee-switch-handle-size) + 2px);
}

/* ── Selected (on) ── */
.naowee-switch--on .naowee-switch__track {
  background: var(--naowee-color-selected-fill-idle);
  border-color: var(--naowee-color-selected-border-idle);
  box-shadow: var(--naowee-shadow-highlight-accent);
}
.naowee-switch--on .naowee-switch__handle {
  left: calc(var(--naowee-switch-width) - var(--naowee-switch-handle-size) - 1px);
  border-color: var(--naowee-color-selected-border-idle);
}
.naowee-switch--on .naowee-switch__handle svg {
  width: 16px;
  height: 16px;
  color: var(--naowee-color-selected-fill-idle);
}

/* ── Hover ── */
.naowee-switch:hover .naowee-switch__track {
  border-color: var(--naowee-color-interactive-border-hover);
}
.naowee-switch--on:hover .naowee-switch__track {
  background: var(--naowee-color-selected-fill-hover);
  border-color: var(--naowee-color-selected-fill-hover);
}
.naowee-switch--on:hover .naowee-switch__handle {
  border-color: var(--naowee-color-selected-fill-hover);
}

/* ── Disabled ── */
.naowee-switch--disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}

/* ── Label ── */
.naowee-switch__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
}
.naowee-switch--disabled .naowee-switch__label { color: var(--naowee-color-text-disabled); }

/* ── Label left (reverse order) ── */
.naowee-switch--label-left { flex-direction: row-reverse; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: CHECKBOX
   States: Idle, Hover, Active, Error, Disabled
   Selected: Unchecked, Checked, Indeterminate
   Features: Label, Highlight variant
   ═══════════════════════════════════════════════════════════════ */

/* ── Checkbox wrapper ── */
.naowee-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  cursor: pointer;
  user-select: none;
  padding: var(--naowee-spacing-padding-pico) 0;
}

/* ── Check box (20x20, radius 4px) ── */
.naowee-checkbox__box {
  width: var(--naowee-size-selection-controls-tiny);
  height: var(--naowee-size-selection-controls-tiny);
  border-radius: var(--naowee-border-radius-tiny);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  background: var(--naowee-color-fill-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              border-color 0.2s cubic-bezier(.4,0,.2,1),
              box-shadow 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.15s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-checkbox:active .naowee-checkbox__box {
  transform: scale(0.9);
}
.naowee-checkbox__box svg {
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: scale(0.5);
  color: var(--naowee-color-white-alpha-100);
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-checkbox--checked .naowee-checkbox__box svg,
.naowee-checkbox--indeterminate .naowee-checkbox__box svg {
  opacity: 1;
  transform: scale(1);
}

/* ── Hover ── */
.naowee-checkbox:hover .naowee-checkbox__box {
  border-color: var(--naowee-color-interactive-border-hover);
}

/* ── Checked ── */
.naowee-checkbox--checked .naowee-checkbox__box {
  background: var(--naowee-color-interactive-fill-loud-idle);
  border-color: var(--naowee-color-interactive-fill-loud-idle);
}
.naowee-checkbox--checked:hover .naowee-checkbox__box {
  background: var(--naowee-color-interactive-fill-loud-hover);
  border-color: var(--naowee-color-interactive-fill-loud-hover);
}

/* ── Indeterminate ── */
.naowee-checkbox--indeterminate .naowee-checkbox__box {
  background: var(--naowee-color-interactive-fill-loud-idle);
  border-color: var(--naowee-color-interactive-fill-loud-idle);
}

/* ── Error ── */
.naowee-checkbox--error .naowee-checkbox__box {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-checkbox--error.naowee-checkbox--checked .naowee-checkbox__box {
  background: var(--naowee-color-feedback-fill-negative-loud);
  border-color: var(--naowee-color-feedback-fill-negative-loud);
}

/* ── Disabled ── */
.naowee-checkbox--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-checkbox--disabled .naowee-checkbox__box {
  background: var(--naowee-color-fill-disabled);
  border-color: var(--naowee-color-border-disabled);
}
.naowee-checkbox--disabled .naowee-checkbox__label { color: var(--naowee-color-text-disabled); }

/* ── Label ── */
.naowee-checkbox__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
}

/* ── Label position: Left ── */
.naowee-checkbox--label-left { flex-direction: row-reverse; }

/* ── Highlight variant (32x32 tinted bg container) ── */
.naowee-checkbox--highlight {
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-small);
  background: var(--naowee-color-fill-accent-quiet);
}
.naowee-checkbox--highlight.naowee-checkbox--error {
  background: var(--naowee-color-feedback-fill-negative-quiet);
}
.naowee-checkbox--highlight.naowee-checkbox--disabled {
  background: var(--naowee-color-feedback-fill-neutral-quiet);
}

/* ── Checkbox Group ── */
.naowee-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-checkbox-group__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-medium);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  margin-bottom: var(--naowee-spacing-gap-xnano);
}
.naowee-checkbox-group__helper {
  font-size: var(--naowee-font-size-12);
  color: var(--naowee-color-text-secondary);
}
.naowee-checkbox-group--error .naowee-checkbox-group__helper {
  color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-checkbox-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--naowee-spacing-gap-xtiny);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: MESSAGE (inline feedback card)
   Colors: Informative, Positive, Caution, Negative, Neutral
   Features: Icon, Title, Body, Action link, Dismiss button
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.naowee-message {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: var(--naowee-spacing-padding-xtiny);
  border-radius: var(--naowee-border-radius-containers-default, 20px);
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
  position: relative;
  color: var(--naowee-color-text-primary);
}

/* ── Header row (icon/thumbnail + title + dismiss) ── */
.naowee-message__header {
  display: flex; align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
  width: 100%;
}

/* ── Badge icon (20px colored circle) ── */
.naowee-message__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--naowee-border-radius-full);
  display: flex; align-items: center; justify-content: center;
  color: #fff; padding: 2px;
}
.naowee-message__icon svg { width: 16px; height: 16px; }

/* ── Thumbnail (32px circle with badge overlay) ── */
.naowee-message__thumbnail {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--naowee-border-radius-full);
  background: var(--naowee-color-fill-secondary);
  overflow: hidden; position: relative;
}
.naowee-message__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.naowee-message__thumbnail .naowee-message__icon {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; padding: 0;
}
.naowee-message__thumbnail .naowee-message__icon svg { width: 12px; height: 12px; }

/* ── Title ── */
.naowee-message__title {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 700;
  line-height: 20px;
}

/* ── Body (no-title inline text) ── */
.naowee-message__body {
  flex: 1; min-width: 0;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Description (below title) ── */
.naowee-message__text {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  width: 100%;
}

/* ── Action button (CTA) ── */
.naowee-message__action {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--naowee-spacing-gap-none, 0px);
  height: 32px;
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: #fff;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: var(--naowee-font-line-height-16);
  border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  align-self: flex-start;
}

/* When has title + action, wrap description + action in a column */
.naowee-message__content {
  display: flex; flex-direction: column;
  gap: var(--naowee-spacing-gap-xtiny, 16px);
  width: 100%;
}

/* ── Dismiss button (×) ── */
.naowee-message__dismiss {
  width: 24px; height: 24px;
  border: none; background: transparent;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--naowee-border-radius-small, 8px);
  transition: background var(--naowee-transition-default);
  color: var(--naowee-color-icon-secondary);
}
.naowee-message__dismiss:hover { background: var(--naowee-color-black-alpha-10); }
.naowee-message__dismiss svg { width: 20px; height: 20px; }

/* ══ Colors (Quiet hierarchy) ══ */
.naowee-message--informative { background: var(--naowee-color-feedback-fill-informative-quiet); }
.naowee-message--informative .naowee-message__icon { background: var(--naowee-color-feedback-fill-informative-loud); }
.naowee-message--positive { background: var(--naowee-color-feedback-fill-positive-quiet); }
.naowee-message--positive .naowee-message__icon { background: var(--naowee-color-feedback-fill-positive-loud); }
.naowee-message--caution { background: var(--naowee-color-feedback-fill-caution-quiet); }
.naowee-message--caution .naowee-message__icon { background: var(--naowee-color-feedback-fill-caution-loud, #d74009); }
.naowee-message--negative { background: var(--naowee-color-feedback-fill-negative-quiet); }
.naowee-message--negative .naowee-message__icon { background: var(--naowee-color-feedback-fill-negative-loud); }

/* ══ Loud hierarchy (only Negative) ══ */
.naowee-message--loud.naowee-message--negative {
  background: var(--naowee-color-feedback-fill-negative-loud);
  color: #fff;
}
.naowee-message--loud.naowee-message--negative .naowee-message__icon {
  background: linear-gradient(#ffe5e9, #ffe5e9), linear-gradient(#fff, #fff);
  color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-message--loud.naowee-message--negative .naowee-message__dismiss { color: #fff; }
.naowee-message--loud.naowee-message--negative .naowee-message__action {
  background: #fff; color: var(--naowee-color-text-primary);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SNACKBAR (temporary toast notification)
   Figma: bg #002B5B, radius 12px, padding 16px, width 600px
   Features: Description text, optional Action textlink, optional Badge icon
   ═══════════════════════════════════════════════════════════════ */

.naowee-snackbar {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* gap between description and action */
  width: 600px;
  max-width: 100%;
  background: var(--naowee-color-blue-900); /* Figma: #002B5B */
  color: var(--naowee-color-text-inverse);
  border-radius: var(--naowee-border-radius-containers-compact);
  padding: 16px;
  box-shadow: 0 8px 12px 0 rgba(40, 40, 52, 0.1);
  font-family: var(--naowee-font-family);
  overflow: clip;
}
.naowee-snackbar__content {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 8px; /* gap between badge and text */
  min-width: 0;
}
.naowee-snackbar__badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--naowee-color-feedback-fill-informative-loud, #006AFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-inverse);
}
.naowee-snackbar__badge svg { width: 16px; height: 16px; }
.naowee-snackbar__text {
  flex: 1;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 18px;
  color: var(--naowee-color-text-inverse);
}
.naowee-snackbar__action {
  flex-shrink: 0;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: 18px;
  color: var(--naowee-color-text-inverse);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
}
.naowee-snackbar__action:hover { opacity: 0.9; }

/* Mobile: full width */
@media (max-width: 600px) {
  .naowee-snackbar { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: PROGRESS INDICATOR
   Types: Linear (bar), Circular (ring), Segments
   Sizes: Linear/Segments → Small (4px), Large (8px)
          Circular → XSmall (16), Small (24), Medium (32), Large (48), XLarge (64)
   Colors: Accent, Positive, Negative
   ═══════════════════════════════════════════════════════════════ */

/* ── Linear: Wrap (label + bar) ── */
.naowee-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-micro); /* 12px Figma */
}
.naowee-progress-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--naowee-spacing-gap-nano);
}
.naowee-progress-wrap__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
}
.naowee-progress-wrap__value {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
}
/* Large size label typography */
.naowee-progress-wrap--lg .naowee-progress-wrap__label,
.naowee-progress-wrap--lg .naowee-progress-wrap__value {
  font-size: var(--naowee-font-size-14);
  line-height: 18px;
}

/* ── Linear: Bar ── */
.naowee-progress {
  width: 100%;
  height: 4px;
  background: var(--naowee-color-border-primary);
  border-radius: var(--naowee-border-radius-full);
  overflow: hidden;
  position: relative;
}
.naowee-progress__fill {
  height: 100%;
  background: var(--naowee-color-border-accent);
  border-radius: var(--naowee-border-radius-full);
  transition: width var(--naowee-transition-smooth);
}

/* Size: Large = 8px bar */
.naowee-progress--lg { height: 8px; }

/* Color variants */
.naowee-progress--positive .naowee-progress__fill { background: var(--naowee-color-feedback-border-positive-loud); }
.naowee-progress--negative .naowee-progress__fill { background: var(--naowee-color-feedback-fill-negative-loud); }

/* Indeterminate animation */
.naowee-progress--indeterminate .naowee-progress__fill {
  width: 30% !important;
  animation: naowee-progress-slide 1.5s ease-in-out infinite;
}
@keyframes naowee-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ── Circular: Container ── */
.naowee-progress-circular {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Figma: 8px between circle and label */
}
.naowee-progress-circular__ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.naowee-progress-circular__ring svg {
  transform: rotate(-90deg);
}
.naowee-progress-circular__track {
  fill: none;
  stroke: var(--naowee-color-border-primary);
  stroke-linecap: round;
}
.naowee-progress-circular__fill {
  fill: none;
  stroke: var(--naowee-color-border-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--naowee-transition-smooth);
}
.naowee-progress-circular__counter {
  position: absolute;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
}
.naowee-progress-circular__text {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 18px;
  color: var(--naowee-color-text-primary);
}

/* Circular sizes — stroke widths from Figma */
.naowee-progress-circular--xs .naowee-progress-circular__track,
.naowee-progress-circular--xs .naowee-progress-circular__fill { stroke-width: 1; }
.naowee-progress-circular--sm .naowee-progress-circular__track,
.naowee-progress-circular--sm .naowee-progress-circular__fill { stroke-width: 1; }
.naowee-progress-circular--md .naowee-progress-circular__track,
.naowee-progress-circular--md .naowee-progress-circular__fill { stroke-width: 2; }
.naowee-progress-circular--lg .naowee-progress-circular__track,
.naowee-progress-circular--lg .naowee-progress-circular__fill { stroke-width: 3; }
.naowee-progress-circular--xl .naowee-progress-circular__track,
.naowee-progress-circular--xl .naowee-progress-circular__fill { stroke-width: 4; }

/* Circular XL counter text is 14px */
.naowee-progress-circular--xl .naowee-progress-circular__counter {
  font-size: var(--naowee-font-size-14);
  line-height: 18px;
}
/* Circular L/XL label text is 16px */
.naowee-progress-circular--lg .naowee-progress-circular__text,
.naowee-progress-circular--xl .naowee-progress-circular__text {
  font-size: var(--naowee-font-size-16);
  line-height: 24px;
}

/* Color variants */
.naowee-progress-circular--positive .naowee-progress-circular__fill { stroke: var(--naowee-color-feedback-border-positive-loud); }
.naowee-progress-circular--negative .naowee-progress-circular__fill { stroke: var(--naowee-color-feedback-border-negative-loud); }

/* Indeterminate spin */
.naowee-progress-circular--indeterminate .naowee-progress-circular__ring svg {
  animation: naowee-spin 1.2s linear infinite;
}

/* ── Segments ── */
.naowee-progress-segments-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-micro); /* 12px */
}
.naowee-progress-segments-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--naowee-spacing-gap-nano);
}
.naowee-progress-segments-wrap__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
}
.naowee-progress-segments-wrap__value {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
}
/* Large size label typography */
.naowee-progress-segments-wrap--lg .naowee-progress-segments-wrap__label,
.naowee-progress-segments-wrap--lg .naowee-progress-segments-wrap__value {
  font-size: var(--naowee-font-size-14);
  line-height: 18px;
}

.naowee-progress-segments {
  display: flex;
  gap: var(--naowee-spacing-gap-xnano); /* 4px small */
  width: 100%;
}
.naowee-progress-segments__item {
  flex: 1;
  height: 4px;
  border-radius: var(--naowee-border-radius-full);
  background: var(--naowee-color-border-primary);
  transition: background var(--naowee-transition-smooth);
}
.naowee-progress-segments__item--active {
  background: var(--naowee-color-border-accent);
}

/* Size: Large = 8px height, 8px gap */
.naowee-progress-segments--lg { gap: 8px; }
.naowee-progress-segments--lg .naowee-progress-segments__item { height: 8px; }

/* Color variants */
.naowee-progress-segments--positive .naowee-progress-segments__item--active { background: var(--naowee-color-feedback-border-positive-loud); }
.naowee-progress-segments--negative .naowee-progress-segments__item--active { background: var(--naowee-color-feedback-fill-negative-loud); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SLIDER (single & range)
   Track: 4px pill, thumb 20px with 40px hit area
   States: Idle, Hover, Active (ring), Disabled
   Content types: None, Text (end labels), Icon (end icons)
   ═══════════════════════════════════════════════════════════════ */

.naowee-slider {
  display: flex;
  flex-direction: column;
  gap: 8px; /* label → slider */
  width: 100%;
  font-family: var(--naowee-font-family);
}
.naowee-slider__label {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 18px;
  color: var(--naowee-color-text-primary);
  padding-bottom: 2px;
}
.naowee-slider__body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.naowee-slider__end {
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
  padding: 4px 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.naowee-slider__end-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-secondary);
  padding: 2px 0;
  flex-shrink: 0;
}
.naowee-slider__end-icon svg { width: 20px; height: 20px; }

/* Track area — holds track, filled range, thumbs, tooltips */
.naowee-slider__track-area {
  position: relative;
  flex: 1;
  height: 40px; /* total hit area height */
  display: flex;
  align-items: center;
}
.naowee-slider__track {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--naowee-color-border-primary);
  border-radius: var(--naowee-border-radius-full);
}
.naowee-slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--naowee-color-selected-fill-idle);
  border-radius: var(--naowee-border-radius-full);
  transition: background var(--naowee-transition-smooth);
}
.naowee-slider:hover .naowee-slider__fill { background: var(--naowee-color-selected-fill-hover); }
.naowee-slider.is-active .naowee-slider__fill { background: var(--naowee-color-selected-fill-active); }

/* Thumb */
.naowee-slider__thumb {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 2;
  background: transparent;
  transition: background var(--naowee-transition-smooth);
}
.naowee-slider__thumb::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-600);
  box-shadow: 0 8px 12px 0 rgba(40,40,52,0.1);
  transition: border-color var(--naowee-transition-smooth);
}
.naowee-slider__thumb:hover::before { border-color: var(--naowee-color-gray-700); }
.naowee-slider__thumb.is-active {
  background: var(--naowee-color-interactive-fill-quiet-active);
}
.naowee-slider__thumb.is-active::before {
  border-color: var(--naowee-color-interactive-border-active);
  box-shadow: none;
}
.naowee-slider__thumb:active { cursor: grabbing; }

/* Reference value below thumb */
.naowee-slider__ref {
  position: absolute;
  top: calc(50% + 14px);
  transform: translateX(-50%);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
  padding: 2px 0;
  white-space: nowrap;
  transition: opacity var(--naowee-transition-smooth);
  z-index: 1;
}
.naowee-slider__thumb.is-active + .naowee-slider__ref {
  opacity: 0;
}

/* Tooltip above thumb (active) */
.naowee-slider__tooltip {
  position: absolute;
  bottom: calc(50% + 14px);
  transform: translateX(-50%);
  background: var(--naowee-color-interactive-fill-loud-active);
  color: var(--naowee-color-text-inverse);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  min-width: 32px;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(40,40,52,0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--naowee-transition-smooth);
  z-index: 3;
}
.naowee-slider__thumb.is-active ~ .naowee-slider__tooltip,
.naowee-slider__thumb.is-active + .naowee-slider__ref + .naowee-slider__tooltip {
  opacity: 1;
}

/* Range variant: tooltip is blue */
.naowee-slider--range .naowee-slider__tooltip {
  background: var(--naowee-color-fill-inverse);
}

/* Disabled state */
.naowee-slider.is-disabled { pointer-events: none; }
.naowee-slider.is-disabled .naowee-slider__label,
.naowee-slider.is-disabled .naowee-slider__end,
.naowee-slider.is-disabled .naowee-slider__ref {
  color: var(--naowee-color-text-disabled);
}
.naowee-slider.is-disabled .naowee-slider__end-icon { color: var(--naowee-color-text-disabled); }
.naowee-slider.is-disabled .naowee-slider__fill {
  background: var(--naowee-color-border-primary);
}
.naowee-slider.is-disabled .naowee-slider__thumb::before {
  border-color: var(--naowee-color-border-disabled);
}
.naowee-slider.is-disabled .naowee-slider__tooltip { opacity: 0 !important; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: PAGINATION
   Features: Page numbers, prev/next arrows, compact mode
   ═══════════════════════════════════════════════════════════════ */

/* ── Pagination container ── */
.naowee-pagination {
  display: flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xsmall, 24px);
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}

/* ── Pages section ("Página [input] de 20") ── */
.naowee-pagination__pages {
  display: flex; align-items: center;
  gap: var(--naowee-spacing-gap-micro, 12px);
}
.naowee-pagination__label {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-secondary);
  white-space: nowrap;
}
.naowee-pagination__total {
  display: flex; align-items: center; gap: var(--naowee-spacing-gap-nano, 6px);
  font-size: var(--naowee-font-size-14);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-secondary);
  white-space: nowrap;
}
.naowee-pagination__total strong {
  font-weight: var(--naowee-font-weight-semibold);
}

/* ── Page input ── */
.naowee-pagination__input {
  width: 56px;
  height: var(--naowee-size-height-inputs-large, 48px);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  background: var(--naowee-color-fill-primary);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  color: var(--naowee-color-text-primary);
  text-align: center;
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  transition: border-color var(--naowee-transition-default);
}
.naowee-pagination__input:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-pagination__input:focus {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
  outline: none;
}

/* ── Controls (prev/next icon buttons) ── */
.naowee-pagination__controls {
  display: flex; align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-pagination__btn {
  width: 48px; height: 48px;
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  border: none;
  background: var(--naowee-color-interactive-fill-quiet-idle);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--naowee-color-icon-accent, var(--naowee-color-text-accent));
  transition: background var(--naowee-transition-default);
  flex-shrink: 0;
  padding: var(--naowee-spacing-padding-pico) 0;
}
.naowee-pagination__btn:hover { background: var(--naowee-color-interactive-fill-quiet-hover); }
.naowee-pagination__btn:active { background: var(--naowee-color-interactive-fill-quiet-active); }
.naowee-pagination__btn:disabled,
.naowee-pagination__btn[disabled] {
  opacity: .35; cursor: not-allowed; pointer-events: none;
}
.naowee-pagination__btn svg { width: 24px; height: 24px; }

/* ── Small size ── */
.naowee-pagination--small {
  gap: var(--naowee-spacing-gap-none, 0px);
}
.naowee-pagination--small .naowee-pagination__pages {
  gap: var(--naowee-spacing-gap-nano, 6px);
}
.naowee-pagination--small .naowee-pagination__label {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-pagination--small .naowee-pagination__total {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-pagination--small .naowee-pagination__input {
  width: 48px;
  height: var(--naowee-size-height-inputs-small, 32px);
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
  font-size: var(--naowee-font-size-12);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-nano, 6px);
}
.naowee-pagination--small .naowee-pagination__btn {
  width: 32px; height: 32px;
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
}
.naowee-pagination--small .naowee-pagination__btn svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: STEPPER (wizard steps)
   Built from Badge + Progress tokens (no Figma page)
   Based on webapp stepper.html pattern
   ═══════════════════════════════════════════════════════════════ */

.naowee-stepper {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-none);
  font-family: var(--naowee-font-family);
}

/* Step item */
.naowee-stepper__step {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  cursor: default;
}

/* Step number badge */
.naowee-stepper__number {
  width: var(--naowee-size-xsmall);
  height: var(--naowee-size-xsmall);
  border-radius: var(--naowee-border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-bold);
  flex-shrink: 0;
  transition: all var(--naowee-transition-default);
  /* Default: pending */
  background: var(--naowee-color-fill-secondary);
  color: var(--naowee-color-text-secondary);
}

/* Step label */
.naowee-stepper__label {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  color: var(--naowee-color-text-secondary);
  white-space: nowrap;
  transition: color var(--naowee-transition-default);
}

/* Connector line between steps */
.naowee-stepper__connector {
  flex: 1;
  height: 2px;
  background: var(--naowee-color-border-default);
  min-width: var(--naowee-spacing-padding-xtiny);
  transition: background var(--naowee-transition-default);
}

/* ── Active step ── */
.naowee-stepper__step--active .naowee-stepper__number {
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-text-inverse);
}
.naowee-stepper__step--active .naowee-stepper__label {
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary);
}

/* ── Completed step ── */
.naowee-stepper__step--done .naowee-stepper__number {
  background: var(--naowee-color-feedback-fill-positive-loud);
  color: var(--naowee-color-text-inverse);
}
.naowee-stepper__step--done .naowee-stepper__label {
  color: var(--naowee-color-text-primary);
}
.naowee-stepper__connector--done {
  background: var(--naowee-color-feedback-fill-positive-loud);
}

/* ── Clickable completed step ── */
.naowee-stepper__step--done { cursor: pointer; }
.naowee-stepper__step--done:hover .naowee-stepper__label {
  color: var(--naowee-color-text-accent);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: RADIO BUTTON
   States: Idle, Hover, Active, Error, Disabled
   Selected: True, False
   Label position: Left, Right, None
   ═══════════════════════════════════════════════════════════════ */

/* ── Radio wrapper ── */
.naowee-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
  cursor: pointer;
  user-select: none;
  padding: var(--naowee-spacing-padding-pico) 0;
}

/* ── Circle ── */
.naowee-radio__circle {
  width: var(--naowee-size-selection-controls-tiny);
  height: var(--naowee-size-selection-controls-tiny);
  border-radius: var(--naowee-border-radius-full);
  border: var(--naowee-border-width-medium) solid var(--naowee-color-interactive-border-idle);
  background: var(--naowee-color-fill-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s cubic-bezier(.4,0,.2,1),
              box-shadow 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.15s cubic-bezier(.68,-0.2,.32,1.4);
  margin-top: 1px;
}
.naowee-radio:active .naowee-radio__circle {
  transform: scale(0.9);
}
/* Inner dot (hidden by default) */
.naowee-radio__circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--naowee-border-radius-full);
  background: transparent;
  transform: scale(0.5);
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.3s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-radio--selected .naowee-radio__circle::after {
  transform: scale(1);
}

/* ── Hover ── */
.naowee-radio:hover .naowee-radio__circle {
  border-color: var(--naowee-color-interactive-border-hover);
}

/* ── Selected ── */
.naowee-radio--selected .naowee-radio__circle {
  border-color: var(--naowee-color-interactive-fill-loud-idle);
}
.naowee-radio--selected .naowee-radio__circle::after {
  background: var(--naowee-color-interactive-fill-loud-idle);
}
.naowee-radio--selected:hover .naowee-radio__circle {
  border-color: var(--naowee-color-interactive-fill-loud-hover);
}
.naowee-radio--selected:hover .naowee-radio__circle::after {
  background: var(--naowee-color-interactive-fill-loud-hover);
}

/* ── Error ── */
.naowee-radio--error .naowee-radio__circle {
  border-color: var(--naowee-color-feedback-fill-negative-loud);
}
.naowee-radio--error.naowee-radio--selected .naowee-radio__circle::after {
  background: var(--naowee-color-feedback-fill-negative-loud);
}

/* ── Disabled ── */
.naowee-radio--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-radio--disabled .naowee-radio__circle {
  border-color: var(--naowee-color-border-disabled);
  background: var(--naowee-color-fill-disabled);
}
.naowee-radio--disabled .naowee-radio__label { color: var(--naowee-color-text-disabled); }

/* ── Label ── */
.naowee-radio__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
}

/* ── Radio Group ── */
.naowee-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-radio-group__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-medium);
  color: var(--naowee-color-text-primary);
  margin-bottom: var(--naowee-spacing-gap-xnano);
}
.naowee-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--naowee-spacing-gap-xtiny);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: BREADCRUMB
   Levels: 2-6, separator chevron "›"
   Current level: accent color (on) or neutral (off)
   ═══════════════════════════════════════════════════════════════ */

.naowee-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  line-height: var(--naowee-font-line-height-18);
  font-feature-settings: 'case' 1;
  flex-wrap: wrap;
}

/* Level link */
.naowee-breadcrumb__item {
  color: var(--naowee-color-text-primary);
  text-decoration: none;
  font-weight: var(--naowee-font-weight-medium);
  cursor: pointer;
  transition: color var(--naowee-transition-default);
  white-space: nowrap;
}
.naowee-breadcrumb__item:hover {
  color: var(--naowee-color-text-link-hover);
  text-decoration: underline;
}

/* Separator — Chevron right icon (16x16) */
.naowee-breadcrumb__sep {
  color: var(--naowee-color-text-secondary);
  flex-shrink: 0;
  user-select: none;
  display: flex;
  align-items: center;
}
.naowee-breadcrumb__sep svg {
  width: 16px;
  height: 16px;
}

/* Current level (last item) */
.naowee-breadcrumb__current {
  color: var(--naowee-color-text-accent);
  font-weight: var(--naowee-font-weight-medium);
  cursor: default;
}

/* Back link (simplified breadcrumb with arrow) */
.naowee-breadcrumb--back {
  gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-breadcrumb--back .naowee-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  font-weight: var(--naowee-font-weight-medium);
  font-size: var(--naowee-font-size-14);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  transition: background var(--naowee-transition-default);
}
.naowee-breadcrumb--back .naowee-breadcrumb__item:hover {
  background: var(--naowee-color-interactive-fill-mute-hover);
  text-decoration: none;
}
.naowee-breadcrumb--back .naowee-breadcrumb__item svg {
  width: var(--naowee-size-icon-xtiny);
  height: var(--naowee-size-icon-xtiny);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TAG
   Variants: Tag (dismissible), Tag Choice (selectable)
   Sizes: Large (32px), Small (24px)
   Colors (Tag only): Accent, Positive, Caution, Negative
   Content: None, Thumbnail, Icon
   States: Idle, Hover, Active, Disabled
   Selected (Choice only): adds accent border + check icon + shadow
   ═══════════════════════════════════════════════════════════════ */

/* ── Base Tag ── */
.naowee-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--naowee-spacing-gap-none, 0px);
  height: var(--naowee-size-height-small, 32px);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-square-to-circle-small, 8px);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: var(--naowee-font-line-height-16);
  white-space: nowrap;
  overflow: clip;
  border: var(--naowee-border-width-medium) solid var(--naowee-color-interactive-border-idle);
  background: var(--naowee-color-fill-primary);
  color: var(--naowee-color-text-primary);
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--naowee-transition-default), box-shadow var(--naowee-transition-default);
  font-feature-settings: 'case' 1;
}

/* ── Size: Small (24px) ── */
.naowee-tag--small {
  height: var(--naowee-size-height-xsmall, 24px);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-xmicro);
}

/* When tag has active-area (dismiss), remove right padding — active-area handles it */
.naowee-tag:has(.naowee-tag__active-area) { padding-right: 0; }

/* ── Active area (dismiss wrapper) ── */
.naowee-tag__active-area {
  display: flex; align-items: center;
  align-self: stretch;
  gap: var(--naowee-spacing-gap-none, 0px);
  padding: var(--naowee-spacing-padding-none, 0px) var(--naowee-spacing-padding-micro) var(--naowee-spacing-padding-none, 0px) var(--naowee-spacing-padding-xnano);
  flex-shrink: 0; cursor: pointer;
}
.naowee-tag--small .naowee-tag__active-area {
  padding: var(--naowee-spacing-padding-none, 0px) var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-none, 0px) var(--naowee-spacing-padding-pico);
}

/* ── Close icon ── */
.naowee-tag__close {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--naowee-color-interactive-icon-idle, #646587);
}
.naowee-tag__close svg { width: 12px; height: 12px; }

/* ── Content: Icon / Thumbnail ── */
.naowee-tag__icon { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: var(--naowee-spacing-gap-xnano); }
.naowee-tag__icon svg { width: 16px; height: 16px; }
.naowee-tag__thumbnail {
  width: 20px; height: 20px; border-radius: var(--naowee-border-radius-xsmall);
  border: var(--naowee-border-width-small) solid var(--naowee-color-border-primary);
  overflow: hidden; flex-shrink: 0;
  background: var(--naowee-color-fill-secondary);
  margin-right: var(--naowee-spacing-gap-xnano);
}
.naowee-tag__thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* ── Color: Accent ── */
.naowee-tag--accent {
  border-color: var(--naowee-color-border-accent);
  box-shadow: var(--naowee-shadow-highlight-accent);
}

/* ── Color: Positive ── */
.naowee-tag--positive {
  border-color: var(--naowee-color-feedback-border-positive-loud);
  box-shadow: var(--naowee-shadow-highlight-positive);
}
/* ── Color: Caution ── */
.naowee-tag--caution {
  border-color: var(--naowee-color-feedback-border-caution-loud);
  box-shadow: var(--naowee-shadow-highlight-caution);
}
/* ── Color: Negative ── */
.naowee-tag--negative {
  border-color: var(--naowee-color-feedback-border-negative-loud);
  box-shadow: var(--naowee-shadow-highlight-negative);
}

/* ── Tag Choice (selectable) ── */
.naowee-tag--choice { cursor: pointer; }
.naowee-tag--selected {
  border-color: var(--naowee-color-selected-fill-idle);
  color: var(--naowee-color-selected-text-idle);
  box-shadow: var(--naowee-shadow-highlight-accent);
}
.naowee-tag--selected:hover {
  border-color: var(--naowee-color-selected-fill-hover);
  color: var(--naowee-color-selected-text-hover);
}
.naowee-tag--selected:active {
  border-color: var(--naowee-color-selected-fill-active);
  color: var(--naowee-color-selected-text-active);
}
.naowee-tag--selected .naowee-tag__check { display: flex; }
.naowee-tag__check {
  display: none; width: 16px; height: 16px; flex-shrink: 0;
  align-items: center; justify-content: center;
  color: var(--naowee-color-selected-fill-idle);
  margin-left: var(--naowee-spacing-gap-xnano);
}

/* ── Disabled ── */
.naowee-tag--disabled {
  border-color: var(--naowee-color-border-disabled);
  background: var(--naowee-color-fill-secondary, #f0f1f7);
  color: var(--naowee-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-tag--disabled svg { color: var(--naowee-color-icon-disabled); }

/* ── Tag group ── */
.naowee-tag-group { display: flex; flex-wrap: wrap; gap: var(--naowee-spacing-gap-xnano); }

/* ═══ Tag Input ═══ */
/* Wrapper (label + input-wrap + helper) */
.naowee-tag-input-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.naowee-tag-input-wrap .naowee-textfield__label { padding-bottom: var(--naowee-spacing-padding-pico); }

/* Input container */
.naowee-tag-input {
  display: flex; flex-wrap: wrap; gap: var(--naowee-spacing-gap-xnano); align-items: center;
  min-height: var(--naowee-size-height-inputs-large);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  background: var(--naowee-color-fill-primary);
  transition: border-color var(--naowee-transition-default);
  position: relative;
}
.naowee-tag-input:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-tag-input:focus-within,
.naowee-tag-input--active {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}

/* States */
.naowee-tag-input--error { border-color: var(--naowee-color-feedback-fill-negative-loud); }
.naowee-tag-input--error:focus-within,
.naowee-tag-input--error.naowee-tag-input--active { border-width: var(--naowee-border-width-medium); }
.naowee-tag-input--caution { border-color: var(--naowee-color-feedback-fill-caution-loud); }
.naowee-tag-input--caution:focus-within,
.naowee-tag-input--caution.naowee-tag-input--active { border-width: var(--naowee-border-width-medium); }

/* Loading (active border + spinner) */
.naowee-tag-input--loading {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}
.naowee-tag-input__spinner {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--naowee-color-interactive-border-active);
  animation: naowee-spin 0.8s linear infinite;
  margin-left: auto;
}
.naowee-tag-input__spinner svg { width: 16px; height: 16px; }
.naowee-tag-input--loading .naowee-tag-input__spinner + .naowee-tag-input__clear { margin-left: var(--naowee-spacing-gap-xnano); }

/* Disabled */
.naowee-tag-input--disabled {
  border-color: var(--naowee-color-border-disabled);
  pointer-events: none;
}
.naowee-tag-input--disabled .naowee-tag { opacity: 0.5; }
.naowee-tag-input--disabled input,
.naowee-tag-input--disabled input::placeholder { color: var(--naowee-color-text-disabled); }
.naowee-tag-input--disabled .naowee-tag-input__clear { color: var(--naowee-color-icon-disabled); }
.naowee-tag-input-wrap--disabled .naowee-textfield__label { color: var(--naowee-color-text-disabled); }

/* Read only — no border */
.naowee-tag-input--readonly {
  border: none;
  padding-left: 0;
  padding-right: 0;
}
.naowee-tag-input-wrap--readonly .naowee-textfield__label { color: var(--naowee-color-text-secondary); }

/* Clear button inside */
.naowee-tag-input__clear {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  cursor: pointer; color: var(--naowee-color-icon-secondary);
  margin-left: auto;
}
.naowee-tag-input__clear svg { width: 16px; height: 16px; }

/* Text input */
.naowee-tag-input input {
  flex: 1; min-width: 60px; border: none; background: transparent; outline: none;
  font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-14); color: var(--naowee-color-text-primary);
  padding: var(--naowee-spacing-padding-xnano) 0;
  height: 24px;
}
.naowee-tag-input input::placeholder { color: var(--naowee-color-text-secondary); }

/* Size: Small */
.naowee-tag-input--small {
  min-height: var(--naowee-size-height-inputs-small);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-nano);
  border-radius: var(--naowee-border-radius-actions-inputs-compact);
}
.naowee-tag-input--small input { font-size: var(--naowee-font-size-12); height: 20px; }

/* Height: singleline (no wrap) */
.naowee-tag-input--singleline { flex-wrap: nowrap; overflow: hidden; }

/* Helper */
.naowee-tag-input-wrap .naowee-dropdown__helper,
.naowee-tag-input-wrap .naowee-helper { padding-top: var(--naowee-spacing-padding-xnano); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: ACCORDION
   Sizes: Large, Medium, Small
   States: Collapsed, Expanded
   Features: Title, Description, Show more link, Slot content
   ═══════════════════════════════════════════════════════════════ */

.naowee-accordion { border-top: var(--naowee-border-width-small) solid var(--naowee-color-border-default); }
.naowee-accordion__item { border-bottom: var(--naowee-border-width-small) solid var(--naowee-color-border-default); }

.naowee-accordion__header {
  display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro);
  padding: var(--naowee-spacing-padding-xtiny) 0;
  cursor: pointer; user-select: none;
  transition: background var(--naowee-transition-default);
}
.naowee-accordion__header:hover { background: var(--naowee-color-fill-secondary); margin: 0 calc(-1 * var(--naowee-spacing-padding-xmicro)); padding-left: var(--naowee-spacing-padding-xmicro); padding-right: var(--naowee-spacing-padding-xmicro); border-radius: var(--naowee-border-radius-small); }
.naowee-accordion__title {
  flex: 1; font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-16); font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary);
}
.naowee-accordion__description { font-size: var(--naowee-font-size-14); color: var(--naowee-color-text-secondary); margin-top: 2px; }
.naowee-accordion__action {
  font-size: var(--naowee-font-size-14); font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-link-idle); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.naowee-accordion__chevron {
  width: var(--naowee-size-icon-tiny); height: var(--naowee-size-icon-tiny); flex-shrink: 0;
  color: var(--naowee-color-icon-secondary); transition: transform var(--naowee-transition-default);
}
.naowee-accordion__item--open .naowee-accordion__chevron { transform: rotate(180deg); }
.naowee-accordion__body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--naowee-transition-smooth), padding var(--naowee-transition-smooth);
}
.naowee-accordion__item--open .naowee-accordion__body { max-height: 500px; padding-bottom: var(--naowee-spacing-padding-xtiny); }
.naowee-accordion__content { font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-14); line-height: var(--naowee-font-line-height-20); color: var(--naowee-color-text-primary); }

/* Sizes */
.naowee-accordion--medium .naowee-accordion__title { font-size: var(--naowee-font-size-14); }
.naowee-accordion--small .naowee-accordion__title { font-size: var(--naowee-font-size-12); }
.naowee-accordion--small .naowee-accordion__header { padding: var(--naowee-spacing-padding-xmicro) 0; }

/* Disabled */
.naowee-accordion__item--disabled { opacity: .5; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TEXTLINK
   States: Idle, Hover, Active, Disabled
   Sizes: Large (16px), Medium (14px), Small (12px), XSmall (10px)
   ═══════════════════════════════════════════════════════════════ */

.naowee-textlink {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-medium);
  color: var(--naowee-color-text-link-idle);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--naowee-transition-default);
  display: inline-flex; align-items: center; gap: var(--naowee-spacing-gap-xnano);
}
.naowee-textlink:hover { color: var(--naowee-color-text-link-hover); }
.naowee-textlink:active { color: var(--naowee-color-text-link-active); }
.naowee-textlink--disabled { color: var(--naowee-color-text-disabled); cursor: not-allowed; pointer-events: none; }
.naowee-textlink--large { font-size: var(--naowee-font-size-16); }
.naowee-textlink--small { font-size: var(--naowee-font-size-12); }
.naowee-textlink--xsmall { font-size: var(--naowee-font-size-10); }
.naowee-textlink svg { width: 1em; height: 1em; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TOOLTIP
   Dark pill with text, positioned above/below/left/right
   ═══════════════════════════════════════════════════════════════ */

.naowee-tooltip {
  position: relative; display: inline-flex;
}
.naowee-tooltip__content {
  position: absolute; z-index: 1100;
  background: var(--naowee-color-fill-inverse);
  color: var(--naowee-color-text-inverse);
  border-radius: var(--naowee-border-radius-small);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-xmicro);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-16);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--naowee-transition-default);
  /* Default: above */
  bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
}
.naowee-tooltip:hover .naowee-tooltip__content { opacity: 1; }
/* Arrow */
.naowee-tooltip__content::after {
  content: ''; position: absolute;
  border: 5px solid transparent; border-top-color: var(--naowee-color-fill-inverse);
  top: 100%; left: 50%; transform: translateX(-50%);
}
/* Position: below */
.naowee-tooltip--bottom .naowee-tooltip__content { bottom: auto; top: calc(100% + 6px); }
.naowee-tooltip--bottom .naowee-tooltip__content::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--naowee-color-fill-inverse); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: POPOVER
   Card flotante con title + content + action
   Positioned relative to trigger element
   ═══════════════════════════════════════════════════════════════ */

.naowee-popover { position: relative; display: inline-flex; }
.naowee-popover__content {
  position: absolute; z-index: 1050;
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-border-default);
  border-radius: var(--naowee-border-radius-containers-compact);
  box-shadow: var(--naowee-shadow-modal-ds);
  padding: var(--naowee-spacing-padding-xtiny);
  min-width: 200px; max-width: 320px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--naowee-transition-default);
  /* Default: below */
  top: calc(100% + 8px); left: 0;
}
.naowee-popover--open .naowee-popover__content { opacity: 1; pointer-events: auto; }
.naowee-popover__title {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14); font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary); margin-bottom: var(--naowee-spacing-gap-xnano);
}
.naowee-popover__body {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14); font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-20); color: var(--naowee-color-text-secondary);
}
.naowee-popover__action {
  margin-top: var(--naowee-spacing-gap-xmicro);
}
/* Positions */
.naowee-popover--top .naowee-popover__content { top: auto; bottom: calc(100% + 8px); }
.naowee-popover--right .naowee-popover__content { top: 0; left: calc(100% + 8px); }
.naowee-popover--left .naowee-popover__content { top: 0; left: auto; right: calc(100% + 8px); }

/* ── Close button ── */
.naowee-popover__close {
  position: absolute; top: var(--naowee-spacing-padding-xmicro); right: var(--naowee-spacing-padding-xmicro);
  width: var(--naowee-size-xsmall); height: var(--naowee-size-xsmall);
  border: none; background: transparent; border-radius: var(--naowee-border-radius-small);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--naowee-color-icon-secondary); transition: background var(--naowee-transition-default);
}
.naowee-popover__close:hover { background: var(--naowee-color-interactive-fill-mute-hover); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: CARD
   Variants: Filled (bg secondary), Outline (border), Flat (no elevation)
   Padding: Default (p-20), Compact (p-12), Flush (p-0)
   States: Idle, Hover (clickable), Disabled
   ═══════════════════════════════════════════════════════════════ */

.naowee-card {
  background: var(--naowee-color-fill-primary);
  border-radius: var(--naowee-border-radius-containers-default);
  padding: var(--naowee-spacing-padding-tiny);
  font-family: var(--naowee-font-family);
  position: relative;
  overflow: hidden;
}
.naowee-card--outline { border: var(--naowee-border-width-small) solid var(--naowee-color-border-default); }
.naowee-card--filled { background: var(--naowee-color-fill-secondary); }
.naowee-card--flat { box-shadow: none; border: none; }
.naowee-card--compact { padding: var(--naowee-spacing-padding-micro); border-radius: var(--naowee-border-radius-containers-compact); }
.naowee-card--flush { padding: 0; }

/* Clickable */
.naowee-card--clickable { cursor: pointer; transition: box-shadow var(--naowee-transition-default), transform var(--naowee-transition-fast); }
.naowee-card--clickable:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.naowee-card--clickable:active { transform: translateY(0); }

/* Disabled */
.naowee-card--disabled { opacity: .5; pointer-events: none; }

/* Card sections */
.naowee-card__header { padding-bottom: var(--naowee-spacing-padding-micro); display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); }
.naowee-card__title { font-size: var(--naowee-font-size-16); font-weight: var(--naowee-font-weight-semibold); color: var(--naowee-color-text-primary); }
.naowee-card__subtitle { font-size: var(--naowee-font-size-12); color: var(--naowee-color-text-secondary); }
.naowee-card__body { font-size: var(--naowee-font-size-14); line-height: var(--naowee-font-line-height-20); color: var(--naowee-color-text-primary); }
.naowee-card__footer { padding-top: var(--naowee-spacing-padding-micro); display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro); }
.naowee-card__media { margin: calc(-1 * var(--naowee-spacing-padding-tiny)); margin-bottom: var(--naowee-spacing-padding-micro); border-radius: var(--naowee-border-radius-containers-default) var(--naowee-border-radius-containers-default) 0 0; overflow: hidden; }
.naowee-card__media img { width: 100%; display: block; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: CAROUSEL
   Figma: 412x216 container, 320x216 slots, 12px gap
   Features: arrows 32x32 rounded-rect, view indicator inside/outside
   ═══════════════════════════════════════════════════════════════ */

.naowee-carousel {
  position: relative;
  width: 412px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-micro);
  overflow: visible;
}
.naowee-carousel__viewport {
  position: relative;
  height: 216px;
  overflow: hidden;
}
.naowee-carousel__track {
  display: flex;
  gap: var(--naowee-spacing-gap-micro);
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.naowee-carousel__track::-webkit-scrollbar { display: none; }
.naowee-carousel__slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 320px;
  height: 216px;
  background: var(--naowee-color-fill-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-secondary);
  font-size: var(--naowee-font-size-12);
  overflow: hidden;
}
.naowee-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Nav arrows: 32x32 rounded rectangle (NOT circle) ── */
.naowee-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
  border: 0;
  background: var(--naowee-color-fill-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--naowee-color-text-primary);
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.2s cubic-bezier(.4,0,.2,1);
}
.naowee-carousel__nav:hover {
  background: var(--naowee-color-gray-100, #f4f5f9);
}
.naowee-carousel__nav:active {
  transform: translateY(-50%) scale(0.94);
}
.naowee-carousel__nav--prev { left: 8px; }
.naowee-carousel__nav--next { right: 8px; }
.naowee-carousel__nav svg { width: 16px; height: 16px; }

/* ── Indicator positioning ── */
.naowee-carousel__indicator-inside {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
}
.naowee-carousel__indicator-outside {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: HELPER
   Feedback row below form fields (text + optional icon + counter)
   Types: default, caution, negative, positive, informative, disabled
   Used by: textfield, dropdown, input-stepper, file-uploader, searchbox
   ═══════════════════════════════════════════════════════════════ */

.naowee-helper {
  display: flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
  width: 100%;
  padding-top: var(--naowee-spacing-padding-xnano);
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}
.naowee-helper__text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xnano);
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-16);
  color: var(--naowee-color-text-secondary);
}

/* Badge icon (colored circle with white icon inside) */
.naowee-helper__badge {
  width: 16px;
  height: 16px;
  border-radius: var(--naowee-border-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--naowee-color-feedback-fill-informative-loud, #006aff);
  color: #fff;
  margin-top: 0;
}
.naowee-helper__badge svg { width: 12px; height: 12px; stroke-width: 2.5; }

/* Counter (max 56px, right aligned) */
.naowee-helper__counter {
  max-width: 56px;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-16);
  color: var(--naowee-color-text-secondary);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Types ── */
.naowee-helper--caution .naowee-helper__badge { background: var(--naowee-color-feedback-fill-caution-loud, #d74009); }
.naowee-helper--negative .naowee-helper__badge { background: var(--naowee-color-feedback-fill-negative-loud, #ed314a); }
.naowee-helper--positive .naowee-helper__badge { background: var(--naowee-color-feedback-fill-positive-loud, #1f8923); }
.naowee-helper--informative .naowee-helper__badge { background: var(--naowee-color-feedback-fill-informative-loud, #006aff); }
.naowee-helper--disabled .naowee-helper__badge { background: var(--naowee-color-text-disabled, #9c9ebf); }

/* Negative (error) uses bold + red text per Figma */
.naowee-helper--negative .naowee-helper__text {
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-feedback-text-negative-loud, #c4031d);
}
/* Disabled text color */
.naowee-helper--disabled .naowee-helper__text { color: var(--naowee-color-text-disabled, #9c9ebf); }
/* Caution text stays secondary grey per Figma (only icon is orange) */
/* Positive / Informative: optional loud modifier */
.naowee-helper--loud.naowee-helper--positive .naowee-helper__text { color: var(--naowee-color-feedback-text-positive-loud, #1f8923); font-weight: var(--naowee-font-weight-semibold); }
.naowee-helper--loud.naowee-helper--informative .naowee-helper__text { color: var(--naowee-color-feedback-text-informative-loud, #006aff); font-weight: var(--naowee-font-weight-semibold); }
.naowee-helper--loud.naowee-helper--caution .naowee-helper__text { color: var(--naowee-color-feedback-text-caution-loud, #d74009); font-weight: var(--naowee-font-weight-semibold); }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: LIST ROW
   5 variants: default, chevron, checkbox, radio, pick (single-select)
   Sizes: Small, Medium, Large
   States: Idle, Hover, Active (pressed), Disabled
   Used by: Menu items
   ═══════════════════════════════════════════════════════════════ */

.naowee-list-row {
  position: relative;
  display: flex;
  align-items: center; /* default centered — shifts to flex-start when has-desc */
  gap: var(--naowee-spacing-gap-xmicro);
  width: 100%;
  padding: 12px;
  border-radius: var(--naowee-border-radius-small);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(.4,0,.2,1);
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}
/* With description → align top so title+desc stack naturally */
.naowee-list-row--has-desc {
  align-items: flex-start;
}
.naowee-list-row:hover {
  background: var(--naowee-color-gray-100, #f4f5f9);
}
.naowee-list-row:active {
  background: var(--naowee-color-gray-200, #e7e9f3);
}

/* ── Sizes ── */
.naowee-list-row--small { padding: 10px 12px; }
.naowee-list-row--large { padding: 16px 12px; }

/* ── Control (checkbox/radio) container ── */
.naowee-list-row__control {
  flex-shrink: 0;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.naowee-list-row__checkbox,
.naowee-list-row__radio {
  width: 20px;
  height: 20px;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-600, #8788ab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              border-color 0.2s cubic-bezier(.4,0,.2,1),
              box-shadow 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.15s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-list-row__checkbox {
  border-radius: var(--naowee-border-radius-tiny);
}
.naowee-list-row__radio {
  border-radius: 9999px;
  padding: 0;
}
.naowee-list-row__radio::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: transparent;
  transform: scale(0.5);
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.3s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-list-row__checkbox svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.68,-0.2,.32,1.4);
}
/* Checked states */
.naowee-list-row--checked .naowee-list-row__checkbox {
  background: var(--naowee-color-selected-fill-idle);
  border-color: var(--naowee-color-selected-fill-idle);
  box-shadow: 0 0 0 2px var(--naowee-color-orange-200, #ffdaa3);
}
.naowee-list-row--checked .naowee-list-row__checkbox svg {
  opacity: 1;
  transform: scale(1);
}
.naowee-list-row--checked .naowee-list-row__radio {
  background: var(--naowee-color-selected-fill-idle);
  border-color: var(--naowee-color-selected-fill-idle);
  box-shadow: 0 0 0 2px var(--naowee-color-orange-200, #ffdaa3);
}
.naowee-list-row--checked .naowee-list-row__radio::after {
  background: #fff;
  transform: scale(1);
}
.naowee-list-row:active .naowee-list-row__checkbox,
.naowee-list-row:active .naowee-list-row__radio {
  transform: scale(0.9);
}

/* ── Media slot (icon, thumbnail, avatar) ── */
.naowee-list-row__media {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-secondary);
}
.naowee-list-row__media--icon { width: 20px; height: 20px; }
.naowee-list-row__media--icon svg { width: 20px; height: 20px; }
.naowee-list-row__media--thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--naowee-color-fill-primary);
  border: 2px solid var(--naowee-color-border-primary);
  overflow: hidden;
}
.naowee-list-row__media--thumbnail svg { width: 24px; height: 24px; }
.naowee-list-row__media--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.naowee-list-row__media--avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-text-accent);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  overflow: hidden;
}
.naowee-list-row__media--avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Align content with 40px thumbnail only when description is present */
.naowee-list-row--has-thumb.naowee-list-row--has-desc .naowee-list-row__content {
  padding-top: 2px;
}
/* With checkbox/radio + desc, content aligns at 4px top padding */
.naowee-list-row--has-control.naowee-list-row--has-desc .naowee-list-row__content {
  padding-top: 4px;
}

/* ── Content (title + description) ── */
.naowee-list-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--naowee-spacing-gap-pico);
}
.naowee-list-row__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
  min-height: 20px;
}
.naowee-list-row__title {
  flex: 1;
  min-width: 0;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: 18px;
  color: var(--naowee-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naowee-list-row__desc-row {
  display: flex;
  align-items: flex-start;
  gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-list-row__description {
  flex: 1;
  min-width: 0;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.naowee-list-row__top-right {
  flex-shrink: 0;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 18px;
  color: var(--naowee-color-text-primary);
  white-space: nowrap;
}
.naowee-list-row__bottom-right {
  flex-shrink: 0;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-regular);
  line-height: 16px;
  color: var(--naowee-color-text-primary);
  white-space: nowrap;
}

/* ── Chevron / right slot ── */
.naowee-list-row__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--naowee-color-text-primary);
}
.naowee-list-row__chevron svg { width: 20px; height: 20px; }

/* ── Divider ── */
.naowee-list-row--divider::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: var(--naowee-color-border-primary);
}

/* ── Bottom slot ── */
.naowee-list-row__bottom-slot {
  width: 100%;
  height: 32px;
  border-radius: var(--naowee-border-radius-tiny);
  background: #f9ebff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--naowee-font-size-12);
  color: var(--naowee-color-text-secondary);
  margin-top: 4px;
}

/* ── Pick variant (single-select): bg + left pipe ── */
.naowee-list-row--pick.naowee-list-row--selected {
  background: var(--naowee-color-interactive-fill-quiet-idle);
}
.naowee-list-row--pick.naowee-list-row--selected:hover {
  background: var(--naowee-color-orange-200, #ffdaa3);
}
.naowee-list-row--pick.naowee-list-row--selected::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 9999px;
  background: var(--naowee-color-selected-fill-idle);
}

/* ── Disabled state ── */
.naowee-list-row--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-list-row--disabled .naowee-list-row__title,
.naowee-list-row--disabled .naowee-list-row__description,
.naowee-list-row--disabled .naowee-list-row__top-right,
.naowee-list-row--disabled .naowee-list-row__bottom-right,
.naowee-list-row--disabled .naowee-list-row__media,
.naowee-list-row--disabled .naowee-list-row__chevron {
  color: var(--naowee-color-text-disabled);
}
.naowee-list-row--disabled .naowee-list-row__checkbox,
.naowee-list-row--disabled .naowee-list-row__radio {
  border-color: var(--naowee-color-border-disabled);
  box-shadow: none;
  background: var(--naowee-color-fill-primary);
}
.naowee-list-row--disabled.naowee-list-row--pick.naowee-list-row--selected::before {
  background: var(--naowee-color-fill-disabled);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: MENU
   Types: Default, Autosuggest, Multiple Selection, Single Selection
   Figma: width 320, radius 12, border 1px #e7e9f3, shadow 0 8px 12px
   ═══════════════════════════════════════════════════════════════ */

.naowee-menu {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-width: 200px;
  max-height: 400px;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-200, #e7e9f3);
  border-radius: var(--naowee-border-radius-containers-compact);
  box-shadow: 0 8px 12px 0 rgba(40, 40, 52, 0.1);
  overflow: clip;
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}

/* Top slot (search input area for multi/single selection) */
.naowee-menu__top-slot {
  padding: 16px 16px 4px 16px;
  flex-shrink: 0;
}
.naowee-menu__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 8px 12px;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-600, #8788ab);
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  transition: border-color var(--naowee-transition-default);
}
.naowee-menu__search:focus-within {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 7px 11px;
}
.naowee-menu__search-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--naowee-color-text-secondary);
}
.naowee-menu__search-icon svg { width: 24px; height: 24px; }
.naowee-menu__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--naowee-font-size-14);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
}
.naowee-menu__search-input::placeholder {
  color: var(--naowee-color-text-secondary);
}

/* List container (inner padding per Figma) */
.naowee-menu__list {
  display: flex;
  flex-direction: column;
  padding: var(--naowee-spacing-padding-xnano);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.naowee-menu--scroll .naowee-menu__list {
  max-height: 200px;
}

/* ── Item (row) — uses list-row internally ── */
/* For backward compat, .naowee-menu__item acts like .naowee-list-row */
.naowee-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: 12px;
  border-radius: var(--naowee-border-radius-small);
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  cursor: pointer;
  transition: background var(--naowee-transition-fast);
  font-feature-settings: 'case' 1;
}
.naowee-menu__item:hover {
  background: var(--naowee-color-gray-100, #f4f5f9);
}

/* Small size items */
.naowee-menu--small .naowee-menu__item {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}

/* ── Default menu: destructive + disabled states ── */
.naowee-menu__item--disabled {
  color: var(--naowee-color-text-disabled);
  pointer-events: none;
}
.naowee-menu__item--destructive {
  color: var(--naowee-color-feedback-text-negative-loud, #c4031d);
}
.naowee-menu__item--destructive:hover {
  background: var(--naowee-color-feedback-fill-negative-quiet);
}

/* ── Autosuggest: semibold "suggestion" portion ── */
.naowee-menu__item em {
  font-style: normal;
  font-weight: var(--naowee-font-weight-semibold);
}

/* ── Multiple selection: checkbox on left ── */
.naowee-menu__item-check {
  width: 20px;
  height: 20px;
  border-radius: var(--naowee-border-radius-tiny);
  border: 1px solid var(--naowee-color-gray-600, #8788ab);
  background: var(--naowee-color-fill-primary);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s cubic-bezier(.4,0,.2,1),
              border-color 0.2s cubic-bezier(.4,0,.2,1);
}
.naowee-menu__item-check svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.68,-0.2,.32,1.4);
}
.naowee-menu__item--checked .naowee-menu__item-check {
  background: var(--naowee-color-interactive-fill-loud-idle);
  border-color: var(--naowee-color-interactive-fill-loud-idle);
}
.naowee-menu__item--checked .naowee-menu__item-check svg {
  opacity: 1;
  transform: scale(1);
}

/* ── Single selection: background tint + left pipe ── */
.naowee-menu__item--selected {
  background: var(--naowee-color-interactive-fill-quiet-idle);
}
.naowee-menu__item--selected::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 9999px;
  background: var(--naowee-color-selected-fill-idle);
}
.naowee-menu__item--selected:hover {
  background: var(--naowee-color-interactive-fill-quiet-hover, #ffe0a8);
}

/* ── Section header (optional) ── */
.naowee-menu__section {
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-micro);
  font-size: var(--naowee-font-size-10);
  font-weight: var(--naowee-font-weight-medium);
  color: var(--naowee-color-text-secondary);
  letter-spacing: var(--naowee-font-letter-spacing-caps);
  text-transform: uppercase;
}

/* ── Divider ── */
.naowee-menu__divider {
  height: 0;
  border-top: 1px solid var(--naowee-color-gray-200, #e7e9f3);
  margin: var(--naowee-spacing-padding-xnano) 0;
}

/* ── Bottom slot (footer with button for multi-select) ── */
.naowee-menu__bottom-slot {
  padding: 16px;
  flex-shrink: 0;
  background: var(--naowee-color-fill-primary);
}
.naowee-menu__footer-btn {
  width: 100%;
  height: 48px;
  padding: 2px 24px;
  border-radius: var(--naowee-border-radius-actions-inputs-default);
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: #fff;
  border: 0;
  font-family: inherit;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  line-height: var(--naowee-font-line-height-18);
  cursor: pointer;
  transition: background var(--naowee-transition-default);
}
.naowee-menu__footer-btn:hover {
  background: var(--naowee-color-interactive-fill-loud-hover);
}

/* ── Loading state ── */
.naowee-menu--loading .naowee-menu__list {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.naowee-menu__loader {
  width: 32px;
  height: 32px;
  color: var(--naowee-color-interactive-border-active);
  animation: naowee-spin 0.8s linear infinite;
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: DATE PICKER / TIME PICKER
   Calendar grid + time selectors
   ═══════════════════════════════════════════════════════════════ */

/* ── Date Picker container ── */
.naowee-datepicker {
  display: flex; flex-direction: column;
  gap: var(--naowee-spacing-gap-xtiny, 16px);
  padding: var(--naowee-spacing-padding-xtiny);
  width: 412px; font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}

/* ── Calendar section ── */
.naowee-datepicker__calendar {
  display: flex; flex-direction: column;
  gap: var(--naowee-spacing-gap-xmicro);
  overflow: clip;
}

/* ── Header (month title + nav buttons) ── */
.naowee-datepicker__header {
  display: flex; align-items: center; justify-content: space-between;
}
.naowee-datepicker__month-selector {
  display: flex; align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
  height: 40px; cursor: pointer;
}
.naowee-datepicker__month {
  font-size: 18px; font-weight: var(--naowee-font-weight-semibold);
  line-height: 22px; color: var(--naowee-color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.naowee-datepicker__month-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--naowee-color-icon-accent);
}
.naowee-datepicker__month-chevron svg { width: 20px; height: 20px; }
.naowee-datepicker__controls {
  display: flex; gap: var(--naowee-spacing-gap-xmicro);
}
.naowee-datepicker__nav {
  width: 40px; height: 40px;
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  border: none;
  background: var(--naowee-color-interactive-fill-quiet-idle);
  color: var(--naowee-color-icon-accent, var(--naowee-color-text-accent));
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--naowee-transition-default);
  flex-shrink: 0;
}
.naowee-datepicker__nav:hover { background: var(--naowee-color-interactive-fill-quiet-hover); }
.naowee-datepicker__nav svg { width: 20px; height: 20px; }

/* ── Content (weekdays + weeks) ── */
.naowee-datepicker__content {
  display: flex; flex-direction: column;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: 0 var(--naowee-spacing-padding-pico);
}

/* ── Week row (7 cells) ── */
.naowee-datepicker__week {
  display: flex; justify-content: space-between;
}

/* ── Weekday header ── */
.naowee-datepicker__weekday {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-secondary);
  line-height: var(--naowee-font-line-height-16);
}

/* ── Day cell ── */
.naowee-datepicker__day {
  width: 40px; height: 40px;
  border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
  border: none; background: transparent;
  font-family: var(--naowee-font-family);
  font-size: 16px; line-height: 24px;
  color: var(--naowee-color-text-primary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--naowee-transition-fast);
  position: relative; padding: 2px; flex-shrink: 0;
}
.naowee-datepicker__day:hover { background: var(--naowee-color-interactive-fill-mute-hover); }

/* Selected day */
.naowee-datepicker__day--selected {
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-text-inverse);
  border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
}
.naowee-datepicker__day--selected:hover { background: var(--naowee-color-interactive-fill-loud-hover); }

/* Today */
.naowee-datepicker__day--today { font-weight: var(--naowee-font-weight-bold, 700); }

/* Disabled / other month */
.naowee-datepicker__day--disabled,
.naowee-datepicker__day--other-month {
  color: var(--naowee-color-text-disabled);
  pointer-events: none;
}

/* ── Range selection ── */
/* Day cell needs isolation so ::before sits behind the text */
.naowee-datepicker__day {
  isolation: isolate;
}
.naowee-datepicker__day--in-range,
.naowee-datepicker__day--range-start,
.naowee-datepicker__day--range-end {
  border-radius: 0;
}
.naowee-datepicker__day--in-range {
  background: var(--naowee-color-interactive-fill-quiet-idle, #ffedc7);
  color: var(--naowee-color-text-primary);
}
.naowee-datepicker__day--range-start,
.naowee-datepicker__day--range-end {
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-text-inverse);
  border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
  position: relative;
}
/* Pale amber connector bridging start/end to in-range cells */
.naowee-datepicker__day--range-start::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -20%;
  width: 20%;
  background: var(--naowee-color-interactive-fill-quiet-idle, #ffedc7);
  z-index: -1;
}
.naowee-datepicker__day--range-end::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20%;
  width: 20%;
  background: var(--naowee-color-interactive-fill-quiet-idle, #ffedc7);
  z-index: -1;
}

/* ── Multiple selection (circles) ── */
.naowee-datepicker__day--multi-selected {
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: var(--naowee-color-text-inverse);
}

/* ── Month picker grid ── */
.naowee-datepicker__month-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: var(--naowee-spacing-padding-xtiny) 0;
}
.naowee-datepicker__month-item {
  display: flex; align-items: center; justify-content: center;
  height: 40px; border: none; background: transparent;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-primary);
  cursor: pointer; border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
  transition: background var(--naowee-transition-fast);
}
.naowee-datepicker__month-item:hover { background: var(--naowee-color-interactive-fill-mute-hover); }
.naowee-datepicker__month-item--selected {
  border: var(--naowee-border-width-medium) solid var(--naowee-color-border-accent);
  box-shadow: var(--naowee-shadow-highlight-accent);
  font-weight: var(--naowee-font-weight-semibold);
}
.naowee-datepicker__month-item--disabled {
  color: var(--naowee-color-text-disabled);
  pointer-events: none;
}

/* ── Action button (bottom) ── */
.naowee-datepicker__action {
  display: flex; align-items: center; justify-content: center;
  height: 48px; width: 100%;
  background: var(--naowee-color-interactive-fill-loud-idle);
  color: #fff;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  border: none; border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  cursor: pointer;
}

/* ── Date Picker Field (input with calendar icon) ── */
.naowee-datepicker-field {
  display: flex; flex-direction: column;
  width: 100%;
}
.naowee-datepicker-field__input {
  display: flex; align-items: center;
  gap: var(--naowee-spacing-gap-xmicro);
  height: var(--naowee-size-height-inputs-large, 48px);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  transition: border-color var(--naowee-transition-default);
  font-family: var(--naowee-font-family);
}
.naowee-datepicker-field__input:hover { border-color: var(--naowee-color-interactive-border-hover); }
.naowee-datepicker-field--active .naowee-datepicker-field__input {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-interactive-border-active);
}
.naowee-datepicker-field__icon {
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--naowee-color-icon-secondary);
}
.naowee-datepicker-field__icon svg { width: 24px; height: 24px; }
.naowee-datepicker-field__value {
  flex: 1; min-width: 0;
  font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.naowee-datepicker-field__controls {
  display: flex; align-items: center;
  gap: var(--naowee-spacing-gap-xnano);
  flex-shrink: 0;
}
.naowee-datepicker-field__clear {
  width: 24px; height: 24px; border: none; background: transparent;
  border-radius: var(--naowee-border-radius-small, 8px);
  color: var(--naowee-color-icon-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.naowee-datepicker-field__clear svg { width: 20px; height: 20px; }
.naowee-datepicker-field__chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--naowee-color-icon-secondary);
}
.naowee-datepicker-field__chevron svg { width: 20px; height: 20px; }

/* Small field */
.naowee-datepicker-field--small .naowee-datepicker-field__input {
  height: var(--naowee-size-height-inputs-small, 32px);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-nano, 6px);
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
}
.naowee-datepicker-field--small .naowee-datepicker-field__value {
  font-size: var(--naowee-font-size-12);
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENT: TIME PICKER (Granular + Intervals)
   Field: clock icon + value + chevron (intervals only)
   Dropdown menu: list of hour options
   States: Idle, Hover, Active, Error, Error active, Disabled, Readonly
   Sizes: Large (48px), Small (32px)
   ═══════════════════════════════════════════════════════════════ */

.naowee-timepicker {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: var(--naowee-font-family);
  font-feature-settings: 'case' 1;
}

.naowee-timepicker__label {
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  padding-bottom: 2px;
}

/* ── Field (trigger) ── */
.naowee-timepicker__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-600, #8788ab);
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  cursor: pointer;
  transition: border-color 0.2s cubic-bezier(.4,0,.2,1),
              border-width 0.2s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
  width: 100%;
}
.naowee-timepicker__field:hover {
  border-color: var(--naowee-color-gray-700, #646587);
}
.naowee-timepicker--open .naowee-timepicker__field,
.naowee-timepicker__field:focus-within {
  border-width: 2px;
  border-color: var(--naowee-color-interactive-border-active);
  padding: 0 11px;
}
.naowee-timepicker__clock {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--naowee-color-text-primary);
}
.naowee-timepicker__clock svg { width: 24px; height: 24px; }
.naowee-timepicker__value {
  flex: 1;
  min-width: 0;
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.naowee-timepicker--has-value .naowee-timepicker__value {
  color: var(--naowee-color-text-primary);
}
.naowee-timepicker__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--naowee-color-text-primary);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.naowee-timepicker__chevron svg { width: 20px; height: 20px; }
.naowee-timepicker--open .naowee-timepicker__chevron {
  transform: rotate(180deg);
}

/* Sizes */
.naowee-timepicker--small .naowee-timepicker__field {
  height: 32px;
  padding: 0 6px;
  border-radius: var(--naowee-border-radius-actions-inputs-compact, 8px);
}
.naowee-timepicker--small .naowee-timepicker__value {
  font-size: var(--naowee-font-size-12);
  line-height: var(--naowee-font-line-height-16);
}
.naowee-timepicker--small .naowee-timepicker__chevron {
  width: 16px;
  height: 16px;
}
.naowee-timepicker--small .naowee-timepicker__chevron svg { width: 16px; height: 16px; }
.naowee-timepicker--small.naowee-timepicker--open .naowee-timepicker__field {
  padding: 0 5px;
}

/* States */
.naowee-timepicker--error .naowee-timepicker__field {
  border-color: var(--naowee-color-feedback-border-negative-loud, #ed314a);
}
.naowee-timepicker--error.naowee-timepicker--open .naowee-timepicker__field,
.naowee-timepicker--error .naowee-timepicker__field:focus-within {
  border-width: 2px;
  border-color: var(--naowee-color-feedback-border-negative-loud, #ed314a);
}
.naowee-timepicker--disabled .naowee-timepicker__field {
  border-color: var(--naowee-color-border-disabled, #b5b9d4);
  cursor: not-allowed;
  pointer-events: none;
}
.naowee-timepicker--disabled .naowee-timepicker__value,
.naowee-timepicker--disabled .naowee-timepicker__clock,
.naowee-timepicker--disabled .naowee-timepicker__chevron,
.naowee-timepicker--disabled .naowee-timepicker__label {
  color: var(--naowee-color-text-disabled, #9c9ebf);
}

/* ── Dropdown menu ── */
.naowee-timepicker__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--naowee-color-fill-primary);
  border: 1px solid var(--naowee-color-gray-200, #e7e9f3);
  border-radius: var(--naowee-border-radius-containers-compact, 12px);
  box-shadow: 0 8px 12px 0 rgba(40, 40, 52, 0.1);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1),
              transform 0.25s cubic-bezier(.4,0,.2,1);
}
.naowee-timepicker--open .naowee-timepicker__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.naowee-timepicker__option {
  padding: 12px;
  border-radius: var(--naowee-border-radius-small, 8px);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular);
  line-height: var(--naowee-font-line-height-18);
  color: var(--naowee-color-text-primary);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(.4,0,.2,1);
}
.naowee-timepicker__option:hover {
  background: var(--naowee-color-gray-100, #f4f5f9);
}
.naowee-timepicker__option--selected {
  background: var(--naowee-color-interactive-fill-quiet-idle, #ffedc7);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: VIEW INDICATOR
   Glass pill with dots — 2 orientations (horizontal, vertical)
   Supports 2-6 pages explicitly, collapse pattern for 6+
   ═══════════════════════════════════════════════════════════════ */

.naowee-view-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--naowee-spacing-gap-xmicro);
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--naowee-border-radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Dot ── */
.naowee-view-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--naowee-border-radius-full);
  background: rgba(40, 40, 52, 0.3);
  flex-shrink: 0;
  transition: width 0.3s cubic-bezier(.4,0,.2,1),
              height 0.3s cubic-bezier(.4,0,.2,1),
              background 0.2s cubic-bezier(.4,0,.2,1);
}

/* Active (pill) */
.naowee-view-indicator__dot--active {
  width: 24px;
  background: var(--naowee-color-text-primary);
}

/* ── Horizontal orientation (default) ── */
.naowee-view-indicator--horizontal {
  flex-direction: row;
}

/* ── Vertical orientation ── */
.naowee-view-indicator--vertical {
  flex-direction: column;
}
.naowee-view-indicator--vertical .naowee-view-indicator__dot--active {
  width: 8px;
  height: 24px;
}

/* ── Collapsed dots (for 6+ pages) ── */
.naowee-view-indicator__dot--shrink-sm {
  width: 6px;
  height: 6px;
  background: rgba(40, 40, 52, 0.2);
}
.naowee-view-indicator__dot--shrink-xs {
  width: 4px;
  height: 4px;
  background: rgba(40, 40, 52, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SHORTCUTS (quick action pills)
   ═══════════════════════════════════════════════════════════════ */

.naowee-shortcuts { display: flex; gap: var(--naowee-spacing-gap-xmicro); flex-wrap: wrap; }
.naowee-shortcut {
  display: inline-flex; align-items: center; gap: var(--naowee-spacing-gap-xnano);
  height: var(--naowee-size-small); padding: 0 var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-full); border: var(--naowee-border-width-small) solid var(--naowee-color-border-dark);
  background: var(--naowee-color-fill-primary); font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14); font-weight: var(--naowee-font-weight-regular);
  color: var(--naowee-color-text-primary); cursor: pointer; white-space: nowrap;
  transition: all var(--naowee-transition-default);
}
.naowee-shortcut:hover { border-color: var(--naowee-color-interactive-border-active); color: var(--naowee-color-text-accent); }
.naowee-shortcut--selected { border-color: var(--naowee-color-interactive-fill-loud-idle); background: var(--naowee-color-interactive-fill-quiet-idle); color: var(--naowee-color-text-accent); font-weight: var(--naowee-font-weight-semibold); }
.naowee-shortcut svg { width: 16px; height: 16px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: SEGMENTED CONTROL
   Toggle group (like iOS segmented control)
   ═══════════════════════════════════════════════════════════════ */

/* ── Container ── */
.naowee-segment {
  position: relative;
  display: inline-flex;
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-small) solid var(--naowee-color-border-primary, #d0d4e6);
  border-radius: var(--naowee-border-radius-square-to-circle-large, 12px);
  padding: var(--naowee-spacing-padding-xnano);
  gap: var(--naowee-spacing-gap-none, 0px);
  height: 40px;
  overflow: clip;
  font-feature-settings: 'case' 1;
}

/* ── Sliding pill (background for active item) ── */
.naowee-segment__pill {
  box-sizing: border-box;
  position: absolute;
  top: var(--naowee-spacing-padding-xnano, 4px);
  bottom: var(--naowee-spacing-padding-xnano, 4px);
  left: 0;
  width: 0;
  background: var(--naowee-color-fill-primary);
  border: 2px solid var(--naowee-color-selected-border-idle, #d74009);
  border-radius: var(--naowee-border-radius-square-to-circle-small, 8px);
  box-shadow: var(--naowee-shadow-highlight-accent);
  pointer-events: none;
  transform: translate3d(var(--segment-pill-x, 0), 0, 0);
  transition:
    transform 380ms cubic-bezier(.4, 0, .2, 1),
    width 380ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform, width;
  z-index: 0;
}
.naowee-segment__pill--no-anim {
  transition: none;
}

/* ── Segment item (unselected) ── */
.naowee-segment__item {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: var(--naowee-spacing-gap-xnano);
  align-self: stretch;
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-micro);
  border-radius: var(--naowee-border-radius-square-to-circle-small, 8px);
  border: 2px solid transparent;
  background: transparent;
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-secondary);
  cursor: pointer;
  transition: color 220ms cubic-bezier(.22,1,.36,1);
  white-space: nowrap;
  overflow: clip;
  flex-shrink: 0;
}
.naowee-segment__item:hover { color: var(--naowee-color-text-primary); }
.naowee-segment__item svg {
  width: 20px; height: 20px; flex-shrink: 0;
  transition: opacity 220ms cubic-bezier(.22,1,.36,1);
  opacity: .75;
}

/* ── Segment item (selected/active) ── */
.naowee-segment__item--active {
  color: var(--naowee-color-text-primary);
}
.naowee-segment__item--active svg { opacity: 1; }

/* ── Proportional width (segments fill container equally) ── */
.naowee-segment--proportional .naowee-segment__item { flex: 1; }

/* ── Disabled ── */
.naowee-segment__item--disabled { color: var(--naowee-color-text-disabled); pointer-events: none; }

/* ── Small size (32px) ── */
.naowee-segment--small { height: 32px; }
.naowee-segment--small .naowee-segment__item {
  font-size: var(--naowee-font-size-12);
  padding: var(--naowee-spacing-padding-xnano) var(--naowee-spacing-padding-xmicro);
}
.naowee-segment--small .naowee-segment__item svg { width: 16px; height: 16px; }

/* ── Thumbnail in segment ── */
.naowee-segment__thumb {
  width: 20px; height: 20px;
  border-radius: var(--naowee-border-radius-full);
  background: var(--naowee-color-fill-secondary);
  overflow: hidden; flex-shrink: 0;
}
.naowee-segment__thumb img { width: 100%; height: 100%; object-fit: cover; }


/* ═══════════════════════════════════════════════════════════════
   COMPONENT: FILE UPLOADER
   Textfield-based with upload action, file tags, multi-file
   ═══════════════════════════════════════════════════════════════ */

.naowee-file-uploader { display: flex; flex-direction: column; width: 100%; }

/* ── Label (inherits textfield label) ── */
.naowee-file-uploader__label {
  font-family: var(--naowee-font-family);
  font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-regular, 400);
  line-height: var(--naowee-font-line-height-18, 18px);
  color: var(--naowee-color-text-primary);
  padding-bottom: var(--naowee-spacing-padding-pico);
}
.naowee-file-uploader__label--required::after {
  content: '*'; color: var(--naowee-color-text-accent); margin-left: 2px;
}

/* ── Input container ── */
.naowee-file-uploader__input-wrap {
  display: flex; align-items: center; gap: var(--naowee-spacing-gap-xmicro);
  height: var(--naowee-size-height-inputs-large, 48px);
  padding: var(--naowee-spacing-padding-xmicro) var(--naowee-spacing-padding-micro);
  border: var(--naowee-border-width-small) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-actions-inputs-default, 12px);
  background: var(--naowee-color-fill-primary);
  transition: border-color var(--naowee-transition-default);
  font-family: var(--naowee-font-family);
}
.naowee-file-uploader__input-wrap:hover { border-color: var(--naowee-color-interactive-border-hover); }

/* ── Placeholder text ── */
.naowee-file-uploader__placeholder {
  flex: 1; font-size: var(--naowee-font-size-14);
  color: var(--naowee-color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Upload action link ── */
.naowee-file-uploader__action {
  flex-shrink: 0; border: none; background: transparent;
  font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-link-idle, var(--naowee-color-text-accent));
  cursor: pointer; text-decoration: underline;
  white-space: nowrap;
}

/* ── File tag (inside input) ── */
.naowee-file-uploader__file-tag {
  display: inline-flex; align-items: center; gap: var(--naowee-spacing-gap-xnano);
  height: var(--naowee-size-height-small, 32px);
  padding: var(--naowee-spacing-padding-pico) var(--naowee-spacing-padding-micro);
  background: var(--naowee-color-fill-primary);
  border: var(--naowee-border-width-medium) solid var(--naowee-color-interactive-border-idle);
  border-radius: var(--naowee-border-radius-square-to-circle-small, 8px);
  font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-12);
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary);
  max-width: 100%; overflow: hidden;
  box-shadow: none; white-space: nowrap; text-overflow: ellipsis;
}
.naowee-file-uploader__file-tag svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--naowee-color-icon-secondary); }

/* Uploaded: uses Tag positive styles (green border 2px + shadow highlight) */
.naowee-file-uploader__file-tag--uploaded {
  border-width: var(--naowee-border-width-medium);
  border-color: var(--naowee-color-feedback-border-positive-loud);
  box-shadow: var(--naowee-shadow-highlight-positive);
  background: var(--naowee-color-fill-primary);
}
.naowee-file-uploader__file-tag--uploaded .naowee-file-uploader__file-dismiss {
  display: flex;
}

/* Confirmed (no dismiss, readonly) */
.naowee-file-uploader__file-tag--confirmed {
  border-color: var(--naowee-color-border-primary, #d0d4e6);
  background: var(--naowee-color-fill-secondary);
  color: var(--naowee-color-text-secondary);
}

/* ── File dismiss (×) ── */
.naowee-file-uploader__file-dismiss {
  display: none; width: 16px; height: 16px; flex-shrink: 0;
  border: none; background: transparent; cursor: pointer;
  color: var(--naowee-color-feedback-fill-positive-loud);
  align-items: center; justify-content: center;
}

/* ── Progress spinner ── */
.naowee-file-uploader__progress {
  width: 32px; height: 32px; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.naowee-file-uploader__progress-ring {
  width: 32px; height: 32px;
  border: 3px solid var(--naowee-color-border-primary, #d0d4e6);
  border-top-color: var(--naowee-color-feedback-fill-positive-loud);
  border-radius: 50%;
  animation: naowee-spin 1s linear infinite;
}
.naowee-file-uploader__progress-text {
  position: absolute; font-size: 10px; font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-primary);
}

/* ── Preview link (read only) ── */
.naowee-file-uploader__preview {
  display: flex; align-items: center; gap: var(--naowee-spacing-gap-xnano);
  font-family: var(--naowee-font-family); font-size: var(--naowee-font-size-14);
  font-weight: var(--naowee-font-weight-semibold);
  color: var(--naowee-color-text-accent);
  cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.naowee-file-uploader__preview svg { width: 20px; height: 20px; }

/* ── Disabled ── */
.naowee-file-uploader--disabled .naowee-file-uploader__label { color: var(--naowee-color-text-disabled); }
.naowee-file-uploader--disabled .naowee-file-uploader__input-wrap {
  border-color: var(--naowee-color-border-disabled);
}
.naowee-file-uploader--disabled .naowee-file-uploader__file-tag {
  color: var(--naowee-color-text-disabled);
}

/* ── Read only (no border on input) ── */
.naowee-file-uploader--readonly .naowee-file-uploader__input-wrap {
  border-color: transparent; padding-left: 0;
}
.naowee-file-uploader--readonly .naowee-file-uploader__label {
  color: var(--naowee-color-text-secondary);
}

/* Drag over state */
.naowee-file-uploader--dragover .naowee-file-uploader__input-wrap {
  border-color: var(--naowee-color-interactive-border-active);
  border-style: dashed;
  background: var(--naowee-color-interactive-fill-quiet-idle);
}