/* ==========================================================================
   WORLD Engine v4.0 — Premium Glassmorphism Design System
   Mobile-first, dark-first, inspired by Linear/Vercel/Raycast
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #0a0b14;
  --color-bg-alt: #0f1019;
  --color-surface: rgba(18, 19, 31, 0.8);
  --color-surface-solid: #12131f;
  --color-surface-hover: rgba(28, 30, 52, 0.9);
  --color-surface-secondary: rgba(22, 24, 40, 0.6);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-light: rgba(255, 255, 255, 0.04);
  --color-border-glow: rgba(139, 92, 246, 0.3);

  --color-text: #e8eaed;
  --color-text-secondary: #9ca3b0;
  --color-text-muted: #5c6370;
  --color-text-inverse: #0a0b14;

  --color-primary: #8b5cf6;
  --color-primary-hover: #a78bfa;
  --color-primary-glow: rgba(139, 92, 246, 0.25);
  --color-primary-light: rgba(139, 92, 246, 0.12);
  --color-primary-subtle: rgba(139, 92, 246, 0.06);

  --color-success: #10b981;
  --color-success-light: rgba(16, 185, 129, 0.12);
  --color-warning: #f97316;
  --color-warning-light: rgba(249, 115, 22, 0.12);
  --color-error: #ef4444;
  --color-error-light: rgba(239, 68, 68, 0.12);
  --color-info: #38bdf8;
  --color-info-light: rgba(56, 189, 248, 0.12);

  --glass-bg: rgba(18, 19, 31, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;
  --glass-blur-sm: 12px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.15);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

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

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  --sidebar-width: 240px;
  --header-height: 60px;
  --bottom-nav-height: 64px;
  --max-width-content: 1100px;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-bottom-nav: 150;

  /* Fluid typography scaling */
  --text-fluid-sm: clamp(0.7rem, 1.5vw, 0.8125rem);
  --text-fluid-base: clamp(0.875rem, 2vw, 0.9375rem);
  --text-fluid-lg: clamp(1rem, 2.5vw, 1.0625rem);
  --text-fluid-xl: clamp(1.125rem, 3vw, 1.25rem);
  --text-fluid-2xl: clamp(1.25rem, 4vw, 1.5rem);
  --text-fluid-3xl: clamp(1.5rem, 5vw, 2rem);
}

/* Light Mode */
.light-mode, html.light-mode {
  --color-bg: #f5f6fa;
  --color-bg-alt: #eceef5;
  --color-surface: rgba(255, 255, 255, 0.85);
  --color-surface-solid: #ffffff;
  --color-surface-hover: rgba(240, 242, 250, 0.9);
  --color-surface-secondary: rgba(240, 242, 250, 0.6);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-glow: rgba(108, 92, 231, 0.25);
  --color-text: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-glow: rgba(124, 58, 237, 0.15);
  --color-primary-light: rgba(124, 58, 237, 0.08);
  --color-primary-subtle: rgba(124, 58, 237, 0.04);
  --color-success: #059669;
  --color-success-light: rgba(5, 150, 105, 0.08);
  --color-warning: #ea580c;
  --color-warning-light: rgba(234, 88, 12, 0.08);
  --color-error: #dc2626;
  --color-error-light: rgba(220, 38, 38, 0.08);
  --color-info: #0284c7;
  --color-info-light: rgba(2, 132, 199, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.06);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.08);
}

@media (prefers-color-scheme: light) {
  html:not(.dark-mode):not(.light-mode) {
    --color-bg: #f5f6fa;
    --color-bg-alt: #eceef5;
    --color-surface: rgba(255, 255, 255, 0.85);
    --color-surface-solid: #ffffff;
    --color-surface-hover: rgba(240, 242, 250, 0.9);
    --color-surface-secondary: rgba(240, 242, 250, 0.6);
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-light: rgba(0, 0, 0, 0.04);
    --color-border-glow: rgba(108, 92, 231, 0.25);
    --color-text: #111827;
    --color-text-secondary: #4b5563;
    --color-text-muted: #9ca3af;
    --color-primary: #7c3aed;
    --color-primary-hover: #6d28d9;
    --color-primary-glow: rgba(124, 58, 237, 0.15);
    --color-primary-light: rgba(124, 58, 237, 0.08);
    --color-primary-subtle: rgba(124, 58, 237, 0.04);
    --color-success: #059669;
    --color-success-light: rgba(5, 150, 105, 0.08);
    --color-warning: #ea580c;
    --color-warning-light: rgba(234, 88, 12, 0.08);
    --color-error: #dc2626;
    --color-error-light: rgba(220, 38, 38, 0.08);
    --color-info: #0284c7;
    --color-info-light: rgba(2, 132, 199, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.06);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
    --shadow-glow: 0 0 30px rgba(124, 58, 237, 0.08);
  }
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:var(--text-fluid-base);
  line-height:var(--leading-normal);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  min-height:100dvh;
  transition:background 0.4s ease, color 0.4s ease;
}
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(139,92,246,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(56,189,248,0.04) 0%, transparent 60%);
  pointer-events:none;z-index:-1;
}
.light-mode body::before{opacity:0.3}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-primary-hover)}
a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
img{max-width:100%;height:auto;display:block}
*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
::selection{background:var(--color-primary-glow);color:var(--color-text)}

