/* ============================================================
   ATLANTIDA.CSS — Shared Design System · juliahandpan.art
   Warm-Editorial-Wellness · v1.0
   Themes: warm (default) | mystical | island | minimal | soft
   ============================================================ */

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,400..600,0..100;1,9..144,400..500,0..100&family=Instrument+Sans:wght@400;500;600&family=Onest:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600&family=Cormorant+Garamond:ital,wght@1,400;1,500&display=swap');

/* 2. TOKENS — base (warm) */
:root {
  --paper: #FBF6EE; --paper-2: #F4ECE0; --card: #FFFDF9;
  --ink: #2C2722; --ink-2: #6B6155; --ink-3: #9A8E7E;
  --line: #E7DCCB; --line-2: #D8C9B2;
  --teal: #1F8C7C; --teal-deep: #136B5E; --teal-soft: #D6EBE5;
  --gold: #C98A2B; --gold-soft: #F3E2BE;
  --rose: #C66B72; --rose-soft: #F3DCDC;
  --deep: #21302E; --deep-2: #2A3D3A;
  --r: 16px; --maxw: 1120px; --prose: 720px;
  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 1px 2px rgba(44,39,34,.04),0 12px 30px -18px rgba(44,39,34,.18);
  --glow: 0 10px 34px -14px rgba(31,140,124,.45);
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --eyebrow-color: var(--teal-deep); --eyebrow-dash: var(--teal);
  --nav-bg: rgba(251,246,238,.82); --nav-border: var(--line);
}

/* Mystical Depth — dark underwater */
[data-theme="mystical"] {
  --paper: #0E1A18; --paper-2: #162420; --card: #1D2D29;
  --ink: #EAE4D8; --ink-2: #B4C8C2; --ink-3: #8BA89E;
  --line: rgba(45,212,191,.15); --line-2: rgba(45,212,191,.22);
  --teal: #2DD4BF; --teal-deep: #2DD4BF; --teal-soft: rgba(45,212,191,.12);
  --gold: #D4A847; --gold-soft: rgba(212,168,71,.15);
  --rose: #C27A80; --rose-soft: rgba(194,122,128,.15);
  --deep: #060E0D; --deep-2: #0E1A18;
  --shadow: 0 1px 2px rgba(0,0,0,.15),0 12px 30px -18px rgba(0,0,0,.55);
  --glow: 0 10px 34px -14px rgba(45,212,191,.45);
  --eyebrow-color: var(--teal); --eyebrow-dash: var(--teal);
  --nav-bg: rgba(14,26,24,.88);
}

/* Island Sanctuary — hex fallbacks then OKLCH */
[data-theme="island"] {
  --paper: #EAF0E6; --paper-2: #DFE8D9; --card: #F6FAF3;
  --ink: #243B34; --ink-2: #4C6A5E; --ink-3: #789486;
  --line: #CFE0D4; --line-2: #BCD3C2;
  --teal: #1E8A66; --teal-deep: #115C42; --teal-soft: #CDE9DA;
  --gold: #C2872A; --gold-soft: #EFE2B4;
  --rose: #C97F73; --rose-soft: #F2DED6;
  --deep: #16302A; --deep-2: #1F3F36;
  --r: 22px;
  --shadow: 0 1px 3px rgba(20,50,40,.05),0 16px 40px -22px rgba(20,50,40,.18);
  --glow: 0 12px 40px -16px rgba(30,138,102,.42);
  --nav-bg: rgba(234,240,230,.82);
}
@supports (color: oklch(0 0 0)) {
  [data-theme="island"] {
    --paper: oklch(.945 .024 142); --paper-2: oklch(.902 .028 140); --card: oklch(.982 .013 150);
    --ink: oklch(.300 .042 165); --ink-2: oklch(.470 .050 162); --ink-3: oklch(.620 .035 160);
    --line: oklch(.875 .026 150); --line-2: oklch(.835 .030 150);
    --teal: oklch(.520 .108 165); --teal-deep: oklch(.330 .066 168); --teal-soft: oklch(.910 .042 158);
    --gold: oklch(.730 .120 72); --gold-soft: oklch(.918 .052 86);
    --deep: oklch(.230 .040 165); --deep-2: oklch(.290 .045 162);
    --nav-bg: oklch(.945 .024 142 / .82);
  }
}

