/* ================================================
   BL Agent — style.css v2.25.0
   Electric 2026 Edition
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

:root {
  /* Surfaces */
  --bg:          #0c0c16;
  --surface:     #14142a;
  --surface-hi:  #1e1e38;
  --card:        #1a1a30;
  --card-hi:     #222240;
  /* Text */
  --white:       #f0f0fa;
  --dim:         rgba(240,240,250,.5);
  --dim2:        rgba(240,240,250,.28);
  /* Accent */
  --accent:      #818cf8;
  --accent-2:    #c084fc;
  --gradient:    linear-gradient(135deg, #818cf8 0%, #c084fc 100%);
  --accent-dim:  rgba(129,140,248,.14);
  --accent-glow: rgba(129,140,248,.4);
  --accent-soft: rgba(129,140,248,.08);
  /* Borders */
  --border:      rgba(255,255,255,.08);
  --border-hi:   rgba(255,255,255,.14);
  /* Misc */
  --radius:      18px;
  --radius-sm:   12px;
  --shadow:      0 16px 48px rgba(0,0,0,.7);
  --shadow-sm:   0 4px 20px rgba(0,0,0,.45);
  --safe-t:      env(safe-area-inset-top,    0px);
  --safe-b:      env(safe-area-inset-bottom, 0px);
  --fh:          'Space Grotesk', sans-serif;
  --fb:          'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; overflow: hidden }

a { color: inherit; text-decoration: none }

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at -5% -5%,  rgba(99,102,241,.28) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 105% 105%, rgba(192,132,252,.22) 0%, transparent 60%);
  color: var(--white);
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button {
  background: none; border: none;
  color: inherit; font: inherit; cursor: pointer;
}

input, textarea {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--fb);
  font-size: 1rem;
  outline: none;
  width: 100%;
  padding: 14px 16px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
textarea { resize: none; line-height: 1.6 }

label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 8px;
}
.label-opt {
  color: var(--dim2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── App shell ─────────────────────────────────────── */
#app { position: fixed; inset: 0; overflow: hidden }

/* ─── Screens ───────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at -5% -5%,  rgba(99,102,241,.2) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 105% 105%, rgba(192,132,252,.16) 0%, transparent 60%);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  padding-bottom: calc(24px + var(--safe-b));
}
.screen.active { transform: translateX(0) }
.screen.behind  { transform: translateX(-30%) }

.screen-center {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  text-align: center;
}

/* ─── Top bar ───────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(16px + var(--safe-t)) 20px 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(12,12,22,.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--border);
}
.bar-logo {
  max-height: 34px;
  max-width: 110px;
  width: auto; height: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.bar-title {
  font-family: var(--fh);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.015em;
}
.brand-dot { color: var(--accent) }

.help-btn {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  background: var(--surface);
  color: var(--dim);
  font-family: var(--fh);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
}
.help-btn:active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim) }

.topbar-logout {
  font-family: var(--fh);
  font-size: .75rem;
  font-weight: 600;
  color: var(--dim);
  background: none;
  border: 1px solid rgba(224,85,85,.3);
  border-radius: 8px;
  padding: .3rem .75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.topbar-logout:hover { color: #e05555; border-color: #e05555 }

.back-btn {
  font-size: 1.5rem;
  color: var(--white);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  transition: background .15s;
  flex-shrink: 0;
}
.back-btn:active { background: var(--surface-hi) }

/* ─── Help drawer ───────────────────────────────────── */
.help-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 200;
  backdrop-filter: blur(6px);
}
.help-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  z-index: 201;
  max-height: 80vh;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border-hi);
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
}
.help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-title { font-family: var(--fh); font-weight: 700; font-size: 1rem }
.help-close {
  background: var(--surface-hi); border: none; color: var(--dim);
  font-size: 1.25rem; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background .15s, color .15s;
}
.help-close:active { background: var(--card-hi); color: var(--white) }
.help-body { overflow-y: auto; padding: .75rem 1.25rem 2rem }
.help-section { padding: .9rem 0; border-bottom: 1px solid var(--border) }
.help-section:last-child { border-bottom: none }
.help-q { font-family: var(--fh); font-weight: 700; font-size: .9375rem; margin-bottom: .35rem }
.help-a { font-size: .875rem; color: var(--dim); line-height: 1.6 }
.help-a strong { color: var(--white) }

