/* ================================================================
   DOGEARED — design system
   Strict black / white / gray. No other colors anywhere in the UI.
   Newsreader (literary display) · Outfit (modern UI)
================================================================ */

:root {
  --bg: #F3F2F7;
  --surface: #F9F8FD;
  --surface-2: #ECEBF2;
  --ink: #1C1C1F;
  --ink-2: rgba(28, 28, 31, 0.62);
  --ink-3: rgba(28, 28, 31, 0.38);
  --line: rgba(28, 28, 31, 0.13);
  --gold: #75757C;
  --ochre: #1C1C1F;
  --ember: #4A4A50;
  --tint: rgba(28, 28, 31, 0.07);
  --shadow-1: 0 1px 2px rgba(28,28,31,.05), 0 8px 24px rgba(28,28,31,.07);
  --shadow-2: 0 2px 6px rgba(28,28,31,.08), 0 18px 48px rgba(28,28,31,.14);
  --scrim: rgba(20, 20, 22, 0.5);
  --logo-halo: rgba(28, 28, 31, 0.08);
  --on-accent: #FFFFFF;

  --font-d: "Newsreader", Georgia, serif;
  --font-b: "Outfit", -apple-system, "Segoe UI", sans-serif;

  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --nav-h: calc(54px + env(safe-area-inset-bottom, 0px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="dark"] {
  --bg: #141414;
  --surface: #1E1E1E;
  --surface-2: #262626;
  --ink: #F2F2F2;
  --ink-2: rgba(242, 242, 242, 0.62);
  --ink-3: rgba(242, 242, 242, 0.36);
  --line: rgba(242, 242, 242, 0.12);
  --gold: #A8A8AE;
  --ochre: #F2F2F2;
  --ember: #B8B8BE;
  --tint: rgba(242, 242, 242, 0.09);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.5);
  --scrim: rgba(0, 0, 0, 0.62);
  --logo-halo: rgba(242, 242, 242, 0.14);
  --on-accent: #141414;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  overscroll-behavior: none;
  touch-action: manipulation; /* kills double-tap-to-zoom + the ~300ms tap delay, still allows normal scroll/swipe */
}

body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.55;
  transition: background .4s var(--ease), color .4s var(--ease);
  overscroll-behavior-y: none;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

h1, h2, h3, .serif { font-family: var(--font-d); font-weight: 300; margin: 0; letter-spacing: 0.005em; overflow-wrap: anywhere; }
h1 { font-size: 30px; line-height: 1.12; }
h2 { font-size: 22px; }
h3 { font-size: 17.5px; }
p { margin: 0.35em 0; }
button { font-family: var(--font-b); background: none; border: none; color: inherit; cursor: pointer; font-size: 15px; padding: 0; }
img { user-select: none; }
.icon { display: inline-block; vertical-align: -0.18em; }

input, textarea, select {
  font-family: var(--font-b); font-weight: 300; font-size: 15.5px;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 3px rgba(160,115,47,.16); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
textarea { resize: vertical; min-height: 90px; }

#app { max-width: 660px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: 0 18px calc(var(--nav-h) + 30px); }
@media (min-width: 900px) { #app { max-width: 720px; } }

.muted { color: var(--ink-2); font-size: 13.5px; }
.small { font-size: 12.5px; }
.eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ochre); font-weight: 500; margin-bottom: 8px; }
.hidden { display: none !important; }
hr.dash { border: none; border-top: 1px dashed var(--line); margin: 16px 0; }

/* ---------- logo chip: keeps the dark-inked mark visible on any surface ---------- */
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--logo-halo);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14.5px; font-weight: 400; letter-spacing: 0.02em;
  transition: transform .15s var(--ease), opacity .2s;
  box-shadow: var(--shadow-1);
}
.btn:active { transform: scale(0.96); }
.btn.solid { background: var(--ochre); color: var(--on-accent); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.quiet { background: transparent; color: var(--ink-2); box-shadow: none; }
.btn.sm { padding: 8px 15px; font-size: 13px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
  transition: background .4s var(--ease);
  overflow: hidden;
}
.card.eared::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 24px 24px 0;
  border-color: transparent var(--bg) transparent transparent;
  filter: drop-shadow(-2px 2px 2px rgba(0,0,0,0.14));
}
.card.eared::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 24px 24px 0 0;
  border-color: var(--gold) transparent transparent transparent;
  opacity: 0.35;
}