/* --------------------------------------------------------------------------
   Typography — Fluid + Responsive
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
  font-weight:var(--font-bold);line-height:var(--leading-tight);
  color:var(--color-text);letter-spacing:-0.02em;
}
h1{font-size:var(--text-fluid-3xl)}
h2{font-size:var(--text-fluid-2xl)}
h3{font-size:var(--text-fluid-xl)}
h4{font-size:var(--text-fluid-lg)}
p{color:var(--color-text-secondary);line-height:var(--leading-relaxed)}
p+p{margin-top:var(--space-3)}
small,.text-sm{font-size:var(--text-sm)}
.text-xs{font-size:var(--text-xs)}
.text-muted{color:var(--color-text-muted)}
.text-secondary{color:var(--color-text-secondary)}
.text-primary{color:var(--color-primary)}
.text-center{text-align:center}
.font-mono{font-family:var(--font-mono)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.gradient-text{
  background:linear-gradient(135deg, var(--color-primary), #38bdf8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.app-layout{display:flex;min-height:100vh;min-height:100dvh}

/* --------------------------------------------------------------------------
   Sidebar — Premium Glass + Decorative Accents
   -------------------------------------------------------------------------- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-right:1px solid var(--glass-border);
  display:flex;flex-direction:column;z-index:var(--z-sticky);
  transition:transform var(--transition-slow),background var(--transition-base);
}
.sidebar-header{
  padding:var(--space-5);min-height:var(--header-height);
  display:flex;align-items:center;gap:var(--space-3);
  border-bottom:1px solid var(--color-border);
  position:relative;
}
.sidebar-header::after{
  content:'';position:absolute;bottom:-1px;left:var(--space-5);right:var(--space-5);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--color-primary-glow), transparent);
}
.sidebar-logo{
  width:34px;height:34px;border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--color-primary), #6366f1);
  display:flex;align-items:center;justify-content:center;
  color:white;font-weight:var(--font-bold);font-size:var(--text-sm);flex-shrink:0;
  box-shadow:0 0 20px rgba(139,92,246,0.3);
  position:relative;
}
.sidebar-logo::after{
  content:'';position:absolute;inset:-2px;border-radius:inherit;
  background:linear-gradient(135deg, var(--color-primary), transparent);
  filter:blur(8px);opacity:0.4;z-index:-1;
}
.sidebar-brand{
  font-weight:var(--font-bold);font-size:var(--text-fluid-base);
  color:var(--color-text);white-space:nowrap;letter-spacing:-0.01em;
}
.sidebar-brand-full{display:inline}
.sidebar-brand-short{display:none}
.sidebar-nav{flex:1;padding:var(--space-3);overflow-y:auto}
.sidebar-section{margin-bottom:var(--space-5)}
.sidebar-section-title{
  font-size:10px;font-weight:var(--font-semibold);
  color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.1em;
  padding:0 var(--space-3);margin-bottom:var(--space-2);
}

.nav-item{
  display:flex;align-items:center;gap:var(--space-3);padding:10px var(--space-3);
  border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-sm);
  font-weight:var(--font-medium);transition:all var(--transition-fast);cursor:pointer;
  text-decoration:none;margin-bottom:2px;position:relative;
}
.nav-item:hover{background:var(--color-surface-hover);color:var(--color-text)}
.nav-item.active{
  background:var(--color-primary-light);color:var(--color-primary);font-weight:var(--font-semibold);
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;
  background:var(--color-primary);
}
.nav-item .nav-icon{width:20px;height:20px;flex-shrink:0;opacity:0.7}
.nav-item.active .nav-icon{opacity:1}

.sidebar-footer{padding:var(--space-3);border-top:1px solid var(--color-border)}

.main-content{
  flex:1;margin-left:var(--sidebar-width);min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}

.top-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:rgba(10, 11, 20, 0.7);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--color-border);
  padding:0 var(--space-8);height:var(--header-height);
  display:flex;align-items:center;justify-content:space-between;
}
.light-mode .top-header{background:rgba(245, 246, 250, 0.7)}

.header-left{display:flex;align-items:center;gap:var(--space-4)}
.header-right{display:flex;align-items:center;gap:var(--space-3)}
.header-title{font-size:var(--text-fluid-lg);font-weight:var(--font-bold);color:var(--color-text);letter-spacing:-0.01em}

.page-content{
  flex:1;padding:var(--space-8);max-width:var(--max-width-content);
  width:100%;margin:0 auto;
}

.sidebar-toggle{
  display:none;background:none;border:none;color:var(--color-text);
  cursor:pointer;padding:var(--space-2);border-radius:var(--radius-md);
  transition:background var(--transition-fast);min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.sidebar-toggle:hover{background:var(--color-surface-hover)}
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
  z-index:calc(var(--z-sticky)-1);opacity:0;
  transition:opacity var(--transition-slow);
}

/* --------------------------------------------------------------------------
   Bottom Navigation — Mobile
   -------------------------------------------------------------------------- */
.bottom-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  height:var(--bottom-nav-height);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-top:1px solid var(--glass-border);
  z-index:var(--z-bottom-nav);
  padding:0 var(--space-2);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.light-mode .bottom-nav{background:rgba(255,255,255,0.85)}

.bottom-nav-inner{
  display:flex;align-items:center;justify-content:space-around;
  height:var(--bottom-nav-height);max-width:500px;margin:0 auto;
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  color:var(--color-text-muted);text-decoration:none;font-size:10px;
  font-weight:var(--font-medium);transition:all var(--transition-fast);
  min-width:56px;min-height:44px;cursor:pointer;border:none;background:none;
  font-family:var(--font-sans);position:relative;
}
.bottom-nav-item:hover,.bottom-nav-item:focus{color:var(--color-text-secondary)}
.bottom-nav-item.active{color:var(--color-primary)}
.bottom-nav-item.active svg{filter:drop-shadow(0 0 6px var(--color-primary-glow))}
.bottom-nav-item svg{width:22px;height:22px}

/* --------------------------------------------------------------------------
   Cards — Premium Glass with Hover Lift
   -------------------------------------------------------------------------- */
.card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.card:hover{box-shadow:var(--shadow-md)}
.card-body{padding:var(--space-6)}
.card-header{
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-header:empty{display:none}
.card-footer{
  padding:var(--space-3) var(--space-6);border-top:1px solid var(--color-border);
  background:var(--color-surface-secondary);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* --------------------------------------------------------------------------
   Stats Grid
   -------------------------------------------------------------------------- */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-4);margin-bottom:var(--space-8);
}
.stat-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:var(--space-5);display:flex;
  align-items:flex-start;gap:var(--space-4);
  transition:all var(--transition-base);position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;top:0;right:0;width:100px;height:100px;
  border-radius:50%;filter:blur(40px);opacity:0.15;pointer-events:none;
}
.stat-card:hover{
  box-shadow:var(--shadow-lg);transform:translateY(-2px);
  border-color:var(--color-border-glow);
}
.stat-icon{
  width:48px;height:48px;border-radius:var(--radius-md);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem;
  position:relative;
}
.stat-icon::before{
  content:'';position:absolute;inset:-4px;border-radius:inherit;
  background:inherit;filter:blur(12px);opacity:0.4;
}
.stat-icon.primary{background:var(--color-primary-light);color:var(--color-primary)}
.stat-icon.success{background:var(--color-success-light);color:var(--color-success)}
.stat-icon.warning{background:var(--color-warning-light);color:var(--color-warning)}
.stat-icon.info{background:var(--color-info-light);color:var(--color-info)}
.stat-value{
  font-size:var(--text-fluid-2xl);font-weight:var(--font-bold);color:var(--color-text);
  line-height:1;margin-bottom:var(--space-1);
}
.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}

/* --------------------------------------------------------------------------
   Buttons — Premium with Haptic Feedback
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:var(--font-semibold);line-height:1.4;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  transition:all var(--transition-fast);text-decoration:none;white-space:nowrap;
  user-select:none;min-height:40px;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn:active{transform:scale(0.97)}

.btn-primary{
  background:linear-gradient(135deg, var(--color-primary), #6366f1);
  color:white;border:none;
  box-shadow:0 2px 12px var(--color-primary-glow);
}
.btn-primary:hover{
  background:linear-gradient(135deg, var(--color-primary-hover), #818cf8);
  box-shadow:0 4px 20px var(--color-primary-glow);color:white;
  transform:translateY(-1px);
}

.btn-secondary{
  background:var(--color-surface);color:var(--color-text);border-color:var(--color-border);
  backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  background:var(--color-surface-hover);border-color:var(--color-text-muted);
  color:var(--color-text);
}

.btn-success{background:var(--color-success);color:white;border:none}
.btn-success:hover{filter:brightness(1.1);color:white;box-shadow:0 4px 16px rgba(16,185,129,0.3)}

.btn-error{background:var(--color-error);color:white;border:none}
.btn-error:hover{filter:brightness(1.1);color:white;box-shadow:0 4px 16px rgba(239,68,68,0.3)}

.btn-warning{background:var(--color-warning);color:white;border:none}
.btn-warning:hover{filter:brightness(1.1);color:white;box-shadow:0 4px 16px rgba(249,115,22,0.3)}

.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:transparent}
.btn-ghost:hover{background:var(--color-surface-hover);color:var(--color-text)}

.btn-sm{min-height:44px;padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}
.btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--text-fluid-base);min-height:48px}
.btn-icon{padding:var(--space-2);min-height:44px;min-width:44px}
.flex-1{flex:1}
.w-full{width:100%}

/* Form action buttons row — stacks on mobile */
.form-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.form-actions .flex-1-spacer{flex:1}
@media (max-width: 600px){.form-actions .flex-1-spacer{display:none}}

