/* ═══════════════════════════════════════════════════════════════════════
   LinguarAI — Shared Design System  ·  "Warm Gold Clay"
   Soft, puffy, cushion-like. Gold/amber on cream + peach. Rounded everything.
   Surfaces dome via inner highlight + inner shade (claymorphism).
   Light is the star; dark is a cosy night-gold variant. [data-theme]
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap');

:root{
  /* ── LIGHT (default) · Warm Gold Clay ── */
  --bg:#f6efe1; --bg-2:#fdfbf6;
  --bg-grad:radial-gradient(120% 120% at 0% 0%,#fdf3e1 0%,#faf0e0 38%,#f5eddd 70%,#fbf6ec 100%);
  --surface:#fffdf8; --surface-2:#f3eada; --surface-3:#e7d9bf;

  /* darker, high-contrast warm text so light mode reads easily */
  --text:#372b12; --text-2:#5f4f2f; --text-3:#7e6c41; --text-4:#a08c61;

  --primary:#c9850f; --primary-2:#f0a82a; --primary-ink:#42310a;
  --primary-soft:rgba(201,133,15,.16); --primary-line:rgba(201,133,15,.44);
  --accent:#14a08f; --accent-2:#2bbfac; --accent-ink:#043b34;
  --accent-soft:rgba(20,160,143,.16);
  --pink:#ef9f66; --pink-soft:rgba(239,159,102,.20);
  --peach:#f4a45f; --sun:#f4b431;
  --danger:#e5485f; --danger-soft:rgba(229,72,95,.16);
  --warning:#d98a13; --success:#1f9e7e;

  /* gradients */
  --grad:linear-gradient(135deg,#f7c24c 0%,#f0a82a 52%,#e3911c 100%);
  --grad-soft:linear-gradient(135deg,#fdf1d6,#fbe7c2);
  --grad-accent:linear-gradient(135deg,#22bdaa,#5fd6c6);

  /* clay shadows — soft-cushion: warm outer drop + bright halo, PLUS a gentle
     inner top highlight & inner bottom shade so each surface domes like a pillow */
  --clay:8px 12px 30px rgba(168,126,48,.24), -9px -9px 22px rgba(255,255,255,.95), inset 0 2px 2px rgba(255,255,255,.8), inset 0 -8px 15px rgba(168,126,48,.07);
  --clay-sm:5px 8px 19px rgba(168,126,48,.17), -5px -5px 14px rgba(255,255,255,.9), inset 0 1.5px 2px rgba(255,255,255,.75), inset 0 -5px 11px rgba(168,126,48,.05);
  --clay-lg:18px 26px 58px rgba(168,126,48,.28), -11px -11px 30px rgba(255,255,255,.96), inset 0 2px 3px rgba(255,255,255,.85), inset 0 -9px 18px rgba(168,126,48,.07);
  --clay-inset:inset 4px 5px 11px rgba(168,126,48,.22), inset -4px -4px 9px rgba(255,255,255,.92);
  --clay-press:inset 5px 6px 13px rgba(168,126,48,.34), inset -3px -3px 8px rgba(255,255,255,.6);
  --shadow-primary:0 12px 26px rgba(224,146,29,.40), inset 0 2px 3px rgba(255,255,255,.4), inset 0 -4px 9px rgba(120,72,8,.18);
  --shadow-sm:var(--clay-sm); --shadow:var(--clay); --shadow-lg:var(--clay-lg);

  --radius:22px; --radius-sm:15px; --radius-lg:30px; --radius-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Baloo 2','Nunito',system-ui,sans-serif;
  --nav-h:68px;
}
[data-theme="dark"]{
  /* ── DARK · Night Gold ── */
  --bg:#241d12; --bg-2:#2b2316;
  --bg-grad:radial-gradient(120% 120% at 0% 0%,#2e2515 0%,#241d12 45%,#1e1810 100%);
  --surface:#322817; --surface-2:#3c311d; --surface-3:#493b25;

  --text:#fbf3e2; --text-2:#dccca9; --text-3:#aa9a79; --text-4:#7c6f54;

  --primary:#f5b740; --primary-2:#ffc960; --primary-ink:#3a2a08;
  --primary-soft:rgba(245,183,64,.20); --primary-line:rgba(245,183,64,.46);
  --accent:#3fc9b8; --accent-2:#5fd6c6; --accent-ink:#043b34;
  --accent-soft:rgba(95,214,198,.18); --pink-soft:rgba(243,181,143,.16);
  --danger:#fb7185; --danger-soft:rgba(251,113,133,.18);

  --grad:linear-gradient(135deg,#ffc960 0%,#f5b740 52%,#eaa12a 100%);
  --grad-soft:linear-gradient(135deg,#3c311d,#453820);
  --grad-accent:linear-gradient(135deg,#4dd0c0,#7ee0bf);

  --clay:8px 12px 32px rgba(0,0,0,.48), -6px -6px 18px rgba(255,236,190,.05), inset 0 2px 2px rgba(255,236,190,.07), inset 0 -8px 15px rgba(0,0,0,.30);
  --clay-sm:5px 8px 19px rgba(0,0,0,.42), -3px -3px 12px rgba(255,236,190,.045), inset 0 1.5px 2px rgba(255,236,190,.06), inset 0 -5px 11px rgba(0,0,0,.24);
  --clay-lg:18px 26px 58px rgba(0,0,0,.58), -8px -8px 24px rgba(255,236,190,.05), inset 0 2px 3px rgba(255,236,190,.08), inset 0 -9px 18px rgba(0,0,0,.32);
  --clay-inset:inset 4px 5px 11px rgba(0,0,0,.50), inset -3px -3px 8px rgba(255,236,190,.05);
  --clay-press:inset 5px 6px 13px rgba(0,0,0,.6), inset -2px -2px 7px rgba(255,236,190,.04);
  --shadow-primary:0 12px 28px rgba(225,150,30,.44), inset 0 2px 3px rgba(255,236,190,.22), inset 0 -4px 9px rgba(0,0,0,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text);
  line-height:1.55;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
::selection{background:var(--pink-soft);color:var(--text)}
img,svg{display:block}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* scrollbars */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}

/* ── Ambient backdrop — soft dreamy pastel blobs ─────────────────────── */
.aura{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aura span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.50}
.aura .a1{width:44vmax;height:44vmax;background:var(--sun);top:-16vmax;left:-12vmax;animation:drift1 26s var(--ease) infinite alternate}
.aura .a2{width:40vmax;height:40vmax;background:var(--peach);bottom:-18vmax;right:-12vmax;animation:drift2 30s var(--ease) infinite alternate}
.aura .a3{width:30vmax;height:30vmax;background:var(--primary-2);top:40%;right:18%;opacity:.28;animation:drift1 34s var(--ease) infinite alternate}
[data-theme="dark"] .aura span{opacity:.30}
[data-theme="dark"] .aura .a3{opacity:.18}
@keyframes drift1{to{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-7vmax,-5vmax) scale(1.16)}}
@media (prefers-reduced-motion:reduce){.aura span{animation:none}}

/* ═══════════════ TOP BAR / NAV (injected by shell) ═══════════════ */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(16px,4vw,34px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.2px;color:var(--text)}
.brand .mark{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad);color:#fff;box-shadow:var(--shadow-primary);
  animation:markpop .6s var(--ease-bounce) both;
}
.brand .mark svg{width:21px;height:21px}
@keyframes markpop{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.nav{display:flex;gap:5px;margin-left:6px}
.nav a{
  position:relative;padding:10px 17px;border-radius:var(--radius-pill);
  font-size:14.5px;font-weight:700;color:var(--text-3);transition:.18s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a.active{color:#fff;background:var(--grad);box-shadow:var(--shadow-primary)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:11px}

.credit-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border-radius:var(--radius-pill);background:var(--surface);
  box-shadow:var(--clay-sm);font-size:13.5px;font-weight:800;transition:.2s var(--ease);
}
.credit-chip:hover{transform:translateY(-2px)}
.credit-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.credit-chip .amt{color:var(--text)}
.credit-chip.low .dot{background:var(--warning);box-shadow:0 0 0 4px rgba(249,179,76,.20)}
.credit-chip.empty .dot{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}

.icon-btn{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface);box-shadow:var(--clay-sm);color:var(--text-2);
  transition:.18s var(--ease);
}
.icon-btn:hover{color:var(--primary);transform:translateY(-2px)}
.icon-btn:active{box-shadow:var(--clay-press);transform:translateY(0)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.tight{width:36px;height:36px;border-radius:11px}
.icon-btn.tight svg{width:16px;height:16px}

.avatar-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:800;font-size:14px;font-family:var(--font-display);
  box-shadow:var(--shadow-primary);transition:.18s var(--ease-bounce);
}
.avatar-btn:hover{transform:translateY(-2px) scale(1.05)}

.menu{
  position:absolute;top:calc(var(--nav-h) - 4px);right:clamp(16px,4vw,34px);z-index:70;
  width:252px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--clay-lg);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.96);
  transform-origin:top right;transition:.24s var(--ease-bounce);
}
.menu.show{opacity:1;visibility:visible;transform:none}
.menu-head{padding:13px 13px 15px;border-bottom:1px solid var(--border);margin-bottom:7px}
.menu-name{font-weight:800;font-size:15px;font-family:var(--font-display)}
.menu-mail{font-size:12.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;font-size:14.5px;font-weight:700;color:var(--text-2);transition:.15s}
.menu-item:hover{background:var(--surface-2);color:var(--primary)}
.menu-item svg{width:17px;height:17px;opacity:.85}
.menu-item.danger{color:var(--danger)}
.menu-item.danger:hover{background:var(--danger-soft)}

/* ── Bottom nav (mobile) ── */
.bottomnav{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:60;display:none;
  grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  width:calc(100% - 28px);max-width:460px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);box-shadow:var(--clay);
  border-radius:var(--radius-pill);padding:8px;
}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0;border-radius:var(--radius-pill);color:var(--text-3);font-size:10.5px;font-weight:700;transition:.18s var(--ease)}
.bottomnav a svg{width:21px;height:21px}
.bottomnav a.active{color:#fff;background:var(--grad);box-shadow:var(--shadow-primary)}
.bottomnav a.active svg{transform:translateY(-1px)}

/* ═══════════════ LAYOUT ═══════════════ */
.shell{max-width:1080px;margin:0 auto;padding:clamp(22px,4vw,40px) clamp(16px,4vw,34px) 130px}
.view-head{margin-bottom:24px;animation:fadeUp .5s var(--ease) both}
.view-title{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.4px;line-height:1.08}
.view-title em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.view-sub{color:var(--text-3);margin-top:7px;font-size:15.5px;font-weight:600}

/* ═══════════════ CARDS / PANELS ═══════════════ */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--clay);
}
.card.glow{position:relative;box-shadow:var(--clay-lg)}

/* The gold accent is light, so dark ink reads far better than white on it */
.btn-primary,.nav a.active,.bottomnav a.active,.chip.active,
.avatar-btn,.brand .mark,.mic-btn{color:var(--primary-ink)}
.btn-primary .spinner{border-color:rgba(66,49,10,.35);border-top-color:var(--primary-ink)}
.card.glow::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(255,255,255,.7),transparent 34%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.65}
[data-theme="dark"] .card.glow::before{background:linear-gradient(160deg,rgba(255,236,190,.16),transparent 34%);opacity:.6}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:800;
  background:var(--surface);box-shadow:var(--clay-sm);color:var(--text);
  transition:.18s var(--ease);white-space:nowrap;font-family:var(--font);
}
.btn svg{width:17px;height:17px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);box-shadow:var(--clay-press)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary:hover{box-shadow:0 17px 34px rgba(224,146,29,.48),inset 0 2px 3px rgba(255,255,255,.42),inset 0 -4px 9px rgba(120,72,8,.18)}
.btn-primary:active{box-shadow:var(--shadow-primary)}
.btn-accent{background:var(--grad-accent);color:var(--accent-ink);box-shadow:0 12px 26px rgba(63,201,184,.36)}
.btn-ghost{background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--danger-soft);box-shadow:none;color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff;box-shadow:0 12px 26px var(--danger-soft)}
.btn-block{width:100%}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:13px}