.wrap-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px 20px; border-radius: var(--r-lg); margin-bottom: 16px;
  background: linear-gradient(120deg, #2E2E32, #1C1C1F 65%, #3A3A3E);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: wrapBannerIn .55s var(--ease) both, wrapBannerGlow 2.6s ease-in-out .6s infinite;
}
.wrap-banner-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 40%, transparent 60%);
  background-size: 220% 100%;
  animation: wrapBannerShine 3.2s ease-in-out 1s infinite;
}
.wrap-banner-ic {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,.16); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.wrap-banner-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: 500; }
.wrap-banner-title { font-family: var(--font-d); font-size: 17.5px; color: #FFFFFF; margin-top: 2px; }
.wrap-banner-cta {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 500; color: #1C1C1F;
  background: #FFFFFF; padding: 7px 13px; border-radius: 99px; flex-shrink: 0;
}
@keyframes wrapBannerIn {
  from { opacity: 0; transform: translateY(-16px) scale(.95); }
  to { opacity: 1; transform: none; }
}
@keyframes wrapBannerGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 12px 42px rgba(0, 0, 0, 0.5); }
}
@keyframes wrapBannerShine {
  0% { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wrap-banner, .wrap-banner-shine { animation: none; }
}

/* ---------- page transitions ---------- */
.view { animation: pageIn .45s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s var(--ease) both; }
.rise.d1 { animation-delay: .06s } .rise.d2 { animation-delay: .12s }
.rise.d3 { animation-delay: .18s } .rise.d4 { animation-delay: .24s }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 0 14px;
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
.topbar .brand .word { font-family: var(--font-d); font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; }
.iconbtn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-2);
  transition: transform .2s var(--ease);
}
.iconbtn:active { transform: scale(0.9); }

/* ---------- bottom nav: floating glass dock, session CTA centered & raised ---------- */
nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
}
.dock {
  display: flex; align-items: stretch; justify-content: space-between;
  width: 100%;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.05);
}
.dock button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px;
  font-size: 9.5px; letter-spacing: 0.02em; color: var(--ink-3);
  border-radius: 12px;
  transition: color .25s, background .25s;
}
.dock button svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.dock button.active { color: var(--ink); background: var(--tint); }
.dock button.active svg { stroke: var(--ochre); transform: translateY(-1px); }

/* ================================================================
   ONBOARDING — cinematic, centered
================================================================ */
.onboard {
  position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 100;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.onboard .aurora {
  display: none; /* was a gold-tinted wash over the whole screen — removed per the neutral background request */
}
.onboard .ob-inner {
  position: relative; z-index: 1;
  max-width: 560px; width: 100%; margin: 0 auto;
  flex: 1; display: flex; flex-direction: column;
  padding: max(26px, env(safe-area-inset-top)) 24px calc(26px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  min-height: 0;
}
.ob-progress { display: flex; gap: 6px; margin-bottom: 10px; }
.ob-progress i { flex: 1; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; }
.ob-progress i.done::before, .ob-progress i.now::before { content: ""; display: block; height: 100%; background: var(--ochre); width: 100%; }
.ob-progress i.now::before { animation: fillIn .6s var(--ease); }
@keyframes fillIn { from { width: 0 } to { width: 100% } }

.ob-step { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch; animation: pageIn .5s var(--ease); }
.ob-step h1 { font-size: 34px; margin-bottom: 8px; }
.ob-step .lede { color: var(--ink-2); font-size: 15px; margin-bottom: 26px; }
.ob-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; }

.ob-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; width: 100%;
}
.ob-hero .logo-chip { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.ob-hero .word { font-family: var(--font-d); font-size: 38px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 20px; }
.ob-hero .tag { font-family: var(--font-d); font-style: italic; font-size: 18px; color: var(--ink-2); margin-top: 6px; }
.ob-theme-pick { display: flex; gap: 8px; margin-top: 22px; }

.ob-google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 320px; margin: 6px auto 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  padding: 13px 20px; border-radius: 99px; font-size: 14.5px; box-shadow: var(--shadow-1);
}
.ob-or { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; margin: 14px 0 0; }
.ob-signed-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  padding: 7px 16px; border-radius: 99px; background: var(--tint); color: var(--ochre); font-size: 13px;
}
.ob-theme-pick button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; }
.ob-theme-pick button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  padding: 15px 14px;
  text-align: left; font-size: 14.5px; font-weight: 300;
  display: flex; align-items: center; gap: 10px;
  transition: transform .18s var(--ease), border-color .2s, background .25s;
}
.pick .em { display: inline-flex; color: var(--ochre); flex-shrink: 0; }
.pick:active { transform: scale(0.96); }
.pick.on { border-color: transparent; background: var(--ochre); color: var(--on-accent); }
.pick.on .em { color: var(--on-accent); }
.pick-grid.moods .pick { min-height: 60px; }

