/* ========================================
    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: #8D8E90;
    --lp-text-on-accent: #FFFFFF;
    
    /* 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;
    
    /* Semantic */
    --lp-success: #7DFFD1;
    --lp-warning: #FFB65C;
    --lp-info: #82A5FF;
    --lp-error: #FF6A6A;
    --lp-error-hover: #D45555;
    --lp-error-active: #B84545;
    
    /* 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-xs: 12px;
    --lp-icon-sm: 14px;
    --lp-icon-base: 16px;
    --lp-icon-md: 18px;
    --lp-icon-lg: 20px;
    --lp-icon-xl: 24px;
    --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-1: 4px;
    --lp-size-2: 8px;
    --lp-size-3: 12px;
    --lp-size-4: 16px;
    --lp-size-5: 20px;
    --lp-size-6: 24px;
    --lp-size-8: 32px;
    --lp-size-10: 40px;
    --lp-size-12: 48px;
    
    /* 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: 1.5s;
    --lp-anim-pulse: 2s;
    
    /* Easing — Master v1.4 §9.7 */
    --lp-ease-out: cubic-bezier(0,0,0.2,1);
    --lp-ease-in: cubic-bezier(0.4,0,1,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-agent: #60A5FA;
    --lp-mode-dice: #F472B6;
    
    /* Placeholder Surface — v1.36 */
    --lp-bg-placeholder: #424347;
    
    /* 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: rgba(255,95,184,0.15);
    --lp-overlay-accent-strong: rgba(255,95,184,0.35);
    --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;
    --lp-bg-placeholder: #E0E0E0;
    
    /* Text */
    --lp-text-primary: #1A1A1A;
    --lp-text-secondary: #4A4A4A;
    --lp-text-tertiary: #757575; /* Adjusted for WCAG AA contrast 4.6:1 */
    --lp-text-on-accent: #FFFFFF;
    
    /* 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: #D43D8A;
    --lp-accent-active: #C03078;
    
    /* Status */
    --lp-success: #059669;
    --lp-warning: #D97706;
    --lp-info: #2563EB;
    --lp-error: #DC2626;
    --lp-error-hover: #B91C1C;
    --lp-error-active: #991B1B;
    
    /* 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: rgba(232,74,156,0.1);
    --lp-overlay-accent-strong: rgba(232,74,156,0.25);
    --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) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
    --lp-bg-base: #FFFFFF;
    --lp-bg-surface: #F5F5F5;
    --lp-bg-elevated: #EBEBEB;
    --lp-bg-input: #FFFFFF;
    --lp-text-primary: #1A1A1A;
    --lp-text-secondary: #4A4A4A;
    --lp-text-tertiary: #757575; /* Adjusted for WCAG AA contrast */
    --lp-stroke-default: #D4D4D4;
    --lp-stroke-light: #E5E5E5;
    --lp-accent-base: #E84A9C;
    --lp-accent-hover: #D43D8A;
    --lp-wash-subtle: rgba(0,0,0,0.02);
    --lp-wash-hover: rgba(0,0,0,0.04);
    --lp-shadow-s: 0 1px 3px rgba(0,0,0,0.08);
    --lp-shadow-m: 0 4px 12px rgba(0,0,0,0.1);
    }
}

/* 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 */
@media (prefers-contrast: more) {
    :root {
    --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;
    }
}

/* Force high contrast for light theme */
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
    --lp-bg-base: #FFFFFF;
    --lp-bg-surface: #F0F0F0;
    --lp-text-primary: #000000;
    --lp-stroke-default: #000000;
    }
}

/* 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
    ======================================== */

/* Layout */
.flex-row { display: flex; align-items: center; gap: var(--lp-space-8); }
.flex-col { display: flex; flex-direction: column; gap: var(--lp-space-8); }
.flex-1 { flex: 1; }

/* Spacing */
.mt-4 { margin-top: var(--lp-space-4); }
.mt-8 { margin-top: var(--lp-space-8); }
.mt-12 { margin-top: var(--lp-space-12); }
.mt-16 { margin-top: var(--lp-space-16); }
.mb-4 { margin-bottom: var(--lp-space-4); }
.mb-8 { margin-bottom: var(--lp-space-8); }

/* 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;
}

/* Text */
.text-center { text-align: center; }
.text-muted { color: var(--lp-text-tertiary); }
.text-link { color: var(--lp-text-primary); text-decoration: underline; }

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