/* ═══════════════ FORM CONTROLS ═══════════════ */
.field{margin-bottom:16px}
.field > label{display:block;font-size:12.5px;font-weight:800;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.input,.textarea,.select{
  width:100%;padding:14px 17px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;
  background:var(--surface-2);border:1.5px solid transparent;color:var(--text);
  box-shadow:var(--clay-inset);transition:.18s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--text-4);font-weight:600}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--primary-line);background:var(--surface);
  box-shadow:var(--clay-inset),0 0 0 4px var(--primary-soft);
}
.textarea{resize:vertical;min-height:120px;line-height:1.6}
.select{appearance:none;cursor:pointer;
  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='%23a08c61' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
.input-wrap{position:relative}
.input-wrap .input{padding-left:46px}
.input-wrap > svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-4);pointer-events:none}
.input-wrap .reveal{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--text-4)}
.input-wrap .reveal:hover{color:var(--primary);background:var(--surface-3)}

/* switch */
.switch{position:relative;width:48px;height:28px;border-radius:99px;background:var(--surface-2);box-shadow:var(--clay-inset);cursor:pointer;transition:.22s var(--ease);flex:none}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(120,86,20,.32);transition:.26s var(--ease-bounce)}
.switch.on{background:var(--grad);box-shadow:none}
.switch.on::after{transform:translateX(20px)}