/* Modal footer form — fills width on mobile */
.modal-footer-form{display:flex;flex:1}
.modal-footer-form .btn{width:100%}

/* Help toggle — larger touch target */
.btn-help{min-height:44px;min-width:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-sm)}
.btn-label-full{display:inline}
.btn-label-short{display:none}

/* --------------------------------------------------------------------------
   Forms — Clean, Touch-friendly Inputs
   -------------------------------------------------------------------------- */
.form-group{margin-bottom:var(--space-5)}
.form-label{
  display:block;font-size:var(--text-sm);font-weight:var(--font-medium);
  color:var(--color-text);margin-bottom:var(--space-2);
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:12px var(--space-4);
  font-family:var(--font-sans);font-size:16px;color:var(--color-text);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  transition:all var(--transition-fast);min-height:44px;
  backdrop-filter:blur(8px);
  -webkit-appearance:none;appearance:none;
}
.form-input:hover,.form-select:hover,.form-textarea:hover{
  border-color:var(--color-text-muted);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-glow);
}
.form-textarea{min-height:110px;resize:vertical;line-height:var(--leading-relaxed)}
.form-input.error,.form-textarea.error{
  border-color:var(--color-error);
  box-shadow:0 0 0 3px var(--color-error-light);
}
.form-hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.form-error{font-size:var(--text-xs);color:var(--color-error);margin-top:var(--space-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}
.row{max-width:800px;margin:0 auto}

/* --------------------------------------------------------------------------
   Flash Messages — Slide-in Glass Toast
   -------------------------------------------------------------------------- */
.flash-messages{
  position:fixed;top:calc(var(--header-height) + var(--space-4));
  right:var(--space-4);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--space-3);
  max-width:420px;pointer-events:none;
}
.flash-message{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);
  font-size:var(--text-sm);font-weight:var(--font-medium);
  animation:slideIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:all;max-width:100%;
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-lg);
}
.flash-message.success{
  background:rgba(16,185,129,0.15);color:var(--color-success);
  border:1px solid rgba(16,185,129,0.3);
}
.flash-message.error{
  background:rgba(239,68,68,0.15);color:var(--color-error);
  border:1px solid rgba(239,68,68,0.3);
}
.flash-message.info{
  background:rgba(56,189,248,0.15);color:var(--color-info);
  border:1px solid rgba(56,189,248,0.3);
}
.flash-message.warning{
  background:rgba(249,115,22,0.15);color:var(--color-warning);
  border:1px solid rgba(249,115,22,0.3);
}
.flash-close{
  background:none;border:none;color:inherit;cursor:pointer;opacity:0.6;
  flex-shrink:0;padding:4px;border-radius:var(--radius-sm);
  min-width:24px;min-height:24px;display:flex;align-items:center;justify-content:center;
}
.flash-close:hover{opacity:1}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}

/* --------------------------------------------------------------------------
   Character Grid — Responsive Cards
   -------------------------------------------------------------------------- */
.section-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3);
}
.section-title{font-size:var(--text-fluid-xl);margin:0}
.section-subtitle{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:4px}
.toolbar{display:flex;gap:var(--space-2)}

.character-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--space-5);
}
.character-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition-base);
  animation:fadeUp 0.5s ease-out both;
  position:relative;
}
.character-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--color-primary), #38bdf8);
  opacity:0;transition:opacity var(--transition-base);z-index:1;
}
.character-card:hover{
  box-shadow:var(--shadow-lg), var(--shadow-glow);
  transform:translateY(-4px);border-color:var(--color-border-glow);
}
.character-card:hover::before{opacity:1}

.character-card-header{
  padding:var(--space-5);display:flex;align-items:center;gap:var(--space-4);
  border-bottom:1px solid var(--color-border-light);
}
.character-avatar{
  width:50px;height:50px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--color-primary-light), rgba(56,189,248,0.12));
  color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);
  font-size:var(--text-lg);flex-shrink:0;
  border:1px solid var(--color-border-glow);
}
.character-meta{flex:1;min-width:0}
.character-name{font-weight:var(--font-bold);color:var(--color-text);font-size:var(--text-fluid-base);margin-bottom:3px}
.character-subtitle{font-size:var(--text-xs);color:var(--color-text-muted)}
.character-card-body{padding:var(--space-4) var(--space-5)}
.character-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.character-stat{text-align:center;padding:var(--space-2)}
.character-stat-value{
  font-size:var(--text-fluid-lg);font-weight:var(--font-bold);color:var(--color-text);line-height:1;
}
.character-stat-label{font-size:10px;color:var(--color-text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.05em}
.character-card-actions{
  display:flex;gap:var(--space-2);padding:var(--space-4) var(--space-5);
  border-top:1px solid var(--color-border-light);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.character-card:nth-child(1){animation-delay:0s}
.character-card:nth-child(2){animation-delay:0.06s}
.character-card:nth-child(3){animation-delay:0.12s}
.character-card:nth-child(4){animation-delay:0.18s}
.character-card:nth-child(5){animation-delay:0.24s}
.character-card:nth-child(6){animation-delay:0.3s}

/* --------------------------------------------------------------------------
   Empty State — Centered, Beautiful
   -------------------------------------------------------------------------- */
.empty-state{text-align:center;padding:var(--space-16) var(--space-8)}
.empty-state-icon{font-size:4rem;margin-bottom:var(--space-4);line-height:1}
.empty-state-title{font-size:var(--text-fluid-2xl);margin-bottom:var(--space-3);letter-spacing:-0.02em}
.empty-state-text{color:var(--color-text-secondary);max-width:480px;margin:0 auto var(--space-6);line-height:var(--leading-relaxed)}

.empty-state-modern{
  text-align:center;padding:var(--space-12);
  border:2px dashed var(--color-border);border-radius:var(--radius-xl);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
}
.empty-state-modern .empty-icon{font-size:3.5rem;margin-bottom:var(--space-4);line-height:1}
.empty-state-modern h3{font-size:var(--text-fluid-xl);margin-bottom:var(--space-2)}
.empty-state-modern p{color:var(--color-text-secondary);margin-bottom:var(--space-5)}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;padding:3px 10px;font-size:var(--text-xs);
  font-weight:var(--font-semibold);border-radius:var(--radius-full);line-height:1.4;
}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}
.badge-success{background:var(--color-success-light);color:var(--color-success)}
.badge-warning{background:var(--color-warning-light);color:var(--color-warning)}
.badge-error{background:var(--color-error-light);color:var(--color-error)}

/* --------------------------------------------------------------------------
   Profile Header — Hero Card
   -------------------------------------------------------------------------- */
