/* PurrCyprus Club — design system */
:root {
  --bg: #fbf6ee;
  --bg-2: #f4ecdf;
  --card: #ffffff;
  --ink: #10282b;
  --ink-2: #3c5356;
  --mute: #6d7d7f;
  --line: #eadfce;
  --coral: #ff6a45;
  --coral-d: #e8512c;
  --sun: #ffc23d;
  --sea: #138a8a;
  --sea-d: #0d6b6b;
  --mint: #dcf3ec;
  --peach: #ffe6d8;
  --lilac: #ebe6ff;
  --sky: #dff0fb;
  --r: 20px;
  --r-sm: 12px;
  --sh: 0 1px 2px rgba(16, 40, 43, .05), 0 8px 24px -10px rgba(16, 40, 43, .16);
  --sh-lg: 0 24px 60px -24px rgba(16, 40, 43, .35);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --w: 1200px;
  --gut: clamp(16px, 3.5vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.025em; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: .98; font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; }
h3 { font-size: 1.25rem; line-height: 1.2; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
.mute { color: var(--mute); }
.small { font-size: .88rem; }
.hl { background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 90%, transparent 90%); padding: 0 .08em; }
.coral { color: var(--coral); }
svg.lucide { width: 1.1em; height: 1.1em; stroke-width: 2.2; vertical-align: -.16em; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.3em; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 600 .95rem var(--body); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.coral { background: var(--coral); box-shadow: 0 8px 20px -10px var(--coral); }
.btn.coral:hover { background: var(--coral-d); }
.btn.sea { background: var(--sea); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.soft { background: var(--bg-2); color: var(--ink); }
.btn.soft:hover { background: var(--line); }
.btn.sm { padding: .55em .95em; font-size: .85rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.iconbtn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: var(--bg-2); cursor: pointer; }
.iconbtn:hover { background: var(--line); }

/* chips, stickers, pills */
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border-radius: 999px; font: 600 .76rem var(--body); background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.chip.s-home { background: var(--mint); color: #11614f; }
.chip.s-journey { background: var(--sky); color: #1b5a86; }
.chip.s-care { background: var(--peach); color: #a4431f; }
.chip.s-colony { background: var(--lilac); color: #4b3cb0; }
.chip.s-done { background: #ffe9ef; color: #b0294f; }
.chip.live { background: #ff2d55; color: #fff; }
.chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.sticker { position: absolute; background: var(--sun); color: var(--ink); font: 700 .8rem var(--display); padding: .45em .8em; border-radius: 10px; transform: rotate(-4deg); box-shadow: var(--sh); z-index: 2; }
.kicker { display: inline-flex; align-items: center; gap: .5em; font: 600 .78rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--sea); margin-bottom: .8rem; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 1rem; height: 68px; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; font: 800 1.35rem var(--display); letter-spacing: -.03em; }
.logo img { display: block; height: 40px; width: auto; }
.logo small { font: 600 .7rem var(--body); color: var(--coral); letter-spacing: .06em; text-transform: uppercase; margin-left: .1rem; }
.nav { display: flex; gap: .2rem; margin-left: 1.2rem; }
.nav a { text-decoration: none; padding: .5rem .8rem; border-radius: 999px; font-weight: 500; font-size: .93rem; color: var(--ink-2); }
.nav a:hover { background: var(--bg-2); color: var(--ink); }
.nav a.on { background: var(--ink); color: #fff; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.pts { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border-radius: 999px; background: #fff; box-shadow: var(--sh); text-decoration: none; font-weight: 600; font-size: .88rem; }
.pts .lv { width: 26px; height: 26px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; font: 800 .75rem var(--display); }
.pts.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.12); } }
.more-btn { display: none; }

/* mobile bottom tab bar */
.tabbar { display: none; }

/* layout */
main { min-height: 70vh; }
.view { animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
section { padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.sec-head p { margin: .5rem 0 0; color: var(--mute); max-width: 36em; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 1.5rem; }
.grid { display: grid; gap: 1.2rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.page-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
.page-hero p { font-size: 1.12rem; color: var(--ink-2); max-width: 38em; margin-top: 1rem; }

/* HOME */
.hero { padding: clamp(2rem, 5vw, 4rem) 0 2rem; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero p.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 32em; margin: 1.3rem 0 1.8rem; }
.hero .actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.trust { display: flex; gap: 1.6rem; margin-top: 2rem; flex-wrap: wrap; }
.trust div b { display: block; font: 800 1.6rem var(--display); letter-spacing: -.03em; }
.trust div span { font-size: .85rem; color: var(--mute); }
.collage { position: relative; aspect-ratio: 1 / .95; }
.collage .ph { position: absolute; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-lg); }
.collage .ph img { width: 100%; height: 100%; object-fit: cover; }
.collage .a { inset: 0 22% 18% 0; }
.collage .b { width: 42%; aspect-ratio: 1; right: 0; top: 12%; border: 6px solid var(--bg); }
.collage .c { width: 38%; aspect-ratio: 1; right: 8%; bottom: 0; border: 6px solid var(--bg); }
.collage .sticker { left: -10px; bottom: 26%; }

.live-strip { background: var(--ink); color: #fff; border-radius: var(--r); padding: 1.4rem 1.6rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; }
.cd { display: flex; gap: .5rem; }
.cd div { background: rgba(255,255,255,.08); border-radius: 12px; padding: .5rem .7rem; text-align: center; min-width: 62px; }
.cd b { display: block; font: 800 1.7rem/1 var(--display); font-variant-numeric: tabular-nums; }
.cd span { font-size: .7rem; opacity: .65; text-transform: uppercase; letter-spacing: .06em; }
.live-strip .mute { color: #a9bcbd; }

.daily { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2rem; }
.checkin { background: linear-gradient(135deg, var(--sun), #ffd978); border-radius: var(--r); padding: 1.6rem; position: relative; overflow: hidden; }
.checkin .days { display: flex; gap: .4rem; margin: 1rem 0 1.2rem; }
.checkin .days i { flex: 1; height: 42px; border-radius: 10px; background: rgba(255,255,255,.5); display: grid; place-items: center; font: 700 .75rem var(--display); font-style: normal; }
.checkin .days i.done { background: var(--ink); color: var(--sun); }
.checkin .big-paw { position: absolute; right: -18px; top: -18px; font-size: 7rem; opacity: .15; transform: rotate(18deg); }
.challenges li { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.challenges li:last-child { border-bottom: 0; }
.challenges ul { padding: 0; margin: .5rem 0 0; }
.challenges .pbar { grid-column: 1 / -1; }
.challenges .rw { font: 700 .82rem var(--display); color: var(--sea); }
.challenges .ok { color: var(--mute); text-decoration: line-through; }

.pbar { height: 8px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 99px; background: var(--sea); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.pbar.coral i { background: var(--coral); }
.pbar.sun i { background: var(--sun); }
.pbar.lg { height: 12px; }

/* cat cards */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.cat { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); text-decoration: none; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; position: relative; }
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.cat .ph { aspect-ratio: 1; overflow: hidden; position: relative; }
.cat .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.cat:hover .ph img { transform: scale(1.05); }
.cat .ph .chip { position: absolute; left: 10px; top: 10px; }
.cat .body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cat h3 { font-size: 1.35rem; }
.cat .meta { font-size: .85rem; color: var(--mute); }
.cat .cfoot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .6rem; }
.fan { display: inline-flex; align-items: center; gap: .35em; font: 600 .85rem var(--body); background: none; border: 0; cursor: pointer; padding: .35em .6em; border-radius: 999px; }
.fan:hover { background: var(--bg-2); }
.fan.on { color: var(--coral); }
.fan.on svg { fill: var(--coral); }
.filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filters button { border: 0; background: #fff; box-shadow: var(--sh); padding: .5rem .95rem; border-radius: 999px; cursor: pointer; font-weight: 500; font-size: .9rem; }
.filters button.on { background: var(--ink); color: #fff; }
.search { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; box-shadow: var(--sh); padding: .1rem 1rem; }
.search input { border: 0; background: none; padding: .6rem 0; font: inherit; outline: none; width: 180px; }

/* cat profile */
.profile { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-top: 2rem; padding-bottom: 1rem; align-items: start; }
.profile .ph { border-radius: 24px; overflow: hidden; aspect-ratio: 1; box-shadow: var(--sh-lg); position: sticky; top: 90px; }
.profile .ph img { width: 100%; height: 100%; object-fit: cover; }
.profile h1 { font-size: clamp(2.8rem, 6vw, 4.2rem); margin: .6rem 0 .4rem; }
.vibes { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0; }
.vibes span { background: var(--peach); padding: .35em .8em; border-radius: 999px; font-size: .88rem; font-weight: 500; }
.health { display: flex; gap: .5rem; flex-wrap: wrap; }
.health span { font-size: .82rem; display: inline-flex; gap: .3em; align-items: center; color: var(--sea-d); font-weight: 600; }
.actions-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.4rem 0; }
.stat-row div { background: var(--card); border-radius: var(--r-sm); padding: .9rem 1rem; box-shadow: var(--sh); }
.stat-row b { display: block; font: 800 1.4rem var(--display); }
.stat-row span { font-size: .8rem; color: var(--mute); }
.crumb { font-size: .88rem; color: var(--mute); text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
.crumb:hover { color: var(--ink); }

/* journeys */
.journey { display: grid; grid-template-columns: 180px 1fr; gap: 1.4rem; align-items: center; }
.journey .ph { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.journey .ph img { width: 100%; height: 100%; object-fit: cover; }
.route { display: flex; align-items: center; gap: .8rem; font: 700 1.05rem var(--display); margin: .3rem 0 1rem; flex-wrap: wrap; }
.route .line { flex: 1; min-width: 60px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px); position: relative; }
.route .plane { position: absolute; top: 50%; transform: translate(-50%, -50%); background: var(--bg); padding: 0 .25rem; color: var(--coral); }
.stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; margin-bottom: .6rem; }
.stages div { font-size: .7rem; text-align: center; color: var(--mute); }
.stages div i { display: block; height: 6px; border-radius: 99px; background: var(--bg-2); margin-bottom: .35rem; }
.stages div.done i { background: var(--sea); }
.stages div.now i { background: var(--coral); animation: blink 1.6s infinite; }
.stages div.done, .stages div.now { color: var(--ink); font-weight: 600; }
.steps-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: s; }
.steps-h div { counter-increment: s; background: #fff; border-radius: var(--r); padding: 1.3rem; box-shadow: var(--sh); }
.steps-h div::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sun); font: 800 1rem var(--display); margin-bottom: .8rem; }
.steps-h b { display: block; margin-bottom: .3rem; }
.steps-h span { font-size: .88rem; color: var(--ink-2); }
.tails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tail { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; color: #fff; }
.tail img { width: 100%; height: 100%; object-fit: cover; }
.tail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(10, 24, 26, .85)); }
.tail div { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 1; }
.tail b { font: 700 1.3rem var(--display); }
.tail p { margin: .3rem 0 0; font-size: .9rem; opacity: .9; }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .85rem; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; min-width: 0; font: 400 1rem var(--body); padding: .75rem .9rem; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--sea); border-color: transparent; }

/* vote */
.vote-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; align-items: start; }
.vote-hero { border-radius: var(--r); overflow: hidden; aspect-ratio: 16/7; position: relative; margin-bottom: 1.3rem; }
.vote-hero img { width: 100%; height: 100%; object-fit: cover; }
.opt { position: relative; width: 100%; display: flex; align-items: center; gap: 1rem; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: .95rem 1.1rem; margin-top: .6rem; cursor: pointer; overflow: hidden; }
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt:disabled { cursor: default; }
.opt .fill { position: absolute; inset: 0 auto 0 0; background: var(--mint); transition: width .7s cubic-bezier(.2,.8,.2,1); }
.opt > *:not(.fill) { position: relative; }
.opt .l { font: 700 1.05rem var(--display); }
.opt .h { display: block; font-size: .82rem; color: var(--mute); }
.opt .pc { margin-left: auto; font: 800 1.1rem var(--display); }
.opt.mine { border-color: var(--sea); }
.packs { display: grid; gap: .6rem; margin: 1rem 0; }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-2); border: 0; border-radius: 14px; padding: .9rem 1.1rem; cursor: pointer; text-align: left; }
.pack:hover { background: var(--line); }
.pack b { font: 800 1.15rem var(--display); }
.pack.best { background: var(--ink); color: #fff; }
.pack .tagx { font-size: .72rem; background: var(--sun); color: var(--ink); padding: .15em .5em; border-radius: 6px; font-weight: 700; margin-left: .4rem; }
.idea { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.idea:last-child { border-bottom: 0; }
.upv { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 58px; padding: .5rem 0; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; font: 700 .9rem var(--display); }
.upv:hover { border-color: var(--ink); }
.upv.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.idea p { margin: .2rem 0 0; font-size: .92rem; color: var(--ink-2); }

/* play */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.game-card { border-radius: var(--r); padding: 1.5rem; text-decoration: none; display: flex; flex-direction: column; gap: .5rem; min-height: 230px; position: relative; overflow: hidden; transition: transform .2s; }
.game-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.game-card .emo { font-size: 2.6rem; }
.game-card p { color: var(--ink-2); font-size: .93rem; margin: 0; }
.game-card .go { margin-top: auto; font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; }
.gc1 { background: var(--peach); } .gc2 { background: var(--sky); } .gc3 { background: var(--lilac); }
.stage { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: clamp(1rem, 3vw, 2rem); }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.hud { display: flex; gap: .5rem; flex-wrap: wrap; }
.hud span { background: var(--bg-2); padding: .4rem .8rem; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 560px; margin: 0 auto; }
.mcard { aspect-ratio: 1; perspective: 700px; border: 0; padding: 0; background: none; cursor: pointer; }
.mcard .in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mcard.flip .in, .mcard.done .in { transform: rotateY(180deg); }
.mcard .f, .mcard .b { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; overflow: hidden; }
.mcard .f { background: var(--ink); display: grid; place-items: center; color: var(--sun); font-size: 1.8rem; }
.mcard .b { transform: rotateY(180deg); }
.mcard .b img { width: 100%; height: 100%; object-fit: cover; }
.mcard.done .b { box-shadow: inset 0 0 0 4px var(--sea); }
.guess { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.guess .ph { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.guess .ph img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s, transform .3s; }
.guess .opts { display: grid; gap: .6rem; }
.guess .opts button { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 1rem 1.2rem; font: 700 1.1rem var(--display); cursor: pointer; text-align: left; }
.guess .opts button:hover:not(:disabled) { border-color: var(--ink); }
.guess .opts button.right { background: var(--mint); border-color: var(--sea); }
.guess .opts button.wrong { background: var(--peach); border-color: var(--coral); }
.bingo { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 620px; margin: 0 auto; }
.bingo button { aspect-ratio: 1; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: .5rem; font: 600 .82rem/1.25 var(--body); cursor: pointer; display: grid; place-items: center; text-align: center; transition: background .2s, transform .15s; }
.bingo button:hover { border-color: var(--ink); }
.bingo button.on { background: var(--sun); border-color: var(--sun); transform: rotate(-2deg); }
.bingo button.win { background: var(--coral); border-color: var(--coral); color: #fff; }
.result { text-align: center; padding: 1.5rem 0 .5rem; }
.result .big { font: 800 3.4rem/1 var(--display); letter-spacing: -.04em; }
.result .actions-row { justify-content: center; }

/* shows */
.shows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.show { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); display: flex; flex-direction: column; }
.show .ph { aspect-ratio: 4/3; position: relative; }
.show .ph img { width: 100%; height: 100%; object-fit: cover; }
.show .ph .chip { position: absolute; left: 10px; top: 10px; background: #fff; }
.show .body { padding: 1.1rem; }
.show .when { font: 700 .82rem var(--display); color: var(--coral); }
.show h3 { margin: .2rem 0 .4rem; }
.show p { font-size: .9rem; color: var(--ink-2); margin: 0; }
.show.main { box-shadow: 0 0 0 3px var(--coral), var(--sh); }
.timeline-h { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.timeline-h div { border-top: 3px solid var(--sun); padding-top: .8rem; }
.timeline-h b { font: 800 1.1rem var(--display); font-variant-numeric: tabular-nums; }
.timeline-h span { display: block; font-size: .88rem; color: var(--ink-2); margin-top: .2rem; }
.tagcard { background: var(--ink); color: #fff; border-radius: var(--r); padding: 1.4rem; }
.tagcard b { font: 800 1.2rem var(--display); color: var(--sun); }
.tagcard p { margin: .5rem 0 0; font-size: .92rem; color: #c3d2d3; }

/* club */
.me { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; }
.me-card { background: var(--ink); color: #fff; border-radius: var(--r); padding: 1.8rem; position: relative; overflow: hidden; }
.me-card .lvl { font: 800 2.4rem/1 var(--display); letter-spacing: -.03em; margin: .4rem 0 .2rem; }
.me-card .pbar { background: rgba(255,255,255,.12); margin: 1.2rem 0 .5rem; }
.me-card .pbar i { background: var(--sun); }
.me-card .mute { color: #a9bcbd; }
.me-card input { background: rgba(255,255,255,.1); border: 0; color: #fff; font: 600 1rem var(--body); padding: .55rem .8rem; border-radius: 10px; width: 100%; max-width: 260px; }
.me-card input::placeholder { color: #a9bcbd; }
.me-card .paw { position: absolute; right: -20px; bottom: -30px; font-size: 9rem; opacity: .07; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem; }
.badge { background: #fff; border-radius: 16px; padding: 1rem .8rem; text-align: center; box-shadow: var(--sh); }
.badge .e { font-size: 2rem; display: block; }
.badge b { display: block; font: 700 .9rem var(--display); margin-top: .3rem; }
.badge span { font-size: .74rem; color: var(--mute); display: block; margin-top: .2rem; line-height: 1.3; }
.badge.locked { background: transparent; box-shadow: inset 0 0 0 1.5px dashed var(--line); box-shadow: none; border: 1.5px dashed var(--line); }
.badge.locked .e { filter: grayscale(1); opacity: .35; }
.lb { list-style: none; padding: 0; margin: 0; }
.lb li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; padding: .65rem .2rem; border-bottom: 1px solid var(--line); }
.lb li.you { background: var(--sun); border-radius: 12px; padding-left: .6rem; padding-right: .6rem; border-bottom-color: transparent; }
.lb .rk { font: 800 1rem var(--display); color: var(--mute); }
.lb .dotc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; }
.lb b { font-family: var(--display); }
.teams { display: grid; gap: .7rem; }
.team { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: .8rem 1rem; cursor: pointer; text-align: left; }
.team:hover { border-color: var(--ink); }
.team.on { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.team .sw { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font: 800 1rem var(--display); }
.team .pbar { margin-top: .4rem; height: 6px; }
.ref { display: flex; gap: .5rem; background: var(--bg-2); border-radius: 14px; padding: .4rem .4rem .4rem 1rem; align-items: center; }
.ref code { flex: 1; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules { font-size: .88rem; color: var(--ink-2); padding-left: 1.1rem; margin: .6rem 0 0; }
.rules li { margin: .3rem 0; }
.earn { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.earn div { background: var(--bg-2); border-radius: 12px; padding: .7rem .9rem; font-size: .88rem; display: flex; justify-content: space-between; gap: .5rem; }
.earn b { font-family: var(--display); color: var(--sea); white-space: nowrap; }

/* give */
.slider-card { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.amount-big { font: 800 clamp(3.5rem, 8vw, 5.5rem)/1 var(--display); letter-spacing: -.05em; }
input[type=range] { width: 100%; accent-color: var(--coral); height: 28px; }
.buys { display: grid; gap: .5rem; }
.buys div { display: flex; gap: .8rem; align-items: center; background: var(--bg-2); border-radius: 12px; padding: .75rem 1rem; }
.buys b { font: 800 1.3rem var(--display); min-width: 2.2em; }
.freq { display: inline-flex; background: var(--bg-2); border-radius: 999px; padding: .25rem; margin-bottom: 1rem; }
.freq button { border: 0; background: none; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem; }
.freq button.on { background: var(--ink); color: #fff; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
.tier { background: #fff; border-radius: var(--r); padding: 1.6rem; box-shadow: var(--sh); display: flex; flex-direction: column; position: relative; }
.tier.feat { background: var(--ink); color: #fff; }
.tier .price { font: 800 2.8rem/1 var(--display); letter-spacing: -.04em; margin: .8rem 0 .2rem; }
.tier .price small { font: 500 .95rem var(--body); opacity: .6; }
.tier ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; flex: 1; }
.tier li { padding: .35rem 0 .35rem 1.5rem; position: relative; font-size: .93rem; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: var(--sea); font-weight: 800; }
.tier.feat li::before { color: var(--sun); }
.tier.feat .btn { background: var(--sun); color: var(--ink); }
.tier .sticker { top: -12px; right: 16px; }
.wish { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.wish:last-child { border-bottom: 0; }
.wish .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--peach); display: grid; place-items: center; color: var(--coral-d); }
.wish .pbar { margin-top: .4rem; }

/* share card modal */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 24, 26, .6); display: none; place-items: center; padding: 16px; }
.modal.open { display: grid; animation: rise .25s; }
.modal-box { background: var(--bg); border-radius: 24px; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 1.6rem; position: relative; }
.modal-x { position: absolute; top: 12px; right: 12px; }
.sharebox { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
.sharebox canvas { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sh-lg); background: var(--bg-2); }
.tpl { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.tpl button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .4rem .8rem; cursor: pointer; font-size: .85rem; font-weight: 600; }
.tpl button.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* toast + points pop */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; background: var(--ink); color: #fff; padding: .85rem 1.2rem; border-radius: 14px; z-index: 120; transition: transform .3s, visibility .3s; max-width: calc(100% - 32px); font-weight: 500; display: flex; gap: .6rem; align-items: center; box-shadow: var(--sh-lg); }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast .plus { background: var(--sun); color: var(--ink); font: 800 .85rem var(--display); padding: .2em .55em; border-radius: 8px; }

/* footer */
.foot { background: var(--ink); color: #c3d2d3; padding: 3.5rem 0 2rem; margin-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.foot h4 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: .4rem 0; }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .logo { color: #fff; }
.foot-base { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

.give-strip { background: var(--ink); color: #fff; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; }
.give-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.form > *, .journey > *, .grid > *, .me > *, .daily > *, .vote-grid > *, .profile > *, .hero-grid > *, .slider-card > *, .sharebox > * { min-width: 0; }

/* responsive */
@media (max-width: 1080px) {
  .nav a { padding: .5rem .6rem; font-size: .88rem; }
  .shows { grid-template-columns: repeat(2, 1fr); }
  .steps-h { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .nav { display: none; }
  .more-btn { display: inline-grid; }
  .hero-grid, .daily, .vote-grid, .me, .slider-card, .profile, .sharebox, .guess { grid-template-columns: 1fr; }
  .profile .ph { position: static; max-width: 520px; }
  .games, .tiers, .tails { grid-template-columns: 1fr; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .live-strip, .give-strip { grid-template-columns: 1fr; }
  .give-actions { justify-content: flex-start; }
  .timeline-h { grid-template-columns: 1fr; }
  .timeline-h div { border-top: 0; border-left: 3px solid var(--sun); padding: .2rem 0 .2rem .9rem; }
  .collage { max-width: 520px; width: 100%; }
  .tails { grid-template-columns: repeat(3, 1fr); }
  /* app-like bottom tab bar */
  body { padding-bottom: 76px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: flex; background: none; border: 0; cursor: pointer; font-family: inherit; flex-direction: column; align-items: center; gap: .1rem; text-decoration: none; font-size: .7rem; font-weight: 600; color: var(--mute); padding: .35rem 0; border-radius: 12px; }
  .tabbar a svg, .tabbar button svg { width: 22px; height: 22px; }
  .tabbar .on { color: var(--ink); }
  .tabbar .on svg { color: var(--coral); }
  .toast { bottom: 90px; }
  .menu-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(80px + env(safe-area-inset-bottom)); background: #fff; border-radius: 20px; z-index: 61; padding: .5rem 1rem .6rem; display: none; box-shadow: var(--sh-lg); animation: rise .2s; }
  .menu-sheet.open { display: grid; align-content: start; max-height: calc(100dvh - 96px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .menu-sheet a { padding: .8rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; display: flex; gap: .8rem; align-items: center; font-size: 1.02rem; }
  .menu-sheet a:last-child { border-bottom: 0; }
  .menu-sheet a.on { color: var(--coral-d); }
  .menu-sheet .chev { margin-left: auto; color: var(--mute); }
  .sheet-title { font: 700 .78rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: .5rem .2rem 0; }
  .actionbar { display: flex; gap: .6rem; align-items: center; position: fixed; left: 0; right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 55; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: .6rem var(--gut); }
  .actionbar .btn { flex: 1; }
  body[data-route^="#/cat/"] { padding-bottom: 140px; }
}
@media (min-width: 921px) { .menu-sheet { display: none !important; } }
@media (max-width: 640px) {
  .g2, .g3, .g4, .form { grid-template-columns: 1fr; }
  .shows, .tails { grid-template-columns: 1fr; }
  .steps-h { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .journey .ph { max-width: 140px; }
  .stages div { font-size: 0; }
  .stat-row { grid-template-columns: repeat(3, 1fr); }
  .memory { gap: .45rem; }
  .bingo button { font-size: .68rem; padding: .3rem; border-radius: 10px; }
  .pts .txt { display: none; }
  .donate-btn span { display: none; }
  .donate-btn { padding: .6em .75em; }
  .top .wrap { gap: .6rem; }
  .logo small { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .cd div { min-width: 54px; }
  .search input { width: 100%; }
  .search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= v4.1 — simple flows & clarity ================= */
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }
body.noscroll { overflow: hidden; }
.actionbar { display: none; }
.h-sm { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 1.1rem; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--sea-d); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }

/* intent tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: 1.4rem; border-radius: var(--r); border: 0; text-decoration: none; cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s; min-height: 190px; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.tile b { font: 700 1.3rem var(--display); letter-spacing: -.02em; margin-top: .4rem; }
.tile > span:not(.tile-ic):not(.go):not(.sticker) { font-size: .92rem; color: var(--ink-2); }
.tile .go { margin-top: auto; padding-top: .6rem; font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; }
.t-mint { background: var(--mint); } .t-peach { background: var(--peach); } .t-sky { background: var(--sky); } .t-lilac { background: var(--lilac); }
.tile-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; }
.tile-ic svg { width: 22px; height: 22px; }

/* how-it-works mini steps */
.how { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 900px; }
.how li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-items: center; background: #fff; border-radius: 16px; padding: .9rem 1rem; box-shadow: var(--sh); }
.how .how-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; background: var(--sun); display: grid; place-items: center; }
.how b { font-size: .95rem; }
.how li > span:last-child { font-size: .85rem; color: var(--mute); }

/* home: my day */
.myday { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; background: #fff; border-radius: var(--r); padding: 1.3rem 1.5rem; box-shadow: var(--sh); }
.myday-row { font-size: 1.15rem; margin: .3rem 0 .2rem; }
.myday-row b { font-family: var(--display); }
.myday-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* cats */
.toolbar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.toolbar .filters { margin: 0; }
.cat .cname { text-decoration: none; }
.cat .cfoot { gap: .5rem; }
.cat .cfoot .btn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 3rem 1rem; background: #fff; border-radius: var(--r); }
.whatnow { background: var(--bg-2); border-radius: 14px; padding: .9rem 1.1rem; margin-top: 1.3rem; }

/* adopt facts */
.facts { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.facts div { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; align-items: center; background: #fff; border-radius: 14px; padding: .7rem 1rem; box-shadow: var(--sh); }
.facts svg { grid-row: 1 / 3; color: var(--sea); width: 22px; height: 22px; }
.facts span { font-size: .8rem; color: var(--mute); }

/* wizards */
.wizard { padding: clamp(1.2rem, 3vw, 2rem); }
.wz-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.wz-steps { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: flex; gap: .4rem; }
.wz-steps li { flex: 1; display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; color: var(--mute); font-weight: 600; }
.wz-steps li::before { content: ""; height: 5px; border-radius: 99px; background: var(--bg-2); }
.wz-steps li.done::before { background: var(--sea); }
.wz-steps li.now::before { background: var(--coral); }
.wz-steps li.now { color: var(--ink); }
.wz-steps span { display: none; }
.wz-q { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1.1rem; }
.wz-l { font-weight: 700; margin: 1.2rem 0 .5rem; font-size: .92rem; }
.wz-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.wz-hint { text-align: right; margin: .6rem 0 0; }
.choices { display: grid; gap: .6rem; }
.choices.c2 { grid-template-columns: repeat(2, 1fr); }
.choices.c4 { grid-template-columns: repeat(4, 1fr); }
.choices.c5 { grid-template-columns: repeat(5, 1fr); }
.choice { display: flex; flex-direction: column; gap: .25rem; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: .85rem 1rem; cursor: pointer; font: inherit; color: var(--ink); text-decoration: none; transition: border-color .15s, background .15s; min-height: 52px; justify-content: center; }
.choice:hover { border-color: var(--ink-2); }
.choice.on { border-color: var(--sea); background: var(--mint); }
.choice b { font-weight: 700; }
.choice span:not(.tile-ic) { font-size: .85rem; color: var(--mute); }
.choice.big { padding: 1.1rem; gap: .35rem; }
.choice.big .tile-ic { background: var(--bg-2); margin-bottom: .3rem; }
.pick-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.pick { display: flex; flex-direction: column; gap: .15rem; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: .5rem .5rem .8rem; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 11px; margin-bottom: .4rem; }
.pick b { padding: 0 .3rem; }
.pick span:not(.any-ic) { padding: 0 .3rem; font-size: .8rem; color: var(--mute); }
.pick:hover { border-color: var(--ink-2); }
.pick.on { border-color: var(--sea); background: var(--mint); }
.pick-any .any-ic { aspect-ratio: 1; border-radius: 11px; background: var(--bg-2); display: grid; place-items: center; margin-bottom: .4rem; }
.pick-any .any-ic svg { width: 34px; height: 34px; color: var(--coral); }
.small-picks { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: 52vh; overflow: auto; padding: 2px; }
.info-box { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.2rem; background: var(--bg-2); border-radius: 16px; padding: 1.1rem 1.2rem; margin-top: 1.1rem; }
.info-box b { display: block; font-size: 1.05rem; }
.info-box .full { grid-column: 1 / -1; }
.info-box ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.done-box, .welcome { text-align: center; display: grid; justify-items: center; gap: .6rem; padding: 1rem 0; }
.done-box p, .welcome p { max-width: 34em; margin: 0; }
.done-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; }
.done-ic svg { width: 30px; height: 30px; }
.welcome .choices { width: 100%; margin-top: .8rem; }
.welcome .choice.big { display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .1rem; align-items: center; justify-items: start; text-align: left; }
.welcome .choice.big .tile-ic { grid-row: 1 / 3; margin: 0; }

/* donate wizard */
.dn .freq { margin-bottom: 1rem; }
.modal .wz-top { padding-right: 52px; min-height: 40px; }
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .6rem; }
.amt { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 1rem .5rem; font: 800 1.4rem var(--display); cursor: pointer; color: var(--ink); }
.amt:hover { border-color: var(--ink-2); }
.amt.on { border-color: var(--coral); background: var(--peach); }
.amt-other { display: flex; flex-direction: column; justify-content: center; gap: .1rem; border: 2px solid var(--line); border-radius: 14px; padding: .4rem .8rem; background: #fff; }
.amt-other span { font-size: .75rem; color: var(--mute); font-weight: 600; }
.amt-other input { border: 0; font: 800 1.3rem var(--display); width: 100%; outline: none; background: none; color: var(--ink); }
.amt-other:focus-within { border-color: var(--coral); }
.impact-line { display: flex; gap: .5rem; align-items: center; background: var(--mint); color: #11614f; font-weight: 600; border-radius: 12px; padding: .8rem 1rem; margin: 1rem 0 .6rem; }
.summary { display: grid; gap: 0; background: var(--bg-2); border-radius: 16px; padding: .4rem 1.1rem; margin-bottom: 1.2rem; }
.summary div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.summary div:last-child { border-bottom: 0; }
.summary span { color: var(--mute); }
.summary b { text-align: right; }
.for-cat { display: flex; align-items: center; gap: .7rem; background: var(--bg-2); border-radius: 999px; padding: .3rem 1rem .3rem .3rem; width: fit-content; margin-bottom: 1rem; }
.for-cat img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* give page impact row */
.impact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.impact { display: grid; gap: .4rem; justify-items: start; text-align: left; background: #fff; border: 0; border-radius: var(--r); padding: 1.3rem; box-shadow: var(--sh); cursor: pointer; font: inherit; color: var(--ink); transition: transform .15s; }
.impact:hover { transform: translateY(-3px); }
.impact b { font: 800 2.2rem/1 var(--display); color: var(--coral); }
.impact span { color: var(--ink-2); font-size: .93rem; }

/* help */
.faq-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
.faq-nav { position: sticky; top: 90px; display: grid; gap: .2rem; }
.faq-nav a { text-decoration: none; padding: .55rem .8rem; border-radius: 10px; font-weight: 600; color: var(--ink-2); }
.faq-nav a:hover { background: var(--bg-2); color: var(--ink); }
.faq { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: .3rem 1.3rem; margin-bottom: 2rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.3rem/1 var(--display); color: var(--coral); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 46em; }

@media (max-width: 920px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .impact-row { grid-template-columns: repeat(2, 1fr); }
  .choices.c5 { grid-template-columns: repeat(3, 1fr); }
  .faq-wrap { grid-template-columns: 1fr; gap: 1rem; }
  .faq-nav { position: static; display: flex; flex-wrap: wrap; }
  .faq-nav a { background: #fff; box-shadow: var(--sh); border-radius: 999px; }
  .actionbar { display: flex; }
}
@media (max-width: 640px) {
  .tile { min-height: 0; padding: 1.1rem; }
  .tile b { font-size: 1.1rem; }
  .how { grid-template-columns: 1fr; }
  .choices.c2, .choices.c4, .choices.c5 { grid-template-columns: 1fr 1fr; }
  .welcome .choices.c2 { grid-template-columns: 1fr; }
  .info-box { grid-template-columns: 1fr; }
  .wz-steps li { font-size: 0; }
  .wz-nav .btn { flex: 1; }
  .cat .cfoot { flex-wrap: wrap; }
  .modal { padding: 0; align-items: end; }
  .modal-box { border-radius: 24px 24px 0 0; max-height: 92vh; width: 100%; padding: 1.3rem 1.1rem 1.6rem; }
}
#apply, .wizard, [id^="faq-"] { scroll-margin-top: 90px; }
.form .check { flex-direction: row; align-items: flex-start; gap: .7rem; font-weight: 500; cursor: pointer; }
.form input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--sea); }

/* ================= v4.2 — growth features ================= */
/* community goal */
.goal { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 1.5rem 1.6rem; }
.goal-head { display: flex; justify-content: space-between; gap: 1rem 2rem; align-items: flex-end; flex-wrap: wrap; }
.goal-head h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-top: .4rem; max-width: 34em; }
.goal-num { text-align: right; }
.goal-num b { display: block; font: 800 2.2rem/1 var(--display); letter-spacing: -.04em; }
.goal-num span { font-size: .8rem; color: var(--mute); }
.goal-track { position: relative; height: 14px; background: var(--bg-2); border-radius: 99px; margin: 2rem 18px 1.1rem 0; }
.goal-track > i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--sea), #29b3a4); }
.goal-track .ms { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--line); display: grid; place-items: center; font-size: 1rem; filter: grayscale(1); }
.goal-track .ms.hit { box-shadow: 0 0 0 3px var(--sea); filter: none; }
.ms-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.ms-list li { display: grid; gap: .2rem; background: var(--bg-2); border-radius: 14px; padding: .9rem 1rem; }
.ms-list li > span:first-child { font-size: 1.5rem; }
.ms-list b { font-family: var(--display); font-size: 1.15rem; }
.ms-list li > span:nth-child(3) { font-size: .88rem; color: var(--ink-2); }
.ms-list em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--mute); }
.ms-list li.hit { background: var(--mint); }
.ms-list li.hit em { color: var(--sea-d); }
.goal-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* news */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.post { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.post-ph { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.post:not(.small) .post-ph { aspect-ratio: 16 / 9; }
.post-ph img { width: 100%; height: 100%; object-fit: cover; }
.post-ph .chip { position: absolute; left: 10px; top: 10px; }
.post-body { padding: 1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.post-body p { margin: 0; font-size: 1rem; }
.post.small .post-body p { font-size: .93rem; }
.post-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.post-cat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.post-cat img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.post-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; }
.reacts { display: flex; gap: .3rem; flex-wrap: wrap; }
.react { display: inline-flex; align-items: center; gap: .3rem; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .3rem .6rem; cursor: pointer; font-size: .95rem; }
.react span { font-size: .78rem; font-weight: 600; color: var(--mute); }
.react:hover { border-color: var(--ink-2); }
.react.on { background: var(--peach); border-color: var(--coral); }
.react.on span { color: var(--coral-d); }
.post.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px var(--sun), var(--sh); } }
.news-feed { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.feed { display: grid; gap: 1.2rem; max-width: 640px; }
.feed-side { display: grid; gap: 1.2rem; position: sticky; top: 90px; }
.feed-side .goal-head { flex-direction: column; align-items: flex-start; }
.feed-side .goal-num { text-align: left; }

/* channels */
.channels { display: grid; gap: .5rem; }
.channel { display: flex; align-items: center; gap: .8rem; text-align: left; background: var(--bg-2); border: 0; border-radius: 14px; padding: .65rem .9rem .65rem .65rem; text-decoration: none; cursor: pointer; font: inherit; color: var(--ink); }
.channel:hover { background: var(--line); }
.channel b { display: block; }
.channel > span:nth-child(2) > span { font-size: .82rem; color: var(--mute); }
.channel .chev { margin-left: auto; color: var(--mute); }

/* quiz */
.quiz-banner { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.5rem; background: var(--ink); color: #fff; border-radius: var(--r); padding: 1rem 1.2rem; text-decoration: none; flex-wrap: wrap; }
.quiz-banner b { display: block; font: 700 1.2rem var(--display); }
.quiz-banner > div:nth-child(2) { flex: 1; min-width: 200px; }
.quiz-banner > div:nth-child(2) span { font-size: .88rem; color: #b9cacb; }
.qb-faces { display: flex; }
.qb-faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); margin-left: -12px; }
.qb-faces img:first-child { margin-left: 0; }
.quiz-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; background: linear-gradient(120deg, var(--sun), #ffd98a); border-radius: var(--r); padding: 1.4rem 1.6rem; text-decoration: none; margin-bottom: 1.2rem; transition: transform .2s; }
.quiz-card:hover { transform: translateY(-3px); }
.quiz-card .emo { font-size: 3rem; }
.quiz-card p { margin: .2rem 0 0; color: var(--ink-2); }
.quiz-card .go { font-weight: 700; display: inline-flex; gap: .3rem; align-items: center; }
.pq-bar { display: flex; gap: .3rem; margin-bottom: 1.5rem; }
.pq-bar i { flex: 1; height: 6px; border-radius: 99px; background: var(--bg-2); }
.pq-bar i.done { background: var(--sea); }
.pq-bar i.now { background: var(--coral); }
.pq-q { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.2rem; }
.pq-a { min-height: 64px; }
.pq-a b { font-size: 1.02rem; }
.pq-result { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center; }
.pq-result .ph { border-radius: var(--r); overflow: hidden; aspect-ratio: 1; }
.pq-result .ph img { width: 100%; height: 100%; object-fit: cover; }
.pq-name { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: .2rem 0 .8rem; }

/* ambassadors + creator kit */
.amb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.amb-list li { display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; background: var(--bg-2); border-radius: 14px; padding: .6rem .8rem; }
.amb-list li.hit { background: var(--mint); }
.amb-n { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; font: 800 1.05rem var(--display); }
.amb-list b { display: block; }
.amb-list div span { font-size: .85rem; color: var(--ink-2); }
.amb-list em { font-style: normal; font-weight: 800; color: var(--sea-d); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tagbtn { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .45rem .8rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
.tagbtn:hover { border-color: var(--ink); }
.tagbtn.all { background: var(--ink); color: #fff; border-color: var(--ink); }
.caption { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.caption:last-child { border-bottom: 0; }
.caption p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.visit h3 { margin-top: .5rem; font-size: 1.15rem; }
.etiquette { margin-top: 1.2rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 2rem; align-items: center; background: var(--mint); box-shadow: none; }
.etiquette ul { margin: 0; padding-left: 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.5rem; font-size: .93rem; }
.wall { display: flex; flex-wrap: wrap; gap: .5rem; }
.wall span { background: #fff; box-shadow: var(--sh); border-radius: 999px; padding: .45rem .95rem; font-weight: 600; font-size: .92rem; }
.wall span:nth-child(3n) { background: var(--peach); }
.wall span:nth-child(4n) { background: var(--mint); }
.wall .you { background: transparent; box-shadow: none; border: 1.5px dashed var(--mute); color: var(--mute); }

@media (max-width: 1080px) {
  .news-feed { grid-template-columns: 1fr; }
  .feed { max-width: none; }
  .feed-side { position: static; grid-template-columns: 1fr 1fr; }
  .ms-list { grid-template-columns: repeat(2, 1fr); }
  .etiquette { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .pq-result { grid-template-columns: 1fr; }
  .pq-result .ph { max-width: 360px; }
  .quiz-card { grid-template-columns: auto 1fr; }
  .quiz-card .go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .news-grid, .feed-side { grid-template-columns: 1fr; }
  .ms-list { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ms-list li { padding: .7rem .8rem; }
  .etiquette ul { grid-template-columns: 1fr; }
  .goal { padding: 1.2rem; }
  .goal-num { text-align: left; }
  .quiz-card .emo { font-size: 2.2rem; }
  .caption { flex-direction: column; }
}
.nav a { white-space: nowrap; }
@media (min-width: 921px) and (max-width: 1100px) {
  .nav { margin-left: .4rem; gap: 0; }
  .nav a { padding: .45rem .5rem; font-size: .85rem; }
  .logo small { display: none; }
  .pts .txt { display: none; }
}

/* ================= v4.3 — app, video, wall, certificate, partners, shop ================= */
/* desktop "More" dropdown (same list as the mobile sheet) */
.nav-more { border: 0; background: none; padding: .5rem .8rem; border-radius: 999px; font: 500 .93rem var(--body); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: .2rem; }
.nav-more:hover, .nav-more.on { background: var(--bg-2); color: var(--ink); }
@media (min-width: 921px) {
  .menu-sheet { display: none !important; position: fixed; top: 64px; right: max(16px, calc((100vw - var(--w)) / 2 + 16px)); width: 280px; background: #fff; border-radius: 18px; box-shadow: var(--sh-lg); padding: .4rem .9rem .5rem; z-index: 60; }
  .menu-sheet.open { display: grid !important; animation: rise .15s; max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .menu-sheet a { padding: .75rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; display: flex; gap: .7rem; align-items: center; font-size: .95rem; }
  .menu-sheet a:last-child { border-bottom: 0; }
  .menu-sheet a:hover { color: var(--coral-d); }
  .menu-sheet .chev { margin-left: auto; color: var(--mute); }
  .menu-sheet .in-nav { display: none; }
  .sheet-title { font: 700 .72rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: .5rem .2rem 0; }
}
@media (min-width: 921px) and (max-width: 1100px) { .nav-more { padding: .45rem .5rem; font-size: .85rem; } }
.cart-btn { position: relative; background: #fff; box-shadow: var(--sh); }
.cart-btn span { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--coral); color: #fff; font: 700 .7rem/20px var(--body); text-align: center; padding: 0 5px; }
.cart-btn[hidden] { display: none; }

/* install */
.install-banner { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); z-index: 70; width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: 18px; box-shadow: var(--sh-lg); padding: .7rem .7rem .7rem .8rem; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.install-banner.show { transform: translate(-50%, 0); }
.install-banner img { border-radius: 12px; flex: none; }
.install-banner div { flex: 1; min-width: 0; }
.install-banner b { display: block; }
.install-banner span { font-size: .82rem; color: var(--mute); }
@media (max-width: 920px) { .install-banner { bottom: calc(80px + env(safe-area-inset-bottom)); } }
.install-card { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--sun); box-shadow: none; }
.install-card img { border-radius: 14px; }
.install-card > div { flex: 1; min-width: 200px; }
.install-card b { display: block; }
[data-install-slot][hidden] { display: none; }
.ios-steps { list-style: none; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .5rem; text-align: left; width: 100%; max-width: 420px; }
.ios-steps li { display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 14px; padding: .8rem 1rem; }
.ios-steps li > span { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.ios-steps svg { color: #0a84ff; }

/* TikTok blocks */
.tt { position: relative; display: block; width: 100%; max-width: 340px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #000; text-decoration: none; color: #fff; }
.post-ph .tt { max-width: none; aspect-ratio: auto; height: 100%; border-radius: 0; }
.tt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.tt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.7)); }
.tt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; z-index: 1; transition: transform .2s; }
.tt-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.tt:hover .tt-play { transform: translate(-50%, -50%) scale(1.08); }
.tt-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; text-align: left; }
.tt-cap b { display: block; }
.tt-cap span { font-size: .8rem; opacity: .85; }
.tt-live { cursor: default; }
.tt-live::after { display: none; }
.tt-live iframe { width: 100%; height: 100%; border: 0; }
.tt-row { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.tt-row .tt { flex: 0 0 min(300px, 78vw); }

/* finance link-up */
.fin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fin-head h3 { font-size: 1.5rem; margin-top: .4rem; }
.fin-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; margin: 1.2rem 0 .9rem; }
.fin-bar i { height: 100%; }
.fin-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .88rem; }
.fin-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.fin-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* fan wall */
.wall-grid { columns: 4 240px; column-gap: 1rem; }
.wall-grid.preview { columns: 4 200px; }
.wall-item { break-inside: avoid; margin: 0 0 1rem; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); position: relative; }
.wall-item img { width: 100%; height: auto; }
.wall-item > .chip { position: absolute; left: 10px; top: 10px; }
.wall-item.pending img { filter: saturate(.6); opacity: .8; }
.wall-item figcaption { padding: .8rem 1rem 1rem; display: grid; gap: .15rem; }
.wall-item figcaption span { font-size: .9rem; color: var(--ink-2); }
.wall-item figcaption em { font-style: normal; font-size: .78rem; color: var(--mute); }
.pending-note { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; background: var(--peach); box-shadow: none; }
.pending-note b { display: block; }
.drop { display: grid; place-items: center; gap: .3rem; text-align: center; border: 2px dashed var(--line); border-radius: 18px; padding: 2rem 1rem; cursor: pointer; background: #fff; min-height: 200px; }
.drop:hover { border-color: var(--sea); }
.drop svg { width: 36px; height: 36px; color: var(--sea); }
.drop.has { padding: .5rem; border-style: solid; }
.drop.has img { max-height: 320px; width: auto; border-radius: 12px; }

/* certificate + sticker */
.cert, .sticker-wrap { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 2rem; align-items: start; }
.cert canvas, .sticker-wrap canvas { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--sh-lg); background: #fff; }
.sticker-wrap { grid-template-columns: 1fr minmax(0, 380px); align-items: center; }
.sticker-wrap canvas { border-radius: 36px; }
.perk h3 { font-size: 1.1rem; margin: .8rem 0 .3rem; }
.partner-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.partner-row:last-child { border-bottom: 0; }
.partner-row > div { flex: 1; }
.partner-row b { display: block; }

/* colony page */
.colony-hero { position: relative; padding: clamp(4rem, 10vw, 7rem) 0 2.5rem; color: #fff; background: linear-gradient(180deg, rgba(10,24,26,.25), rgba(10,24,26,.8)), var(--bg) center / cover; }
.colony-hero h1 { font-size: clamp(2.3rem, 6vw, 4rem); margin: .8rem 0 .6rem; }
.colony-hero p { max-width: 36em; font-size: 1.1rem; opacity: .92; }
.colony-facts { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.colony-facts span { display: inline-flex; gap: .4rem; align-items: center; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); padding: .45rem .8rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.scanned { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--mint); box-shadow: none; }
.scanned b { display: block; }

/* shop */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.product { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.pv { position: relative; aspect-ratio: 1 / .85; background: linear-gradient(160deg, var(--bg-2), var(--peach)); display: grid; place-items: center; overflow: hidden; }
.pv > .chip { position: absolute; left: 12px; top: 12px; }
.mock { width: 82%; height: 82%; filter: drop-shadow(0 12px 18px rgba(16,40,43,.18)); }
.mock-sticker { position: relative; width: 58%; aspect-ratio: 1; }
.mock-sticker img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 10px solid #fff; box-shadow: 0 10px 22px rgba(16,40,43,.2); transform: rotate(-6deg); }
.mock-sticker .s2 { position: absolute; width: 52%; height: 52%; right: -22%; bottom: -8%; transform: rotate(10deg); border-width: 7px; }
.mock-sticker span { position: absolute; left: -12%; top: -6%; font-size: 2.2rem; background: #fff; border-radius: 50%; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(16,40,43,.18); transform: rotate(-14deg); }
.mock-cal { width: 58%; background: #fff; border-radius: 10px; box-shadow: 0 14px 26px rgba(16,40,43,.22); overflow: hidden; transform: rotate(-3deg); }
.mock-cal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mock-cal div { padding: .5rem .7rem .7rem; display: grid; gap: .25rem; }
.mock-cal b { font: 800 1.4rem/1 var(--display); color: var(--coral); }
.mock-cal span { font-size: .62rem; color: var(--mute); }
.mock-cal i { height: 5px; background: var(--bg-2); border-radius: 3px; }
.mock-cards { position: relative; width: 70%; aspect-ratio: 1.2; }
.mock-cards img { position: absolute; inset: 12% 10%; width: 80%; height: 76%; object-fit: cover; border: 7px solid #fff; border-radius: 6px; box-shadow: 0 10px 20px rgba(16,40,43,.2); transform: rotate(var(--r)); }
.pbody { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.pbody p { margin: 0; }
.funds { display: flex; gap: .4rem; align-items: center; font-size: .85rem; font-weight: 600; color: var(--sea-d); }
.buy { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .8rem; }
.buy .price { font: 800 1.5rem var(--display); margin-right: auto; }
.buy select { font: inherit; padding: .45rem .5rem; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; }
.cart-list { display: grid; margin: 1rem 0; }
.cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.qty { display: flex; align-items: center; gap: .4rem; }
.qty .iconbtn { width: 32px; height: 32px; }

/* team area */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.mod img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: .7rem; }
.pv-out { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.pv-out > p { grid-column: 1 / -1; }
.pv-wa { background: #d9fdd3; border-radius: 12px; padding: .4rem; max-width: 380px; }
.pv-wa img { width: 100%; border-radius: 8px; }
.pv-wa div, .pv-fb div { padding: .5rem .4rem; display: grid; gap: .15rem; }
.pv-wa b, .pv-fb b { font-size: .95rem; }
.pv-wa span, .pv-fb span { font-size: .8rem; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv-wa em { font-style: normal; font-size: .75rem; color: #777; }
.pv-fb { background: #fff; border: 1px solid #dddfe2; max-width: 500px; }
.pv-fb img { width: 100%; aspect-ratio: 1.91; object-fit: cover; }
.pv-fb div { background: #f0f2f5; padding: .6rem .8rem; }
.pv-fb em { font-style: normal; font-size: .72rem; color: #65676b; }

@media (max-width: 920px) {
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .cert, .sticker-wrap, .pv-out { grid-template-columns: 1fr; }
  .cert canvas, .sticker-wrap canvas { max-width: 420px; }
}
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr; }
  .wall-grid, .wall-grid.preview { columns: 2 140px; column-gap: .7rem; }
  .wall-item { margin-bottom: .7rem; }
  .cart-row { grid-template-columns: 1fr auto; }
  .cart-row > b { grid-column: 2; text-align: right; }
}

/* ================= v4.4 — news redesign ================= */
/* stories row */
.stories { display: flex; gap: 1rem; overflow-x: auto; padding: .4rem .2rem 1rem; margin: 1.4rem -.2rem 0; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; display: grid; justify-items: center; gap: .35rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink); width: 76px; }
.story .ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: var(--line); display: grid; place-items: center; transition: transform .15s; }
.story.unseen .ring { background: conic-gradient(from 200deg, var(--coral), var(--sun), var(--sea), var(--coral)); }
.story img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); }
.story b { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.story:hover .ring { transform: scale(1.05); }
.story:not(.unseen) b { color: var(--mute); font-weight: 500; }

/* page layout */
.news-hero { padding-bottom: 0; }
.news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.news-head p { margin-top: .5rem; }
.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.news-side { display: grid; gap: 1rem; position: sticky; top: 88px; }
.news-side .goal-head { flex-direction: column; align-items: flex-start; }
.news-side .goal-num { text-align: left; }
.side-cat { display: grid; grid-template-columns: 44px 1fr auto; gap: .7rem; align-items: center; padding: .5rem 0; }
.side-cat img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.side-cat a { text-decoration: none; }
.side-cat div span { display: block; }
.news-filters { margin: 1.6rem 0 .4rem; }
.day { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin: 1.6rem 0 .8rem; font-family: var(--body); font-weight: 700; }

/* shared meta + reactions */
.nmeta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; color: var(--mute); }
.nmeta-cat { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .9rem; }
.nmeta-cat img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.nmeta-cat.light { color: #fff; }
.nmeta .chip { font-size: .7rem; padding: .22em .6em; }
.chip.new { background: var(--coral); color: #fff; }
.nfoot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.rx { display: flex; gap: .1rem; flex-wrap: wrap; }
.rx-b { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; border-radius: 999px; padding: .3rem .5rem; cursor: pointer; font-size: 1rem; line-height: 1; transition: background .15s; }
.rx-b span { font-size: .75rem; font-weight: 600; color: var(--mute); }
.rx-b:hover { background: var(--bg-2); }
.rx-b.on { background: var(--peach); }
.rx-b.on span { color: var(--coral-d); }
.rx-b.pop { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.25); } }
.rx-share { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: var(--bg-2); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; font: 600 .82rem var(--body); color: var(--ink); }
.rx-share:hover { background: var(--line); }
.rx-share svg { width: 15px; height: 15px; }

/* featured */
.featured { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.featured-ph { position: relative; border: 0; padding: 0; cursor: pointer; min-height: 300px; background: var(--bg-2); }
.featured-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-ph .chip { position: absolute; left: 14px; top: 14px; }
.featured-body { padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
.featured-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.featured-body p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

/* timeline rows */
.timeline { display: grid; gap: .8rem; }
.nrow { display: grid; grid-template-columns: 150px 1fr; gap: 1.1rem; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: .8rem; transition: box-shadow .2s; }
.nrow:hover { box-shadow: var(--sh-lg); }
.nrow-ph { position: relative; border: 0; padding: 0; border-radius: 14px; overflow: hidden; cursor: pointer; aspect-ratio: 1; align-self: start; background: var(--bg-2); }
.nrow-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.nrow-ph:hover img { transform: scale(1.05); }
.nrow-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .2rem .2rem 0 0; }
.nrow h3 { font-size: 1.2rem; line-height: 1.25; }
.nrow p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.ncard-play { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--ink); }
.ncard-play svg { width: 16px; height: 16px; fill: currentColor; }

/* compact card (home, profiles, colonies) */
.ncard { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; display: flex; flex-direction: column; }
.ncard-ph { position: relative; border: 0; padding: 0; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.ncard-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ncard-ph:hover img { transform: scale(1.04); }
.ncard-ph .chip { position: absolute; left: 10px; top: 10px; background: #fff; }
.ncard-ph .chip.new { left: auto; right: 10px; background: var(--coral); }
.ncard-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.ncard h3 { font-size: 1.1rem; line-height: 1.25; }
.ncard p { margin: 0; color: var(--ink-2); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* story viewer */
.story-view { position: fixed; inset: 0; z-index: 150; background: rgba(6, 16, 18, .94); display: none; place-items: center; padding: 16px; }
.story-view.open { display: grid; animation: rise .2s; }
.sv-card { position: relative; width: min(420px, 100%); height: min(760px, calc(100vh - 32px)); border-radius: 22px; overflow: hidden; background: #000; color: #fff; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.sv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.sv-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.45), transparent 22%, transparent 45%, rgba(0,0,0,.85)); pointer-events: none; }
.sv-bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.sv-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-bars i.full b { width: 100%; }
.sv-bars b { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars b.run { animation: svfill linear forwards; }
@keyframes svfill { to { width: 100%; } }
.sv-top { position: absolute; top: 22px; left: 14px; right: 8px; z-index: 3; display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.sv-top > span { opacity: .8; }
.sv-x { margin-left: auto; background: none; border: 0; color: #fff; width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center; }
.sv-nav { position: absolute; top: 70px; bottom: 45%; width: 45%; border: 0; background: none; cursor: pointer; z-index: 2; }
.sv-nav.prev { left: 0; } .sv-nav.next { right: 0; }
.sv-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.2rem 1.2rem 1rem; display: grid; gap: .55rem; justify-items: start; }
.sv-bottom h2 { font-size: 1.7rem; color: #fff; }
.sv-bottom p { margin: 0; opacity: .92; }
.sv-bottom .nfoot { width: 100%; }
.sv-bottom .rx-b span { color: rgba(255,255,255,.8); }
.sv-bottom .rx-b:hover { background: rgba(255,255,255,.15); }
.sv-bottom .rx-b.on { background: rgba(255,106,69,.35); }
.sv-bottom .rx-b.on span { color: #fff; }
.sv-bottom .rx-share { background: rgba(255,255,255,.18); color: #fff; }
.sv-more { color: #fff; font-weight: 600; font-size: .9rem; display: inline-flex; gap: .3rem; align-items: center; opacity: .9; }
@media (max-width: 640px) {
  .story-view { padding: 0; }
  .sv-card { width: 100%; height: 100%; border-radius: 0; }
}

@media (max-width: 1080px) {
  .news-layout { grid-template-columns: minmax(0, 1fr); }
  .news-side { position: static; grid-template-columns: 1fr 1fr; }
  .news-side > .goal { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured-ph { min-height: 0; aspect-ratio: 16 / 10; }
  .news-side { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .nrow { grid-template-columns: 96px 1fr; gap: .8rem; padding: .7rem; }
  .nrow h3 { font-size: 1.05rem; }
  .nrow p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; }
  .nrow .nfoot { flex-wrap: wrap; }
  .nrow .rx-b { padding: .25rem .35rem; }
  .rx-share span { display: none; }
  .story { width: 68px; }
  .story .ring { width: 64px; height: 64px; }
}
/* news polish */
.story .ring { overflow: hidden; }
.story img { display: block; aspect-ratio: 1; min-width: 0; min-height: 0; }
@media (max-width: 640px) {
  .news-filters { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); padding: 0 var(--gut) .3rem; scrollbar-width: none; }
  .news-filters::-webkit-scrollbar { display: none; }
  .news-filters button { flex: none; }
}
@media (max-width: 520px) {
  /* thumbnail + headline side by side, text and reactions full width underneath */
  .nrow { grid-template-columns: 84px minmax(0, 1fr); row-gap: .55rem; }
  .nrow > *, .nrow-body > * { min-width: 0; }
  .nrow .rx { flex-wrap: nowrap; min-width: 0; }
  .nrow-ph { grid-row: 1 / 3; }
  .nrow-body { display: contents; }
  .nrow .nmeta { grid-column: 2; align-self: end; }
  .nrow h3 { grid-column: 2; align-self: start; }
  .nrow p { grid-column: 1 / -1; }
  .nrow .nfoot { grid-column: 1 / -1; flex-wrap: nowrap; border-top: 1px solid var(--line); padding-top: .5rem; }
}

.news-layout > * { min-width: 0; }

/* ================= v4.5 — club membership ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pts.join { background: var(--coral); color: #fff; }
.pts.join .lv { background: rgba(255,255,255,.25); color: #fff; }
.pts.join .lv svg { width: 14px; height: 14px; }
.pts-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* member card */
.mcard { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1.586; border-radius: 20px; background: radial-gradient(circle at 85% 0%, #1d4a4f, var(--ink) 60%); color: #fff; padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--sh-lg); overflow: hidden; }
.mcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--team); }
.mcard.big { max-width: 440px; padding: 1.3rem 1.4rem; }
.mc-top { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; }
.mc-brand { display: inline-flex; align-items: center; gap: .4rem; font: 700 .95rem var(--display); }
.mc-brand svg { color: var(--sun); }
.mc-no { color: var(--sun); font-weight: 700; letter-spacing: .05em; }
.mc-mid { display: flex; align-items: center; gap: .9rem; }
.mc-mid img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sun); flex: none; }
.mcard.big .mc-mid img { width: 78px; height: 78px; }
.mc-mid b { display: block; font: 800 1.35rem/1.1 var(--display); }
.mcard.big .mc-mid b { font-size: 1.7rem; }
.mc-mid span { display: block; font-size: .8rem; color: #b9cacb; }
.mc-bottom { display: flex; justify-content: space-between; align-items: flex-end; font-size: .75rem; color: #b9cacb; }
.mc-qr { background: #fff; border-radius: 8px; padding: 3px; line-height: 0; }
.qr-fallback { display: grid; place-items: center; width: 56px; height: 56px; color: var(--ink); line-height: 1; }

/* club intro (visitors) */
.club-intro { padding: clamp(2rem, 5vw, 4rem) 0 2rem; }
.intro-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.club-intro h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
.club-intro .lead { font-size: 1.15rem; color: var(--ink-2); margin: 1.2rem 0 1.6rem; max-width: 34em; }
.club-intro .actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.intro-social { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; font-size: .92rem; color: var(--ink-2); flex-wrap: wrap; }
.faces { display: flex; }
.faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); margin-left: -10px; }
.faces img:first-child { margin-left: 0; }
.intro-card-demo { display: grid; justify-items: center; }
.intro-card-demo .mcard { transform: rotate(-4deg); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.perk2 { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; align-items: center; background: #fff; border-radius: 18px; padding: 1rem 1.1rem; box-shadow: var(--sh); }
.perk2 .tile-ic { grid-row: 1 / 3; background: var(--mint); }
.perk2 span:last-child { font-size: .87rem; color: var(--mute); }

/* join */
.join-hero { padding-top: 2rem; }
.wizard.join { max-width: 820px; margin: 0 auto; }
.choice .dotc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: 1px; }
.join-done { text-align: center; display: grid; justify-items: center; gap: .6rem; padding: 1rem 0; }
.join-done h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.join-card { width: 100%; display: grid; justify-items: center; margin: 1rem 0; animation: cardIn .7s cubic-bezier(.2,.9,.2,1.2); }
@keyframes cardIn { from { transform: translateY(30px) rotate(-8deg) scale(.9); opacity: 0; } }
.join-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; background: var(--peach); box-shadow: none; }
.join-cta b { display: block; }

/* dashboard */
.dash-head { padding: clamp(1.8rem, 4vw, 3rem) 0 0; }
.dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.dash-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .2rem 0 1.1rem; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.todo li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: .8rem; align-items: center; background: #fff; border-radius: 14px; padding: .65rem .8rem; box-shadow: var(--sh); }
.todo .tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; }
.todo li.done .tick { background: var(--sea); border-color: var(--sea); color: #fff; }
.todo .tick svg { width: 15px; height: 15px; }
.todo li.done .t-label { color: var(--mute); text-decoration: line-through; }
.todo .t-pts { font: 700 .8rem var(--display); color: var(--sea); }
.todo li.done { grid-template-columns: 28px 1fr auto; box-shadow: none; background: var(--bg-2); }
.dash-card { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 1.2rem; display: grid; justify-items: stretch; }
.dash-card-link { text-decoration: none; justify-self: center; width: 100%; display: grid; justify-items: center; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; text-align: center; }
.dash-stats b { display: block; font: 800 1.3rem var(--display); }
.dash-stats span { font-size: .78rem; color: var(--mute); }
.dash-card .pbar { margin-top: .4rem; }

/* events */
.ev-list { display: grid; gap: .8rem; }
.ev { display: grid; grid-template-columns: 70px 1fr auto; gap: 1rem; align-items: center; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: .9rem 1rem; }
.ev.main { box-shadow: 0 0 0 2px var(--coral), var(--sh); }
.ev-date { text-align: center; background: var(--bg-2); border-radius: 14px; padding: .5rem .3rem; display: grid; line-height: 1.1; }
.ev-date b { font: 800 1.6rem var(--display); }
.ev-date span { font-weight: 700; font-size: .78rem; text-transform: uppercase; color: var(--coral-d); }
.ev-date em { font-style: normal; font-size: .72rem; color: var(--mute); }
.ev-body { display: grid; gap: .25rem; min-width: 0; }
.ev-body h3 { font-size: 1.15rem; }
.ev-body p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.ev-act { display: grid; gap: .4rem; justify-items: end; }
.grid .ev { grid-template-columns: 60px 1fr; }
.grid .ev .ev-act { grid-column: 1 / -1; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.grid .ev-body p { display: none; }

/* comments */
.comments .c-list { display: grid; gap: .9rem; max-height: 46vh; overflow: auto; margin-bottom: 1rem; }
.c-item { display: grid; grid-template-columns: 36px 1fr; gap: .7rem; }
.c-item p { margin: .15rem 0 0; }
.c-item.mine p { color: var(--ink-2); }
.c-av { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 800 1rem var(--display); flex: none; }
.c-form { display: flex; gap: .6rem; align-items: center; background: #fff; border-radius: 999px; padding: .35rem .35rem .35rem .4rem; box-shadow: var(--sh); }
.c-form input { flex: 1; border: 0; outline: none; font: inherit; background: none; min-width: 0; }

/* my club */
.club-hero { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.history { list-style: none; padding: 0; margin: .8rem 0 0; }
.history li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.history li:last-child { border-bottom: 0; }
.history em { font-style: normal; color: var(--mute); font-size: .8rem; }
.history b { color: var(--sea); font-family: var(--display); }

@media (max-width: 920px) {
  .intro-grid, .dash-grid, .club-hero { grid-template-columns: 1fr; }
  .intro-card-demo { order: -1; }
  .perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .perks { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 58px 1fr; }
  .ev-act { grid-column: 1 / -1; display: flex; justify-content: flex-start; flex-wrap: wrap; }
  .ev-act .btn span { display: none; }
  .ev-body p { display: none; }
  .todo li { grid-template-columns: 26px 1fr auto; }
  .todo .t-pts { display: none; }
  .mcard.big { max-width: 100%; }
}
/* compact cards: two reactions are enough, the full set is on the news page and in stories */
.ncard .rx-b:nth-child(n+3) { display: none; }
.ncard .nfoot { flex-wrap: nowrap; }
.ncard .rx-share span:empty { display: none; }
@media (max-width: 1100px) { .ncard .rx-share[data-sharelink] span { display: none; } }
.partner-row > div { min-width: 0; }
.partner-row { flex-wrap: wrap; }
.pv-out > * { min-width: 0; }
.pv-wa, .pv-fb { max-width: 100%; }
.steps-h.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .steps-h.three { grid-template-columns: 1fr; } }
.pv-out code, .page-hero code { overflow-wrap: anywhere; }

/* ================= v4.6 — backstage, notifications, profiles, teams ================= */
/* bell + panel */
.bell { position: relative; background: #fff; box-shadow: var(--sh); }
.bell span { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 99px; background: var(--coral); color: #fff; font: 700 .68rem/19px var(--body); text-align: center; padding: 0 5px; }
.bell span[hidden] { display: none; }
.notif-panel { position: fixed; top: 68px; right: max(12px, calc((100vw - var(--w)) / 2 + 12px)); width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 160px)); overflow: auto; background: #fff; border-radius: 18px; box-shadow: var(--sh-lg); z-index: 70; display: none; }
.notif-panel.open { display: block; animation: rise .15s; }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem .6rem; position: sticky; top: 0; background: #fff; }
.np-list { list-style: none; margin: 0; padding: 0 .5rem .5rem; }
.np-list a { display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center; padding: .65rem .6rem; border-radius: 12px; text-decoration: none; font-size: .9rem; color: var(--ink-2); }
.np-list a:hover { background: var(--bg-2); }
.np-list a.unread { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--peach) 55%, transparent); }
.np-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; }
.np-ic svg { width: 17px; height: 17px; }
.np-list em { font-style: normal; font-size: .72rem; color: var(--mute); font-weight: 500; }
.np-empty { display: grid; justify-items: center; gap: .4rem; padding: 2rem 1rem; color: var(--mute); }
.np-foot { display: flex; gap: .5rem; align-items: center; padding: .8rem 1.1rem; border-top: 1px solid var(--line); text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
@media (max-width: 920px) { .notif-panel { top: 64px; } }
@media (max-width: 640px) { .bell { width: 36px; height: 36px; } }

/* locked (members only) */
.locked { position: relative; }
.locked-inner { filter: blur(6px) saturate(.7); pointer-events: none; user-select: none; max-height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.locked-cta { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); background: #fff; border-radius: 20px; box-shadow: var(--sh-lg); padding: 1.6rem; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.locked-cta .tile-ic { background: var(--sun); }
.locked-cta span:not(.tile-ic) { color: var(--ink-2); font-size: .93rem; margin-bottom: .5rem; }

/* backstage content */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
.bs-item .tt { max-width: none; }
.letters { display: grid; gap: .8rem; max-width: 820px; }
.letter-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 1.1rem 1.2rem; text-decoration: none; }
.letter-card:hover { box-shadow: var(--sh-lg); }
.letter-no { width: 56px; height: 56px; border-radius: 16px; background: var(--ink); color: var(--sun); display: grid; place-items: center; font: 800 1.2rem var(--display); }
.letter-card.read .letter-no { background: var(--bg-2); color: var(--mute); }
.letter-card h3 { margin: .15rem 0; font-size: 1.2rem; }
.letter-card p { margin: 0; color: var(--ink-2); font-size: .92rem; }
.letter { max-width: 680px; margin: 0 auto; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: clamp(1.4rem, 4vw, 2.6rem); }
.letter h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .3rem 0 .6rem; }
.letter .lead { font-size: 1.15rem; color: var(--ink-2); }
.letter h2 { font-size: 1.25rem; margin: 1.6rem 0 .4rem; }
.letter p { font-size: 1.02rem; line-height: 1.7; }
.letter .sign { font-weight: 700; margin-top: 2rem; }
.letter-nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.replays { display: grid; gap: .6rem; max-width: 820px; }
.replay { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; align-items: center; background: #fff; border-radius: 16px; box-shadow: var(--sh); padding: .6rem; text-decoration: none; }
.replay b { display: block; }
.rp-ph { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.rp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-ph svg { position: relative; color: #fff; fill: #fff; width: 26px; height: 26px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.replay .chev { color: var(--mute); margin-right: .5rem; }
.bs-strip { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; align-items: stretch; }
.bs-strip .letter-card { grid-template-columns: auto 1fr; }
.bs-strip .letter-card > svg { display: none; }
.bs-mini { position: relative; border-radius: var(--r); overflow: hidden; min-height: 150px; color: #fff; text-decoration: none; display: flex; align-items: flex-end; padding: .9rem; }
.bs-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-mini::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.75)); }
.bs-mini b { position: relative; z-index: 1; font-size: .95rem; }
.bs-mini .tt-play { width: 44px; height: 44px; }

/* profiles */
.profile-pub { display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: center; }
.profile-pub h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.about { font-size: 1.1rem; color: var(--ink-2); margin: 1rem 0; font-style: italic; }
.team-pill { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .4rem .8rem .4rem .4rem; border-radius: 999px; background: #fff; box-shadow: var(--sh); text-decoration: none; font-weight: 700; }
.team-pill .sw { width: 30px; height: 30px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 800 .85rem var(--display); }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.mini-badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--bg-2); border-radius: 999px; padding: .35rem .75rem; font-size: .85rem; font-weight: 600; }
.follow-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.follow-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--bg-2); border-radius: 999px; padding: .3rem .9rem .3rem .3rem; text-decoration: none; font-weight: 600; }
.follow-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.mc-paw { display: grid; place-items: center; width: 46px; height: 46px; color: var(--ink); }
.lb-link { text-decoration: none; display: inline-flex; align-items: center; gap: .1rem; }
.lb-link:hover { text-decoration: underline; }
.lb-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; margin-right: .5rem; }

/* team page */
.team-hero { background: linear-gradient(135deg, var(--team), color-mix(in srgb, var(--team) 55%, var(--ink))); color: #fff; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.team-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: .4rem 0 .3rem; }
.team-hero p { opacity: .9; margin-bottom: 1.2rem; }
.team-place { display: inline-block; margin-top: 1rem; background: rgba(255,255,255,.2); padding: .3rem .8rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.crumb.light { color: rgba(255,255,255,.85); }
.colony-link { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; align-items: center; text-decoration: none; padding: .7rem; }
.colony-link img { width: 110px; height: 90px; border-radius: 12px; object-fit: cover; }
.colony-link b { display: block; font-size: 1.1rem; }

/* toggles */
.toggles { display: grid; gap: .4rem; }
.toggle { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: .92rem; padding: .35rem 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-ui { width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.sw-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.toggle input:checked + .sw-ui { background: var(--sea); }
.toggle input:checked + .sw-ui::after { transform: translateX(16px); }
.toggle input:focus-visible + .sw-ui { outline: 3px solid var(--sea); outline-offset: 2px; }
.toggle svg { color: var(--mute); width: 18px; height: 18px; }

@media (max-width: 920px) {
  .bs-strip { grid-template-columns: 1fr 1fr; }
  .bs-strip .letter-card { grid-column: 1 / -1; }
  .profile-pub { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .replay { grid-template-columns: 90px 1fr; }
  .replay .chev { display: none; }
  .letter-card { grid-template-columns: auto 1fr; }
  .letter-card > svg { display: none; }
  .locked-cta { top: 40px; }
}
@media (max-width: 380px) {
  .top .wrap { gap: .35rem; }
  .top .right { gap: .35rem; }
  .logo { font-size: 1.12rem; gap: .4rem; }
  .logo img { height: 32px; }
  .pts { padding: .3rem .6rem .3rem .3rem; gap: .3rem; }
}

/* ================= v4.7 — languages ================= */
.lang-wrap { position: relative; }
.lang-btn { width: auto; padding: 0 .6rem; gap: .3rem; display: inline-flex; font: 700 .78rem var(--body); background: #fff; box-shadow: var(--sh); border-radius: 999px; }
.lang-btn svg { width: 16px; height: 16px; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 14px; box-shadow: var(--sh-lg); padding: .35rem; display: none; min-width: 160px; z-index: 80; }
.lang-menu.open { display: grid; }
.lang-menu button { display: flex; gap: .6rem; align-items: center; border: 0; background: none; padding: .6rem .7rem; border-radius: 10px; cursor: pointer; font: 500 .92rem var(--body); text-align: left; }
.lang-menu button b { width: 26px; font-size: .75rem; color: var(--mute); }
.lang-menu button:hover { background: var(--bg-2); }
.lang-menu button.on { background: var(--mint); font-weight: 700; }
.sheet-langs { display: flex; gap: .4rem; padding: .5rem 0 .8rem; flex-wrap: wrap; }
.sheet-langs button { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .45rem .8rem; font: 600 .85rem var(--body); cursor: pointer; }
.sheet-langs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 640px) { .lang-wrap { display: none; } }
.bingo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bingo button { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }

/* treats for the volunteers — sea tones, so it never reads as the cats' donation */
.treats { background: var(--mint); box-shadow: none; }
.treats h3 { margin: .4rem 0 0; }
.treats .kicker { color: var(--sea-d); }
.treat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.2rem; }
.treat { display: grid; gap: .15rem; justify-items: start; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 14px; padding: .9rem 1rem; cursor: pointer; font: inherit; color: var(--ink); }
.treat:hover { border-color: var(--sea); }
.treat.on { border-color: var(--sea-d); box-shadow: 0 0 0 3px rgba(19, 138, 138, .15); }
.treat svg { width: 20px; height: 20px; color: var(--sea-d); }
.treat b { font: 800 1.5rem/1.1 var(--display); }
.treat span { font-weight: 600; font-size: .92rem; }
.treat small { color: var(--mute); font-size: .8rem; }
.treat-input { display: flex; align-items: center; gap: .2rem; font: 800 1.4rem var(--display); }
.treat-input input { border: 0; border-bottom: 2px solid var(--line); font: inherit; width: 100%; min-width: 0; outline: none; background: none; color: var(--ink); padding: 0; }
.treat-input input:focus { border-color: var(--sea-d); }
.treat-go { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.1rem; }
.treat-go .btn { background: var(--sea-d); }
.treat-go .btn:hover { background: var(--ink); }
.treat-go a { color: var(--sea-d); font-weight: 600; }
@media (max-width: 720px) { .treat-row { grid-template-columns: 1fr 1fr; } }
.daily-line { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .6rem 0 0; font-weight: 600; color: var(--sea-d); } .daily-line svg { width: 16px; height: 16px; }

/* thank-you wall */
.thx-opt { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; padding: .8rem 1rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; background: #fff; }
.thx-opt input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--coral); flex: none; }
.thx-opt span { display: grid; gap: .15rem; }
.thx-opt small { color: var(--mute); font-size: .82rem; }
.thx-opt:has(input:checked) { border-color: var(--coral); background: var(--peach); }
.thx-join { margin: 0 0 1rem; padding: .8rem 1rem; background: var(--peach); border-radius: 14px; }

/* membership: email, code, account */
.check-row { display: flex !important; flex-direction: row !important; gap: .6rem; align-items: flex-start; font-weight: 400 !important; font-size: .9rem; color: var(--ink-2); }
.check-row input { width: 20px; height: 20px; margin: .15rem 0 0; flex: none; accent-color: var(--coral); }
.code-step { display: grid; gap: .8rem; max-width: 560px; }
.code-step h2 { margin: 0; }
.code-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.code-row input { flex: 1 1 200px; font-size: 1.2rem; padding: .75rem 1rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.code-row input#codeIn { letter-spacing: .4em; font-weight: 700; text-align: center; max-width: 240px; }
.code-row input:focus { outline: none; border-color: var(--coral); }
.form-err { color: #b3261e; font-weight: 600; margin: 0; }
.account-box { margin-top: 1rem; padding: .9rem 1rem; background: var(--bg-2); border-radius: 14px; }
.account-box p { margin: 0 0 .6rem; display: flex; gap: .45rem; align-items: flex-start; }
.account-box svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; }
.danger-text { color: #b3261e !important; }

/* ---------- Thank-you wall: a hand-pinned scrapbook timeline ---------- */
.thx-wall { --hand: "Caveat", "Segoe Print", cursive; --paper: #fbf5ea; --pink-paper: #f9dcd8; --wall: #efe3cf; --doodle: #3b2a1f;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%233b2a1f' opacity='.07'%3E%3Cg transform='translate(40 50) rotate(-18)'%3E%3Cellipse cx='0' cy='8' rx='9' ry='7.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.6'/%3E%3Ccircle cx='-3' cy='-9' r='3.6'/%3E%3Ccircle cx='4' cy='-9' r='3.6'/%3E%3Ccircle cx='10' cy='-3' r='3.6'/%3E%3C/g%3E%3Cg transform='translate(160 150) rotate(22)'%3E%3Cellipse cx='0' cy='8' rx='9' ry='7.5'/%3E%3Ccircle cx='-9' cy='-4' r='3.6'/%3E%3Ccircle cx='-3' cy='-9' r='3.6'/%3E%3Ccircle cx='4' cy='-9' r='3.6'/%3E%3Ccircle cx='10' cy='-3' r='3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat, radial-gradient(120% 60% at 80% 0%, #f7ecd9 0%, transparent 60%), radial-gradient(80% 50% at 0% 40%, #e9d9bf 0%, transparent 70%), var(--wall);
  padding-bottom: 3rem; min-height: 100vh; }
.thx-top { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
.thx-top .wrap { display: grid; justify-items: start; gap: 1rem; }
.thx-title { position: relative; background: var(--paper); padding: .6rem 1.6rem 1rem; transform: rotate(var(--tilt, -1deg)); box-shadow: 0 10px 24px -14px rgba(59, 42, 31, .45); clip-path: polygon(0 3%, 4% 0, 30% 2%, 60% 0, 96% 2%, 100% 6%, 99% 60%, 100% 97%, 70% 100%, 35% 98%, 3% 100%, 0 70%); }
.thx-title h1 { font: 700 clamp(3.2rem, 9vw, 5.6rem)/1 var(--hand); letter-spacing: 0; color: var(--doodle); }
.thx-title p { display: inline-block; margin: .2rem 0 0 1.5rem; padding: .2rem .8rem; background: var(--pink-paper); font: 600 clamp(1.3rem, 3vw, 1.7rem) var(--hand); color: var(--doodle); transform: rotate(-2deg); }
.thx-lead { max-width: 60ch; margin: .4rem 0 0; font-size: 1.05rem; color: var(--ink-2); }
.thx-timeline { position: relative; padding-left: 2.2rem; }
.thx-timeline::before { content: ""; position: absolute; left: .55rem; top: .6rem; bottom: 0; border-left: 3px dashed rgba(59, 42, 31, .25); }
.thx-day { position: relative; margin: 0 0 2.4rem; padding: 0; }
.thx-day-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
.thx-day-head h2 { font: 700 clamp(1.8rem, 4vw, 2.3rem)/1 var(--hand); letter-spacing: 0; color: var(--doodle); }
.thx-dot { position: absolute; left: -2.2rem; top: .45rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--paper); border: 3px solid var(--coral); }
.is-today .thx-dot { background: var(--coral); box-shadow: 0 0 0 6px rgba(255, 111, 89, .18); }
.thx-day-count { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.thx-note { margin: 0; padding: .9rem 1.1rem; max-width: 520px; background: var(--paper); font: 600 1.35rem var(--hand); color: var(--doodle); transform: rotate(-.6deg); box-shadow: 0 8px 18px -12px rgba(59, 42, 31, .4); }
.thx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-flow: dense; gap: 1.4rem 1.2rem; align-items: start; }
.thx-card { position: relative; background: var(--paper); padding: 1rem 1.1rem 1.1rem; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 10px 22px -14px rgba(59, 42, 31, .5); transition: transform .2s; }
.thx-card:hover { transform: rotate(0deg) scale(1.02); z-index: 2; }
.thx-card::before { content: ""; position: absolute; top: -.6rem; left: 1.2rem; width: 4.2rem; height: 1.2rem; background: var(--tape); opacity: .85; transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.thx-person { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; min-height: 92px; clip-path: polygon(0 2%, 50% 0, 100% 3%, 99% 50%, 100% 98%, 50% 100%, 1% 97%, 0 50%); }
.thx-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 700 1.6rem var(--hand); color: var(--doodle); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(59, 42, 31, .2); flex: none; }
img.thx-av { object-fit: cover; }
.thx-av.sm { width: 34px; height: 34px; font-size: 1.1rem; border-width: 2px; }
.thx-av.h0 { background: var(--peach); } .thx-av.h1 { background: var(--mint); } .thx-av.h2 { background: var(--lilac); }
.thx-av.h3 { background: var(--sky); } .thx-av.h4 { background: #fff1c9; } .thx-av.h5 { background: var(--bg-2); }
.thx-body { display: grid; gap: .2rem; min-width: 0; padding-right: 1.2rem; }
.thx-name { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--doodle); }
.thx-name b { font: 700 1.55rem/1.05 var(--hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.thx-name { text-decoration: none; } a.thx-name:hover b { text-decoration: underline; }
.thx-for { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--ink-2); }
.thx-for svg { width: 14px; height: 14px; color: var(--coral); }
.thx-card q { font: 600 1.15rem/1.2 var(--hand); color: var(--doodle); quotes: "“" "”"; }
.thx-heart { position: absolute; right: .7rem; bottom: .6rem; width: 22px; height: 22px; fill: none; stroke: var(--doodle); stroke-width: 1.8; stroke-linejoin: round; opacity: .75; }
.thx-src { position: absolute; top: .45rem; right: .6rem; font: 700 .68rem var(--body); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); background: rgba(255, 255, 255, .7); padding: .15em .5em; border-radius: 99px; }
.thx-src.monthly { top: auto; bottom: .6rem; right: 2.2rem; background: var(--mint); }
.thx-photo { grid-column: span 2; grid-row: span 2; padding: .8rem .8rem 1rem; background: #fffdf8; }
.thx-photo::before { left: 50%; margin-left: -2.5rem; width: 5rem; }
.thx-photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.thx-photo img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.thx-photo figcaption { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem 2rem 0 .2rem; font: 600 1.3rem/1.2 var(--hand); color: var(--doodle); }
.thx-photo figcaption .thx-name b { font-size: 1.35rem; }
.thx-gift { background: var(--pink-paper); text-align: center; display: grid; justify-items: center; gap: .5rem; padding: 1.2rem 1rem 1.3rem; }
.thx-gift-name { display: inline-flex; align-items: center; gap: .4rem; font: 700 1.6rem/1.1 var(--hand); color: var(--doodle); }
.thx-gift-name svg { width: 22px; height: 22px; color: var(--coral); }
.thx-gift-who { display: flex; align-items: center; gap: .45rem; } .thx-gift-who .thx-name b { font-size: 1.3rem; }
.thx-anon { background: var(--mint); display: grid; gap: .15rem; text-align: center; justify-items: center; padding: 1.1rem 1rem 1.3rem; }
.thx-anon b { font: 700 1.6rem var(--hand); color: var(--doodle); } .thx-anon span:not(.thx-anon-paw) { font-size: .85rem; color: var(--ink-2); }
.thx-anon-paw { font-size: 1.6rem; }
.thx-monthly { position: relative; margin: 0 0 2.4rem; padding: 1.1rem 1.3rem 1.3rem; background: var(--paper); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 10px 22px -14px rgba(59, 42, 31, .5); }
.thx-monthly::before { content: ""; position: absolute; top: -.6rem; left: 50%; width: 5rem; margin-left: -2.5rem; height: 1.2rem; background: var(--tape); opacity: .85; }
.thx-monthly h2 { display: flex; align-items: center; gap: .5rem; font: 700 1.9rem var(--hand); letter-spacing: 0; color: var(--doodle); margin: 0 0 .7rem; }
.thx-monthly h2 svg { width: 22px; height: 22px; color: var(--coral); }
.thx-monthly-list { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.thx-mini { display: inline-flex; align-items: center; gap: .45rem; font: 700 1.25rem var(--hand); color: var(--doodle); } .thx-mini .thx-name b { font-size: 1.3rem; }
.thx-more { display: flex; justify-content: center; margin: -1rem 0 1rem; }
.thx-empty { background: var(--paper); }
.thx-how-wrap { padding: 1rem 0 0; }
.thx-how { position: relative; max-width: 760px; margin: 0 auto; padding: 1.3rem 1.5rem; background: var(--paper); transform: rotate(var(--tilt, 0deg)); box-shadow: 0 10px 22px -14px rgba(59, 42, 31, .5); }
.thx-how h3 { font: 700 1.8rem var(--hand); letter-spacing: 0; color: var(--doodle); margin: 0 0 .4rem; }
.thx-lightbox { border: 0; padding: .7rem; background: #fffdf8; max-width: min(96vw, 1200px); max-height: 94vh; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.thx-lightbox::backdrop { background: rgba(30, 20, 12, .7); }
.thx-lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 1.4rem); object-fit: contain; }
.thx-lightbox .iconbtn { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 640px) {
  .thx-timeline { padding-left: 1.6rem; } .thx-timeline::before { left: .3rem; } .thx-dot { left: -1.6rem; width: 1.05rem; height: 1.05rem; }
  .thx-board { grid-template-columns: 1fr; } .thx-photo { grid-column: auto; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .thx-card { transition: none; } .thx-card:hover { transform: rotate(var(--tilt, 0deg)); } }

/* ---------- a cat's fundraiser, naming vote and video ---------- */
.fund-card { margin: 1rem 0 0; padding: 1.1rem 1.2rem; border-radius: var(--r-sm); background: #fff; box-shadow: var(--sh); display: grid; gap: .6rem; }
.fund-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.fund-top b { font: 800 1.6rem var(--display); } .fund-top span { color: var(--ink-2); }
.fund-card p { margin: 0; color: var(--ink-2); }
.fund-card .btn { justify-self: start; }
.name-vote { margin-top: .8rem; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: var(--r-sm); background: var(--sun); color: var(--ink); text-decoration: none; }
.name-vote span { flex: 1; font-size: .95rem; } .name-vote b { display: block; font: 700 1.05rem var(--display); }
.name-vote svg { flex: none; }
.cat-clip { display: block; width: 100%; max-width: 380px; aspect-ratio: 9 / 16; border-radius: var(--r-sm); background: #000; object-fit: cover; box-shadow: var(--sh); }