/* Orela Daily: premium wellness styling. Fraunces (display) + Plus Jakarta Sans (UI), self-hosted.
   Mobile first (360-430 px), 480 px column on bigger screens. Motion: transform/opacity only, off for reduced motion. */

@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-latin.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../assets/fonts/fraunces-italic-latin.woff2') format('woff2'); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('../assets/fonts/jakarta-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --green: #1b4f3d; --green-deep: #0f3327; --green-ink: #0c2a20; --green-mid: #2a6a52; --green-soft: #4f8a70;
  --mint: #cfe8d9; --mint-2: #e3f1e8; --mint-3: #f1f8f3;
  --cream: #f6f1e8; --cream-2: #efe7da; --cream-3: #e6dccb; --paper: #fffdf9;
  --ink: #14211c; --ink-2: #47524c; --ink-3: #5f6762;
  --line: rgba(20, 33, 28, .08); --line-2: rgba(20, 33, 28, .14);
  --flame: #f07a2a; --flame-2: #ffb547; --ember: #d9531e; --flame-ink: #b85a1c;
  --gold: #c9973a; --gold-2: #f2d48a; --gold-ink: #9a6d1e; --sky: #a9cfe6; --danger: #b2412e;
  --grad-deep: linear-gradient(155deg, #0c2a20 0%, #1b4f3d 58%, #2c6b52 100%);
  --grad-btn: linear-gradient(180deg, #24604a 0%, #1b4f3d 60%, #164233 100%);
  --grad-gold: linear-gradient(135deg, #f7e2a6 0%, #e2b85c 50%, #c9973a 100%);
  --grad-flame: linear-gradient(160deg, #ffc35c 0%, #f07a2a 55%, #d9531e 100%);
  --r-xl: 28px; --r: 22px; --r-sm: 16px; --r-xs: 12px;
  --shadow: 0 1px 2px rgba(12, 42, 32, .05), 0 8px 24px rgba(12, 42, 32, .06);
  --shadow-lg: 0 18px 50px rgba(12, 42, 32, .22);
  --shadow-green: 0 10px 24px rgba(27, 79, 61, .28);
  --tabbar-h: 104px; /* floating tab bar: 10 px off the bottom + 66 px bar + the 28 px soft fade above it */
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --gutter: 18px;
  --view-pt: calc(var(--safe-t) + 14px);
  --view-pb: calc(var(--tabbar-h) + var(--safe-b)); /* the only bottom room: the tab bar + the home indicator */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.22, 1.2, .36, 1);
  --spring-soft: cubic-bezier(.2, .9, .3, 1.04);
  color-scheme: light;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
    --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  }
}
@media (max-width: 370px) { :root { --gutter: 14px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); overscroll-behavior: none; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; overflow-x: hidden; overscroll-behavior: none;
}
/* soft colour fields behind everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(207, 232, 217, .9), transparent 70%),
    radial-gradient(50% 35% at 0% 30%, rgba(255, 214, 170, .35), transparent 70%),
    radial-gradient(70% 40% at 50% 110%, rgba(207, 232, 217, .7), transparent 70%);
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
a { color: var(--green); }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 560; letter-spacing: -0.015em; font-variation-settings: 'SOFT' 60; }
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 18px; line-height: 1.3; }
p { margin: 0; }
.serif { font-family: var(--serif); font-variation-settings: 'SOFT' 60; }
em, .it { font-family: var(--serif); font-style: italic; font-weight: 500; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.fine a { color: var(--green); font-weight: 600; }
.center { text-align: center; justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 300; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid rgba(27, 79, 61, .4); outline-offset: 2px; border-radius: 12px; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-mid); }
.eyebrow .ic { flex: 0 0 auto; }
.ic { flex: 0 0 auto; }

/* ---------------- shell ---------------- */
#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
#view {
  overflow-x: clip;
  overflow-clip-margin: 32px;
  padding: var(--view-pt) calc(var(--gutter) + var(--safe-r)) var(--view-pb) calc(var(--gutter) + var(--safe-l));
  outline: none;
}
/* screens without the tab bar (welcome, setup, timer, soft-ask): one screen tall, CTA at the bottom, no extra room */
body.no-tabbar { --view-pb: calc(var(--safe-b) + 16px); }
.screen { display: flex; flex-direction: column; gap: 16px; }
.screen.enter-tab { animation: enterTab .55s var(--spring-soft) both; }
.screen.enter-push { animation: enterPush .5s var(--spring-soft) both; }
.screen.enter-pop { animation: enterPop .45s var(--spring-soft) both; }
/* cards rise in when a screen is entered, never when it re-renders in place (sync, focus, refresh) */
.enter-tab.stagger > *, .enter-push.stagger > *, .enter-pop.stagger > * { animation: rise .6s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 55ms + 40ms); }
@keyframes enterTab { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes enterPush { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes enterPop { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- tab bar: floating glass ---------------- */
#tabbar {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + var(--safe-b)); width: calc(100% - 20px - var(--safe-l) - var(--safe-r)); max-width: 460px;
  display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px;
  background: rgba(255, 253, 249, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 26px;
  box-shadow: 0 12px 34px rgba(12, 42, 32, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
}
#tabbar[hidden] { display: none; }
/* a soft blurred fade behind and below the floating tab bar: content scrolling under it goes soft instead of overlapping */
.tab-fade {
  position: fixed; z-index: 49; left: 0; right: 0; bottom: 0; height: calc(104px + var(--safe-b)); pointer-events: none;
  /* solid page colour behind the island (nothing shows through it), then a short blurred fade above it */
  background: linear-gradient(to top, var(--cream) 0%, var(--cream) 72%, rgba(246, 241, 232, .7) 84%, rgba(246, 241, 232, 0) 100%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to top, #000 72%, transparent); mask-image: linear-gradient(to top, #000 72%, transparent);
}
body.no-tabbar .tab-fade { display: none; }
#tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; text-decoration: none; color: var(--ink-3); font-size: 11.5px; font-weight: 600; border-radius: 20px;
  transition: color .2s;
}
#tabbar a .tab-ic { position: relative; width: 50px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
#tabbar a .tab-ic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--mint-2); transform: scale(.4); opacity: 0; transition: transform .45s var(--spring), opacity .2s; }
#tabbar a .ic { position: relative; }
#tabbar a .ic-on { display: none; }
#tabbar a.active { color: var(--green); }
#tabbar a.active .tab-ic::before { transform: scale(1); opacity: 1; }
#tabbar a.active .ic-off { display: none; }
#tabbar a.active .ic-on { display: block; }
#tabbar a.bounce .ic { animation: tabBounce .5s var(--spring); }
@keyframes tabBounce { 0% { transform: scale(1); } 30% { transform: scale(.78) translateY(2px); } 100% { transform: scale(1); } }
#tabbar .tab-dot { position: absolute; top: 7px; right: calc(50% - 20px); width: 8px; height: 8px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 2px var(--paper); }

/* ---------------- buttons ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r-sm); border: 0;
  font-size: 16px; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .35s var(--spring), box-shadow .25s, background .2s, opacity .2s; -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(.965); transition-duration: .08s; }
.btn[disabled] { opacity: .4; cursor: default; transform: none; }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--shadow-green), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn-primary .ic { color: var(--mint); }
.btn-light { background: var(--paper); color: var(--green-deep); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.btn-secondary { background: var(--mint-2); color: var(--green-deep); box-shadow: inset 0 0 0 1px rgba(27, 79, 61, .12); }
.btn-ghost { background: transparent; color: var(--green); }
.btn-glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-gold { background: var(--grad-gold); color: #3b2a07; box-shadow: 0 10px 24px rgba(201, 151, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px rgba(178, 65, 46, .3); }
.btn-block { width: 100%; }
.btn-lg { min-height: 58px; font-size: 17px; border-radius: 18px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 14.5px; border-radius: 14px; }
.btn[hidden] { display: none; }
.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-secondary.loading::after, .btn-light.loading::after { border-color: rgba(27, 79, 61, .25); border-top-color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }
.link {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 10px 0; min-height: 44px;
  color: var(--green); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.link.center { display: flex; width: 100%; }
.link.quiet { color: var(--ink-3); font-weight: 600; }
.icon-btn {
  width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 999px; color: var(--ink); cursor: pointer; text-decoration: none;
  transition: transform .3s var(--spring), background .2s;
}
.icon-btn:active { transform: scale(.9); background: rgba(20, 33, 28, .06); }
.icon-btn.soft { background: rgba(255, 253, 249, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 14px rgba(12, 42, 32, .08); }
.icon-btn.round { width: 44px; height: 44px; background: var(--cream-2); font-size: 22px; font-weight: 600; }
.icon-btn-spacer { width: 44px; flex: 0 0 44px; }
.back { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 15px; text-decoration: none; color: var(--green); align-self: flex-start; padding: 6px 10px 6px 0; min-height: 44px; }

.pill {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--cream-2); color: var(--ink-2);
}
.pill-green { background: var(--mint-2); color: var(--green-deep); }
.pill-gold { background: #fbf0d2; color: var(--gold-ink); }
.pill-flame { background: #fde9da; color: var(--flame-ink); }
.pill-glass { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

/* ---------------- cards ---------------- */
.card {
  position: relative; background: var(--paper); border-radius: var(--r); padding: 20px;
  box-shadow: var(--shadow); border: 1px solid rgba(20, 33, 28, .04);
  display: flex; flex-direction: column; gap: 14px;
}
.card.flat { box-shadow: none; border-color: var(--line); }
.card.tint { background: linear-gradient(160deg, var(--mint-3), var(--mint-2)); border-color: transparent; box-shadow: none; }
.card.warm { background: linear-gradient(160deg, #fff6ec, #fdeedd); border-color: transparent; box-shadow: none; }
.card.dark { background: var(--grad-deep); color: #fff; border: 0; box-shadow: var(--shadow-lg); overflow: hidden; }
.card.dark h2, .card.dark h3, .card.dark h1 { color: #fff; }
.card.dark .muted { color: rgba(255, 255, 255, .78); }
.card.dark .eyebrow { color: var(--mint); }
a.card { text-decoration: none; color: inherit; transition: transform .35s var(--spring); }
a.card:active { transform: scale(.98); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-head > div { min-width: 0; }
.card-x { position: absolute; top: 8px; right: 8px; color: var(--ink-3); }
.card.dark .card-x { color: rgba(255, 255, 255, .7); }
.bar { height: 8px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green-mid), var(--green)); transform-origin: left; transition: width .9s var(--spring-soft); }
.bar.gold > span { background: var(--grad-gold); }
.bar.warn > span { background: var(--grad-flame); }
.bar.on-dark { background: rgba(255, 255, 255, .16); }
.bar.on-dark > span { background: linear-gradient(90deg, var(--mint), #fff); }
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm); background: var(--mint-2); font-size: 15px; line-height: 1.45; }
.callout .ic { color: var(--green); margin-top: 1px; }
.callout.warm { background: #fdeedd; }
.callout.warm .ic { color: var(--flame-ink); }
.field-label { font-size: 15px; font-weight: 700; margin-bottom: -4px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; margin-bottom: -4px; }
.section-head h2 { font-size: 21px; }
.section-head .link { padding: 0; min-height: 0; font-size: 14px; }
.page-head { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.page-head h1 { font-size: 34px; }

/* skeleton shimmer */
.skel { position: relative; overflow: hidden; background: var(--cream-2); border-radius: 12px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---------------- rings ---------------- */
.ring .ring-track { stroke: var(--cream-2); }
.ring .ring-bar { stroke: var(--green); transition: none; }
.ring .ring-bar.sweep { transition: stroke-dashoffset .9s cubic-bezier(.22, 1, .36, 1); } /* no overshoot: never springs on a dash offset */
.ring .ring-bar.zero { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ring .ring-bar.sweep { transition: none; } }
.ring.gold .ring-bar { stroke: var(--gold); }
.ring.flame .ring-bar { stroke: var(--flame); }
.ring.mint .ring-bar { stroke: var(--green-soft); }
.ring.on-dark .ring-track { stroke: rgba(255, 255, 255, .14); }
.ring.on-dark .ring-bar { stroke: var(--mint); }

/* ---------------- flame (grows with the streak) ---------------- */
.flame-wrap { position: relative; width: 44px; height: 52px; flex: 0 0 auto; transform: scale(var(--fs, 1)); transform-origin: 50% 85%; }
.flame-svg { width: 100%; height: 100%; overflow: visible; }
.flame-outer { transform-origin: 50% 90%; animation: flicker 2.2s ease-in-out infinite; }
.flame-inner { transform-origin: 50% 92%; animation: flicker2 1.6s ease-in-out infinite; }
.flame-glow { animation: glow 2.2s ease-in-out infinite; transform-origin: center; }
.flame-wrap.out .flame-outer, .flame-wrap.out .flame-inner, .flame-wrap.out .flame-glow { animation: none; }
.flame-wrap.out { filter: grayscale(1); opacity: .45; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(0); } 25% { transform: scale(.97, 1.04) rotate(-1.5deg); } 50% { transform: scale(1.02, .97) rotate(1deg); } 75% { transform: scale(.98, 1.03) rotate(-.5deg); } }
@keyframes flicker2 { 0%, 100% { transform: scale(1) translateY(0); } 40% { transform: scale(.92, 1.08) translateY(-1px); } 70% { transform: scale(1.04, .95); } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } }

/* ---------------- top bar (Today) ---------------- */
.top { display: flex; align-items: center; gap: 10px; }
.brand { width: 44px; height: 44px; flex: 0 0 44px; border: 0; background: transparent; padding: 2px; cursor: pointer; border-radius: 999px; }
.top-fill { flex: 1; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px 0 8px; border-radius: 999px;
  background: rgba(255, 253, 249, .85); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 14px rgba(12, 42, 32, .08);
  text-decoration: none; color: var(--ink); font-weight: 800; font-size: 15px; border: 0; cursor: pointer;
}
.chip-btn .flame-wrap { width: 26px; height: 30px; }
.level-chip .lv { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: #3b2a07; font-size: 13px; font-weight: 800; }
.avatar { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--grad-deep); color: #fff; text-decoration: none; font-family: var(--serif); font-size: 18px; font-weight: 600; box-shadow: 0 4px 14px rgba(12, 42, 32, .18); }

/* ---------------- hero (time-aware) ---------------- */
.hero {
  position: relative; border-radius: var(--r-xl); padding: 22px 20px 20px; color: #fff; overflow: hidden; isolation: isolate;
  background: var(--grad-deep); box-shadow: var(--shadow-lg);
}
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.hero::before { width: 260px; height: 260px; right: -90px; top: -110px; background: radial-gradient(circle, rgba(207, 232, 217, .45), transparent 65%); }
.hero::after { width: 220px; height: 220px; left: -80px; bottom: -120px; background: radial-gradient(circle, rgba(79, 138, 112, .55), transparent 70%); }
.hero.morning { background: linear-gradient(160deg, #123a2d 0%, #2a6a52 70%, #4f8a70 100%); }
.hero.morning::before { background: radial-gradient(circle, rgba(255, 196, 120, .55), transparent 65%); }
.hero.evening { background: linear-gradient(165deg, #08201a 0%, #123a2d 60%, #1b4f3d 100%); }
.hero.evening::before { background: radial-gradient(circle, rgba(169, 207, 230, .3), transparent 65%); }
.hero .stars { position: absolute; inset: 0; z-index: -1; opacity: .75; }
.hero .stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.hero-greet { display: flex; flex-direction: column; gap: 4px; }
.hero-greet .eyebrow { color: var(--mint); }
.hero-greet h1 { color: #fff; font-size: 31px; }
.hero-greet h1 em { color: var(--gold-2); font-weight: 480; }
.hero-sub { color: rgba(255, 255, 255, .82); font-size: 15px; }
.hero-art { position: absolute; right: -6px; top: 8px; width: 120px; opacity: .9; z-index: -1; }

/* goal hero inside the hero card */
.goal-hero { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); text-decoration: none; color: #fff; }
.goal-ring { position: relative; flex: 0 0 auto; }
.goal-ring .ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.goal-ring .ring-center b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.goal-ring .ring-center small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-top: 3px; }
.goal-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.goal-copy b { font-family: var(--serif); font-size: 18px; font-weight: 560; line-height: 1.2; }
.goal-copy small { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
.goal-copy .bar { margin-top: 6px; }
.goal-hero.pick { justify-content: space-between; }

/* ---------------- daily rings ---------------- */
.rings-card { flex-direction: row; align-items: center; gap: 18px; }
.rings { position: relative; width: 116px; height: 116px; flex: 0 0 116px; }
.rings svg { position: absolute; inset: 0; margin: auto; }
.rings .r1 .ring-bar { stroke: url(#gRoll); stroke: var(--green); }
.rings .r2 .ring-bar { stroke: var(--gold); }
.rings .r3 .ring-bar { stroke: var(--flame); }
.rings .r1 .ring-track { stroke: rgba(27, 79, 61, .14); }
.rings .r2 .ring-track { stroke: rgba(201, 151, 58, .16); }
.rings .r3 .ring-track { stroke: rgba(240, 122, 42, .14); }
.rings .rings-center { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.rings.closed .rings-center { color: var(--green); }
.rings .rings-center.bump { animation: pop .6s var(--spring); }
.task-list { flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.task { display: flex; align-items: center; gap: 10px; padding: 7px 6px; margin: 0 -6px; border-radius: 14px; text-decoration: none; color: inherit; background: none; border: 0; text-align: left; width: calc(100% + 12px); cursor: pointer; min-height: 44px; }
.task:active { background: var(--cream); }
.task-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px currentColor; }
.task[data-k="roll"] .task-dot { color: var(--green); }
.task[data-k="checkin"] .task-dot { color: var(--gold); }
.task[data-k="qotd"] .task-dot { color: var(--flame); }
.task.done .task-dot { background: currentColor; box-shadow: none; }
.task.done .task-dot .ic { color: #fff; }
.task-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.task-copy b { font-size: 14.5px; font-weight: 700; }
.task-copy small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- big start button ---------------- */
.btn-start {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border-radius: 24px;
  background: var(--grad-btn); color: #fff; text-decoration: none; box-shadow: var(--shadow-green), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .35s var(--spring); overflow: hidden; isolation: isolate;
}
.btn-start::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 80px at 85% 20%, rgba(207, 232, 217, .35), transparent); }
.btn-start:active { transform: scale(.975); }
.btn-start-ic { position: relative; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 999px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.btn-start-ic::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(207, 232, 217, .45); animation: breathe 3.2s ease-in-out infinite; }
.btn-start-ic .ic { margin-left: 3px; color: #fff; }
.btn-start-copy { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.btn-start-copy b { font-family: var(--serif); font-size: 22px; font-weight: 560; }
.btn-start-copy small { font-size: 14px; opacity: .85; }
@keyframes breathe { 0%, 100% { transform: scale(.92); opacity: .5; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------------- banners + nudges ---------------- */
.banner {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 20px; text-decoration: none; color: var(--ink);
  background: var(--paper); box-shadow: var(--shadow); border: 1px solid rgba(20, 33, 28, .05); animation: rise .5s var(--spring-soft) both; width: 100%; text-align: left; cursor: pointer;
}
.banner .b-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; display: grid; place-items: center; background: var(--mint-2); color: var(--green); }
.banner.warm .b-ic { background: #fde9da; color: var(--flame-ink); }
.banner .b-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.banner .b-copy b { font-size: 15px; }
.banner .b-copy span { font-size: 13.5px; color: var(--ink-2); }
.banner > .ic:last-child { color: var(--ink-3); }

/* ---------------- question of the day / campaigns / check-in ---------------- */
.qcard .q-text { font-family: var(--serif); font-size: 21px; line-height: 1.25; font-weight: 540; }
.qcard .q-why { font-size: 13.5px; color: var(--ink-3); margin-top: -6px; }
.qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qopts.one-col { grid-template-columns: 1fr; }
.qopt {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: 16px; border: 0; cursor: pointer;
  background: var(--cream); color: var(--ink); font-weight: 650; font-size: 14.5px; text-align: left; line-height: 1.25;
  box-shadow: inset 0 0 0 1.5px transparent; transition: transform .3s var(--spring), background .2s, box-shadow .2s;
}
.qopt .ic { color: var(--green-mid); }
.qopt:active { transform: scale(.97); }
.qopt.on { background: var(--mint-2); box-shadow: inset 0 0 0 2px var(--green); color: var(--green-deep); }
.qopt.picked { animation: pick .5s var(--spring); }
@keyframes pick { 40% { transform: scale(.95); } 100% { transform: scale(1); } }
.qscale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.qscale .qopt { justify-content: center; font-family: var(--serif); font-size: 20px; padding: 0; }
.qscale-labels { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-top: -4px; }
.q-done { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--mint-3); animation: rise .5s var(--spring-soft) both; }
.q-done .ic { color: var(--green); margin-top: 2px; }
.q-done p { font-size: 15px; line-height: 1.45; }
.qcard textarea { width: 100%; min-height: 96px; border-radius: 16px; border: 1.5px solid var(--line-2); padding: 12px 14px; background: var(--paper); resize: vertical; font-size: 16px; }
.campaign-card { overflow: hidden; }
.campaign-card .c-img { margin: -20px -20px 0; aspect-ratio: 16 / 8; object-fit: cover; width: calc(100% + 40px); max-width: none; }

/* ---------------- challenge, relief, promos ---------------- */
.challenge { flex-direction: row; align-items: center; gap: 14px; }
.challenge .ch-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-gold); color: #3b2a07; box-shadow: 0 8px 18px rgba(201, 151, 58, .3); }
.challenge .ch-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.challenge .ch-copy b { font-size: 15.5px; line-height: 1.3; }
.pips { display: flex; gap: 5px; }
.pips i { flex: 1; height: 7px; border-radius: 999px; background: var(--cream-2); }
.pips i.on { background: var(--grad-gold); }
.enter-tab .pips i.on, .enter-push .pips i.on, .enter-pop .pips i.on { animation: pop .5s var(--spring) both; }
.relief { gap: 10px; }
.relief .big { display: flex; align-items: baseline; gap: 8px; }
.relief .big b { font-family: var(--serif); font-size: 44px; line-height: 1; font-weight: 560; color: var(--green); letter-spacing: -0.02em; }
.relief .big > span { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.spark { width: 100%; height: 64px; }
.spark .sp-line { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 0; }
.enter-tab .spark .sp-line, .enter-push .spark .sp-line, .enter-pop .spark .sp-line { animation: lineIn 1.4s .2s var(--ease) both; }
@keyframes lineIn { from { stroke-dashoffset: 600; } }
.spark .sp-area { fill: url(#spg); opacity: .9; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.promo { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; overflow: hidden; }
.promo .p-media { flex: 0 0 auto; width: 64px; display: flex; justify-content: center; }
.promo .p-media img { height: 96px; width: auto; filter: drop-shadow(0 10px 14px rgba(12, 42, 32, .22)); }
.promo .p-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.promo .p-copy b { font-family: var(--serif); font-size: 18px; font-weight: 560; line-height: 1.2; }
.promo .p-copy span { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.promo .p-copy .link { padding: 4px 0 0; min-height: 0; }
.share-promo { background: linear-gradient(150deg, #fff7ee, #fdebd8 70%, #fbe1c7); border: 0; box-shadow: none; }
.share-promo .p-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-flame); color: #fff; box-shadow: 0 8px 18px rgba(240, 122, 42, .3); }

/* ---------------- bottle ---------------- */
.bottle-card { flex-direction: row; align-items: center; gap: 16px; }
.bottle-vis { position: relative; flex: 0 0 52px; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.bottle-vis img { height: 150px; width: auto; filter: drop-shadow(0 10px 14px rgba(12, 42, 32, .2)); }
.bottle-vis .level { position: absolute; left: 50%; bottom: 10px; width: 6px; height: 92px; transform: translateX(-50%) translateX(34px); border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.bottle-vis .level span { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: linear-gradient(0deg, var(--green), var(--green-soft)); height: var(--left, 50%); transition: height 1s var(--spring-soft); }
.bottle-card.low .bottle-vis .level span { background: var(--grad-flame); }
.bottle-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bottle-big { font-family: var(--serif); font-size: 26px; line-height: 1.1; font-weight: 560; }
.bottle-copy p { font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ---------------- toast, update pill, xp float, confetti ---------------- */
#toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 12px); transform: translate(-50%, -140%); z-index: 400;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); width: max-content;
  padding: 12px 18px 12px 12px; border-radius: 999px; background: rgba(15, 51, 39, .94); color: #fff; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .55s var(--spring), opacity .3s; opacity: 0; pointer-events: none;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }
#toast .toast-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(207, 232, 217, .18); color: var(--mint); flex: 0 0 auto; }
#update-pill {
  position: fixed; z-index: 380; left: 50%; top: calc(var(--safe-t) + 10px); transform: translate(-50%, -150%);
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 16px 8px 8px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px rgba(12, 42, 32, .22); text-align: left; min-height: 52px;
  transition: transform .6s var(--spring);
}
#update-pill.show { transform: translate(-50%, 0); }
#update-pill .up-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-btn); color: #fff; }
#update-pill .up-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
#update-pill .up-copy b { font-size: 14px; }
#update-pill .up-copy span { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-float { position: fixed; z-index: 450; transform: translate(-50%, -50%); pointer-events: none; font-weight: 800; font-size: 16px; color: var(--gold-ink); background: #fff7df; padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(201, 151, 58, .3); animation: xpFloat 1.3s var(--ease) forwards; }
@keyframes xpFloat { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.06); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -180%) scale(1); } }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 500; pointer-events: none; }

/* ---------------- sheets ---------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 200; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(8, 26, 20, .45); opacity: 0; transition: opacity .3s; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, 105%); transition: transform .55s var(--spring-soft);
  background: var(--paper); border-radius: 30px 30px 0 0;
  padding: 10px calc(22px + var(--safe-r)) calc(26px + var(--safe-b)) calc(22px + var(--safe-l));
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg);
}
.sheet.dragging { transition: none; }
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: translate(-50%, 0); }
.sheet-grab { width: 42px; height: 5px; border-radius: 999px; background: var(--cream-3); margin: 0 auto 4px; flex: 0 0 auto; }
.sheet h2 { font-size: 25px; }
.sheet:focus { outline: none; }
.sheet-x { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sheet.celebrate { text-align: center; align-items: center; padding-top: 14px; overflow: hidden; }
.sheet.dark { background: var(--grad-deep); color: #fff; }
.sheet.dark h2 { color: #fff; }
.sheet.dark .muted { color: rgba(255, 255, 255, .8); }
.sheet.dark .sheet-grab { background: rgba(255, 255, 255, .25); }

/* celebration bits */
.medal-big { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin: 6px auto 4px; animation: pop .8s var(--spring) both; }
.medal-big .halo { position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(242, 212, 138, .45), transparent 30%, rgba(207, 232, 217, .45), transparent 60%, rgba(242, 212, 138, .45), transparent 90%); animation: spinSlow 9s linear infinite; mask: radial-gradient(circle, #000 40%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 40%, transparent 70%); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.level-big { font-family: var(--serif); font-size: 64px; line-height: 1; font-weight: 600; color: var(--gold-2); text-shadow: 0 6px 30px rgba(242, 212, 138, .45); animation: pop .8s var(--spring) both; }
.thanks-count { font-family: var(--serif); font-size: 72px; line-height: 1; font-weight: 600; color: var(--green); }

/* ---------------- medallions (badges) ---------------- */
.medallion {
  position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: radial-gradient(circle at 30% 25%, #ffffff, #e3f1e8 45%, #b9d9c6 100%); color: var(--green-deep);
  box-shadow: inset 0 -4px 10px rgba(12, 42, 32, .12), inset 0 2px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(12, 42, 32, .14);
}
.medallion::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(27, 79, 61, .22); }
.medallion.green { background: radial-gradient(circle at 30% 25%, #4f8a70, #1b4f3d 55%, #0c2a20 100%); color: #e3f1e8; }
.medallion.green::after { border-color: rgba(207, 232, 217, .3); }
.medallion.gold { background: radial-gradient(circle at 30% 25%, #fff3cf, #e8c36f 45%, #b8862e 100%); color: #4a3408; }
.medallion.gold::after { border-color: rgba(74, 52, 8, .22); }
.medallion.locked { background: radial-gradient(circle at 30% 25%, #f6f1e8, #e6dccb); color: rgba(20, 33, 28, .3); box-shadow: inset 0 -3px 8px rgba(12, 42, 32, .06); }
.medallion.locked::after { border-color: rgba(20, 33, 28, .1); }
.medallion .m-lock { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--ink-3); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.medallion.xl { width: 116px; height: 116px; }
.medallion .m-num { font-family: var(--serif); font-weight: 650; font-size: 24px; line-height: 1; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.badge-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px 0; color: inherit; }
.badge-cell b { font-size: 13px; line-height: 1.25; }
.badge-cell small { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.badge-cell .mini-bar { width: 56px; height: 4px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.badge-cell .mini-bar span { display: block; height: 100%; background: var(--green-soft); }
/* Standing rule: a scroller clips on both axes, so its padding must be >= the children's shadow offset + blur on every side. */
.badge-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 14px 18px 28px; margin: -14px -18px -20px; scroll-padding-inline: 18px; }
.badge-row::-webkit-scrollbar { display: none; }
.badge-row .medallion { width: 58px; height: 58px; }

/* ---------------- level card ---------------- */
.level-card { flex-direction: row; align-items: center; gap: 16px; }
.level-card .lv-ring { position: relative; flex: 0 0 auto; }
.level-card .lv-ring .ring .ring-bar { stroke: var(--gold); }
.level-card .lv-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 24px; font-weight: 650; color: var(--gold-ink); }
.level-card .lv-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.level-card .lv-copy b { font-family: var(--serif); font-size: 20px; font-weight: 560; }

/* ---------------- lists (settings) ---------------- */
.group { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid rgba(20, 33, 28, .04); overflow: hidden; }
.group-title { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 10px 4px -6px; }
.row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 60px; text-decoration: none; color: inherit; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer; position: relative;
}
.row + .row::before { content: ''; position: absolute; top: 0; left: 64px; right: 0; height: 1px; background: var(--line); }
.row:active { background: var(--cream); }
.row .r-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-2); color: var(--green); }
.row .r-ic.gold { background: #fbf0d2; color: var(--gold-ink); }
.row .r-ic.flame { background: #fde9da; color: var(--flame-ink); }
.row .r-ic.sky { background: #e4f0f7; color: #2f6684; }
.row .r-ic.ink { background: var(--cream-2); color: var(--ink-2); }
.row .r-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.row .r-main b { font-size: 15.5px; font-weight: 650; }
.row .r-main small { font-size: 13px; color: var(--ink-3); }
.row .r-val { font-size: 14.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.row > .ic:last-child { color: var(--ink-3); }
.row.danger .r-main b { color: var(--danger); }
.row input[type=time], .time-input {
  font-size: 16px; font-weight: 700; padding: 6px 10px; border: 0; border-radius: 12px; background: var(--cream); color: var(--ink); min-height: 40px; min-width: 112px;
  font-variant-numeric: tabular-nums;
}
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--cream-2); gap: 2px; }
.seg button { border: 0; background: transparent; min-height: 36px; min-width: 44px; padding: 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s; }
.row.stack { flex-wrap: wrap; row-gap: 10px; }
.row.stack .seg-full { flex: 0 0 calc(100% - 50px); margin-left: 50px; min-width: 0; }
.seg-full button { min-width: 0; padding: 0 6px; }
.seg-full { display: flex; }
.seg-full button { flex: 1; }
.seg button[aria-selected=true], .seg button.on { background: var(--paper); color: var(--green-deep); box-shadow: 0 2px 6px rgba(12, 42, 32, .1); }

/* switches */
input[type=checkbox][role=switch] {
  -webkit-appearance: none; appearance: none; width: 52px; height: 32px; flex: 0 0 52px; border-radius: 999px; margin: 0;
  background: #d9d1c3; position: relative; cursor: pointer; transition: background .25s;
}
input[type=checkbox][role=switch]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 999px; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .45s var(--spring);
}
input[type=checkbox][role=switch]:checked { background: var(--green); }
input[type=checkbox][role=switch]:checked::before { transform: translateX(20px); }
input[type=checkbox][role=switch]:disabled { opacity: .45; }

.status-box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: var(--mint-2); font-size: 14.5px; line-height: 1.45; }
.status-box .ic { color: var(--green); margin-top: 1px; }
.status-box.warn { background: #fdeedd; }
.status-box.warn .ic { color: var(--flame-ink); }
.status-box.off { background: var(--cream-2); }
.status-box.off .ic { color: var(--ink-3); }
.code-box { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: var(--green-ink); color: var(--mint); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.5; word-break: break-all; }
.code-box .k { color: rgba(207, 232, 217, .6); font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: s; }
.steps-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.steps-list li::before { counter-increment: s; content: counter(s); width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; }
.kbd { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 8px; background: var(--cream-2); color: var(--ink); font-weight: 700; white-space: nowrap; vertical-align: baseline; }
.kbd .ic { display: inline-block; vertical-align: -3px; color: #0a72e8; }

/* ---------------- full-screen flows (welcome, find order, setup) ---------------- */
.flow { min-height: calc(100dvh - var(--view-pt) - var(--view-pb)); display: flex; flex-direction: column; gap: 18px; }
.flow-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.flow-top .dots { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--cream-3); transition: width .45s var(--spring), background .3s; }
.dots i.done { background: var(--green-soft); }
.dots i.cur { width: 22px; background: var(--green); }
.flow-body { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.flow-foot { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.flow h1 { font-size: 30px; }
.flow .q-hint { font-size: 15px; color: var(--ink-2); margin-top: -6px; }
.flow .art-wrap { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 400 / 240; background: var(--mint-3); box-shadow: var(--shadow); }
.flow .art-wrap > svg, .art-wrap > svg { width: 100%; height: 100%; }
.opt-list { display: flex; flex-direction: column; gap: 10px; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt-grid .option { padding: 12px; gap: 10px; font-size: 15px; }
.option {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; border-radius: 18px; border: 0; cursor: pointer; text-align: left; width: 100%;
  background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.3;
  box-shadow: 0 1px 2px rgba(12, 42, 32, .05), inset 0 0 0 1.5px var(--line); transition: transform .35s var(--spring), box-shadow .2s, background .2s;
}
.option > span.o-t { flex: 1; min-width: 0; }
.option .o-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-3); color: var(--green); }
.option .tick { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--cream-3); color: transparent; display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.option .tick.sq { border-radius: 8px; }
.option:active { transform: scale(.975); }
.option.on { background: var(--mint-3); box-shadow: inset 0 0 0 2px var(--green), 0 6px 16px rgba(27, 79, 61, .12); }
.option.on .tick { background: var(--green); box-shadow: none; color: #fff; }
.option.on .tick .ic { animation: pop .4s var(--spring); }
.opt-grid .option { min-height: 64px; }
.scale-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale-row .option { flex-direction: column; justify-content: center; gap: 2px; padding: 10px 4px; text-align: center; min-height: 76px; }
.scale-row .option b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.scale-row .option small { font-size: 11px; font-weight: 700; color: var(--ink-3); line-height: 1.2; }
.scale-row.six { grid-template-columns: repeat(5, 1fr); }
.time-cards { display: grid; gap: 12px; }
.time-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.time-card .t-ic { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 16px; display: grid; place-items: center; }
.time-card .t-ic.moon { background: var(--grad-deep); color: var(--gold-2); }
.time-card .t-ic.sun { background: linear-gradient(160deg, #fff1d6, #ffd79a); color: #a35a10; }
.time-card .t-copy { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.time-card .t-copy b { font-size: 15.5px; }
.time-card .t-copy small { font-size: 13px; color: var(--ink-3); }
.time-card input[type=time] { font-size: 18px; font-weight: 800; border: 0; background: var(--cream); border-radius: 14px; padding: 8px 8px; min-height: 48px; color: var(--ink); width: 148px; flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 370px) { .time-card { gap: 10px; padding: 14px 12px; } .time-card .t-ic { width: 40px; height: 40px; flex-basis: 40px; } .time-card input[type=time] { width: 136px; font-size: 17px; } }
.goal-opts { display: flex; flex-direction: column; gap: 10px; }
.goal-opt { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 22px; border: 0; cursor: pointer; text-align: left; width: 100%; background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 1.5px transparent; transition: transform .35s var(--spring), box-shadow .2s; color: inherit; }
.goal-opt:active { transform: scale(.98); }
.goal-opt .g-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-deep); color: var(--mint); }
.goal-opt .g-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-opt .g-copy b { font-family: var(--serif); font-size: 18px; font-weight: 560; line-height: 1.25; }
.goal-opt .g-copy small { font-size: 13.5px; color: var(--ink-3); }
.goal-opt.on { box-shadow: var(--shadow-green), inset 0 0 0 2px var(--green); background: var(--mint-3); }
.input-field { display: flex; flex-direction: column; gap: 6px; }
.input-field label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.input-field input { width: 100%; min-height: 56px; border-radius: 16px; border: 0; padding: 0 16px; font-size: 17px; font-weight: 600; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s; }
.input-field input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px rgba(27, 79, 61, .12); }
.input-field .with-ic { position: relative; }
.input-field .with-ic .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.input-field .with-ic input { padding-left: 46px; }
.form-error { color: var(--danger); font-size: 14px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.form-error .ic { color: var(--danger); margin-top: 2px; }

/* welcome */
.welcome-hero { position: relative; border-radius: 32px; overflow: hidden; background: var(--grad-deep); color: #fff; padding: 28px 22px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 340px; justify-content: flex-end; isolation: isolate; box-shadow: var(--shadow-lg); }
.welcome-hero .wh-art { position: absolute; inset: 0; z-index: -1; opacity: .95; }
.welcome-hero .wh-art > svg { width: 100%; height: 100%; }
.welcome-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgba(8, 32, 26, .55) 55%, rgba(8, 32, 26, .9) 100%); }
.welcome-hero h1 { color: #fff; font-size: 34px; }
.welcome-hero h1 em { color: var(--gold-2); }
.welcome-hero p { color: rgba(255, 255, 255, .86); font-size: 16px; }
.welcome-logo { height: 22px; width: auto; align-self: flex-start; margin-bottom: auto; box-sizing: content-box; padding: 9px 14px; border-radius: 999px; background: rgba(255, 253, 249, .92); box-shadow: 0 4px 14px rgba(12, 42, 32, .12); position: relative; z-index: 1; }
.welcome-hero .wh-art > svg { transform: translate(14%, 6%) scale(1.04); }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; gap: 14px; align-items: center; font-size: 15px; line-height: 1.4; }
.feature-list .f-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: grid; place-items: center; background: var(--paper); color: var(--green); box-shadow: var(--shadow); }
.order-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font-size: 14px; font-weight: 700; align-self: flex-start; }
.order-chip .ic { color: var(--gold-2); }

/* building + reveal */
.building { align-items: center; justify-content: center; text-align: center; }
.build-orb { position: relative; width: 150px; height: 150px; margin: 20px auto 10px; }
.build-orb .ring { position: absolute; inset: 0; }
.build-orb .orb-core { position: absolute; inset: 22px; border-radius: 50%; background: var(--grad-deep); display: grid; place-items: center; color: var(--mint); animation: breathe 2.4s ease-in-out infinite; box-shadow: var(--shadow-green); }
.build-steps { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; max-width: 300px; width: 100%; }
.build-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink-3); opacity: .5; transition: opacity .3s, color .3s; }
.build-steps li .bs-dot { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--cream-3); color: transparent; transition: background .3s, box-shadow .3s; }
.build-steps li.on { opacity: 1; color: var(--ink); }
.build-steps li.done .bs-dot { background: var(--green); box-shadow: none; color: #fff; animation: pop .45s var(--spring); }

/* plan */
.plan-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--grad-deep); color: #fff; padding: 22px 20px; isolation: isolate; box-shadow: var(--shadow-lg); }
.plan-hero .ph-art { position: absolute; right: -60px; top: -30px; width: 240px; opacity: .3; z-index: -1; -webkit-mask: linear-gradient(200deg, #000 30%, transparent 75%); mask: linear-gradient(200deg, #000 30%, transparent 75%); }
.plan-hero h1 { color: #fff; font-size: 30px; }
.plan-hero h1 em { color: var(--gold-2); }
.plan-hero p { color: rgba(255, 255, 255, .85); margin-top: 6px; }
.plan-hero.reveal h1 { animation: rise .8s var(--spring-soft) both .15s; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { position: relative; display: flex; gap: 14px; padding: 6px 0 16px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: 21px; top: 50px; bottom: 0; width: 2px; background: linear-gradient(var(--mint), transparent); }
.timeline li:last-child::before { display: none; }
.timeline .tl-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: grid; place-items: center; background: var(--mint-2); color: var(--green); }
.timeline .tl-ic.moon { background: var(--grad-deep); color: var(--gold-2); }
.timeline .tl-ic.sun { background: linear-gradient(160deg, #fff1d6, #ffd79a); color: #a35a10; }
.timeline .tl-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.timeline .tl-copy b { font-size: 16px; }
.timeline .tl-copy .tl-time { font-family: var(--serif); font-size: 15px; color: var(--green-mid); font-weight: 600; }
.timeline .tl-copy p { font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.sugg { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.sugg .s-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: grid; place-items: center; background: var(--mint-2); color: var(--green); }
.sugg.core .s-ic { background: var(--grad-deep); color: var(--mint); }
.sugg .s-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sugg .s-copy b { font-size: 16px; line-height: 1.3; }
.sugg .s-copy p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.sugg .s-tag { align-self: flex-start; }
.sugg .link { padding: 2px 0 0; min-height: 0; font-size: 14px; }
.sugg.new { animation: glowIn 1.6s var(--ease); }
@keyframes glowIn { 0% { box-shadow: 0 0 0 0 rgba(242, 212, 138, .9), var(--shadow); } 100% { box-shadow: 0 0 0 14px rgba(242, 212, 138, 0), var(--shadow); } }

/* notify soft-ask + iOS gate */
.notify-art { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 400 / 240; background: var(--grad-deep); box-shadow: var(--shadow-lg); }
.notify-art > svg { width: 100%; height: 100%; }
.preview-notif { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 20px; background: rgba(255, 253, 249, .92); box-shadow: 0 10px 30px rgba(12, 42, 32, .14); animation: notifIn .8s var(--spring) both .3s; }
.preview-notif img { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px; }
.preview-notif .pn-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; font-size: 14px; }
.preview-notif .pn-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
@keyframes notifIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
.ios-steps { display: flex; flex-direction: column; gap: 10px; }
.ios-step { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); }
.ios-step .n { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; }
.ios-step .s-copy { flex: 1; font-size: 15px; line-height: 1.45; }
.ios-step .s-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: #eaf3fd; color: #0a72e8; }
.share-arrow { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--safe-b) + 8px); transform: translateX(-50%); color: #0a72e8; animation: nudgeDown 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes nudgeDown { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* install hint (iOS Safari, bottom) */
#install-hint { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-b) - 4px); width: calc(100% - 24px); max-width: 456px; }
#install-hint[hidden] { display: none; }
.install-card { display: flex; gap: 12px; align-items: center; padding: 12px 8px 12px 12px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: rise .45s var(--spring-soft) both; }
.install-card img { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 44px; }
.install-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); min-width: 0; }
.install-copy b { color: var(--ink); font-size: 15px; line-height: 1.3; }

/* ---------------- Today extras ---------------- */
.checkin-card .ci-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ci-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 6px; border-radius: 18px; border: 0; cursor: pointer; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 14px; transition: transform .35s var(--spring), background .2s, box-shadow .2s; }
.ci-opt .ic { color: var(--green-mid); }
.ci-opt:active { transform: scale(.95); }
.ci-opt.on { background: var(--mint-2); box-shadow: inset 0 0 0 2px var(--green); }
.yn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.today-rolls { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.today-rolls li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: var(--mint-3); font-size: 14px; font-weight: 600; }
.today-rolls li > .ic { color: var(--green); }
.ba { display: inline-flex; align-items: center; gap: 4px; }
.ba .ic { color: var(--ink-3); }
.ba b { font-weight: 800; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wd-dot { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--cream); color: #fff; box-shadow: inset 0 0 0 1.5px var(--cream-3); }
.wd.done .wd-dot { background: var(--green); box-shadow: none; }
.enter-tab .wd.done .wd-dot, .enter-push .wd.done .wd-dot { animation: pop .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 50ms); }
.wd.frozen .wd-dot { background: #e4f0f7; box-shadow: none; color: #2f6684; }
.wd.today:not(.done) .wd-dot { box-shadow: inset 0 0 0 2px var(--green); background: var(--paper); }
.wd-l { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.wd.today .wd-l { color: var(--green); }

/* slider */
.slider { display: flex; flex-direction: column; gap: 10px; --heat: .5; }
.slider-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.slider-label { font-size: 16px; font-weight: 700; line-height: 1.35; }
.slider-val { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; line-height: 1.1; }
.slider-val b { font-family: var(--serif); font-size: 32px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.slider-val span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; touch-action: pan-y; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--green-mid) 0, #e2b85c calc(var(--p) * .7), var(--flame) var(--p), var(--cream-2) var(--p)); }
.slider input[type=range]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--cream-2); }
.slider input[type=range]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--green); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 999px; background: #fff; border: 0; box-shadow: 0 3px 10px rgba(12, 42, 32, .28), inset 0 0 0 7px var(--green); transition: transform .3s var(--spring); }
.slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.slider input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 999px; background: #fff; border: 6px solid var(--green); }
.slider.untouched input[type=range]::-webkit-slider-runnable-track { background: var(--cream-2); }
.slider.untouched input[type=range]::-webkit-slider-thumb { box-shadow: 0 3px 10px rgba(12, 42, 32, .2), inset 0 0 0 7px var(--ink-3); }
.slider.untouched .slider-val b { display: none; }
.slider.untouched .slider-val span { font-size: 14px; font-weight: 700; color: var(--green-mid); }
.slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); margin-top: -6px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--cream); color: var(--ink-2); font-weight: 650; font-size: 14.5px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--cream-3); transition: transform .3s var(--spring), background .2s; }
.chip:active { transform: scale(.94); }
.chip.on { background: var(--mint-2); color: var(--green-deep); box-shadow: inset 0 0 0 2px var(--green); }

/* ---------------- timer ---------------- */
body.fullscreen { background: var(--green-ink); }
body.fullscreen::before { background: radial-gradient(70% 45% at 50% 30%, rgba(79, 138, 112, .55), transparent 70%), radial-gradient(60% 40% at 80% 100%, rgba(169, 207, 230, .18), transparent 70%); }
.timer { min-height: calc(100dvh - var(--view-pt) - var(--view-pb)); gap: 12px; color: #fff; }
.timer h1, .timer h2, .timer h3 { color: #fff; }
.timer .muted { color: rgba(255, 255, 255, .78); }
.timer-top { display: flex; align-items: center; justify-content: space-between; }
.timer-top .icon-btn { color: #fff; background: rgba(255, 255, 255, .1); }
.timer-steps { display: flex; gap: 6px; }
.timer-steps .ts { width: 28px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .2); transition: background .3s; }
.timer-steps .ts.on { background: var(--mint); }
.side-pill { align-self: center; display: inline-flex; gap: 6px; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-weight: 700; font-size: 14px; color: #fff; }
.ring-wrap { position: relative; width: min(78vw, 310px, calc(100dvh - 400px)); min-width: 200px; aspect-ratio: 1; align-self: center; margin-top: 6px; }
.ring-wrap .breath { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(207, 232, 217, .25), transparent 68%); animation: breathe 4s ease-in-out infinite; }
.ring-wrap .breath.b2 { inset: -26px; animation-delay: -2s; opacity: .6; }
.timer .ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.timer .ring-track { stroke: rgba(255, 255, 255, .12); stroke-width: 9; fill: none; }
.timer .ring-fill { stroke: url(#ringGrad); stroke-width: 9; fill: none; stroke-linecap: round; }
.face { position: absolute; inset: 22px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.mirror img, .face.mirror .face-ov { transform: scaleX(-1); }
.face-ov { position: absolute; inset: 0; width: 100%; height: 100%; }
.face-path { stroke: rgba(27, 79, 61, .45); stroke-width: .7; stroke-dasharray: 1.4 1.4; fill: none; }
.roller { fill: #fff; stroke: var(--green); stroke-width: .9; }
.roller-halo { fill: rgba(27, 79, 61, .22); }
.time { font-family: var(--serif); font-size: 64px; font-weight: 560; text-align: center; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 4px; }
.cue { text-align: center; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, .9); min-height: 50px; padding: 0 8px; }
.cue.swap { animation: rise .45s var(--spring-soft); }
.upnext { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .6); display: flex; justify-content: center; gap: 4px; align-items: center; }
.timer-controls { display: flex; gap: 10px; justify-content: center; margin-top: auto; padding-top: 8px; }
.timer-controls .btn { min-width: 132px; }
.timer.paused .ring-fill, .timer.paused .roller, .timer.paused .breath { animation-play-state: paused; opacity: .55; }
.timer[data-phase="switch"] .face { animation: swapSide .7s var(--spring-soft); }
@keyframes swapSide { 0% { transform: scale(1); } 40% { transform: scale(.9) rotateY(70deg); } 100% { transform: none; } }
.after-view, .done-view { display: flex; flex-direction: column; gap: 14px; }
.after-view .card, .done-view .card { color: var(--ink); }
.after-view .card h2, .done-view .card h2 { color: var(--ink); }
.after-badge, .done-flame { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; align-self: center; margin-top: 10px; }
.after-badge { background: var(--mint); color: var(--green-deep); animation: pop .7s var(--spring) both; }
.check-draw path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawCheck .6s .25s var(--ease) forwards; }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.after-view h1, .done-view h1 { text-align: center; font-size: 32px; }
.after-lead { text-align: center; color: rgba(255, 255, 255, .85); }
.before-chip { display: inline-flex; gap: 6px; align-items: baseline; font-size: 15px; color: var(--ink-2); }
.before-chip b { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.done-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-top: 8px; }
.done-hero .flame-wrap { width: 92px; height: 108px; }
.done-hero .streak-n { font-family: var(--serif); font-size: 72px; line-height: .95; font-weight: 600; color: #fff; }
.done-xp { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.drop-card { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); flex-wrap: wrap; }
.drop-card > div { display: flex; flex-direction: column; align-items: center; }
.drop-card span { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.drop-card b { font-family: var(--serif); font-size: 48px; line-height: 1; font-weight: 600; }
.drop-card .ic { color: var(--mint); }
.drop-card p { flex-basis: 100%; text-align: center; font-weight: 700; color: var(--mint); }
.timer .btn-ghost { color: var(--mint); }
.timer .fine { color: rgba(255, 255, 255, .6); }
.timer .card .muted { color: var(--ink-2); }

/* ---------------- progress ---------------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--paper); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); }
.stat > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); font-weight: 700; }
.stat > span .ic { color: var(--green-mid); }
.stat b { font-family: var(--serif); font-size: 34px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.chart { position: relative; margin: 0 -4px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); }
.chart .axis { font-size: 11px; fill: var(--ink-3); font-family: var(--sans); font-weight: 600; }
.chart .dlabel { font-size: 12px; font-weight: 800; fill: var(--ink); font-family: var(--sans); }
.chart .crossline { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.chart .ln { stroke-dasharray: 1400; stroke-dashoffset: 0; animation: chartIn 1.6s .15s var(--ease) both; }
@keyframes chartIn { from { stroke-dashoffset: 1400; } }
.chart .tip { position: absolute; top: -8px; transform: translateY(-100%); background: var(--ink); color: #fff; border-radius: 12px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; white-space: nowrap; z-index: 3; }
.chart .tip i, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.table-view summary { cursor: pointer; font-weight: 700; color: var(--green); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.table-view table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-view th, .table-view td { padding: 6px 4px; text-align: left; border-bottom: 1px solid var(--line); }
.heat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 0 -8px; }
.hh { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.hc { aspect-ratio: 1; min-height: 40px; border-radius: 10px; border: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--cream); cursor: pointer; min-height: 36px; transition: transform .3s var(--spring); }
.hc.h1 { background: var(--mint); color: var(--green-deep); }
.hc.h2 { background: var(--green-soft); color: #fff; }
.hc.h3 { background: var(--green); color: #fff; }
.hc.future { background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.hc.is-today { box-shadow: inset 0 0 0 2px var(--flame); }
.hc.sel { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ink); }
.heat-legend { display: flex; align-items: center; gap: 4px; }
.heat-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--cream); }
.heat-legend i.h1 { background: var(--mint); } .heat-legend i.h2 { background: var(--green-soft); } .heat-legend i.h3 { background: var(--green); }
.heat-legend small { font-size: 11px; color: var(--ink-3); }
.best-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.best-days li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--cream); }
.best-date { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.best-date small { font-size: 12.5px; color: var(--ink-3); }
.best-days .drop { font-family: var(--serif); font-weight: 650; color: var(--green); font-size: 18px; }
.effect { display: flex; gap: 14px; align-items: center; }
.effect .e-ring { position: relative; flex: 0 0 auto; }
.effect .e-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; font-weight: 650; color: var(--green); }
.effect p { font-size: 15px; line-height: 1.45; }

/* ---------------- learn ---------------- */
.lesson-cards { display: flex; flex-direction: column; gap: 14px; }
.lesson-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .35s var(--spring); }
.lesson-card:active { transform: scale(.98); }
.lesson-card .lc-art { position: relative; aspect-ratio: 400 / 190; background: var(--mint-3); overflow: hidden; }
.lesson-card .lc-art > svg { width: 100%; height: 100%; }
.lesson-card .lc-tag { position: absolute; left: 12px; top: 12px; }
.lesson-card .lc-copy { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.lesson-card .lc-copy b { font-family: var(--serif); font-size: 19px; font-weight: 560; line-height: 1.25; }
.lesson-card .lc-copy small { font-size: 13.5px; color: var(--ink-3); }
.lesson-card.locked { pointer-events: none; }
.lesson-card.locked .lc-art { filter: grayscale(.85) blur(1.5px); opacity: .6; }
.lesson-card.locked .lc-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.lesson-card.locked .lc-lock span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border-radius: 999px; background: rgba(255, 253, 249, .92); font-weight: 800; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow); }
.lesson-card.done .lc-copy b::after { content: ''; }
.lesson-mini { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.lesson-mini .lm-art { width: 86px; height: 62px; flex: 0 0 86px; border-radius: 14px; overflow: hidden; background: var(--mint-3); }
.lesson-mini .lm-art > svg { width: 100%; height: 100%; }
.lesson-mini .lm-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
.lesson-mini .lm-copy b { font-size: 15px; }
.lesson-mini .lm-copy small { font-size: 12.5px; color: var(--ink-3); }
.lesson-mini.locked { opacity: .6; }
.lesson-mini.done .lm-check { color: var(--green); }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin: -14px calc(-1 * var(--gutter)) -22px; padding: 18px var(--gutter) 34px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.tut-card { flex: 0 0 172px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.tut-thumb { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--grad-deep); box-shadow: var(--shadow); }
.tut-thumb > svg { width: 100%; height: 100%; }
.tut-thumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 249, .92); color: var(--green); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.tut-thumb .dur { position: absolute; left: 10px; bottom: 10px; }
.tut-card b { font-size: 14.5px; line-height: 1.3; }
.tut-card small { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.quiz-tiles { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quiz-tile { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .35s var(--spring); }
.quiz-tile:active { transform: scale(.98); }
.quiz-tile .qt-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, #fff1d6, #ffd79a); color: #a35a10; }
.quiz-tile.taken .qt-ic { background: var(--mint-2); color: var(--green); }
.quiz-tile .qt-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.quiz-tile .qt-copy b { font-family: var(--serif); font-size: 18px; font-weight: 560; line-height: 1.25; }
.quiz-tile .qt-copy small { font-size: 13px; color: var(--ink-3); }

/* lesson detail */
.detail-hero { position: relative; margin: calc(-14px - var(--safe-t)) calc(-1 * var(--gutter)) 0; aspect-ratio: 400 / 250; overflow: hidden; background: var(--mint-3); }
.detail-hero > svg { width: 100%; height: 100%; }
.detail-hero .back-float { position: absolute; left: calc(var(--gutter) - 4px); top: calc(var(--safe-t) + 10px); }
.detail-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--cream)); }
.prose { display: flex; flex-direction: column; gap: 14px; font-size: 17px; line-height: 1.65; color: var(--ink); }
.prose h3 { font-size: 20px; margin-top: 6px; }
.study { padding: 16px; border-radius: 20px; background: var(--mint-3); display: flex; flex-direction: column; gap: 6px; }
.study p { font-size: 15.5px; line-height: 1.55; }
.study small { font-size: 12.5px; color: var(--ink-3); }
.quote { margin: 0; padding: 20px; border-radius: 22px; background: var(--grad-deep); color: #fff; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.5; }
.quote figcaption { display: flex; gap: 10px; align-items: center; }
.quote figcaption .dr-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--mint); }
.quote figcaption span { display: flex; flex-direction: column; line-height: 1.3; }
.quote figcaption small { color: rgba(255, 255, 255, .75); font-size: 12.5px; }
.try { padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #fff6ec, #fdeedd); display: flex; flex-direction: column; gap: 6px; }
.try .eyebrow { color: var(--flame-ink); }
.roll-note { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.roll-note .ic { color: var(--green); margin-top: 2px; }
.next-lesson { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 20px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.next-lesson span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.step-n { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; }
.steps p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.video { position: relative; border-radius: 22px; overflow: hidden; background: var(--grad-deep); aspect-ratio: 9 / 12; }
.video.placeholder { aspect-ratio: 16 / 10; }
.video video { width: 100%; height: 100%; object-fit: cover; }
.video.placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 20px; }
.video.placeholder .play { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .15); }
.video.placeholder small { color: rgba(255, 255, 255, .7); }
.videos.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spots-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.spots-img { border-radius: 22px; overflow: hidden; background: #fff; }
.spots-inner { position: relative; }
.spot { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 6px rgba(27, 79, 61, .25); animation: breathe 2.6s ease-in-out infinite; }
.spots-fig figcaption { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; font-weight: 600; }
.spots-fig figcaption i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; font-size: 12px; margin-right: 6px; }

/* quiz */
.quiz-flow { gap: 16px; }
.quiz-top { display: flex; align-items: center; gap: 10px; }
.qprog { flex: 1; display: flex; gap: 5px; }
.qprog span { flex: 1; height: 6px; border-radius: 999px; background: var(--cream-3); transition: background .3s; }
.qprog span.done { background: var(--green); }
.qprog span.cur { background: var(--green-soft); }
h1.q { font-size: 27px; line-height: 1.2; }
.q-hint { color: var(--ink-2); }
.options { display: flex; flex-direction: column; gap: 10px; }
.fact { padding: 16px; border-radius: 20px; background: var(--mint-3); display: flex; flex-direction: column; gap: 6px; animation: rise .5s var(--spring-soft) both; }
.fact p { font-size: 15px; line-height: 1.5; }
.quiz-actions { margin-top: 4px; }
.result-hero { position: relative; border-radius: var(--r-xl); padding: 24px 20px; background: var(--grad-deep); color: #fff; display: flex; flex-direction: column; gap: 8px; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.result-hero::before { content: ''; position: absolute; width: 240px; height: 240px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 212, 138, .35), transparent 65%); z-index: -1; }
.result-hero h1 { color: #fff; font-size: 32px; animation: rise .8s var(--spring-soft) both .1s; }
.result-hero .eyebrow { color: var(--gold-2); }
.result-hero .lead { color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.55; }
.result-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: var(--gold-2); margin-bottom: 4px; animation: pop .7s var(--spring) both; }
.learn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.learn-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.learn-list .ic { color: var(--green); margin-top: 3px; }
.tip-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5; }
.costs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.costs li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.costs li:last-child { border-bottom: 0; padding-bottom: 0; }
.costs .cost { color: var(--green-mid); font-weight: 700; font-size: 14px; }
.costs p { font-size: 14.5px; color: var(--ink-2); }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* recommendation cards */
.rec { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r); background: linear-gradient(165deg, var(--mint-3), var(--mint-2)); }
.rec-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green-mid); }
.rec h3 { font-size: 21px; }
.rec p { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.rec-row { display: flex; gap: 14px; align-items: center; }
.rec-media { flex: 0 0 76px; display: flex; justify-content: center; }
.rec-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rec-price { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm); background: var(--paper); }
.rec-price > div { display: flex; flex-direction: column; }
.rec-price b { font-size: 16px; }
.rec-price span { font-size: 13.5px; color: var(--ink-2); }
.rec-gift { background: linear-gradient(165deg, #fff6ec, #fdeedd); }
.rec-gift .rec-eyebrow { color: var(--flame-ink); }
.rec-times { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rec-times li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; }
.rec-times .ic { color: var(--green); }

/* ---------------- shop ---------------- */
.shop-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--grad-deep); color: #fff; padding: 22px 20px; display: flex; gap: 12px; align-items: center; isolation: isolate; box-shadow: var(--shadow-lg); min-height: 200px; }
.shop-hero .sh-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.shop-hero h1 { color: #fff; font-size: 28px; }
.shop-hero p { color: rgba(255, 255, 255, .85); font-size: 15px; }
.shop-hero .sh-media { flex: 0 0 auto; width: 110px; display: flex; justify-content: center; }
.shop-hero .sh-media img { height: 180px; width: auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .35)); animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.bottles { display: flex; justify-content: center; align-items: flex-end; }
.bottles img { width: auto; filter: drop-shadow(0 10px 14px rgba(12, 42, 32, .2)); }
.bottles-sm img { height: 92px; }
.bottles-md img { height: 120px; }
.bottles-lg img { height: 150px; }
.bottles .b + .b { margin-left: -12px; }
.bottles-3 .b1 { position: relative; z-index: 2; transform: translateY(4px) scale(1.06); }
.bottles-2 .b1 { transform: translateY(5px); }
.bundles { display: flex; flex-direction: column; gap: 12px; }
.bundle { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 1.5px transparent; }
.bundle.best { box-shadow: var(--shadow-green), inset 0 0 0 2px var(--green); }
.bundle.picked { box-shadow: var(--shadow), inset 0 0 0 2px var(--gold); }
.bundle-tag { position: absolute; top: -10px; left: 16px; padding: 4px 10px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bundle.picked .bundle-tag { background: var(--grad-gold); color: #3b2a07; }
.bundle-media { flex: 0 0 90px; display: flex; justify-content: center; }
.bundle-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bundle-body h3 { font-size: 19px; }
.bundle-price { display: flex; align-items: baseline; gap: 8px; }
.bundle-price b { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.bundle-price s { color: var(--ink-3); font-size: 14px; }
.per { font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.per .save { color: var(--green-mid); font-weight: 800; }
.bundle .btn { margin-top: 6px; }
.trial { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--r); background: var(--grad-deep); color: #fff; }
.trial .ic { color: var(--gold-2); }
.trial b { font-family: var(--serif); font-size: 19px; font-weight: 560; }
.trial p { font-size: 14px; color: rgba(255, 255, 255, .82); line-height: 1.45; }
.bottle-mini { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.bm-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-2); color: var(--green); }
.bm-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bm-copy small { font-size: 13px; color: var(--ink-3); }
.bar.mini { width: 64px; flex: 0 0 64px; height: 6px; }

/* reorder sheet */
.reorder { display: flex; flex-direction: column; gap: 12px; position: relative; padding-top: 4px; }
.reorder h2 { font-size: 26px; text-align: center; }
.reorder-vis { display: flex; justify-content: center; padding: 8px 0 4px; background: radial-gradient(closest-side, var(--mint-2), transparent); }
.reorder-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.reorder-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: inherit; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); min-height: 60px; }
.reorder-opt.best { box-shadow: inset 0 0 0 2px var(--green); background: var(--mint-3); }
.reorder-opt > .ic { color: var(--ink-3); }
.ro-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ro-main b { font-size: 16px; }
.ro-main small { font-size: 13.5px; color: var(--ink-2); }
.ro-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 2px; }

/* ---------------- you ---------------- */
.profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 22px 18px 18px; border-radius: var(--r-xl); background: var(--grad-deep); color: #fff; position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.profile-head::before { content: ''; position: absolute; width: 280px; height: 280px; top: -150px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(242, 212, 138, .35), transparent 65%); z-index: -1; }
.profile-head h1 { color: #fff; font-size: 28px; }
.profile-head .ph-ring { position: relative; }
.profile-head .ph-ring .ring .ring-bar { stroke: var(--gold-2); }
.profile-head .ph-ring .ring .ring-track { stroke: rgba(255, 255, 255, .14); }
.profile-head .ph-avatar { position: absolute; inset: 10px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-family: var(--serif); font-size: 34px; font-weight: 600; color: #fff; }
.profile-head .ph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
.profile-head .ph-stats div { display: flex; flex-direction: column; padding: 10px 4px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.profile-head .ph-stats b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.profile-head .ph-stats small { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .72); letter-spacing: .03em; }
.version { cursor: default; user-select: none; text-align: center; }

/* ---------------- share sheet ---------------- */
.share-preview { position: relative; align-self: center; width: min(52vw, 210px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(12, 42, 32, .3); background: var(--cream-2); animation: pop .6s var(--spring) both; }
.share-preview img { width: 100%; height: 100%; object-fit: cover; }
.share-preview.skel { animation: none; }
.share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share-act { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 10px 4px; border-radius: 18px; border: 0; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; transition: transform .3s var(--spring); }
.share-act:active { transform: scale(.94); }
.share-act .sa-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--green); box-shadow: var(--shadow); }
.card-picker { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 22px; margin: -4px -22px; scroll-padding-inline: 22px; }
.card-picker::-webkit-scrollbar { display: none; }
.card-picker button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--cream); font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.card-picker button.on { background: var(--green); color: #fff; }

/* dev */
.dev { display: flex; flex-direction: column; gap: 12px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row span { display: flex; flex-direction: column; }
.toggle-row small { font-size: 13px; color: var(--ink-3); }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dev-grid .btn { font-size: 13.5px; min-height: 44px; padding: 0 10px; background: var(--cream); color: var(--ink); }
.dev-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 0; }
.dev-facts dt { color: var(--ink-3); }
.dev-facts dd { margin: 0; word-break: break-word; }
.dev-events { font-size: 11px; background: var(--cream); padding: 10px; border-radius: 10px; max-height: 220px; overflow: auto; white-space: pre-wrap; margin: 0; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .flame-outer, .flame-inner, .flame-glow, .breath, .btn-start-ic::before, .spot { animation: none !important; }
}

/* iOS standalone: black-translucent status bar sits over the page, so give it a deep-green scrim */
.status-scrim { display: none; }
@media (display-mode: standalone) {
  .status-scrim { display: block; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: var(--safe-t); background: var(--green-deep); pointer-events: none; }
}
.medallion.xl .m-num { font-size: 46px; }

/* store offer lines under the picker */
.offer-lines { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
.offer-lines li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.offer-lines li .ic { color: var(--green); flex: 0 0 auto; }
.offer-lines.compact { padding: 4px 2px; box-shadow: none; background: none; gap: 8px; }
.offer-lines.compact li { font-size: 13.5px; color: var(--ink-2); }
.bundle-tag.gold { background: var(--grad-gold); color: #3b2a07; }
.reorder-opt s { color: var(--ink-3); }

.chart-card .card-head { flex-wrap: wrap; }
.chart-card .card-head > div:first-child { flex: 1 1 200px; }
@media (max-width: 370px) {
  .rings-card { gap: 12px; padding: 16px 14px; }
  .rings { width: 100px; height: 100px; flex-basis: 100px; }
  .rings svg { transform: scale(.86); }
  .task-copy b { font-size: 14px; }
  .task { gap: 8px; }
}

/* iPhone "Add to Home Screen" guide: two steps, each with a small picture of the thing to tap */
.a2hs { display: flex; flex-direction: column; gap: 10px; }
.a2hs-step { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.a2hs-vis { border-radius: 16px; background: #f2f2f7; padding: 10px; }
.a2hs-vis.safari .sb-url { margin: 0 auto 8px; width: 72%; height: 28px; border-radius: 9px; background: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #3c3c43; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.a2hs-vis.safari .sb-bar { display: flex; justify-content: space-around; align-items: center; color: #0a72e8; height: 36px; }
.a2hs-vis.safari .sb-bar > span { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 10px; }
.a2hs-vis .sb-bar .hl { background: rgba(10, 114, 232, .12); animation: tapPulse 1.8s ease-in-out infinite; }
.sheet-mock { display: flex; flex-direction: column; }
.sheet-mock .sm-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #fff; font-size: 14px; color: #1c1c1e; border-bottom: 1px solid #e5e5ea; }
.sheet-mock .sm-row:first-child { border-radius: 12px 12px 0 0; }
.sheet-mock .sm-row:last-child { border-radius: 0 0 12px 12px; border-bottom: 0; }
.sheet-mock .sm-row .ic { color: #3c3c43; }
.sheet-mock .sm-row.hl { background: #eaf3fd; font-weight: 700; color: #0a4ea8; animation: tapPulse 1.8s ease-in-out infinite; position: relative; z-index: 1; }
.sheet-mock .sm-row.hl .ic { color: #0a72e8; }
.a2hs-copy { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.4; }
.a2hs-copy .n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; }
.a2hs-copy .ic { display: inline-block; vertical-align: -3px; color: #0a72e8; }
@keyframes tapPulse { 0%, 100% { box-shadow: 0 0 0 2px #0a72e8, 0 0 0 0 rgba(10, 114, 232, .35); } 50% { box-shadow: 0 0 0 2px #0a72e8, 0 0 0 7px rgba(10, 114, 232, 0); } }
@media (max-height: 700px) { .flow h1 { font-size: 26px; } .flow { gap: 14px; } }

/* "Turn on reminders": X-style pre-permission screen with a lock-screen mock */
.perm { gap: 16px; }
.lock-mock { position: relative; border-radius: 30px; padding: 22px 16px 18px; background: radial-gradient(120% 80% at 80% 0%, #2c6b52 0%, transparent 60%), linear-gradient(170deg, #0c2a20, #123a2d 55%, #1b4f3d); color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; box-shadow: var(--shadow-lg); }
.lock-mock .lm-time { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: -0.02em; font-variation-settings: 'SOFT' 100; }
.lock-mock .lm-date { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.lm-notif { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 11px 12px; border-radius: 18px; background: #fffdf9; color: var(--ink); text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: notifIn .8s var(--spring) both .2s; position: relative; z-index: 2; }
.lm-notif img { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px; }
.lm-notif > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
.lm-notif .lm-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.lm-notif .lm-top b { color: var(--ink-2); font-weight: 700; }
.lm-notif.back { width: 94%; margin-top: 8px; opacity: .78; z-index: 1; animation: notifIn .8s var(--spring) both .35s; }
.perm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.perm-list li { display: flex; gap: 14px; align-items: center; font-size: 16px; font-weight: 600; line-height: 1.35; }
.perm-list .pl-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 15px; display: grid; place-items: center; }
.perm-list .pl-ic.moon { background: var(--grad-deep); color: var(--gold-2); }
.perm-list .pl-ic.sun { background: linear-gradient(160deg, #fff1d6, #ffd79a); color: #a35a10; }
.perm-list .pl-ic.flame { background: #fde9da; color: var(--flame); }
@media (max-height: 720px) { .lock-mock .lm-time { font-size: 50px; } .lock-mock { padding: 16px 14px 14px; } .perm-list { gap: 8px; } .perm-list .pl-ic { width: 38px; height: 38px; flex-basis: 38px; } }

/* ---------------- Share & earn ---------------- */
.refer-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate; padding: 24px 20px 22px; color: #fff; box-shadow: var(--shadow-lg);
  background: radial-gradient(90% 70% at 100% 0%, rgba(242, 212, 138, .35), transparent 60%), var(--grad-deep); }
.refer-hero h1 { color: #fff; font-size: 31px; margin-top: 6px; max-width: calc(100% - 66px); }
.refer-hero h1 em { color: var(--gold-2); }
.refer-hero p { color: rgba(255, 255, 255, .86); margin-top: 8px; font-size: 15px; }
.refer-hero .rh-gift { position: absolute; right: 16px; top: 16px; width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: var(--grad-gold); color: #3b2a07; box-shadow: 0 12px 30px rgba(201, 151, 58, .45); transform: rotate(8deg); animation: floaty 6s ease-in-out infinite; z-index: -1; }
.code-card { gap: 12px; }
.code-chip { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; border-radius: 18px; border: 2px dashed var(--gold); background: #fffaf0; color: var(--ink); cursor: pointer;
  font: 700 22px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .06em; transition: transform .3s var(--spring); }
.code-chip:active { transform: scale(.97); }
.code-chip .ic { color: var(--gold-ink); }
.ladder-card h2 { font-size: 23px; }
.ladder-togo { color: var(--gold-ink); }
.ladder { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ladder::before, .ladder::after { content: ''; position: absolute; left: 44px; top: 34px; width: 4px; border-radius: 4px; }
.ladder::before { bottom: 40px; background: var(--cream-2); }
.ladder::after { height: 0; background: linear-gradient(var(--green-mid), var(--gold)); transition: height 1.4s var(--spring-soft) .2s; }
.ladder.go::after { height: calc((100% - 74px) * var(--fill)); }
.rung { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 20px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); --m: 46px; }
.rung.r2 { --m: 52px; } .rung.r3 { --m: 58px; } .rung.r4 { --m: 66px; }
.rung-medal { width: var(--m); height: var(--m); flex: 0 0 var(--m); margin: 0 calc((68px - var(--m)) / 2); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #ffffff, #efe7da 55%, #e0d4bf); color: var(--ink-3); box-shadow: inset 0 -3px 8px rgba(12, 42, 32, .08), 0 6px 14px rgba(12, 42, 32, .1); }
.rung-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.rung-copy small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rung-copy b { font-family: var(--serif); font-weight: 560; font-size: 16px; }
.rung.r2 .rung-copy b { font-size: 17px; } .rung.r3 .rung-copy b { font-size: 18.5px; } .rung.r4 .rung-copy b { font-size: 20px; }
.rung-copy .pill { align-self: flex-start; margin-top: 2px; }
.rung.r4 { background: linear-gradient(150deg, #fff7e2, #fbe7b8); box-shadow: inset 0 0 0 1.5px rgba(201, 151, 58, .45), 0 10px 26px rgba(201, 151, 58, .25); }
.rung.r4 .rung-medal { background: var(--grad-gold); color: #3b2a07; }
.rung.reached { background: var(--mint-3); box-shadow: inset 0 0 0 2px var(--green); }
.rung.reached .rung-medal { background: var(--grad-btn); color: #fff; animation: pop .6s var(--spring) both; }
.rung.next { box-shadow: inset 0 0 0 2px var(--gold), 0 10px 24px rgba(201, 151, 58, .2); }
.rung.next .rung-medal { animation: nextGlow 2.4s ease-in-out infinite; }
@keyframes nextGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 151, 58, .45), 0 6px 14px rgba(12, 42, 32, .1); } 50% { box-shadow: 0 0 0 10px rgba(201, 151, 58, 0), 0 6px 14px rgba(12, 42, 32, .1); } }
.refer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.refer-stats .stat b { font-size: 30px; }
.lock-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lock-list li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; line-height: 1.4; }
.lock-list .ic { color: var(--green-mid); }
.refer-cta { background: radial-gradient(90% 90% at 100% 0%, rgba(242, 212, 138, .5), transparent 60%), linear-gradient(150deg, #fff7e2, #fdeccc); border: 0; }
.refer-cta .p-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-gold); color: #3b2a07; box-shadow: 0 8px 18px rgba(201, 151, 58, .35); }
/* a promo card with a close button keeps its text clear of the button */
.promo:has(> .card-x) .p-copy { padding-right: 26px; }

/* ---------------- handoff: Safari tab -> Home Screen app (js/handoff.js) ---------------- */
.handoff-loading { align-items: center; justify-content: center; text-align: center; gap: 10px; }
.handoff-loading .ring.spin { animation: spin 1.1s linear infinite; }
.handoff-loading .orb-core { overflow: hidden; background: var(--green-deep); }
.handoff-loading .orb-core img { width: 64px; height: 64px; border-radius: 16px; }
.handoff-hello { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: var(--mint-2); color: var(--green-deep); font-size: 14.5px; line-height: 1.4; animation: rise .5s var(--spring-soft) both; }
.handoff-hello .ic { color: var(--green); flex: 0 0 auto; margin-top: 1px; }
/* "Pick up where you left off": the code from the Safari steps, or Find my order */
.continue { gap: 16px; }
.cont-hero { display: flex; flex-direction: column; gap: 8px; }
.cont-hero h1 { font-size: 30px; }
.ch-icons { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ch-icons .ch-app { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(160deg, #e8f2fe, #cfe3fb); color: #0a72e8; box-shadow: var(--shadow); }
.ch-icons .ch-arrow { color: var(--ink-3); animation: nudgeRight 1.6s ease-in-out infinite; }
.ch-icons img { width: 52px; height: 52px; border-radius: 14px; box-shadow: var(--shadow); }
@keyframes nudgeRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.cont-form { flex: 0 0 auto; gap: 12px; }
.code-field { display: flex; gap: 8px; align-items: stretch; }
.code-input { flex: 1; min-width: 0; min-height: 60px; border-radius: 18px; border: 0; padding: 0 14px; background: var(--paper); color: var(--ink); text-align: center;
  font: 700 26px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s; }
.code-input::placeholder { color: var(--cream-3); letter-spacing: .12em; }
.code-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--green), 0 0 0 4px rgba(27, 79, 61, .12); }
.code-paste { min-height: 60px; padding: 0 16px; border-radius: 18px; flex: 0 0 auto; }
.cont-foot { gap: 12px; }
.cont-where { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: rgba(255, 253, 249, .55); box-shadow: inset 0 0 0 1.5px var(--line); }
.cw-label { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cw-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); opacity: .75; }
.cw-card .cc-label { font-size: 11.5px; }
.cw-code { font: 700 20px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; color: var(--green-deep); }
.cw-note { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
@media (max-height: 700px) { .cont-where { display: none; } }
.or-line { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
@media (max-height: 700px) { .continue { gap: 12px; } .cont-hero h1 { font-size: 26px; } .ch-icons { margin-bottom: 0; } }

/* ---------------- install guides, one per phone + browser (js/install.js) ---------------- */
.guide { gap: 14px; }
.guide .g-head { display: flex; flex-direction: column; gap: 6px; }
.guide .g-head h1 { font-size: 29px; }
.guide .g-head p { font-size: 15px; line-height: 1.45; }
.sheet-guide { display: flex; flex-direction: column; gap: 12px; }
.sheet-guide .g-head h1 { font-size: 25px; padding-right: 40px; }
.g-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.g-step { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 12px; border-radius: 22px; background: var(--paper); box-shadow: var(--shadow); }
.g-vis { border-radius: 16px; background: linear-gradient(180deg, #f3f3f7, #e9e9ef); padding: 10px; overflow: hidden; }
.g-copy { display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.4; padding: 0 4px; }
.g-copy .n { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 14px; }
.g-copy .kbd, .g-note .kbd { padding: 1px 7px; }
.g-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.g-note > .ic { flex: 0 0 auto; margin-top: 2px; color: var(--ink-3); }
.g-or { margin: -4px 0 0; }
.g-open { display: flex; flex-direction: column; gap: 8px; }
.guide .flow-foot .btn-ghost { min-height: 48px; }

/* the drawings: system font, iOS / Android colours, the thing to tap pulses */
.mk { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; color: #1c1c1e; display: flex; flex-direction: column; gap: 8px; font-size: 13px; letter-spacing: -0.01em; }
.mk .hl { animation: tapPulse 1.8s ease-in-out infinite; position: relative; z-index: 1; }
.mk .ic { color: currentColor; flex: 0 0 auto; }
.mk-field .ic, .mk-title .ic { display: inline-block; vertical-align: -2px; }
.mk-field > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #fff; border-radius: 12px; font-size: 13.5px; }
.mk-row.big { font-weight: 700; color: #0a4ea8; background: #eaf3fd; font-size: 14.5px; padding: 10px 12px; }
.mk-row.big .ic { color: #0a72e8; }
/* iOS 26/27 Safari, Compact: a floating glass bar, a pop-up menu above it */
.mk-ios { align-items: stretch; }
.mk-glass { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .72); box-shadow: 0 6px 18px rgba(0, 0, 0, .1), inset 0 0 0 1px rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mk-circ { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); color: #1c1c1e; }
.mk-circ.hl { color: #0a72e8; background: #eaf3fd; }
.mk-field { flex: 1; min-width: 0; height: 34px; border-radius: 999px; background: rgba(118, 118, 128, .12); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; }
.mk-field > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mk-field.sm { flex: 0 0 auto; width: 72%; margin: 0 auto; height: 28px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mk-pm { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; color: #0a72e8; background: #eaf3fd; }
.mk-pop { align-self: flex-end; width: 64%; display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.mk-pop.left { align-self: flex-start; }
.mk-pop .mk-row { padding: 6px 10px; background: transparent; }
.mk-pop .mk-row.hl { background: #eaf3fd; color: #0a4ea8; font-weight: 700; }
.mk-pop .mk-row.hl .ic { color: #0a72e8; }
/* share sheet: round actions, then the list */
.mk-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-act { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #3c3c43; border-radius: 12px; padding: 2px 0; }
.mk-act i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); color: #1c1c1e; }
.mk-act.hl { color: #0a4ea8; }
.mk-act.hl i { background: #eaf3fd; color: #0a72e8; }
/* the Add to Home Screen sheet */
.mk-add { gap: 6px; }
.mk-addbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 4px; font-size: 13px; }
.mk-addbar b { font-size: 13.5px; }
.mk-x { color: #0a72e8; }
.mk-addbtn { padding: 4px 12px; border-radius: 999px; background: #0a72e8; color: #fff; font-weight: 700; }
.mk-appline { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #fff; }
.mk-appline img { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; }
.mk-appline span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mk-appline small { color: #8e8e93; font-size: 11.5px; }
.mk-toggle { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 12px; background: #fff; font-weight: 600; }
.mk-switch { width: 44px; height: 26px; border-radius: 999px; background: #e5e5ea; position: relative; flex: 0 0 44px; }
.mk-switch.on { background: #34c759; }
.mk-switch i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.mk-switch.on i { left: 20px; }
/* toolbars */
.mk-tools { display: flex; justify-content: space-around; align-items: center; color: #0a72e8; height: 36px; }
.mk-tools > span { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 10px; }
.mk-tools > span.hl { background: rgba(10, 114, 232, .12); }
.mk-topbar { display: flex; align-items: center; gap: 8px; }
.mk-topbar .mk-field { justify-content: space-between; padding: 0 4px 0 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mk-in { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #0a72e8; flex: 0 0 28px; }
.mk-in.hl { background: #eaf3fd; }
.mk-sq { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; color: #3c3c43; }
.mk-sq.hl { background: #eaf3fd; color: #0a72e8; }
.mk-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.mk-title small { color: #8e8e93; font-size: 11px; }
.mk-inapp .mk-row.big { margin-left: auto; width: 82%; }
/* Android: Material colours */
.mk.android .mk-row, .mk-dialog { font-family: Roboto, 'Segoe UI', -apple-system, sans-serif; }
.mk-sheet.android .mk-row { justify-content: flex-start; gap: 12px; border-radius: 10px; }
.mk-sheet.android .mk-row.big { color: #174ea6; background: #e8f0fe; }
.mk-sheet.android .mk-row.big .ic { color: #1a73e8; }
.mk-chrome.android .mk-sq.hl { color: #1a73e8; background: #e8f0fe; }
.mk-dialog { align-items: center; }
.mk-dlg { width: 92%; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); display: flex; flex-direction: column; gap: 10px; }
.mk-dlg .mk-appline { padding: 0; }
.mk-dlg-btns { display: flex; justify-content: flex-end; gap: 6px; font-weight: 700; font-size: 13px; color: #1a73e8; }
.mk-dlg-btns span { padding: 6px 12px; border-radius: 999px; }
.mk-dlg-btns span.hl { background: #1a73e8; color: #fff; }
.mk-bottom .mk-tools { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
/* the handoff code + the desktop QR */
.code-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 22px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green-mid); }
.cc-code { font: 700 32px/1.1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .1em; color: var(--green-deep); }
.cc-code.loading { color: var(--cream-3); animation: breathe 1.6s ease-in-out infinite; transform-origin: left center; }
.cc-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.code-card .btn-sm { min-height: 40px; }
.qr-card { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 26px; background: #fff; box-shadow: var(--shadow-lg); }
.qr-card .qr { width: 210px; height: 210px; border-radius: 8px; }
.qr-url { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
@media (max-height: 700px) { .guide .g-head h1 { font-size: 25px; } .g-step { gap: 8px; } .guide { gap: 12px; } }
@media (max-width: 370px) { .mk-act { font-size: 9.5px; } .mk-act i { width: 34px; height: 34px; } .cc-code { font-size: 28px; } }