.profile-header{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);overflow:hidden;margin-bottom:var(--space-6);
}
.profile-header-bg{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(139,92,246,0.15), rgba(56,189,248,0.08) 50%, transparent 80%);
  pointer-events:none;
}
.light-mode .profile-header-bg{
  background:linear-gradient(135deg, rgba(139,92,246,0.08), rgba(56,189,248,0.05) 50%, transparent 80%);
}
.profile-header-content{
  position:relative;padding:var(--space-6);display:flex;align-items:center;
  gap:var(--space-5);flex-wrap:wrap;
}
.profile-avatar-wrap{position:relative;flex-shrink:0}
.profile-avatar{
  width:clamp(48px, 6vw, 80px);height:clamp(48px, 6vw, 80px);border-radius:var(--radius-xl);
  background:linear-gradient(135deg, var(--color-primary), #6366f1);
  color:white;
  display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);
  font-size:clamp(1.25rem, 3vw, var(--text-fluid-3xl));
  box-shadow:0 0 30px var(--color-primary-glow);
}
.profile-status-dot{
  position:absolute;bottom:2px;right:2px;width:clamp(10px,1.5vw,16px);height:clamp(10px,1.5vw,16px);
  border-radius:50%;background:var(--color-success);
  border:clamp(2px,0.3vw,3px) solid var(--color-surface-solid);
  box-shadow:0 0 8px rgba(16,185,129,0.4);
}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:var(--text-fluid-2xl);font-weight:var(--font-bold);margin-bottom:var(--space-2);letter-spacing:-0.02em;line-height:1.2;word-break:break-word}
@media (min-width: 768px) {
  .profile-name{font-size:var(--text-fluid-3xl);margin-bottom:var(--space-3)}
}
.profile-stats-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.profile-stat{display:flex;align-items:baseline;gap:var(--space-1)}
.profile-stat-num{font-size:var(--text-fluid-base);font-weight:var(--font-bold);color:var(--color-text)}
.profile-stat-lbl{font-size:var(--text-xs);color:var(--color-text-muted)}
.profile-stat-divider{width:1px;height:clamp(12px,2vh,20px);background:var(--color-border);flex-shrink:0}
.profile-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.profile-sim-btn,.profile-edit-btn{min-height:44px}

/* --------------------------------------------------------------------------
   Tabs — Sticky, Scrollable
   -------------------------------------------------------------------------- */
.profile-tabs-wrap{
  position:sticky;top:var(--header-height);z-index:calc(var(--z-sticky)-1);
  background:rgba(10,11,20,0.8);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-bottom:1px solid var(--color-border);
  margin-bottom:var(--space-6);
  transition:box-shadow var(--transition-fast);
  /* Scroll fade hint */
  position:relative;
}
.profile-tabs-wrap::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:32px;
  background:linear-gradient(90deg, transparent, rgba(10,11,20,0.8));
  pointer-events:none;z-index:1;
}
.light-mode .profile-tabs-wrap{background:rgba(245,246,250,0.8)}
.profile-tabs-wrap.ptabs-stuck{box-shadow:var(--shadow-md)}
.profile-tabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  padding:0 var(--space-1);
}
.profile-tabs::-webkit-scrollbar{display:none}
.ptab{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-muted);
  background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  transition:all var(--transition-fast);white-space:nowrap;font-family:var(--font-sans);
  min-height:44px;
}
.ptab:hover{color:var(--color-text-secondary)}
.ptab.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:var(--font-semibold)}
.ptab-badge{
  background:var(--color-primary-light);color:var(--color-primary);
  padding:2px 8px;border-radius:var(--radius-full);
  font-size:10px;font-weight:var(--font-bold);line-height:1.3;
}

.ptab-content{display:none}
.ptab-content.active{display:block;animation:fadeIn 0.3s ease-out}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* --------------------------------------------------------------------------
   Info Cards — Expandable Sections
   -------------------------------------------------------------------------- */
.info-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);margin-bottom:var(--space-4);overflow:hidden;
}
.info-card-header{
  display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);
  background:var(--color-surface-secondary);
  font-size:var(--text-sm);font-weight:var(--font-semibold);
  color:var(--color-text);border-bottom:1px solid var(--color-border-light);
}
.info-card-header svg{color:var(--color-primary);flex-shrink:0}
.info-card-body{padding:var(--space-4)}
@media (min-width: 768px) {
  .info-card-body{padding:var(--space-5)}
}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}
.info-field{display:flex;flex-direction:column;gap:3px}
.info-label{
  font-size:10px;color:var(--color-text-muted);font-weight:var(--font-semibold);
  text-transform:uppercase;letter-spacing:0.06em;
}
.info-value{font-size:var(--text-sm);color:var(--color-text);line-height:1.5}
.info-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.tag{
  display:inline-block;padding:4px 12px;font-size:var(--text-xs);
  background:var(--color-surface-hover);color:var(--color-text-secondary);
  border-radius:var(--radius-full);font-weight:var(--font-medium);
  border:1px solid var(--color-border);
}
.tag-lg{padding:6px 14px;font-size:var(--text-sm)}
.info-notes-text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7}

/* --------------------------------------------------------------------------
   Tab Section Headers
   -------------------------------------------------------------------------- */
.tab-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.tab-section-title{font-size:var(--text-fluid-lg);font-weight:var(--font-bold)}
.tab-section-sub{font-size:var(--text-sm);color:var(--color-text-muted)}

/* --------------------------------------------------------------------------
   Memories List
   -------------------------------------------------------------------------- */
.mem-list{display:flex;flex-direction:column;gap:var(--space-3)}
.mem-item{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:var(--space-3);display:flex;gap:var(--space-3);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
@media (min-width: 768px) {
  .mem-item{padding:var(--space-4);gap:var(--space-4)}
}
.mem-item:hover{border-color:var(--color-border-glow);box-shadow:var(--shadow-sm)}
.mem-item-left{flex-shrink:0}
.mem-icon{
  width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--color-primary-light);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);
  font-weight:var(--font-bold);
}
.mem-item-body{flex:1;min-width:0}
.mem-item-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-1);gap:var(--space-2);flex-wrap:wrap}
.mem-type{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text)}
.mem-meta{display:flex;align-items:center;gap:var(--space-2)}
.mem-importance{
  font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-primary);
  padding:2px 8px;background:var(--color-primary-light);border-radius:var(--radius-full);
}
.mem-date{font-size:var(--text-xs);color:var(--color-text-muted)}
.mem-text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-2)}
.mem-people{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-bottom:var(--space-1)}
.mem-person{
  font-size:var(--text-xs);padding:2px 8px;background:var(--color-info-light);
  color:var(--color-info);border-radius:var(--radius-full);font-weight:var(--font-medium);
}
.mem-tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}

/* --------------------------------------------------------------------------
   Goals List
   -------------------------------------------------------------------------- */
