/* ═══════════════════════════════════════════════════
   SLEEPSCORE  ·  Design System
   Fonts: Syne 800 (display) + Plus Jakarta Sans (UI)
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@700;800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700;800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap'); */

:root {
  --bg-deep:      #070d1a;
  --bg-base:      #0c1526;
  --bg-surface:   #111f35;
  --bg-raised:    #24365a;
  --bg-input:     #0f1c30;

  --indigo:       #6366f1;
  --indigo-lt:    #818cf8;
  --indigo-dim:   rgba(99,102,241,0.14);
  --cyan:         #22d3ee;

  --ex:  #4ade80;  --ex-dim:  rgba(74,222,128,0.13);
  --gd:  #a3e635;  --gd-dim:  rgba(163,230,53,0.13);
  --wa:  #fb923c;  --wa-dim:  rgba(251,146,60,0.13);
  --po:  #f87171;  --po-dim:  rgba(248,113,113,0.13);

  --text-hi:   #eef2ff;
  --text-mid:  #7a9bca;
  --text-lo:   #3d5570;

  --border:        rgba(99,102,241,0.16);
  --border-hover:  rgba(99,102,241,0.38);
  --border-active: rgba(99,102,241,0.65);

  --pad: 20px;
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;

  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease:   cubic-bezier(0.22,1,0.36,1);
  --io:     cubic-bezier(0.4,0,0.2,1);

  --font-display: 'Space Grotesk', sans-serif;
  /* --font-display: 'Cuprum', sans-serif; */
  /* --font-display: 'DM Sans', sans-serif */
  /* --font-display: 'Syne', sans-serif; */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }

body {
  min-height: 100dvh;
  background: var(--bg-deep);
  color: var(--text-hi);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Ambient orbs ── */
.ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.bg-orb-1 {
  width: 480px; height: 480px; top: -140px; right: -120px;
  background: radial-gradient(circle, #4338ca, transparent 68%);
  opacity: .22; animation: drift1 20s ease-in-out infinite;
}
.bg-orb-2 {
  width: 340px; height: 340px; bottom: 5%; left: -90px;
  background: radial-gradient(circle, #0891b2, transparent 68%);
  opacity: .16; animation: drift2 25s ease-in-out infinite;
}
.bg-orb-3 {
  width: 260px; height: 260px; top: 48%; left: 55%;
  background: radial-gradient(circle, #7c3aed, transparent 68%);
  opacity: .10; animation: drift3 30s ease-in-out infinite;
}
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 40%{transform:translate(-24px,18px)} 70%{transform:translate(16px,-12px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-28px)} }
@keyframes drift3 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* ── App shell ── */
.app-wrap {
  position: relative; z-index: 1;
  max-width: 480px; margin: 0 auto;
}

.screen {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  padding: var(--pad) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
  animation: screenIn .38s var(--ease) both;
}

.screen.hidden { display: none; }

@keyframes screenIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screenBack {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
.screen.anim-back { animation-name: screenBack; }

/* ══════════════════════════════════════
   LANDING
══════════════════════════════════════ */

.landing-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--text-mid); padding-top: 6px; letter-spacing: .02em;
}
.brand-icon-sm { width: 17px; height: 17px; color: var(--indigo-lt); }

.landing-hero {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 36px 0 20px; gap: 18px;
}

.hero-icon-wrap {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.hero-glow {
  position: absolute; inset: -24px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.32) 0%, transparent 65%);
  animation: hpulse 4.5s ease-in-out infinite;
}
.hero-moon {
  width: 54px; height: 54px; color: var(--indigo-lt);
  animation: hfloat 5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(129,140,248,.65));
}
.hero-stars { position: absolute; inset: 0; }
.star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle var(--d,2.5s) ease-in-out infinite; }
.s1{width:3px;height:3px;top:10%;right:16%;--d:2.1s}
.s2{width:2px;height:2px;top:28%;left:8%;--d:3.2s;animation-delay:.5s}
.s3{width:4px;height:4px;bottom:18%;right:10%;--d:2.8s;animation-delay:1s}
.s4{width:2px;height:2px;bottom:32%;left:18%;--d:3.6s;animation-delay:.3s}
.s5{width:3px;height:3px;top:7%;left:28%;--d:2.4s;animation-delay:1.5s}