/* ─── PIN screen ────────────────────────────────────── */
.app-logo {
  max-height: 80px;
  max-width: 200px;
  width: auto; height: auto;
  object-fit: contain;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 36px var(--accent-glow));
}
.app-title {
  font-family: var(--fh);
  font-size: 2.125rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.app-sub {
  font-size: .9375rem;
  color: var(--dim);
  margin-bottom: 40px;
}

.pin-dots {
  display: flex;
  gap: 20px;
  margin-bottom: 36px;
}
.pin-dots span {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--border-hi);
  transition: background .15s, border-color .15s, box-shadow .2s, transform .15s;
}
.pin-dots span.filled {
  background: var(--gradient);
  border-color: transparent;
  box-shadow: 0 0 18px var(--accent-glow);
  transform: scale(1.2);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 12px;
}
.pin-btn {
  height: 80px;
  border-radius: 50%;
  font-family: var(--fh);
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.pin-btn:active { background: var(--surface-hi); transform: scale(.9) }
.pin-clear { font-size: 1.1rem; border-color: transparent; background: transparent }
.pin-ok {
  background: var(--gradient);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  box-shadow: 0 4px 28px var(--accent-glow);
}
.pin-ok:active { opacity: .85; transform: scale(.9) }

.pin-error { margin-top: 20px; color: #f87171; font-size: .875rem }
.pin-forgot {
  margin-top: 18px;
  background: none; border: none;
  color: var(--dim2);
  font-size: .8rem; cursor: pointer;
  padding: 8px 14px;
  letter-spacing: .04em;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.pin-forgot:hover { color: var(--dim); background: var(--surface) }

/* ─── Home screen ───────────────────────────────────── */
.home-body {
  padding: 28px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-greeting {
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.035em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}
.home-sub {
  color: var(--dim);
  font-size: .9375rem;
  margin-bottom: 24px;
}

/* All home cards */
.home-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 18px;
  text-align: left;
  margin-bottom: 10px;
  transition: background .2s, transform .15s, border-color .2s;
}
.home-card:active { background: var(--card-hi); transform: scale(.99) }
.home-card strong {
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
  letter-spacing: -.01em;
  color: var(--white);
}
.home-card > div > span { font-size: .8125rem; color: var(--dim) }
.hc-icon {
  font-size: 1.4rem;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--surface-hi);
  border: 1.5px solid var(--border-hi);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hc-arrow {
  margin-left: auto;
  color: var(--dim2);
  font-size: .875rem;
  flex-shrink: 0;
}

/* Featured SoMe card */
#btn-some {
  background: var(--gradient);
  border-color: transparent;
  padding: 22px 18px;
  margin-bottom: 14px;
  box-shadow: 0 6px 32px var(--accent-glow), 0 2px 0 rgba(255,255,255,.15) inset;
}
#btn-some:active { opacity: .9; transform: scale(.99); box-shadow: none }
#btn-some strong { color: #fff; font-size: 1.125rem }
#btn-some > div > span { color: rgba(255,255,255,.75) }
#btn-some .hc-icon { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); font-size: 1.5rem; width: 56px; height: 56px; }
#btn-some .hc-arrow { color: rgba(255,255,255,.6) }

/* ─── Form body ─────────────────────────────────────── */
.form-body {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field { display: flex; flex-direction: column }

.chip-group { display: flex; flex-wrap: wrap; gap: 8px }
.chip {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  color: var(--dim);
  transition: all .2s;
}
.chip.active {
  background: var(--gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 16px var(--accent-glow);
}

/* ─── Buttons ───────────────────────────────────────── */
.btn-primary {
  width: 100%;
  padding: 17px;
  border-radius: var(--radius);
  font-family: var(--fh);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 28px var(--accent-glow);
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.btn-primary:active { opacity: .85; transform: scale(.98); box-shadow: none }

.btn-secondary {
  padding: 14px 20px;
  border-radius: var(--radius);
  font-family: var(--fh);
  font-size: .9375rem;
  font-weight: 700;
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  transition: background .15s, border-color .15s;
}
.btn-secondary:active { background: var(--surface-hi); border-color: var(--white) }

.btn-outline {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  font-family: var(--fh);
  font-size: .9375rem;
  font-weight: 700;
  border: 1.5px solid var(--border-hi);
  color: var(--dim);
  transition: border-color .2s, color .2s, background .2s;
}
.btn-outline:active { border-color: var(--white); color: var(--white); background: var(--surface) }

.btn-danger {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  font-family: var(--fh);
  font-size: .9375rem;
  font-weight: 700;
  background: rgba(239,68,68,.1);
  color: #f87171;
  border: 1.5px solid rgba(239,68,68,.25);
  transition: background .2s, border-color .2s;
}
.btn-danger:active { background: rgba(239,68,68,.2) }

/* ─── Loading ───────────────────────────────────────── */
.squirrel-anim {
  font-size: 4.5rem;
  margin-bottom: 24px;
  animation: squirrelBounce .65s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 32px var(--accent-glow));
}
@keyframes squirrelBounce {
  from { transform: translateY(0) rotate(-6deg) }
  to   { transform: translateY(-20px) rotate(6deg) }
}
.loading-txt {
  font-family: var(--fh);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.loading-sub { font-size: .875rem; color: var(--dim) }
.progress-wrap {
  width: 240px; height: 4px;
  background: var(--surface);
  border-radius: 100px;
  margin-top: 32px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--gradient);
  border-radius: 100px;
  width: 0%;
  transition: width .55s ease;
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ─── Result screen ─────────────────────────────────── */
.result-body {
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.platform-tabs {
  display: flex;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 4px;
  border: 1.5px solid var(--border);
  gap: 0;
}
.ptab {
  flex: 1; padding: 10px;
  border-radius: 14px;
  font-size: .8125rem; font-weight: 700;
  color: var(--dim);
  letter-spacing: .02em;
  transition: background .2s, color .2s, box-shadow .2s;
}
.ptab.active {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 2px 14px var(--accent-glow);
}

.content-area {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 200px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--white);
  font-family: var(--fb);
  width: 100%; outline: none; resize: none;
  transition: border-color .2s, box-shadow .2s;
}
.content-area:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim) }

.result-actions { display: flex; gap: 10px }
.result-actions .btn-secondary { flex: 1 }
.result-actions .btn-primary   { flex: 2 }

.ig-row { display: flex; flex-direction: column; gap: 10px }
.btn-ig { width: 100% }

.case-row {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.toggle-row {
  display: flex; align-items: center;
  justify-content: space-between;
  font-size: .9375rem; cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  width: 44px; height: 26px;
  padding: 0; border: none;
  appearance: none;
  background: var(--surface-hi);
  border-radius: 100px;
  position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0;
}
.toggle-row input:checked { background: var(--accent) }
.toggle-row input::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--white); border-radius: 50%;
  transition: left .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.toggle-row input:checked::after { left: 21px }
.case-fields input { margin-bottom: 0 }
.case-img-auto { font-size: .875rem; color: var(--accent); padding: 10px 0 2px }

/* ─── Success ───────────────────────────────────────── */
.success-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 28px;
  box-shadow: 0 0 48px var(--accent-glow);
}
.success-title {
  font-family: var(--fh);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -.03em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.success-msg {
  color: var(--dim);
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 280px;
}
#btn-home { max-width: 260px }

/* ─── Toast ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(24px + var(--safe-b));
  left: 50%; transform: translateX(-50%);
  background: var(--white);
  color: var(--bg);
  font-family: var(--fh);
  font-weight: 700;
  font-size: .9375rem;
  padding: 12px 24px;
  border-radius: 100px;
  z-index: 999;
  white-space: nowrap;
  opacity: 0; transition: opacity .25s;
  box-shadow: 0 4px 28px rgba(0,0,0,.6);
}
.toast.show { opacity: 1 }

/* ─── GPS row ───────────────────────────────────────── */
.sted-row { display: flex; gap: 8px }
.sted-row input { flex: 1 }
.gps-btn {
  width: 50px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1.5px solid var(--border-hi);
  font-size: 1.25rem;
  transition: background .15s;
}
.gps-btn:active { background: var(--surface-hi) }
.gps-btn:disabled { opacity: .4 }

/* ─── Image picker ──────────────────────────────────── */
.img-picker-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  border-radius: var(--radius);
  border: 1.5px dashed rgba(129,140,248,.3);
  font-size: .9375rem;
  color: var(--dim);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  text-align: center; margin-bottom: 0;
  letter-spacing: normal; font-weight: 400; text-transform: none;
}
.img-picker-btn:active { border-color: var(--accent); color: var(--white); background: var(--accent-soft) }
.img-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px; margin-top: 10px;
}
.img-preview-grid img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 10px;
  box-shadow: var(--shadow-sm);
}
.img-preview {
  width: 100%; max-height: 180px;
  object-fit: cover; border-radius: var(--radius);
  margin-top: 10px; box-shadow: var(--shadow-sm);
}