.goal-list{display:flex;flex-direction:column;gap:var(--space-3)}
.goal-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);padding:var(--space-5);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.goal-card:hover{border-color:var(--color-border-glow)}
.goal-hd{margin-bottom:var(--space-3)}
.goal-title-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.goal-title{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text)}
.goal-status{
  font-size:var(--text-xs);padding:3px 10px;border-radius:var(--radius-full);
  font-weight:var(--font-semibold);
}
.goal-status-active{background:var(--color-success-light);color:var(--color-success)}
.goal-status-completed{background:var(--color-primary-light);color:var(--color-primary)}
.goal-status-paused{background:var(--color-warning-light);color:var(--color-warning)}
.goal-status-not_started{background:var(--color-surface-hover);color:var(--color-text-muted)}
.goal-status-abandoned{background:var(--color-error-light);color:var(--color-error)}
.goal-bar-wrap{margin-top:var(--space-3)}
.goal-bar{
  height:6px;background:var(--color-surface-hover);
  border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2);
}
.goal-bar-fill{height:100%;border-radius:var(--radius-full);transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1)}
.goal-bar-fill.goal-done{background:linear-gradient(90deg, var(--color-primary), #a78bfa)}
.goal-bar-fill.goal-good{background:linear-gradient(90deg, var(--color-success), #34d399)}
.goal-bar-fill.goal-ok{background:linear-gradient(90deg, var(--color-warning), #fb923c)}
.goal-bar-fill.goal-start{background:linear-gradient(90deg, var(--color-error), #f87171)}
.goal-bar-info{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted)}

/* --------------------------------------------------------------------------
   Relationships Grid
   -------------------------------------------------------------------------- */
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3)}
.rel-card{
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rel-card:hover{border-color:var(--color-border-glow);box-shadow:var(--shadow-sm)}
.rel-avatar{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:var(--color-info-light);color:var(--color-info);
  display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);
  font-weight:var(--font-bold);flex-shrink:0;
}
.rel-info{flex:1;min-width:0}
.rel-name{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text);display:block;margin-bottom:var(--space-1)}
.rel-metrics{display:flex;flex-direction:column;gap:3px}
.rel-metric{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs)}
.rel-metric-lbl{color:var(--color-text-muted);min-width:45px}
.rel-metric-bar{
  flex:1;height:4px;background:var(--color-surface-hover);
  border-radius:var(--radius-full);overflow:hidden;max-width:100px;
}
.rel-metric-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg, var(--color-primary), #a78bfa);transition:width 0.6s ease}
.rel-metric-val{color:var(--color-text-muted);min-width:24px;text-align:right}
.rel-trend{font-size:var(--text-xs);padding:2px 8px;border-radius:var(--radius-full);font-weight:var(--font-semibold)}
.rel-trend-improving{background:var(--color-success-light);color:var(--color-success)}
.rel-trend-stable{background:var(--color-surface-hover);color:var(--color-text-muted)}
.rel-trend-declining{background:var(--color-error-light);color:var(--color-error)}

/* Sim status indicator for mobile */
.sim-status-indicator{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);color:var(--color-text-muted);
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  background:var(--color-surface-hover);
}
.sim-status-indicator .sim-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--color-success);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}

/* --------------------------------------------------------------------------
   Content List
   -------------------------------------------------------------------------- */
.content-list{display:flex;flex-direction:column;gap:var(--space-2)}
.content-item{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);text-decoration:none;
  transition:all var(--transition-fast);
  min-height:48px;
}
.content-item:hover{border-color:var(--color-border-glow);background:var(--color-primary-subtle)}
.content-item-icon{color:var(--color-text-muted);flex-shrink:0;display:flex}
.content-item-info{flex:1;min-width:0}
.content-item-name{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text)}
.content-item-date{font-size:var(--text-xs);color:var(--color-text-muted)}
.content-item-arrow{color:var(--color-text-muted);flex-shrink:0;transition:transform var(--transition-fast)}
.content-item:hover .content-item-arrow{transform:translateX(3px);color:var(--color-primary)}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb{
  display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);
  color:var(--color-text-muted);margin-bottom:var(--space-6);flex-wrap:wrap;
}
.breadcrumb a{color:var(--color-text-secondary)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb .separator{color:var(--color-text-muted)}
.breadcrumb [aria-current=page]{color:var(--color-text);font-weight:var(--font-medium)}

/* --------------------------------------------------------------------------
   Content Viewer — Beautiful Reading Experience
   -------------------------------------------------------------------------- */
.content-viewer{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);overflow:hidden;
}
.content-viewer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);
  background:var(--color-surface-secondary);flex-wrap:wrap;gap:var(--space-3);
}
.content-viewer-body{
  padding:var(--space-8);font-family:var(--font-serif);
  font-size:var(--text-fluid-lg);line-height:1.9;color:var(--color-text-secondary);
  white-space:pre-wrap;max-width:75ch;
}

/* --------------------------------------------------------------------------
   Instagram Prompts — Card-based
   -------------------------------------------------------------------------- */
.ig-section{
  margin-top:var(--space-8);border-top:1px solid var(--color-border);padding-top:var(--space-8);
}
.ig-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.ig-title{font-size:var(--text-fluid-lg);font-weight:var(--font-bold)}
.ig-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}

.ig-prompt-grid{display:flex;flex-direction:column;gap:var(--space-4)}
.ig-prompt-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:box-shadow var(--transition-base), border-color var(--transition-base);
}
.ig-prompt-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-glow)}
.ig-prompt-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-5);background:var(--color-surface-secondary);
  border-bottom:1px solid var(--color-border-light);flex-wrap:wrap;gap:var(--space-2);
}
.ig-prompt-number{
  font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text);
  display:flex;align-items:center;gap:var(--space-2);
}
.ig-prompt-number .ig-num{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary), #6366f1);
  color:white;display:flex;align-items:center;justify-content:center;
  font-size:var(--text-xs);font-weight:var(--font-bold);
}
.ig-prompt-actions{display:flex;gap:var(--space-1);flex-wrap:wrap}
.ig-prompt-body{padding:var(--space-5)}
.ig-prompt-text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7;white-space:pre-wrap}
.ig-prompt-textarea{
  width:100%;min-height:90px;padding:var(--space-3) var(--space-4);
  font-family:var(--font-sans);font-size:16px;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);line-height:1.7;resize:vertical;
}
.ig-prompt-textarea:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-glow);
}
.ig-prompt-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-5);border-top:1px solid var(--color-border-light);
  font-size:var(--text-xs);color:var(--color-text-muted);
}
.ig-prompt-footer .ig-char-count{color:var(--color-text-muted)}
.ig-media-preview{
  margin-top:var(--space-3);padding:var(--space-3);
  background:var(--color-surface-hover);
  border-radius:var(--radius-md);display:flex;align-items:center;
  gap:var(--space-3);flex-wrap:wrap;
}
.ig-media-thumb{max-width:120px;max-height:80px;border-radius:var(--radius-sm);object-fit:cover}
.ig-media-actions{display:flex;gap:var(--space-2)}
.ig-loading{text-align:center;padding:var(--space-8);color:var(--color-text-muted)}
.ig-loading .spinner{margin:0 auto var(--space-3)}

/* --------------------------------------------------------------------------
   Modals — Bottom Sheet on Mobile
   -------------------------------------------------------------------------- */
.modal-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);
  z-index:var(--z-modal-backdrop);align-items:center;justify-content:center;
  padding:var(--space-4);
}
.modal-backdrop.open{display:flex}
.modal{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;
  animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(0.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);
}
.modal-title{font-size:var(--text-fluid-lg);font-weight:var(--font-bold)}
.modal-body{padding:var(--space-5) var(--space-6)}
.modal-footer{
  display:flex;justify-content:flex-end;gap:var(--space-3);
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table-container{
  overflow-x:auto;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));
}
table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
thead th{
  background:var(--color-surface-secondary);padding:var(--space-3) var(--space-4);
  text-align:left;font-weight:var(--font-semibold);color:var(--color-text-muted);
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0.06em;
  border-bottom:1px solid var(--color-border);white-space:nowrap;
}
tbody td{
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-light);
  color:var(--color-text-secondary);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--color-surface-hover)}

/* --------------------------------------------------------------------------
   Spinner / Loading
   -------------------------------------------------------------------------- */
.spinner{
  display:inline-block;width:20px;height:20px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;
  animation:spin 0.6s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

.skeleton{
  background:linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-surface-secondary) 50%, var(--color-surface-hover) 75%);
  background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.hidden{display:none!important}

