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

/* ── LIGHT THEME (default) ── */
/* Tuned to bg-light.png: soft blue-grey (#b8cdd4) → warm peach (#e8b99a) gradient,
   volumetric white clay forms. Palette stays airy, warm-neutral, with a terracotta
   accent that echoes the peach glow and cool-slate secondaries. */
:root,
[data-theme="light"] {
  --cream: #f2ede8;                          /* warm off-white, echoes the peach glow */
  --ink: #2b2d35;                            /* near-black with a slight cool-blue cast */
  --ink-soft: #5c5f6e;                       /* muted slate, harmonises with blue-grey bg */
  --accent: #c9613a;                         /* terracotta — pulled from the warm peach zone */
  --glass: rgba(240,236,230,0.68);           /* warm frosted glass */
  --glass-border: rgba(255,255,255,0.82);
  --shadow: 0 8px 40px rgba(43,45,53,0.10);
  --shadow-hover: 0 20px 60px rgba(43,45,53,0.18);
  --c-red:    #c9613a;                       /* terracotta / warm peach accent */
  --c-blue:   #4d8aa8;                       /* desaturated teal-blue, matches bg cool zone */
  --c-green:  #5ea67a;                       /* sage green — neutral complement */
  --c-yellow: #d4a24e;                       /* warm amber, consistent with peach palette */
  --c-purple: #8b7ab8;                       /* dusty lavender — soft contrast */
  --bg-image: url('img/bg-light.png');
  --bg-image-sub: url('../img/bg-light.png');
  --overlay-start: rgba(242,237,232,0.78);   /* warm cream, lighter to let bg breathe */
  --overlay-mid:   rgba(230,225,220,0.62);
  --overlay-end:   rgba(232,228,224,0.72);
  --wave-fill: rgba(43,45,53,0.04);
  --line-fill: rgba(43,45,53,0.10);
  --pill-bg: rgba(43,45,53,0.06);
  --search-bg: rgba(240,236,230,0.68);
  --cat-pill-bg: rgba(43,45,53,0.06);
}

/* ── DARK THEME ── */
/* Tuned to bg-dark.png: near-black (#0a0610) canvas, deep crimson/scarlet fluid forms,
   electric blue + cyan accents, warm gold glowing edges.
   Palette is dramatic, jewel-toned, high-contrast. */