/* Minimal Editorial — hex fallbacks then OKLCH */
[data-theme="minimal"] {
  --paper: #F7F5F1; --paper-2: #EDEAE4; --card: #FBFAF8;
  --ink: #1A1916; --ink-2: #5C5852; --ink-3: #8C887F;
  --line: #E0DCD4; --line-2: #CCC8BE;
  --teal: #5A8E74; --teal-deep: #3A6454; --teal-soft: #D8EAE1;
  --gold: #B8922E; --gold-soft: #EEE0B8;
  --deep: #1A1916; --deep-2: #242220;
  --r: 8px;
  --shadow: 0 1px 2px rgba(26,25,22,.04),0 8px 24px -14px rgba(26,25,22,.12);
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nav-bg: rgba(247,245,241,.90);
}
@supports (color: oklch(0 0 0)) {
  [data-theme="minimal"] {
    --paper: oklch(.97 .010 85); --paper-2: oklch(.94 .014 82); --card: oklch(.99 .005 90);
    --ink: oklch(.16 .010 60); --ink-2: oklch(.48 .010 60); --ink-3: oklch(.62 .010 65);
    --line: oklch(.88 .010 80); --line-2: oklch(.82 .012 78);
    --teal: oklch(.68 .050 150); --teal-deep: oklch(.48 .040 150); --teal-soft: oklch(.93 .020 148);
    --gold: oklch(.72 .110 72); --gold-soft: oklch(.94 .040 76);
    --deep: oklch(.16 .010 60); --deep-2: oklch(.20 .012 62);
    --nav-bg: oklch(.97 .010 85 / .90);
  }
}

/* Soft Therapeutic Warm — hex fallbacks then OKLCH */
[data-theme="soft"] {
  --paper: #F7F1E9; --paper-2: #EDE5D6; --card: #FBF7F0;
  --ink: #3D2E1F; --ink-2: #7A6655; --ink-3: #A8947E;
  --line: #E2D3BF; --line-2: #CEBFA4;
  --teal: #5A9E8A; --teal-deep: #3A7060; --teal-soft: #D8EDEA;
  --gold: #D4803A; --gold-soft: #F5DEC4;
  --rose: #C87878; --rose-soft: #F2DEDE;
  --deep: #2A1E14; --deep-2: #3A2C20;
  --r: 24px;
  --shadow: 0 2px 4px rgba(61,46,31,.05),0 14px 36px -20px rgba(61,46,31,.14);
  --glow: 0 10px 36px -14px rgba(90,158,138,.40);
  --font-body: 'Onest', system-ui, sans-serif;
  --nav-bg: rgba(247,241,233,.84);
}
@supports (color: oklch(0 0 0)) {
  [data-theme="soft"] {
    --paper: oklch(.96 .015 72); --paper-2: oklch(.92 .020 70); --card: oklch(.99 .007 80);
    --ink: oklch(.28 .040 45); --ink-2: oklch(.52 .038 48); --ink-3: oklch(.68 .030 52);
    --line: oklch(.87 .025 65); --line-2: oklch(.82 .030 60);
    --teal: oklch(.62 .070 160); --teal-deep: oklch(.45 .055 162); --teal-soft: oklch(.92 .025 155);
    --gold: oklch(.65 .110 45); --gold-soft: oklch(.92 .046 50);
    --rose: oklch(.72 .080 15); --rose-soft: oklch(.93 .035 12);
    --deep: oklch(.22 .036 42); --deep-2: oklch(.28 .038 44);
    --nav-bg: oklch(.96 .015 72 / .84);
  }
}

/* 3. RESET + BASE */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 70% 55% at 92% -12%, var(--teal-soft) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at -8% 6%,  var(--gold-soft) 0%, transparent 60%);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

