:root {
  --bg: #f0f2f5;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --line: #e4e6eb;
  --text: #050505;
  --muted: #65676b;
  --brand: #2f6fed;
  --brand-soft: #e7f0ff;
  --ok: #31a24c;
  --warn: #f7b928;
  --danger: #e41e3f;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --speed: .22s;
  --nav-h: 56px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#17181c; --surface:#232428; --surface-2:#2b2d33; --line:#34363c;
    --text:#e7e9ee; --muted:#9aa0a8; --brand:#5b8dff; --brand-soft:#22304d;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior-y: none; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  touch-action: manipulation;
}
button,input,textarea,select { font:inherit; color:inherit; }
/* 16px inputs: Safari on iOS zooms into anything smaller */
input, select, textarea { font-size:16px; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ----------------------------------------------------------- top bar + nav */

.topbar {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  height:calc(var(--nav-h) + var(--sat)); padding:var(--sat) 16px 0;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.4px; }
.logo-mark {
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),#8f5bff); color:#fff; font-size:16px; flex:none;
}
.topbar-spacer { flex:1; }
.avatar {
  width:34px; height:34px; border-radius:50%; flex:none; user-select:none;
  background:linear-gradient(135deg,#6a9bff,#b47bff); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13px;
}
.avatar.sm { width:30px; height:30px; font-size:12px; }
.avatar.lg { width:76px; height:76px; font-size:26px; }

.topnav { display:flex; gap:2px; margin-left:18px; height:100%; }
/* Desktop navigation lives in the right column; the topnav only comes back on
   mobile, where it turns into the bottom tab bar. */
.topnav[hidden] { display:none; }
.nav-item {
  display:flex; align-items:center; gap:8px; padding:0 16px; height:100%;
  background:none; border:0; cursor:pointer; font-weight:600; color:var(--muted);
  position:relative; min-width:44px; justify-content:center;
  transition:color var(--speed) ease, background var(--speed) ease;
}
.nav-item:hover { background:var(--surface-2); border-radius:10px; }
.nav-item.active { color:var(--brand); }
.nav-item.active::after {
  content:""; position:absolute; left:10%; right:10%; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--brand);
  animation:grow var(--speed) ease both;
}
.nav-ico { font-size:19px; line-height:1; }

/* ------------------------------------------------------------------ layout */

/* Content left, identity + navigation in the right column (the space used to sit empty). */
.layout {
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start;
  max-width:1080px; margin:16px auto; padding:0 16px;
}
.side { position:sticky; top:calc(var(--nav-h) + var(--sat) + 16px); display:grid; gap:16px; }
.side .card { margin-bottom:0; }
.side .hero { flex-direction:column; text-align:center; gap:10px; padding:18px 16px; }
.side .hero h2 { font-size:16px; }
.side-stats .stat-row { margin-top:0; }
.side-stats .stat { flex:1 1 60px; text-align:center; padding:8px 6px; }
.side-stats .stat b { font-size:16px; }
.sidenav { display:grid; gap:3px; }
.sidenav .nav-item {
  width:100%; justify-content:flex-start; height:auto; padding:11px 14px;
  border-radius:10px; gap:12px; background:var(--surface); border:1px solid var(--line);
}
.sidenav .nav-item::after { display:none; }
.sidenav .nav-item.active { background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-bottom:16px;
  animation:rise var(--speed) ease both;
}
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.card h2 { margin:0 0 4px; font-size:17px; }
.card .sub { color:var(--muted); font-size:13px; margin-bottom:12px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:rise var(--speed) ease both; }

