/* ============================================================
   ABIDE - Design System
   Arc-inspired soft glass modern design language.
   Semantic tokens, 8 selectable palettes, glass surfaces,
   ambient blobs, Inter + Playfair Display.
   ============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair-display.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair-display-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   BASE TOKENS (light mode defaults)
   ============================================================ */
:root {
  /* --- Glass Material Recipe --- */
  --glass-fill:        rgba(255, 255, 255, 0.60);
  --glass-fill-strong: rgba(255, 255, 255, 0.80);
  --glass-border:      rgba(255, 255, 255, 0.45);
  --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --glass-blur:        24px;

  /* --- Text (never pure black) --- */
  --text-primary:   rgba(0, 0, 0, 0.86);
  --text-secondary: rgba(0, 0, 0, 0.58);
  --text-tertiary:  rgba(0, 0, 0, 0.40);
  --text-inverse:   rgba(255, 255, 255, 0.95);

  /* --- UI Neutrals --- */
  --divider: rgba(0, 0, 0, 0.08);
  --icon:    rgba(0, 0, 0, 0.45);

  /* --- Layout --- */
  --header-height: 56px;
  --tab-bar-height: 56px;
  --tab-total-height: calc(var(--tab-bar-height) + var(--safe-bottom-ui));
  --content-max-width: 680px;

  /* --- Safe Area (iOS) --- */
  --safe-top:    min(env(safe-area-inset-top, 0px), 48px);
  --safe-bottom: min(env(safe-area-inset-bottom, 0px), 34px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-top-ui: 0px;
  --safe-bottom-ui: min(env(safe-area-inset-bottom, 0px), 34px);

  /* --- Typography --- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-tight:     1.2;
  --leading-snug:      1.4;
  --leading-normal:    1.6;
  --leading-scripture: 1.85;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Spacing (8pt grid) --- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* --- Border Radius --- */
  --radius-sm:   0.75rem;  /* 12px - controls */
  --radius-md:   1rem;     /* 16px - inputs/chips */
  --radius-lg:   1.25rem;  /* 20px - cards */
  --radius-xl:   1.5rem;   /* 24px - modals/large panels */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);

  /* --- Transitions (smooth ease-out, "native" feel) --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-theme: 380ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Semantic Aliases (backwards compatibility) --- */
  /* These map legacy --color-* names to the new token system
     so all existing view/component code continues to work.    */
  --color-primary:        var(--accent);
  --color-primary-light:  var(--accent-light);
  --color-primary-muted:  var(--accent-muted);
  --color-primary-faint:  var(--accent-soft);
  --color-accent:         var(--accent2);
  --color-accent-light:   var(--accent2-light);
  --color-accent-warm:    var(--accent2-soft);
  --color-accent-faint:   var(--accent2-faint);
  --color-surface:        var(--bg-base);
  --color-surface-raised: var(--glass-fill);
  --color-surface-sunken: var(--bg-sunken);
  --color-border:         var(--divider-solid);
  --color-border-strong:  var(--divider-strong);
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted:     var(--text-tertiary);
  --color-text-inverse:   var(--text-inverse);
  --color-morning:        var(--accent);
  --color-evening:        var(--accent2);
  --color-success:        #3A7D44;
  --color-error:          #C0392B;
}

/* ============================================================
   PALETTE DEFINITIONS
   Each palette sets: bg-base, bg-sunken, bg-gradient-1/2,
   ambient-1/2/3, accent (+ light/muted/soft), accent2 (secondary),
   divider-solid, divider-strong, focus-ring.
   ============================================================ */