/* --------------------------------------------------------------------------
   Bottom Action Bar (for character detail on mobile)
   -------------------------------------------------------------------------- */
.bottom-action-bar {
  position: fixed;
  bottom: var(--bottom-nav-height, 0);
  left: 0; right: 0;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-3));
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  z-index: calc(var(--z-bottom-nav) - 1);
  gap: var(--space-3);
  display: none;
}
@media (min-width: 769px) {
  .bottom-action-bar { display: none; }
}
@media (max-width: 768px) {
  .bottom-action-bar { display: flex; }
}

/* ==========================================================================
   RESPONSIVE — Mobile First Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Instagram Integration — Timeline, Posts, Accounts
   -------------------------------------------------------------------------- */
/* Timeline Header */
.ig-timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3)}
.ig-timeline-title{font-size:var(--text-fluid-2xl);font-weight:var(--font-bold)}
.ig-timeline-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}

/* Timeline Grid */
.ig-timeline-grid{display:flex;flex-direction:column;gap:var(--space-4)}

/* Timeline Card — Day card */
.ig-timeline-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition-base);
}
.ig-timeline-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-glow)}
.ig-timeline-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-5);background:var(--color-surface-secondary);
  border-bottom:1px solid var(--color-border-light);flex-wrap:wrap;gap:var(--space-2);
}
.ig-timeline-date{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-bold);color:var(--color-text)}
.ig-timeline-date svg{color:var(--color-primary)}
.ig-date-text{font-size:var(--text-fluid-base)}
.ig-timeline-summary{
  padding:var(--space-3) var(--space-5);font-size:var(--text-sm);
  color:var(--color-text-secondary);line-height:1.6;
}
.ig-timeline-card-actions{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-border-light);flex-wrap:wrap;
}

/* Posts Page */
.ig-posts-page{max-width:var(--max-width-content)}
.ig-posts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3)}
.ig-posts-title{font-size:var(--text-fluid-2xl);font-weight:var(--font-bold)}
.ig-posts-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
.ig-posts-actions{display:flex;gap:var(--space-2)}
.ig-posts-grid{display:flex;flex-direction:column;gap:var(--space-5)}

/* No Account Notice */
.ig-no-account-notice{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4);margin-bottom:var(--space-5);
  background:var(--color-warning-light);border:1px solid rgba(249,115,22,0.2);
  border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-warning);
}
.ig-no-account-notice a{color:var(--color-warning);text-decoration:underline}

/* Post Card */
.post-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition-base);
}
.post-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-glow)}
.post-card-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-5);background:var(--color-surface-secondary);
  border-bottom:1px solid var(--color-border-light);flex-wrap:wrap;gap:var(--space-2);
}
.post-card-number{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text)}
.post-card-title{font-weight:var(--font-semibold)}
.post-card-status{display:flex;gap:var(--space-1)}
.post-card-body{padding:var(--space-5)}
.post-card-text{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7;white-space:pre-wrap}

/* Post Media Preview */
.post-media-preview{
  margin-top:var(--space-3);border-radius:var(--radius-md);overflow:hidden;
  background:var(--color-surface-hover);
}
.post-media-thumb{
  width:100%;max-height:400px;object-fit:cover;display:block;
}

/* Post Actions Row */
.post-actions,.post-card-actions{
  display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-border-light);flex-wrap:wrap;
}
.post-card-actions .btn{flex:1;justify-content:center}
.post-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-5);border-top:1px solid var(--color-border-light);
  font-size:var(--text-xs);color:var(--color-text-muted);
}

/* Post to IG Section */
.post-ig-section{padding:0 var(--space-5) var(--space-5)}
.post-ig-divider{border-top:1px solid var(--color-border);margin-bottom:var(--space-3)}
.post-ig-row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}

/* Schedule Picker */
.schedule-picker{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.schedule-picker .form-input{max-width:220px}
.schedule-picker input[type="datetime-local"]{
  color-scheme:dark;
}
.light-mode .schedule-picker input[type="datetime-local"],
html:not(.dark-mode) .schedule-picker input[type="datetime-local"]{
  color-scheme:light;
}

/* Accounts Page */
.ig-accounts-page{max-width:var(--max-width-content)}
.ig-accounts-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6);flex-wrap:wrap;gap:var(--space-3)}
.ig-accounts-title{font-size:var(--text-fluid-2xl);font-weight:var(--font-bold)}
.ig-accounts-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
.ig-accounts-grid{display:flex;flex-direction:column;gap:var(--space-4)}
.ig-add-form{max-width:100%}

/* Account Card */
.account-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur-sm));-webkit-backdrop-filter:blur(var(--glass-blur-sm));
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;
  transition:all var(--transition-base);
}
.account-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-glow)}
.account-card-header{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);background:var(--color-surface-secondary);
  border-bottom:1px solid var(--color-border-light);
}
.account-avatar{
  width:44px;height:44px;border-radius:var(--radius-md);
  background:linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;
}
.account-info{flex:1;min-width:0}
.account-name{display:block;font-weight:var(--font-bold);color:var(--color-text);font-size:var(--text-fluid-base)}
.account-display{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Account Status Badges */
.account-status{
  font-size:var(--text-xs);padding:3px 10px;border-radius:var(--radius-full);
  font-weight:var(--font-semibold);flex-shrink:0;
}
.account-status-active{background:var(--color-success-light);color:var(--color-success)}
.account-status-expired{background:var(--color-error-light);color:var(--color-error)}
.account-status-inactive{background:var(--color-surface-hover);color:var(--color-text-muted)}

.account-card-body{
  padding:var(--space-3) var(--space-5);
}
.account-detail{
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--space-1) 0;font-size:var(--text-sm);
}
.account-detail-label{color:var(--color-text-muted)}
.account-detail-value{color:var(--color-text);font-weight:var(--font-medium)}
.account-card-actions{
  display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--color-border-light);flex-wrap:wrap;align-items:center;
}

/* IG Assign Section */
.ig-assign-form{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}

/* Responsive — Instagram */
@media (max-width: 480px) {
  .ig-timeline-card-header{flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-3)}
  .ig-timeline-card-actions{flex-direction:column}
  .ig-timeline-card-actions .btn{width:100%;justify-content:center}
  .ig-timeline-summary{padding:var(--space-2) var(--space-3)}
  .post-card-header{flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .post-card-body{padding:var(--space-3)}
  .post-card-actions{padding:var(--space-2) var(--space-3);gap:var(--space-1)}
  .post-card-actions .btn{min-height:44px;padding:var(--space-1) var(--space-2);font-size:var(--text-xs)}
  .post-card-footer{flex-direction:column;align-items:flex-start;gap:var(--space-1);padding:var(--space-2) var(--space-3)}
  .post-ig-row{flex-direction:column;align-items:stretch}
  .post-ig-row .btn{width:100%}
  .schedule-picker{width:100%}
  .schedule-picker .form-input{flex:1;max-width:100%}
  .account-card-header{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3)}
  .account-card-body{padding:var(--space-2) var(--space-3)}
  .account-card-actions{flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .account-card-actions form{width:100%}
  .account-card-actions .btn{width:100%}
  .ig-add-form .form-row{grid-template-columns:1fr}
  .ig-assign-form{flex-direction:column;align-items:stretch}
  .ig-assign-form .form-select{max-width:100%}
  .ig-assign-form .btn{width:100%}
}