/* ─── Video picker ──────────────────────────────────── */
.video-preview-wrap { margin-top: 12px }
.video-preview {
  width: 100%; max-height: 240px;
  border-radius: var(--radius-sm);
  background: var(--surface); display: block;
}
.video-analyze-row { margin-top: 10px }
.video-post-row {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--border);
}

/* ─── Settings ──────────────────────────────────────── */
.version-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}
.version-num { font-family: var(--fh); font-weight: 700; font-size: 1.0625rem }
.version-status { font-size: .8125rem; color: var(--dim) }
.version-status.ok  { color: #4ade80 }
.version-status.new { color: var(--accent); font-weight: 600; cursor: pointer }

.btn-force-update {
  margin-top: 12px; width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--dim); text-align: center;
  transition: border-color .2s, color .2s;
}
.btn-force-update:active { border-color: var(--white); color: var(--white) }
.btn-force-update:disabled { opacity: .4 }

.settings-hint {
  font-size: .8125rem; color: var(--dim); line-height: 1.55;
  margin-bottom: 12px; text-transform: none;
  letter-spacing: normal; font-weight: 400;
}
.word-list { display: flex; flex-direction: column; gap: 8px }
.word-tag {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.word-tag-text { flex: 1 }
.word-tag-word { font-size: .9375rem; font-weight: 600; display: block; margin-bottom: 2px }
.word-tag-alt  { font-size: .8rem; color: var(--dim) }
.word-tag-del {
  font-size: 1rem; color: var(--dim);
  padding: 6px 8px; border-radius: 8px;
  flex-shrink: 0; line-height: 1;
  transition: color .15s, background .15s;
}
.word-tag-del:active { color: #f87171; background: rgba(248,113,113,.1) }

/* ─── Update banner ─────────────────────────────────── */
.update-banner {
  position: fixed;
  bottom: calc(80px + var(--safe-b));
  left: 16px; right: 16px;
  background: var(--gradient);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9375rem; font-weight: 600;
  z-index: 998;
  box-shadow: 0 4px 36px var(--accent-glow);
  animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } }
.update-banner button {
  background: rgba(255,255,255,.22);
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700; font-size: .875rem;
}

/* ─── Reminder banner ───────────────────────────────── */
.reminder-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(129,140,248,.2);
  padding: 12px 20px; font-size: .9rem;
  color: var(--accent); font-weight: 500;
}
.reminder-close { font-size: 1.25rem; color: var(--accent); padding: 0 4px; line-height: 1; opacity: .7 }
.reminder-close:active { opacity: 1 }