.hero {
  display:flex; align-items:center; gap:16px; border:0; color:#fff;
  background:linear-gradient(120deg,var(--brand),#8f5bff);
}
.hero h2 { color:#fff; }
.hero .sub { color:#fff; opacity:.85; margin:0; }
.stat-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.stat { flex:1 1 120px; background:var(--surface-2); border-radius:10px; padding:10px 12px; }
.stat b { display:block; font-size:19px; }
.stat span { color:var(--muted); font-size:12px; }

.item {
  display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px;
  transition:background var(--speed) ease, transform var(--speed) ease;
}
.item:hover { background:var(--surface-2); transform:translateX(2px); }
.item + .item { border-top:1px solid var(--line); }
.item .grow { flex:1; min-width:0; }
.item .title { font-weight:600; }
.item .meta { color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }

.badge {
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.2px;
  background:var(--surface-2); color:var(--muted);
}
.badge.ok { background:rgba(49,162,76,.14); color:var(--ok); }
.badge.warn { background:rgba(247,185,40,.16); color:#a97b06; }
.badge.brand { background:var(--brand-soft); color:var(--brand); }
.badge.danger { background:rgba(228,30,63,.12); color:var(--danger); }

.field { display:grid; gap:5px; margin-bottom:12px; }
.field label { font-size:12.5px; color:var(--muted); font-weight:600; }
.field input, .field textarea, .field select {
  background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:11px 12px; outline:none; width:100%;
  transition:border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.btn {
  background:var(--brand); color:#fff; border:0; border-radius:10px;
  padding:11px 16px; font-weight:650; cursor:pointer; min-height:44px;
  transition:filter var(--speed) ease, transform var(--speed) ease;
}
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:scale(.97); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }
.btn.ghost { background:var(--surface-2); color:var(--text); }
.btn.sm { padding:8px 12px; font-size:13px; min-height:36px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.empty { text-align:center; color:var(--muted); padding:28px 8px; }

/* -------------------------------------------------------------------- chat */

/* floating chat: launcher button + popup panel in the bottom-right corner */
.chat-fab {
  position:fixed; right:20px; bottom:calc(20px + var(--sab)); z-index:90;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),#8f5bff); color:#fff; font-size:24px;
  box-shadow:0 6px 20px rgba(47,111,237,.45);
  transition:transform var(--speed) ease, box-shadow var(--speed) ease;
}
.chat-fab:hover { transform:scale(1.07); }
.chat-fab:active { transform:scale(.93); }
.chat-fab.has-unread { animation:fabpulse 1.6s ease infinite; }
@keyframes fabpulse {
  0%,100% { box-shadow:0 6px 20px rgba(47,111,237,.45); }
  50% { box-shadow:0 6px 26px rgba(228,30,63,.55); }
}
.fab-badge {
  position:absolute; top:-4px; right:-4px; min-width:22px; height:22px;
  border-radius:999px; background:var(--danger); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; padding:0 5px;
  border:2px solid var(--bg);
}
.tab-badge {
  display:inline-grid; place-items:center; min-width:18px; height:18px;
  border-radius:999px; background:var(--danger); color:#fff;
  font-size:10.5px; font-weight:800; padding:0 4px; margin-left:5px; vertical-align:middle;
}
.chat-pop {
  position:fixed; right:20px; bottom:calc(90px + var(--sab)); z-index:89;
  width:min(380px, calc(100vw - 32px));
  height:min(560px, calc(100dvh - 130px));
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.97); pointer-events:none;
  transition:opacity var(--speed) ease, transform var(--speed) ease;
}
.chat-pop.open { opacity:1; transform:none; pointer-events:auto; }
.chat-min {
  flex:none; width:44px; background:none; border:0; color:var(--muted);
  font-size:18px; font-weight:800; cursor:pointer;
  transition:background var(--speed) ease;
}
.chat-min:hover { background:var(--surface-2); }
.chat-tabs { display:flex; border-bottom:1px solid var(--line); }
.chat-tab {
  flex:1; padding:13px 8px; background:none; border:0; font-weight:650;
  color:var(--muted); cursor:pointer; position:relative; min-height:44px;
  transition:color var(--speed) ease, background var(--speed) ease;
}
.chat-tab:hover { background:var(--surface-2); }
.chat-tab.active { color:var(--brand); }
.chat-tab.active::after {
  content:""; position:absolute; left:12%; right:12%; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:var(--brand); animation:grow var(--speed) ease both;
}
@keyframes grow { from { transform:scaleX(.2); opacity:0; } to { transform:none; opacity:1; } }
.chat-body {
  flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column;
  gap:10px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.msg { display:flex; gap:9px; animation:pop var(--speed) ease both; }
@keyframes pop {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to { opacity:1; transform:none; }
}
.msg .bubble {
  background:var(--surface-2); border-radius:14px 14px 14px 4px;
  padding:8px 12px; max-width:78%; word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.mine { flex-direction:row-reverse; }
.msg.mine .bubble { background:var(--brand); color:#fff; border-radius:14px 14px 4px 14px; }
.msg.mine .bubble .who a { color:#fff; }
.msg .who { font-size:12px; font-weight:700; margin-bottom:2px; opacity:.9; }
.msg .time { font-size:10.5px; opacity:.6; margin-top:3px; text-align:right; }
.msg .src {
  font-size:10px; padding:1px 6px; border-radius:999px;
  background:rgba(127,127,127,.18); margin-left:6px; vertical-align:middle;
}
.chat-input {
  display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); background:var(--surface);
}
.chat-input input {
  flex:1; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:10px 14px; outline:none; min-width:0;
  transition:border-color var(--speed) ease, box-shadow var(--speed) ease;
}
.chat-input input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.chat-send {
  width:44px; height:44px; border-radius:50%; border:0; background:var(--brand);
  color:#fff; cursor:pointer; flex:none;
  transition:transform var(--speed) ease, filter var(--speed) ease;
}
.chat-send:hover { filter:brightness(1.08); }
.chat-send:active { transform:scale(.9); }
.live-dot {
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  display:inline-block; margin-right:5px; animation:blink 2s infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }

/* -------------------------------------------------------------------- auth */

.auth-wrap { display:block; }
.auth-center {
  min-height:100vh; min-height:100dvh;
  display:grid; place-items:center; padding:24px;
}
.auth-card {
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow); padding:28px; animation:rise .3s ease both;
}
.auth-card h1 { margin:14px 0 4px; font-size:22px; }
.auth-card p.sub { color:var(--muted); margin:0 0 20px; font-size:14px; }
.auth-step { display:none; }
.auth-step.active { display:block; animation:rise var(--speed) ease both; }
.note { font-size:12.5px; color:var(--muted); margin-top:12px; }
.error {
  background:rgba(228,30,63,.1); color:var(--danger); border-radius:9px;
  padding:9px 12px; font-size:13px; margin-bottom:12px; animation:shake .3s ease;
}
@keyframes shake {
  0%,100% { transform:none; } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); }
}
.toast {
  position:fixed; left:50%; bottom:calc(26px + var(--sab)); transform:translateX(-50%) translateY(20px);
  background:#1c1e21; color:#fff; padding:11px 18px; border-radius:999px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:200; font-size:14px;
  transition:opacity var(--speed) ease, transform var(--speed) ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.skeleton {
  height:58px; border-radius:10px; margin-bottom:10px;
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:shimmer 1.3s ease infinite;
}
@keyframes shimmer { from { background-position:100% 0; } to { background-position:0 0; } }

/* ------------------------------------------------- mobile: app-like layout */

@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; margin:12px auto; padding:0 12px; }
  .logo-text, .logout-btn { display:none; }

  /* top nav becomes a fixed bottom tab bar, like a native app */
  .topnav {
    position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0; height:auto;
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + var(--sab));
    display:flex; justify-content:space-around;
    box-shadow:0 -1px 8px rgba(0,0,0,.06);
  }
  .nav-item {
    flex-direction:column; gap:3px; padding:4px 8px; min-width:52px; min-height:48px;
    font-size:10.5px; font-weight:600; border-radius:12px; height:auto;
  }
  .nav-item.active::after { display:none; }
  .nav-item.active { background:var(--brand-soft); }
  .nav-ico { font-size:21px; }
  body { padding-bottom:calc(64px + var(--sab)); }

  /* the popup sits above the bottom tab bar and goes nearly full screen */
  .chat-fab { bottom:calc(74px + var(--sab)); }
  .chat-pop {
    right:8px; left:8px; width:auto;
    bottom:calc(140px + var(--sab));
    bottom:calc(74px + var(--sab) + 62px);
    height:calc(100dvh - var(--nav-h) - var(--sat) - 74px - var(--sab) - 74px);
  }

  .hero { padding:14px; }
  .avatar.lg { width:60px; height:60px; font-size:22px; }
}

/* installed to the home screen: tighten paddings, no rubber-band feel */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: contain; }
  .topbar { box-shadow:none; }
}