[data-theme="dark"] {
  --cream: #0c0810;                          /* near-black with a faint violet undertone */
  --ink: #f5ede8;                            /* warm off-white — avoids cold blue-white clash */
  --ink-soft: #a89faa;                       /* warm muted lavender-grey */
  --accent: #e84040;                         /* vivid crimson pulled from the dominant red forms */
  --glass: rgba(20,10,18,0.72);             /* very dark plum-black glass */
  --glass-border: rgba(220,80,80,0.14);      /* faint crimson rim — ties into the forms */
  --shadow: 0 8px 40px rgba(0,0,0,0.50);
  --shadow-hover: 0 20px 60px rgba(180,20,20,0.30); /* red-tinted glow on hover */
  --c-red:    #e84040;                       /* crimson — dominant form colour */
  --c-blue:   #4ac8f0;                       /* electric cyan — the bg's cool accent */
  --c-green:  #50d494;                       /* minted emerald — visible on dark, won't clash */
  --c-yellow: #f0b030;                       /* warm amber from the glowing edges */
  --c-purple: #c080f8;                       /* bright violet — complements the deep plum bg */
  --bg-image: url('img/bg-dark.png');
  --bg-image-sub: url('../img/bg-dark.png');
  --overlay-start: rgba(12,8,16,0.40);       /* slightly lighter — let the crimson forms glow through */
  --overlay-mid:   rgba(12,8,16,0.32);
  --overlay-end:   rgba(12,8,16,0.38);
  --wave-fill: rgba(232,64,64,0.05);         /* subtle crimson tint */
  --line-fill: rgba(232,64,64,0.18);         /* crimson-tinted lines */
  --pill-bg: rgba(232,64,64,0.08);
  --search-bg: rgba(20,10,18,0.72);
  --cat-pill-bg: rgba(232,64,64,0.08);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ── BACKGROUND ── */
.bg-layer {
  position: fixed; inset: 0;
  background-image: var(--bg-image-sub);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: background-image 0.35s;
}
.bg-layer.root { background-image: var(--bg-image); }

.bg-overlay {
  position: fixed; inset: 0;
  background: linear-gradient(160deg,
    var(--overlay-start) 0%,
    var(--overlay-mid) 40%,
    var(--overlay-end) 100%);
  backdrop-filter: blur(1px);
  z-index: 1;
  transition: background 0.35s ease;
}

/* ── BLOBS ── */
.blob {
  position: fixed; border-radius: 50%;
  filter: blur(80px); opacity: 0.22;
  pointer-events: none; z-index: 2;
  animation: drift 18s ease-in-out infinite alternate;
  transition: opacity 0.35s ease;
}
[data-theme="dark"] .blob { opacity: 0.13; }
/* Light blobs — warm terracotta + cool slate-blue + amber, matching bg-light.png palette */
.blob-1 { width:520px;height:520px;background:#c9613a;top:-140px;left:-100px;animation-delay:0s; }
.blob-2 { width:440px;height:440px;background:#4d8aa8;bottom:-80px;right:-80px;animation-delay:-6s; }
.blob-3 { width:320px;height:320px;background:#d4a24e;top:40%;left:60%;animation-delay:-12s; }

/* Dark blobs — deep crimson + electric cyan + warm amber, matching bg-dark.png palette */
[data-theme="dark"] .blob-1 { background:#c01020; }
[data-theme="dark"] .blob-2 { background:#1888c8; }
[data-theme="dark"] .blob-3 { background:#e08020; }

@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.06); }
}

/* ── PAGE WRAP ── */
.page {
  position: relative; z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

/* ── NAV ── */
nav {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 32px 0 0;
  animation: fadeDown 0.6s ease both;
  position: relative; z-index: 100;
}
.logo {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.5px;
  text-decoration: none;
  transition: color 0.35s ease;
}
.logo span { color: var(--accent); }
.nav-right {
  display: flex; align-items: center; gap: 10px;
}
.nav-pill {
  display: flex; gap: 6px; align-items: center;
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  border-radius: 50px; padding: 6px 10px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.nav-pill a {
  font-size: 0.83rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 6px 14px; border-radius: 50px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-pill a:hover,
.nav-pill a.active { background: var(--accent); color: #fff; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--glass);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.95rem;
  transition: background 0.2s, color 0.2s, transform 0.25s, border-color 0.35s ease;
  flex-shrink: 0;
  user-select: none;
}
.theme-toggle:hover {
  background: var(--accent);
  color: #fff;
  transform: rotate(20deg) scale(1.1);
  border-color: var(--accent);
}

/* ── SECTION LABEL ── */
.section-label {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem; font-weight: 500;
  color: var(--ink); margin: 52px 0 22px;
  display: flex; align-items: center; gap: 10px;
  animation: fadeUp 0.6s 0.15s ease both;
  transition: color 0.35s ease;
}
.section-label::after {
  content: ''; flex: 1; height: 1.5px;
  background: linear-gradient(90deg, var(--line-fill) 0%, transparent 100%);
  border-radius: 2px;
}

/* ── GRID ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

/* ── TOOL CARD ── */
.card {
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--glass-border);
  border-radius: 22px;
  padding: 26px 22px 22px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s, border-color 0.2s, background 0.35s ease;
  cursor: pointer; position: relative; overflow: hidden;
  animation: fadeUp 0.55s ease both;
}
.card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  border-radius: 22px 22px 0 0;
  opacity: 0; transition: opacity 0.25s;
}
.card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-hover); }
.card:hover::before { opacity: 1; }

.card-icon {
  font-size: 1.35rem; line-height: 1;
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.card-name {
  font-family: 'Fraunces', serif;
  font-size: 1rem; font-weight: 500;
  color: var(--ink); line-height: 1.3;
  transition: color 0.35s ease;
}
.card-desc {
  font-size: 0.80rem; color: var(--ink-soft);
  line-height: 1.55; flex: 1;
  transition: color 0.35s ease;
}
.card-arrow {
  font-size: 0.75rem; font-weight: 500;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; transition: gap 0.2s, color 0.2s;
}
.card-arrow i { transition: transform 0.2s; }
.card:hover .card-arrow { gap: 10px; color: var(--accent); }
.card:hover .card-arrow i { transform: translateX(3px); }

/* colour variants */
.c-red    .card-icon { background: color-mix(in srgb, var(--c-red)    14%, transparent); color: var(--c-red); }
.c-blue   .card-icon { background: color-mix(in srgb, var(--c-blue)   14%, transparent); color: var(--c-blue); }
.c-green  .card-icon { background: color-mix(in srgb, var(--c-green)  14%, transparent); color: var(--c-green); }
.c-yellow .card-icon { background: color-mix(in srgb, var(--c-yellow) 18%, transparent); color: var(--c-yellow); }
.c-purple .card-icon { background: color-mix(in srgb, var(--c-purple) 14%, transparent); color: var(--c-purple); }

.c-red::before    { background: linear-gradient(90deg, var(--c-red),    color-mix(in srgb, var(--c-red)    50%, #fff)); }
.c-blue::before   { background: linear-gradient(90deg, var(--c-blue),   color-mix(in srgb, var(--c-blue)   50%, #fff)); }
.c-green::before  { background: linear-gradient(90deg, var(--c-green),  color-mix(in srgb, var(--c-green)  50%, #fff)); }
.c-yellow::before { background: linear-gradient(90deg, var(--c-yellow), color-mix(in srgb, var(--c-yellow) 50%, #fff)); }
.c-purple::before { background: linear-gradient(90deg, var(--c-purple), color-mix(in srgb, var(--c-purple) 50%, #fff)); }

.c-red:hover    { border-color: color-mix(in srgb, var(--c-red)    38%, transparent); }
.c-blue:hover   { border-color: color-mix(in srgb, var(--c-blue)   38%, transparent); }
.c-green:hover  { border-color: color-mix(in srgb, var(--c-green)  38%, transparent); }
.c-yellow:hover { border-color: color-mix(in srgb, var(--c-yellow) 38%, transparent); }
.c-purple:hover { border-color: color-mix(in srgb, var(--c-purple) 38%, transparent); }

/* card stagger */
.card:nth-child(1)  { animation-delay:0.04s }
.card:nth-child(2)  { animation-delay:0.08s }
.card:nth-child(3)  { animation-delay:0.12s }
.card:nth-child(4)  { animation-delay:0.16s }
.card:nth-child(5)  { animation-delay:0.20s }
.card:nth-child(6)  { animation-delay:0.24s }
.card:nth-child(7)  { animation-delay:0.28s }
.card:nth-child(8)  { animation-delay:0.32s }
.card:nth-child(9)  { animation-delay:0.36s }
.card:nth-child(10) { animation-delay:0.40s }
.card:nth-child(11) { animation-delay:0.44s }
.card:nth-child(12) { animation-delay:0.48s }

/* ── FOOTER ── */
footer {
  text-align: center; padding: 52px 0 0;
  color: var(--ink-soft); font-size: 0.82rem; opacity: 0.7;
  transition: color 0.35s ease;
}

/* ── WAVE ── */
.wave { width:100%;height:40px;margin:-10px 0 40px;overflow:hidden; }
.wave svg { width:100%;height:100%; }

/* ── SEARCH ── */
.search-wrap {
  max-width: 480px; margin: 32px auto 0;
  position: relative;
}
.search-wrap input {
  width: 100%;
  padding: 14px 50px 14px 20px;
  border-radius: 50px;
  border: 1.5px solid var(--glass-border);
  background: var(--search-bg);
  backdrop-filter: blur(12px);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; color: var(--ink);
  box-shadow: var(--shadow); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.35s ease, color 0.35s ease;
}
.search-wrap input::placeholder { color: var(--ink-soft); opacity: 0.55; }
.search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,107,74,0.12); }
.search-icon {
  position:absolute; right:18px; top:50%;
  transform:translateY(-50%); color: var(--ink-soft);
  pointer-events:none; font-size:0.9rem; opacity: 0.6;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── BACK LINK ── */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 7px 18px; border-radius: 50px;
  background: var(--glass); border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.35s ease;
  margin-top: 28px; width: fit-content;
}
.back-link:hover { background: var(--ink); color:#fff; transform: translateX(-3px); }
.back-link i { transition: transform 0.2s; }
.back-link:hover i { transform: translateX(-2px); }

/* ── CATEGORY HERO ── */
.cat-hero {
  padding: 52px 0 36px;
  animation: fadeUp 0.7s 0.1s ease both;
}
.cat-hero .hero-tag {
  display: inline-block;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  border-radius: 50px; padding: 5px 16px;
  margin-bottom: 18px;
}
.cat-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.2rem,5vw,3.6rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -1.5px; margin-bottom: 12px;
}
.cat-hero p { font-size: 1rem; color: var(--ink-soft); max-width: 420px; line-height: 1.65; }

/* ── TOOL PAGE ── */
.tool-hero {
  padding: 52px 0 36px;
  animation: fadeUp 0.7s 0.1s ease both;
}
.tool-hero .breadcrumb {
  display: flex; gap: 6px; align-items: center;
  font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 16px;
}
.tool-hero .breadcrumb a { color: var(--accent); text-decoration: none; }
.tool-hero .breadcrumb a:hover { text-decoration: underline; }
.tool-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem,4.5vw,3rem);
  font-weight: 700; letter-spacing: -1px; margin-bottom: 10px;
}
.tool-hero p { font-size: 1rem; color: var(--ink-soft); line-height: 1.65; }

.tool-frame {
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--glass-border);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: var(--shadow);
  animation: fadeUp 0.6s 0.2s ease both;
  min-height: 300px;
  transition: background 0.35s ease, border-color 0.35s ease;
}

/* ── CATEGORY CARDS (index) ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.cat-card {
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1.5px solid var(--glass-border);
  border-radius: 22px; padding: 28px 24px 22px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.25s, border-color 0.2s, background 0.35s ease;
  position: relative; overflow: hidden;
  animation: fadeUp 0.55s ease both;
}
.cat-card::before {
  content:''; position:absolute; top:0;left:0;right:0;height:3px;
  border-radius:22px 22px 0 0; opacity:0; transition:opacity 0.25s;
}
.cat-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-hover); }
.cat-card:hover::before { opacity:1; }
.cat-card-top { display:flex; align-items:center; gap:14px; }
.cat-icon {
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;flex-shrink:0;
}
.cat-name { font-family:'Fraunces',serif;font-size:1.15rem;font-weight:500;color:var(--ink); transition: color 0.35s ease; }
.cat-count { font-size:0.78rem;color:var(--ink-soft); }
.cat-desc { font-size:0.82rem;color:var(--ink-soft);line-height:1.55; }
.cat-pills { display:flex;flex-wrap:wrap;gap:6px; }
.cat-pill {
  font-size:0.70rem;font-weight:500;
  background: var(--cat-pill-bg);
  border-radius:50px;padding:3px 10px;color:var(--ink-soft);
  transition: background 0.35s ease;
}
.cat-arrow {
  font-size:0.78rem;font-weight:500;color:var(--ink-soft);
  margin-top:auto;display:flex;align-items:center;gap:6px;
  transition:gap 0.2s, color 0.2s;
}
.cat-card:hover .cat-arrow { gap:10px; color: var(--accent); }
.cat-arrow i { transition: transform 0.2s; }
.cat-card:hover .cat-arrow i { transform: translateX(3px); }
.cat-card:nth-child(1){animation-delay:.05s}.cat-card:nth-child(2){animation-delay:.10s}
.cat-card:nth-child(3){animation-delay:.15s}.cat-card:nth-child(4){animation-delay:.20s}
.cat-card:nth-child(5){animation-delay:.25s}

/* colour variants for cat-card — uses CSS vars so light/dark both harmonise */
.c-red .cat-icon{background:color-mix(in srgb, var(--c-red) 14%, transparent); color: var(--c-red);}
.c-blue .cat-icon{background:color-mix(in srgb, var(--c-blue) 14%, transparent); color: var(--c-blue);}
.c-green .cat-icon{background:color-mix(in srgb, var(--c-green) 14%, transparent); color: var(--c-green);}
.c-yellow .cat-icon{background:color-mix(in srgb, var(--c-yellow) 18%, transparent); color: var(--c-yellow);}
.c-purple .cat-icon{background:color-mix(in srgb, var(--c-purple) 14%, transparent); color: var(--c-purple);}
.c-red.cat-card::before{background:linear-gradient(90deg,var(--c-red),color-mix(in srgb,var(--c-red) 50%,#fff));}
.c-blue.cat-card::before{background:linear-gradient(90deg,var(--c-blue),color-mix(in srgb,var(--c-blue) 50%,#fff));}
.c-green.cat-card::before{background:linear-gradient(90deg,var(--c-green),color-mix(in srgb,var(--c-green) 50%,#fff));}
.c-yellow.cat-card::before{background:linear-gradient(90deg,var(--c-yellow),color-mix(in srgb,var(--c-yellow) 50%,#fff));}
.c-purple.cat-card::before{background:linear-gradient(90deg,var(--c-purple),color-mix(in srgb,var(--c-purple) 50%,#fff));}
.c-red.cat-card:hover{border-color:color-mix(in srgb, var(--c-red) 38%, transparent);}
.c-blue.cat-card:hover{border-color:color-mix(in srgb, var(--c-blue) 38%, transparent);}
.c-green.cat-card:hover{border-color:color-mix(in srgb, var(--c-green) 38%, transparent);}
.c-yellow.cat-card:hover{border-color:color-mix(in srgb, var(--c-yellow) 38%, transparent);}
.c-purple.cat-card:hover{border-color:color-mix(in srgb, var(--c-purple) 38%, transparent);}

/* ── OTHER CATS STRIP ── */
.other-cats { margin-top: 64px; }
.other-cats-grid { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.other-cat-chip {
  display:flex; align-items:center; gap:8px;
  font-size:0.83rem; font-weight:500;
  color:var(--ink-soft); text-decoration:none;
  padding:8px 18px; border-radius:50px;
  background:var(--glass); border:1.5px solid var(--glass-border);
  box-shadow:var(--shadow); backdrop-filter:blur(10px);
  transition:background 0.2s, color 0.2s, transform 0.15s, border-color 0.35s ease;
}
.other-cat-chip:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }

/* ── MISC ── */
.card.search-shown{animation:none!important;opacity:1!important;transform:none!important;}

/* ── RESPONSIVE ── */
@media (max-width:600px) {
  .nav-pill { display:none; }
  .grid { grid-template-columns:1fr 1fr; gap:12px; }
  .tool-frame { padding:22px 16px; }
}

/* ── AUTH NAV ELEMENTS ── */
.nav-auth-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.82rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 8px 16px; border-radius: 50px;
  background: var(--glass); border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.nav-auth-btn:hover {
  background: var(--accent); color: #fff;
  border-color: var(--accent); transform: translateY(-1px);
}

/* ── USER MENU ── */
.nav-user-menu { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 50px;
  background: var(--glass); border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow); backdrop-filter: blur(12px);
  cursor: pointer; color: var(--ink);
  font-family: 'DM Sans', sans-serif; font-size: 0.83rem; font-weight: 500;
  transition: background 0.2s, transform 0.2s;
}
.nav-user-btn:hover { background: var(--pill-bg); transform: translateY(-1px); }
.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--accent);
}
.nav-avatar-initial {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.nav-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chevron { font-size: 0.65rem; transition: transform 0.2s; color: var(--ink-soft); }
.nav-user-menu.open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 210px;
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px; padding: 8px;
  box-shadow: var(--shadow-hover);
  opacity: 0; transform: translateY(-6px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
}
.nav-dropdown.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: all;
}
.nav-dropdown-header {
  padding: 10px 12px 10px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 6px;
}
.nav-dd-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.nav-dd-email { font-size: 0.75rem; color: var(--ink-soft); margin-top: 2px; }
.nav-dd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; border-radius: 12px;
  font-family: 'DM Sans', sans-serif; font-size: 0.83rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  background: none; border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.nav-dd-item:hover { background: var(--pill-bg); color: var(--ink); }
.nav-dd-signout { color: var(--accent); }
.nav-dd-signout:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

/* ── SIGN-IN NUDGE BANNER ── */
.signin-nudge {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 500; width: min(560px, calc(100vw - 32px));
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s, transform 0.35s;
}
.signin-nudge.visible {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nudge-inner {
  display: flex; align-items: center; gap: 14px;
  background: var(--glass); backdrop-filter: blur(20px);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px; padding: 16px 18px;
  box-shadow: var(--shadow-hover);
}
.nudge-icon {
  font-size: 1.4rem; color: var(--accent); flex-shrink: 0;
}
.nudge-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.nudge-text strong { font-size: 0.88rem; color: var(--ink); }
.nudge-text span { font-size: 0.78rem; color: var(--ink-soft); }
.nudge-btn {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 50px;
  background: var(--accent); color: #fff;
  font-size: 0.82rem; font-weight: 500; text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.nudge-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.nudge-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.9rem; padding: 4px;
  flex-shrink: 0; transition: color 0.2s;
}
.nudge-close:hover { color: var(--ink); }