/* --- 1. Tuscan Sunset (default) --- */
:root,
[data-palette="tuscan-sunset"] {
  --bg-base:     #FFF8F3;
  --bg-sunken:   #F5E8DF;
  --bg-gradient-1: #FFF0E8;
  --bg-gradient-2: #FFF8F3;

  --ambient-1: #E35336;
  --ambient-2: #9988A1;
  --ambient-3: #FFD3AC;

  --accent:       #C44A32;
  --accent-light: #E35336;
  --accent-muted: #D9856E;
  --accent-soft:  rgba(196, 74, 50, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #9988A1;
  --accent2-light: #B5A8C0;
  --accent2-soft:  rgba(153, 136, 161, 0.12);
  --accent2-faint: #F7F5FA;

  --divider-solid:  #EDD9CC;
  --divider-strong: #D4B8A8;
  --focus-ring:     rgba(196, 74, 50, 0.30);
}

/* --- 2. Desert Dusk --- */
[data-palette="desert-dusk"] {
  --bg-base:     #FDF6F8;
  --bg-sunken:   #F5E8EE;
  --bg-gradient-1: #FDEEF4;
  --bg-gradient-2: #FDF6F8;

  --ambient-1: #E68057;
  --ambient-2: #A2574F;
  --ambient-3: #BF7587;

  --accent:       #993A8B;
  --accent-light: #B54FA8;
  --accent-muted: #C078B4;
  --accent-soft:  rgba(153, 58, 139, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #BF7587;
  --accent2-light: #D499A8;
  --accent2-soft:  rgba(191, 117, 135, 0.12);
  --accent2-faint: #FDF3F5;

  --divider-solid:  #EDCFD8;
  --divider-strong: #D4B0BC;
  --focus-ring:     rgba(153, 58, 139, 0.28);
}

/* --- 3. Lavender Fields --- */
[data-palette="lavender-fields"] {
  --bg-base:     #FDFCF0;
  --bg-sunken:   #F5F3DC;
  --bg-gradient-1: #FAF8E8;
  --bg-gradient-2: #FDFCF0;

  --ambient-1: #CF6DFC;
  --ambient-2: #C1BFFF;
  --ambient-3: #BDB96A;

  --accent:       #A84ED4;
  --accent-light: #CF6DFC;
  --accent-muted: #C080E0;
  --accent-soft:  rgba(168, 78, 212, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #C1BFFF;
  --accent2-light: #D8D7FF;
  --accent2-soft:  rgba(193, 191, 255, 0.18);
  --accent2-faint: #F5F4FF;

  --divider-solid:  #E0DEC0;
  --divider-strong: #C8C6A0;
  --focus-ring:     rgba(168, 78, 212, 0.28);
}

/* --- 4. Cactus Flower --- */
[data-palette="cactus-flower"] {
  --bg-base:     #F5FCF8;
  --bg-sunken:   #E8F5EE;
  --bg-gradient-1: #EEF9F3;
  --bg-gradient-2: #F5FCF8;

  --ambient-1: #E491A6;
  --ambient-2: #92E4BA;
  --ambient-3: #845763;

  --accent:       #3DAB7A;
  --accent-light: #52C990;
  --accent-muted: #74D4A4;
  --accent-soft:  rgba(61, 171, 122, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #E491A6;
  --accent2-light: #EEB0C0;
  --accent2-soft:  rgba(228, 145, 166, 0.12);
  --accent2-faint: #FDF5F7;

  --divider-solid:  #C8E8D8;
  --divider-strong: #AACFBC;
  --focus-ring:     rgba(61, 171, 122, 0.28);
}

/* --- 5. Mountain Mist --- */
[data-palette="mountain-mist"] {
  --bg-base:     #F5F7FA;
  --bg-sunken:   #E8EDF3;
  --bg-gradient-1: #EEF2F7;
  --bg-gradient-2: #F5F7FA;

  --ambient-1: #6D8196;
  --ambient-2: #B0C4DE;
  --ambient-3: #01796F;

  --accent:       #01796F;
  --accent-light: #029A8F;
  --accent-muted: #44A89F;
  --accent-soft:  rgba(1, 121, 111, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #6D8196;
  --accent2-light: #8FA4B8;
  --accent2-soft:  rgba(109, 129, 150, 0.12);
  --accent2-faint: #F0F3F7;

  --divider-solid:  #C8D4E0;
  --divider-strong: #AAB8C8;
  --focus-ring:     rgba(1, 121, 111, 0.28);
}

/* --- 6. Graphite (professional minimal) --- */
[data-palette="graphite"] {
  --bg-base:     #F8F7F6;
  --bg-sunken:   #EEECEB;
  --bg-gradient-1: #F3F2F1;
  --bg-gradient-2: #F8F7F6;

  --ambient-1: #9BAFC0;
  --ambient-2: #C0BAB5;
  --ambient-3: #7A98AC;

  --accent:       #3A6EA8;
  --accent-light: #4D84C4;
  --accent-muted: #6D9FCC;
  --accent-soft:  rgba(58, 110, 168, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #7A8FA0;
  --accent2-light: #96ABBC;
  --accent2-soft:  rgba(122, 143, 160, 0.12);
  --accent2-faint: #F0F3F6;

  --divider-solid:  #E0DCDA;
  --divider-strong: #C8C4C2;
  --focus-ring:     rgba(58, 110, 168, 0.28);
}

/* --- 7. Ocean Glass --- */
[data-palette="ocean-glass"] {
  --bg-base:     #F2F8FC;
  --bg-sunken:   #E4F0F8;
  --bg-gradient-1: #EBF4FA;
  --bg-gradient-2: #F2F8FC;

  --ambient-1: #0EA5E9;
  --ambient-2: #38BDF8;
  --ambient-3: #6366F1;

  --accent:       #0284C7;
  --accent-light: #0EA5E9;
  --accent-muted: #38BDF8;
  --accent-soft:  rgba(2, 132, 199, 0.10);
  --accent-contrast: #FFFFFF;

  --accent2:       #6366F1;
  --accent2-light: #818CF8;
  --accent2-soft:  rgba(99, 102, 241, 0.12);
  --accent2-faint: #F0F0FF;

  --divider-solid:  #C0DAF0;
  --divider-strong: #A0C4E8;
  --focus-ring:     rgba(2, 132, 199, 0.30);
}

/* --- 8. Mono Minimal --- */
[data-palette="mono"] {
  --bg-base:     #FAFAFA;
  --bg-sunken:   #F0F0F0;
  --bg-gradient-1: #F5F5F5;
  --bg-gradient-2: #FAFAFA;

  --ambient-1: transparent;
  --ambient-2: transparent;
  --ambient-3: transparent;

  --accent:       #4B5563;
  --accent-light: #6B7280;
  --accent-muted: #9CA3AF;
  --accent-soft:  rgba(75, 85, 99, 0.08);
  --accent-contrast: #FFFFFF;

  --accent2:       #9CA3AF;
  --accent2-light: #D1D5DB;
  --accent2-soft:  rgba(156, 163, 175, 0.12);
  --accent2-faint: #F9FAFB;

  --divider-solid:  #E5E7EB;
  --divider-strong: #D1D5DB;
  --focus-ring:     rgba(75, 85, 99, 0.20);
}

/* ============================================================
   DARK MODE OVERLAY
   Applied on top of any palette when data-theme="dark"
   ============================================================ */
[data-theme="dark"] {
  --glass-fill:        rgba(16, 24, 30, 0.62);
  --glass-fill-strong: rgba(16, 24, 30, 0.82);
  --glass-border:      rgba(154, 212, 195, 0.18);
  --glass-shadow:      0 12px 38px rgba(0, 0, 0, 0.52), 0 3px 10px rgba(0, 0, 0, 0.36);

  --text-primary:   #EAF3EF;
  --text-secondary: rgba(234, 243, 239, 0.72);
  --text-tertiary:  rgba(234, 243, 239, 0.48);
  --text-inverse:   #0D1613;

  --divider: rgba(184, 226, 213, 0.12);
  --icon:    rgba(204, 236, 226, 0.74);

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.42);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.58);
}

/* Dark overrides per-palette */
[data-theme="dark"][data-palette="tuscan-sunset"],
[data-theme="dark"]:not([data-palette]) {
  --bg-base:     #0D1411;
  --bg-sunken:   #0A100D;
  --bg-gradient-1: #0F1814;
  --bg-gradient-2: #0A120E;
  --ambient-1: #1A7D63;
  --ambient-2: #7C4D99;
  --ambient-3: #2F916F;
  --divider-solid:  rgba(237, 217, 204, 0.12);
  --divider-strong: rgba(212, 184, 168, 0.20);
  --accent-soft:  rgba(44, 170, 127, 0.16);
}
[data-theme="dark"][data-palette="desert-dusk"] {
  --bg-base:   #120E16;
  --bg-sunken: #0C0910;
  --bg-gradient-1: #17111F;
  --bg-gradient-2: #100C16;
  --ambient-1: #9A4CC8;
  --ambient-2: #D56D86;
  --ambient-3: #6C3DA8;
  --divider-solid: rgba(237, 207, 216, 0.12);
  --accent-soft:   rgba(153, 58, 139, 0.15);
}
[data-theme="dark"][data-palette="lavender-fields"] {
  --bg-base:   #121110;
  --bg-sunken: #0B0A0A;
  --bg-gradient-1: #181615;
  --bg-gradient-2: #10100F;
  --ambient-1: #A774DB;
  --ambient-2: #6D74D1;
  --ambient-3: #7B8650;
  --divider-solid: rgba(224, 222, 192, 0.12);
  --accent-soft:   rgba(168, 78, 212, 0.15);
}
[data-theme="dark"][data-palette="cactus-flower"] {
  --bg-base:   #0A1310;
  --bg-sunken: #07100D;
  --bg-gradient-1: #101A16;
  --bg-gradient-2: #0A1410;
  --ambient-1: #2FA57A;
  --ambient-2: #C7728A;
  --ambient-3: #4D8E72;
  --divider-solid: rgba(200, 232, 216, 0.12);
  --accent-soft:   rgba(61, 171, 122, 0.15);
}
[data-theme="dark"][data-palette="mountain-mist"] {
  --bg-base:   #0A1116;
  --bg-sunken: #070D12;
  --bg-gradient-1: #101823;
  --bg-gradient-2: #091118;
  --ambient-1: #208E88;
  --ambient-2: #4A6DA1;
  --ambient-3: #2D8578;
  --divider-solid: rgba(200, 212, 224, 0.12);
  --accent-soft:   rgba(1, 121, 111, 0.15);
}
[data-theme="dark"][data-palette="graphite"] {
  --bg-base:   #101517;
  --bg-sunken: #0C1012;
  --bg-gradient-1: #161D20;
  --bg-gradient-2: #0F1417;
  --ambient-1: #3E799C;
  --ambient-2: #4F6C7F;
  --ambient-3: #42737A;
  --divider-solid: rgba(224, 220, 218, 0.12);
  --accent-soft:   rgba(58, 110, 168, 0.15);
}
[data-theme="dark"][data-palette="ocean-glass"] {
  --bg-base:   #07121D;
  --bg-sunken: #050D16;
  --bg-gradient-1: #0B1A2A;
  --bg-gradient-2: #06101A;
  --ambient-1: #0A8CC8;
  --ambient-2: #5479D6;
  --ambient-3: #19A0AA;
  --divider-solid: rgba(192, 218, 240, 0.12);
  --accent-soft:   rgba(2, 132, 199, 0.15);
}
[data-theme="dark"][data-palette="mono"] {
  --bg-base:   #121416;
  --bg-sunken: #0D1012;
  --bg-gradient-1: #171A1D;
  --bg-gradient-2: #101214;
  --ambient-1: #34414A;
  --ambient-2: #24313A;
  --ambient-3: #2D3A43;
  --divider-solid: rgba(229, 231, 235, 0.12);
  --accent-soft:   rgba(75, 85, 99, 0.15);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Smooth theme + palette transitions */
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme);
}

body {
  height: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  /* Subtle base gradient for atmosphere */
  background-image: linear-gradient(160deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
  transition: background var(--transition-theme), color var(--transition-theme);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ============================================================
   AMBIENT BLOB LAYER
   ============================================================ */
.ambient-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.30;
  transition:
    background var(--transition-theme),
    opacity var(--transition-theme);
}

.ambient-blob--1 {
  width: 65vw; height: 65vw;
  max-width: 480px; max-height: 480px;
  top: -15%; left: -10%;
  background: var(--ambient-1);
}

.ambient-blob--2 {
  width: 55vw; height: 55vw;
  max-width: 420px; max-height: 420px;
  top: 25%; right: -15%;
  background: var(--ambient-2);
}

.ambient-blob--3 {
  width: 50vw; height: 50vw;
  max-width: 380px; max-height: 380px;
  bottom: -8%; left: 15%;
  background: var(--ambient-3);
}

[data-palette="mono"] .ambient-blob { opacity: 0; }
[data-palette="graphite"] .ambient-blob { opacity: 0.12; }

/* ============================================================
   APP SHELL LAYOUT
   ============================================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100svh;
  max-width: var(--content-max-width);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1; /* sits above ambient blob layer */
}
@supports (height: 100dvh) {
  #app { min-height: 100dvh; }
}

/* iOS Standalone status bar spacer */
.status-bar-spacer {
  display: none;
  height: var(--safe-top-ui);
  background: transparent;
  flex-shrink: 0;
}
[data-standalone="true"] {
  --safe-top-ui: var(--safe-top);
}
[data-standalone="true"] .status-bar-spacer {
  display: block;
}

/* ============================================================
   APP HEADER
   ============================================================ */
.app-header {
  flex-shrink: 0;
  height: var(--header-height);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  z-index: 10;
  transition: background var(--transition-theme), border-color var(--transition-theme);
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-4);
  gap: var(--space-3);
}

.header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--accent);
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.header-back:hover { background: var(--accent-soft); }

.header-title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ============================================================
   VIEW CONTAINER
   ============================================================ */
.view-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  position: relative;
  scroll-padding-bottom: var(--space-4);
  padding-bottom: var(--tab-total-height);
}