[data-theme="soft"] body   { font-variation-settings: "SOFT" 70; }
[data-theme="mystical"] body {
  background-image:
    radial-gradient(ellipse 70% 55% at 92% -12%, rgba(45,212,191,.09) 0%, transparent 62%),
    radial-gradient(ellipse 55% 45% at -8% 6%,  rgba(212,168,71,.07) 0%, transparent 60%);
}

img, video, svg { display: block; max-width: 100%; }

a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover { color: var(--teal); text-decoration-color: transparent; }
[data-theme="mystical"] a       { color: var(--teal); }
[data-theme="mystical"] a:hover { color: #6ee9df; }

::selection { background: var(--teal); color: #fff; }
[data-theme="mystical"] ::selection { background: var(--teal); color: var(--deep); }

/* 4. TYPOGRAPHY */
h1,h2,h3,h4 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  color: var(--ink);
  font-weight: 480;
}
h1 { font-size: clamp(2.2rem,5.5vw + .5rem,4.2rem); font-weight: 440; letter-spacing: -.02em; line-height: 1.035; }
h2 { font-size: clamp(1.55rem,3.2vw + .4rem,2.6rem); letter-spacing: -.016em; line-height: 1.12; }
h3 { font-size: clamp(1.2rem,2vw + .3rem,1.75rem); letter-spacing: -.01em; line-height: 1.22; }
h4 { font-size: clamp(1rem,1.2vw + .2rem,1.25rem); font-weight: 500; letter-spacing: -.008em; line-height: 1.35; }

[data-theme="mystical"] h1,[data-theme="mystical"] h2,[data-theme="mystical"] h3,[data-theme="mystical"] h4
  { font-weight: 420; font-style: italic; }
[data-theme="island"] h1,[data-theme="island"] h2,[data-theme="island"] h3,[data-theme="island"] h4
  { font-weight: 460; letter-spacing: -.02em; }
[data-theme="minimal"] h1 { font-weight: 560; font-style: italic; letter-spacing: -.03em; }
[data-theme="minimal"] h2,[data-theme="minimal"] h3 { font-weight: 540; letter-spacing: -.025em; }
[data-theme="soft"] h1,[data-theme="soft"] h2,[data-theme="soft"] h3,[data-theme="soft"] h4
  { font-weight: 450; letter-spacing: -.012em; }

p { margin-block: .75em; }
p:first-child { margin-block-start: 0; }
p:last-child  { margin-block-end: 0; }
strong { font-weight: 600; color: var(--ink); }
small  { font-size: .8125rem; color: var(--ink-3); }

blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem,2vw,1.5rem);
  color: var(--ink-2);
  border-left: 3px solid var(--gold);
  padding-left: 1.2em;
  margin-block: 1.5em;
}
[data-theme="mystical"] blockquote,blockquote.pull {
  font-family: var(--font-accent);
  font-size: clamp(1.25rem,2.5vw,1.85rem);
  border-left-color: var(--teal);
}

/* 5. LAYOUT */
.wrap  { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px,4vw,44px); }
.prose { max-width: var(--prose); }
.prose p,.prose li { font-size: 1rem; line-height: 1.68; }

section { padding-block: clamp(40px,6vw,76px); }