@media (min-width: 481px) and (max-width: 768px) {
  .ig-timeline-card-actions{flex-wrap:wrap}
  .post-card-actions{flex-wrap:wrap}
  .account-card-actions{flex-wrap:wrap}
}

/* All phones ≤ 480px — tab icon-only, bigger touch targets, stacked layouts */
@media (max-width: 480px) {
  /* Tabs: hide labels, keep icons */
  .ptab .ptab-label { display: none; }
  .ptab svg { width: 18px; height: 18px; }
  .ptab { padding: var(--space-2) var(--space-3); }

  /* Profile header: bigger avatar, 2×2 stat grid */
  .profile-header-content {
    padding: var(--space-4);
    flex-direction: column;
    text-align: center;
    gap: var(--space-4);
  }
  .profile-avatar { width: 72px; height: 72px; font-size: var(--text-fluid-2xl); }
  .profile-status-dot { width: 14px; height: 14px; bottom: 2px; right: 2px; }
  .profile-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    justify-items: center;
  }
  .profile-stat-divider { display: none; }
  .profile-stat { flex-direction: column; align-items: center; gap: 2px; }
  .profile-actions { justify-content: center; width: 100%; }
  .profile-actions .btn { flex: 1; min-height: 44px; }

  /* Memory items: bigger icon, stacked header / meta */
  .mem-item { padding: var(--space-4); gap: var(--space-4); }
  .mem-icon { width: 48px; height: 48px; font-size: var(--text-sm); }
  .mem-item-hd { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .mem-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }

  /* Goal cards: more breathing room */
  .goal-card { padding: var(--space-5); }
  .goal-bar-info { flex-direction: column; gap: var(--space-1); align-items: flex-start; }

  /* Relationship cards: stack everything */
  .rel-card { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .rel-metrics { flex-direction: column; }
  .rel-metric { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rel-metric-bar { max-width: 100%; width: 100%; }

  /* Content items: bigger touch targets */
  .content-item { padding: var(--space-4); min-height: 52px; }

  /* Bottom action bar: tighter spacing, larger buttons */
  .bottom-action-bar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
  .bottom-action-bar .btn { flex: 1; justify-content: center; min-height: 48px; font-size: var(--text-xs); }

  /* Empty state: bigger icons, more spacing */
  .empty-state-modern { padding: var(--space-10) var(--space-4); }
  .empty-state-modern .empty-icon { font-size: 4rem; margin-bottom: var(--space-5); }
  .empty-state-modern h3 { font-size: var(--text-fluid-lg); }
  .empty-state-modern p { font-size: var(--text-sm); }

  /* Form actions: stack buttons full-width */
  .form-actions .btn { flex: 1; justify-content: center; }
  .modal-footer { flex-direction: column; }
  .modal-footer .btn { width: 100%; justify-content: center; }
  .empty-state-actions { flex-direction: column; align-items: center; }
  .empty-state-actions .btn { width: 100%; justify-content: center; }
}

/* Very Small Phones (< 400px) */
@media (max-width: 400px) {
  :root{--header-height:48px;--bottom-nav-height:56px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:var(--space-2)}
  .stat-card{padding:var(--space-3);gap:var(--space-3)}
  .stat-icon{width:40px;height:40px}
  .stat-value{font-size:var(--text-fluid-xl)}
  .stat-label{font-size:10px}
  .page-content{padding:var(--space-3)}
  .top-header{padding:0 var(--space-3)}
  .profile-header-content{padding:var(--space-3);flex-direction:column;text-align:center}
  .profile-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);justify-items:center}
  .profile-stat-divider{display:none}
  .profile-stat{flex-direction:column;align-items:center;gap:2px}
  .profile-actions{justify-content:center;width:100%}
  .profile-actions .btn{flex:1;min-height:44px}
  .profile-name{font-size:var(--text-fluid-xl)}
  .profile-avatar{width:56px;height:56px;font-size:var(--text-fluid-xl)}
  .character-card{padding:0}
  .character-card-header{padding:var(--space-3)}
  .character-card-body{padding:var(--space-2) var(--space-3)}
  .character-card-actions{padding:var(--space-2) var(--space-3);flex-direction:column}
  .character-card-actions .btn{flex:1;justify-content:center;min-height:44px}
  .character-card-actions form{width:100%}
  .character-stats{gap:var(--space-1)}
  .character-stat{padding:var(--space-1) 0}
  .character-stat-value{font-size:var(--text-fluid-base)}
  .character-stat-label{font-size:9px}
  .card-body{padding:var(--space-3)}
  .ig-prompt-hd{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .ig-prompt-actions{width:100%}
  .ig-prompt-actions .btn{flex:1;justify-content:center}
  .form-input,.form-select,.form-textarea{font-size:16px}
  .content-viewer-body{padding:var(--space-4);font-size:var(--text-fluid-base)}
  .info-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .bottom-nav-item{padding:var(--space-1) var(--space-2);min-width:44px}
  .bottom-nav-item svg{width:20px;height:20px}
  .bottom-nav-item span{font-size:9px}
  .sidebar-brand-short{display:inline}
  .sidebar-brand-full{display:none}
  .btn-label-full{display:none}
  .btn-label-short{display:inline}
  .empty-state{padding:var(--space-10) var(--space-4)}
  .empty-state-icon{font-size:3rem}
  .empty-state-text{font-size:var(--text-sm)}
  .page-content{padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}
  /* Extremely small screens: tighten everything further */
  .profile-tabs .ptab{padding:var(--space-1) var(--space-2);min-height:40px}
  .profile-tabs .ptab svg{width:16px;height:16px}
  .profile-stat-num{font-size:var(--text-sm)}
  .profile-stat-lbl{font-size:10px}
  .info-card-body{padding:var(--space-3)}
  .info-value{font-size:var(--text-xs)}
  .tag{padding:3px 10px;font-size:10px}
  .tag-lg{padding:4px 12px;font-size:var(--text-xs)}
  .goal-title{font-size:var(--text-xs)}
  .goal-status{font-size:9px;padding:2px 8px}
  .goal-bar-info{font-size:10px}
  .mem-type{font-size:var(--text-xs)}
  .mem-text{font-size:var(--text-xs)}
  .mem-importance{font-size:9px}
  .mem-date{font-size:9px}
  .rel-name{font-size:var(--text-xs)}
  .content-item-name{font-size:var(--text-xs)}
  .content-item{min-height:48px;padding:var(--space-3)}
  .tab-section-header{align-items:flex-start;flex-direction:column;gap:var(--space-2)}
  .tab-section-title{font-size:var(--text-fluid-base)}
  .tab-section-sub{font-size:10px}
  .empty-state-modern{padding:var(--space-8) var(--space-3)}
  .empty-state-modern .empty-icon{font-size:3rem}
  .empty-state-modern h3{font-size:var(--text-fluid-base)}
  .empty-state-modern p{font-size:var(--text-xs)}
  .bottom-action-bar{padding:var(--space-2)}
  .bottom-action-bar .btn{min-height:44px;font-size:9px}

  /* Form actions: stack buttons full-width */
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%;justify-content:center}
  .form-actions form{width:100%}
  .form-actions form .btn{width:100%}
  .modal-footer{flex-direction:column}
  .modal-footer .btn{width:100%;justify-content:center}

  /* Overlay editor – very small screens */
  .oe-toolbar-label{font-size:9px;min-width:20px}
  .oe-toolbar input[type="range"]{height:32px}
  .oe-toolbar input[type="number"]{width:40px;font-size:10px}
  .oe-layer-item{min-height:44px}
  .oe-progress-overlay p{word-break:break-word}
}

