/* ========================================
       LAZY PROMPTER APP v1.40 (P0 Fixes)
       Design System: Master v1.5
       ======================================== */

    :root {
      /* Backgrounds */
      --lp-bg-base: #1E1F20;
      --lp-bg-surface: #2C2E31;
      --lp-bg-elevated: #353639;
      --lp-bg-input: #18191B;
      
      /* Text */
      --lp-text-primary: #FFFFFF;
      --lp-text-secondary: #C8C9CA;
      --lp-text-tertiary: #A0A1A3; /* 2026-09-05: dark twin of the light contrast fix; #8D8E90 was 3.68:1 on --lp-bg-elevated */
      --lp-text-on-accent: #1E1F20; /* 2026-09-06: was #FFFFFF, 2.77:1 on --lp-accent-base dark and 3.56:1 light; #1E1F20 is brand-tokens.json on_accent, 5.96:1 dark, 4.63:1 light */
      
      /* Font Family */
      --lp-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --lp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      
      /* Strokes */
      --lp-stroke-default: #3D3E40;
      --lp-stroke-light: #4B4C4F;
      --lp-stroke-strong: #5D5E60;
      
      /* Accent */
      --lp-accent-base: #FF5FB8;
      --lp-accent-hover: #FF6FC0;
      --lp-accent-active: #E650A6;

      /* Accent palette (picker options — single source of truth) */
      --lp-palette-pink: #FF5FB8;
      --lp-palette-blue: #60A5FA;
      --lp-palette-green: #22C55E; /* 2026-09-05: was byte-identical to --lp-mode-prompt */
      --lp-palette-yellow: #FBBF24;
      --lp-palette-red: #F87171;
      --lp-palette-purple: #A78BFA;
      --lp-palette-teal: #2DD4BF;
      --lp-palette-orange: #FB923C;
      
      /* Semantic */
      --lp-success: #7DFFD1;
      --lp-warning: #FFB65C;
      --lp-error: #FF6A6A;
      --lp-error-hover: #D45555;
      --lp-error-active: #B84545;

      /* TEXT-ONLY variants. The four tokens above paint fills, borders AND text,
         so darkening them for readability would darken every banner and pill
         background too. These paint text only. On dark surfaces the bright
         values already clear AA, so here they point straight back at the base
         and the light theme is where they diverge. */
      --lp-accent-text: var(--lp-accent-base);
      --lp-success-text: var(--lp-success);
      --lp-warning-text: var(--lp-warning);
      --lp-error-text: var(--lp-error);
      
      /* Tag Colors — Master v1.4 §9.2 (mapped to app's semantic names) */
      --lp-tag-rose: #E85A9C;    /* spec: pink */
      --lp-tag-amber: #C9A227;   /* spec: yellow */
      --lp-tag-lime: #3D9A6D;    /* spec: green */
      --lp-tag-cyan: #4A8FD4;    /* spec: blue */
      --lp-tag-violet: #9B6DC6;  /* spec: purple */
      --lp-tag-slate: #8D8E90;   /* neutral */
      
      /* Radius */
      --lp-radius-xs: 4px;
      --lp-radius-s: 8px;
      --lp-radius-m: 12px;
      --lp-radius-l: 16px;
      --lp-radius-xl: 20px;
      --lp-radius-full: 999px;
      
      /* Spacing */
      --lp-space-4: 4px;
      --lp-space-8: 8px;
      --lp-space-12: 12px;
      --lp-space-16: 16px;
      --lp-space-20: 20px;
      --lp-space-24: 24px;
      --lp-space-32: 32px;
      
      /* Typography */
      --lp-text-2xs: 10px;
      --lp-text-xs: 11px;
      --lp-text-sm: 12px;
      --lp-text-base: 13px;
      --lp-text-md: 14px;
      --lp-text-lg: 15px;
      --lp-text-lg-plus: 16px;
      --lp-text-xl: 18px;
      --lp-text-xl-plus: 20px;
      --lp-text-2xl: 24px;
      --lp-text-3xl: 28px;
      
      /* Font Weight */
      --lp-font-normal: 400;
      --lp-font-medium: 500;
      --lp-font-semibold: 600;
      
      /* Line Height */
      --lp-leading-none: 1;
      --lp-leading-tight: 1.3;
      --lp-leading-snug: 1.4;
      --lp-leading-normal: 1.5;
      --lp-leading-relaxed: 1.6;
      
      /* Letter Spacing */
      --lp-tracking-tight: -0.01em;
      --lp-tracking-normal: 0;
      --lp-tracking-wide: 0.05em;
      --lp-tracking-wider: 0.08em;
      
      /* Border Width */
      --lp-border-thin: 1px;
      --lp-border-thick: 2px;
      
      /* Icon Sizes */
      --lp-icon-sm: 14px;
      --lp-icon-base: 16px;
      --lp-icon-stroke: 1.5;
      
      /* Component Heights */
      --lp-height-xs: 24px;
      --lp-height-sm: 32px;
      --lp-height-md: 40px;
      --lp-height-lg: 44px;
      --lp-height-xl: 56px;
      
      /* Size Scale (reusable) */
      --lp-size-2: 8px;
      --lp-size-4: 16px;
      --lp-size-5: 20px;
      --lp-size-6: 24px;
      --lp-size-8: 32px;
      --lp-size-10: 40px;
      
      /* Breakpoints (for reference, can't use in @media) */
      /* --lp-breakpoint-sm: 640px; */
      /* --lp-breakpoint-md: 768px; */
      /* --lp-breakpoint-lg: 992px; */
      /* --lp-breakpoint-xl: 1200px; */
      
      /* Shadows */
      --lp-shadow-s: 0 2px 6px rgba(0,0,0,0.35);
      --lp-shadow-m: 0 6px 18px rgba(0,0,0,0.40);
      --lp-shadow-l: 0 10px 28px rgba(0,0,0,0.40);
      
      /* Motion — Master v1.4 §9.7 */
      --lp-motion-instant: 0ms;
      --lp-motion-fast: 80ms;
      --lp-motion-mid: 120ms;
      --lp-motion-slow: 180ms;
      
      /* Animation Durations (looping/special) */
      --lp-anim-spin: 0.8s;
      --lp-anim-spin-fast: 0.6s;
      --lp-anim-skeleton: 2.2s;
      --lp-anim-pulse: 2s;
      
      /* Easing — Master v1.4 §9.7 */
      --lp-ease-out: cubic-bezier(0,0,0.2,1);
      
      /* Wash (rgba white overlays) — v1.36 */
      --lp-wash-subtle: rgba(255,255,255,0.03);
      --lp-wash-hover: rgba(255,255,255,0.04);
      --lp-wash-active: rgba(255,255,255,0.06);
      --lp-wash-strong: rgba(255,255,255,0.08);
      
      /* Mode Indicator Colors — v1.37 */
      --lp-mode-prompt: #4ADE80;
      --lp-mode-custom-ai: #60A5FA;
      
      /* Placeholder Surface — v1.36 */
      
      /* Unified Icon Opacity — v1.36 */
      --lp-icon-opacity: 0.85;
      
      /* State Opacity — v1.42 */
      --lp-opacity-disabled: 0.45;
      --lp-opacity-muted: 0.6;
      --lp-opacity-subtle: 0.5;
      --lp-opacity-locked: 0.4;
      --lp-opacity-loading: 0.7;
      
      /* Layout Dimensions — v1.37 */
      --lp-topbar-height: 56px;
      --lp-sidebar-width: 240px;
      --lp-sidebar-collapsed: 64px;
      --lp-content-max: 1040px;
      --lp-input-bar-max: 880px;
      --lp-bubble-max: 720px;
      --lp-bubble-user-max: 560px;
      --lp-modal-width: 560px;
      --lp-modal-lg: 680px;
      --lp-modal-min: 320px;
      
      /* Focus Ring Token — v1.36 */
      --lp-focus-ring: inset 0 0 0 1px var(--lp-accent-base);
      
      /* Z-Index Scale — v1.41 */
      --lp-z-dropdown: 10;
      --lp-z-sticky: 20;
      --lp-z-modal: 50;
      --lp-z-popover: 60;
      --lp-z-spotlight: 100;
      --lp-z-top: 200;
      
      /* Overlay Tokens — v1.41 */
      --lp-overlay-dark: rgba(0,0,0,0.55);
      --lp-overlay-darker: rgba(0,0,0,0.75);
      --lp-overlay-accent: color-mix(in srgb, var(--lp-accent-base) 15%, transparent);
      --lp-overlay-accent-strong: color-mix(in srgb, var(--lp-accent-base) 35%, transparent);
      --lp-overlay-accent-subtle: color-mix(in srgb, var(--lp-accent-base) 10%, transparent);
      --lp-overlay-error: rgba(255,106,106,0.1);
      --lp-overlay-muted: rgba(141,142,144,0.15);
      --lp-overlay-light-border: rgba(255,255,255,0.3);
      --lp-overlay-glass: rgba(30,31,32,0.8);
    }
    
    /* ========================================
       LIGHT THEME — v1.41
       ======================================== */
    
    [data-theme="light"] {
      /* Backgrounds */
      --lp-bg-base: #FFFFFF;
      --lp-bg-surface: #F5F5F5;
      --lp-bg-elevated: #EBEBEB;
      --lp-bg-input: #FFFFFF;
      
      /* Text */
      --lp-text-primary: #1A1A1A;
      --lp-text-secondary: #4A4A4A;
      --lp-text-tertiary: #6F6F6F; /* 2026-09-05: #757575 was 4.23:1 on the surface; same value the app moved to on 2026-09-04 */
      --lp-text-on-accent: #1E1F20;
      
      /* Strokes */
      --lp-stroke-default: #D4D4D4;
      --lp-stroke-light: #E5E5E5;
      --lp-stroke-strong: #BEBEBE;
      
      /* Accent (pink stays same for brand) */
      --lp-accent-base: #E84A9C;
      --lp-accent-hover: #EC5AA6; /* 2026-09-06: light hover goes LIGHTER now that the label is #1E1F20 (5.17:1); #D43D8A was 3.8:1 with it */
      --lp-accent-active: #C03078;
      
      /* Status */
      --lp-success: #059669;
      --lp-warning: #D97706;
      --lp-error: #DC2626;
      --lp-error-hover: #B91C1C;
      --lp-error-active: #991B1B;

      /* TEXT-ONLY variants, light theme. Measured 2026-09-06 with
         build/consumer-channel-gate.py on both panel demos: as TEXT the four
         above land at 3.27 (accent), 3.46 (success), 2.92 (warning) and 4.43
         (error) against the light surface, all under the 4.5 that body-sized
         text needs. Same hue, darker step, and every value is one the system
         already carries: #D6006F is the accent of the high-contrast block below,
         #B91C1C is --lp-error-hover right above. Fills and borders keep the
         lighter originals, so nothing that is a background moves. */
      --lp-accent-text: #D6006F;
      --lp-success-text: #047857;
      --lp-warning-text: #B45309;
      --lp-error-text: #B91C1C;

      /* Tags — aligned with dark theme names */
      --lp-tag-rose: #DB2777;
      --lp-tag-amber: #B45309;
      --lp-tag-lime: #059669;
      --lp-tag-cyan: #0284C7;
      --lp-tag-violet: #7C3AED;
      --lp-tag-slate: #6B7280;
      
      /* Wash (dark overlays on light bg) */
      --lp-wash-subtle: rgba(0,0,0,0.02);
      --lp-wash-hover: rgba(0,0,0,0.04);
      --lp-wash-active: rgba(0,0,0,0.06);
      --lp-wash-strong: rgba(0,0,0,0.08);
      
      /* Overlays */
      --lp-overlay-dark: rgba(0,0,0,0.4);
      --lp-overlay-darker: rgba(0,0,0,0.6);
      --lp-overlay-accent: color-mix(in srgb, var(--lp-accent-base) 10%, transparent);
      --lp-overlay-accent-strong: color-mix(in srgb, var(--lp-accent-base) 25%, transparent);
      --lp-overlay-accent-subtle: color-mix(in srgb, var(--lp-accent-base) 8%, transparent);
      --lp-overlay-error: rgba(220,38,38,0.1);
      --lp-overlay-muted: rgba(0,0,0,0.08);
      --lp-overlay-light-border: rgba(0,0,0,0.15);
      --lp-overlay-glass: rgba(255,255,255,0.85);
      
      /* Shadows (more visible on light) */
      --lp-shadow-s: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
      --lp-shadow-m: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
      --lp-shadow-l: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
      
      /* Focus ring */
      --lp-focus-ring: 0 0 0 2px var(--lp-bg-base), 0 0 0 4px var(--lp-accent-base);
    }
    
    /* ========================================
       ACCESSIBILITY & USER PREFERENCES
       ======================================== */
    
    /* Auto light theme when system prefers light (and no manual override) */
    /* Must mirror [data-theme="light"] exactly */
    @media (prefers-color-scheme: light) {
      :root:not([data-theme]) {
        /* Backgrounds */
        --lp-bg-base: #FFFFFF;
        --lp-bg-surface: #F5F5F5;
        --lp-bg-elevated: #EBEBEB;
        --lp-bg-input: #FFFFFF;
        /* Text */
        --lp-text-primary: #1A1A1A;
        --lp-text-secondary: #4A4A4A;
        --lp-text-tertiary: #6F6F6F; /* twin of the [data-theme="light"] value above */
        --lp-text-on-accent: #1E1F20;
        /* Strokes */
        --lp-stroke-default: #D4D4D4;
        --lp-stroke-light: #E5E5E5;
        --lp-stroke-strong: #BEBEBE;
        /* Accent */
        --lp-accent-base: #E84A9C;
        --lp-accent-hover: #EC5AA6;
        --lp-accent-active: #C03078;
        /* Status */
        --lp-success: #059669;
        --lp-warning: #D97706;
        --lp-error: #DC2626;
        --lp-error-hover: #B91C1C;
        --lp-error-active: #991B1B;
        /* Text-only variants, same reasoning as the light block above */
        --lp-accent-text: #D6006F;
        --lp-success-text: #047857;
        --lp-warning-text: #B45309;
        --lp-error-text: #B91C1C;
        /* Tags */
        --lp-tag-rose: #DB2777;
        --lp-tag-amber: #B45309;
        --lp-tag-lime: #059669;
        --lp-tag-cyan: #0284C7;
        --lp-tag-violet: #7C3AED;
        --lp-tag-slate: #6B7280;
        /* Wash */
        --lp-wash-subtle: rgba(0,0,0,0.02);
        --lp-wash-hover: rgba(0,0,0,0.04);
        --lp-wash-active: rgba(0,0,0,0.06);
        --lp-wash-strong: rgba(0,0,0,0.08);
        /* Overlays */
        --lp-overlay-dark: rgba(0,0,0,0.4);
        --lp-overlay-darker: rgba(0,0,0,0.6);
        --lp-overlay-accent: color-mix(in srgb, var(--lp-accent-base) 10%, transparent);
        --lp-overlay-accent-strong: color-mix(in srgb, var(--lp-accent-base) 25%, transparent);
        --lp-overlay-accent-subtle: color-mix(in srgb, var(--lp-accent-base) 8%, transparent);
        --lp-overlay-error: rgba(220,38,38,0.1);
        --lp-overlay-muted: rgba(0,0,0,0.08);
        --lp-overlay-light-border: rgba(0,0,0,0.15);
        --lp-overlay-glass: rgba(255,255,255,0.85);
        /* Shadows */
        --lp-shadow-s: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
        --lp-shadow-m: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
        --lp-shadow-l: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
        /* Focus ring */
        --lp-focus-ring: 0 0 0 2px var(--lp-bg-base), 0 0 0 4px var(--lp-accent-base);
      }
    }
    
    /* Reduced motion: disable all animations */
    @media (prefers-reduced-motion: reduce) {
      :root {
        --lp-motion-instant: 0ms;
        --lp-motion-fast: 0ms;
        --lp-motion-mid: 0ms;
        --lp-motion-slow: 0ms;
        --lp-anim-spin: 0.01ms;
        --lp-anim-spin-fast: 0.01ms;
        --lp-anim-skeleton: 0.01ms;
        --lp-anim-pulse: 0.01ms;
      }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    
    /* High contrast mode (OS setting). Scoped per theme since 2026-09-05: the black-text block
       used to sit on a bare :root, so a dark-theme user with "increase contrast" on got
       #000000 on #1E1F20, 1.27:1, the worst pairing in the product. The light set below is the
       old block unchanged; the dark set mirrors body.high-contrast--dark further down. */
    @media (prefers-contrast: more) {
      [data-theme="light"] {
        --lp-text-primary: #000000;
        --lp-text-secondary: #1A1A1A;
        --lp-text-tertiary: #333333;
        --lp-stroke-default: #000000;
        --lp-stroke-light: #333333;
        --lp-stroke-strong: #000000;
        --lp-accent-base: #D6006F;
        --lp-focus-ring: inset 0 0 0 3px #000000;
        --lp-bg-base: #FFFFFF;
        --lp-bg-surface: #F0F0F0;
      }
      [data-theme="dark"] {
        --lp-text-primary: #FFFFFF;
        --lp-text-secondary: #E0E0E0;
        --lp-text-tertiary: #C0C0C0;
        --lp-stroke-default: #666666;
        --lp-stroke-light: #555555;
        --lp-stroke-strong: #8A8A8A;
        --lp-focus-ring: inset 0 0 0 3px #FFFFFF;
      }
    }
    
    @media (prefers-contrast: more) and (prefers-color-scheme: light) {
      :root:not([data-theme]) {
        --lp-text-primary: #000000;
        --lp-text-secondary: #1A1A1A;
        --lp-text-tertiary: #333333;
        --lp-stroke-default: #000000;
        --lp-stroke-light: #333333;
        --lp-stroke-strong: #000000;
        --lp-accent-base: #D6006F;
        --lp-focus-ring: inset 0 0 0 3px #000000;
        --lp-bg-base: #FFFFFF;
        --lp-bg-surface: #F0F0F0;
      }
    }
    
    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
      :root:not([data-theme]) {
        --lp-text-primary: #FFFFFF;
        --lp-text-secondary: #E0E0E0;
        --lp-text-tertiary: #C0C0C0;
        --lp-stroke-default: #666666;
        --lp-stroke-light: #555555;
        --lp-stroke-strong: #8A8A8A;
        --lp-focus-ring: inset 0 0 0 3px #FFFFFF;
      }
    }
    
    /* User preference: Reduced motion (via Settings) */
    body.reduced-motion {
      --lp-motion-instant: 0ms;
      --lp-motion-fast: 0ms;
      --lp-motion-mid: 0ms;
      --lp-motion-slow: 0ms;
    }
    
    body.reduced-motion *, 
    body.reduced-motion *::before, 
    body.reduced-motion *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    
    /* User preference: High contrast (via Settings) */
    /* Dark theme high contrast */
    body.high-contrast {
      --lp-stroke-default: #666666;
      --lp-stroke-light: #555555;
      --lp-border-thin: 2px;
    }
    
    body.high-contrast.high-contrast--dark {
      --lp-text-primary: #FFFFFF;
      --lp-text-secondary: #E0E0E0;
      --lp-text-tertiary: #C0C0C0;
    }
    
    body.high-contrast.high-contrast--light {
      --lp-text-primary: #000000;
      --lp-text-secondary: #1A1A1A;
      --lp-text-tertiary: #333333;
      --lp-stroke-default: #000000;
      --lp-stroke-light: #333333;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    /* ========================================
       UTILITY CLASSES — v1.41 (pruned: dead classes removed)
       ======================================== */
    
    /* Layout */
    .flex-1 { flex: 1; }
    
    /* Visibility */
    .hidden { display: none; }
    
    /* Screen reader only — visually hidden but accessible */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    html, body {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
    }
    
    @supports not (height: 100dvh) {
      html, body {
        height: -webkit-fill-available;
      }
    }
    
    body {
      font-family: var(--lp-font-sans);
      background: var(--lp-bg-base);
      color: var(--lp-text-primary);
      -webkit-font-smoothing: antialiased;
      /* Safe area insets for iPhone notch/home indicator */
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    
    ::selection {
      background: var(--lp-overlay-accent-strong);
      color: var(--lp-text-primary);
    }

    /* ========================================
       UTILITY CLASSES (R1 — replace top-duplicated inline style patterns)
       Note: .flex-1 + .hidden already exist in pre-existing utility block above,
             .stack-N is a semantic alias for .mt-N (same effect, more descriptive name)
       ======================================== */

    .row-between { display: flex; justify-content: space-between; align-items: center; }
    .row-gap-8 { display: flex; align-items: center; gap: var(--lp-space-8); }
    .row-gap-8-top { display: flex; gap: var(--lp-space-8); margin-top: var(--lp-space-8); }
    .stack-4 { margin-top: var(--lp-space-4); }
    .stack-8 { margin-top: var(--lp-space-8); }
    .stack-12 { margin-top: var(--lp-space-12); }
    .stack-16 { margin-top: var(--lp-space-16); }
    .stack-24 { margin-top: var(--lp-space-24); }
    .color-tertiary { color: var(--lp-text-tertiary); }
    .text-helper { font-size: var(--lp-text-xs); color: var(--lp-text-tertiary); }

    /* ========================================
       LAYOUT: APP SHELL
       ======================================== */
    
    .app {
      display: flex;
      height: 100vh;
      height: 100dvh; /* Dynamic viewport for mobile */
      overflow: hidden;
      background: var(--lp-bg-base);
    }
    
    /* iOS Safari fallback for dvh */
    @supports not (height: 100dvh) {
      .app {
        height: -webkit-fill-available;
      }
    }

    /* ========================================
       SIDEBAR
       ======================================== */
    
    .sidebar {
      position: sticky;
      top: 0;
      align-self: flex-start;
      height: 100vh;
      height: 100dvh;
      width: var(--lp-sidebar-width);
      background: var(--lp-bg-surface);
      padding: var(--lp-space-20) var(--lp-space-16);
      /* Safe area for notch in landscape */
      padding-left: max(var(--lp-space-16), env(safe-area-inset-left, 0px));
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-24);
      flex-shrink: 0;
      transition: width var(--lp-motion-mid) var(--lp-ease-out),
                  padding var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .sidebar__header {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .sidebar__header-left {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      overflow: hidden;
      transition: gap var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .sidebar__toggle {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--lp-size-5);
      height: var(--lp-size-5);
      border-radius: var(--lp-radius-xs);
      border: none;
      background: transparent;
      color: var(--lp-text-tertiary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      z-index: var(--lp-z-dropdown);
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .sidebar:hover .sidebar__toggle,
    .sidebar:focus-within .sidebar__toggle {
      opacity: 1;
      transition: opacity var(--lp-motion-instant); /* instant on */
    }
    
    .sidebar__toggle:hover {
      background: var(--lp-wash-strong);
      color: var(--lp-text-secondary);
      transition: opacity var(--lp-motion-instant), background var(--lp-motion-instant), color var(--lp-motion-instant);
    }
    
    .sidebar--collapsed .sidebar__toggle .icon-expand {
      display: block;
    }
    
    .sidebar--collapsed .sidebar__toggle .icon-collapse {
      display: none;
    }
    
    .sidebar__toggle .icon-expand {
      display: none;
    }
    
    .sidebar__toggle .icon-collapse {
      display: block;
    }
    
    .logo-mark {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .logo-mark svg {
      width: 100%;
      height: 100%;
    }
    
    .logo-text {
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-secondary);
      white-space: nowrap;
      overflow: hidden;
      transition: width var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .sidebar__section {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    .sidebar__section--footer {
      margin-top: auto;
    }
    
    .sidebar__section-title {
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-semibold);
      text-transform: uppercase;
      letter-spacing: var(--lp-tracking-wider);
      color: var(--lp-text-secondary);
      padding: var(--lp-space-4) var(--lp-space-8);
      white-space: nowrap;
      overflow: hidden;
      transition: height var(--lp-motion-mid) var(--lp-ease-out),
                  padding var(--lp-motion-mid) var(--lp-ease-out),
                  margin var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .nav-group {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    .nav-item {
      position: relative;
      height: 36px;
      padding: 0 var(--lp-space-12) 0 var(--lp-space-16);
      border-radius: var(--lp-radius-s);
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      user-select: none;
      overflow: hidden;
      transition: background var(--lp-motion-mid) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out),
                  gap var(--lp-motion-mid) var(--lp-ease-out),
                  padding var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .nav-item__content {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      gap: var(--lp-space-8);
      white-space: nowrap;
      overflow: hidden;
      /* Text appears/disappears instantly - width handles smooth transition */
      transition: width var(--lp-motion-mid) var(--lp-ease-out),
                  flex var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .nav-item__icon {
      width: var(--lp-icon-base);
      height: var(--lp-icon-base);
      flex-shrink: 0;
      opacity: var(--lp-icon-opacity);
    }
    
    /* SVG Icons */
    .icon {
      width: var(--lp-icon-base);
      height: var(--lp-icon-base);
      fill: none;
      stroke: currentColor;
      stroke-width: var(--lp-icon-stroke);
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    
    .icon--sm { width: var(--lp-icon-sm); height: var(--lp-icon-sm); }
    .icon--lg { width: var(--lp-size-5); height: var(--lp-size-5); }
    
    .nav-item:hover {
      background: var(--lp-wash-subtle);
      color: var(--lp-text-primary);
      transition: background var(--lp-motion-instant), color var(--lp-motion-instant);
    }
    
    .nav-item:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }
    
    .nav-item--active {
      background: var(--lp-wash-hover);
      color: var(--lp-text-primary);
    }
    
    .nav-item--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: var(--lp-space-8);
      bottom: var(--lp-space-8);
      width: 2px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
    }
    
    /* Locked nav items (Free user) */
    .nav-item--locked {
      opacity: var(--lp-opacity-locked);
      cursor: not-allowed;
    }
    .nav-item--locked:hover {
      background: transparent;
    }
    
    .badge-pro {
      margin-left: auto;
      padding: 0 var(--lp-space-8);
      height: var(--lp-size-4);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      font-size: var(--lp-text-2xs);
      font-weight: var(--lp-font-medium);
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: var(--lp-tracking-wide);
      color: var(--lp-text-secondary);
      white-space: nowrap;
      overflow: hidden;
    }
    
    /* Collapsed sidebar */
    .sidebar--collapsed {
      width: 72px;
      padding-inline: 0;
    }
    
    .sidebar--collapsed .sidebar__header {
      padding: 0;
      justify-content: center;
    }
    
    .sidebar--collapsed .sidebar__header-left {
      justify-content: center;
      gap: 0;
    }
    
    .sidebar--collapsed .logo-text {
      width: 0;
      overflow: hidden;
      pointer-events: none;
    }
    
    .sidebar--collapsed .sidebar__section-title {
      height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      pointer-events: none;
    }
    
    .sidebar--collapsed .nav-item__content {
      width: 0;
      flex: 0;
      overflow: hidden;
      pointer-events: none;
    }
    
    .sidebar--collapsed .nav-item {
      justify-content: center;
      padding: 0 var(--lp-space-12);
      gap: 0;
    }
    
    /* Mobile sidebar */
    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: var(--lp-overlay-dark);
      z-index: var(--lp-z-sticky);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .sidebar-overlay--visible {
      opacity: 1;
      pointer-events: auto;
    }
    
    /* Mobile popover overlay (for bottom sheet popovers) */
    .popover-overlay {
      position: fixed;
      inset: 0;
      background: var(--lp-overlay-dark);
      z-index: calc(var(--lp-z-popover) - 1);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .popover-overlay--visible {
      opacity: 1;
      pointer-events: auto;
    }

    /* ========================================
       MAIN SHELL + TOPBAR
       ======================================== */
    
    .main-shell {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
      background: var(--lp-bg-base);
    }

    /* v2.7 (T5): dismissable notice for ?from=restricted-page redirects */
    .restricted-banner {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      margin: var(--lp-space-12) var(--lp-space-16) 0;
      padding: var(--lp-space-8) var(--lp-space-16);
      background: var(--lp-bg-elevated);
      border: 1px solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-s);
      color: var(--lp-text-secondary);
      font-size: var(--lp-text-sm);
    }
    .restricted-banner__close {
      flex-shrink: 0;
      border: none;
      background: none;
      color: var(--lp-text-tertiary);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      padding: 0 var(--lp-space-4);
    }
    .restricted-banner__close:hover { color: var(--lp-text-primary); }

    .topbar {
      z-index: var(--lp-z-dropdown);
      height: var(--lp-topbar-height);
      padding: 0 var(--lp-space-20);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-16);
      background: var(--lp-bg-base);
      flex-shrink: 0;
    }
    
    .topbar__left,
    .topbar__right {
      display: flex;
      align-items: center;
      gap: var(--lp-space-12);
    }
    
    .topbar__right {
      margin-left: auto;
    }
    
    .topbar__left {
      display: none;
      gap: var(--lp-space-8);
      margin-right: auto;
    }
    
    /* Mobile toggle hidden by default */
    .topbar__toggle-mobile {
      display: none;
    }
    
    .icon-btn {
      position: relative;
      width: var(--lp-size-8);
      height: var(--lp-height-sm);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid transparent;
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--lp-text-tertiary);
      transition: border-color var(--lp-motion-mid) var(--lp-ease-out),
                  background var(--lp-motion-mid) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .icon-btn .icon {
      width: var(--lp-icon-sm);
      height: var(--lp-icon-sm);
    }
    
    .icon-btn:hover {
      border-color: var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      color: var(--lp-text-primary);
      transition: border-color var(--lp-motion-instant), background var(--lp-motion-instant), color var(--lp-motion-instant);
    }
    
    .search-trigger {
      width: 220px;
      height: 36px;
      border-radius: var(--lp-radius-s);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      padding: 0 var(--lp-space-12);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      transition: border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .search-trigger:hover {
      border-color: var(--lp-stroke-light);
      transition: border-color var(--lp-motion-instant);
    }
    
    .search-trigger .icon {
      flex-shrink: 0;
      opacity: var(--lp-icon-opacity);
    }
    
    .search-trigger__kbd {
      margin-left: auto;
      padding: var(--lp-space-4) var(--lp-space-8);
      border-radius: var(--lp-radius-s);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-secondary);
    }

    /* ========================================
       PAGE CONTENT
       ======================================== */
    
    .page {
      flex: 1;
      display: none;
      min-height: 0;
    }
    
    .page--active {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      /* Prevent layout shift when scrollbar appears/disappears */
      scrollbar-gutter: stable;
    }
    
    /* Safari fallback for scrollbar-gutter */
    @supports not (scrollbar-gutter: stable) {
      .page--active {
        overflow-y: scroll;
      }
    }
    
    /* Session page: input bar fixed at bottom, content scrolls */
    .page[data-page="session"].page--active {
      overflow: hidden;
    }
    
    .page[data-page="session"] .page-inner {
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }
    
    .page-inner {
      min-height: calc(100vh - var(--lp-topbar-height, 56px));
      min-height: calc(100dvh - var(--lp-topbar-height, 56px));
      width: 100%;
      max-width: var(--lp-content-max, 1040px);
      margin: 0 auto;
      padding: var(--lp-space-24);
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-20);
    }
    
    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--lp-space-12);
      flex-wrap: wrap;
    }
    
    .content-header__title {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    .content-title {
      font-size: var(--lp-text-xl);
      font-weight: var(--lp-font-semibold);
    }
    
    .content-sub {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
    }

    /* ========================================
       BUTTONS
       ======================================== */
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--lp-space-8);
      padding: 0 var(--lp-space-16);
      min-width: var(--lp-sidebar-collapsed);
      height: var(--lp-height-sm);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid transparent;
      cursor: pointer;
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-medium);
      background: transparent;
      color: var(--lp-text-secondary);
      transition: background var(--lp-motion-mid) var(--lp-ease-out),
                  border-color var(--lp-motion-mid) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .btn:hover {
      transition-duration: var(--lp-motion-instant);
    }
    
    .btn--primary {
      background: var(--lp-accent-base);
      border-color: var(--lp-accent-base);
      color: var(--lp-text-on-accent);
    }
    
    .btn--primary:hover {
      background: var(--lp-accent-hover);
      border-color: var(--lp-accent-hover);
    }
    
    .btn--primary:active {
      background: var(--lp-accent-active);
      border-color: var(--lp-accent-active);
      transform: scale(0.97);
    }
    
    .btn--outline {
      background: transparent;
      border-color: var(--lp-stroke-default);
      color: var(--lp-text-secondary);
    }
    
    .btn--outline:hover {
      border-color: var(--lp-stroke-light);
      color: var(--lp-text-primary);
    }
    
    .btn--sm {
      height: var(--lp-height-xs);
      padding-inline: var(--lp-space-12);
      font-size: var(--lp-text-xs);
      min-width: auto;
    }
    
    .btn--tertiary {
      background: none;
      border-color: transparent;
      color: var(--lp-text-secondary);
      padding-inline: 0;
      min-width: auto;
      height: auto;
    }
    
    .btn--tertiary:hover {
      color: var(--lp-text-primary);
    }
    
    /* Danger variant for destructive actions */
    .btn--primary.btn--danger {
      background: var(--lp-error);
      border-color: var(--lp-error);
    }
    
    .btn--primary.btn--danger:hover {
      background: var(--lp-error-hover);
      border-color: var(--lp-error-hover);
    }
    
    .btn--primary.btn--danger:active {
      background: var(--lp-error-active);
      border-color: var(--lp-error-active);
    }
    
    .btn:disabled {
      opacity: var(--lp-opacity-disabled);
      cursor: default;
    }
    
    .btn:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }
    
    .icon-btn:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }

    /* ========================================
       INPUTS
       ======================================== */
    
    .input {
      font-family: inherit;
      font-size: var(--lp-text-base);
      font-size: max(16px, var(--lp-text-base)); /* Prevent iOS zoom */
      color: var(--lp-text-primary);
      background: var(--lp-bg-input);
      border-radius: var(--lp-radius-s);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      height: var(--lp-height-lg);
      padding: 0 var(--lp-space-12);
      width: 100%;
    }
    
    .input::placeholder {
      color: var(--lp-text-tertiary);
    }
    
    .input:focus {
      outline: none;
      border-color: transparent;
      box-shadow: var(--lp-focus-ring);
    }
    
    .textarea {
      width: 100%;
      font-family: inherit;
      font-size: var(--lp-text-base);
      font-size: max(16px, var(--lp-text-base)); /* Prevent iOS zoom */
      color: var(--lp-text-primary);
      background: var(--lp-bg-input);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      padding: var(--lp-space-12) var(--lp-space-16);
      min-height: 220px;
      resize: vertical;
    }
    
    .textarea::placeholder {
      color: var(--lp-text-tertiary);
    }
    
    .textarea:focus {
      outline: none;
      border-color: transparent;
      box-shadow: var(--lp-focus-ring);
    }
    
    textarea.input {
      height: auto;
      padding: var(--lp-space-12);
      resize: vertical;
    }
    
    /* Password input wrapper with eye toggle */
    .input--password {
      position: relative;
    }
    .input--password > .input {
      padding-right: 40px;
    }
    /* Hide browser-native password reveal button (Edge ::-ms-reveal, some Chromium variants) */
    .input--password > .input[type="password"]::-ms-reveal,
    .input--password > .input[type="password"]::-ms-clear,
    .input--password > .input[type="password"]::-webkit-contacts-auto-fill-button,
    .input--password > .input[type="password"]::-webkit-credentials-auto-fill-button,
    .input--password > .input[type="text"]::-ms-reveal,
    .input--password > .input[type="text"]::-ms-clear {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      position: absolute !important;
      right: 0 !important;
    }
    .password-toggle-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      border-radius: var(--lp-radius-s);
      color: var(--lp-text-tertiary);
      cursor: pointer;
      padding: 0;
    }
    .password-toggle-btn:hover {
      color: var(--lp-text-secondary);
      background: var(--lp-bg-elevated);
    }
    .password-toggle-btn:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }
    .password-toggle-btn svg {
      width: var(--lp-icon-base);
      height: var(--lp-icon-base);
    }
    .password-toggle-btn .icon-eye-off {
      display: none;
    }
    .password-toggle-btn[data-shown="true"] .icon-eye {
      display: none;
    }
    .password-toggle-btn[data-shown="true"] .icon-eye-off {
      display: inline-block;
    }
    
    /* Style Controls */
    .style-color-btn {
      width: var(--lp-size-8);
      height: var(--lp-size-8);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thick) solid transparent;
      cursor: pointer;
      transition: transform var(--lp-motion-fast) var(--lp-ease-out),
                  border-color var(--lp-motion-fast) var(--lp-ease-out);
    }
    .style-color-btn:hover {
      transform: scale(1.1);
    }
    .style-color-btn--active {
      border-color: var(--lp-text-primary);
    }
    
    .style-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: var(--lp-size-2);
      background: var(--lp-bg-elevated);
      border-radius: var(--lp-radius-full);
      cursor: pointer;
    }
    .style-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--lp-size-5);
      height: var(--lp-size-5);
      background: var(--lp-accent-base);
      border-radius: var(--lp-radius-full);
      cursor: pointer;
      transition: transform var(--lp-motion-fast) var(--lp-ease-out);
    }
    .style-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
    .style-slider::-moz-range-thumb {
      width: var(--lp-size-5);
      height: var(--lp-size-5);
      background: var(--lp-accent-base);
      border-radius: var(--lp-radius-full);
      border: none;
      cursor: pointer;
    }
    .style-slider:focus {
      outline: none;
    }
    .style-slider:focus-visible::-webkit-slider-thumb {
      box-shadow: var(--lp-focus-ring);
    }

    /* ========================================
       FILTERS
       ======================================== */
    
    .filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      flex-wrap: wrap;
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
    }
    
    .filter-tabs {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: var(--lp-space-4);
      /* Allow overflow to work in flex container */
      min-width: 0;
      flex: 1;
      /* Smooth scroll on touch */
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      /* Firefox scrollbar */
      scrollbar-width: thin;
      scrollbar-color: var(--lp-stroke-light) transparent;
    }
    
    /* Thin scrollbar for overflow */
    .filter-tabs::-webkit-scrollbar {
      height: 4px;
    }
    .filter-tabs::-webkit-scrollbar-track {
      background: transparent;
    }
    .filter-tabs::-webkit-scrollbar-thumb {
      background: var(--lp-stroke-light);
      border-radius: var(--lp-radius-full);
    }
    .filter-tabs::-webkit-scrollbar-thumb:hover {
      background: var(--lp-stroke-strong);
    }
    
    @media (max-width: 768px) {
      .filter-tabs::-webkit-scrollbar {
        height: 2px;
      }
      .filter-tabs::-webkit-scrollbar-track {
        background: transparent;
      }
      .filter-tabs::-webkit-scrollbar-thumb {
        background: var(--lp-stroke-light);
        border-radius: var(--lp-radius-full);
      }
    }
    
    .filter-chip {
      border: none;
      background: transparent;
      padding: var(--lp-space-8) 0;
      margin-right: var(--lp-space-12);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: color var(--lp-motion-mid) var(--lp-ease-out),
                  border-color var(--lp-motion-mid) var(--lp-ease-out),
                  opacity var(--lp-motion-fast) var(--lp-ease-out),
                  transform var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .filter-chip:hover {
      color: var(--lp-text-primary);
      transition: color var(--lp-motion-instant);
    }
    
    .filter-chip--active {
      color: var(--lp-text-primary);
      border-color: var(--lp-accent-base);
    }
    
    .filter-chip:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
      border-radius: var(--lp-radius-xs);
    }
    
    /* Filter chip drag & drop */
    .filter-chip--dragging {
      opacity: var(--lp-opacity-subtle);
      transform: scale(0.95);
    }
    
    .filter-chip--drop-target {
      border-color: var(--lp-accent-base);
    }
    
    /* Fixed tabs (All, Pinned) - not draggable */
    .filter-chip--fixed {
      cursor: pointer;
    }
    
    .filter-chip[draggable="true"] {
      cursor: grab;
    }
    
    .filter-chip[draggable="true"]:active {
      cursor: grabbing;
    }
    

    /* ========================================
       COLLECTIONS GRID + CARDS
       ======================================== */
    
    .collections-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: var(--lp-space-20);
    }
    
    .card {
      background: var(--lp-bg-surface);
      border-radius: var(--lp-radius-m);
      padding: var(--lp-space-16);
      border: var(--lp-border-thin) solid transparent;
      box-shadow: var(--lp-shadow-s);
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      min-height: 120px;
      max-width: 320px;
      cursor: pointer;
      transition: box-shadow var(--lp-motion-mid) var(--lp-ease-out),
                  border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .card:hover {
      border-color: var(--lp-stroke-light);
      box-shadow: var(--lp-shadow-m);
      transition: box-shadow var(--lp-motion-instant), border-color var(--lp-motion-instant);
    }
    
    .card:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring), var(--lp-shadow-m);
    }
    
    /* Row 1: title + pin + hover actions. Title-first per GS9 progressive disclosure. */
    .card__top {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      min-width: 0;
    }

    .card__title {
      font-size: var(--lp-text-lg);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      line-height: var(--lp-leading-tight);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card__pin,
    .spotlight-item__pin-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
      flex-shrink: 0;
    }

    .card__actions {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: var(--lp-space-2);
      opacity: 0;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }

    .card:hover .card__actions,
    .card:focus-within .card__actions {
      opacity: 1;
      transition: opacity var(--lp-motion-instant);
    }

    /* Icon-btn shared base — card actions + spotlight QA (R4 dedup) */
    .card__action-btn,
    .spotlight-qa-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      padding: 0;
      color: var(--lp-text-tertiary);
      cursor: pointer;
      border-radius: var(--lp-radius-s);
      transition: color var(--lp-motion-fast) var(--lp-ease-out),
                  background var(--lp-motion-fast) var(--lp-ease-out);
    }

    .card__action-btn:hover,
    .spotlight-qa-btn:hover {
      color: var(--lp-text-primary);
      background: var(--lp-wash-hover);
    }

    .card__action-btn:focus-visible,
    .spotlight-qa-btn:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }

    /* Row 2: preview (hero content), sm text — shared by card + spotlight (R2 dedup) */
    .card__preview,
    .spotlight-item__preview {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
      line-height: var(--lp-leading-snug);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Row 3: subordinate meta (collection › tag · time) — shared by card + spotlight (R2 dedup) */
    .card__meta,
    .spotlight-item__meta {
      display: flex;
      align-items: center;
      gap: var(--lp-space-4);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
      line-height: var(--lp-leading-none);
    }
    /* Card-only: push meta to bottom of the flex-column card */
    .card__meta {
      margin-top: auto;
    }

    /* Collection link — shared by card + spotlight (R2 dedup) */
    .card__collection,
    .spotlight-item__collection {
      cursor: pointer;
      transition: color var(--lp-motion-fast) var(--lp-ease-out);
    }
    .card__collection:hover,
    .spotlight-item__collection:hover {
      color: var(--lp-text-secondary);
      text-decoration: underline;
    }
    /* Card-only: clamp width since card is narrow */
    .card__collection {
      white-space: nowrap;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Meta separator tokens (chevron + dot) — shared by card + spotlight (R2 dedup) */
    .card__meta-sep,
    .card__meta-dot,
    .spotlight-item__sep {
      color: var(--lp-text-tertiary);
      flex-shrink: 0;
    }

    /* Time separator (dot between tag and time). Separate class so the
       show-collection toggle below does not hide the tag-time dot. */
    /* .card__meta-dot styled in compound rule above */

    .card__last-used {
      color: var(--lp-text-tertiary);
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* Tag base — font-weight shared by card + spotlight (R2 dedup) */
    .card__tag,
    .spotlight-item__tag {
      font-weight: var(--lp-font-medium);
    }
    /* Card-only: clamp tag width + shrink behavior (card is narrow) */
    .card__tag {
      flex-shrink: 0;
      white-space: nowrap;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Tag colors — shared between card + spotlight row (R2 dedup) */
    .card__tag--rose,   .spotlight-item__tag--rose   { color: var(--lp-tag-rose); }
    .card__tag--amber,  .spotlight-item__tag--amber  { color: var(--lp-tag-amber); }
    .card__tag--lime,   .spotlight-item__tag--lime   { color: var(--lp-tag-lime); }
    .card__tag--cyan,   .spotlight-item__tag--cyan   { color: var(--lp-tag-cyan); }
    .card__tag--violet, .spotlight-item__tag--violet { color: var(--lp-tag-violet); }
    .card__tag--slate,  .spotlight-item__tag--slate  { color: var(--lp-tag-slate); }

    /* Collection label + its chevron separator: hidden by default,
       shown via grid class when viewing "All" across collections. */
    .card__collection,
    .card__meta-sep { display: none; }
    .collections-grid.show-collection .card__collection,
    .collections-grid.show-collection .card__meta-sep { display: inline; }

    .filter-chip__count {
      margin-left: var(--lp-space-4);
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
      font-weight: var(--lp-font-normal);
      font-variant-numeric: tabular-nums;
    }
    
    .link-button {
      border: none;
      background: none;
      padding: 0;
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-tertiary);
      cursor: pointer;
      transition: color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .link-button:hover {
      color: var(--lp-text-primary);
      transition: color var(--lp-motion-instant);
    }
    
    .link-button:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
      border-radius: var(--lp-radius-xs);
    }
    
    .link-button--accent {
      color: var(--lp-text-secondary);
    }
    
    .link-button--accent:hover {
      color: var(--lp-text-primary);
      transition: color var(--lp-motion-instant);
    }
    
    .link-button--sm {
      font-size: var(--lp-text-xs);
    }
    
    .kebab-btn {
      width: var(--lp-size-5);
      height: var(--lp-size-5);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: transparent;
      cursor: pointer;
      font-size: var(--lp-text-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--lp-text-secondary);
      transition: border-color var(--lp-motion-fast) var(--lp-ease-out),
                  background var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .kebab-btn:hover {
      border-color: var(--lp-stroke-light);
      background: var(--lp-bg-elevated);
      color: var(--lp-text-primary);
      transition: all var(--lp-motion-instant);
    }

    /* ========================================
       POPOVERS — Master v1.4 §6.6, §6.7
       ======================================== */
    
    .popover {
      position: absolute;
      width: 360px;
      max-width: 96vw;
      max-height: 420px;
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      background: var(--lp-bg-surface);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      box-shadow: var(--lp-shadow-m);
      overflow-y: auto;
      transform: translateY(8px);
      opacity: 0;
      pointer-events: none;
      transition: transform var(--lp-motion-fast) var(--lp-ease-out),
                  opacity var(--lp-motion-fast) var(--lp-ease-out);
      z-index: var(--lp-z-popover);
    }
    
    .popover--open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    /* Popover width variants — Spec §9.8 */
    #notifications-popover { 
      width: 360px;
      display: flex;
      flex-direction: column;
    }
    #notifications-popover .popover__header {
      flex-shrink: 0;
    }
    #notifications-list {
      flex: 1;
      min-height: 0;
      max-height: 320px;
      overflow-y: auto;
    }
    #account-popover { width: 280px; max-height: 340px; }
    #kebab-popover { width: 180px; }
    
    .popover__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-8);
      margin-bottom: var(--lp-space-8);
    }
    
    .popover__header .popover__title {
      margin-bottom: 0;
    }
    
    .popover__title {
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-secondary);
      margin-bottom: var(--lp-space-12);
      padding-top: var(--lp-space-4);
    }
    
    .popover__item {
      height: var(--lp-height-sm);
      border-radius: var(--lp-radius-s);
      padding: 0 var(--lp-space-12);
      display: flex;
      align-items: center;
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .popover__item:hover {
      background: var(--lp-wash-hover);
      color: var(--lp-text-primary);
      transition: background var(--lp-motion-instant);
    }
    
    .popover__item--static {
      cursor: default;
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-sm);
      height: var(--lp-height-sm);
    }
    
    .popover__item--static:hover {
      background: transparent;
      color: var(--lp-text-tertiary);
    }
    
    .popover__divider {
      width: 100%;
      height: 1px;
      background: var(--lp-wash-active);
      margin: var(--lp-space-8) 0;
      border-radius: var(--lp-radius-full);
    }
    
    .popover__item--plan {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
    }
    
    .plan-label {
      color: var(--lp-text-secondary);
      font-size: var(--lp-text-sm);
    }
    
    .plan-tier {
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-sm);
    }
    
    .plan-action {
      margin-left: auto;
      color: var(--lp-text-secondary);
      font-size: var(--lp-text-sm);
      cursor: pointer;
    }
    
    .plan-action:hover {
      color: var(--lp-text-primary);
    }
    
    /* Notifications — unread dot */
    .icon-btn--has-unread::after {
      content: "";
      position: absolute;
      top: var(--lp-space-4);
      right: var(--lp-space-4);
      width: var(--lp-size-2);
      height: var(--lp-size-2);
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
    }
    
    /* Notifications list inside popover */
    .notif-item {
      display: flex;
      align-items: flex-start;
      gap: var(--lp-space-8);
      padding: var(--lp-space-8) var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      cursor: pointer;
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .notif-item:hover {
      background: var(--lp-bg-elevated);
      transition: background var(--lp-motion-instant);
    }
    
    .notif-dot {
      margin-top: var(--lp-space-4);
      width: var(--lp-size-2);
      height: var(--lp-size-2);
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
      flex-shrink: 0;
    }
    
    .notif-content {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      min-width: 0;
    }
    
    .notif-title {
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-normal);
      color: var(--lp-text-secondary);
      line-height: var(--lp-leading-tight);
    }
    
    .notif-item.notif--unread .notif-title {
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      opacity: 1;
    }
    
    .notif-meta {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
      line-height: var(--lp-leading-tight);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* Notification modal body */
    #notification-modal .modal__body {
      padding: var(--lp-space-20);
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-8);
      overflow-y: auto;
    }
    
    #notif-modal-item-title {
      margin-bottom: var(--lp-space-4);
    }
    
    #notif-modal-type {
      margin-top: calc(-1 * var(--lp-space-4));
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-sm);
    }

    /* ========================================
       MODAL BASE
       ======================================== */
    
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: var(--lp-overlay-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: var(--lp-z-modal);
      opacity: 0;
      pointer-events: none;
      /* visibility keeps closed modals out of the accessibility tree and
         search-engine view (opacity alone does not); it transitions as a
         discrete step so the opacity fade is preserved both ways */
      visibility: hidden;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out),
        visibility var(--lp-motion-mid) var(--lp-ease-out);
    }

    .modal-backdrop--open {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }
    
    /* Stacked dialogs (appear over other modals) */
    .modal-backdrop--stacked {
      z-index: var(--lp-z-popover);
    }
    
    .modal {
      width: 760px;
      max-width: 96vw;
      max-height: 80vh;
      background: var(--lp-bg-surface);
      border-radius: var(--lp-radius-xl);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      box-shadow: var(--lp-shadow-l);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(20px);
      opacity: 0;
      transition: transform var(--lp-motion-mid) var(--lp-ease-out),
                  opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .modal-backdrop--open .modal {
      transform: translateY(0);
      opacity: 1;
    }
    
    .modal__header,
    .modal__footer {
      padding: var(--lp-space-16) var(--lp-space-20);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-16);
      flex-shrink: 0;
    }
    
    .modal__body {
      padding: var(--lp-space-20);
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-16);
      overflow-y: auto;
      min-height: var(--lp-modal-min);
    }
    
    .modal__title {
      font-size: var(--lp-text-xl);
      font-weight: var(--lp-font-semibold);
    }
    
    .modal__close {
      width: var(--lp-size-8);
      height: var(--lp-height-sm);
      border-radius: var(--lp-radius-full);
      border: none;
      background: var(--lp-bg-elevated);
      color: var(--lp-text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--lp-text-md);
      transition: background var(--lp-motion-mid) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .modal__close:hover {
      background: var(--lp-bg-surface);
      color: var(--lp-text-primary);
      transition: all var(--lp-motion-instant);
    }
    
    /* Small modal variant */
    .modal--sm {
      width: 400px;
      max-width: 90vw;
    }
    
    .modal--sm .modal__body {
      min-height: 0;
    }
    
    /* Confirm dialog */
    .confirm-dialog {
      z-index: var(--lp-z-popover); /* Above other modals */
    }
    
    .confirm-dialog__content {
      padding: var(--lp-space-24);
      text-align: center;
    }
    
    .confirm-dialog__title {
      font-size: var(--lp-text-lg-plus);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      margin-bottom: var(--lp-space-8);
    }
    
    .confirm-dialog__message {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      margin-bottom: var(--lp-space-20);
    }
    
    .confirm-dialog__actions {
      display: flex;
      justify-content: center;
      gap: var(--lp-space-8);
    }

    /* ========================================
       PROMPT EDITOR MODAL
       ======================================== */
    
    .badge-outline {
      padding: var(--lp-space-4) var(--lp-space-8);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-secondary);
    }
    
    .field-group {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-8);
      width: 100%;
    }
    
    .field-group--flex {
      flex: 1;
      min-width: 0;
    }
    
    .field-group--colors {
      flex-shrink: 0;
      width: auto;
    }
    
    .text-label {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
    }
    
    .text-heading {
      font-size: var(--lp-text-lg);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
    }
    
    .text-body {
      font-size: var(--lp-text-base);
      line-height: var(--lp-leading-normal);
      color: var(--lp-text-secondary);
    }
    
    /* Compact metadata row */
    .editor-meta-row {
      display: flex;
      gap: var(--lp-space-16);
      align-items: flex-end;
    }
    
    @media (max-width: 600px) {
      .editor-meta-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--lp-space-12);
      }
      .field-group--colors {
        width: 100%;
      }
    }
    
    /* Dropdown wrapper */
    .dropdown-wrap {
      position: relative;
    }
    
    .dropdown-list {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: var(--lp-space-4);
      max-height: 160px;
      overflow-y: auto;
      background: var(--lp-bg-elevated);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-s);
      box-shadow: var(--lp-shadow-m);
      z-index: var(--lp-z-dropdown);
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: transform var(--lp-motion-fast) var(--lp-ease-out),
                  opacity var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .dropdown-list--open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    .dropdown-item {
      padding: var(--lp-space-8) var(--lp-space-12);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      transition: background var(--lp-motion-fast) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .dropdown-item:hover,
    .dropdown-item--active {
      background: var(--lp-bg-surface);
      color: var(--lp-text-primary);
    }
    
    .dropdown-item--create {
      border-top: 1px solid var(--lp-stroke-default);
      color: var(--lp-text-secondary);
    }
    
    .editor-tags {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--lp-space-16);
    }
    
    .tag-colors {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      flex-wrap: wrap;
      height: var(--lp-height-lg);
    }
    
    .tag-dot {
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thick) solid transparent;
      cursor: pointer;
      transition: transform var(--lp-motion-mid) var(--lp-ease-out),
                  border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .tag-dot:hover {
      transform: scale(1.15);
      transition: transform var(--lp-motion-instant), border-color var(--lp-motion-instant);
    }
    
    .tag-dot.active {
      border-color: var(--lp-text-primary);
    }
    
    .textarea-shell {
      position: relative;
    }
    
    .textarea-copy {
      position: absolute;
      right: var(--lp-space-12);
      top: var(--lp-space-12);
      /* v2.7 (T6): floating chip needs its own surface — long prompt lines used
         to run straight under the bare text and both became unreadable. */
      border: 1px solid var(--lp-stroke-default);
      background: var(--lp-bg-elevated);
      border-radius: var(--lp-radius-s);
      padding: var(--lp-space-4);
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
      cursor: pointer;
    }

    .textarea-copy:hover {
      color: var(--lp-text-primary);
    }

    /* v2.7 (T6): reserve space so prompt text never starts under the Copy chip */
    .textarea-shell .textarea { padding-right: 64px; }

    /* ========================================
       SPOTLIGHT MODAL — Master v1.4 §6.3
       ======================================== */
    
    .spotlight-backdrop {
      position: fixed;
      inset: 0;
      background: var(--lp-overlay-dark);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 120px;
      z-index: var(--lp-z-spotlight);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .spotlight-backdrop--open {
      opacity: 1;
      pointer-events: auto;
    }
    
    .spotlight {
      width: var(--lp-modal-lg);
      max-width: 96vw;
      max-height: 70vh;
      background: var(--lp-bg-surface);
      border-radius: var(--lp-radius-xl);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      box-shadow: var(--lp-shadow-l);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translateY(20px);
      opacity: 0;
      transition: transform var(--lp-motion-mid) var(--lp-ease-out),
                  opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .spotlight-backdrop--open .spotlight {
      transform: translateY(0);
      opacity: 1;
    }
    
    .spotlight-search {
      padding: var(--lp-space-16) var(--lp-space-20);
      flex-shrink: 0;
    }
    
    .spotlight-search-row {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      background: var(--lp-bg-input);
      border-radius: var(--lp-radius-m);
      padding: 0 var(--lp-space-16);
    }
    
    .spotlight-search-row .input {
      height: var(--lp-height-lg);
      background: transparent;
      border: none;
      padding: 0;
    }
    
    .spotlight-search-row .input:focus {
      box-shadow: none;
    }
    
    .spotlight-search-row .input::placeholder {
      color: var(--lp-text-secondary);
    }
    
    .spotlight-sections {
      flex: 1;
      overflow-y: auto;
      padding: var(--lp-space-4) var(--lp-space-12);
    }
    
    .spotlight-section-label {
      padding: var(--lp-space-8) var(--lp-space-8);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-tertiary);
      text-transform: uppercase;
      letter-spacing: var(--lp-tracking-wide);
    }
    
    .spotlight-list {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    /* Spotlight Row — 68px, 3 lines */
    .spotlight-item {
      display: flex;
      align-items: center;
      min-height: 68px;
      padding: var(--lp-space-12) var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      cursor: pointer;
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .spotlight-item:hover,
    .spotlight-item--active {
      background: var(--lp-wash-hover);
      transition: background var(--lp-motion-instant);
    }
    
    .spotlight-item__content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      min-width: 0;
    }
    
    /* Line 1: Title + Badge */
    .spotlight-item__top {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
    }
    
    .spotlight-item__label {
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-primary);
      line-height: var(--lp-leading-tight);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .spotlight-item__right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      flex-shrink: 0;
    }

    /* Persistent pin dot — merged with .card__pin earlier (R2 dedup) */
    
    .spotlight-item__badge {
      height: var(--lp-size-5);
      padding: 0 var(--lp-space-8);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--lp-radius-full);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
      line-height: var(--lp-leading-none);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-wash-subtle);
      color: var(--lp-text-tertiary);
      transition: border-color var(--lp-motion-mid) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }

    /* GS7: hide badge when section label already signals type */
    .spotlight-sections.browse .spotlight-item__badge { visibility: hidden; pointer-events: none; }
    /* But show CTA on hover (even in browse state) */
    .spotlight-sections.browse .spotlight-item:hover .spotlight-item__badge { visibility: visible; pointer-events: auto; }

    /* Badge hover → show action CTA via data-hover-text */
    .spotlight-item:hover .spotlight-item__badge {
      font-size: 0;
      color: var(--lp-text-secondary);
      border-color: var(--lp-stroke-light);
      transition-duration: var(--lp-motion-instant);
    }
    .spotlight-item:hover .spotlight-item__badge::after {
      content: attr(data-hover-text);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
    }

    /* Copy flash feedback */
    .spotlight-item--flash {
      background: var(--lp-overlay-accent-subtle) !important;
      transition: background 0ms !important;
    }
    
    /* Line 2: Preview — merged with .card__preview earlier (R2 dedup) */
    
    /* Line 3: Collection · Tag */
    /* Line 3: Collection · Tag — merged with .card__meta earlier (R2 dedup) */
    
    /* Collection + hover — merged with .card__collection earlier (R2 dedup) */
    
    /* Separator — merged with .card__meta-sep earlier (R2 dedup) */
    
    /* Tag base — merged with .card__tag earlier (R2 dedup) */
    
    /* Tag colors shared with .card__tag--{color} — see compound rules earlier */
    
    /* Last used time display (mirrors extension .result-time) */
    .spotlight-item__time {
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-sm);
      flex-shrink: 0;
      white-space: nowrap;
    }
    
    /* Quick action buttons on hover (mirrors extension .qa-btn) */
    .spotlight-item__qa {
      display: inline-flex;
      gap: var(--lp-space-4);
      opacity: 0;
      transition: opacity var(--lp-motion-fast);
      margin-right: 6px;
    }
    .spotlight-item:hover .spotlight-item__qa {
      opacity: 1;
    }
    /* v2.5: touch devices cannot trigger :hover reliably — hide qa icons entirely.
       Edit/Delete/Pin on mobile happen on the Cards page (already optimized for touch). */
    @media (hover: none) {
      .spotlight-item__qa { display: none; }
    }
    /* spotlight-qa-btn base rules merged with .card__action-btn above (R4 dedup) */
    .spotlight-qa-btn--pinned {
      color: var(--lp-accent-base);
    }
    
    /* Command Row — 2 lines */
    .spotlight-item--command {
      min-height: var(--lp-topbar-height);
    }
    
    .spotlight-item--command .spotlight-item__label {
      font-family: var(--lp-font-mono);
    }
    
    /* Pro-only items (dimmed) */
    .spotlight-item--pro {
      opacity: var(--lp-opacity-subtle);
    }
    
    .spotlight-item--pro:hover {
      opacity: var(--lp-opacity-loading);
    }
    
    .spotlight-item__badge--pro {
      background: var(--lp-accent-base);
      border-color: var(--lp-accent-base);
      color: var(--lp-bg-base);
    }
    
    /* Footer hints */
    .spotlight-footer {
      flex-shrink: 0;
      padding: var(--lp-space-12) var(--lp-space-20);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--lp-space-16);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
    }
    
    .spotlight-footer span {
      display: flex;
      align-items: center;
      gap: var(--lp-space-4);
    }
    
    .spotlight-footer kbd {
      font-family: inherit;
      font-size: var(--lp-text-xs);
      color: var(--lp-text-secondary);
    }

    /* v2.7 (T3): below 520px hide the whole footer — every hint is a keyboard
       affordance and touch devices have none (the old "first chip stays" rule
       showed Ctrl⇧L on Android). Also reclaims height under the virtual keyboard. */
    @media (max-width: 520px) {
      .spotlight-footer { display: none; }
    }
    
    /* Scrollbar */
    .spotlight-sections::-webkit-scrollbar { width: var(--lp-size-2); }
    .spotlight-sections::-webkit-scrollbar-track { background: transparent; }
    .spotlight-sections::-webkit-scrollbar-thumb { background: var(--lp-stroke-default); border-radius: var(--lp-radius-s); }
    .spotlight-sections::-webkit-scrollbar-thumb:hover { background: var(--lp-stroke-light); }

    /* Collection Chips (spotlight) */
    .spotlight-chips {
      display: none;
      padding: var(--lp-space-4) var(--lp-space-16) var(--lp-space-8);
      gap: var(--lp-space-8);
      overflow-x: auto;
      flex-wrap: nowrap;
      flex-shrink: 0;
    }
    .spotlight-chips.open { display: flex; }
    .spotlight-chip {
      padding: var(--lp-space-4) var(--lp-space-8);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: transparent;
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background var(--lp-motion-fast), border-color var(--lp-motion-fast), color var(--lp-motion-fast);
    }
    .spotlight-chip:hover { border-color: var(--lp-accent-base); color: var(--lp-text-secondary); }
    .spotlight-chip.active { background: var(--lp-overlay-accent-subtle); border-color: var(--lp-accent-base); color: var(--lp-accent-base); }
    
    /* Empty states */
    .spotlight-empty,
    .collections-empty {
      grid-column: 1 / -1;
      padding: var(--lp-space-32) var(--lp-space-16);
      text-align: center;
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-base);
    }

    /* ========================================
       MANAGE COLLECTIONS MODAL
       ======================================== */
    
    .collections-modal .modal {
      width: 560px;
      max-height: 70vh;
    }
    
    .collections-modal .modal__body {
      min-height: 0;
    }
    
    .collections-list {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      max-height: 50vh;
      overflow-y: auto;
    }
    
    .collections-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      padding: var(--lp-space-8) var(--lp-space-16);
      min-height: var(--lp-height-lg);
      cursor: pointer;
      background: transparent;
      border-radius: var(--lp-radius-m);
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .collections-row:hover {
      background: var(--lp-wash-hover);
      transition: background var(--lp-motion-instant);
    }
    
    .collections-row--active::before {
      content: "";
      position: absolute;
      left: 0;
      top: var(--lp-space-4);
      bottom: var(--lp-space-4);
      width: 2px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
    }
    
    .collections-row-main {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      min-width: 0;
    }
    
    .collections-row-name {
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-medium);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    
    .collections-row-meta {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
    }
    
    .collections-row-actions {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      flex-shrink: 0;
    }
    
    /* Collections row drag handle */
    .collections-row-handle {
      width: var(--lp-size-6);
      height: var(--lp-size-6);
      border: none;
      padding: 0;
      border-radius: var(--lp-radius-full);
      background: transparent;
      color: var(--lp-text-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      opacity: 0;
      transition: opacity var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .collections-row:hover .collections-row-handle,
    .collections-row--reorder-mode .collections-row-handle {
      opacity: 1;
    }
    
    .collections-row-handle:active {
      cursor: grabbing;
    }
    
    .collections-row--dragging {
      opacity: var(--lp-opacity-subtle);
    }
    
    .collections-row--drop-target {
      background: var(--lp-wash-active);
    }
    
    /* Kebab menu */
    .kebab-menu {
      position: absolute;
      right: 0;
      top: calc(100% + var(--lp-space-4));
      width: 160px;
      padding: var(--lp-space-4);
      background: var(--lp-bg-elevated);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-m);
      box-shadow: var(--lp-shadow-m);
      z-index: var(--lp-z-dropdown);
    }
    
    .kebab-menu--fixed {
      position: fixed;
      z-index: var(--lp-z-top); /* Above modals */
    }
    
    .kebab-menu--up {
      top: auto;
      bottom: calc(100% + var(--lp-space-4));
    }
    
    .kebab-menu__item {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      padding: var(--lp-space-8) var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      transition: background var(--lp-motion-fast) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .kebab-menu__item:hover {
      background: var(--lp-wash-hover);
      color: var(--lp-text-primary);
      transition: background var(--lp-motion-instant), color var(--lp-motion-instant);
    }
    
    .kebab-menu__item--danger:hover {
      background: var(--lp-overlay-error);
      color: var(--lp-error);
    }
    
    /* Inline rename input */
    .collections-rename-input {
      height: var(--lp-height-sm);
      padding: 0 var(--lp-space-8);
      font-size: var(--lp-text-base);
    }

    /* ========================================
       LOADING STATES
       ======================================== */
    
    /* Spinner */
    .spinner {
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      border: var(--lp-border-thick) solid var(--lp-stroke-default);
      border-top-color: var(--lp-accent-base);
      border-radius: var(--lp-radius-full);
      animation: spin var(--lp-anim-spin) linear infinite;
    }
    
    .spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
    .spinner--lg { width: var(--lp-size-6); height: var(--lp-size-6); border-width: 2.5px; }
    
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    
    /* Button loading state */
    .btn--loading {
      position: relative;
      color: transparent !important;
      pointer-events: none;
    }
    
    .btn--loading::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--lp-icon-sm);
      height: var(--lp-icon-sm);
      margin: -8px 0 0 -8px;
      border: var(--lp-border-thick) solid currentColor;
      border-top-color: transparent;
      border-radius: var(--lp-radius-full);
      animation: spin var(--lp-anim-spin) linear infinite;
    }
    
    .btn--primary.btn--loading::after {
      border-color: var(--lp-overlay-light-border);
      border-top-color: var(--lp-text-on-accent);
    }
    
    /* Skeleton placeholder */
    .skeleton {
      background: linear-gradient(
        90deg,
        var(--lp-bg-surface) 25%,
        var(--lp-bg-elevated) 50%,
        var(--lp-bg-surface) 75%
      );
      background-size: 200% 100%;
      animation: skeleton-pulse var(--lp-anim-skeleton) ease-in-out infinite;
      border-radius: var(--lp-radius-s);
    }
    
    @keyframes skeleton-pulse {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    .skeleton--text {
      height: var(--lp-icon-sm);
      width: 100%;
      margin-bottom: var(--lp-space-8);
    }
    
    .skeleton--text:last-child {
      width: 60%;
      margin-bottom: 0;
    }
    
    .skeleton--card {
      height: 180px;
    }
    
    /* v2.6: skeleton container layouts */
    .skeleton-row {
      padding: var(--lp-space-12) var(--lp-space-16);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .skeleton-row .skeleton--text {
      height: 12px;
      margin: 0;
    }
    .collections-skeleton {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: var(--lp-space-16);
    }
    
    /* Loading overlay for sections */
    .loading-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--lp-overlay-glass);
      border-radius: inherit;
      z-index: var(--lp-z-dropdown);
    }

    /* ========================================
       TOAST
       ======================================== */
    
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      padding: var(--lp-space-12) var(--lp-space-16);
      background: var(--lp-bg-elevated);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-m);
      font-size: var(--lp-text-base);
      color: var(--lp-text-primary);
      box-shadow: var(--lp-shadow-m);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--lp-motion-fast) var(--lp-ease-out),
                  transform var(--lp-motion-fast) var(--lp-ease-out);
      z-index: var(--lp-z-top);
    }
    
    .toast--visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    /* Undo-delete toast variant — inline Undo button with accent color */
    .toast--undo {
      display: inline-flex;
      align-items: center;
      gap: var(--lp-space-12);
    }
    .toast__undo-btn {
      padding: var(--lp-space-4) var(--lp-space-12);
      background: transparent;
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-xs);
      color: var(--lp-accent-base);
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-medium);
      font-family: inherit;
      cursor: pointer;
      transition: background var(--lp-motion-fast), border-color var(--lp-motion-fast);
    }
    .toast__undo-btn:hover {
      background: var(--lp-wash-hover);
      border-color: var(--lp-accent-base);
    }
    .toast__undo-btn:focus-visible {
      outline: 2px solid var(--lp-accent-base);
      outline-offset: 2px;
    }

    /* ========================================
       OFFLINE BANNER
       ======================================== */
    
    .offline-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: var(--lp-space-8) var(--lp-space-16);
      background: var(--lp-warning);
      color: #1A1A1A;
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-medium);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--lp-space-8);
      z-index: var(--lp-z-top);
      transform: translateY(-100%);
      transition: transform var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .offline-banner--visible {
      transform: translateY(0);
    }
    
    .offline-banner__icon {
      font-size: var(--lp-text-md);
    }
    
    /* Adjust topbar when offline banner is visible */
    .is-offline .topbar {
      margin-top: 36px;
    }
    
    .is-offline .sidebar {
      padding-top: calc(var(--lp-space-20) + 36px);
    }

    /* ========================================
       GLOBAL SCROLLBAR
       ======================================== */
    
    *::-webkit-scrollbar { width: var(--lp-size-2); height: var(--lp-size-2); }
    *::-webkit-scrollbar-track { background: var(--lp-bg-surface); }
    *::-webkit-scrollbar-thumb { background: var(--lp-stroke-default); border-radius: var(--lp-radius-s); }
    *::-webkit-scrollbar-thumb:hover { background: var(--lp-stroke-light); }

    /* ========================================
       RESPONSIVE
       ======================================== */
    
    @media (max-width: 1200px) {
      .collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    
    @media (max-width: 992px) {
      .search-trigger { width: 36px; padding: 0; justify-content: center; }
      .search-trigger__text, .search-trigger__kbd { display: none; }
      .topbar { padding-inline: var(--lp-space-16); }
      .page-inner { padding-inline: var(--lp-space-16); }
      .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    
    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 220px;
        transform: translateX(-100%);
        transition: transform var(--lp-motion-mid) var(--lp-ease-out);
        z-index: var(--lp-z-modal);
        box-shadow: var(--lp-shadow-l);
      }
      .sidebar--open-mobile { transform: translateX(0); }
      .sidebar__toggle { display: none; }
      .topbar__left { display: flex; }
      .topbar__toggle-mobile { display: flex; }
      .page-inner { padding-top: var(--lp-space-24); padding-bottom: var(--lp-space-24); }
      .topbar__right { gap: var(--lp-space-8); }
      .spotlight { max-width: 100%; margin: var(--lp-space-16); }
      .spotlight-backdrop { padding-top: 80px; }
    }
    
    @media (max-width: 520px) {
      .collections-grid { grid-template-columns: minmax(0, 1fr); }
    }

    /* ========================================
       NEW SESSION / SESSION INPUT BAR
       ======================================== */
    
    .ns-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 50vh;
      gap: var(--lp-space-24);
      text-align: center;
    }
    
    .ns-hero__title {
      font-size: var(--lp-text-3xl);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
    }
    
    .ns-hero__sub {
      font-size: var(--lp-text-md);
      color: var(--lp-text-secondary);
      max-width: 400px;
    }

    /* Session content wrapper - scrolls, input bar stays fixed */
    .session-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow-y: auto;
      /* Thin overlay scrollbar */
      scrollbar-width: thin;
      scrollbar-color: var(--lp-stroke-light) transparent;
    }
    
    .session-content::-webkit-scrollbar {
      width: 6px;
    }
    
    .session-content::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .session-content::-webkit-scrollbar-thumb {
      background: var(--lp-stroke-light);
      border-radius: var(--lp-radius-full);
    }
    
    .session-content::-webkit-scrollbar-thumb:hover {
      background: var(--lp-stroke-default);
    }
    
    /* Right padding so bubbles don't touch scrollbar */
    
    .ns-landing {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: var(--lp-space-24) 0;
    }
    
    .session-content--active .ns-landing {
      display: none;
    }
    
    .session-stream {
      display: none;
      flex-direction: column;
      gap: var(--lp-space-20);
      padding-top: var(--lp-space-24);
      padding-right: var(--lp-space-8);
      padding-bottom: var(--lp-space-24);
    }
    
    .session-content--active .session-stream {
      display: flex;
    }

    .ns-landing-eyebrow {
      font-size: var(--lp-text-xs);
      font-weight: var(--lp-font-semibold);
      text-transform: uppercase;
      letter-spacing: var(--lp-tracking-wide);
      color: var(--lp-text-tertiary);
      margin-bottom: var(--lp-space-12);
    }

    .ns-hints-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--lp-space-8);
      justify-content: center;
    }

    .ns-hint {
      height: var(--lp-height-sm);
      padding: 0 var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      cursor: pointer;
      transition: background var(--lp-motion-fast) var(--lp-ease-out),
                  border-color var(--lp-motion-fast) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out),
                  transform var(--lp-motion-fast) var(--lp-ease-out);
    }

    .ns-hint:hover {
      background: var(--lp-bg-elevated);
      border-color: var(--lp-stroke-light);
      color: var(--lp-text-primary);
      transform: translateY(-0.5px);
    }
    
    .ns-hint:focus-visible {
      outline: none;
      box-shadow: var(--lp-focus-ring);
    }
    
    .ns-input-bar-shell {
      flex-shrink: 0;
      padding-top: var(--lp-space-24);
      /* Fallback for browsers that don't support env() */
      padding-bottom: var(--lp-space-24);
      padding-bottom: calc(var(--lp-space-24) + env(safe-area-inset-bottom, 0px));
      background: var(--lp-bg-base);
    }
    
    .ns-input-bar {
      min-height: var(--lp-sidebar-collapsed);
      border-radius: var(--lp-radius-l);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      box-shadow: var(--lp-shadow-m);
      padding: var(--lp-space-12) var(--lp-space-16);
      display: flex;
      align-items: center;
      gap: var(--lp-space-12);
      max-width: var(--lp-input-bar-max);
      margin-inline: auto;
      transition: border-color var(--lp-motion-fast) var(--lp-ease-out),
                  box-shadow var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .ns-input-bar:focus-within {
      border-color: var(--lp-accent-base);
      box-shadow: var(--lp-shadow-l);
      /* No transform - matte, no bounce */
    }
    
    .ns-input-wrap {
      flex: 1;
      position: relative;
    }
    
    .ns-input-field {
      width: 100%;
      min-height: var(--lp-height-md);
      max-height: 5.25rem; /* ~3 lines */
      border-radius: var(--lp-radius-m);
      border: none;
      background: var(--lp-bg-surface);
      padding: calc((var(--lp-height-md) - var(--lp-text-base) * 1.5) / 2) var(--lp-space-12);
      padding-right: 96px;
      font-size: var(--lp-text-base);
      font-size: max(16px, var(--lp-text-base)); /* Prevent iOS zoom */
      color: var(--lp-text-primary);
      font-family: inherit;
      outline: none;
      resize: none;
      line-height: 1.5;
      overflow-y: auto;
    }
    
    .ns-input-field::placeholder {
      color: var(--lp-text-secondary);
    }
    
    .ns-input-field--pulse {
      animation: inputPulse var(--lp-anim-pulse) ease-in-out 3;
    }
    
    @keyframes inputPulse {
      0%, 100% { box-shadow: 0 0 0 0 transparent; }
      50% { box-shadow: 0 0 0 4px var(--lp-overlay-accent); }
    }
    
    .ns-input-field:disabled {
      opacity: var(--lp-opacity-muted);
      cursor: not-allowed;
    }
    
    .ns-mode-addon {
      position: absolute;
      right: var(--lp-space-4);
      top: 50%;
      transform: translateY(-50%);
      height: var(--lp-height-sm);
      padding: 0 var(--lp-space-12);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid transparent;
      background: transparent;
      display: inline-flex;
      align-items: center;
      gap: var(--lp-space-8);
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
      cursor: pointer;
    }
    
    .ns-mode-addon::after {
      content: "▾";
      font-size: var(--lp-text-2xs);
      margin-left: 0;
      color: var(--lp-text-tertiary);
    }
    
    .ns-mode-addon:hover {
      color: var(--lp-text-primary);
      border-color: var(--lp-stroke-light);
      background: var(--lp-wash-subtle);
    }
    
    .ns-mode-addon:hover::after {
      color: var(--lp-text-secondary);
    }
    
    .ns-mode-pill {
      width: var(--lp-size-2);
      height: var(--lp-size-2);
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
    }
    
    .ns-mode-pill[data-pill="Prompt"] { background: var(--lp-mode-prompt); }
    .ns-mode-pill[data-pill="Custom AI"] { background: var(--lp-mode-custom-ai); }
    
    .ns-mode-popover {
      position: absolute;
      bottom: calc(100% + 8px);
      right: 0;
      min-width: 220px;
      padding: var(--lp-space-8);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      box-shadow: var(--lp-shadow-m);
      opacity: 0;
      pointer-events: none;
      transform: translateY(4px);
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out),
                  transform var(--lp-motion-mid) var(--lp-ease-out);
      z-index: var(--lp-z-dropdown);
    }
    
    .ns-mode-popover--open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    
    .ns-mode-option {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      padding: var(--lp-space-8) var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      cursor: pointer;
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    .ns-mode-option + .ns-mode-option {
      margin-top: 2px;
    }
    
    .ns-mode-option:hover {
      background: var(--lp-bg-elevated);
      transition: background var(--lp-motion-instant);
    }
    
    .ns-mode-option--active {
      color: var(--lp-text-primary);
      background: var(--lp-wash-hover);
    }
    .ns-mode-option--active:hover {
      background: var(--lp-wash-hover);
    }
    
    .ns-mode-pro-tag {
      font-size: var(--lp-text-2xs);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-tertiary);
      margin-left: var(--lp-space-4);
    }
    
    .ns-send-circle {
      width: var(--lp-size-10);
      height: var(--lp-height-md);
      border-radius: var(--lp-radius-full);
      border: none;
      background: var(--lp-accent-base);
      cursor: pointer;
      position: relative;
      transition: background var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .ns-send-circle::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-40%, -50%);
      border: 5px solid transparent;
      border-left: 8px solid var(--lp-text-on-accent);
    }
    
    .ns-send-circle:hover {
      background: var(--lp-accent-hover);
      transition: background var(--lp-motion-instant);
    }
    
    .ns-send-circle--loading {
      pointer-events: none;
      opacity: var(--lp-opacity-loading);
    }
    
    .ns-send-circle--loading::after {
      border: none;
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      border-radius: var(--lp-radius-full);
      border-top: var(--lp-border-thick) solid var(--lp-text-on-accent);
      border-right: 2px solid transparent;
      transform: translate(-50%, -50%);
      animation: sendSpin var(--lp-anim-spin-fast) linear infinite;
    }
    
    @keyframes sendSpin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    .ns-input-footer {
      max-width: var(--lp-input-bar-max);
      margin: var(--lp-space-4) auto 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
    }

    /* ========================================
       SESSION STREAM (CHAT BUBBLES)
       ======================================== */
    
    .bubble {
      padding: var(--lp-space-16) var(--lp-space-20);
      border-radius: var(--lp-radius-l);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      max-width: var(--lp-bubble-max);
      animation: bubble-enter var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    @keyframes bubble-enter {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .bubble--user {
      align-self: flex-end;
      background: var(--lp-bg-elevated);
      border-color: var(--lp-stroke-light);
      max-width: var(--lp-bubble-user-max);
    }
    
    .bubble--user .bubble__meta {
      justify-content: flex-end;
    }
    
    .bubble--lp {
      align-self: flex-start;
      background: var(--lp-bg-surface);
    }
    
    .bubble__meta {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      margin-bottom: var(--lp-space-8);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
    }
    
    .bubble__meta-sep {
      width: 3px;
      height: 3px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-text-tertiary);
      opacity: var(--lp-opacity-muted);
    }
    
    .bubble__title {
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-secondary);
    }
    
    .bubble__body {
      font-size: var(--lp-text-base);
      line-height: var(--lp-leading-normal);
      color: var(--lp-text-primary);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    
    .bubble__footer {
      display: flex;
      justify-content: flex-end;
      gap: var(--lp-space-12);
      margin-top: var(--lp-space-12);
      padding-top: var(--lp-space-12);
      border-top: 1px solid var(--lp-stroke-default);
    }
    
    .lp-icon-mark {
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      border-radius: var(--lp-radius-full);
      border: var(--lp-border-thick) solid var(--lp-accent-base);
      flex-shrink: 0;
    }

    /* ========================================
       APPS PAGE
       ======================================== */
    
    .apps-list {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .app-card {
      display: flex;
      align-items: center;
      gap: var(--lp-space-12);
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      transition: border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .app-card:hover {
      border-color: var(--lp-stroke-light);
      transition: border-color var(--lp-motion-instant);
    }
    
    .app-card__icon {
      width: var(--lp-size-10);
      height: var(--lp-height-md);
      border-radius: var(--lp-radius-s);
      background: var(--lp-bg-elevated);
      flex-shrink: 0;
    }
    
    .app-card__main {
      flex: 1;
      min-width: 0;
    }
    
    .app-card__name {
      font-size: var(--lp-text-md);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-primary);
      margin-bottom: var(--lp-space-8);
    }
    
    .app-card__desc {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      margin-bottom: var(--lp-space-8);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .app-card__meta {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
    }
    
    .app-card__meta-dot {
      width: 3px;
      height: 3px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-text-tertiary);
    }
    
    .app-card__right {
      flex-shrink: 0;
    }
    
    .btn--micro {
      height: 28px;
      min-width: 60px;
      padding: 0 var(--lp-space-12);
      font-size: var(--lp-text-sm);
    }

    /* ========================================
       HISTORY PAGE
       ======================================== */
    
    .history-sections {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-24);
    }
    
    .history-section__title {
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-tertiary);
      text-transform: uppercase;
      letter-spacing: var(--lp-tracking-wide);
      margin-bottom: var(--lp-space-12);
    }
    
    .history-list {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .history-item {
      display: flex;
      align-items: center;
      gap: var(--lp-space-16);
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      transition: border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .history-item:hover {
      border-color: var(--lp-stroke-light);
      transition: border-color var(--lp-motion-instant);
    }
    
    .history-item__main {
      flex: 1;
      min-width: 0;
    }
    
    .history-item__title-row {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      margin-bottom: var(--lp-space-8);
    }
    
    .history-item__title {
      font-size: var(--lp-text-md);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-primary);
    }
    
    .history-item__pin-dot {
      width: 6px;
      height: 6px;
      border-radius: var(--lp-radius-full);
      background: var(--lp-accent-base);
    }
    
    .history-item__preview {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: var(--lp-space-8);
    }
    
    .history-item__meta {
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
    }
    
    .history-item__actions {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      flex-shrink: 0;
    }
    
    .history-item .kebab-btn {
      /* Inherit base kebab-btn styles, just adjust size for touch target */
      width: var(--lp-size-6);
      height: var(--lp-size-6);
    }

    /* ========================================
       EMPTY STATE
       ======================================== */
    
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--lp-space-32) var(--lp-space-24);
      text-align: center;
      gap: var(--lp-space-8);
    }
    
    .empty-state__icon {
      font-size: 32px;
      opacity: 0.6;
      margin-bottom: var(--lp-space-8);
    }
    
    .empty-state__title {
      font-size: var(--lp-text-md);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-primary);
    }
    
    .empty-state__desc {
      font-size: var(--lp-text-base);
      color: var(--lp-text-tertiary);
    }

    /* ========================================
       AFFILIATE PAGE
       ======================================== */

    /* v2.7 (T8): quick status strip — 4 tappable tiles above the panels */
    .affiliate-status-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }
    .affiliate-status-strip.is-empty {
      display: block;
      padding: 14px 16px;
      border: 1px solid var(--lp-stroke-default);
      border-radius: 12px;
      color: var(--lp-text-tertiary);
    }
    .status-stat {
      text-align: left;
      background: var(--lp-bg-surface);
      border: 1px solid var(--lp-stroke-default);
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: background .15s ease, border-color .15s ease;
    }
    .status-stat:hover { background: var(--lp-bg-elevated); border-color: var(--lp-stroke-light); }
    .status-stat:focus-visible { outline: 2px solid var(--lp-accent-base); outline-offset: 2px; }
    .status-stat__value { font-size: 22px; font-weight: 600; color: var(--lp-text-primary); margin-top: 2px; }
    .status-stat__sub { font-size: 12px; color: var(--lp-text-tertiary); margin-top: 4px; }
    .status-progress { height: 4px; border-radius: 2px; background: var(--lp-bg-input); margin-top: 8px; overflow: hidden; }
    .status-progress__bar { height: 100%; background: var(--lp-accent-base); border-radius: 2px; }
    @media (max-width: 640px) { .affiliate-status-strip { grid-template-columns: repeat(2, 1fr); } }

    .affiliate-panels {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-16);
    }
    
    .affiliate-panel {
      border-radius: var(--lp-radius-l);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-surface);
      overflow: hidden;
    }
    
    .affiliate-panel__header {
      padding: var(--lp-space-16) var(--lp-space-20);
      border-bottom: 1px solid var(--lp-stroke-default);
    }
    
    .affiliate-panel__title {
      font-size: var(--lp-text-lg);
      font-weight: var(--lp-font-medium);
    }
    
    .affiliate-panel__body {
      padding: var(--lp-space-20);
    }
    
    .affiliate-product-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--lp-space-24);
    }
    
    .affiliate-referral-inline {
      display: flex;
      gap: var(--lp-space-8);
    }
    
    .affiliate-referral-inline .input {
      flex: 1;
    }
    
    .affiliate-preview-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--lp-space-24);
    }
    
    .affiliate-preview-box {
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      background: var(--lp-bg-base);
    }
    
    .affiliate-preview-box__value-main {
      font-size: var(--lp-text-2xl);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      margin: var(--lp-space-8) 0 var(--lp-space-4);
    }
    
    .affiliate-preview-box__value-secondary {
      font-size: var(--lp-text-md);
      color: var(--lp-text-secondary);
      margin-bottom: var(--lp-space-8);
    }
    
    .affiliate-steps {
      display: flex;
      gap: var(--lp-space-16);
      list-style: none;
      margin-bottom: var(--lp-space-16);
    }
    
    .affiliate-step {
      flex: 1;
      padding: var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      background: var(--lp-bg-base);
    }
    
    .affiliate-path-actions {
      display: flex;
      gap: var(--lp-space-8);
      margin-top: var(--lp-space-16);
    }
    
    .affiliate-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--lp-text-base);
    }
    
    .affiliate-table th,
    .affiliate-table td {
      padding: var(--lp-space-8) var(--lp-space-12);
      text-align: left;
      color: var(--lp-text-secondary);
      border-bottom: 1px solid var(--lp-stroke-default);
    }
    
    .affiliate-table th {
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-xs);
      text-transform: uppercase;
    }
    
    .metric-tile {
      padding: var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      background: var(--lp-bg-base);
    }
    
    .metric-tile__value {
      font-size: var(--lp-text-xl-plus);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      margin-top: var(--lp-space-4);
    }
    
    /* Hint icons and text */
    .hint-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--lp-icon-sm);
      height: var(--lp-icon-sm);
      border-radius: var(--lp-radius-full);
      background: var(--lp-wash-strong);
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-2xs);
      font-weight: var(--lp-font-semibold);
      cursor: pointer;
      margin-left: var(--lp-space-4);
      vertical-align: middle;
      transition: background var(--lp-motion-fast) var(--lp-ease-out),
                  color var(--lp-motion-fast) var(--lp-ease-out);
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Larger touch target */
    .hint-icon::before {
      content: '';
      position: absolute;
      inset: -8px;
    }
    
    .hint-icon:hover,
    .hint-icon:focus,
    .hint-icon.hint-icon--active {
      background: var(--lp-wash-strong);
      color: var(--lp-text-primary);
    }
    
    /* Custom tooltip - rendered via JS to avoid overflow issues */
    .hint-tooltip {
      position: fixed;
      width: max-content;
      max-width: 280px;
      padding: var(--lp-space-8) var(--lp-space-12);
      background: var(--lp-bg-elevated);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      border-radius: var(--lp-radius-s);
      box-shadow: var(--lp-shadow-m);
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-normal);
      line-height: var(--lp-leading-snug);
      color: var(--lp-text-secondary);
      white-space: normal;
      text-align: left;
      z-index: var(--lp-z-top);
      opacity: 0;
      pointer-events: none;
      transform: translateY(4px);
      transition: transform var(--lp-motion-fast) var(--lp-ease-out),
                  opacity var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .hint-tooltip--visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .modal__title .hint-icon,
    .content-title .hint-icon {
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      font-size: var(--lp-text-xs);
    }
    
    .affiliate-earnings-overview {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--lp-space-12);
      margin-bottom: var(--lp-space-16);
    }

    .affiliate-vouchers-list {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-8);
    }

    .affiliate-voucher-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      padding: var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      background: var(--lp-bg-base);
    }

    .affiliate-voucher-row__actions {
      display: flex;
      gap: var(--lp-space-8);
      flex-shrink: 0;
    }

    .affiliate-guide-toggle {
      margin-top: var(--lp-space-8);
    }

    .affiliate-guide-content {
      margin-top: var(--lp-space-12);
      padding: var(--lp-space-20);
      border-radius: var(--lp-radius-m);
      background: var(--lp-bg-base);
    }
    
    .affiliate-guide-content a {
      color: var(--lp-text-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: opacity var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .affiliate-guide-content a:hover {
      opacity: 0.7;
    }
    
    .guide-section {
      margin-bottom: var(--lp-space-20);
    }
    
    .guide-section:last-child {
      margin-bottom: 0;
    }
    
    .guide-section__title {
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: var(--lp-space-8);
    }
    
    .guide-section__body {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      line-height: var(--lp-leading-relaxed);
    }
    
    .guide-templates {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-8);
    }
    
    .guide-template {
      padding: var(--lp-space-12);
      background: var(--lp-bg-elevated);
      border-radius: var(--lp-radius-s);
      font-size: var(--lp-text-sm);
      line-height: var(--lp-leading-normal);
    }
    
    .guide-template__label {
      display: inline-block;
      color: var(--lp-text-tertiary);
      min-width: 70px;
      padding-right: var(--lp-space-8);
    }
    
    .guide-template__text {
      color: var(--lp-text-secondary);
    }
    
    .guide-platforms {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .guide-platform {
      padding: var(--lp-space-12);
      background: var(--lp-wash-subtle);
      border-radius: var(--lp-radius-s);
    }
    
    .guide-platform__name {
      font-weight: var(--lp-font-semibold);
      font-size: var(--lp-text-base);
      color: var(--lp-text-primary);
      margin-bottom: var(--lp-space-4);
    }
    
    .guide-platform__format {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
      margin-bottom: var(--lp-space-8);
    }
    
    .guide-platform__do {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
      margin-bottom: var(--lp-space-4);
    }
    
    .guide-platform__do::before {
      content: "✓ ";
      color: var(--lp-success);
    }
    
    .guide-platform__dont {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
    }
    
    .guide-platform__dont::before {
      content: "✗ ";
      color: var(--lp-error);
    }

    .affiliate-payouts-summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--lp-space-12);
      margin-bottom: var(--lp-space-16);
    }

    .payout-method-card {
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-base);
      padding: var(--lp-space-16);
      margin-bottom: var(--lp-space-16);
    }

    .payout-method-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
    }

    .payout-method-card__form {
      margin-top: var(--lp-space-16);
      padding-top: var(--lp-space-16);
      border-top: 1px solid var(--lp-stroke-default);
    }

    .payout-method-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--lp-space-12);
    }

    .payout-method-actions {
      display: flex;
      justify-content: flex-end;
      gap: var(--lp-space-8);
      margin-top: var(--lp-space-16);
    }

    .affiliate-table--wrap td {
      word-break: break-all;
      max-width: 200px;
    }

    .history-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--lp-space-12);
      padding: var(--lp-space-32);
      text-align: center;
      color: var(--lp-text-secondary);
    }

    .payment-plan-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      background: var(--lp-bg-base);
      margin-bottom: var(--lp-space-16);
    }

    .payment-form {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }

    .payment-footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-12);
      margin-top: var(--lp-space-16);
    }

    .payment-note {
      color: var(--lp-text-tertiary);
    }

    .password-form {
      display: none;
    }

    .password-form--visible {
      display: block;
    }

    /* ========================================
       BILLING MODAL
       ======================================== */
    
    .billing-body {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-16);
    }
    
    .billing-summary {
      border-radius: var(--lp-radius-l);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-base);
      padding: var(--lp-space-16);
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .billing-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--lp-space-16);
    }
    
    .billing-row--inline {
      border-top: 1px solid var(--lp-stroke-default);
      padding-top: var(--lp-space-12);
      margin-top: var(--lp-space-8);
    }
    
    .billing-note {
      color: var(--lp-text-tertiary);
      font-size: var(--lp-text-sm);
    }
    
    .billing-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--lp-text-base);
    }
    
    .billing-table th,
    .billing-table td {
      padding: var(--lp-space-8) var(--lp-space-4);
      text-align: left;
      color: var(--lp-text-secondary);
    }
    
    .billing-table tbody td {
      border-top: 1px solid var(--lp-stroke-default);
    }
    
    .billing-table th {
      font-weight: var(--lp-font-medium);
    }

    /* ========================================
       UPGRADE / PAYMENT MODAL
       ======================================== */
    
    .upgrade-body {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-16);
    }
    
    .upgrade-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--lp-space-12);
    }
    
    .upgrade-card {
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      background: var(--lp-bg-base);
      display: flex;
      flex-direction: column;
    }
    
    .upgrade-card--current {
      border-color: var(--lp-stroke-strong);
    }
    
    .upgrade-card__plan {
      font-size: var(--lp-text-xl);
      font-weight: var(--lp-font-semibold);
      margin: var(--lp-space-8) 0;
    }
    
    .upgrade-card__price {
      font-size: var(--lp-text-2xl);
      font-weight: var(--lp-font-semibold);
      margin: var(--lp-space-8) 0;
    }
    
    .upgrade-card__price .text-label {
      font-size: var(--lp-text-base);
      font-weight: var(--lp-font-normal);
    }
    
    .upgrade-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
      margin: var(--lp-space-12) 0;
      flex: 1;
    }
    
    .upgrade-card__cta {
      margin-top: auto;
      padding-top: var(--lp-space-12);
    }
    
    .payment-body {
      display: none;
      flex-direction: column;
      gap: var(--lp-space-16);
    }
    
    .payment-body--visible {
      display: flex;
    }
    
    .payment-summary {
      padding: var(--lp-space-16);
      border-radius: var(--lp-radius-m);
      background: var(--lp-bg-base);
    }
    
    .payment-row {
      display: flex;
      gap: var(--lp-space-12);
    }
    
    .payment-field {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    .payment-coupon-row {
      display: flex;
      gap: var(--lp-space-8);
      align-items: stretch;
    }
    
    .payment-coupon-row .input {
      flex: 1;
    }

    /* ========================================
       SETTINGS MODAL TABS
       ======================================== */
    
    .settings-tabs {
      display: flex;
      align-items: flex-end;
      gap: var(--lp-space-12);
      border-bottom: 1px solid var(--lp-stroke-default);
      margin: calc(-1 * var(--lp-space-20)) calc(-1 * var(--lp-space-20)) var(--lp-space-16);
      padding: var(--lp-space-16) var(--lp-space-20) 0;
      position: sticky;
      top: calc(-1 * var(--lp-space-20));
      background: var(--lp-bg-surface);
      z-index: 1;
    }
    
    .settings-tab {
      border: none;
      background: none;
      cursor: pointer;
      padding: 0 0 var(--lp-space-8);
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
      border-bottom: 2px solid transparent;
      transition: color var(--lp-motion-mid) var(--lp-ease-out),
                  border-color var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .settings-tab:hover {
      color: var(--lp-text-primary);
      transition: color var(--lp-motion-instant);
    }
    
    .settings-tab--active {
      color: var(--lp-text-primary);
      border-color: var(--lp-accent-base);
    }
    
    .settings-section {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .settings-section[hidden] {
      display: none;
    }
    
    .settings-section__header {
      margin-bottom: var(--lp-space-8);
    }
    
    .settings-section__title {
      font-size: var(--lp-text-lg);
      font-weight: var(--lp-font-medium);
      margin-bottom: var(--lp-space-4);
    }
    
    .settings-section__sub {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
    }
    
    .settings-subsection {
      margin-bottom: var(--lp-space-12);
    }
    
    .settings-subsection__title {
      font-size: var(--lp-text-sm);
      font-weight: var(--lp-font-medium);
      color: var(--lp-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    /* Toggle switch */
    .toggle {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }
    
    .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle__slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: var(--lp-stroke-default);
      border-radius: var(--lp-radius-full);
      transition: background var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .toggle__slider::before {
      content: "";
      position: absolute;
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background: var(--lp-bg-surface);
      border-radius: 50%;
      transition: transform var(--lp-motion-fast) var(--lp-ease-out);
    }
    
    .toggle input:checked + .toggle__slider {
      background: var(--lp-accent-base);
    }
    
    .toggle input:checked + .toggle__slider::before {
      transform: translateX(20px);
    }
    
    .toggle input:focus-visible + .toggle__slider {
      box-shadow: var(--lp-focus-ring);
    }
    
    .pill-surface {
      padding: var(--lp-space-12);
      border-radius: var(--lp-radius-s);
      background: var(--lp-bg-base);
    }
    
    .pill-surface__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--lp-space-8);
      margin-top: var(--lp-space-4);
    }
    
    .members-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--lp-text-base);
    }
    
    .members-table th,
    .members-table td {
      padding: var(--lp-space-8) var(--lp-space-4);
      text-align: left;
      color: var(--lp-text-secondary);
    }
    
    .members-table tbody td {
      border-top: 1px solid var(--lp-stroke-default);
    }
    
    .members-table th {
      font-weight: var(--lp-font-medium);
    }

    /* Responsive for new pages */
    @media (max-width: 768px) {
      .affiliate-product-layout,
      .affiliate-preview-layout {
        grid-template-columns: 1fr;
      }
      .affiliate-earnings-overview {
        grid-template-columns: repeat(2, 1fr);
      }
      .affiliate-steps {
        flex-direction: column;
      }
      .upgrade-grid {
        grid-template-columns: 1fr;
      }
      .ns-hero {
        min-height: 40vh;
      }
      .ns-hero__title {
        font-size: var(--lp-text-2xl);
      }
      
      /* Input bar mobile adjustments */
      .ns-input-bar {
        min-height: var(--lp-topbar-height);
        padding: var(--lp-space-8) var(--lp-space-12);
      }
      .ns-input-bar-shell {
        padding: var(--lp-space-16);
      }
      
      /* Bubble mobile adjustments - prevent scrollbar overlap */
      .bubble {
        max-width: calc(100% - var(--lp-space-16));
      }
      .bubble--user {
        max-width: calc(85% - var(--lp-space-16));
      }
      
      /* Modal full-width on mobile */
      .modal {
        max-width: calc(100vw - var(--lp-space-32));
        max-height: calc(100vh - var(--lp-space-32));
        margin: var(--lp-space-16);
      }
      
      /* Popovers as bottom sheets on mobile */
      #notifications-popover,
      #account-popover {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: var(--lp-radius-xl) var(--lp-radius-xl) 0 0;
        transform: translateY(100%);
      }
      
      #notifications-popover.popover--open,
      #account-popover.popover--open {
        transform: translateY(0);
      }
      
      /* Ensure touch targets are at least 44px */
      .popover__item,
      .kebab-menu__item {
        min-height: var(--lp-height-lg);
      }
      
      /* History item touch target */
      .history-item {
        padding: var(--lp-space-12) var(--lp-space-16);
      }
    }

    /* ========================================
       TOUCH & HOVER FIXES — P1
       ======================================== */
    
    /* Touch action for faster taps (removes 300ms delay) */
    button, .btn, .nav-item, .filter-chip, .ns-hint, 
    .icon-btn, .kebab-btn, .link-button, .notif-item,
    .collections-row, .history-item, .app-card {
      touch-action: manipulation;
    }
    
    /* Expand touch targets for micro buttons */
    .btn--micro {
      position: relative;
    }
    
    .btn--micro::before {
      content: "";
      position: absolute;
      top: -8px;
      right: -4px;
      bottom: -8px;
      left: -4px;
    }
    
    /* Hover states only for devices that support hover */
    @media (hover: none) {
      /* Remove hover backgrounds on touch-only devices */
      .nav-item:hover,
      .filter-chip:hover,
      .ns-hint:hover,
      .collections-row:hover,
      .history-item:hover,
      .app-card:hover,
      .card:hover,
      .kebab-menu__item:hover,
      .popover__item:hover,
      .ns-mode-option:hover {
        background: inherit;
        border-color: inherit;
        box-shadow: inherit;
        transform: none; /* Prevent bounce on tap */
      }

      /* Hover-revealed actions always visible on touch (no hover affordance) */
      .card__actions {
        opacity: 1;
      }

      /* Use active state instead for touch feedback */
      .nav-item:active,
      .filter-chip:active,
      .ns-hint:active,
      .btn:active {
        opacity: 0.7;
        transition: opacity 0ms;
      }
    }
    
    /* Keyboard open state adjustments - instant, no bounce */
    .keyboard-open .ns-input-bar-shell {
      /* No transition - instant adjustment prevents bounce */
    }
    
    .keyboard-open .toast {
      /* No transition - instant adjustment */
    }

    /* ========================================
       AUTH MODAL
       ======================================== */
    
    .auth-backdrop {
      position: fixed;
      inset: 0;
      background: var(--lp-overlay-darker);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: var(--lp-z-top);
      opacity: 1;
      transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    .auth-backdrop--hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .auth-modal {
      width: 400px;
      max-width: 96vw;
      background: var(--lp-bg-surface);
      border-radius: var(--lp-radius-xl);
      border: var(--lp-border-thin) solid var(--lp-stroke-default);
      box-shadow: var(--lp-shadow-l);
      padding: var(--lp-space-24);
      animation: auth-modal-enter var(--lp-motion-mid) var(--lp-ease-out);
    }
    
    @keyframes auth-modal-enter {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    .auth-modal__header {
      text-align: center;
      margin-bottom: var(--lp-space-24);
    }
    
    .auth-modal__logo {
      width: 48px;
      height: 48px;
      margin: 0 auto var(--lp-space-16);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .auth-modal__logo svg {
      width: 100%;
      height: 100%;
    }
    
    .auth-modal__title {
      font-size: var(--lp-text-xl);
      font-weight: var(--lp-font-semibold);
      color: var(--lp-text-primary);
      margin-bottom: var(--lp-space-4);
    }
    
    .auth-modal__subtitle {
      font-size: var(--lp-text-base);
      color: var(--lp-text-secondary);
    }
    
    .auth-provider {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-8);
      margin-bottom: var(--lp-space-16);
    }
    
    .auth-provider .btn {
      width: 100%;
      height: var(--lp-height-md);
    }
    
    .provider-icon {
      width: var(--lp-size-4);
      height: var(--lp-size-4);
      border-radius: var(--lp-radius-full);
      border: 1.5px solid currentColor;
    }
    
    .auth-divider {
      display: flex;
      align-items: center;
      gap: var(--lp-space-8);
      font-size: var(--lp-text-sm);
      color: var(--lp-text-tertiary);
      margin-bottom: var(--lp-space-16);
    }
    
    .auth-divider::before,
    .auth-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--lp-stroke-default);
    }
    
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-12);
    }
    
    .auth-form .field-group {
      display: flex;
      flex-direction: column;
      gap: var(--lp-space-4);
    }
    
    .auth-form .field-label {
      font-size: var(--lp-text-sm);
      color: var(--lp-text-secondary);
    }
    
    .auth-form .btn--primary {
      width: 100%;
      height: var(--lp-height-md);
      margin-top: var(--lp-space-8);
    }
    
    .auth-footer {
      margin-top: var(--lp-space-16);
      text-align: center;
    }
    
    .auth-footer .btn--tertiary {
      font-size: var(--lp-text-sm);
    }
    
    .auth-legal {
      margin-top: var(--lp-space-16);
      font-size: var(--lp-text-xs);
      color: var(--lp-text-tertiary);
      text-align: center;
      line-height: var(--lp-leading-snug);
    }
    
    .auth-legal a {
      color: inherit;
      text-decoration: underline;
    }

    /* Auth: Verify email state */
    .auth-verify { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .auth-verify__icon { width: 56px; height: 56px; border-radius: var(--lp-radius-full); background: var(--lp-overlay-accent); color: var(--lp-accent-base); display: flex; align-items: center; justify-content: center; margin-bottom: var(--lp-space-16); }
    .auth-verify__title { font-size: var(--lp-text-xl); font-weight: var(--lp-font-semibold); color: var(--lp-text-primary); margin-bottom: var(--lp-space-16); }
    .auth-verify__email-chip { font-size: var(--lp-text-base); font-weight: var(--lp-font-medium); color: var(--lp-text-primary); background: var(--lp-wash-strong); border: var(--lp-border-thin) solid var(--lp-stroke-default); border-radius: var(--lp-radius-full); padding: var(--lp-space-8) var(--lp-space-16); margin-bottom: var(--lp-space-12); }
    .auth-verify__hint { font-size: var(--lp-text-sm); color: var(--lp-text-tertiary); line-height: var(--lp-leading-relaxed); margin-bottom: var(--lp-space-24); }
    .auth-verify__resend { width: 100%; height: var(--lp-height-md); margin-bottom: var(--lp-space-8); }
    .auth-verify__resend:disabled { opacity: var(--lp-opacity-disabled); cursor: not-allowed; }
    .auth-verify__back { font-size: var(--lp-text-sm); }

    /* Auth: Forgot password link */
    .auth-forgot-link { text-align: right; margin-top: -4px; }

    /* Team: Member view */
    .team-owner-card { padding: var(--lp-space-12) var(--lp-space-16); border-radius: var(--lp-radius-s); background: var(--lp-bg-base); border: var(--lp-border-thin) solid var(--lp-stroke-default); }
    .team-owner-card__label { font-size: var(--lp-text-sm); color: var(--lp-text-tertiary); margin-bottom: var(--lp-space-4); }
    .team-owner-card__name { font-size: var(--lp-text-base); font-weight: var(--lp-font-medium); color: var(--lp-text-primary); }
    .team-leave-confirm { padding: var(--lp-space-16); border-radius: var(--lp-radius-s); background: var(--lp-wash-strong); border: var(--lp-border-thin) solid var(--lp-stroke-default); margin-top: var(--lp-space-12); }
    .team-leave-confirm__text { font-size: var(--lp-text-base); color: var(--lp-text-secondary); line-height: var(--lp-leading-relaxed); margin-bottom: var(--lp-space-12); }
    .team-leave-confirm__actions { display: flex; gap: var(--lp-space-8); }
    
    .field-error {
      font-size: var(--lp-text-xs);
      color: var(--lp-error);
      margin-top: var(--lp-space-4);
      display: none;
    }
    
    .field-error--visible {
      display: block;
    }

    /* ========================================
       TOUCH TAP TARGETS (mobile only)
       44px minimum for fingers, WCAG 2.5.5 / Apple HIG.
       Desktop keeps the compact sizes above.
       ======================================== */
    @media (max-width: 768px) {
      .icon-btn,
      .search-trigger,
      .modal__close,
      .ns-send-circle,
      .password-toggle-btn {
        min-width: 44px;
        min-height: 44px;
      }

      .btn,
      .btn--sm,
      .ns-hint,
      .ns-mode-addon,
      .nav-item {
        min-height: 44px;
      }

      /* Measured 2026-09-06 with build/consumer-channel-gate.py against both panel
         demos: the workspace switch came out 28px tall and the range chips 33px on
         a normal phone, so the two controls an operator reaches for first were the
         two this list had missed. Both are sized by padding rather than by a box,
         so the height has to bring its own centring. */
      .ws-switch__pill,
      .filter-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* keep the eye toggle inside the password field */
      .input--password > .input {
        padding-right: 48px;
      }
    }