/* chips */
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-pill);
  background:var(--surface);box-shadow:var(--clay-sm);font-size:13.5px;font-weight:700;color:var(--text-2);transition:.16s var(--ease)}
.chip:hover{color:var(--text);transform:translateY(-1px)}
.chip.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-primary)}

/* ═══════════════ SPINNERS / SKELETON ═══════════════ */
.spinner{width:17px;height:17px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex:none}
.btn:not(.btn-primary):not(.btn-accent) .spinner{border-color:var(--border-2);border-top-color:var(--primary)}
.spinner-lg{width:36px;height:36px;border:3.5px solid var(--surface-3);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
.center-spinner{display:grid;place-items:center;padding:60px 0}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:var(--radius-sm)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ═══════════════ EMPTY STATES ═══════════════ */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:50px 20px;text-align:center;color:var(--text-3)}
.empty .empty-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--surface-2);box-shadow:var(--clay-inset);color:var(--primary)}
.empty .empty-icon svg{width:28px;height:28px}
.empty p{font-size:14.5px;max-width:300px;font-weight:600}

/* ═══════════════ TOAST ═══════════════ */
.toast-host{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
@media(min-width:760px){.toast-host{bottom:28px;right:28px;left:auto;transform:none;align-items:flex-end}}
.toast{display:flex;align-items:center;gap:11px;padding:14px 20px;border-radius:var(--radius-sm);
  background:var(--surface);box-shadow:var(--clay);
  font-size:14px;font-weight:700;color:var(--text);pointer-events:auto;
  animation:toastIn .4s var(--ease-bounce) both;max-width:380px}
.toast svg{width:19px;height:19px;flex:none}
.toast.fade{animation:toastOut .26s var(--ease) forwards}
.toast.success{box-shadow:var(--clay),0 0 0 1.5px rgba(52,211,153,.4)}
.toast.error{box-shadow:var(--clay),0 0 0 1.5px rgba(251,113,133,.4)}
.toast.warning{box-shadow:var(--clay),0 0 0 1.5px rgba(249,179,76,.4)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ═══════════════ MODAL ═══════════════ */
.modal-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--bg) 55%,rgba(40,28,70,.5));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:.26s var(--ease)}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--clay-lg);padding:32px;
  transform:translateY(18px) scale(.95);transition:.32s var(--ease-bounce);max-height:90vh;overflow:auto}
.modal-overlay.show .modal{transform:none}
.modal-close{position:absolute;top:18px;right:18px}
.modal-title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.3px}
.modal-sub{color:var(--text-3);font-size:14px;margin:6px 0 24px;font-weight:600}

.form-error{display:none;align-items:center;gap:9px;padding:12px 15px;border-radius:var(--radius-sm);
  background:var(--danger-soft);color:var(--danger);
  font-size:13.5px;font-weight:700;margin-bottom:15px}
.form-error.show{display:flex;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ═══════════════ ANIMATIONS / UTILITIES ═══════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.stagger > *{animation:fadeUp .5s var(--ease) both}
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.16s}
.stagger > *:nth-child(4){animation-delay:.22s}
.stagger > *:nth-child(5){animation-delay:.28s}
.stagger > *:nth-child(6){animation-delay:.34s}
.hide{display:none !important}
.muted{color:var(--text-3)}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:760px){
  .nav{display:none}
  .bottomnav{display:grid}
  .shell{padding-bottom:110px}
  :root{--nav-h:60px}
}