/* ========================================
    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: var(--lp-size-8);
    height: var(--lp-height-sm);
    border-radius: var(--lp-radius-full);
    border: var(--lp-border-thick) solid var(--lp-text-secondary);
    flex-shrink: 0;
}

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

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

/* 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;
}

.filter-divider {
    width: 1px;
    height: var(--lp-size-4);
    background: var(--lp-stroke-default);
    margin-right: var(--lp-space-12);
    align-self: center;
    flex-shrink: 0;
}

/* ========================================
    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) var(--lp-space-16) var(--lp-space-12);
    border: var(--lp-border-thin) solid transparent;
    box-shadow: var(--lp-shadow-s);
    display: flex;
    flex-direction: column;
    min-height: 140px;
    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);
}

.card__meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--lp-space-4) var(--lp-space-8);
    border-radius: var(--lp-radius-full);
    font-size: var(--lp-text-xs);
    font-weight: var(--lp-font-medium);
    background: var(--lp-overlay-muted);
    color: var(--lp-text-secondary);
    white-space: nowrap;
}

.card__badge--rose { background: rgba(232,90,156,0.12); color: var(--lp-tag-rose); }
.card__badge--amber { background: rgba(201,162,39,0.12); color: var(--lp-tag-amber); }
.card__badge--lime { background: rgba(61,154,109,0.12); color: var(--lp-tag-lime); }
.card__badge--cyan { background: rgba(74,143,212,0.12); color: var(--lp-tag-cyan); }
.card__badge--violet { background: rgba(155,109,198,0.12); color: var(--lp-tag-violet); }
.card__badge--slate { background: rgba(141,142,144,0.12); color: var(--lp-tag-slate); }

.card__pin {
    width: var(--lp-size-2);
    height: var(--lp-size-2);
    border-radius: var(--lp-radius-full);
    background: var(--lp-accent-base);
    flex-shrink: 0;
}

.card__title {
    font-size: var(--lp-text-lg);
    font-weight: var(--lp-font-semibold);
    margin-top: var(--lp-space-8);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__preview {
    font-size: var(--lp-text-base);
    color: var(--lp-text-secondary);
    margin-top: var(--lp-space-4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__footer {
    margin-top: auto;
    padding-top: var(--lp-space-8);
    border-top: 1px solid var(--lp-stroke-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--lp-space-8);
    font-size: var(--lp-text-sm);
    color: var(--lp-text-secondary);
}

.card__actions {
    display: flex;
    align-items: center;
    gap: var(--lp-space-8);
    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);
}

.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;
    transition: opacity var(--lp-motion-mid) var(--lp-ease-out);
}

.modal-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

/* 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);
    border: none;
    background: none;
    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);
}

/* ========================================
    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;
}

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

.spotlight-item:hover .spotlight-item__badge {
    border-color: var(--lp-stroke-light);
    color: var(--lp-text-secondary);
    transition-duration: var(--lp-motion-instant);
}

/* Line 2: 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;
}

/* Line 3: Collection · Tag */
.spotlight-item__meta {
    display: flex;
    align-items: center;
    gap: var(--lp-space-4);
    font-size: var(--lp-text-xs);
    color: var(--lp-text-tertiary);
}

.spotlight-item__collection {
    cursor: pointer;
    transition: color var(--lp-motion-fast) var(--lp-ease-out);
}

.spotlight-item__collection:hover {
    color: var(--lp-text-secondary);
    text-decoration: underline;
}

.spotlight-item__sep {
    color: var(--lp-text-tertiary);
}

.spotlight-item__tag {
    font-weight: var(--lp-font-medium);
}

/* Tag colors */
.spotlight-item__tag--rose { color: var(--lp-tag-rose); }
.spotlight-item__tag--amber { color: var(--lp-tag-amber); }
.spotlight-item__tag--lime { color: var(--lp-tag-lime); }
.spotlight-item__tag--cyan { color: var(--lp-tag-cyan); }
.spotlight-item__tag--violet { color: var(--lp-tag-violet); }
.spotlight-item__tag--slate { color: var(--lp-tag-slate); }

/* 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;
    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);
}

/* 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); }

/* Empty states */
.spotlight-empty,
.collections-empty {
    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: -7px 0 0 -7px;
    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;
}

/* 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);
}

/* ========================================
    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);
}

/* Mobile: add right padding so bubbles don't touch scrollbar */
@media (max-width: 768px) {
    .session-stream {
    padding-right: var(--lp-space-8);
    }
}

.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-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 {
    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%;
    height: var(--lp-height-md);
    border-radius: var(--lp-radius-m);
    border: none;
    background: var(--lp-bg-surface);
    padding: 0 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;
}

.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="Agent"] { background: var(--lp-mode-agent); }
.ns-mode-pill[data-pill="Dice"] { background: var(--lp-mode-dice); }

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

.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
    ======================================== */

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

.guide-template__text {
    color: var(--lp-text-secondary);
}

.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-bottom: var(--lp-space-16);
}

.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 {
    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,
    .kebab-menu__item:hover,
    .popover__item:hover,
    .ns-mode-option:hover {
    background: inherit;
    border-color: inherit;
    transform: none; /* Prevent bounce on tap */
    }
    
    /* 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: var(--lp-size-12);
    height: var(--lp-size-12);
    border-radius: var(--lp-radius-full);
    border: var(--lp-border-thick) solid var(--lp-text-secondary);
    margin: 0 auto var(--lp-space-16);
}

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

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