.app-legal {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  border-top: 1px solid var(--divider);
  background: var(--glass-fill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-legal a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ============================================================
   TAB BAR — fixed iOS PWA bottom positioning
   ============================================================ */
.tab-bar {
  flex-shrink: 0;
  height: var(--tab-total-height);
  padding-bottom: var(--safe-bottom-ui);
  background: var(--glass-fill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100%, var(--content-max-width));
  z-index: 10;
  transition: background var(--transition-theme), border-color var(--transition-theme);
}

.tab-item {
  flex: 1;
  /* Exactly the visual 56px — ignores safe-area below */
  height: var(--tab-bar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--space-1) var(--space-2);
  color: var(--icon);
  transition: color var(--transition-fast);
  position: relative;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.tab-item.active { color: var(--accent); }

.tab-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.tab-item.active .tab-icon { stroke: var(--accent); }
.tab-item:active .tab-icon { transform: scale(0.88); }

.tab-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
}

@media (display-mode: standalone) {
  :root {
    --safe-top-ui: var(--safe-top);
    --safe-bottom-ui: 0px;
  }

  .tab-bar {
    position: fixed;
    bottom: 0;
    height: var(--tab-bar-height);
    padding-bottom: 0;
    align-items: center;
    overflow: visible;
  }

  .tab-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -48px;
    height: 48px;
    background: var(--glass-fill);
    pointer-events: none;
  }

  .view-container {
    padding-bottom: var(--tab-bar-height);
  }

  .app-legal {
    margin-bottom: var(--tab-bar-height);
  }
}

/* Active indicator: top bar */
.tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  transition: background var(--transition-theme);
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-4);
  color: var(--accent);
}