@keyframes hfloat {
  0%,100%{transform:translateY(0) rotate(0deg)}
  40%{transform:translateY(-11px) rotate(-3deg)}
  70%{transform:translateY(-6px) rotate(2deg)}
}
@keyframes hpulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.14)} }
@keyframes twinkle { 0%,100%{opacity:.25;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} }

.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px,8vw,38px); line-height: 1.13;
  letter-spacing: -.025em; color: var(--text-hi);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(130deg, var(--indigo-lt), var(--cyan));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { font-size: 14px; color: var(--text-mid); line-height: 1.7; max-width: 295px; }

.landing-footer { display: flex; flex-direction: column; gap: 12px; align-items: center; padding-bottom: 24px; }

.history-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 50px; padding: 10px 14px; font-size: 13px;
  color: var(--text-mid); width: 100%; max-width: 340px;
}
.history-badge>i { width: 15px; height: 15px; color: var(--indigo-lt); flex-shrink: 0; }
.history-badge>span { flex: 1; }
.badge-link {
  background: none; border: none; cursor: pointer; color: var(--indigo-lt);
  display: flex; align-items: center; padding: 4px; border-radius: 8px;
  transition: background .15s;
}
.badge-link:hover { background: var(--indigo-dim); }
.badge-link i { width: 15px; height: 15px; }

/* ── Primary CTA button ── */
.btn-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 340px; min-height: 56px;
  border: none; border-radius: var(--r-xl);
  background: linear-gradient(130deg, var(--indigo) 0%, #8b5cf6 55%, #06b6d4 120%);
  background-size: 200% 100%; background-position: 0 50%;
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(99,102,241,.38), 0 4px 14px rgba(0,0,0,.45);
  transition: transform .18s var(--spring), box-shadow .18s, background-position .4s;
}
.btn-cta:hover { transform: translateY(-2px); background-position: 100% 50%; box-shadow: 0 0 36px rgba(99,102,241,.55),0 8px 22px rgba(0,0,0,.45); }
.btn-cta:active { transform: scale(.97); }
.btn-cta i { width: 18px; height: 18px; }

.landing-note { font-size: 12px; color: var(--text-lo); letter-spacing: .025em; }

/* ══════════════════════════════════════
   FORM
══════════════════════════════════════ */

.form-header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }

.btn-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-mid); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.btn-icon:hover { border-color: var(--border-hover); color: var(--text-hi); background: var(--bg-raised); }
.btn-icon i { width: 18px; height: 18px; }
.btn-icon--danger:hover { border-color: rgba(248,113,113,.45); color: var(--po); }

.progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.progress-bar { height: 3px; background: var(--bg-raised); border-radius: 2px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  transition: width .45s var(--io);
  box-shadow: 0 0 8px rgba(99,102,241,.5);
}
.progress-label { font-size: 11px; color: var(--text-lo); font-weight: 600; text-align: right; letter-spacing: .03em; text-transform: uppercase; }

.form-step { flex: 1; display: flex; flex-direction: column; gap: 14px; animation: stepIn .32s var(--ease) both; }
.form-step.hidden { display: none; }
@keyframes stepIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

.step-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-bottom: 2px; }
.step-icon-wrap {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px; margin-top: 18px;
}
.step-icon-wrap i { width: 20px; height: 20px; }
.step-icon--sleep { background: rgba(99,102,241,.14); color: var(--indigo-lt); }
.step-icon--day   { background: rgba(34,211,238,.11); color: var(--cyan); }
.step-icon--env   { background: rgba(163,230,53,.11);  color: var(--gd); }

.step-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.2; }
.step-intro p  { font-size: 13px; color: var(--text-mid); }

.questions { display: flex; flex-direction: column; gap: 10px; }

.question-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 15px;
  display: flex; flex-direction: column; gap: 11px;
  transition: border-color .15s;
}
.question-card:focus-within { border-color: var(--border-active); }

.q-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-mid); letter-spacing: .01em;
}
.q-label i { width: 14px; height: 14px; flex-shrink: 0; color: var(--indigo-lt); }

/* Time input */
.input-time {
  width: 100%; min-height: 52px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-hi); font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: .05em; text-align: center; outline: none;
  transition: border-color .15s, box-shadow .15s; cursor: pointer;
}
.input-time:focus { border-color: var(--border-active); box-shadow: 0 0 0 3px rgba(99,102,241,.13); }
.input-time::-webkit-date-and-time-value { text-align: center; }