/* ── 480px and below (small phones + larger phones) ───────────────────── */
@media (max-width: 480px) {
  /* Content viewer – mobile reading */
  .content-viewer-body {
    padding: var(--space-4) var(--space-3);
    font-size: clamp(0.95rem, 4vw, var(--text-fluid-lg));
    line-height: 2;
  }

  /* Breadcrumb – compact */
  .breadcrumb {
    font-size: var(--text-xs);
    gap: var(--space-1);
    margin-bottom: var(--space-4);
  }

  /* Content badges – only show first badge on mobile */
  .content-badges .badge:not(:first-of-type) {
    display: none;
  }

  /* IG prompt cards – tighter padding */
  .ig-prompt-card {
    border-radius: var(--radius-md);
  }
  .ig-prompt-hd {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .ig-prompt-number .ig-num {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
  }
  .ig-prompt-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
  }
  .ig-prompt-actions .btn {
    flex: unset;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
  }
  .ig-prompt-body {
    padding: var(--space-3);
  }
  .ig-prompt-text {
    font-size: var(--text-sm);
    line-height: 1.8;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .ig-prompt-textarea {
    font-size: var(--text-sm);
  }
  .ig-prompt-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
  }

  /* IG media preview – full width image */
  .ig-media-preview {
    flex-direction: column;
    align-items: stretch;
  }
  .ig-media-thumb {
    max-width: 100%;
    max-height: none;
    width: 100%;
    border-radius: var(--radius-md);
  }

  /* IG loading – compact */
  .ig-loading {
    padding: var(--space-6) var(--space-3);
  }
  .ig-loading p {
    word-break: break-word;
    font-size: var(--text-sm);
  }

  /* Overlay editor header – compact, icon-only buttons */
  .oe-header {
    padding: var(--space-2) var(--space-3);
  }
  .oe-header-left {
    gap: var(--space-2);
  }
  .oe-title {
    font-size: var(--text-sm);
  }
  .oe-header-left .badge:last-child {
    display: none;
  }
  .oe-header-right .btn .oe-btn-label {
    display: none;
  }
  .oe-header-right .btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
  }

  /* Overlay editor toolbar – touch friendly */
  .oe-toolbar {
    padding: var(--space-2);
    gap: var(--space-1);
  }
  .oe-toolbar-group {
    min-height: 44px;
    gap: var(--space-1);
    flex: 1;
  }
  .oe-toolbar-label {
    font-size: 10px;
    min-width: 24px;
  }
  .oe-toolbar input[type="range"] {
    height: 28px;
    flex: 1;
    min-width: 50px;
  }
  .oe-toolbar input[type="number"] {
    width: 48px;
    height: 36px;
    font-size: var(--text-xs);
  }

  /* Overlay editor layer list – touch targets ≥44px */
  .oe-layer-item {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }
  .oe-layer-thumb {
    width: 36px;
    height: 36px;
  }
  .oe-layer-name {
    font-size: var(--text-sm);
  }
  .oe-layer-vis {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Overlay editor progress – prevent overflow */
  .oe-progress-overlay {
    padding: var(--space-4);
  }
  .oe-progress-overlay .oe-progress-bar {
    width: 90%;
    max-width: 280px;
  }
  .oe-progress-overlay p {
    word-break: break-word;
    font-size: var(--text-sm);
  }

  /* Content actions – center empty state */
  .content-actions-empty {
    justify-content: center !important;
  }
  .content-actions-empty .btn {
    flex: 0 1 auto;
  }
}

/* Small Phones (400-480px) */
@media (min-width: 400px) and (max-width: 480px) {
  :root{--header-height:52px;--bottom-nav-height:60px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  .page-content{padding:var(--space-4)}
  .top-header{padding:0 var(--space-4)}
  .profile-header-content{padding:var(--space-4);flex-direction:column;text-align:center}
  .profile-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);justify-items:center}
  .profile-stat-divider{display:none}
  .profile-stat{flex-direction:column;align-items:center;gap:2px}
  .profile-actions{justify-content:center;width:100%}
  .profile-actions .btn{flex:1;min-height:44px}
  .profile-name{font-size:var(--text-fluid-2xl)}
  .profile-avatar{width:72px;height:72px;font-size:var(--text-fluid-2xl)}
  .character-card-actions .btn{flex:1;justify-content:center}
  .card-body{padding:var(--space-4)}
  .ig-prompt-hd{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .ig-prompt-actions{width:100%}
  .ig-prompt-actions .btn{flex:1;justify-content:center}
  .form-input,.form-select,.form-textarea{font-size:16px}
  .content-viewer-body{padding:var(--space-5);font-size:var(--text-fluid-base)}
  .info-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr}
  .page-content{padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}
}

/* Large Phones / Small Tablets (480-600px) — collapse form-rows, stack action buttons */
@media (max-width: 600px) {
  .form-row{grid-template-columns:1fr}
  .form-actions .btn{flex:1;justify-content:center;min-height:44px}
  .form-actions form{flex:1}
  .form-actions form .btn{width:100%}
  .modal-footer{flex-direction:column}
  .modal-footer .btn{width:100%;justify-content:center}
  .empty-state-actions{flex-direction:column;align-items:center}
  .empty-state-actions .btn{width:100%;justify-content:center}
}

/* Large Phones (480-768px) */
@media (min-width: 481px) and (max-width: 768px) {
  :root{--header-height:52px;--bottom-nav-height:60px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .page-content{padding:var(--space-5)}
  .character-grid{grid-template-columns:1fr}
  .profile-header-content{flex-direction:column;text-align:center}
  .profile-stats-row{justify-content:center}
  .profile-actions{justify-content:center;width:100%}
  .profile-actions .btn{flex:1}
  .page-content{padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}
}

/* Tablets (768-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .info-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .character-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* All screens < 1024px (sidebar collapses, bottom nav appears) */
@media (max-width: 1024px) {
  :root{--sidebar-width:260px}
  .sidebar{transform:translateX(-100%);position:fixed;z-index:50;display:flex}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block;opacity:1}
  .sidebar-toggle{display:flex}
  .main-content{margin-left:0;width:100%}
  .app-layout{display:block}
  .page-content{padding:var(--space-4)}
  .top-header{padding:0 var(--space-4)}
  .bottom-nav{display:block}

  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .character-grid{grid-template-columns:1fr}
  .profile-header-content{flex-direction:column;text-align:center;padding:var(--space-5)}
  .profile-stats-row{justify-content:center}
  .profile-actions{justify-content:center;width:100%}
  .profile-actions .btn{flex:1}
  .profile-name{font-size:var(--text-fluid-2xl)}
  .profile-avatar{width:64px;height:64px;font-size:var(--text-fluid-xl)}

  .rel-grid{grid-template-columns:1fr}

  .modal{border-radius:var(--radius-xl) var(--radius-xl) 0 0;margin-top:auto;max-height:85vh}
  .modal-backdrop.open{align-items:flex-end;padding:0}

  .flash-messages{
    left:var(--space-3);right:var(--space-3);max-width:none;
    top:calc(var(--header-height)+var(--space-2));
  }

  .info-grid{grid-template-columns:1fr}

  .page-content{padding-bottom:calc(var(--bottom-nav-height) + var(--space-4))}
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
  .bottom-nav{display:none}
}