.loading-cross { animation: pulse 2s ease-in-out infinite; }

.loading-text {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--accent);
  letter-spacing: 0.05em;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.95); }
}

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }

.font-serif  { font-family: var(--font-serif); }
.font-sans   { font-family: var(--font-sans); }

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

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-tertiary); }
.text-accent    { color: var(--accent2); }
.text-brand     { color: var(--accent); }

.text-center { text-align: center; }
.text-italic { font-style: italic; }
.text-upper  { text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ============================================================
   SCROLLABLE VIEW PADDING
   ============================================================ */
.view-content {
  padding: var(--space-4) var(--space-4) calc(var(--space-8) + var(--safe-bottom-ui));
  max-width: 100%;
}

@media (min-width: 480px) {
  .view-content {
    padding: var(--space-5) var(--space-6) calc(var(--space-10) + var(--safe-bottom-ui));
  }
}

/* iOS Safari rendering/perf fallback: avoid heavy blur filter boxes */
@supports (-webkit-touch-callout: none) {
  :root {
    --glass-blur: 14px;
  }

  .app-header,
  .tab-bar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .ambient-blob {
    filter: none;
    opacity: 0.24;
  }

  .ambient-blob--1 {
    background: radial-gradient(circle at 50% 50%, var(--ambient-1) 0%, transparent 70%);
  }
  .ambient-blob--2 {
    background: radial-gradient(circle at 50% 50%, var(--ambient-2) 0%, transparent 70%);
  }
  .ambient-blob--3 {
    background: radial-gradient(circle at 50% 50%, var(--ambient-3) 0%, transparent 70%);
  }
}

/* ============================================================
   DESKTOP LAYOUT
   ============================================================ */
@media (min-width: 680px) {
  #app {
    border-left: 1px solid var(--divider-solid);
    border-right: 1px solid var(--divider-solid);
  }
  body {
    background: var(--bg-sunken);
    background-image: linear-gradient(160deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
  }
}