.band {
  background: var(--deep);
  border-radius: 24px;
  padding: clamp(48px,7vw,96px) clamp(20px,4vw,56px);
  position: relative;
  overflow: hidden;
  margin-block: clamp(24px,4vw,48px);
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 40%, rgba(31,140,124,.18) 0%, transparent 65%);
  pointer-events: none;
}
[data-theme="mystical"] .band::before {
  background: radial-gradient(ellipse 60% 70% at 80% 40%, rgba(45,212,191,.14) 0%, transparent 65%);
}
.band h2,.band h3 { color: #EAE4D8; position: relative; z-index: 1; }
.band p           { color: rgba(234,228,216,.72); position: relative; z-index: 1; }
.band .eyebrow    { --eyebrow-color: var(--teal); --eyebrow-dash: var(--teal); }
.big {
  font-family: var(--font-heading);
  font-size: clamp(50px,9vw,120px);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--gold);
  position: relative;
  z-index: 1;
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(340px,100%),1fr)); gap: clamp(16px,2.5vw,28px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr)); gap: clamp(14px,2vw,24px); }
.flex-center { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* 6. COMPONENTS */

/* Eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: .65em;
}
.eyebrow::before { content: '—'; font-size: 18px; color: var(--eyebrow-dash); line-height: 1; }
[data-theme="soft"] .eyebrow { text-transform: lowercase; letter-spacing: .05em; font-weight: 500; }

/* Hero */
.hero { padding-block: clamp(60px,10vw,120px); text-align: center; }
.hero h1 { margin-bottom: .45em; }
.hero .sub { font-size: clamp(1rem,1.8vw + .1rem,1.2rem); color: var(--ink-2); max-width: 580px; margin-inline: auto; margin-bottom: 2rem; }

/* Stats */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px,3vw,36px); margin-top: 2rem; }
.stat { text-align: center; min-width: 100px; }
.stat .num { font-family: var(--font-heading); font-size: clamp(2.2rem,4vw,2.8rem); font-weight: 600; line-height: 1; display: block; }
.stat .num.goldn { color: var(--gold); }
.stat .num.tealn { color: var(--teal); }
.stat .label { font-size: .8125rem; color: var(--ink-3); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-top: .35em; display: block; }
[data-theme="soft"] .stat .label { text-transform: lowercase; letter-spacing: .02em; }

/* Card */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px,3vw,32px);
  box-shadow: var(--shadow);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.card h3,.card h4 { margin-bottom: .5em; }
.card p { color: var(--ink-2); }

[data-theme="island"] .card {
  background: rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.6);
}
[data-theme="minimal"] .card { border-color: transparent; box-shadow: 0 1px 2px rgba(26,25,22,.04),0 6px 20px -10px rgba(26,25,22,.10); }

/* Accordion */
.lead {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  margin-bottom: clamp(10px,1.5vw,16px);
}
.lhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px,2vw,20px) clamp(16px,2.5vw,24px);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1rem,1.5vw,1.2rem);
  font-weight: 480;
  color: var(--ink);
  user-select: none;
  transition: background .18s var(--ease);
  gap: 12px;
}
.lhead:hover { background: var(--paper-2); }
[data-theme="mystical"] .lhead:hover { background: rgba(45,212,191,.06); }
.lhead .ico { flex-shrink: 0; width: 20px; height: 20px; color: var(--teal); transition: transform .28s var(--ease); }
[data-card].open .ico { transform: rotate(180deg); }
.lbody-in { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
[data-card].open .lbody-in { max-height: 3200px; }
.lbody { padding: clamp(14px,2vw,22px) clamp(16px,2.5vw,24px) clamp(18px,2.5vw,28px); border-top: 1px solid var(--line); color: var(--ink-2); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .32em .9em;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.chip:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal-deep); }
.chip.on    { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: var(--glow); }
[data-theme="mystical"] .chip.on { color: var(--deep); }
[data-theme="minimal"]  .chip    { border-radius: 4px; }