/* ─── Draft + schedule ──────────────────────────────── */
.draft-schedule-row { margin-top: 20px; display: flex; flex-direction: column; gap: 12px }
.schedule-section {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.schedule-inputs { display: flex; gap: 10px; margin-bottom: 8px }
.schedule-inputs input { flex: 1; padding: 10px 12px; font-size: .9375rem; color-scheme: dark }

/* ─── Draft list ────────────────────────────────────── */
.draft-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px; margin-bottom: 12px;
}
.draft-card-name { font-family: var(--fh); font-weight: 700; font-size: 1rem; margin-bottom: 4px }
.draft-card-meta { font-size: .8rem; color: var(--dim); margin-bottom: 12px }
.draft-card-preview {
  font-size: .875rem; color: var(--dim); line-height: 1.5; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.draft-card-actions { display: flex; gap: 10px }
.draft-card-actions .btn-primary { flex: 1 }
.draft-card-actions .btn-del {
  padding: 10px 14px;
  border: 1.5px solid rgba(248,113,113,.25);
  border-radius: var(--radius-sm);
  color: #f87171; font-size: .875rem;
  transition: border-color .2s, background .2s;
}
.draft-card-actions .btn-del:active { border-color: #f87171; background: rgba(248,113,113,.1) }
.drafts-empty { text-align: center; color: var(--dim); padding: 60px 20px; font-size: .9375rem }

/* ─── FB success screen ─────────────────────────────── */
@keyframes squirrelHappy {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1) }
  15%  { transform: translateY(-32px) rotate(-12deg) scale(1.2) }
  30%  { transform: translateY(-16px) rotate(10deg)  scale(1.1) }
  45%  { transform: translateY(-28px) rotate(-8deg)  scale(1.16) }
  60%  { transform: translateY(-12px) rotate(7deg)   scale(1.07) }
  75%  { transform: translateY(-22px) rotate(-5deg)  scale(1.12) }
  100% { transform: translateY(0)    rotate(0deg)   scale(1) }
}
@keyframes fbBadgePop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0 }
  60%  { transform: scale(1.2) rotate(5deg);  opacity: 1 }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1 }
}
@keyframes fbTextFade {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}
.fb-success-squirrel {
  font-size: 5.5rem; line-height: 1;
  filter: drop-shadow(0 0 40px var(--accent-glow));
  animation: squirrelHappy 1s ease-in-out infinite;
  margin-bottom: 8px;
}
.fb-logo-badge {
  width: 64px; height: 64px;
  background: #1877F2; color: #fff;
  font-family: var(--fh); font-weight: 700; font-size: 2.125rem;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 4px 32px rgba(24,119,242,.6);
  animation: fbBadgePop .5s cubic-bezier(.34,1.56,.64,1) .3s both;
}
.fb-success-title {
  font-family: var(--fh); font-size: 2.75rem; font-weight: 700; margin-bottom: 8px;
  animation: fbTextFade .4s ease .6s both;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fb-success-sub { color: var(--dim); font-size: 1rem; animation: fbTextFade .4s ease .75s both }

/* ─── FB page row (result) ──────────────────────────── */
.fb-page-row {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.fb-page-row > label { margin-bottom: 10px }

/* ─── FB page list (settings) ───────────────────────── */
.page-list { display: flex; flex-direction: column; gap: 8px }
.page-tag {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.page-tag-text { flex: 1 }
.page-tag-name { font-size: .9375rem; font-weight: 600; display: block; margin-bottom: 2px }
.page-tag-id   { font-size: .8rem; color: var(--dim) }

/* ─── FB setup guide ────────────────────────────────── */
.fb-guide {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.fb-guide p { font-size: .8125rem; color: var(--dim); line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal; margin-bottom: 0 }
.fb-guide p strong { color: var(--white); font-weight: 600 }

/* ─── FB connect wizard ─────────────────────────────── */
.fb-connect-box {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.fb-step { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; color: var(--dim); line-height: 1.5 }
.fb-step-num {
  min-width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-weight: 700; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px; flex-shrink: 0;
}
.fb-step strong { color: var(--white) }
.btn-fb-link {
  display: block; text-align: center;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #1877f2; color: #fff;
  font-weight: 700; font-size: .875rem;
  text-decoration: none; letter-spacing: .02em;
  box-shadow: 0 4px 20px rgba(24,119,242,.45);
  transition: opacity .15s;
}
.btn-fb-link:active { opacity: .85 }
.fb-found-label { font-size: .8125rem; color: var(--dim); margin: 0 }
.fb-found-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.fb-found-row:last-of-type { border-bottom: none }
.fb-found-name { font-size: .9375rem; font-weight: 600 }
.btn-fb-add {
  padding: 5px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: .8125rem; font-weight: 600;
  background: var(--accent-dim);
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn-fb-add:active { background: var(--accent); color: #fff }

/* ─── Mini XP bar ───────────────────────────────────── */
.mini-xp-bar {
  position: relative; height: 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; overflow: hidden;
}
.mini-xp-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; z-index: 1 }
.mini-xp-badge {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #000; flex-shrink: 0;
}
.mini-xp-badge[data-level="1"] { background: #94a3b8 }
.mini-xp-badge[data-level="2"] { background: #22c55e }
.mini-xp-badge[data-level="3"] { background: #3b82f6 }
.mini-xp-badge[data-level="4"] { background: #a855f7 }
.mini-xp-badge[data-level="5"] { background: #f59e0b }
.mini-xp-badge[data-level="6"] { background: linear-gradient(135deg,#f59e0b,#ef4444); box-shadow: 0 0 8px #f59e0b88 }
.mini-xp-name { font-size: .65rem; font-weight: 600; color: var(--dim); letter-spacing: .04em; text-transform: uppercase; z-index: 1 }
.mini-xp-track { flex: 1; height: 6px; background: var(--card); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); z-index: 1 }
.mini-xp-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--gradient); transition: width .8s cubic-bezier(.4,0,.2,1) }
.mini-bar-label { position: relative; z-index: 1; font-size: .65rem; font-weight: 700; color: var(--white); flex-shrink: 0; opacity: .7 }

/* ─── Økonomi / Game card ───────────────────────────── */
.eco-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.eco-game-header { display: flex; align-items: center; gap: 14px }
.eco-level-circle {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: #000;
  flex-shrink: 0; transition: box-shadow .4s ease;
}
.eco-level-circle[data-level="1"] { background: #94a3b8; box-shadow: 0 0 14px #94a3b844 }
.eco-level-circle[data-level="2"] { background: #22c55e; box-shadow: 0 0 18px #22c55e66 }
.eco-level-circle[data-level="3"] { background: #3b82f6; box-shadow: 0 0 18px #3b82f666 }
.eco-level-circle[data-level="4"] { background: #a855f7; box-shadow: 0 0 22px #a855f766 }
.eco-level-circle[data-level="5"] { background: linear-gradient(135deg,#f59e0b,#eab308); box-shadow: 0 0 24px #f59e0b88 }
.eco-level-circle[data-level="6"] { background: linear-gradient(135deg,#f59e0b,#ef4444); box-shadow: 0 0 28px #f59e0baa; animation: pulse-gold 2s infinite }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 28px #f59e0baa } 50% { box-shadow: 0 0 44px #f59e0bff } }

.eco-level-info { display: flex; flex-direction: column; gap: 4px }
.eco-title { font-size: 1.05rem; font-weight: 700; color: var(--white) }
.eco-stars { font-size: 1.1rem; letter-spacing: 2px; transition: color .3s }
.eco-stars[data-level="1"] { color: #94a3b8 }
.eco-stars[data-level="2"] { color: #22c55e }
.eco-stars[data-level="3"] { color: #3b82f6 }
.eco-stars[data-level="4"] { color: #a855f7 }
.eco-stars[data-level="5"],
.eco-stars[data-level="6"] { color: #f59e0b }

.eco-xp-meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--dim); font-weight: 600 }
.eco-xp-meta span:last-child { color: var(--white) }
.eco-xp-track { height: 12px; background: var(--surface); border-radius: 99px; overflow: hidden; border: 1px solid var(--border) }
.eco-xp-fill { height: 100%; width: 0%; border-radius: 99px; background: var(--gradient); transition: width .9s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 10px var(--accent-glow) }
.eco-to-next { font-size: .75rem; color: var(--dim); text-align: center; letter-spacing: .03em }

.eco-stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px }
.eco-stat {
  background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--border);
}
.eco-stat span { font-size: 1.1rem; font-weight: 700; color: var(--white) }
.eco-stat small { font-size: .7rem; color: var(--dim); text-align: center }

.eco-budget-section { display: flex; flex-direction: column; gap: 8px }
.eco-bar-label { display: flex; justify-content: space-between; font-size: .75rem; color: var(--dim); font-weight: 600; letter-spacing: .04em }
.eco-bar-label span:last-child { color: var(--white) }
.eco-bar-track { height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; border: 1px solid var(--border) }
.eco-bar-fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #84cc16); transition: width .8s cubic-bezier(.4,0,.2,1) }
.eco-budget-fill.warn { background: linear-gradient(90deg, #f59e0b, #eab308) }
.eco-budget-fill.over { background: linear-gradient(90deg, #ef4444, #dc2626) }

.eco-budget-row { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--dim) }
.eco-budget-row input {
  width: 70px; background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); color: var(--white);
  padding: 6px 10px; font-size: .9rem; text-align: center;
}
.btn-eco-save {
  background: var(--accent-dim); border: 1.5px solid rgba(129,140,248,.3);
  color: var(--accent); border-radius: var(--radius-sm);
  padding: 6px 14px; font-size: .8rem; font-weight: 600;
  cursor: pointer; letter-spacing: .04em; transition: background .15s;
}
.btn-eco-save:active { background: var(--accent); color: #fff }

/* ─── Setup screen ──────────────────────────────────── */
.setup-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(56px + var(--safe-t)) 24px calc(48px + var(--safe-b));
  max-width: 480px; margin: 0 auto;
}
.setup-dots { display: flex; gap: 8px; margin-bottom: 40px; align-items: center }
.setup-dot {
  width: 8px; height: 8px; border-radius: 99px;
  background: var(--border-hi);
  transition: background .3s, width .3s;
}
.setup-dot.active {
  background: var(--accent);
  width: 24px;
}
.setup-panel {
  display: none; flex-direction: column; align-items: center;
  text-align: center; gap: 16px; width: 100%;
  animation: setupFadeIn .28s ease;
}
.setup-panel.active { display: flex }
@keyframes setupFadeIn {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0) }
}
.setup-icon {
  font-size: 3.5rem; margin-bottom: 4px;
  filter: drop-shadow(0 0 24px var(--accent-glow));
}
.setup-title {
  font-family: var(--fh);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--white);
}
.setup-sub {
  font-size: .9375rem; color: var(--dim);
  line-height: 1.6; max-width: 320px;
}
.setup-skip {
  font-size: .8125rem; color: var(--dim);
  text-decoration: underline; padding: 8px;
  transition: color .15s;
}
.setup-skip:hover { color: var(--white) }
#sp-2, #sp-3 { text-align: left; align-items: flex-start }
#sp-3 .setup-sub { max-width: none }
.setup-pages-list {
  width: 100%; background: var(--card);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 4px;
}
.setup-page-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border); transition: background .15s;
}
.setup-page-row:last-child { border-bottom: none }
.setup-page-row:hover { background: var(--card-hi) }
.setup-page-row input[type="checkbox"] {
  width: 20px; min-width: 20px; height: 20px;
  accent-color: var(--accent); cursor: pointer;
  background: transparent; border: none; padding: 0;
}
.setup-page-name { font-size: .9375rem; font-weight: 600; color: var(--white) }

/* ─── Token status ──────────────────────────────────── */
.token-status { font-size: .8125rem; margin-top: 6px; padding: 4px 0 }
.token-ok      { color: #4ade80 }
.token-warning { color: #fbbf24 }
.token-expired { color: #f87171 }
.btn-renew-token {
  margin-top: 10px; background: none;
  border: 1.5px solid var(--border-hi); color: var(--dim);
  border-radius: 10px; padding: 8px 16px; font-size: .875rem; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.btn-renew-token:hover { border-color: var(--white); color: var(--white); background: var(--surface) }
.token-warning-banner {
  position: fixed; bottom: 72px; left: 0; right: 0;
  background: rgba(100,60,0,.94); backdrop-filter: blur(8px);
  color: #fbbf24;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; font-size: .875rem; z-index: 900; gap: 12px;
  border-top: 1px solid rgba(251,191,36,.2);
}
.token-warning-banner button {
  background: #fbbf24; color: #1a1a1a; border: none;
  border-radius: 8px; padding: 7px 14px; font-size: .8125rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}

/* ─── Setup success (squirrel) ──────────────────────── */
.setup-squirrel {
  font-size: 5.5rem; line-height: 1; margin-bottom: 8px;
  animation: squirrelPop .55s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 0 36px var(--accent-glow));
}
@keyframes squirrelPop {
  from { transform: scale(0) rotate(-20deg) }
  to   { transform: scale(1) rotate(0deg) }
}

/* ─── Konfetti ──────────────────────────────────────── */
.confetti-piece {
  position: fixed; top: -20px;
  pointer-events: none; z-index: 9999;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 1 }
  50%  { transform: translateY(55vh) rotate(360deg) scaleX(-1); opacity: 1 }
  100% { transform: translateY(110vh) rotate(720deg) scaleX(1); opacity: 0 }
}

/* ─── Onboarding extras ─────────────────────────────── */
.ob-step-badge {
  font-size: .72rem; color: var(--accent); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent-dim); padding: 4px 14px;
  border-radius: 99px; border: 1px solid rgba(129,140,248,.3);
  margin-bottom: 4px;
}
.ob-hint { font-size: .8rem; color: var(--dim); margin-top: 6px; line-height: 1.5 }
.ob-hint a { color: var(--accent) }
.ob-color-wrap { display: flex; align-items: center; gap: 16px; margin-bottom: 4px }
.ob-color-preview {
  width: 72px; height: 72px; border-radius: var(--radius);
  background: var(--accent); box-shadow: 0 0 28px var(--accent-glow);
  transition: background .2s, box-shadow .2s; flex-shrink: 0;
}
#ob-color { width: auto; flex: 1; height: 48px; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface) }
.ob-color-swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px }
.ob-swatch {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s; cursor: pointer;
}
.ob-swatch:hover, .ob-swatch.active {
  transform: scale(1.2); border-color: var(--white);
  box-shadow: 0 0 16px rgba(255,255,255,.3);
}

/* ─── Utils ─────────────────────────────────────────── */
.hidden { display: none !important }