.goal-dial { text-align: center; margin: 8px 0 20px; }
.goal-dial .n { font-family: var(--font-d); font-size: 84px; line-height: 1; font-variant-numeric: tabular-nums; }
.goal-dial .u { color: var(--ink-2); letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }
.goal-chips { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.goal-chips button { padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; color: var(--ink-2); }
.goal-chips button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--surface-2); border: none; padding: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ochre); border: 3px solid var(--surface); box-shadow: var(--shadow-1); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ochre); border: 3px solid var(--surface); cursor: pointer; }

/* ================================================================
   HOME
================================================================ */
.hello .hi { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hello h1 { font-size: 32px; }

.ring-card { display: flex; align-items: center; gap: 20px; }
.ring-wrap { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-wrap .ring-bg { stroke: var(--surface-2); }
.ring-wrap .ring-fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-center .n { font-family: var(--font-d); font-size: 27px; line-height: 1; }
.ring-center .u { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }

.pillstats { display: flex; gap: 10px; margin: 4px 0 16px; }
.pillstat { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 6px; text-align: center; box-shadow: var(--shadow-1); }
.pillstat .n { font-family: var(--font-d); font-size: 21px; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--ochre); }
.pillstat .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }

.now-card { display: flex; gap: 16px; cursor: pointer; }
.now-card .meta { flex: 1; min-width: 0; }
.now-card .t { font-family: var(--font-d); font-size: 18px; line-height: 1.24; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.now-card .a { color: var(--ink-2); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.quote-block { text-align: center; padding: 26px 18px; }
.quote-block .q { font-family: var(--font-d); font-style: italic; font-size: 19.5px; line-height: 1.5; }
.quote-block .w { margin-top: 10px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.quote-block .w .wb { font-style: italic; text-transform: none; letter-spacing: 0; }

/* ---------- covers ---------- */
.cover { width: 62px; height: 93px; border-radius: 8px; object-fit: cover; display: block; flex-shrink: 0; background: var(--surface-2); box-shadow: 3px 4px 12px rgba(0,0,0,.18); }
.on-this-day { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.cover.lg { width: 96px; height: 144px; border-radius: 10px; }
.cover.xl { width: 150px; height: 225px; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.3); }
.gencover { display: flex; flex-direction: column; justify-content: space-between; padding: 9px 8px; overflow: hidden; color: #FFFFFF; font-family: var(--font-d); }
.gencover .gt { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.gencover .ga { font-size: 8.5px; opacity: .8; font-family: var(--font-b); letter-spacing: .04em; overflow-wrap: anywhere; }
.cover.lg.gencover .gt { font-size: 14px; } .cover.lg.gencover .ga { font-size: 10px; }
.cover.xl.gencover .gt { font-size: 20px; } .cover.xl.gencover .ga { font-size: 12px; }

.progress-line { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.progress-line .fill { height: 100%; background: var(--gold); border-radius: 99px; transition: width .8s var(--ease); }

/* ================================================================
   DISCOVER — vertical snap feed
================================================================ */
.feed { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; z-index: 10; background: var(--bg); }
.feed::-webkit-scrollbar { display: none; }
.feed-card { scroll-snap-align: start; scroll-snap-stop: always; height: 100%; position: relative; display: flex; flex-direction: column; padding: calc(56px + env(safe-area-inset-top)) 20px calc(var(--nav-h) + 34px); overflow: hidden; }
.feed-card .bgwash { position: absolute; inset: 0; opacity: .96; }
.feed-card .bgcover { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(38px) saturate(1.1) brightness(0.6); transform: scale(1.1); }
.feed-card .fc-inner { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; width: 100%; height: 100%; color: #FFFFFF; display: flex; flex-direction: column; }
.fc-content { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fc-content::-webkit-scrollbar { display: none; }
.feed-card .fc-cover { width: 148px; height: 222px; margin: 4px 0 4px; animation: rise .6s var(--ease) both; flex-shrink: 0; }
.feed-card .fc-title { font-family: var(--font-d); line-height: 1.22; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.feed-card .fc-author { line-height: 1.3; opacity: .82; letter-spacing: .03em; overflow-wrap: anywhere; margin-top: 2px; }
.feed-card .fc-blurb { font-size: 14px; opacity: .88; line-height: 1.55; max-width: 44ch; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.feed-card .fc-actions { flex-shrink: 0; padding-top: 14px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.feed-card .fc-actions .btn { padding: 8px 15px; font-size: 12.5px; }
.feed-card .fc-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.feed-card .fc-meta .chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #FFFFFF; }
.feed-card .fc-why { font-family: var(--font-d); font-style: italic; font-size: 13.5px; opacity: .92; background: rgba(0,0,0,.24); border-radius: 99px; padding: 6px 16px; }
.feed-card .fc-actions { display: flex; gap: 10px; margin-top: 6px; }
.feed-card .fc-actions .btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #FFFFFF; box-shadow: none; }
.feed-card .fc-actions .btn.main { background: #FFFFFF; color: #1C1C1F; }
.feed-hint { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center; color: #FFFFFF; z-index: 3; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; pointer-events: none; }
.feed-topbtns { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 40; display: flex; gap: 8px; }
.feed-topbtns .iconbtn { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.25); color: #FFFFFF; }

.fc-why-static { display: block; text-align: center; background: var(--tint); color: var(--ink); border-radius: 99px; padding: 7px 16px; font-family: var(--font-d); font-style: italic; font-size: 13.5px; margin: 6px auto; max-width: fit-content; }

.chip { font-size: 11.5px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.chip.gold { background: var(--tint); border-color: transparent; color: var(--ink); }

/* ================================================================
   SEARCH — sticky search bar within its sheet
================================================================ */
.search-head { display: flex; gap: 10px; margin-bottom: 16px; }
.search-head input { flex: 1; border-radius: 99px; padding-left: 18px; }
.search-head.sticky { position: sticky; top: -14px; margin: -14px -20px 14px; padding: 22px 20px 10px; background: var(--bg); z-index: 10; }
.result-row { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.result-row .meta { flex: 1; min-width: 0; }
.result-row .t { font-family: var(--font-d); font-size: 17px; line-height: 1.28; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result-row .a { color: var(--ink-2); font-size: 13px; margin-top: 1px; overflow-wrap: anywhere; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-md); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.25), transparent 70%); animation: shimmer 1.3s infinite; }
@keyframes shimmer { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* ================================================================
   LIBRARY
================================================================ */
.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { white-space: nowrap; padding: 8px 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-2); transition: all .2s var(--ease); }
.seg button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; }
.shelf-item { cursor: pointer; transition: transform .2s var(--ease); }
.shelf-item:active { transform: scale(.95); }
.shelf-item .cover { width: 100%; height: auto; aspect-ratio: 2/3; }
.shelf-item .t { font-size: 12px; margin-top: 7px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-item .sub { font-size: 10.5px; color: var(--ink-2); margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shelf-item .mini-progress { height: 3.5px; margin-top: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.shelf-item .mini-progress i { display: block; height: 100%; background: var(--gold); }

/* ================================================================
   JOURNAL
================================================================ */
.j-suggest-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.j-suggest-row:empty { margin-bottom: 0; }
.j-suggest-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 5px 12px; border-radius: 99px; border: 1px dashed var(--ochre); background: var(--tint); color: var(--ochre); }
.kind-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.kind-row button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-2); }
.kind-row button.active { background: var(--ochre); border-color: var(--ochre); color: var(--on-accent); }
.prompt-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.prompt-pills button { font-size: 12.5px; padding: 6px 12px; border-radius: 99px; border: 1px dashed var(--ochre); color: var(--ochre); background: var(--tint); text-align: left; }
.prompt-pills button.on { background: var(--ochre); color: var(--on-accent); border-style: solid; }

.attach-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.attach-strip .thumb { position: relative; }
.attach-strip img { width: 68px; height: 68px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.attach-strip .rm { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; }

.journal-entry .je-top, .mini-entry .je-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.journal-entry .je-top .muted, .mini-entry .je-top .muted { overflow-wrap: anywhere; }
.rich-body img { max-width: 100%; border-radius: 10px; margin: 8px 0; display: block; }

/* ---------------- full-screen journal editor ---------------- */
.journal-fs { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 90; background: var(--bg); display: flex; flex-direction: column; animation: fade .2s ease; }
.jfs-top { display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 16px 8px; flex-shrink: 0; }
.jfs-book-picker { flex: 1; min-width: 0; display: flex; justify-content: center; }
.jfs-book-picker select {
  padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: 13px; width: auto; max-width: 220px;
}
.jfs-book-search { padding: 10px 16px 0; flex-shrink: 0; }
.jfs-book-search input { border-radius: 99px; padding-left: 16px; }
.jfs-book-search #jfs-book-results { margin-top: 8px; max-height: 180px; overflow-y: auto; }
.jfs-kinds { padding: 0 16px; flex-shrink: 0; }
.jfs-prompts { padding: 0 16px; flex-shrink: 0; }
.jfs-page { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 22px 20px; }
.jfs-editor {
  font-family: var(--font-d); font-size: 19px; line-height: 1.7; color: var(--ink);
  min-height: 40vh; min-height: 40dvh; outline: none; max-width: 640px; margin: 0 auto;
}
.jfs-editor:empty::before { content: attr(data-placeholder); color: var(--ink-3); font-style: italic; }
.jfs-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }

.jbp-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: var(--r-md); cursor: pointer; }
.jbp-row:hover, .jbp-row.on { background: var(--tint); }
.jbp-row .cover { width: 36px; height: 54px; flex-shrink: 0; }
.jbp-row span { font-size: 14.5px; line-height: 1.3; }
.journal-entry .je-prompt { font-style: italic; margin-top: 8px; }
.journal-entry .body { font-family: var(--font-d); font-size: 16.5px; line-height: 1.6; margin-top: 8px; white-space: pre-wrap; word-wrap: break-word; }
.sealed-body { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-style: italic; }
.journal-entry .imgs, .mini-entry .imgs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.journal-entry .imgs img, .mini-entry .imgs img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.mini-entry { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.mini-entry:last-child { border-bottom: none; }

/* ================================================================
   BOOK DETAIL / SHEET
================================================================ */
.sheet-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; backdrop-filter: blur(3px); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet { background: var(--bg); width: 100%; max-width: 660px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 26px 26px 0 0; padding: 14px 20px calc(26px + env(safe-area-inset-bottom, 0px)); animation: sheetUp .35s var(--ease); position: relative; }
@keyframes sheetUp { from { transform: translateY(60px); opacity: .5 } to { transform: none; opacity: 1 } }
@media (min-width: 700px) { .sheet-backdrop { align-items: center; padding: 30px; } .sheet { border-radius: 26px; } }
.sheet .grab { width: 42px; height: 4px; border-radius: 99px; background: var(--line); margin: 0 auto 14px; }
.sheet .close-x { position: absolute; top: 16px; right: 16px; z-index: 20; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }

.bd-hero { position: relative; text-align: center; padding: 22px 0 8px; }
.bd-hero .halo { position: absolute; inset: -30px -30px 0; z-index: 0; background: var(--tint); filter: blur(30px); border-radius: 50%; }
.bd-hero .cover { margin: 0 auto; position: relative; z-index: 1; animation: rise .5s var(--ease); }
.bd-hero h2 { margin-top: 16px; font-size: 25px; }
.bd-hero .a { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.bd-hero .chips { justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 16px; }
.statgrid .cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 6px; text-align: center; }
.statgrid .n { font-family: var(--font-d); font-size: 19px; }
.statgrid .l { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 2px; }

.session-item { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.session-item:last-child { border: none; }

.ratestars { display: inline-flex; gap: 5px; font-size: 26px; color: var(--ink-3); }
.ratestars .on { color: var(--gold); }
.ratestars span { cursor: pointer; transition: transform .15s var(--ease); }
.ratestars span:active { transform: scale(1.3); }

/* ================================================================
   TIMER / SESSION
================================================================ */
.timer-page { display: flex; flex-direction: column; min-height: calc(100dvh - 160px); }
.timer-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 30px 16px; margin-bottom: 14px; }
.timer-hero .time { font-family: var(--font-d); font-weight: 200; font-size: 74px; letter-spacing: .02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ochre); }
.timer-hero .bl { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.timer-rings { position: relative; width: 260px; height: 260px; margin: 6px auto 14px; }
.timer-rings svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-rings .ring-bg-o, .timer-rings .ring-bg-i { stroke: var(--line); }
.timer-rings .ring-fg-o { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.timer-rings .ring-fg-i { stroke: var(--ochre); stroke-linecap: round; }
.breath { position: absolute; inset: 0; margin: auto; width: 176px; height: 176px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--logo-halo); animation: breathe 5s ease-in-out infinite; }
.breath img { width: 82px; }
@keyframes breathe { 0%,100% { transform: scale(1) } 50% { transform: scale(1.06) } }
.paused .breath { animation-play-state: paused; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .timer-rings .ring-fg-i { transition: none; } }

.mood-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.mood-row button { font-size: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); transition: transform .18s var(--ease), background .2s; }
.mood-row button.on { background: var(--ochre); transform: scale(1.12); }
.mood-row button.loc-btn { display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.mood-row button.loc-btn.on { color: var(--on-accent); }

/* ---------- session summary ---------- */
.summary { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 110; background: var(--bg); overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.summary .aurora { display: none; }
.summary .sum-inner { position: relative; z-index: 1; max-width: 560px; width: 100%; margin: 0 auto; padding: 40px 24px; flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.summary .big { font-family: var(--font-d); font-size: 88px; font-weight: 200; line-height: 1; color: var(--ochre); }
.summary .biglabel { letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 8px; }
.sumgrid .cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 8px; }
.sumgrid .n { font-family: var(--font-d); font-size: 25px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sumgrid .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.xp-pop { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; padding: 8px 18px; border-radius: 99px; background: var(--ochre); color: var(--on-accent); font-size: 14px; box-shadow: var(--shadow-2); animation: popIn .5s var(--ease) .4s both; }
@keyframes popIn { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.ach-pop { margin-top: 14px; animation: popIn .5s var(--ease) .7s both; }

/* ================================================================
   MONTHLY WRAP — full-screen swipeable story viewer
================================================================ */
.wrap-viewer { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 120; background: var(--bg); display: flex; flex-direction: column; }
.wrap-progress { display: flex; gap: 5px; padding: max(14px, env(safe-area-inset-top)) 16px 0; }
.wrap-progress i { flex: 1; height: 3px; border-radius: 99px; background: var(--line); }
.wrap-progress i.done { background: var(--ochre); }
.wrap-progress i.now { background: var(--gold); }
.wrap-viewer .close-x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 10; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.wrap-header { text-align: center; padding: 22px 16px 8px; }
.wrap-header-kicker { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ochre); font-weight: 500; }
.wrap-header-month { font-family: var(--font-d); font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.wrap-capture { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wrap-brand { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0 20px; opacity: .55; flex-shrink: 0; }
.wrap-brand span { font-family: var(--font-d); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.wrap-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 26px; position: relative; }
.wrap-slide { max-width: 480px; text-align: center; animation: rise .4s var(--ease); }
.wrap-ic { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--tint); color: var(--ochre); margin: 0 auto 14px; }
.wrap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wrap-grid .cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 10px; }
.wrap-grid .n { font-family: var(--font-d); font-size: 34px; }
.wrap-grid .l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; justify-items: center; }
.collage .cover { width: 100%; height: auto; aspect-ratio: 2/3; }
.wrap-quote { font-family: var(--font-d); font-style: italic; font-size: 24px; line-height: 1.5; margin-top: 12px; overflow-wrap: anywhere; }
.compare-row { display: flex; gap: 14px; margin-top: 16px; }
.compare-cell { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 10px; }
.compare-cell .n { font-family: var(--font-d); font-size: 28px; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.compare-cell .delta { font-size: 13px; font-family: var(--font-b); }
.compare-cell .delta.up { color: var(--gold); }
.compare-cell .delta.down { color: var(--ember); }
.compare-cell .l { font-size: 10.5px; color: var(--ink-2); margin-top: 4px; }
.wrap-nav { position: absolute; inset: 0; display: flex; z-index: 1; }
.wrap-nav .tap-zone { flex: 1; background: transparent; }
.wrap-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 2; }

/* ================================================================
   SHARE CARD — 9:16
================================================================ */
.share-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; margin: 0 -20px; padding: 0 20px; }
.share-carousel::-webkit-scrollbar { display: none; }
.share-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; }
.share-slide canvas { width: 100%; max-width: 280px; aspect-ratio: 9/16; border-radius: 16px; box-shadow: var(--shadow-2); background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0/16px 16px; }
.share-slide.preview-dark canvas { background: rgba(20, 16, 10, 0.6); }
.carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.carousel-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.carousel-dots i.on { background: var(--ink); transform: scale(1.3); }
.opt-row { display: flex; gap: 8px; justify-content: center; margin: 14px 0 2px; flex-wrap: wrap; transition: opacity .2s; }
.opt-row button { font-size: 12.5px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); }
.opt-row button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ================================================================
   PROFILE
================================================================ */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-head h1 { flex: 1; min-width: 0; }
.pf-name-edit-ic { color: var(--ink-3); vertical-align: middle; margin-left: 2px; }
.avatar-btn { flex-shrink: 0; border-radius: 50%; padding: 0; position: relative; }
.avatar-btn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--ochre); opacity: 0; transition: opacity .2s;
}
.avatar-btn:active::after { opacity: 1; }
.avatar-mark { border-radius: 50%; display: block; object-fit: cover; box-shadow: var(--shadow-1); }

.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.avatar-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.avatar-opt img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.avatar-opt span { font-size: 11.5px; color: var(--ink-2); }
.avatar-opt.on { border-color: var(--ochre); background: var(--tint); }
.avatar-opt.on span { color: var(--ink); }
.level-badge { width: 66px; height: 66px; border-radius: 22px; flex-shrink: 0; background: var(--ochre); color: var(--on-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-d); box-shadow: var(--shadow-2); }
.level-badge .n { font-size: 26px; line-height: 1; }
.level-badge .l { font-size: 8px; letter-spacing: .16em; font-family: var(--font-b); }
.xpbar { height: 7px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.xpbar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width 1s var(--ease); }

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 8px; text-align: center; transition: transform .2s var(--ease); }
.ach .ic { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.ach .t { font-size: 10.5px; margin-top: 6px; color: var(--ink-2); line-height: 1.25; }
.ach.unlocked { border-color: transparent; background: var(--tint); }
.ach.unlocked .ic { color: var(--ochre); }
.ach.unlocked .t { color: var(--ink); }

.theme-toggle { display: flex; gap: 8px; margin-top: 6px; }
.theme-toggle button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 14px; }
.theme-toggle button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.account-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.account-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.account-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--ochre); }
.account-name { font-family: var(--font-d); font-size: 15px; }
.account-status { margin-top: 1px; }
.btn.ghost.block { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

.share-history { display: flex; flex-direction: column; gap: 10px; }
.share-hist-row { display: flex; align-items: center; gap: 12px; }
.share-hist-row .cover { width: 40px; height: 60px; flex-shrink: 0; }
.share-hist-row .meta { flex: 1; min-width: 0; }
.share-hist-row .t { font-family: var(--font-d); font-size: 14.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-hist-row .btn { flex-shrink: 0; }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 40px 20px; color: var(--ink-2); }
.empty .serif { font-size: 19px; color: var(--ink); margin-top: 6px; }

.toast { position: fixed; bottom: calc(var(--nav-h) + 20px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 22px; border-radius: 99px; font-size: 13.5px; z-index: 130; animation: rise .3s var(--ease); max-width: 88vw; text-align: center; box-shadow: var(--shadow-2); }
.toast.toast-chips { border-radius: 20px; padding: 14px 18px; max-width: 92vw; }
.toast-chips .tc-row { display: flex; gap: 7px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.toast-chips .tc-row button { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: var(--bg); border-radius: 99px; padding: 6px 13px; font-size: 12.5px; font-family: var(--font-b); }

.field { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--ink-2); }
.field > span { display: block; margin-bottom: 6px; letter-spacing: .05em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}