/* Draft box */
.draftbox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(16px,2.5vw,24px);
  padding-right: 3.5rem;
}
.draftbox pre,.draftbox .draft-text { font-size: .9375rem; line-height: 1.62; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.copy {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.copy:hover { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
.copy.ok    { background: var(--teal); color: #fff; border-color: var(--teal); }

/* qCard callout */
.qcard {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(14px,2vw,20px) clamp(16px,2.5vw,24px);
  margin-block: 1.25rem;
}
.qcard p      { color: var(--ink-2); margin-top: .35em; }
.qcard strong { color: var(--gold); }
[data-theme="mystical"] .qcard { background: rgba(212,168,71,.10); }

/* Distribution bars */
.dist { display: flex; flex-direction: column; gap: 10px; margin-block: 1rem; }
.dbar { display: flex; align-items: center; gap: 12px; }
.dbar .dlabel { font-size: .875rem; color: var(--ink-2); min-width: 120px; flex-shrink: 0; }
.dbar .dtrack { flex: 1; height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
[data-theme="mystical"] .dbar .dtrack { background: rgba(45,212,191,.08); }
.dbar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--teal),var(--teal-deep)); transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); }
.dbar .fill.animated { transform: scaleX(1); }
.dbar .fill.gold { background: linear-gradient(90deg,var(--gold),#a86d1c); }
.dbar .dval { font-size: .8125rem; font-weight: 600; color: var(--ink-3); min-width: 36px; text-align: right; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: .22em .72em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1.4; }
.badge-teal    { background: var(--teal-soft); color: var(--teal-deep); }
.badge-gold    { background: var(--gold-soft); color: #7a500a; }
.badge-rose    { background: var(--rose-soft); color: #8a2a30; }
.badge-neutral { background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line); }
[data-theme="mystical"] .badge-gold { color: var(--gold); }
[data-theme="mystical"] .badge-rose { color: var(--rose); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: .6em 1.5em;
  border-radius: calc(var(--r) * .75);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background: var(--teal);
  color: #fff;
  box-shadow: var(--glow);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .18s var(--ease), color .2s var(--ease);
}
.btn:hover  { background: var(--teal-deep); transform: translateY(-1px); box-shadow: 0 14px 40px -16px rgba(31,140,124,.60); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(0); }
[data-theme="mystical"] .btn { color: var(--deep); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal-deep);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--teal-soft); box-shadow: none; color: var(--teal-deep); }
[data-theme="mystical"] .btn-ghost       { color: var(--teal); border-color: var(--teal); }
[data-theme="mystical"] .btn-ghost:hover { background: rgba(45,212,191,.10); color: var(--teal); }
.btn-soft        { background: var(--teal-soft); color: var(--teal-deep); box-shadow: none; }
.btn-soft:hover  { background: var(--teal); color: #fff; box-shadow: var(--glow); }
.btn:disabled    { opacity: .45; pointer-events: none; }

/* Tag */
.tag { display: inline-block; padding: .18em .65em; border-radius: 6px; font-size: .75rem; font-weight: 500; background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line); }
[data-theme="island"] .tag { border-radius: 999px; border-color: transparent; }

/* 7. FORM PRIMITIVES */
form { display: flex; flex-direction: column; gap: 1rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px,2.5vw,24px); background: var(--card); }
legend { font-family: var(--font-heading); font-weight: 480; font-size: .9375rem; padding-inline: .6em; color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
label { font-size: .875rem; font-weight: 500; color: var(--ink-2); letter-spacing: .01em; }
[data-theme="soft"] label { text-transform: lowercase; letter-spacing: .005em; }

input,select,textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: calc(var(--r) * .625);
  padding: .55em .85em;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input::placeholder,textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:hover,select:hover,textarea:hover  { border-color: var(--line); }
input:focus,select:focus,textarea:focus  { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31,140,124,.18); }
[data-theme="mystical"] input:focus,[data-theme="mystical"] select:focus,[data-theme="mystical"] textarea:focus
  { box-shadow: 0 0 0 3px rgba(45,212,191,.18); }
textarea { resize: vertical; min-height: 100px; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7em center;
  background-size: 16px;
  padding-right: 2.5em;
}
[data-theme="mystical"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238BA89E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.input-hint  { font-size: .8125rem; color: var(--ink-3); margin-top: 2px; }
.input-error { font-size: .8125rem; color: var(--rose); margin-top: 2px; }
input.error,select.error,textarea.error { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(198,107,114,.15); }

input[type="checkbox"],input[type="radio"] {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--line-2); background: var(--card);
  cursor: pointer; padding: 0;
}
input[type="checkbox"]       { border-radius: 5px; }
input[type="radio"]          { border-radius: 50%; }
input[type="checkbox"]:checked,input[type="radio"]:checked { background: var(--teal); border-color: var(--teal); }
input[type="checkbox"]:focus,input[type="radio"]:focus     { box-shadow: 0 0 0 3px rgba(31,140,124,.18); }
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check-row label { cursor: pointer; margin: 0; }

/* Table */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--card); }
thead { background: var(--paper-2); }
[data-theme="mystical"] thead { background: var(--paper-2); }
th {
  padding: .7em 1em;
  text-align: left;
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
[data-theme="soft"] th { text-transform: lowercase; letter-spacing: .02em; }
th.num,td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
td { padding: .65em 1em; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--paper-2); }
[data-theme="mystical"] tbody tr:nth-child(even) { background: rgba(45,212,191,.04); }
tbody tr:hover { background: var(--teal-soft); }
[data-theme="mystical"] tbody tr:hover { background: rgba(45,212,191,.08); }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: clamp(36px,6vw,72px) clamp(20px,4vw,40px); text-align: center; color: var(--ink-3); }
.empty .empty-icon { font-size: 2.5rem; opacity: .45; line-height: 1; }
.empty p { font-size: .9375rem; color: var(--ink-3); max-width: 320px; margin: 0; }