/* --------------------------------------------------- hero compact + quest */

.hero.compact { padding:14px 16px; }
.hero.compact .grow { flex:1; min-width:0; }
.hero-stats { display:flex; gap:14px; text-align:center; }
.hero-stats b { display:block; font-size:18px; }
.hero-stats span { font-size:11px; opacity:.85; }

.quest { padding:14px 16px; }
.quest-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.quest-head h2 { margin:0; }
.quest-track {
  display:flex; gap:8px; overflow-x:auto; padding:12px 2px 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.quest-track::-webkit-scrollbar { display:none; }
.q-step {
  flex:none; display:flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; font-size:13px; font-weight:650;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  transition:transform var(--speed) ease;
}
.q-step .q-ico {
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; background:var(--line); flex:none;
}
.q-step.done { color:var(--ok); border-color:rgba(49,162,76,.35); background:rgba(49,162,76,.08); }
.q-step.done .q-ico { background:var(--ok); color:#fff; }
.q-step.current {
  color:var(--brand); border-color:var(--brand); background:var(--brand-soft);
  animation:questglow 2.2s ease infinite;
}
.q-step.current .q-ico { background:var(--brand); color:#fff; }
@keyframes questglow {
  0%,100% { box-shadow:0 0 0 0 rgba(47,111,237,.0); }
  50% { box-shadow:0 0 0 5px rgba(47,111,237,.14); }
}
.q-step.locked { opacity:.6; }
.quest-note { margin:4px 0 0; font-size:12.5px; color:var(--muted); }

@media (max-width:900px) {
  .hero-stats { display:none; }
}

/* ------------------------------------------------------ slogan + landing copy */

.tagline {
  margin:10px 0 0; font-size:13.5px; font-weight:650; line-height:1.35;
  background:linear-gradient(90deg,var(--brand),#8f5bff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--brand);
}
.logo-slogan {
  display:block; font-size:10.5px; font-weight:600; color:var(--muted);
  letter-spacing:.1px; margin-top:-2px;
}
/* Muted marketing copy well below the centered card: readable for crawlers,
   quiet for humans. */
.landing {
  width:100%; max-width:430px; margin:-8vh auto 0; padding:0 18px 56px;
  color:var(--muted); opacity:.75; font-size:12.5px; text-align:center;
}
.landing h2 { font-size:13px; color:var(--muted); margin:0 0 6px; font-weight:650; }
.landing p { margin:0 0 10px; line-height:1.55; }
.landing ul { margin:0; padding-left:0; list-style:none; }
.landing li { margin-bottom:5px; line-height:1.5; }
.landing b { color:var(--muted); font-weight:650; }

@media (max-width:900px) {
  .logo-slogan { display:none; }
}

/* ---------------------------------------------------- consent, bell, quest */

.consent {
  display:flex; gap:9px; align-items:flex-start; margin:4px 0 16px;
  font-size:12.5px; color:var(--muted); line-height:1.45; cursor:pointer;
}
.consent input { margin-top:2px; width:17px; height:17px; flex:none; accent-color:var(--brand); }

.bell {
  position:relative; width:38px; height:38px; border-radius:50%; border:0;
  background:var(--surface-2); font-size:17px; cursor:pointer; flex:none;
  transition:background var(--speed) ease, transform var(--speed) ease;
}
.bell:hover { background:var(--brand-soft); }
.bell:active { transform:scale(.92); }

.q-step { cursor:pointer; }
.q-step.locked { cursor:default; }
.gate-card { border-color:var(--warn); }
.gate-item {
  display:flex; align-items:center; gap:10px; padding:10px 2px;
  border-bottom:1px solid var(--line);
}
.gate-item:last-child { border-bottom:0; }
.gate-item .tick {
  width:22px; height:22px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:12px; background:var(--surface-2); color:var(--muted);
}
.gate-item.done .tick { background:var(--ok); color:#fff; }
.gate-item.todo .tick { background:var(--warn); color:#fff; }
.gate-item .grow { flex:1; min-width:0; }
.gate-item .title { font-weight:600; font-size:14px; }
.gate-item .meta { color:var(--muted); font-size:12.5px; }

.notif {
  display:flex; gap:11px; padding:12px 2px; border-bottom:1px solid var(--line);
  animation:rise var(--speed) ease both;
}
.notif:last-child { border-bottom:0; }
.notif.unread { background:var(--brand-soft); border-radius:10px; padding-left:10px; }
.notif .dot { width:8px; height:8px; border-radius:50%; background:var(--brand); margin-top:6px; flex:none; }
.notif .grow { flex:1; min-width:0; }
.notif .title { font-weight:650; font-size:14px; }
.notif .body { color:var(--muted); font-size:13px; line-height:1.45; }
.notif .when { color:var(--muted); font-size:11px; margin-top:3px; }

.pref-cat { margin-bottom:18px; }
.pref-cat h3 { font-size:14px; margin:0 0 2px; }
.pref-cat .hint { color:var(--muted); font-size:12px; margin:0 0 8px; }
.pref-row {
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line);
}
.pref-row:last-child { border-bottom:0; }
.pref-row .grow { flex:1; min-width:0; }
.pref-row .title { font-size:13.5px; font-weight:600; }
.pref-row .desc { color:var(--muted); font-size:12px; line-height:1.4; }
.pref-row .lock { font-size:12px; color:var(--muted); }
.switch { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.switch input { width:16px; height:16px; accent-color:var(--brand); }
.switch input:disabled { opacity:.45; }

.bot-dot { margin-right:4px; }
.ai-intro {
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:6px; font-size:13px; color:var(--muted); line-height:1.5;
}
.ai-intro .head {
  display:flex; align-items:center; gap:8px; color:var(--text);
  font-weight:700; font-size:13.5px; margin-bottom:5px;
}
.ai-intro .bot {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),#8f5bff); font-size:14px;
}
.ai-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.ai-btn {
  border:1px solid var(--brand); background:var(--brand-soft); color:var(--brand);
  border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:650; cursor:pointer;
  transition:background var(--speed) ease, transform var(--speed) ease;
}
.ai-btn:hover { background:var(--brand); color:#fff; }
.ai-btn:active { transform:scale(.95); }


/* --------------------------------------- blocked request buttons + tooltips */

.btn.blocked {
  background:var(--surface-2); color:var(--muted); border:1px dashed var(--line);
  cursor:help;
}
.btn.blocked:hover { filter:none; background:var(--brand-soft); color:var(--brand); }

@media (max-width: 900px) {
  .layout { grid-template-columns:1fr; }
  /* On a phone the right column becomes a compact header above the content. */
  .side { position:static; order:-1; gap:12px; }
  .side .hero { flex-direction:row; text-align:left; }
  .sidenav { display:none; }          /* bottom tab bar takes over */
  .topnav[hidden] { display:flex !important; }
}

/* boot splash: shown only while the stored session is being checked */
.boot-spin {
  position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:400;
}
.boot-spin .logo-mark { width:56px; height:56px; font-size:26px; animation:bootpulse 1.1s ease infinite; }
@keyframes bootpulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.88); opacity:.7; } }

/* -------------------------------------------------- track card modal, guest */

.modal-back {
  position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.45);
  display:grid; place-items:center; padding:18px; animation:fade var(--speed) ease both;
}
.modal-back[hidden] { display:none; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.modal {
  position:relative; width:100%; max-width:440px; max-height:86dvh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.35); padding:22px;
  animation:rise .25s ease both;
}
.modal-x {
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  border:0; background:var(--surface-2); cursor:pointer; font-size:14px;
}
.modal h2 { margin:0 0 2px; font-size:18px; padding-right:36px; }
.modal .kind { margin-bottom:12px; }
.track-links { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.track-links a {
  padding:8px 14px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line); font-size:13px; font-weight:650;
}
.lyrics {
  background:var(--surface-2); border-radius:10px; padding:10px 12px;
  font-size:13px; white-space:pre-wrap; max-height:180px; overflow-y:auto;
  color:var(--muted); margin:10px 0;
}
.guest-cta {
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--brand);
  border-radius:12px; padding:12px 14px; font-size:13.5px; margin-bottom:14px;
}