/* Segmented controls */
.seg-control {
  position: relative; display: flex;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px; gap: 2px;
}
.seg-pill {
  position: absolute; top: 3px; left: 0; height: calc(100% - 6px);
  border-radius: calc(var(--r-sm) - 3px);
  background: var(--indigo);
  box-shadow: 0 0 14px rgba(99,102,241,.45);
  transition: transform .26s var(--spring), width .26s var(--spring), opacity .2s;
  pointer-events: none; opacity: 0;
}
.seg-pill.active { opacity: 1; }
.seg-opt { flex: 1; position: relative; z-index: 1; cursor: pointer; }
.seg-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 5px 3px;
  font-size: 12.5px; font-weight: 600; color: var(--text-lo);
  border-radius: calc(var(--r-sm) - 3px);
  transition: color .15s; text-align: center; line-height: 1.3;
}
.seg-opt input:checked ~ span { color: #fff; }
.seg-opt input:not(:checked) ~ span:hover { color: var(--text-mid); }

/* Room toggles */
.toggle-group { display: flex; gap: 8px; }
.toggle-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; min-height: 64px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-lo);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .18s var(--spring);
}
.toggle-btn i { width: 18px; height: 18px; }
.toggle-btn[aria-pressed="true"] {
  border-color: var(--border-active); background: var(--indigo-dim);
  color: var(--indigo-lt); transform: scale(1.04);
}
.toggle-btn:hover:not([aria-pressed="true"]) { border-color: var(--border-hover); color: var(--text-mid); }

.form-nav { padding-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.form-error { font-size: 12px; color: var(--po); text-align: center; animation: fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ══════════════════════════════════════
   RESULT
══════════════════════════════════════ */

.result-topbar {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px;
}
.result-date-label { font-size: 11.5px; color: var(--text-lo); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

.score-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 24px; }

.score-ring-wrap { position: relative; width: 220px; height: 220px; }
.score-ring-svg { width: 100%; height: 100%; }

.ring-track { fill: none; stroke: var(--bg-raised); stroke-width: 11; }
.ring-progress {
  fill: none; stroke: var(--indigo-lt); stroke-width: 11; stroke-linecap: round;
  filter: url(#ring-glow);
  transition: stroke-dashoffset 1.35s cubic-bezier(0.22,1,0.36,1), stroke .4s ease;
}

.score-center-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-number {
  font-family: var(--font-display); font-weight: 800;
  font-size: 68px; line-height: 1; letter-spacing: -.045em;
}
.score-of-100 { font-size: 13px; color: var(--text-lo); font-weight: 500; }

.tier-badge {
  display: inline-flex; align-items: center;
  padding: 6px 18px; border-radius: 50px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid; transition: all .4s;
}
.tier-excellent { color: var(--ex); background: var(--ex-dim); border-color: rgba(74,222,128,.28); }
.tier-good      { color: var(--gd); background: var(--gd-dim); border-color: rgba(163,230,53,.28); }
.tier-warning   { color: var(--wa); background: var(--wa-dim); border-color: rgba(251,146,60,.28); }
.tier-poor      { color: var(--po); background: var(--po-dim); border-color: rgba(248,113,113,.28); }

.factors-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.factors-group {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 15px;
}
.factors-heading {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin-bottom: 10px;
}
.factors-heading i { width: 13px; height: 13px; }
.factors-pos { color: var(--ex); }
.factors-neg { color: var(--wa); }

.factors-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.factor-item {
  font-size: 13px; color: var(--text-mid);
  display: flex; align-items: center; gap: 8px;
  animation: factorIn .4s var(--ease) both;
}
.factors-pos + .factors-list .factor-item::before { content:''; width:5px;height:5px;border-radius:50%;background:var(--ex);flex-shrink:0; }
.factors-neg + .factors-list .factor-item::before { content:''; width:5px;height:5px;border-radius:50%;background:var(--wa);flex-shrink:0; }

@keyframes factorIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.recs-section { margin-bottom: 20px; }
.recs-heading {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--text-mid);
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px;
  margin-top: 30px;
}
.recs-heading i { width: 14px; height: 14px; color: #fbbf24; }

.recs-list { display: flex; flex-direction: column; gap: 16px; }
.rec-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 15px;
  font-size: 13px; color: var(--text-mid); line-height: 1.65;
  display: flex; gap: 10px; align-items: flex-start;
  animation: factorIn .4s var(--ease) both;
}
.rec-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; line-height: 1.1; color: var(--bg-raised);
  min-width: 22px; flex-shrink: 0;
}

.result-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; padding-bottom: 28px; }

.btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 340px; min-height: 52px;
  background: transparent; border: 1px solid var(--border-hover); border-radius: var(--r-xl);
  color: var(--text-hi); font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.btn-outline:hover { border-color: var(--border-active); background: var(--indigo-dim); transform: translateY(-1px); }
.btn-outline i { width: 16px; height: 16px; color: var(--indigo-lt); }

.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: none; border: none; color: var(--text-lo);
  font-family: 'Plus Jakarta Sans',sans-serif; font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 8px 14px; border-radius: var(--r-sm); min-height: 44px;
  transition: color .15s;
}
.btn-ghost:hover { color: var(--text-mid); }
.btn-ghost i { width: 14px; height: 14px; }

/* ══════════════════════════════════════
   HISTORY
══════════════════════════════════════ */

.history-topbar { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.history-topbar h2 { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 20px; }

.chart-wrap {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 12px;
  height: 210px; margin-bottom: 20px;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

.entries-heading { font-size: 11px; font-weight: 700; color: var(--text-lo); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 10px; }

.history-entries { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.entry-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 13px 15px;
  animation: factorIn .3s var(--ease) both;
}
.entry-date { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-mid); text-transform: capitalize; }
.entry-score { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.entry-tier {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 50px; border: 1px solid;
}

.entry-card.tier-excellent .entry-score { color:var(--ex) }
.entry-card.tier-excellent .entry-tier  { color:var(--ex);background:var(--ex-dim);border-color:rgba(74,222,128,.22) }
.entry-card.tier-good .entry-score      { color:var(--gd) }
.entry-card.tier-good .entry-tier       { color:var(--gd);background:var(--gd-dim);border-color:rgba(163,230,53,.22) }
.entry-card.tier-warning .entry-score   { color:var(--wa) }
.entry-card.tier-warning .entry-tier    { color:var(--wa);background:var(--wa-dim);border-color:rgba(251,146,60,.22) }
.entry-card.tier-poor .entry-score      { color:var(--po) }
.entry-card.tier-poor .entry-tier       { color:var(--po);background:var(--po-dim);border-color:rgba(248,113,113,.22) }

.history-cta { display: flex; justify-content: center; padding-bottom: 28px; }

.empty-state { text-align: center; padding: 32px 20px; color: var(--text-lo); font-size: 14px; line-height: 1.7; }

/* ══════════════════════════════════════
   DIALOG
══════════════════════════════════════ */

.dialog-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,13,26,.88); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: var(--pad);
  animation: fadeIn .2s ease both;
}
.dialog-overlay.hidden { display: none; }

.dialog-box {
  background: var(--bg-raised); border: 1px solid var(--border-hover);
  border-radius: var(--r-lg); padding: 28px 22px 22px;
  max-width: 310px; width: 100%; text-align: center;
  animation: dialogIn .3s var(--spring) both;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
@keyframes dialogIn { from{opacity:0;transform:scale(.9) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }

.dialog-icon { width: 30px; height: 30px; color: var(--indigo-lt); margin-bottom: 2px; }
.dialog-box h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.dialog-box p  { font-size: 13px; color: var(--text-mid); line-height: 1.65; }

.dialog-actions { display: flex; gap: 10px; margin-top: 4px; width: 100%; }
.dialog-cancel {
  flex: 1; border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
}
.btn-danger {
  flex: 1; min-height: 44px; background: rgba(248,113,113,.14);
  border: 1px solid rgba(248,113,113,.38); border-radius: var(--r-sm);
  color: var(--po); font-family: 'Plus Jakarta Sans',sans-serif;
  font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s;
}
.btn-danger:hover { background: rgba(248,113,113,.24); }

/* ── Site footer ── */
.site-footer {
  display: flex; align-items: center; gap: 10px;
  padding-top: 4px;
}
.footer-link {
  font-size: 11px; color: var(--text-lo);
  text-decoration: none; letter-spacing: .02em;
  transition: color .15s;
}
.footer-link:hover { color: var(--text-mid); }
.footer-sep { font-size: 11px; color: var(--text-lo); opacity: .5; }

/* ── Utility ── */
.hidden { display: none !important; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-raised); border-radius: 2px; }