/* Toast */
.toast-stack { position: fixed; bottom: clamp(16px,3vw,28px); right: clamp(16px,3vw,28px); z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast {
  background: var(--ink);
  color: var(--paper);
  border-radius: calc(var(--r) * .75);
  padding: .75em 1.1em;
  font-size: .875rem;
  font-weight: 500;
  max-width: 320px;
  box-shadow: 0 4px 20px -6px rgba(44,39,34,.35);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show    { opacity: 1; transform: translateY(0); }
.toast.toast-ok   { background: var(--teal-deep); color: #fff; }
.toast.toast-warn { background: var(--gold); color: #fff; }
.toast.toast-err  { background: var(--rose); color: #fff; }
[data-theme="mystical"] .toast { background: var(--card); color: var(--ink); border: 1px solid var(--line); }

/* 8. NAV + PROGRESS BAR */
header.nav {
  position: sticky;
  top: 0;
  z-index: 800;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--nav-border);
  height: 58px;
  display: flex;
  align-items: center;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(18px,4vw,44px);
  gap: 16px;
}
.nav-logo { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 480; font-style: italic; color: var(--ink); text-decoration: none; letter-spacing: -.01em; flex-shrink: 0; }
.nav-logo:hover { color: var(--teal-deep); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; flex-wrap: wrap; }
.nav-links li a.lnk {
  display: inline-block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: .3em .7em;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.nav-links li a.lnk:hover { color: var(--teal-deep); background: var(--teal-soft); }
.nav-links li a.lnk.active { color: var(--teal-deep); border-bottom-color: var(--teal); background: var(--teal-soft); }
[data-theme="mystical"] .nav-links li a.lnk:hover,
[data-theme="mystical"] .nav-links li a.lnk.active { color: var(--teal); background: rgba(45,212,191,.08); border-bottom-color: var(--teal); }

#bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9000; background: linear-gradient(90deg,var(--teal),var(--gold)); transition: width .1s linear; pointer-events: none; }

/* 9. MOTION + REVEAL */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.stagger.revealed > *:nth-child(1)  { transition-delay: .04s; }
.stagger.revealed > *:nth-child(2)  { transition-delay: .10s; }
.stagger.revealed > *:nth-child(3)  { transition-delay: .17s; }
.stagger.revealed > *:nth-child(4)  { transition-delay: .23s; }
.stagger.revealed > *:nth-child(5)  { transition-delay: .30s; }
.stagger.revealed > *:nth-child(6)  { transition-delay: .36s; }
.stagger.revealed > *:nth-child(7)  { transition-delay: .43s; }
.stagger.revealed > *:nth-child(n+8){ transition-delay: .50s; }
.stagger.revealed > * { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal,.stagger > *,.card,.btn,.chip,.copy,.lbody-in,.dbar .fill,.toast,header.nav,#bar {
    transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* 10. RESPONSIVE */
@media (max-width: 640px) {
  .stats { gap: 16px; }
  .stat  { min-width: calc(50% - 8px); }
  .grid-2,.grid-3 { grid-template-columns: 1fr; }
  header.nav { height: 52px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 52px; left: 0; right: 0;
    background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    padding: 8px 16px 16px; gap: 4px; z-index: 799;
  }
  .band { border-radius: 16px; }
  .dbar .dlabel { min-width: 80px; font-size: .8125rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2,1fr); }
}

/* Inline list (nav breadcrumb etc.) */
.inline-list { display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; }
.inline-list li { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--ink-2); }
.inline-list li + li::before { content: '/'; color: var(--ink-3); }

/* Section intro block */
.section-intro { max-width: var(--prose); margin-bottom: clamp(24px,3.5vw,44px); }
.section-intro p { font-size: clamp(1rem,1.4vw,1.125rem); color: var(--ink-2); }

/* Avatar / thumbnail */
.avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  background: var(--paper-2);
  flex-shrink: 0;
}
.avatar-lg { width: 72px; height: 72px; }
.avatar-sm { width: 32px; height: 32px; }

/* Person card row */
.person-row { display: flex; align-items: center; gap: 14px; }
.person-row .person-info { display: flex; flex-direction: column; gap: 2px; }
.person-row .person-name { font-weight: 600; color: var(--ink); line-height: 1.2; }
.person-row .person-sub  { font-size: .8125rem; color: var(--ink-3); }

/* Spinner */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid var(--line-2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton loading */
.skel {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--line) 50%, var(--paper-2) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.5s ease infinite;
  border-radius: 6px;
}
@keyframes skel-shimmer { to { background-position: -200% 0; } }
.skel-text  { height: 1em; margin-block: .4em; }
.skel-title { height: 1.8em; width: 60%; }
.skel-card  { height: 120px; border-radius: var(--r); }

/* Notice / alert strip */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(12px,2vw,18px) clamp(14px,2.5vw,20px);
  border-radius: var(--r);
  font-size: .9375rem;
}
.notice-info  { background: var(--teal-soft); border: 1px solid rgba(31,140,124,.25); color: var(--teal-deep); }
.notice-warn  { background: var(--gold-soft); border: 1px solid rgba(201,138,43,.30); color: #7a500a; }
.notice-err   { background: var(--rose-soft); border: 1px solid rgba(198,107,114,.30); color: #8a2a30; }
[data-theme="mystical"] .notice-info  { color: var(--teal); }
[data-theme="mystical"] .notice-warn  { color: var(--gold); }
[data-theme="mystical"] .notice-err   { color: var(--rose); }
.notice .notice-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }

/* Divider with label */
.divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: clamp(20px,3vw,36px);
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.divider-label::before,.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
[data-theme="soft"] .divider-label { text-transform: lowercase; letter-spacing: .02em; }

/* Two-col key/value list */
.kv-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: .9375rem; }
.kv-list dt { color: var(--ink-3); font-weight: 500; white-space: nowrap; padding-block: .25em; }
.kv-list dd { color: var(--ink); padding-block: .25em; }

/* Sticky sidebar + content layout */
.page-with-sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(24px,3vw,40px);
  align-items: start;
}
.sidebar { position: sticky; top: 74px; }
.sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: block;
  padding: .38em .75em;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
  border-left: 2px solid transparent;
}
.sidebar-nav a:hover  { background: var(--teal-soft); color: var(--teal-deep); }
.sidebar-nav a.active { background: var(--teal-soft); color: var(--teal-deep); border-left-color: var(--teal); }
[data-theme="mystical"] .sidebar-nav a:hover,
[data-theme="mystical"] .sidebar-nav a.active { background: rgba(45,212,191,.08); color: var(--teal); border-left-color: var(--teal); }
@media (max-width: 800px) {
  .page-with-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* 11. UTILITIES */
.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.muted { color: var(--ink-3); } .teal { color: var(--teal); } .gold { color: var(--gold); } .rose { color: var(--rose); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.divider { border: none; border-top: 1px solid var(--line); margin-block: clamp(20px,3vw,36px); }

/* 12. PRINT */
@media print {
  body { background: #fff; color: #000; }
  header.nav,#bar,.toast-stack { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  a { color: #000; text-decoration: underline; }
}