/* Corkboard - a pinboard, not a feed. Posts are pinned cards on a dotted board,
   outlined in ink with solid offset shadows. Light by default, full dark mode. */
:root {
  --bg: #e7e5ee; --dots: #cbc6db; --surface: #ffffff; --surface-2: #f2f0f7; --ink: #17141f; --mist: #6c6779;
  --line: #e7e3ef; --edge: rgba(28, 20, 52, .11); --drop: 0 1px 2px rgba(28,20,52,.05), 0 14px 34px -18px rgba(28,20,52,.30);
  --drop-lg: 0 2px 4px rgba(28,20,52,.05), 0 28px 60px -24px rgba(28,20,52,.38); --drop-sm: 0 1px 2px rgba(28,20,52,.06), 0 6px 16px -10px rgba(28,20,52,.28);
  --shadow: var(--drop);
  --pin: #ff3d6e; --note-1: #fff0a3; --note-2: #cdf3dd; --tape: rgba(255,255,255,.55);
  --holo: linear-gradient(115deg, #ff7eb9, #9f8bff 40%, #4fd1ff 70%, #7ef0b0);
  --ua: #ff5fa2; --ub: #6a5cff; --user: linear-gradient(120deg, var(--ua), var(--ub));
  --danger: #d92d3a;
  --display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"], .page-midnight, .page-dark {
  --bg: #15131c; --dots: #2c2839; --surface: #211e2c; --surface-2: #2a2637; --ink: #f2effa; --mist: #a7a1b8;
  --line: #322d43; --edge: rgba(255, 255, 255, .09); --drop: 0 1px 2px rgba(0,0,0,.3), 0 16px 36px -18px rgba(0,0,0,.7);
  --drop-lg: 0 2px 4px rgba(0,0,0,.3), 0 30px 64px -24px rgba(0,0,0,.8); --drop-sm: 0 1px 2px rgba(0,0,0,.3), 0 8px 18px -10px rgba(0,0,0,.6);
  --note-1: #4a4226; --note-2: #1f4433; --tape: rgba(255,255,255,.18);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 15px/1.5 var(--body); min-height: 100vh;
  background-color: var(--bg); background-image: radial-gradient(var(--dots) 1.3px, transparent 1.4px); background-size: 22px 22px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.05; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--pin); outline-offset: 2px; border-radius: 8px; }
.sub, .muted { color: var(--mist); font-size: .86rem; }
.muted { font-size: .95rem; }
.center { text-align: center; }
.fine { color: var(--mist); font-size: .8rem; }
.holo-text { color: var(--ink); }
.ic { flex: none; display: block; }
.who { font-weight: 700; }
.inline { display: inline; margin: 0; }

/* ---------- frame: top bar + dock ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; }
.brand-pin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff 0 14%, transparent 16%), var(--pin);
  border: 1px solid var(--edge); box-shadow: var(--drop-sm); }
.brand-word { font: 800 1.5rem/1 var(--display); letter-spacing: -.05em; }
.top-search { flex: 0 1 420px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--edge); color: var(--mist); }
.top-search input { border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; padding: 9px 0 !important; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-logout { margin: 0; }
.me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--edge); font-weight: 700; font-size: .88rem; text-decoration: none !important; max-width: 200px; }
.me-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-spacer { flex: 1; }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: none; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.main { max-width: 1240px; margin: 0 auto; padding: 18px 24px 130px; min-width: 0; }
.dock { position: fixed; z-index: 40; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px;
  padding: 7px; border-radius: 22px; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--drop); }
.dock a { position: relative; display: grid; justify-items: center; gap: 1px; min-width: 70px; padding: 6px 10px; border-radius: 15px;
  font-size: .72rem; font-weight: 700; color: var(--mist); text-decoration: none !important; }
.dock a:hover { color: var(--ink); background: var(--surface-2); }
.dock a.here { color: var(--ink); background: var(--surface-2); }
.dock a.here::after { content: ""; position: absolute; top: 3px; right: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--pin); }
.dock .dock-create { background: var(--ink); color: var(--surface); margin: 0 6px; border-radius: 16px; padding: 8px 16px; }
.dock .dock-create:hover, .dock .dock-create.here { background: var(--ink); color: var(--surface); transform: translateY(-1px); }
.dock .dock-create.here::after { display: none; }
.badge { position: absolute; top: -2px; right: 10px; font-style: normal; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--pin); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--surface); }
.toast { background: var(--note-1); border: 1px solid var(--edge); box-shadow: var(--drop); border-radius: 14px; padding: 12px 16px;
  margin: 0 auto 22px; max-width: 620px; font-weight: 500; transform: rotate(-.4deg); }

/* ---------- buttons, inputs, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border-radius: 12px; padding: 9px 18px;
  font-weight: 800; font-size: .92rem; color: var(--surface); background: var(--ink); border: 1px solid var(--edge);
  box-shadow: var(--drop-sm); text-decoration: none !important; white-space: nowrap; transition: transform .08s, box-shadow .08s; }
:root[data-theme="dark"] .btn:not(.quiet), .page-midnight .btn:not(.quiet), .page-dark .btn:not(.quiet) { background: var(--ink); color: #15131c; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--drop-sm); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--drop-sm); }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.sm { padding: 5px 12px; font-size: .82rem; box-shadow: var(--drop-sm); }
.btn.big { padding: 12px 24px; font-size: 1rem; }
.btn.wide { width: 100%; }
.profile .btn:not(.quiet), .composer .btn, .story-tools .btn { background: var(--user); color: #fff; }
.ghost-btn { background: none; border: 0; cursor: pointer; color: var(--mist); padding: 6px; border-radius: 10px; display: grid; place-items: center; }
.ghost-btn:hover { color: var(--ink); background: var(--surface-2); }
.ghost-link { margin-left: auto; font-weight: 700; font-size: .85rem; }
label { display: block; font-weight: 700; font-size: .86rem; margin-bottom: 14px; }
input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]), textarea, select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface-2); color: var(--ink); font: 500 .97rem var(--body); }
input:focus, textarea:focus { outline: none; border-color: var(--edge); background: var(--surface); }
input[type=file] { display: block; margin-top: 6px; font: 500 .85rem var(--body); color: var(--mist); max-width: 100%; }
input[type=color] { display: block; width: 100%; height: 44px; margin-top: 6px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 4px; cursor: pointer; }
textarea { resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--edge); font-weight: 700; font-size: .85rem; text-decoration: none !important; }
.chip:hover { background: var(--surface-2); }
.chip small { color: var(--mist); }
.pill { display: inline-block; padding: 0 8px; border-radius: 6px; background: var(--note-2); color: var(--ink); font-size: .78rem; font-weight: 800; border: 1px solid var(--edge); }
.card { background: var(--surface); border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--drop); }
.empty { padding: 36px 24px; }
.empty p + p { margin-top: 16px; }
.section-h, .strip-h { font-size: 1.25rem; margin: 30px 0 14px; display: flex; gap: 8px; align-items: center; }
.page-head { margin: 10px 0 22px; }
.page-head h1, .page-title { font-size: clamp(2rem, 5vw, 3rem); margin: 10px 0 18px; letter-spacing: -.04em; }
.narrow-page { max-width: 640px; margin: 0 auto; }
.person-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none !important; }
.person-row > div { min-width: 0; display: grid; line-height: 1.25; }
.person-row .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row form, .person-row > .btn { margin-left: auto; }

/* ---------- pins, tape, avatars ---------- */
.pin { position: absolute; top: -9px; left: 50%; z-index: 3; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 16%, transparent 18%), linear-gradient(135deg, var(--ua), var(--ub));
  border: 1px solid var(--edge); box-shadow: 2px 3px 0 rgba(0,0,0,.25); }
.tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; transform: rotate(-3deg);
  background: var(--tape); border: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(2px); }
.av-wrap { --s: 40px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; }
.av { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--edge);
  background: linear-gradient(135deg, var(--ua), var(--ub)); color: #fff; font: 800 calc(var(--s) * .42)/1 var(--display); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.shape-squircle { border-radius: 28%; }
.ring-holo .av, .ring-gradient .av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--s) * .04) var(--ua); }
.ring-holo .av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 calc(2px + var(--s) * .04) #9f8bff; }

/* ---------- home: today strip, spotlight, board ---------- */
.today-strip { display: flex; gap: 14px; overflow-x: auto; padding: 12px 6px 16px; scrollbar-width: thin; }
.story-tile { position: relative; flex: none; width: 112px; aspect-ratio: 9/14; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; text-decoration: none !important; color: #fff; border: 1px solid var(--edge); box-shadow: var(--drop-sm);
  background: linear-gradient(160deg, var(--t1, #6a5cff), var(--t2, #00d4ff)); transition: transform .12s; }
.story-tile:nth-child(odd) { transform: rotate(-1.2deg); }
.story-tile:nth-child(even) { transform: rotate(1deg); }
.story-tile:hover { transform: rotate(0) translateY(-3px); }
.story-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.6)); }
.story-text { position: absolute; inset: 0; padding: 46px 10px 30px; font: 800 .92rem/1.15 var(--display); overflow: hidden; }
.story-who { position: absolute; top: 8px; left: 8px; z-index: 1; }
.story-name { position: relative; z-index: 1; padding: 8px 9px; font-weight: 800; font-size: .78rem; line-height: 1.15; }
.story-name small { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border-radius: 6px; background: rgba(255,255,255,.3); font-size: .68rem; }
.story-tile.seen { filter: saturate(.55); opacity: .82; }
.story-tile.unseen::after { content: ""; position: absolute; top: 9px; right: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--pin); border: 2px solid #fff; z-index: 1; }
.story-tile.add { background: var(--surface); color: var(--ink); border-style: dashed; box-shadow: none; justify-content: center; align-items: center; text-align: center; gap: 6px; }
.story-tile.add::before { display: none; }
.story-face { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--surface); margin: 0 auto; }
.spot-row { display: flex; gap: 26px; overflow-x: auto; padding: 18px 10px 22px; scroll-snap-type: x proximity; }
.spot { position: relative; flex: none; width: 200px; padding: 10px 10px 12px; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--drop); text-decoration: none !important; scroll-snap-align: start; transition: transform .12s; }
.spot:nth-child(odd) { transform: rotate(-2deg); }
.spot:nth-child(even) { transform: rotate(1.6deg) translateY(8px); }
.spot:hover { transform: rotate(0) translateY(-4px); }
.spot-media { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--surface-2); position: relative; }
.spot-media img { width: 100%; height: 100%; object-fit: cover; }
.spot-thought { position: absolute; inset: 0; display: flex; align-items: center; padding: 14px; color: #fff; font: 800 1rem/1.2 var(--display); background: linear-gradient(140deg, var(--t1), var(--t2)); }
.spot-meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: .84rem; }
.spot-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-meta small { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--mist); font-weight: 700; }
.board { columns: 3 300px; column-gap: 26px; margin-top: 14px; }
.board > * { break-inside: avoid; margin: 12px 0 22px; display: inline-block; width: 100%; position: relative; }
.board > :nth-child(4n+1) { transform: rotate(-.6deg); }
.board > :nth-child(4n+2) { transform: rotate(.5deg); }
.board > :nth-child(4n+3) { transform: rotate(.15deg); }
.board > :nth-child(4n) { transform: rotate(-.3deg); }
.note { padding: 22px 18px 16px; border: 1px solid var(--edge); border-radius: 6px 6px 18px 6px; box-shadow: var(--drop); background: var(--note-1); }
.note-tags { background: var(--note-2); }
.note h3 { font-size: 1.2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.note .chip { background: transparent; }
.note p + p { margin-top: 12px; }

/* ---------- post card ---------- */
.post { padding: 0 0 4px; position: relative; }
.post.card { border-radius: 16px; }
.frame { margin: 10px 10px 0; border-radius: 9px; overflow: hidden; border: 1px solid var(--edge); }
.post-media { position: relative; user-select: none; -webkit-user-select: none; }
.burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: #fff; opacity: 0; transform: scale(.4); }
.burst .ic { fill: var(--pin); stroke: var(--edge); filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35)); }
.burst.go { animation: burst .9s ease-out; }
@keyframes burst { 15% { opacity: 1; transform: scale(1.1) rotate(-8deg); } 30% { transform: scale(.95) rotate(4deg); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.carousel { position: relative; background: var(--surface-2); }
.carousel .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel img { flex: 0 0 100%; width: 100%; scroll-snap-align: center; object-fit: cover; }
.aspect-square img { aspect-ratio: 1; }
.aspect-portrait img { aspect-ratio: 4/5; }
.aspect-original img { max-height: 760px; object-fit: contain; background: #000; }
.dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.3); }
.dots i.on { background: #fff; }
.thought { aspect-ratio: 1; display: grid; place-items: center; padding: 11%; background: linear-gradient(140deg, var(--t1), var(--t2)); color: #fff; position: relative; overflow: hidden; }
.thought p { font: 800 clamp(1.25rem, 3vw, 1.9rem)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; position: relative; overflow-wrap: anywhere; }
.thought p::before { content: "\201C"; display: block; font-size: 2.6em; line-height: .6; margin-bottom: 6px; opacity: .55; }
.thought a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }
.bg-paper { color: #17141f !important; }
.capsule { aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; color: #fff; padding: 24px;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 12px, transparent 12px 24px), linear-gradient(140deg, var(--ua), var(--ub)); }
.board .capsule, .feed .capsule { aspect-ratio: 4/3; }
.capsule b { font: 800 1.5rem var(--display); }
.capsule time { font-variant-numeric: tabular-nums; font-weight: 800; background: rgba(0,0,0,.25); padding: 2px 8px; border-radius: 6px; }
.actions { display: flex; align-items: center; gap: 0; padding: 6px 8px 0; }
.actions form { margin: 0; }
.actions .push { margin-left: auto; }
.actions .count { font-size: .88rem; min-width: 14px; margin-right: 6px; }
.act { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; cursor: pointer; }
.act:hover { background: var(--surface-2); }
.act.like.on .ic { fill: var(--pin); stroke: var(--pin); }
.act.like.on { animation: pop .35s ease-out; }
.act.save.on .ic { fill: currentColor; }
@keyframes pop { 50% { transform: scale(1.3) rotate(-10deg); } }
.likes, .caption, .comment, .more-comments { padding: 0 16px; font-size: .93rem; }
.likes { margin: 2px 0 6px; }
.caption { margin: 2px 0 6px; white-space: pre-line; overflow-wrap: anywhere; }
.comment { margin-bottom: 4px; overflow-wrap: anywhere; color: var(--mist); }
.comment .who { color: var(--ink); }
.more-comments { display: block; color: var(--mist); margin-bottom: 4px; }
.tag, .mention { font-weight: 700; text-decoration: underline; text-decoration-color: var(--pin); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.post-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px 8px; border-top: 2px dashed var(--line); }
.post-foot .meta, .post-head .meta { display: grid; min-width: 0; line-height: 1.2; }
.post-foot .sub { font-size: .78rem; }
.post-foot > :last-child { margin-left: auto; }
.post-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.post-head > :last-child { margin-left: auto; }
.feed { display: grid; gap: 24px; }
.feed.narrow { max-width: 560px; margin: 0 auto; }
.quick-comment { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; border-top: 2px dashed var(--line); padding-top: 10px; }
.quick-comment input { margin: 0 !important; background: none !important; border: 0 !important; padding: 6px 0 !important; box-shadow: none !important; }
.quick-comment button { background: none; border: 0; font-weight: 800; cursor: pointer; }

/* ---------- tiles & board grids ---------- */
.board-grid, .grid { columns: 3 220px; column-gap: 22px; display: block; }
.tile { position: relative; display: inline-block; width: 100%; break-inside: avoid; margin: 10px 0 16px; padding: 8px 8px 10px; background: var(--surface); border: 1px solid var(--edge);
  border-radius: 12px; box-shadow: var(--drop); text-decoration: none !important; color: #fff; transition: transform .12s; }
.grid > .tile:nth-child(3n+1) { transform: rotate(-1deg); }
.grid > .tile:nth-child(3n+2) { transform: rotate(.8deg); }
.grid > .tile:nth-child(3n) { transform: rotate(-.3deg); }
.grid > .tile:hover { transform: rotate(0) translateY(-3px); }
.tile .pin { top: -8px; width: 15px; height: 15px; margin-left: -7.5px; }
.tile-inner { position: relative; display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.tile-portrait .tile-inner { aspect-ratio: 4/5; }
.tile-rounded .tile-inner { border-radius: 14px; }
.tile-inner > img { width: 100%; height: 100%; object-fit: cover; }
.tile-thought { position: absolute; inset: 0; display: flex; align-items: center; padding: 12%; background: linear-gradient(140deg, var(--t1), var(--t2));
  font: 800 clamp(.85rem, 1.6vw, 1.1rem)/1.2 var(--display); overflow-wrap: anywhere; color: #fff; }
.tile-lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px;
  background: repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 10px, transparent 10px 20px), linear-gradient(140deg, var(--ua), var(--ub)); }
.tile-multi { position: absolute; top: 8px; right: 8px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.tile-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 800;
  background: rgba(15,12,25,.45); opacity: 0; transition: opacity .15s; }
.tile-over .ic { fill: #fff; }
.tile:hover .tile-over, .tile:focus-visible .tile-over { opacity: 1; }

/* ---------- explore & tags ---------- */
.explore { max-width: 1100px; margin: 0 auto; }
.searchbar { display: flex; align-items: center; gap: 10px; padding: 2px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--edge);
  box-shadow: var(--drop); margin-bottom: 18px; color: var(--mist); max-width: 640px; }
.searchbar input { border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; font-size: 1.05rem !important; }
.results { margin-bottom: 16px; display: grid; gap: 4px; max-width: 640px; }

/* ---------- landing ---------- */
.landing { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; max-width: 1120px; margin: 20px auto 50px; }
.landing h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: .95; letter-spacing: -.055em; margin-bottom: 22px; font-weight: 800; }
.landing-copy > p { font-size: 1.12rem; color: var(--mist); max-width: 48ch; }
.landing-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 !important; }
.landing-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.landing-points li { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.landing-wall { columns: 3; column-gap: 18px; }
.landing-wall .tile:nth-child(odd) { transform: rotate(-2.5deg); }
.landing-wall .tile:nth-child(even) { transform: rotate(2deg) translateY(14px); }
.landing-people { max-width: 1120px; margin: 0 auto; }
.landing-people h2 { font-size: 1.3rem; margin-bottom: 14px; }
.people-strip { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 10px; }
.people-strip a { display: grid; justify-items: center; gap: 6px; font-size: .85rem; font-weight: 700; flex: none; width: 84px; text-align: center; }

/* ---------- profile ---------- */
.page-holo::before, .page-wash::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.page-holo::before { background: var(--holo); opacity: .2; }
.page-wash::before { background: radial-gradient(70vmax 50vmax at 0% 0%, var(--ua), transparent 60%), radial-gradient(70vmax 50vmax at 100% 100%, var(--ub), transparent 60%); opacity: .2; }
.profile { max-width: 1100px; margin: 0 auto; }
.poster { position: relative; border: 1px solid var(--edge); border-radius: 26px; box-shadow: var(--drop-lg); background: var(--surface); overflow: hidden; margin-top: 6px; }
.poster-bg { height: 210px; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px), linear-gradient(120deg, var(--ua), var(--ub));
  border-bottom: 1px solid var(--edge); }
.poster-bg img { width: 100%; height: 100%; object-fit: cover; }
.poster-body { display: grid; grid-template-columns: auto 1fr; gap: 30px; padding: 0 32px 28px; align-items: end; }
.prof-avatar { position: relative; margin-top: -96px; transform: rotate(-3deg); }
.prof-avatar .pin { top: -10px; }
.photo-card { display: block; padding: 10px 10px 30px; background: var(--surface); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--drop); text-decoration: none !important; position: relative; }
.photo-card .av-wrap { --s: 150px !important; border-radius: 6px; }
.photo-card .av { border-radius: 6px; border-width: 2px; box-shadow: none !important; }
.today-tag { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%) rotate(2deg); background: var(--pin); color: #fff; font-weight: 800; font-size: .74rem;
  padding: 1px 8px; border-radius: 6px; border: 1px solid var(--edge); white-space: nowrap; }
.prof-id { padding-top: 18px; min-width: 0; }
.prof-name { font: 800 clamp(2.4rem, 6.2vw, 4.4rem)/.95 var(--namefont, var(--display)), var(--display); letter-spacing: -.045em; overflow-wrap: anywhere;
  background: linear-gradient(120deg, var(--ua), var(--ub)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.handle { color: var(--mist); margin-top: 6px; font-weight: 500; }
.status { font-size: 1.15rem; font-weight: 500; margin-top: 10px; max-width: 60ch; }
.prof-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.prof-actions form { margin: 0; }
.prof-info { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start; margin: 26px 4px 0; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(2, auto); gap: 10px; padding: 0; margin: 0; }
.stats li { background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; padding: 8px 14px; box-shadow: var(--drop-sm); font-size: .86rem; }
.stats li:nth-child(odd) { transform: rotate(-1deg); }
.stats li:nth-child(even) { transform: rotate(.8deg); }
.stats b { display: block; font: 800 1.4rem/1 var(--display); }
.stats a { text-decoration: none !important; }
.prof-about { display: grid; gap: 10px; max-width: 640px; padding-top: 4px; }
.bio { white-space: pre-line; font-size: 1.02rem; }
.ext { font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.pinned { margin-top: 10px; }
.pinned-card { display: grid; grid-template-columns: 170px 1fr; gap: 0; border-radius: 16px; overflow: hidden; background: var(--note-1); border: 1px solid var(--edge);
  box-shadow: var(--drop); text-decoration: none !important; min-height: 150px; max-width: 760px; transform: rotate(-.5deg); }
.pinned-card > img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-right: 1px solid var(--edge); }
.pinned-card > .tile-thought { position: relative; border-right: 1px solid var(--edge); }
.pinned-cap { padding: 16px 18px; display: grid; align-content: space-between; gap: 10px; font-weight: 500; }
.pinned-cap small { color: var(--mist); display: inline-flex; gap: 4px; align-items: center; font-weight: 700; }
.tabs { display: flex; gap: 10px; margin: 34px 0 26px; overflow-x: auto; padding: 4px 4px 8px; }
.tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-weight: 800; font-size: .88rem; color: var(--ink); border-radius: 12px;
  text-decoration: none !important; white-space: nowrap; background: var(--surface); border: 1px solid var(--edge); }
.tabs a:hover { background: var(--surface-2); }
.tabs a.on { background: var(--ink); color: var(--surface); box-shadow: 3px 3px 0 var(--ua); }
.guestbook { max-width: 680px; margin: 0 auto; display: grid; gap: 18px; }
.gb-form { padding: 18px; }
.gb-entry { display: flex; gap: 12px; padding: 16px; align-items: flex-start; background: var(--note-1); border-radius: 6px 6px 16px 6px; }
.gb-entry:nth-child(even) { background: var(--note-2); transform: rotate(.6deg); }
.gb-entry:nth-child(odd) { transform: rotate(-.5deg); }
.gb-entry > div { flex: 1; min-width: 0; }
.gb-entry p { overflow-wrap: anywhere; margin-top: 4px; font-size: 1.02rem; }

/* photo filters */
/* photo filters */
.f-prism { filter: saturate(1.35) contrast(1.08) hue-rotate(-8deg); }
.f-dusk { filter: sepia(.25) saturate(1.3) hue-rotate(-15deg) brightness(.95); }
.f-mono { filter: grayscale(1) contrast(1.15); }
.f-bloom { filter: brightness(1.08) saturate(1.15) contrast(.92); }
.f-neon { filter: saturate(1.8) contrast(1.2) hue-rotate(15deg); }
.f-film { filter: sepia(.35) contrast(1.1) brightness(.98) saturate(.9); }
.f-frost { filter: saturate(.75) brightness(1.08) hue-rotate(185deg) sepia(.12); }

/* ---------- post detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); overflow: hidden; max-width: 1000px; margin: 0 auto; }
.detail-media { background: #000; display: grid; align-items: center; }
.detail-media .thought, .detail-media .capsule { aspect-ratio: auto; height: 100%; min-height: 420px; }
.detail-side { display: flex; flex-direction: column; min-height: 0; max-height: 760px; padding-bottom: 14px; }
.detail-side .post-head { border-bottom: 1px solid var(--line); }
.detail-scroll { flex: 1; overflow-y: auto; padding: 14px 0; display: grid; align-content: start; gap: 8px; }
.detail-scroll > .muted, .detail-scroll > .sub { padding: 0 16px; }
.comment-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding-right: 8px; }
.comment-row form { margin: 0; }
.detail .actions { border-top: 1px solid var(--line); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 10px; font-weight: 800; letter-spacing: 1px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--surface-2); }
.menu-pop { position: absolute; right: 0; top: 100%; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 6px; min-width: 200px; }
.menu-pop form { margin: 0; }
.menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; font-weight: 500; }
.menu-pop button:hover { background: var(--surface-2); }
.danger { color: var(--danger) !important; }

/* ---------- composer ---------- */
.composer { max-width: 980px; margin: 0 auto; padding: 22px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin: 0 0 18px; border: 0; }
.seg label { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow); }
.seg.small { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 14px; background: none; border-radius: 0; }
.seg.small legend { padding: 0; font-weight: 700; font-size: .86rem; margin-bottom: 8px; }
.seg.small label { padding: 7px 14px; font-size: .86rem; border: 1.5px solid var(--line); }
.seg.small label:has(input:checked) { border-color: var(--ink); background: var(--surface-2); box-shadow: none; }
.composer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; }
.composer.is-thought .photo-only, .composer:not(.is-thought) .thought-only { display: none; }
.drop { display: grid; margin: 0; aspect-ratio: 1; border-radius: 20px; border: 2px dashed var(--line); background: var(--surface-2); cursor: pointer; overflow: hidden; position: relative; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty { place-self: center; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 20px; color: var(--mist); font-weight: 500; }
.drop-empty b { color: var(--ink); }
.drop.has-files { border-style: solid; }
.drop.has-files .drop-empty { display: none; }
.drop-preview { display: none; }
.drop.has-files .drop-preview { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.drop-preview img { flex: 0 0 100%; object-fit: cover; scroll-snap-align: center; pointer-events: none; }
.filters { display: flex; gap: 10px; overflow-x: auto; padding: 14px 2px 4px; }
.filter-pick { display: grid; justify-items: center; gap: 5px; margin: 0; cursor: pointer; font-weight: 500; }
.filter-pick input { position: absolute; opacity: 0; }
.swatch { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, #ffb26b, #ff6b9a 45%, #6ba8ff); background-size: cover; background-position: center; }
.filter-pick:has(input:checked) .swatch { outline: 3px solid #7c6cff; outline-offset: 2px; }
.filter-pick:has(input:focus-visible) .swatch { outline: 3px solid #7c6cff; }
.bg-picks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.bg-picks label { display: grid; justify-items: center; gap: 4px; margin: 0; cursor: pointer; font-weight: 500; }
.bg-picks input { position: absolute; opacity: 0; }
.bg-picks span { width: 46px; height: 46px; border-radius: 50%; }
.bg-picks label:has(input:checked) span { outline: 3px solid var(--ink); outline-offset: 2px; }
.capsule-opt { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.capsule-opt summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.capsule-opt p { margin: 8px 0 10px; }
.capsule-opt label { margin: 0; }

/* ---------- profile studio ---------- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; max-width: 1060px; margin: 0 auto; align-items: start; }
.studio-form h1 { font-size: 2.2rem; margin-bottom: 18px; }
.studio-form .card { padding: 20px 22px 8px; margin-bottom: 16px; }
.studio-form h2 { font-size: 1.1rem; margin-bottom: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.checks .check { margin-bottom: 10px; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.preset { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font-weight: 700; font-size: .86rem; }
.preset i { width: 26px; height: 26px; border-radius: 50%; }
.opts { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.opts legend { font-weight: 700; font-size: .86rem; margin-bottom: 8px; padding: 0; }
.opt { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 500; }
.opt input { position: absolute; opacity: 0; }
.opt:has(input:checked) { border-color: var(--ink); background: var(--surface-2); font-weight: 700; }
.opt:has(input:focus-visible) { outline: 2.5px solid #7c6cff; }
.fonts .opt span { font-size: 1.15rem; font-weight: 800; }
.opt-bg { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--line); background: var(--bg); position: relative; overflow: hidden; }
.opt-bg.page-pearl { background: #f4f5fa; }
.opt-bg.page-holo { background: var(--holo); }
.opt-bg.page-wash { background: linear-gradient(135deg, var(--ua), var(--ub)); opacity: .6; }
.opt-bg.page-midnight { background: #0c0d13; }
.opt-bg::before { display: none; }
.studio-save { display: flex; gap: 10px; position: sticky; bottom: 16px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.studio-preview { position: sticky; top: 28px; }
.studio-preview > .sub { margin-bottom: 8px; }
.pv { border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--bg); color: var(--ink); box-shadow: var(--shadow); padding-bottom: 16px; text-align: center; position: relative; isolation: isolate; }
.pv.page-holo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--holo); opacity: .25; }
.pv.page-wash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--ua), var(--ub)); opacity: .18; }
.pv-banner { height: 104px; background: linear-gradient(120deg, var(--ua), var(--ub)); }
.pv-banner img { width: 100%; height: 100%; object-fit: cover; }
.pv-av { margin-top: -42px; display: flex; justify-content: center; }
.pv-av .av-wrap { box-shadow: 0 0 0 4px var(--bg); border-radius: 50%; }
.pv-av .shape-squircle { border-radius: 30%; }
.pv-name { font: 800 1.9rem/1.05 var(--namefont, var(--display)), var(--display); margin: 10px 14px 4px; letter-spacing: -.03em; overflow-wrap: anywhere;
  background: linear-gradient(120deg, var(--ua), var(--ub)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-status { padding: 0 16px; }
.pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 16px 12px 0; }
.pv-grid span { aspect-ratio: 1; background: linear-gradient(135deg, var(--ua), var(--ub)); opacity: .55; }
.pv-grid span:nth-child(2n) { opacity: .3; }
.pv-grid.grid-portrait span { aspect-ratio: 4/5; }
.pv-grid.grid-rounded { gap: 6px; }
.pv-grid.grid-rounded span { border-radius: 10px; }

/* ---------- stories ---------- */
.story-maker { display: grid; grid-template-columns: 360px minmax(0, 420px); gap: 28px; justify-content: center; align-items: start; }
.story-canvas { aspect-ratio: 9/16; border-radius: 28px; overflow: hidden; position: relative; display: grid; place-items: center; background: linear-gradient(160deg, var(--t1), var(--t2)); color: #fff; box-shadow: var(--shadow); }
.story-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-canvas p { position: relative; font: 800 1.6rem/1.15 var(--display); text-align: center; padding: 24px; text-shadow: 0 2px 16px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.story-tools { padding: 22px; }
.story-tools h1 { font-size: 1.8rem; margin-bottom: 6px; }
.story-tools > .muted { margin-bottom: 18px; }
.story-tools .btn { margin-top: 20px; }
.story-mode { background: #08080d; color: #fff; }
.viewer { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.viewer-frame { position: relative; width: min(420px, 100%); aspect-ratio: 9/16; max-height: calc(100vh - 32px); border-radius: 26px; overflow: hidden; background: #111; }
.bars { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.bars b { display: block; height: 100%; width: 0; background: #fff; }
.bars i.done b { width: 100%; }
.viewer-head { position: absolute; top: 20px; left: 12px; right: 8px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.viewer-head a:first-child { display: flex; align-items: center; gap: 8px; color: #fff; }
.viewer-head .sub { color: rgba(255,255,255,.75); }
.viewer-head .icon-btn { margin-left: auto; color: #fff; }
.slide { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--t1), var(--t2)); }
.slide[hidden] { display: none; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide p { position: relative; font: 800 1.7rem/1.15 var(--display); text-align: center; padding: 28px; overflow-wrap: anywhere; }
.slide p.over { align-self: end; margin-bottom: 90px; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.slide-del { position: absolute; right: 10px; bottom: 70px; z-index: 4; margin: 0; }
.slide-del .icon-btn { color: #fff; background: rgba(0,0,0,.35); }
.tap { position: absolute; top: 70px; bottom: 70px; width: 40%; background: none; border: 0; z-index: 2; cursor: pointer; }
.tap.prev { left: 0; }
.tap.next { right: 0; width: 60%; }
.viewer-reply, .viewer-seen { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.viewer-seen { color: rgba(255,255,255,.85); font-size: .85rem; }
.viewer-reply input { margin: 0 !important; background: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.5) !important; color: #fff !important; border-radius: 999px !important; }
.viewer-reply input::placeholder { color: rgba(255,255,255,.75); }
.viewer-reply .icon-btn { color: #fff; }

/* ---------- activity ---------- */
.list { padding: 6px 16px; }
.notif { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif p { flex: 1; min-width: 0; }
.notif.new p::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b6b; margin-left: 6px; vertical-align: middle; }
.note-thumb { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; }
.note-thumb img, .note-thumb span { display: block; width: 100%; height: 100%; object-fit: cover; }
.notif form { margin-left: auto; }

/* ---------- messages ---------- */
.dm { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; height: calc(100vh - 64px - 130px); min-height: 520px; }
.dm-list { padding: 16px 10px; display: flex; flex-direction: column; min-height: 0; }
.dm-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px; }
.dm-list h1 { font-size: 1.6rem; }
.new-dm { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ink); color: var(--surface);
  border: 1px solid var(--edge); box-shadow: 3px 3px 0 var(--pin); text-decoration: none !important; transition: transform .08s; }
.new-dm:hover { transform: translate(-1px, -1px) rotate(90deg); }
.new-dm.on { background: var(--pin); }
.dm-filter { margin: 0 4px 8px !important; width: calc(100% - 8px) !important; padding: 8px 12px !important; }
.dm-items { overflow-y: auto; flex: 1; }
.dm-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; text-decoration: none !important; position: relative; }
.dm-item:hover, .dm-item.on { background: var(--surface-2); }
.dm-item.on { box-shadow: inset 3px 0 0 var(--pin); }
.dm-item > span { display: grid; min-width: 0; }
.dm-item small { color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-item small.unread { color: var(--ink); font-weight: 800; }
.dm-item .badge { position: static; margin-left: auto; }
.dm-none { padding: 20px 10px; display: grid; gap: 12px; justify-items: start; }
.dm-thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; position: relative; }
.dm-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.dm-head > div { display: grid; }
.dm-head .back { display: none; font-size: 1.8rem; line-height: 1; padding: 0 6px; text-decoration: none; }
.pinned-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; border: 0; border-bottom: 2px dashed var(--line);
  background: color-mix(in srgb, var(--surface) 70%, var(--note-1)); cursor: pointer; text-align: left; font-weight: 600; font-size: .88rem; }
.pinned-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-bar[hidden] { display: none; }
.dm-body { flex: 1; overflow-y: auto; padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 4px; }
.day { align-self: center; font-size: .74rem; font-weight: 800; color: var(--mist); background: var(--surface-2); padding: 2px 10px; border-radius: 8px; margin: 10px 0 6px; }
.msg { position: relative; max-width: min(74%, 460px); align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 2px; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); border: 1px solid var(--edge); overflow-wrap: anywhere;
  white-space: pre-line; cursor: pointer; max-width: 100%; }
.msg.mine .bubble { border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--surface); }
.msg.media .bubble { padding: 5px; background: var(--surface); color: var(--ink); }
.msg.k-sticker .bubble, .msg.k-gif .bubble { background: transparent; border: 0; padding: 0; }
.msg.is-pinned .bubble { box-shadow: 3px 3px 0 var(--pin); }
.msg.flash .bubble { animation: flash 1.2s; }
@keyframes flash { 30% { transform: scale(1.04); box-shadow: 0 0 0 4px var(--pin); } }
.unsent { font-style: italic; opacity: .7; }
.dm-img { max-width: 280px; max-height: 320px; border-radius: 13px; object-fit: cover; }
.dm-gif { width: 160px; height: 160px; border-radius: 16px; object-fit: cover; }
.msg audio { width: 240px; height: 40px; display: block; }
.dm-file { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; text-decoration: none !important; min-width: 220px; }
.dm-file-ic { display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; border: 1px solid var(--edge); background: var(--note-2);
  font: 800 .7rem var(--display); color: var(--ink); flex: none; }
.dm-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.dm-file small { color: var(--mist); font-weight: 700; }
.dm-loc { width: 260px; border-radius: 13px; overflow: hidden; }
.dm-loc iframe { display: block; width: 100%; height: 150px; border: 0; border-bottom: 1px solid var(--edge); }
.dm-loc-pin { height: 110px; display: grid; place-items: center; border-bottom: 1px solid var(--edge);
  background: radial-gradient(var(--dots) 1.3px, transparent 1.4px) 0 0 / 14px 14px, #d9a46c; }
.dm-loc-pin i { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--pin); border: 1px solid var(--edge); box-shadow: 3px 3px 0 rgba(0,0,0,.3); }
.dm-loc-cap { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; }
.dm-loc-cap a { font-weight: 800; font-size: .82rem; }
.quote { display: block; max-width: 100%; font-size: .78rem; color: var(--mist); padding: 3px 10px; margin-bottom: -6px; border-left: 3px solid var(--pin);
  background: var(--surface); border-radius: 8px 8px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; }
.reacts-row { display: flex; gap: 3px; margin-top: -8px; position: relative; z-index: 1; padding: 0 8px; }
.reacts-row .r { border: 1px solid var(--edge); background: var(--surface); border-radius: 999px; padding: 0 7px; font-size: .82rem; cursor: pointer; }
.reacts-row .r.me { background: var(--note-1); }
.meta { font-size: .7rem; color: var(--mist); margin: 2px 6px 6px; font-weight: 600; }
.msg-actions { display: none; position: absolute; bottom: calc(100% - 4px); z-index: 5; background: var(--surface); border: 1px solid var(--edge); border-radius: 14px;
  box-shadow: var(--drop); padding: 4px; gap: 2px; flex-wrap: wrap; width: max-content; max-width: 320px; }
.msg.mine .msg-actions { right: 0; }
.msg.actions-below .msg-actions { bottom: auto; top: calc(100% - 22px); }
.msg.show-actions .msg-actions { display: flex; }
.msg-actions button { border: 0; background: none; padding: 5px 8px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: .84rem; }
.msg-actions button:hover { background: var(--surface-2); }
.msg-actions [data-react] { font-size: 1.1rem; padding: 4px 5px; }
.reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px; border-top: 2px dashed var(--line); font-size: .85rem; }
.reply-bar[hidden] { display: none; }
.reply-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray { border-top: 1px solid var(--edge); background: var(--surface); max-height: 300px; display: flex; flex-direction: column; }
.tray[hidden] { display: none; }
.tray-tabs { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; }
.tray-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge); background: var(--surface); border-radius: 10px;
  padding: 5px 11px; font-weight: 800; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.tray-tabs button.on { background: var(--ink); color: var(--surface); }
.tray-panel { padding: 10px 12px 12px; overflow-y: auto; }
.tray-panel[hidden] { display: none; }
.emoji-cat { font-size: .74rem; font-weight: 800; color: var(--mist); margin: 6px 2px 2px; }
.emoji-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.emoji-row button { border: 0; background: none; font-size: 1.45rem; padding: 4px; border-radius: 8px; cursor: pointer; }
.emoji-row button:hover { background: var(--surface-2); transform: scale(1.15); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 10px; }
.sticker { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 14px; }
.sticker img { width: 100%; aspect-ratio: 1; border-radius: 14px; }
.sticker:hover { transform: rotate(-3deg) scale(1.04); }
.file-pick { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px dashed var(--edge); border-radius: 12px; cursor: pointer; font-weight: 800; }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.file-pick.big { display: grid; justify-items: start; gap: 4px; padding: 16px; }
.file-pick.big small { font-weight: 500; color: var(--mist); }
.place-form { display: flex; gap: 8px; align-items: end; margin-top: 14px; }
.place-form label { flex: 1; margin: 0; }
.dm-send { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--edge); }
.dm-send textarea { margin: 0 !important; border-radius: 16px !important; resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; }
.tray-toggle, .mic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--edge);
  background: var(--surface); cursor: pointer; font-size: 1.15rem; transition: transform .15s; }
.tray-toggle .ic { transition: transform .15s; }
.tray-toggle.open { background: var(--ink); color: var(--surface); }
.tray-toggle.open .ic { transform: rotate(45deg); }
.mic.rec { width: auto; padding: 0 12px; background: var(--pin); color: #fff; font-size: .85rem; font-weight: 800; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pin) 30%, transparent); } }
.dm-send .send { height: 44px; }
.dm-blank { margin: auto; display: grid; justify-items: center; gap: 12px; color: var(--mist); }
.dm-empty { margin: auto; }
.dm-new { padding: 16px 18px; overflow-y: auto; }
.to-field { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.to-field input { margin: 0 !important; }
.people-results { display: grid; gap: 2px; margin: 8px 0 14px; }
.dm-new .person-row { padding: 8px; border-radius: 12px; }
.dm-new .person-row:hover { background: var(--surface-2); }
.dm-new .person-row > .btn { margin-left: auto; }
.dm-new-h { margin: 12px 8px 4px; font-weight: 800; }

/* ---------- auth ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { position: relative; overflow: hidden; background: #0c0d13; }
.holo-blob { position: absolute; inset: -20%; background: conic-gradient(from 0deg, #ff9ad5, #b69cff, #7ce7ff, #b6ffd1, #ffe29a, #ff9ad5); filter: blur(60px); opacity: .85; animation: drift 18s linear infinite; }
@keyframes drift { to { transform: rotate(1turn); } }
.auth { align-self: center; justify-self: center; width: min(420px, calc(100% - 32px)); padding: 30px; }
.auth .brand { padding: 0 0 18px; }
.auth h1 { font-size: 2rem; margin-bottom: 20px; }
.auth form { margin-bottom: 16px; }
.auth .toast { margin-bottom: 14px; }


/* ---------- info boards ---------- */
.info-board { position: relative; display: block; background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--drop);
  overflow: visible; text-decoration: none !important; color: var(--ink); }
.info-board > img { width: calc(100% - 20px); margin: 10px 10px 0; aspect-ratio: 16/10; object-fit: cover; border-radius: 9px; border: 1px solid var(--edge); background: var(--surface-2); }
.info-body { padding: 14px 16px 16px; display: grid; gap: 8px; justify-items: start; }
.info-body h3 { font-size: 1.2rem; }
.info-body p { color: var(--mist); font-size: .92rem; }
.info-board.tone-a { background: color-mix(in srgb, var(--surface) 82%, var(--note-1)); }
.info-board.tone-b { background: color-mix(in srgb, var(--surface) 80%, var(--note-2)); }
.info-board.tone-c { background: color-mix(in srgb, var(--surface) 84%, #d9d2ff); }
:root[data-theme="dark"] .info-board.tone-c { background: color-mix(in srgb, var(--surface) 84%, #3a2f6b); }
.tack { position: absolute; top: -10px; left: 22px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--edge);
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.85) 0 16%, transparent 18%), var(--pin); box-shadow: 2px 3px 0 rgba(0,0,0,.25); }
.kicker { font-weight: 800; font-size: .78rem; color: var(--mist); }
.info-col { display: grid; gap: 28px; align-content: start; }
.info-col > .info-board:nth-child(odd) { transform: rotate(-.8deg); }
.info-col > .info-board:nth-child(even) { transform: rotate(.6deg); }
.facts-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.facts-list li { border: 1px solid var(--edge); border-radius: 10px; padding: 5px 10px; background: var(--surface); font-size: .82rem; }
.facts-list b { font: 800 1.1rem var(--display); margin-right: 3px; }
.owner-tools summary { cursor: pointer; font-weight: 800; padding: 14px 16px; }
.owner-tools form { padding: 0 16px 16px; }

/* ---------- strings ---------- */
.string-line { display: block; width: 100%; height: 70px; overflow: visible; }
.string-line path { fill: none; stroke: #e8203f; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.strings-head { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.strings-head .string-line { position: absolute; left: 0; right: 0; top: -12px; height: 60px; opacity: .55; pointer-events: none; }
.strings-head .page-title { margin-bottom: 6px; }
.lede { font-size: 1.1rem; color: var(--mist); max-width: 54ch; }
.cat-chips { margin: -4px 0 6px; }
.chip.on { background: var(--ink); color: var(--surface); }
.strings-layout, .string-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.string-layout .board { columns: 2 280px; }
.string-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px 22px; padding-top: 8px; }
.string-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--edge); border-radius: 16px;
  box-shadow: var(--drop); text-decoration: none !important; color: var(--ink); transition: transform .12s; }
.string-grid > .string-card:nth-child(3n+1) { transform: rotate(-.8deg); }
.string-grid > .string-card:nth-child(3n+2) { transform: rotate(.6deg); }
.string-card:hover { transform: rotate(0) translateY(-3px) !important; }
.info-col > .string-card { margin-top: -10px; }
.string-cover { position: relative; display: block; margin: 9px 9px 0; aspect-ratio: 16/9; border-radius: 9px; overflow: hidden; border: 1px solid var(--edge);
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 12px, transparent 12px 24px), linear-gradient(120deg, var(--sa), var(--sb)); }
.string-cover img { width: 100%; height: 100%; object-fit: cover; }
.string-cover .cat, .string-cover .tied { position: absolute; top: 8px; left: 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 8px; padding: 1px 8px; font-size: .74rem; font-weight: 800; }
.string-cover .tied { left: auto; right: 8px; background: var(--pin); color: #fff; }
.string-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.string-body b { font: 800 1.15rem/1.15 var(--display); letter-spacing: -.02em; }
.string-body .about { color: var(--mist); font-size: .88rem; }
.string-meta { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--mist); margin-top: 6px; }
.faces { display: inline-flex; }
.faces .av-wrap { margin-right: -7px; }
.faces .av-wrap:last-child { margin-right: 4px; }
.string-poster .poster-bg { height: 230px; position: relative; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px), linear-gradient(120deg, var(--sa), var(--sb)); }
.string-poster .string-line.over { position: absolute; left: 0; right: 0; top: 120px; height: 100px; z-index: 2; pointer-events: none; }
.string-body-head { grid-template-columns: 1fr auto; padding-top: 22px; position: relative; z-index: 3; }
.crumb { font-weight: 800; font-size: .86rem; color: var(--mist); margin-bottom: 8px; }
.crumb a { display: inline-flex; align-items: center; gap: 5px; }
.tied-faces { display: flex; align-items: center; flex-wrap: wrap; max-width: 300px; justify-content: flex-end; padding-bottom: 4px; }
.tied-faces a { margin-left: -10px; }
.tied-faces .sub { width: 100%; text-align: right; margin-top: 6px; font-weight: 700; }
.string-layout { margin-top: 34px; }
.in-string { position: absolute; top: 16px; left: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 36px);
  padding: 2px 9px; border-radius: 8px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font-size: .74rem; font-weight: 800;
  text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--drop-sm); }
.in-string .ic { color: #e8203f; }
.string-page .in-string { display: none; }
.note-strings { background: color-mix(in srgb, var(--note-1) 60%, #ffd9e6); }
:root[data-theme="dark"] .note-strings { background: #4a2a37; }
.string-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none !important; }
.string-row i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--sa), var(--sb)); border: 1px solid var(--edge); flex: none; }
.string-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.string-row small { margin-left: auto; color: var(--mist); font-weight: 700; }
.note-strings .sub { display: inline-block; margin-top: 6px; font-weight: 700; }
.string-new { display: grid; grid-template-columns: minmax(0, 620px) 320px; gap: 40px; justify-content: center; align-items: start; }
.string-form { padding: 24px 26px; }
.string-card.preview { transform: rotate(-1deg); }

/* ---------- tooltips & hints ---------- */
.tip { position: fixed; z-index: 200; max-width: 260px; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: var(--surface);
  font: 600 .8rem/1.35 var(--body); box-shadow: 3px 3px 0 var(--pin); pointer-events: none; animation: tip-in .12s ease-out; }
.tip::after { content: ""; position: absolute; left: var(--arrow, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.tip.below::after { bottom: auto; top: -5px; }
.tip[hidden] { display: none; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } }
.tip-dot { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; vertical-align: middle; border-radius: 50%;
  border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font: 800 .72rem/1 var(--body); cursor: help; flex: none; letter-spacing: 0; }
.tip-dot:hover, .tip-dot:focus-visible { background: var(--note-1); }
h1 .tip-dot { width: 24px; height: 24px; font-size: .85rem; vertical-align: super; }
.help-btn { font: 800 1.05rem/1 var(--display); text-decoration: none !important; border: 1px solid var(--edge); width: 34px; height: 34px; border-radius: 50%; }
.dm-help { padding: 6px 16px 0; text-align: center; }

/* ---------- welcome tour ---------- */
body.touring { overflow: hidden; }
.tour { position: fixed; inset: 0; z-index: 150; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(15, 12, 25, .62); outline: 3px dashed #fff; outline-offset: 2px;
  transition: all .25s ease; pointer-events: none; }
.tour-hole[hidden] { display: block; top: 50%; left: 50%; width: 0; height: 0; outline: 0; }
.tour-card { position: fixed; z-index: 151; background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--drop-lg);
  padding: 24px 22px 18px; transition: top .25s ease, left .25s ease; transform: rotate(-.6deg); }
.tour-card.center { top: 50%; left: 50%; width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -50%) rotate(-.6deg); padding: 30px 28px 22px; }
.tour-card .pin { top: -10px; --ua: #ff3d6e; --ub: #ff7eb9; }
.tour-card h2 { font-size: 1.35rem; margin-bottom: 8px; }
.tour-card.center h2 { font-size: 1.7rem; }
.tour-text { color: var(--mist); font-size: .95rem; }
.tour-count { font-size: .76rem; font-weight: 800; color: var(--mist); margin-bottom: 4px; }
.tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tour-skip { margin-left: auto; background: none; border: 0; color: var(--mist); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover { color: var(--ink); }
.tour-never { margin: 14px 0 0; font-size: .85rem; color: var(--mist); }

/* ---------- share card & confirm box ---------- */
body.sheet-open { overflow: hidden; }
.sheet-wrap { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 16px;
  background: rgba(15, 12, 25, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .16s ease-out; }
.sheet-wrap.closing { animation: fade .16s ease-in reverse forwards; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--edge); border-radius: 22px; box-shadow: var(--drop-lg); padding: 26px 22px 22px; transform: rotate(-.5deg);
  animation: drop-in .22s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes drop-in { from { transform: translateY(-14px) rotate(-2deg); opacity: 0; } }
.sheet .pin { top: -10px; --ua: #ff3d6e; --ub: #ff7eb9; }
.sheet h2 { font-size: 1.4rem; margin-bottom: 14px; }
.sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge); background: var(--surface);
  font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sheet-x:hover { background: var(--surface-2); }
.sheet-h { font: 800 .82rem var(--body); color: var(--mist); margin: 18px 0 8px; letter-spacing: 0; }
.share-preview { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--edge);
  border-radius: 14px; background: var(--note-1); transform: rotate(.6deg); }
.share-media { display: block; width: 76px; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--edge); background: var(--surface-2); }
.share-media img { width: 100%; height: 100%; object-fit: cover; }
.share-thought { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; font: 800 .62rem/1.15 var(--display); color: #fff; overflow: hidden;
  background: linear-gradient(140deg, var(--t1), var(--t2)); }
.share-cap { display: grid; gap: 2px; min-width: 0; }
.share-cap small { color: var(--mist); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-copy { display: flex; gap: 8px; margin-top: 16px; }
.share-copy input { margin: 0 !important; font-size: .86rem !important; color: var(--mist) !important; }
.share-copy .btn { flex: none; }
.share-copy .btn.done { background: #1f9d55 !important; color: #fff !important; }
.share-people { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; min-height: 40px; }
.share-person { position: relative; flex: none; display: grid; justify-items: center; gap: 5px; width: 72px; padding: 6px 2px; border: 0; background: none;
  border-radius: 12px; cursor: pointer; font: 700 .74rem var(--body); color: var(--ink); }
.share-person:hover { background: var(--surface-2); }
.share-person .nm { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-person i { position: absolute; top: 4px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: #1f9d55; color: #fff; font: 800 .7rem/20px var(--body);
  border: 2px solid var(--surface); opacity: 0; transform: scale(.5); transition: all .15s; font-style: normal; }
.share-person.sent i { opacity: 1; transform: scale(1); }
.share-person.sent .nm { color: #1f9d55; }
.share-person.sending { opacity: .5; }
.share-search { margin: 0 !important; padding: 8px 12px !important; font-size: .9rem !important; }
.share-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.share-app { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border-radius: 12px; border: 0; background: none; cursor: pointer;
  font: 700 .74rem var(--body); color: var(--ink); text-decoration: none !important; }
.share-app:hover { background: var(--surface-2); }
.share-app > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: #fff;
  border: 1px solid var(--edge); box-shadow: var(--drop-sm); font-size: 1.3rem; }
.sheet.confirm { width: min(380px, 100%); padding: 28px 22px 20px; }
.sheet.confirm p { font: 700 1.08rem/1.4 var(--display); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.danger-btn { background: var(--danger) !important; color: #fff !important; }
.dm-post { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; width: 260px; padding: 6px; text-decoration: none !important; color: var(--ink); }
.dm-post .pin { top: -12px; left: 46px; width: 14px; height: 14px; }
.dm-post-media { display: block; width: 84px; aspect-ratio: 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--edge); background: var(--surface-2); }
.dm-post-media img { width: 100%; height: 100%; object-fit: cover; }
.dm-post-media.thought { display: grid; place-items: center; padding: 6px; color: #fff; font: 800 .62rem/1.15 var(--display); background: linear-gradient(140deg, var(--t1), var(--t2)); }
.dm-post-media.lock { display: grid; place-items: center; text-align: center; font: 800 .7rem var(--body); color: #fff; background: linear-gradient(140deg, var(--ua), var(--ub)); }
.dm-post-cap { display: grid; gap: 2px; min-width: 0; }
.dm-post-cap small { color: var(--mist); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.msg.k-post .bubble { padding: 4px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .detail { grid-template-columns: 1fr; }
  .detail-side { max-height: none; }
  .studio { grid-template-columns: 1fr; }
  .studio-preview { position: static; order: -1; max-width: 340px; }
  .landing { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar { padding: 10px 14px; gap: 10px; }
  .top-search { display: none; }
  .me-chip { padding: 2px; }
  .me-name { display: none; }
  .help-btn { width: 32px; height: 32px; }
  .tour-card { transform: none; }
  .sheet-wrap { align-items: end; padding: 0; }
  .sheet { width: 100%; border-radius: 22px 22px 0 0; transform: none; max-height: 88vh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  @keyframes drop-in { from { transform: translateY(40px); opacity: 0; } }
  .main { padding: 10px 14px 120px; }
  .dock { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); transform: none; justify-content: space-between; }
  .dock a { min-width: 0; flex: 1; padding: 6px 4px; }
  .dock .dock-create { flex: 1.1; margin: 0 4px; }
  .board { columns: 1; }
  .board > * { transform: none !important; }
  .board-grid, .grid { columns: 2; column-gap: 12px; }
  .tile { padding: 5px 5px 7px; margin-bottom: 14px; border-radius: 10px; }
  .poster-bg { height: 140px; }
  .poster-body { grid-template-columns: 1fr; gap: 14px; padding: 0 18px 22px; }
  .prof-avatar { margin-top: -70px; width: max-content; }
  .photo-card { padding: 7px 7px 22px; }
  .photo-card .av-wrap { --s: 104px !important; }
  .prof-id { padding-top: 0; }
  .prof-actions > *, .prof-actions .btn { flex: 1; }
  .prof-actions form .btn { width: 100%; }
  .prof-info { grid-template-columns: 1fr; gap: 18px; }
  .stats { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .stats li { padding: 7px 8px; font-size: .74rem; }
  .stats b { font-size: 1.1rem; }
  .pinned-card { grid-template-columns: 110px 1fr; min-height: 110px; }
  .composer { padding: 16px; }
  .composer-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .story-maker { grid-template-columns: 1fr; }
  .story-canvas { max-width: 300px; justify-self: center; width: 100%; }
  .dm { grid-template-columns: 1fr; height: calc(100vh - 64px - 104px); min-height: 0; }
  .msg { max-width: 86%; }
  .file-picks { grid-template-columns: 1fr; }
  .dm-img { max-width: 220px; }
  .dm.has-thread .dm-list, .dm:not(.has-thread) .dm-thread { display: none; }
  .dm-head .back { display: block; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-art { position: fixed; inset: 0; z-index: -1; opacity: .5; }
  .landing-wall { columns: 2; }
  .spot { width: 160px; }
  .strings-layout, .string-layout, .string-new { grid-template-columns: 1fr; }
  .string-layout .board { columns: 1; }
  .string-body-head { grid-template-columns: 1fr; }
  .tied-faces { justify-content: flex-start; padding-left: 10px; }
  .tied-faces .sub { text-align: left; }
  .string-poster .poster-bg { height: 150px; }
  .string-poster .string-line.over { top: 60px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* caption counter (client session 8 Nov) */
.char-count { margin: -6px 0 10px; text-align: right; font-size: .8rem; }
.char-count.near { color: #e0565b; font-weight: 700; }

/* walks + guidelines (client session 2, 8 Nov) */
.walks-page, .guidelines { max-width: 980px; margin: 0 auto; }
.walks-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.walk-list { display: grid; gap: 16px; }
.walk { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 18px; align-items: start; }
.walk-date { display: grid; justify-items: center; padding: 10px 6px; border-radius: 14px; background: var(--note-1); border: 1px solid var(--edge); text-align: center; }
.wd-day { font-size: 2rem; line-height: 1; }
.wd-mon, .wd-time { font-size: .8rem; color: var(--mist); }
.walk h3 { margin: 2px 0 8px; font-size: 1.25rem; }
.walk-meta { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.walk-about { margin: 10px 0; white-space: pre-line; }
.walk-going { margin: 8px 0 0; }
.walk-actions { display: grid; gap: 8px; justify-items: end; }
.walk-past { padding-left: 18px; line-height: 1.9; }
.walk-foot { margin-top: 28px; }
.walk-form { max-width: 620px; margin: 0 auto; padding: 24px; display: grid; gap: 14px; }
.walk-form h1 { margin: 0; }
.walk-form label { display: grid; gap: 6px; font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 10px 0 24px; }
.guide-grid h2 { font-size: 1.1rem; margin: 0 0 8px; }
.guide-grid .note:nth-child(3n+2) { background: var(--note-2, var(--note-1)); transform: rotate(.6deg); }
.guide-grid .note:nth-child(3n) { transform: rotate(-.6deg); }
@media (max-width: 640px) {
  .walk { grid-template-columns: 72px minmax(0, 1fr); }
  .walk-actions { grid-column: 1 / -1; justify-items: stretch; }
}

/* walk pages, albums (client session 3, 8 Nov) */
.crumbs { margin: 6px 0 12px; }
.crumbs a { color: var(--mist); font-weight: 700; }
.walk-hero h1 { margin: 2px 0 10px; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.03em; }
.walk h3 a { color: inherit; text-decoration: none; }
.walk h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.walk-links { margin: 6px 0 0; font-size: .9rem; display: flex; gap: 6px; align-items: center; }
.walk-people { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.walk-people a { display: grid; justify-items: center; gap: 6px; width: 84px; text-align: center; font-size: .85rem; font-weight: 700; color: inherit; text-decoration: none; }
.walk-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }

/* maps, edit walk, message everyone (client session 4, 8 Nov) */
.walk-map { width: 100%; height: 300px; border: 0; border-radius: 14px; display: block; }
.walk-map.picker { height: 280px; border: 1px solid var(--edge); cursor: crosshair; }
.walk-map.overview { height: 320px; }
.pin-picker { display: grid; gap: 8px; }
.pin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pin-head .btn { margin-left: auto; }
.walk-mapcard, .walks-overview { padding: 10px; margin: 18px 0; }
.walk-map-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 10px 6px 4px; }
.walk-map-links a { font-weight: 700; }
.walk-msg { padding: 14px 18px; margin: 18px 0; }
.walk-msg summary { cursor: pointer; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.walk-msg form { display: grid; gap: 8px; margin-top: 12px; }
.walk-msg .btn { justify-self: start; }
.walk-form-actions { display: flex; gap: 10px; align-items: center; }
.walk-form-actions .wide { flex: 1; }
.leaflet-container { font: inherit; }

/* messages upgrade: edit, delete, effects, archive (session 5, 8 Nov) */
.dm-thread { position: relative; }
.dm-head .chat-menu { margin-left: auto; position: relative; }
.chat-menu > summary { list-style: none; cursor: pointer; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; }
.chat-menu > summary::-webkit-details-marker { display: none; }
.chat-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; min-width: 210px; display: grid; gap: 2px; }
.chat-menu-pop button { width: 100%; display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 9px 10px; border-radius: 10px;
  font: inherit; font-weight: 700; cursor: pointer; color: var(--ink); text-align: left; }
.chat-menu-pop button:hover { background: var(--surface-2); }
.chat-menu-pop .danger, .msg-actions .danger { color: #e0565b; }
.dm-archived-link { display: flex; gap: 6px; align-items: center; padding: 12px 10px 4px; font-weight: 700; font-size: .88rem; color: var(--mist); text-decoration: none; }
.dm-archived-link:hover { color: var(--ink); }
.edit-bar { background: color-mix(in srgb, var(--note-1) 55%, transparent); }
.dm-send.is-editing textarea { outline: 3px solid var(--note-1); }
.fx-toggle { flex: none; height: 44px; min-width: 44px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--edge); background: var(--surface);
  cursor: pointer; font: inherit; font-weight: 800; font-size: .82rem; display: flex; align-items: center; gap: 2px; color: var(--ink); }
.fx-toggle.on { background: var(--accent); color: #fff; border-color: transparent; }
.fx-picker { position: absolute; right: 14px; bottom: 70px; z-index: 25; padding: 10px; display: grid; gap: 4px; min-width: 200px; }
.fx-picker[hidden] { display: none; }
.fx-picker .sub { margin: 0 4px 4px; }
.fx-opt { border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; color: var(--ink); }
.fx-opt:hover, .fx-opt[aria-checked="true"] { background: var(--surface-2); }
.fx-opt.none { font-weight: 600; color: var(--mist); }
.fx-opt-slam { letter-spacing: .02em; text-transform: uppercase; }
.fx-opt-gentle { font-weight: 500; font-size: .85rem; }
.fx-opt-ink { filter: blur(.6px); }
.fx-opt-confetti { background: linear-gradient(90deg, #ff5fa2, #f9d423, #00d4ff) text; -webkit-background-clip: text; color: transparent; }
.fx-opt-hearts::after { content: " ❤️"; }
/* bubble effects */
.msg.fx-slam.fx-play .bubble { animation: fx-slam .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fx-slam { 0% { transform: scale(2.6) rotate(-6deg); opacity: 0; } 55% { transform: scale(.92) rotate(1deg); opacity: 1; } 75% { transform: scale(1.04); } 100% { transform: none; } }
.msg.fx-slam.fx-play { animation: fx-shake .35s .25s both; }
@keyframes fx-shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.msg.fx-gentle.fx-play .bubble { animation: fx-gentle 1.5s ease-out both; }
@keyframes fx-gentle { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(.7); opacity: 1; } 100% { transform: none; } }
.msg.fx-ink:not(.revealed) .bubble .txt { filter: blur(7px); user-select: none; }
.msg.fx-ink:not(.revealed) .bubble { position: relative; overflow: hidden; cursor: pointer;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.6px); background-size: 7px 7px; animation: fx-ink 1.2s linear infinite; }
@keyframes fx-ink { to { background-position: 7px 7px; } }
.ink-hint { display: block; font-size: .72rem; font-weight: 700; opacity: .75; margin-top: 2px; }
.msg.fx-ink .bubble .txt { transition: filter .5s ease; }
/* screen effects */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; border-radius: inherit; }
.fx-bit { position: absolute; top: -24px; display: block; animation-name: fx-fall; animation-timing-function: cubic-bezier(.3, .6, .5, 1); animation-fill-mode: both; }
.fx-bit.confetti { width: 9px; height: 14px; border-radius: 2px; }
.fx-bit.heart { font-size: 1.5rem; font-style: normal; top: auto; bottom: -30px; animation-name: fx-rise; }
@keyframes fx-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; } }
@keyframes fx-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -95vh) scale(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .msg.fx-play, .msg.fx-play .bubble { animation: none !important; }
  .msg.fx-ink:not(.revealed) .bubble { animation: none; }
}


/* ===== Hall of Fame (session 6) ===== */
.dock-fame .ic{color:#ffc93c}
.fame{position:relative;max-width:980px;margin:0 auto;padding:8px 16px 60px}
.fame-sparks{position:absolute;inset:0 0 auto 0;width:100%;height:520px;pointer-events:none;z-index:0}
.fame>*:not(.fame-sparks){position:relative;z-index:1}
.fame-hero{text-align:center;padding:28px 0 10px}
.fame-kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;opacity:.7;margin:0}
.fame-title{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;margin:.2em 0 .3em;font-weight:800}
.fame-title span{background:linear-gradient(90deg,#ffd54a,#ff7ab6,#7ad7ff,#ffd54a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fameShine 6s linear infinite}
@keyframes fameShine{to{background-position:300% 0}}
.fame-stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.fame-stats div{min-width:110px;padding:12px 16px;border-radius:18px;background:rgba(127,127,127,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.fame-stats b{display:block;font-size:1.8rem;font-variant-numeric:tabular-nums}
.fame-stats span{font-size:.8rem;opacity:.7}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:34px 0 10px}
.step{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(40px);animation:stepUp .7s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:var(--d)}
@keyframes stepUp{to{opacity:1;transform:none}}
.medal{font-size:2.4rem;animation:bob 2.6s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
.step-tile{width:100%;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.step-1 .step-tile{outline:3px solid #ffd54a;box-shadow:0 0 0 6px rgba(255,213,74,.2),0 0 40px rgba(255,213,74,.45)}
.step-who{font-weight:700;font-size:.92rem}
.step-score{font-size:.8rem;opacity:.75}
.step-block{width:100%;border-radius:14px 14px 4px 4px;display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#1b1030}
.step-1 .step-block{height:110px;background:linear-gradient(180deg,#ffe58a,#f0b400)}
.step-2 .step-block{height:78px;background:linear-gradient(180deg,#f2f4f8,#aab3c2)}
.step-3 .step-block{height:56px;background:linear-gradient(180deg,#ffc79a,#c9783c)}
.fame-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:22px}
.fame-card{padding:6px 18px 18px;border-radius:22px;background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.18)}
.section-h small{font-weight:400;opacity:.6;font-size:.75em;margin-left:6px}
.leader{list-style:none;margin:0;padding:0}
.leader li{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:14px;opacity:0;animation:stepUp .5s ease forwards;animation-delay:var(--d);transform:translateX(-16px)}
.leader li:hover{background:rgba(127,127,127,.12)}
.leader-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.leader-who div{display:flex;flex-direction:column;min-width:0}
.leader-who small,.leader-stat small{opacity:.6;font-size:.75rem}
.leader-stat{display:flex;flex-direction:column;align-items:flex-end;font-weight:700}
.rank{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:rgba(127,127,127,.18)}
.rank.r1{background:#ffd54a;color:#3a2800}.rank.r2{background:#d7dce5;color:#222}.rank.r3{background:#e09a62;color:#2a1405}
.fame-chip{opacity:0;animation:stepUp .4s ease forwards;animation-delay:var(--d)}
.faces{display:flex;flex-wrap:wrap;gap:14px}
.faces a{display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;text-decoration:none;width:64px;transition:transform .2s}
.faces a:hover{transform:translateY(-4px) scale(1.06)}
.faces small{font-size:.7rem;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fame-empty{text-align:center;margin:40px 0}
@media (max-width:720px){.fame-cols{grid-template-columns:1fr}.podium{gap:8px}.medal{font-size:1.8rem}.step-1 .step-block{height:80px}.step-2 .step-block{height:58px}.step-3 .step-block{height:40px}}
@media (prefers-reduced-motion:reduce){.step,.leader li,.fame-chip{animation:none;opacity:1;transform:none}.medal,.fame-title span{animation:none}}


/* ===== Personal theme + Photo Challenge (session 6) ===== */
.mytheme{--ua:#ff5fa2;--ub:#6a5cff;--nf:'Bricolage Grotesque'}
.mytheme .fame-title,.mytheme .chal-title{font-family:var(--nf),system-ui,sans-serif}
.mytheme .fame-title span{background-image:linear-gradient(90deg,var(--ua),var(--ub),#ffd54a,var(--ua))}
.mytheme .fame-stats div{border-color:color-mix(in srgb,var(--ua) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--ua) 16%,transparent),color-mix(in srgb,var(--ub) 16%,transparent))}
.mytheme .fame-card{background:linear-gradient(160deg,color-mix(in srgb,var(--ua) 9%,transparent),color-mix(in srgb,var(--ub) 9%,transparent))}
.chal{max-width:980px;margin:0 auto;padding:8px 16px 60px}
.chal-hero{position:relative;overflow:hidden;text-align:center;padding:40px 20px 30px;margin:10px 0 24px;border-radius:30px;color:#fff;background:linear-gradient(135deg,var(--ua),var(--ub));box-shadow:0 20px 50px color-mix(in srgb,var(--ub) 40%,transparent)}
.chal-hero>*{position:relative;z-index:1}
.chal-hero .fame-kicker{opacity:.85}
.chal-orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;z-index:0;animation:orb 9s ease-in-out infinite alternate}
.chal-orb.a{width:260px;height:260px;background:#ffd54a;top:-80px;left:-60px}
.chal-orb.b{width:300px;height:300px;background:#7ad7ff;bottom:-120px;right:-80px;animation-delay:-4s}
@keyframes orb{to{transform:translate(60px,30px) scale(1.2)}}
.chal-title{font-size:clamp(2.4rem,8vw,5rem);margin:.15em 0;line-height:1;text-shadow:0 6px 30px rgba(0,0,0,.25)}
.chal-blurb{font-size:1.1rem;opacity:.92;margin:0 0 18px}
.chal-clock{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.chal-clock div{width:78px;padding:10px 0;border-radius:16px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3)}
.chal-clock b{display:block;font-size:1.9rem;font-variant-numeric:tabular-nums}
.chal-clock span{font-size:.72rem;opacity:.85;text-transform:uppercase;letter-spacing:.1em}
.chal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.chal-go{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:#fff;color:#1b1030;font-weight:800;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:transform .2s}
.chal-go:hover{transform:translateY(-2px) scale(1.04)}
.chal-ghost{padding:12px 22px;border-radius:999px;border:2px solid rgba(255,255,255,.7);color:#fff;font-weight:700;text-decoration:none}
.chal-how{font-size:.88rem;opacity:.9;margin:16px 0 0}
.chal-entry{position:relative;opacity:0;animation:stepUp .5s ease forwards;animation-delay:var(--d);transform:translateY(20px)}
.chal-entry.lead{outline:3px solid #ffd54a;border-radius:18px;box-shadow:0 0 30px rgba(255,213,74,.5)}
.crown{position:absolute;z-index:3;top:-12px;left:50%;transform:translateX(-50%);background:#ffd54a;color:#3a2800;font-weight:800;font-size:.75rem;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chal-empty{text-align:center;padding:40px 16px;border-radius:24px;border:2px dashed color-mix(in srgb,var(--ua) 50%,transparent)}
.chal-empty .big{font-size:3rem;animation:bob 2.6s ease-in-out infinite}
.chal-empty .chal-go{background:linear-gradient(135deg,var(--ua),var(--ub));color:#fff}
.chal-next b{font-size:1.3rem;font-family:var(--nf),system-ui,sans-serif}
@media (max-width:560px){.chal-clock div{width:64px}.chal-clock b{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.chal-orb,.chal-empty .big{animation:none}.chal-entry{animation:none;opacity:1;transform:none}}

/* ===== Group chats + channels (session 6) ===== */
.dm-groups-link{display:flex;align-items:center;gap:10px;margin:4px 10px 10px;padding:10px 12px;border-radius:16px;text-decoration:none;color:inherit;background:linear-gradient(135deg,color-mix(in srgb,#ff5fa2 14%,transparent),color-mix(in srgb,#6a5cff 14%,transparent));border:1px solid rgba(127,127,127,.2);transition:transform .2s}
.dm-groups-link:hover{transform:translateY(-1px)}
.dm-groups-link span{display:flex;flex-direction:column}.dm-groups-link small{opacity:.65;font-size:.75rem}
.dgl-ico{font-size:1.5rem}.dgl-go{margin-left:auto;font-size:1.4rem;opacity:.5}
.gc{display:grid;grid-template-columns:320px 1fr;gap:16px;max-width:1100px;margin:0 auto;padding:8px 16px 100px;height:calc(100vh - 120px)}
.gc-list,.gc-main{overflow:auto;padding:10px;border-radius:22px}
.gc-main{display:flex;flex-direction:column;padding:0;overflow:hidden}
.gc-back{display:block;padding:4px 10px 10px;font-size:.85rem;opacity:.7;text-decoration:none;color:inherit}
.gc-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;text-decoration:none;color:inherit}
.gc-item:hover,.gc-item.on{background:rgba(127,127,127,.12)}
.gc-txt{display:flex;flex-direction:column;min-width:0;flex:1;color:inherit;text-decoration:none}
.gc-txt small{opacity:.65;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-txt small.unread{opacity:1;font-weight:700}
.gc-n{opacity:.5;font-size:.75rem}
.gc-badge{flex:none;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--ga,#ff5fa2),var(--gb,#6a5cff));box-shadow:0 4px 12px color-mix(in srgb,var(--gb,#6a5cff) 35%,transparent)}
.gc-badge.big{width:72px;height:72px;font-size:2.2rem;border-radius:22px}
.gc-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin:16px 10px 6px}
.gc-join{padding:6px 14px;border-radius:999px;border:0;font-weight:700;cursor:pointer;background:var(--accent);color:#fff}
.gc-none{padding:10px}
.gc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff;background:linear-gradient(135deg,var(--ga),var(--gb))}
.gc-head .back{color:#fff;font-size:1.6rem;text-decoration:none;display:none}
.gc-head .gc-badge{background:rgba(255,255,255,.22);box-shadow:none}
.gc-title{display:flex;flex-direction:column;flex:1;min-width:0}.gc-title small{opacity:.85;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-menu{position:relative}.gc-menu summary{list-style:none;cursor:pointer;padding:8px;border-radius:12px;background:rgba(255,255,255,.2)}
.gc-menu summary::-webkit-details-marker{display:none}
.gc-pop{position:absolute;right:0;top:44px;z-index:20;width:240px;padding:12px;border-radius:16px;background:var(--surface);color:var(--ink);border: 1px solid var(--edge);box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:6px}
.gc-pop a{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:.88rem}
.gc-pop em{font-style:normal;font-size:.7rem;padding:1px 6px;border-radius:6px;background:#ffd54a;color:#3a2800}
.gc-add{display:flex;gap:6px;margin-top:6px}.gc-add input{flex:1;min-width:0;padding:6px 8px;border-radius:10px;border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit}
.gc-add button,.gc-leave{padding:6px 10px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.gc-leave{width:100%;background:rgba(255,80,80,.15);color:#d33}
.gc-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.gm{display:flex;align-items:flex-end;gap:8px;max-width:78%}
.gm.mine{align-self:flex-end;flex-direction:row-reverse}
.gm-dot{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;background:linear-gradient(135deg,var(--ga),var(--gb))}
.gm.mine .gm-dot{display:none}
.gm-b{padding:8px 12px;border-radius:18px 18px 18px 6px;background:rgba(127,127,127,.14)}
.gm.mine .gm-b{border-radius:18px 18px 6px 18px;color:#fff;background:linear-gradient(135deg,var(--ua,#ff5fa2),var(--ub,#6a5cff))}
.gm-b small{display:block;font-weight:700;font-size:.72rem;opacity:.7}.gm-b p{margin:0;white-space:pre-wrap;word-break:break-word}
.gm.pop{animation:gmPop .35s cubic-bezier(.2,1.5,.4,1)}@keyframes gmPop{from{transform:scale(.6);opacity:0}}
.gc-send{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(127,127,127,.2)}
.gc-send input{flex:1;padding:12px 16px;border-radius:999px;border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;font:inherit}
.gc-send button{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:var(--accent)}
.gc-joinbar{justify-content:center}.gc-joinbar button{width:auto;height:auto;border-radius:999px}
.gc-ro{text-align:center;padding:14px}
.gc-new{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.gc-preview{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--ga),var(--gb))}
.gc-preview .gc-badge{background:rgba(255,255,255,.22)}.gc-preview b{font-size:1.4rem}.gc-preview small{opacity:.85}
.gc-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gc-kinds label{cursor:pointer}.gc-kinds input,.gc-emojis input{position:absolute;opacity:0}
.gc-kinds span{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:16px;border:2px solid rgba(127,127,127,.25);height:100%}
.gc-kinds small{opacity:.65;font-size:.78rem}
.gc-kinds input:checked+span{border-color:var(--gb);background:color-mix(in srgb,var(--gb) 10%,transparent)}
.gc-field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.88rem}
.gc-field small{font-weight:400;opacity:.6}
.gc-field input:not([type=radio]):not([type=color]){padding:10px 12px;border-radius:12px;border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;font:inherit;font-weight:400}
.gc-cols{flex-direction:row;align-items:center;gap:10px}.gc-cols input{width:44px;height:34px;border:0;background:none;cursor:pointer}
.gc-emojis{display:flex;flex-wrap:wrap;gap:6px}.gc-emojis label{cursor:pointer}
.gc-emojis span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-size:1.3rem;border:2px solid transparent;background:rgba(127,127,127,.12)}
.gc-emojis input:checked+span{border-color:var(--gb);transform:scale(1.1)}
.gc-create{align-self:flex-start;display:inline-block;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;font-weight:800;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--ga,#ff5fa2),var(--gb,#6a5cff))}
.gc-empty{margin:auto;text-align:center;padding:30px}.gc-empty .big{font-size:3.4rem;animation:bob 2.6s ease-in-out infinite}.gc-empty .gc-create{align-self:center}
@media (max-width:760px){.gc{grid-template-columns:1fr;height:auto}.gc.has-thread .gc-list{display:none}.gc:not(.has-thread) .gc-main{display:none}.gc-head .back{display:block}.gc-main{height:calc(100vh - 150px)}.gc-kinds{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.gm.pop,.gc-empty .big{animation:none}}

/* ===== Group photo/banner + Separate/Together layout (session 6) ===== */
.gc-badge.has-photo{padding:0;overflow:hidden;background:#222}
.gc-badge img{width:100%;height:100%;object-fit:cover;display:block}
.gc-badge.mix{width:48px;height:48px;border-radius:16px}
.gc-head.has-banner{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15)),var(--banner) center/cover,linear-gradient(135deg,var(--ga),var(--gb));min-height:96px;align-items:flex-end}
.gc-head.has-banner .gc-badge{width:56px;height:56px;border:3px solid #fff}
.gc-edit summary{font-size:1.05rem;line-height:1}
.gc-settings{width:300px;max-height:70vh;overflow:auto;gap:10px}
.gs-preview{height:96px;border-radius:14px;display:flex;align-items:flex-end;padding:10px;background:var(--banner,none) center/cover,linear-gradient(135deg,var(--ga),var(--gb))}
.gs-preview .gc-badge{border:3px solid #fff;width:60px;height:60px;font-size:1.8rem}
.gs-files{display:flex;gap:8px}
.gs-file{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:12px;border:2px dashed rgba(127,127,127,.4);cursor:pointer;font-weight:700;font-size:.85rem}
.gs-file:hover{border-color:var(--gb,#6a5cff)}
.gs-file input{position:absolute;width:1px;height:1px;opacity:0}
.gs-rm{display:flex;flex-direction:column;gap:4px;font-size:.82rem}
.gc-settings .gc-create{width:100%}
.lay-toggle{display:flex;margin:2px 10px 10px;padding:3px;border-radius:999px;background:rgba(127,127,127,.14)}
.lay-toggle button{flex:1;padding:7px 0;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;opacity:.65;transition:all .2s}
.lay-toggle button.on{opacity:1;color:#fff;background:linear-gradient(135deg,var(--ua,#ff5fa2),var(--ub,#6a5cff));box-shadow:0 3px 10px rgba(106,92,255,.3)}
.dm-groups-link.slim{padding:8px 12px}
.mix-filters{display:flex;gap:6px;padding:2px 10px 8px;overflow-x:auto}
.mix-filters button{padding:5px 12px;border-radius:999px;border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;font:inherit;font-size:.78rem;cursor:pointer;white-space:nowrap}
.mix-filters button.on{background:var(--ink);color:var(--surface);border-color:transparent}
.mix-tag{font-style:normal;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:6px;margin-left:4px;vertical-align:middle;background:rgba(127,127,127,.18)}

/* ===== Echoes (session 6) ===== */
.echo{max-width:1000px;margin:0 auto;padding:8px 16px 110px}
.echo-hero{text-align:center;padding:18px 0 10px}
.echo-hero.big{padding:30px 0 16px}
.echo-back{display:inline-block;font-size:.85rem;opacity:.7;color:inherit;text-decoration:none;margin-bottom:8px}
.echo-title{font-size:clamp(2rem,6vw,3.6rem);line-height:1.05;margin:.15em 0 .3em}
.echo-title span{background:linear-gradient(90deg,var(--ua,#ff5fa2),var(--ub,#6a5cff));-webkit-background-clip:text;background-clip:text;color:transparent}
.echo-lead{max-width:620px;margin:0 auto 18px;font-size:1.05rem;opacity:.8}
.echo-stage{border-radius:26px;overflow:hidden;background:#0d0a14;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.cmp{position:relative;aspect-ratio:4/3;max-height:70vh;width:100%;user-select:none;overflow:hidden;background:#000}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-b-wrap{position:absolute;inset:0;transition:opacity .35s}
.cmp-line{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.cmp-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:#1b1030;display:grid;place-items:center;font-weight:800;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.cmp:not(.mode-slide) .cmp-line,.cmp:not(.mode-slide) .cmp-range{display:none}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-label{position:absolute;top:12px;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);pointer-events:none}
.cmp-label.l{left:12px}.cmp-label.r{right:12px}
.cmp.mode-flicker .cmp-b-wrap{transition:none}
.echo-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;color:#fff}
.echo-modes{display:flex;gap:6px;flex-wrap:wrap}
.echo-modes button{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.echo-modes button.on,.echo-modes [data-play]:hover{background:linear-gradient(135deg,var(--ua,#ff5fa2),var(--ub,#6a5cff));border-color:transparent}
.echo-note{margin:0;opacity:.8;font-style:italic;font-size:.9rem}
.echo-strip{display:flex;gap:12px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory}
.echo-frame{flex:none;width:130px;scroll-snap-align:start;position:relative;padding:0;border:3px solid transparent;border-radius:18px;overflow:hidden;cursor:pointer;background:rgba(127,127,127,.15);color:inherit;font:inherit;text-align:left;opacity:0;animation:stepUp .45s ease forwards;animation-delay:var(--d,0s);transform:translateY(12px)}
.echo-frame img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.echo-frame.on{border-color:var(--ub,#6a5cff);box-shadow:0 6px 20px color-mix(in srgb,var(--ub,#6a5cff) 45%,transparent)}
.echo-frame.orig{border-color:#ffd54a}
.ef-who,.ef-when{display:block;padding:0 8px;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-who{font-weight:700;padding-top:6px}.ef-when{opacity:.6;padding-bottom:6px}
.echo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:auto;min-height:170px;border:2px dashed rgba(127,127,127,.45);opacity:1;animation:none;transform:none}
.echo-add .big{font-size:2.2rem}
.echo-del{margin:-4px 0 10px}
.echo-make{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;padding:20px;margin-top:16px;border-radius:24px}
.echo-how{padding-left:20px;line-height:1.8;opacity:.85}
.echo-form{display:flex;flex-direction:column;gap:10px}
.echo-drop{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;cursor:pointer;background:#111;display:grid;place-items:center}
.echo-guide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:grayscale(1)}
.echo-mine{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.echo-mine.on{opacity:.75}.echo-drop:hover .echo-mine.on{opacity:.35}
.echo-drop-txt{position:relative;z-index:1;color:#fff;font-weight:800;text-align:center;padding:10px 16px;border-radius:14px;background:rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.echo-drop-txt small{font-weight:400;opacity:.85;font-size:.75rem}
.echo-drop input{position:absolute;width:1px;height:1px;opacity:0}
.echo-input{padding:11px 14px;border-radius:12px;border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;font:inherit}
.echo-cta{display:flex;align-items:center;gap:10px;margin:10px 0;padding:10px 12px;border-radius:16px;color:inherit;text-decoration:none;background:linear-gradient(135deg,color-mix(in srgb,var(--ua) 16%,transparent),color-mix(in srgb,var(--ub) 16%,transparent));border:1px solid color-mix(in srgb,var(--ub) 30%,transparent);transition:transform .2s}
.echo-cta:hover{transform:translateY(-1px)}.echo-cta span{display:flex;flex-direction:column}.echo-cta small{opacity:.65;font-size:.75rem}
.echo-ico{font-size:1.4rem;animation:spinSlow 6s linear infinite}@keyframes spinSlow{to{transform:rotate(360deg)}}
.echo-chains{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.echo-chain{border-radius:22px;overflow:hidden;color:inherit;text-decoration:none;background:rgba(127,127,127,.1);opacity:0;animation:stepUp .5s ease forwards;animation-delay:var(--d);transform:translateY(16px);transition:box-shadow .2s}
.echo-chain:hover{box-shadow:0 12px 30px rgba(0,0,0,.2)}
.ec-pair{position:relative;aspect-ratio:16/10;display:grid;grid-template-columns:1fr 1fr}
.ec-pair img{width:100%;height:100%;object-fit:cover}
.ec-split{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff}
.ec-meta{padding:10px 14px;display:flex;flex-direction:column}.ec-meta small{opacity:.65}
.echo-wait{position:relative;display:block;aspect-ratio:1;border-radius:18px;overflow:hidden}
.echo-wait img{width:100%;height:100%;object-fit:cover;transition:transform .3s,filter .3s;filter:grayscale(.6)}
.echo-wait span{position:absolute;inset:auto 10px 10px auto;padding:5px 10px;border-radius:999px;background:#fff;color:#1b1030;font-weight:800;font-size:.78rem;opacity:0;transition:opacity .2s}
.echo-wait:hover img{transform:scale(1.05);filter:none}.echo-wait:hover span{opacity:1}
.echo-login{text-align:center;margin-top:20px}
@media (max-width:720px){.echo-make{grid-template-columns:1fr}.echo-frame{width:104px}}
@media (prefers-reduced-motion:reduce){.echo-frame,.echo-chain{animation:none;opacity:1;transform:none}.echo-ico{animation:none}}

/* ===== Grouped dock - Pin always in the middle (session 6) ===== */
.dock .dock-group{position:relative;display:flex}
.dock .dock-btn{position:relative;display:grid;justify-items:center;gap:1px;min-width:70px;padding:6px 10px;border-radius:15px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:.72rem;font-weight:700;color:var(--mist)}
.dock .dock-btn:hover,.dock .dock-btn.here,.dock .dock-group.open .dock-btn{color:var(--ink);background:var(--surface-2)}
.dock .dock-btn.here::after{content:"";position:absolute;top:3px;right:18px;width:7px;height:7px;border-radius:50%;background:var(--pin)}
.dock .dock-btn::before{content:"";position:absolute;bottom:2px;left:50%;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:currentColor;opacity:.25;transition:transform .2s}
.dock .dock-group.open .dock-btn::before{transform:scaleX(1.6);opacity:.6}
.dock .dock-menu{position:absolute;bottom:calc(100% + 14px);left:50%;min-width:250px;padding:8px;border-radius:20px;background:var(--surface);border: 1px solid var(--edge);box-shadow:var(--drop);
  display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translate(-50%,10px) scale(.96);transform-origin:bottom center;transition:opacity .18s,transform .18s,visibility .18s}
.dock .dock-group.open .dock-menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.dock .dock-menu::after{content:"";position:absolute;bottom:-8px;left:50%;width:14px;height:14px;margin-left:-7px;background:var(--surface);border-right: 1px solid var(--edge);border-bottom: 1px solid var(--edge);transform:rotate(45deg)}
.dock .dock-menu a{display:flex;align-items:center;gap:12px;min-width:0;padding:9px 12px;border-radius:14px;text-align:left;font-size:.9rem;color:var(--ink)}
.dock .dock-menu a .ic{flex:none;width:36px;height:36px;padding:8px;border-radius:12px;background:var(--surface-2)}
.dock .dock-menu a span{display:flex;flex-direction:column}
.dock .dock-menu a small{font-weight:400;font-size:.75rem;color:var(--mist)}
.dock .dock-menu a.here::after{top:50%;right:12px;margin-top:-3.5px}
.dock .dock-menu a.dock-fame .ic{color:#ffc93c}
@media (max-width:800px){
  .dock .dock-group{flex:1}
  .dock .dock-btn{min-width:0;flex:1;padding:6px 4px}
  .dock .dock-group:first-of-type .dock-menu{left:0;transform:translate(0,10px) scale(.96);transform-origin:bottom left}
  .dock .dock-group:first-of-type.open .dock-menu{transform:none}
  .dock .dock-group:first-of-type .dock-menu::after{left:30%}
}
@media (prefers-reduced-motion:reduce){.dock .dock-menu{transition:none}}
/* equal-width slots so Pin is always dead centre */
.dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.dock>a,.dock>.dock-group,.dock .dock-btn{min-width:70px}
.dock .dock-group{display:grid}
.dock .dock-create{margin:0 6px}
@media (max-width:800px){
  .dock>a,.dock>.dock-group,.dock .dock-btn{min-width:0}
  .dock>a span,.dock .dock-btn span{font-size:.66rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dock .dock-create{margin:0 3px}
}
@media (max-width:800px){
  .dock{left:6px;right:6px;padding:5px;gap:0}
  .dock>a,.dock .dock-btn{padding:6px 1px}
  .dock>a span,.dock .dock-btn span{font-size:.62rem;letter-spacing:-.01em}
  .dock a.here::after,.dock .dock-btn.here::after{right:8px}
}

/* ===== Category filter (session 6) ===== */
.catf{position:relative;margin:6px 0 14px}
.catf-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.catf-chip{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:2px solid var(--edge,rgba(127,127,127,.3));background:var(--surface,#fff);color:var(--ink,#1b1030);
  font:inherit;font-size:.86rem;font-weight:700;text-decoration:none !important;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.catf-chip:hover{transform:translateY(-1px)}
.catf-chip small{font-weight:600;opacity:.55;font-size:.75rem}
.catf-chip.on{background:var(--ink,#1b1030);color:var(--surface,#fff);border-color:var(--ink,#1b1030)}
.catf-more{background:var(--accent);color:#fff;border-color:transparent}
.catf-panel{margin-top:6px;padding:16px;border-radius:22px;background:var(--surface,#fff);border:2px solid var(--edge,rgba(127,127,127,.3));box-shadow:var(--drop,0 10px 30px rgba(0,0,0,.15));max-height:65vh;overflow:auto;animation:catIn .2s ease}
@keyframes catIn{from{opacity:0;transform:translateY(-6px)}}
.catf-head{position:sticky;top:-16px;z-index:1;display:flex;gap:8px;margin:-16px -16px 8px;padding:16px 16px 10px;background:var(--surface,#fff)}
.catf-head input{flex:1;padding:11px 16px;border-radius:999px;border:2px solid var(--edge,rgba(127,127,127,.3));background:transparent;color:inherit;font:inherit}
.catf-x{width:42px;border-radius:50%;border:0;background:var(--surface-2,rgba(127,127,127,.15));color:inherit;cursor:pointer;font-size:1rem}
.catf-group h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin:14px 0 8px}
.catf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.catf-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;color:inherit;text-decoration:none !important;font-size:.88rem;font-weight:600;transition:background .15s}
.catf-item:hover{background:var(--surface-2,rgba(127,127,127,.12))}
.catf-item.on{background:var(--ink,#1b1030);color:var(--surface,#fff)}
.catf-item.empty{opacity:.6}
.catf-item small{margin-left:auto;font-size:.72rem;padding:1px 7px;border-radius:999px;background:var(--surface-2,rgba(127,127,127,.15))}
.catf-emoji{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--surface-2,rgba(127,127,127,.12));font-size:1rem}
.catf-note{margin:-6px 0 12px;font-size:.88rem}
.board-filter{grid-column:1/-1}
.cat-pill{text-decoration:none;font-weight:700}
.cat-select{max-width:100%}
@media (max-width:560px){.catf-grid{grid-template-columns:1fr 1fr}.catf-item{font-size:.8rem}}

/* ===== Mobile fit pass (8 Nov 2026) ===== */
html, body { max-width: 100%; overflow-x: clip; }
@media (max-width: 760px) {
  .composer-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 8px; padding: 8px 10px; }
  .topbar .brand { min-width: 0; flex: 0 1 auto; }
  .top-spacer { display: none; }
  .top-actions { margin-left: auto; gap: 2px; flex: none; }
  .top-actions .icon-btn { width: 36px; height: 36px; }
  .brand-word { font-size: 1.25rem; }
}
@media (max-width: 400px) {
  .brand-word { display: none; }
}
@media (max-width: 800px) {
  .dock { grid-auto-columns: minmax(0, 1fr); max-width: calc(100vw - 12px); }
  .dock .dock-create { padding: 6px 2px; }
}
/* keep visually-hidden radios inside their scrolling strips */
.filters, .filter-pick, .bg-picks label, .seg label { position: relative; }
@media (max-width: 760px) {
  .studio, .string-new, .story-maker, .strings-layout, .string-layout, .detail, .prof-info, .poster-body, .row2
    { grid-template-columns: minmax(0, 1fr); }
  .walk-form { grid-template-columns: minmax(0, 1fr) !important; padding: 18px; }
  .studio > *, .string-new > *, .story-maker > *, .walk-form > * { min-width: 0; }
}
@media (max-width: 380px) {
  .card.string-form, .story-tools.card { padding: 18px 16px; }
}
@media (max-width: 420px) {
  .walk-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .walk-form-actions > * { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 800px) { .dock { transform: none; justify-content: stretch; } }
@media (max-width: 520px) {
  .dm-send { gap: 4px; padding: 8px; }
  .dm-send textarea { flex: 1 1 auto; min-width: 0; padding-left: 12px !important; padding-right: 10px !important; }
  .dm-send .tray-toggle, .dm-send .fx-toggle, .dm-send .mic { flex: none; width: 36px; min-width: 36px; padding: 0; }
  .dm-send .send { flex: none; padding: 0 12px; }
}
@media (max-width: 360px) { .dm-send .send { padding: 0 10px; font-size: .85rem; } .dm-send { gap: 3px; padding: 8px 6px; } }

/* ===== Mobile pass 2 + Settings (8 Nov 2026) ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Me menu opens towards the left so it stays on screen */
.dock .dock-group.dock-me .dock-menu { left: auto; right: 0; transform: translate(0, 10px) scale(.96); transform-origin: bottom right; }
.dock .dock-group.dock-me.open .dock-menu { transform: none; }
.dock .dock-group.dock-me .dock-menu::after { left: auto; right: 22px; }

@media (max-width: 800px) {
  /* Pin: a fixed square, dead centre of its slot */
  .dock .dock-create { justify-self: center; align-self: center; width: 52px; height: 52px; padding: 0; margin: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 16px; }
  .dock .dock-create .ic { width: 24px; height: 24px; margin: 0; }
  .dock .dock-create span { text-align: center; }
  .dock>a, .dock .dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .dock .dock-menu { min-width: 0; width: min(270px, calc(100vw - 24px)); }
}

@media (max-width: 760px) {
  /* 16px text stops iPhones zooming the page when a field is tapped */
  input:not([type=radio]):not([type=checkbox]):not([type=color]), textarea, select { font-size: 16px !important; max-width: 100%; }
  input[type=file] { width: 100%; }
  /* upload box: a short landscape panel, not a full-width square */
  .drop { aspect-ratio: auto; height: 190px; }
  .drop.has-files { height: auto; aspect-ratio: 4 / 3; max-height: 60vh; }
  .drop-empty { padding: 14px; }
  .drop-empty .ic { width: 32px; height: 32px; }
  .story-canvas { max-width: 240px; }
  .main form, .main fieldset { min-width: 0; max-width: 100%; }
  .filters > .filter-pick { flex: none; }
}

/* Settings page */
.settings { max-width: 620px; margin: 0 auto; }
.set-me { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; text-decoration: none !important; color: var(--ink); }
.set-me > span:not(.av-wrap):not(.set-go) { display: flex; flex-direction: column; min-width: 0; }
.set-me b { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-me small, .set-row small { color: var(--mist); font-size: .82rem; font-weight: 500; }
.set-go { margin-left: auto; flex: none; font-weight: 700; font-size: .85rem; color: var(--mist); }
.set-card { padding: 18px 20px; margin-bottom: 16px; }
.set-card h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 12px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.set-card h2 + .set-row { border-top: 0; }
.set-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.set-arrow { margin-left: auto; font-size: 1.5rem; color: var(--mist); line-height: 1; }
.set-seg { display: flex; flex-wrap: wrap; margin: 0 0 8px; }
.set-seg label { flex: 1 1 auto; justify-content: center; position: relative; }
.set-form { margin: 0; }
.set-logout { margin: 8px 0 20px; }
.set-logout .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.muted.small { font-size: .82rem; margin: 0; }

/* ---------- Home board: source tabs, your week, challenge, coming up, memory, caught up ---------- */
.board-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 4px; }
.board-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700;
  border: 1px solid var(--edge); background: var(--surface); color: var(--ink); text-decoration: none !important; }
.board-tab:hover { transform: translateY(-1px); }
.board-tab.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.board-new { margin-left: auto; font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; color: #fff;
  background: var(--accent); }
.note-week { background: color-mix(in srgb, var(--note-1) 70%, #d6f5ff); }
:root[data-theme="dark"] .note-week { background: #233a4a; }
.week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.week-grid span { display: grid; font-size: .85rem; line-height: 1.2; }
.week-grid b { font-size: 1.6rem; line-height: 1.1; }
.week-days { display: flex; gap: 5px; margin-bottom: 6px; }
.week-days i { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 15%, transparent); }
.week-days i.on { background: var(--accent); }
.note-challenge { background: color-mix(in srgb, var(--note-1) 60%, #ffe3b8); }
:root[data-theme="dark"] .note-challenge { background: #4a3a22; }
.note-challenge .btn { margin-top: 6px; }
.challenge-done { font-weight: 700; color: #1f9d63; margin: 6px 0 0; }
.note-coming { background: color-mix(in srgb, var(--note-1) 60%, #dcf7d9); }
:root[data-theme="dark"] .note-coming { background: #2a4a2e; }
.coming-row { display: flex; gap: 10px; align-items: center; padding: 7px 0; color: inherit; text-decoration: none !important; }
.coming-row + .coming-row { border-top: 1px dashed color-mix(in srgb, currentColor 25%, transparent); }
.coming-ico { font-size: 1.3rem; }
.coming-row span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.coming-row small { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-memory { background: color-mix(in srgb, var(--note-1) 60%, #eadcff); }
:root[data-theme="dark"] .note-memory { background: #3a2d52; }
.memory { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; margin-top: 6px; }
.memory img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memory-thought { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--t1), var(--t2)); }
.caught-up { display: grid; justify-items: center; gap: 2px; margin: 10px 0 18px; padding: 14px;
  border-radius: 16px; border: 1px dashed var(--edge); text-align: center; break-inside: avoid; }
.caught-up span { font-weight: 800; color: #1f9d63; }
.caught-up small { opacity: .7; }

/* ---------- Message notifications ---------- */
.badge[hidden] { display: none !important; }
.notif-preview { display: block; margin-top: 2px; opacity: .8; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.msg-alerts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.msg-alert { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--drop); text-decoration: none !important;
  animation: alertIn .25s ease; transition: opacity .4s, transform .4s; }
.msg-alert.out { opacity: 0; transform: translateY(8px); }
.msg-alert > i { font-style: normal; font-size: 1.3rem; display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--accent); }
.msg-alert-txt { display: grid; min-width: 0; line-height: 1.3; flex: 1; }
.msg-alert-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.msg-alert-x { flex: none; border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .6; font-size: 1rem; padding: 4px 6px; }
.msg-alert-x:hover { opacity: 1; }
@keyframes alertIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) { .msg-alerts { right: 16px; left: 16px; width: auto; bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .msg-alert { animation: none; transition: none; } }

/* ---------- Client session 7 ---------- */
/* closable tip cards */
.info-board { position: relative; }
.tip-x-form { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.tip-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: var(--ink);
  font-size: .85rem; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .75; }
.tip-x:hover, .tip-x:focus-visible { opacity: 1; transform: scale(1.06); }
.info-board.closing { transition: opacity .25s, transform .25s; opacity: 0; transform: scale(.96); }
.set-row-form { margin: 0; }
.set-row-form .set-row { width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* walks */
.walk-links .btn { margin: 2px 6px 8px 0; }
/* bottom menu tucks away while scrolling down on wide screens, back on scroll up / at the end */
.dock { transition: transform .25s ease, opacity .25s ease; }
/* laptops: the menu bar lives at the top, under the header, so it never sits over content on load */
@media (min-width: 801px) {
  .dock { top: 74px; bottom: auto; z-index: 29; }
  .main { padding-top: 96px; padding-bottom: 48px; }
  .dock .dock-menu { bottom: auto; top: calc(100% + 14px); transform-origin: top center; }
  .dock .dock-menu::after { bottom: auto; top: -8px; transform: rotate(225deg); }
  .dock .dock-group.dock-me .dock-menu { transform-origin: top right; }
  .dock.tucked { transform: translate(-50%, -160px); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
/* landing sticky labels keep their words inside */
.landing-wall .tile-thought { font-size: clamp(.8rem, 1.25vw, 1rem); overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
.landing-wall .tile-thought > span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Strings heading: the wavy string sits under the title, not through it */
.strings-head .string-line { top: auto; bottom: -22px; height: 26px; opacity: .45; right: auto; width: min(620px, 58%); }
.strings-head { margin-bottom: 34px; }
/* phone: brand visible, filters in one swipeable row, small Add-to-today tile */
@media (max-width: 400px) { .brand-word { display: inline; font-size: 1.1rem; } .top-actions .icon-btn { width: 32px; height: 32px; } }
@media (max-width: 760px) {
  .board-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -14px; padding-right: 14px; }
  .board-tabs::-webkit-scrollbar { display: none; }
  .board-tab { flex: none; padding: 7px 12px; font-size: .9rem; }
  .board-new { flex: none; margin-left: 0; }
  .today .strip-h { margin-top: 14px; }
  .story-tile { width: 84px; }
  .story-tile.add { width: 138px; aspect-ratio: auto; height: 64px; flex-direction: row; gap: 8px; padding: 0 10px; }
  .story-tile.add .story-name { white-space: nowrap; }
  .story-tile.add .story-face { width: 36px; height: 36px; flex: none; margin: 0; border-radius: 11px; }
  .story-tile.add .story-face svg { width: 20px; height: 20px; }
  .story-tile.add .story-name { font-size: .72rem; line-height: 1.1; }
}
/* badge digits stay centred on every page (Messages page squashed them) */
.dock .badge { display: inline-grid; place-items: center; line-height: 1; overflow: visible; }
.dock .badge { z-index: 2; }
.dock a.here:has(.badge:not([hidden]))::after { display: none; }

/* ===================== 9 Nov: chat swipe actions, bulk select, privacy, passwords ===================== */
/* chat rows - the coloured actions sit under the row and show as it slides */
.sw-list { position: relative; }
.sw-row { position: relative; border-radius: 14px; margin-bottom: 2px; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; transition: opacity .22s, max-height .26s, margin .26s; max-height: 140px; }
.sw-row.sw-dir-l, .sw-row.sw-dir-r { overflow: hidden; }
.sw-row.sw-gone { opacity: 0; max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
.sw-front { position: relative; z-index: 1; display: flex; align-items: center; background: var(--surface); border-radius: 14px;
  transition: transform .24s cubic-bezier(.2,.8,.3,1); will-change: transform; }
.sw-row.sw-dragging .sw-front { transition: none; }
.sw-front > .dm-item { flex: 1; min-width: 0; }
.sw-under { position: absolute; inset: 0; display: flex; border-radius: 14px; overflow: hidden; visibility: hidden; }
.sw-under-l { justify-content: flex-start; }
.sw-under-r { justify-content: flex-end; }
.sw-row.sw-dir-l .sw-under-l, .sw-row.sw-dir-r .sw-under-r { visibility: visible; }
.sw-btn { width: 76px; flex: none; border: 0; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0 4px;
  font: 800 .74rem var(--body); color: #fff; cursor: pointer; transition: width .2s ease; }
.sw-btn .sw-ico { font-size: 1.15rem; line-height: 1; }
.sw-read { background: #5b5cf0; }
.sw-pin { background: #f0a020; color: #17141f; }
.sw-archive { background: #8a8597; }
.sw-delete { background: var(--danger); }
/* full swipe: the outer action grows to say "let go to do this" */
.sw-row.sw-full.sw-dir-r .sw-delete, .sw-row.sw-full.sw-dir-l .sw-read { width: 100%; }
.sw-row.sw-full.sw-dir-r .sw-archive, .sw-row.sw-full.sw-dir-l .sw-pin { width: 0; padding: 0; overflow: hidden; }
.sw-meta { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.sw-flag { font-style: normal; font-size: .78rem; display: none; opacity: .8; }
.is-muted .sw-flag-mute, .is-pinned .sw-flag-pin { display: inline; }
.badge.sw-dot { display: none; }
.is-unread .badge.sw-dot { display: inline-block; min-width: 0; width: 11px; height: 11px; padding: 0; border-radius: 50%; }
.is-muted .dm-item .badge:not(.sw-dot) { background: var(--mist); }
/* checkbox + ⋯ appear on hover with a mouse; always there while selecting */
.sw-check { width: 0; overflow: hidden; margin: 0; flex: none; display: grid; place-items: center; opacity: 0; transition: width .18s, opacity .18s; cursor: pointer; }
.sw-check input { width: 18px; height: 18px; accent-color: var(--pin); cursor: pointer; margin: 0; }
.selecting .sw-check { width: 32px; opacity: 1; }
.sw-row.is-sel .sw-front { background: color-mix(in srgb, var(--pin) 10%, var(--surface)); }
.selecting .dm-item.on { box-shadow: none; }
.sw-more { position: relative; flex: none; }
.sw-more > summary { list-style: none; cursor: pointer; width: 32px; height: 32px; margin-right: 4px; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; color: var(--mist); opacity: 0; transition: opacity .15s; }
.sw-more > summary::-webkit-details-marker { display: none; }
.sw-more > summary:hover { background: var(--surface-2); color: var(--ink); }
.sw-more[open] > summary, .sw-more > summary:focus-visible { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sw-row:hover .sw-check, .sw-row:focus-within .sw-check { width: 32px; opacity: 1; }
  .sw-row:hover .sw-more > summary, .sw-row:focus-within .sw-more > summary { opacity: 1; }
}
@media (hover: none) { .sw-more > summary { display: none; } .selecting .sw-more { display: none; } }
.sw-menu { position: absolute; right: 4px; top: calc(100% + 4px); z-index: 40; min-width: 200px; padding: 6px; display: grid; gap: 2px; }
.sw-menu.up { top: auto; bottom: calc(100% + 4px); }
.sw-menu form { margin: 0; }
.sw-menu button { width: 100%; display: flex; gap: 8px; align-items: center; border: 0; background: none; padding: 9px 10px; border-radius: 10px;
  font-weight: 700; font-size: .88rem; cursor: pointer; text-align: left; }
.sw-menu button:hover, .sw-menu button:focus-visible { background: var(--surface-2); }
.sw-menu .danger { color: var(--danger); }
.sw-hint { padding: 8px 10px 0; }
/* bulk bar */
.sel-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 4px; padding: 6px; margin: 8px 2px 0; flex-wrap: wrap; }
.sel-bar[hidden] { display: none; }
.sel-n { font-weight: 700; font-size: .84rem; padding: 0 6px; margin-right: auto; }
.sel-bar button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: .8rem; cursor: pointer; }
.sel-bar button:hover:not(:disabled) { border-color: var(--edge); }
.sel-bar button:disabled { opacity: .45; cursor: default; }
.sel-bar .danger { color: var(--danger); }
.sel-bar .sel-x { border: 0; }
.dm-head-btns { display: flex; align-items: center; gap: 6px; }
.sel-toggle, .new-group-btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; font-weight: 800;
  font-size: .8rem; cursor: pointer; color: var(--ink); white-space: nowrap; text-decoration: none !important; }
.sel-toggle:hover, .new-group-btn:hover { border-color: var(--edge); }
.sel-toggle[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
/* undo toast */
.undo-toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--surface); border-radius: 14px; padding: 11px 12px 11px 16px; box-shadow: var(--drop); font-weight: 700;
  max-width: calc(100% - 32px); overflow: hidden; animation: undo-in .22s ease; }
.undo-toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-toast button { border: 0; border-radius: 10px; padding: 6px 12px; background: var(--pin); color: #fff; font-weight: 800; cursor: pointer; flex: none; }
.undo-toast .undo-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pin); transform-origin: left; animation: undo-bar 5s linear forwards; }
.undo-toast.plain { padding: 11px 16px; }
.undo-toast.out { opacity: 0; transition: opacity .25s; }
@keyframes undo-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes undo-bar { to { transform: scaleX(0); } }
@media (min-width: 801px) { .undo-toast { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .sw-front, .sw-row, .sw-btn { transition: none; } .undo-toast { animation: none; } .undo-toast .undo-bar { animation-duration: 5s; } }

/* group chats */
.gm.gm-sys { max-width: 100%; align-self: center; justify-content: center; margin: 2px auto; }
.gm.gm-sys p { margin: 0; font-size: .76rem; font-weight: 700; color: var(--mist); background: var(--surface-2); border-radius: 999px; padding: 4px 12px; text-align: center; }
.gc-mem { display: flex; align-items: center; gap: 6px; }
.gc-mem > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: .88rem; }
.gc-mem > a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-mem em { font-style: normal; font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--note-1); border: 1px solid var(--edge); color: var(--ink); }
.gc-mem-menu { position: relative; }
.gc-mem-menu > summary { list-style: none; cursor: pointer; padding: 0 6px; border-radius: 8px; font-size: 1.1rem; }
.gc-mem-menu > summary::-webkit-details-marker { display: none; }
.gc-mem-menu > summary:hover { background: rgba(127,127,127,.15); }
.gc-mem-pop { position: absolute; right: 0; top: 100%; z-index: 25; background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--drop);
  padding: 4px; min-width: 170px; display: grid; }
.gc-mem-pop form { margin: 0; }
.gc-mem-pop button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-weight: 700; font-size: .84rem; cursor: pointer; color: var(--ink); }
.gc-mem-pop button:hover { background: var(--surface-2); }
.gc-mem-pop .danger { color: var(--danger); }
.gc-pop { max-height: 70vh; overflow: auto; }
.gc-pop .small, .gc-new .small { font-size: .8rem; }
.pick-search { margin: 6px 0 !important; }
.pick-list { max-height: 230px; overflow: auto; border: 1.5px solid var(--line); border-radius: 12px; padding: 4px; }
.pick-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-weight: 500; }
.pick-row:hover { background: var(--surface-2); }
.pick-row:has(input:checked) { background: color-mix(in srgb, var(--pin) 12%, var(--surface)); }
.pick-row input { width: 18px; height: 18px; accent-color: var(--pin); flex: none; }
.pick-row > span { display: grid; min-width: 0; line-height: 1.2; }
.pick-row small { color: var(--mist); font-weight: 500; }
.pick-no { margin-left: auto; font-style: normal; }
.pick-typed { margin-top: 10px; font-weight: 600; font-size: .82rem; }
.gc-photo-pick { cursor: pointer; }

/* passwords */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 70px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--surface); border-radius: 8px; padding: 5px 9px;
  font: 800 .76rem var(--body); color: var(--mist); cursor: pointer; margin-top: 3px; }
.pw-eye:hover { color: var(--ink); }
.pw-rules { list-style: none; padding: 0; margin: -6px 0 16px; display: grid; gap: 2px; font-size: .8rem; color: var(--mist); }
.pw-rules li::before { content: "○"; display: inline-block; width: 18px; font-weight: 900; }
.pw-rules li.ok { color: #1f8a4c; }
.pw-rules li.ok::before { content: "✓"; }
:root[data-theme="dark"] .pw-rules li.ok { color: #6fdc9b; }
.pw-rules.shake { animation: pw-shake .4s; }
@keyframes pw-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.auth-forgot { text-align: right; margin: -6px 0 14px; font-size: .86rem; font-weight: 700; }
.auth-forgot a { text-decoration: underline; text-underline-offset: 3px; }
.auth-note { margin: -8px 0 18px; color: var(--mist); }
.auth .btn.wide + .muted { margin-top: 14px; }
.auth label small { font-weight: 500; }

/* privacy */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; margin: 0; border-top: 1px solid var(--line); cursor: pointer; }
.switch-row > span { display: grid; gap: 2px; }
.switch-row small { color: var(--mist); font-weight: 500; font-size: .8rem; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line); border: 1px solid var(--edge);
  position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--edge); transition: transform .2s; }
.switch:checked { background: var(--pin); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--pin) 50%, transparent); outline-offset: 2px; }
.priv-field { border: 0; padding: 12px 0 4px; margin: 0; border-top: 1px solid var(--line); }
.priv-field legend { padding: 12px 0 8px; float: left; width: 100%; }
.priv-field .seg { clear: both; flex-wrap: wrap; margin-bottom: 6px; }
.priv-field small { display: block; font-size: .8rem; margin-bottom: 8px; }
.priv-form .set-row { border-top: 1px solid var(--line); }
.priv-form .btn.wide { margin-top: 12px; }
.set-sub { font-size: .95rem; margin: 22px 0 6px; }
.blk-row { border-top: 1px solid var(--line); padding: 8px 0; }
.prof-locked { text-align: center; padding: 34px 20px; margin: 18px auto; max-width: 520px; }
.prof-locked .lock-ico { font-size: 2.4rem; margin-bottom: 6px; }
.prof-locked h2 { font-size: 1.4rem; margin-bottom: 8px; }
.prof-more { position: relative; }
.prof-more > summary { list-style: none; }
.prof-more > summary::-webkit-details-marker { display: none; }
.prof-more .chat-menu-pop { left: 0; right: auto; }
.req-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px; text-decoration: none !important; }
.req-banner > span:nth-child(2) { display: grid; }
.req-banner small { color: var(--mist); }
.req-banner .set-arrow { margin-left: auto; }
.req-btns { margin-left: auto; display: flex; gap: 6px; flex: none; }
.req-btns form { margin: 0; }
.act-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mist); margin-right: 5px; vertical-align: 1px; }
.act-dot.now { background: #2fbf6a; }
.dm-send[hidden] { display: none; }
.dm-cant { margin: 10px 12px; padding: 12px 14px; font-weight: 700; font-size: .9rem; text-align: center; box-shadow: none; }
.sw-row:has(.sw-more[open]) { z-index: 30; }
.sw-row:has(.sw-more[open]) .sw-front { z-index: 2; }
.dm-none[hidden] { display: none; }
.dm-list-head { gap: 8px; }
.dm-list-head h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.new-group-btn { display: inline-flex; align-items: center; gap: 1px; padding: 6px 8px; font-size: .95rem; }
.new-group-btn span { font-weight: 900; font-size: .85rem; }
@media (max-width: 420px) { .new-group-btn { font-size: .95rem; } }
.dm-head-btns .new-dm { flex: none; }
.dm-list-head h1 { font-size: 1.4rem; } .dm-head-btns { flex: none; }

/* ---------- Guides session (9 Nov): Guide to guides, sound toggle, footer, back to top ---------- */
.guides-hub, .guide-page { max-width: 980px; margin: 0 auto; }
.guide-page { max-width: 720px; }
.guides-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 20px; }
.guides-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--edge);
  border-radius: 12px; box-shadow: var(--drop-sm); flex: 1 1 220px; max-width: 340px; color: var(--mist); }
.guides-search input { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; width: 100%; min-width: 0; }
.guides-search:focus-within { box-shadow: 3px 3px 0 var(--pin); }
.guides-cats .chip { cursor: pointer; border: 1px solid var(--edge); font: inherit; font-weight: 700; font-size: .85rem; color: var(--ink); }
.guides-cats .chip.on { color: var(--surface); }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-bottom: 24px; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; transition: transform .15s; }
.guide-card[hidden] { display: none; }
.guide-card:nth-child(3n+2) { background: var(--note-2); transform: rotate(.5deg); }
.guide-card:nth-child(3n) { transform: rotate(-.5deg); }
.guide-card:hover, .guide-card:focus-visible { transform: translate(-2px, -2px) rotate(0); box-shadow: var(--drop-lg); }
.guide-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--edge); }
.guide-title { font-family: var(--display); font-size: 1.12rem; line-height: 1.25; }
.guide-sum { color: var(--ink); opacity: .85; }
.guide-meta { font-size: .82rem; color: var(--mist); display: flex; align-items: center; gap: 4px; }
.guide-card .guide-meta { color: var(--ink); opacity: .7; margin-top: auto; }
.guide-meta em { font-style: normal; font-weight: 700; }
.guide-crumb { font-size: .9rem; color: var(--mist); margin-bottom: 8px; }
.guide-crumb a { font-weight: 700; color: var(--ink); }
.guide-toc { margin: 18px 0 8px; }
.guide-toc ol { margin: 8px 0 0; padding-left: 20px; }
.guide-toc a { color: var(--ink); font-weight: 600; }
.guide-sec { margin: 26px 0; scroll-margin-top: 90px; }
.guide-sec h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.guide-sec p { font-size: 1.04rem; max-width: 62ch; }
.guide-anchor { border: 0; background: transparent; color: var(--mist); cursor: pointer; padding: 4px; border-radius: 8px; opacity: 0; transition: opacity .15s; }
.guide-sec:hover .guide-anchor, .guide-anchor:focus-visible { opacity: 1; }
.guide-anchor:hover { color: var(--ink); background: var(--surface-2); }
@media (hover: none) { .guide-anchor { opacity: 1; } }
.guide-related { margin: 32px 0 18px; }
.guide-related h2 { font-size: 1.05rem; margin-bottom: 10px; }
.guides-empty { margin: 8px 0 20px; }
.sound-btn .snd-on { display: none; }
.sound-btn.on .snd-on { display: inline; }
.sound-btn.on .snd-off { display: none; }
.sound-btn span { font-size: 17px; line-height: 1; }
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 40px 0 10px; padding-top: 16px;
  border-top: 2px dashed var(--line); font-size: .88rem; }
.site-foot a { color: var(--mist); font-weight: 700; text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.to-top { position: fixed; right: 18px; bottom: 96px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--edge); box-shadow: var(--drop); font: 800 1.2rem var(--display); }
.to-top:hover { transform: translate(-1px, -1px); }
.to-top[hidden] { display: none; }
@media (min-width: 801px) { .to-top { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .guide-card, .guide-card:hover { transform: none; transition: none; } }

/* ---------- Typing bubbles (9 Nov) ---------- */
.typing-row { display: flex; align-items: center; gap: 8px; padding: 4px 16px 6px; font-size: .82rem; color: var(--mist); min-height: 0; }
.typing-row[hidden] { display: none; }
.typing-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; border-radius: 18px 18px 18px 6px;
  background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--drop-sm); animation: typing-in .2s ease-out; }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--mist); animation: typing-dot 1.2s infinite ease-in-out; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
.typing-label { font-weight: 600; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes typing-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .typing-bubble, .typing-bubble i { animation: none; }
  .typing-bubble i:nth-child(2) { opacity: .7; } .typing-bubble i:nth-child(3) { opacity: .45; }
}

/* ---------- Profile extras (9 Nov): photo shapes, socials, music, mood ---------- */
.shape-square, .shape-square .av { border-radius: 14%; }
.shape-blob, .shape-blob .av { border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; }
.shape-arch, .shape-arch .av { border-radius: 50% 50% 12% 12% / 50% 50% 8% 8%; }
/* cut-out shapes: the photo is clipped, and an outline is drawn with drop-shadows instead of a border */
.shape-hexagon, .shape-diamond, .shape-flower, .shape-star, .shape-heart { border-radius: 0;
  filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)); }
.shape-hexagon .av, .shape-diamond .av, .shape-flower .av, .shape-star .av, .shape-heart .av { border: 0; border-radius: 0; box-shadow: none !important; }
.shape-hexagon .av { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.shape-diamond .av { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shape-star .av { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape-flower .av { clip-path: polygon(100.0% 50.0%, 98.6% 54.3%, 94.8% 57.9%, 89.6% 60.6%, 84.3% 62.5%, 80.1% 64.0%, 77.7% 66.0%, 77.2% 69.0%, 78.0% 73.5%, 79.0% 79.0%, 79.2% 84.9%, 78.0% 90.0%, 75.0% 93.3%, 70.6% 94.2%, 65.6% 92.8%, 60.6% 89.6%, 56.3% 85.9%, 52.9% 83.1%, 50.0% 82.0%, 47.1% 83.1%, 43.7% 85.9%, 39.4% 89.6%, 34.4% 92.8%, 29.4% 94.2%, 25.0% 93.3%, 22.0% 90.0%, 20.8% 84.9%, 21.0% 79.0%, 22.0% 73.5%, 22.8% 69.0%, 22.3% 66.0%, 19.9% 64.0%, 15.7% 62.5%, 10.4% 60.6%, 5.2% 57.9%, 1.4% 54.3%, 0.0% 50.0%, 1.4% 45.7%, 5.2% 42.1%, 10.4% 39.4%, 15.7% 37.5%, 19.9% 36.0%, 22.3% 34.0%, 22.8% 31.0%, 22.0% 26.5%, 21.0% 21.0%, 20.8% 15.1%, 22.0% 10.0%, 25.0% 6.7%, 29.4% 5.8%, 34.4% 7.2%, 39.4% 10.4%, 43.7% 14.1%, 47.1% 16.9%, 50.0% 18.0%, 52.9% 16.9%, 56.3% 14.1%, 60.6% 10.4%, 65.6% 7.2%, 70.6% 5.8%, 75.0% 6.7%, 78.0% 10.0%, 79.2% 15.1%, 79.0% 21.0%, 78.0% 26.5%, 77.2% 31.0%, 77.7% 34.0%, 80.1% 36.0%, 84.3% 37.5%, 89.6% 39.4%, 94.8% 42.1%, 98.6% 45.7%); }
.shape-heart .av { clip-path: polygon(50.0% 26.0%, 50.0% 25.5%, 50.3% 24.0%, 50.9% 21.8%, 52.0% 18.9%, 53.8% 15.7%, 56.2% 12.4%, 59.4% 9.3%, 63.3% 6.8%, 67.7% 4.9%, 72.5% 4.0%, 77.5% 4.1%, 82.5% 5.3%, 87.2% 7.4%, 91.5% 10.6%, 95.1% 14.5%, 97.8% 19.0%, 99.4% 23.9%, 100.0% 29.1%, 99.4% 34.4%, 97.8% 39.7%, 95.1% 44.9%, 91.5% 49.9%, 87.2% 54.7%, 82.5% 59.4%, 77.5% 63.9%, 72.5% 68.2%, 67.7% 72.5%, 63.3% 76.5%, 59.4% 80.4%, 56.3% 84.1%, 53.8% 87.4%, 52.0% 90.3%, 50.9% 92.7%, 50.3% 94.5%, 50.0% 95.6%, 50.0% 96.0%, 50.0% 95.6%, 49.7% 94.5%, 49.1% 92.7%, 48.0% 90.3%, 46.2% 87.4%, 43.7% 84.1%, 40.6% 80.4%, 36.7% 76.5%, 32.3% 72.5%, 27.5% 68.2%, 22.5% 63.9%, 17.5% 59.4%, 12.8% 54.7%, 8.5% 49.9%, 4.9% 44.9%, 2.2% 39.7%, 0.6% 34.4%, 0.0% 29.1%, 0.6% 23.9%, 2.2% 19.0%, 4.9% 14.5%, 8.5% 10.6%, 12.8% 7.4%, 17.5% 5.3%, 22.5% 4.1%, 27.5% 4.0%, 32.3% 4.9%, 36.7% 6.8%, 40.6% 9.3%, 43.8% 12.4%, 46.2% 15.7%, 48.0% 18.9%, 49.1% 21.8%, 49.7% 24.0%, 50.0% 25.5%); }
.shape-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.shape-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; min-width: 64px; }
.shape-opt .av { font-size: .9rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ua), var(--ub)); }
.pv-av .av-wrap[class*="shape-"]:not(.shape-circle) { box-shadow: none; }

.social-fields { display: grid; gap: 10px; margin-top: 8px; }
.social-in, .spotify-in { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.social-in input, .spotify-in input { flex: 1; min-width: 0; }
.soc-ic { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge);
  font: 800 1rem var(--display); color: #fff; background: var(--ink); }
.soc-x { background: #0f0f10; }
.soc-fb { background: #1877f2; font-family: Georgia, serif; font-size: 1.2rem; }
.soc-yt { background: #ff0033; font-size: .8rem; }
.soc-sp { background: #1db954; color: #06210f; }
.soc-link { background: var(--surface); color: var(--ink); }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.soc-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--edge);
  box-shadow: var(--drop-sm); color: #fff; text-decoration: none; font: 800 1.05rem var(--display); transition: transform .12s; }
.soc-btn.soc-fb { font-family: Georgia, serif; font-size: 1.25rem; }
.soc-btn.soc-yt { font-size: .85rem; }
.soc-btn:hover, .soc-btn:focus-visible { transform: translate(-1px, -1px); box-shadow: var(--drop-sm); }
.socials .ext { margin-left: 4px; }
.prof-music { display: grid; gap: 10px; margin: 12px 0 4px; max-width: 460px; }
.sp-embed { width: 100%; border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-sm); background: var(--surface-2); display: block; }
select[data-mood-pick] { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .soc-btn { transition: none; } }
[data-mood-custom][hidden] { display: none !important; }

/* ---------- Profile photo frame: shape + texture (9 Nov) ----------
   The big photo on a profile sits in a frame (the pinned card). Its shape follows the photo shape
   people pick, and its texture is chosen separately. 'polaroid' = the classic snapshot card;
   texture 'none' = no frame, just the photo. */
.shape-polaroid, .shape-polaroid .av { border-radius: 4px; }
/* textures */
.photo-card.tex-classic { background: var(--surface); }
.photo-card.tex-kraft { background-color: #c9a06a; background-image: repeating-linear-gradient(45deg, rgba(60,35,10,.07) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(255,240,210,.08) 0 1px, transparent 1px 4px); }
.photo-card.tex-cork { background-color: #b98a57; background-image: radial-gradient(rgba(70,40,15,.45) 1px, transparent 1.6px), radial-gradient(rgba(255,228,185,.35) 1px, transparent 1.6px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.photo-card.tex-holo { background: var(--holo); }
.photo-card.tex-glitter { background-color: #ffd3ea; background-image: radial-gradient(#fff 1.1px, transparent 1.7px), radial-gradient(#ff5fa2 1px, transparent 1.6px), radial-gradient(#8f7bff 1px, transparent 1.6px); background-size: 9px 9px, 13px 13px, 17px 17px; background-position: 0 0, 4px 6px, 8px 2px; }
.photo-card.tex-notebook { background-color: #fffef4; background-image: linear-gradient(90deg, transparent 13px, #f2a0a0 13px 14px, transparent 14px), repeating-linear-gradient(transparent 0 11px, #bcd4f0 11px 12px); }
.photo-card.tex-chalk { background-color: #2f3b34; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px); background-size: 5px 5px; }
.photo-card.tex-film { background-color: #141414; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.4px); background-size: 4px 4px; }
.photo-card.tex-film.frame-polaroid { background-image: linear-gradient(#141414, #141414), repeating-linear-gradient(90deg, transparent 0 7px, #e9e6dc 7px 13px, transparent 13px 20px); background-size: 100% calc(100% - 16px), 100% 6px; background-position: 0 8px, 0 0; background-repeat: no-repeat, repeat-x; }
.photo-card.tex-chalk .today-tag, .photo-card.tex-film .today-tag { box-shadow: none; }
/* no frame */
.photo-card.tex-none { padding: 0; background: none; border: 0; box-shadow: none; }
.photo-card.tex-none .av { border-width: 3px; box-shadow: var(--drop-sm) !important; }
/* frame shapes (everything except polaroid): an even border of texture around the photo */
.photo-card:not(.frame-polaroid):not(.tex-none) { padding: 10px; }
.prof-avatar:has(.photo-card:not(.frame-polaroid)) { transform: none; }
.photo-card:not(.frame-polaroid) .today-tag { bottom: -12px; }
.photo-card.frame-circle, .photo-card.frame-circle .av-wrap, .photo-card.frame-circle .av { border-radius: 50%; }
.photo-card.frame-squircle, .photo-card.frame-squircle .av-wrap, .photo-card.frame-squircle .av { border-radius: 28%; }
.photo-card.frame-square, .photo-card.frame-square .av-wrap, .photo-card.frame-square .av { border-radius: 14%; }
.photo-card.frame-blob, .photo-card.frame-blob .av-wrap, .photo-card.frame-blob .av { border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; }
.photo-card.frame-arch, .photo-card.frame-arch .av-wrap, .photo-card.frame-arch .av { border-radius: 50% 50% 12% 12% / 50% 50% 8% 8%; }
/* cut-out frame shapes: the card is clipped to the shape; the outline is drawn on the holder */
.photo-card.frame-hexagon:not(.tex-none) { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border: 0; box-shadow: none; }
.photo-card.frame-diamond:not(.tex-none) { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; box-shadow: none; }
.photo-card.frame-star:not(.tex-none) { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); border: 0; box-shadow: none; }
.photo-card.frame-flower:not(.tex-none) { clip-path: polygon(100.0% 50.0%, 98.6% 54.3%, 94.8% 57.9%, 89.6% 60.6%, 84.3% 62.5%, 80.1% 64.0%, 77.7% 66.0%, 77.2% 69.0%, 78.0% 73.5%, 79.0% 79.0%, 79.2% 84.9%, 78.0% 90.0%, 75.0% 93.3%, 70.6% 94.2%, 65.6% 92.8%, 60.6% 89.6%, 56.3% 85.9%, 52.9% 83.1%, 50.0% 82.0%, 47.1% 83.1%, 43.7% 85.9%, 39.4% 89.6%, 34.4% 92.8%, 29.4% 94.2%, 25.0% 93.3%, 22.0% 90.0%, 20.8% 84.9%, 21.0% 79.0%, 22.0% 73.5%, 22.8% 69.0%, 22.3% 66.0%, 19.9% 64.0%, 15.7% 62.5%, 10.4% 60.6%, 5.2% 57.9%, 1.4% 54.3%, 0.0% 50.0%, 1.4% 45.7%, 5.2% 42.1%, 10.4% 39.4%, 15.7% 37.5%, 19.9% 36.0%, 22.3% 34.0%, 22.8% 31.0%, 22.0% 26.5%, 21.0% 21.0%, 20.8% 15.1%, 22.0% 10.0%, 25.0% 6.7%, 29.4% 5.8%, 34.4% 7.2%, 39.4% 10.4%, 43.7% 14.1%, 47.1% 16.9%, 50.0% 18.0%, 52.9% 16.9%, 56.3% 14.1%, 60.6% 10.4%, 65.6% 7.2%, 70.6% 5.8%, 75.0% 6.7%, 78.0% 10.0%, 79.2% 15.1%, 79.0% 21.0%, 78.0% 26.5%, 77.2% 31.0%, 77.7% 34.0%, 80.1% 36.0%, 84.3% 37.5%, 89.6% 39.4%, 94.8% 42.1%, 98.6% 45.7%); border: 0; box-shadow: none; }
.photo-card.frame-heart:not(.tex-none) { clip-path: polygon(50.0% 26.0%, 50.0% 25.5%, 50.3% 24.0%, 50.9% 21.8%, 52.0% 18.9%, 53.8% 15.7%, 56.2% 12.4%, 59.4% 9.3%, 63.3% 6.8%, 67.7% 4.9%, 72.5% 4.0%, 77.5% 4.1%, 82.5% 5.3%, 87.2% 7.4%, 91.5% 10.6%, 95.1% 14.5%, 97.8% 19.0%, 99.4% 23.9%, 100.0% 29.1%, 99.4% 34.4%, 97.8% 39.7%, 95.1% 44.9%, 91.5% 49.9%, 87.2% 54.7%, 82.5% 59.4%, 77.5% 63.9%, 72.5% 68.2%, 67.7% 72.5%, 63.3% 76.5%, 59.4% 80.4%, 56.3% 84.1%, 53.8% 87.4%, 52.0% 90.3%, 50.9% 92.7%, 50.3% 94.5%, 50.0% 95.6%, 50.0% 96.0%, 50.0% 95.6%, 49.7% 94.5%, 49.1% 92.7%, 48.0% 90.3%, 46.2% 87.4%, 43.7% 84.1%, 40.6% 80.4%, 36.7% 76.5%, 32.3% 72.5%, 27.5% 68.2%, 22.5% 63.9%, 17.5% 59.4%, 12.8% 54.7%, 8.5% 49.9%, 4.9% 44.9%, 2.2% 39.7%, 0.6% 34.4%, 0.0% 29.1%, 0.6% 23.9%, 2.2% 19.0%, 4.9% 14.5%, 8.5% 10.6%, 12.8% 7.4%, 17.5% 5.3%, 22.5% 4.1%, 27.5% 4.0%, 32.3% 4.9%, 36.7% 6.8%, 40.6% 9.3%, 43.8% 12.4%, 46.2% 15.7%, 48.0% 18.9%, 49.1% 21.8%, 49.7% 24.0%, 50.0% 25.5%); border: 0; box-shadow: none; }
.photo-card.frame-heart:not(.tex-none), .photo-card.frame-star:not(.tex-none) { padding: 16px; }
.photo-card.frame-heart:not(.tex-none) .av-wrap { margin-top: -4px; }
.photo-card.frame-star:not(.tex-none) { padding: 26px; }
.prof-avatar:has(.frame-hexagon, .frame-diamond, .frame-star, .frame-flower, .frame-heart) { filter: drop-shadow(2px 0 0 var(--edge)) drop-shadow(-2px 0 0 var(--edge)) drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 -2px 0 var(--edge)) drop-shadow(var(--drop-sm)); }
/* frame texture picker on Edit profile */
.tex-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tex-opt { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; min-width: 64px; }
.tex-opt .photo-card { width: 40px; height: 40px; padding: 0 !important; border-radius: 10px; border: 1px solid var(--edge); box-shadow: var(--drop-sm); clip-path: none !important; }
.tex-opt .photo-card.tex-none { background: repeating-linear-gradient(45deg, var(--surface) 0 5px, var(--surface-2) 5px 10px); }

/* ---------- Edit profile fixes (9 Nov): even tiles, ring colours on every shape, font dropdown, frame preview ---------- */
.shape-opts, .ring-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ring-opts { grid-template-columns: repeat(3, minmax(84px, 120px)); }
.shape-opt { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px 10px; min-width: 0; min-height: 92px; font-size: .8rem; text-align: center; }
.shape-opt .av-wrap { margin: 4px auto 0; }
.shape-opt .opt-label { line-height: 1.1; }
/* ring colour drawn around cut-out shapes too (they can't use the round ring) */
.ring-holo.shape-hexagon, .ring-holo.shape-diamond, .ring-holo.shape-flower, .ring-holo.shape-star, .ring-holo.shape-heart { filter: drop-shadow(2.5px 0 0 #9f8bff) drop-shadow(-2.5px 0 0 #4fd1ff) drop-shadow(0 2.5px 0 #7ef0b0) drop-shadow(0 -2.5px 0 #ff7eb9); }
.ring-gradient.shape-hexagon, .ring-gradient.shape-diamond, .ring-gradient.shape-flower, .ring-gradient.shape-star, .ring-gradient.shape-heart { filter: drop-shadow(2.5px 0 0 var(--ua)) drop-shadow(-2.5px 0 0 var(--ub)) drop-shadow(0 2.5px 0 var(--ub)) drop-shadow(0 -2.5px 0 var(--ua)); }
/* rounded shapes: make sure the ring follows the shape's corners */
.ring-holo.shape-squircle .av, .ring-gradient.shape-squircle .av, .ring-holo.shape-square .av, .ring-gradient.shape-square .av, .ring-holo.shape-polaroid .av, .ring-gradient.shape-polaroid .av { border-radius: inherit; }
/* name font dropdown */
.font-field { display: block; }
.font-pick { position: relative; max-width: 420px; }
.font-pick summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 10px 14px;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--surface); box-shadow: var(--drop-sm); font-size: 1.25rem; }
.font-pick summary::-webkit-details-marker { display: none; }
.font-pick summary:focus-visible { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.font-pick[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.font-caret { font-size: .9rem; color: var(--mist); transition: transform .15s; }
.font-pick[open] .font-caret { transform: rotate(180deg); }
.font-list { position: absolute; z-index: 20; left: 0; right: 0; max-height: 340px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: var(--drop-sm); padding: 6px; }
.font-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.font-item input { position: absolute; opacity: 0; pointer-events: none; }
.font-item:hover, .font-item:has(input:focus-visible) { background: var(--surface-2); }
.font-item:has(input:checked) { background: var(--note-1); }
.font-sample { font-size: 1.3rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-item small { color: var(--mist); font-size: .75rem; flex: none; }
/* Spotify player size */
.sp-size { margin-top: 4px; }
/* live preview: photo sits in its frame, at preview size */
.pv-av .photo-card .av-wrap { --s: 84px !important; }
.pv-av .photo-card { display: inline-block; }
.pv-av .photo-card.frame-polaroid { padding: 6px 6px 18px; transform: rotate(-3deg); }
.pv-av .photo-card:not(.frame-polaroid):not(.tex-none) { padding: 6px; }
.pv-av .photo-card.frame-heart:not(.tex-none) { padding: 10px; }
.pv-av .photo-card.frame-star:not(.tex-none) { padding: 15px; }
.pv-av .av-wrap { box-shadow: none !important; }
.pv-av:has(.frame-hexagon:not(.tex-none), .frame-diamond:not(.tex-none), .frame-flower:not(.tex-none), .frame-star:not(.tex-none), .frame-heart:not(.tex-none)) { filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)) drop-shadow(var(--drop-sm)); }
@media (max-width: 560px) { .ring-opts { grid-template-columns: repeat(3, 1fr); } }

/* two-colour rings: Gradient uses both of your colours, Holo the rainbow foil (round and rounded shapes) */
.ring-gradient:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart), .ring-holo:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart) { padding: calc(2px + var(--s) * .045); }
.ring-gradient:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart) { background: linear-gradient(135deg, var(--ua), var(--ub)); }
.ring-holo:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart) { background: var(--holo); }
.ring-gradient:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart) .av, .ring-holo:not(.shape-hexagon):not(.shape-diamond):not(.shape-flower):not(.shape-star):not(.shape-heart) .av { box-shadow: 0 0 0 2px var(--surface) !important; }
.photo-card .ring-gradient, .photo-card .ring-holo { padding: 0; background: none; }

/* ---------- Sign-up form (9 Nov) ---------- */
.req { color: var(--pin); font-weight: 800; }
.req-note { margin: 0 0 6px; }
.reg-optional { margin: 10px 0 14px; border: 2px dashed var(--line); border-radius: 14px; padding: 4px 14px; }
.reg-optional[open] { padding-bottom: 10px; }
.reg-optional summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.reg-optional summary small { font-weight: 400; }
.auth .row2 { gap: 10px; }
@media (max-width: 480px) { .auth .row2 { grid-template-columns: 1fr; } }

/* ---------- Profile widgets (9 Nov) ---------- */
.wg-wrap { margin: 18px 0 22px; }
.wg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.wg-bar .section-h { margin: 0; margin-right: auto; }
.wg-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.wg { position: relative; padding: 20px 16px 16px; background: var(--surface); border: 1px solid var(--edge); border-radius: 6px 6px 16px 6px;
  box-shadow: var(--drop); min-height: 120px; min-width: 0; overflow-wrap: anywhere; transition: transform .15s, box-shadow .15s; }
.wg-wide { grid-column: span 2; }
@media (max-width: 560px) { .wg-board { grid-template-columns: 1fr; } .wg-wide { grid-column: auto; } }
.wg:nth-child(3n+1) { transform: rotate(-.6deg); }
.wg:nth-child(3n+2) { transform: rotate(.5deg); }
.wg-tape { position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: var(--tape);
  border: 1px solid rgba(0,0,0,.06); transform: rotate(-3deg); }
.wg-h { font-size: 1rem; margin: 0 0 10px; }
.wg-label { font-weight: 700; font-size: .85rem; color: var(--mist); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.wg-big { font: 800 3rem/1 var(--display); margin: 6px 0 2px; }
.wg-small { margin: 0; color: var(--mist); font-weight: 600; }
.wg-countdown, .wg-mood { text-align: center; }
/* sticky notes */
.wg-note { background: var(--note-1); }
.note-yellow.wg-note, .wg-colour.note-yellow .wg-swatch { background: #fff0a3; }
.note-mint.wg-note, .wg-colour.note-mint .wg-swatch { background: #cdf3dd; }
.note-pink.wg-note, .wg-colour.note-pink .wg-swatch { background: #ffd6e7; }
.note-blue.wg-note, .wg-colour.note-blue .wg-swatch { background: #cfe6ff; }
.note-lilac.wg-note, .wg-colour.note-lilac .wg-swatch { background: #e5dcff; }
.wg-note { color: #17141f; }
.wg-note-text { font: 600 1.15rem/1.4 "Caveat", var(--body); font-size: 1.35rem; white-space: pre-wrap; margin: 0; }
/* quote */
.wg-quote-text { margin: 0; }
.wg-quote-text p { font: 700 1.15rem/1.35 "Instrument Serif", Georgia, serif; font-size: 1.3rem; margin: 0; }
.wg-quote-text p::before { content: "“"; font-size: 2.2rem; line-height: 0; vertical-align: -.4em; margin-right: 2px; color: var(--pin); }
.wg-quote-text footer { margin-top: 8px; color: var(--mist); font-weight: 600; }
/* currently */
.wg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wg-list b { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--mist); margin-right: 4px; }
/* links */
.wg-linklist { display: flex; flex-wrap: wrap; gap: 8px; }
/* most loved */
.wg-tops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wg-top { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--edge); color: #fff; text-decoration: none; }
.wg-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-top-thought { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; font-size: .7rem; font-weight: 700; text-align: center;
  background: linear-gradient(135deg, var(--t1), var(--t2)); }
.wg-top small { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.55); font-weight: 700; font-size: .7rem; }
/* mood */
.wg-emoji { font-size: 3.2rem; line-height: 1; margin: 8px 0 4px; }
.wg-mood-word { font: 800 1.2rem var(--display); margin: 0; text-transform: capitalize; }
.wg-mood-word.big { font-size: 1.5rem; margin-top: 10px; }
/* stats */
.wg-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.wg-statgrid div { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.wg-statgrid dt { font-size: .75rem; color: var(--mist); font-weight: 600; }
.wg-statgrid dd { margin: 0; font: 800 1.35rem var(--display); }
.wg-music .sp-embed { box-shadow: none; }
.wg-music { padding: 18px 12px 12px; }

/* editing */
.wg-tools { position: absolute; top: -14px; right: 8px; z-index: 3; display: flex; gap: 4px; }
.wg-tools[hidden] { display: none; }
.wg-tools button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink);
  font: 800 .95rem var(--body); cursor: pointer; box-shadow: var(--drop-sm); display: grid; place-items: center; padding: 0; }
.wg-tools button:hover { background: var(--note-1); }
.wg-tools .danger:hover { background: var(--danger); color: #fff; }
.wg-tools .wg-handle { cursor: grab; touch-action: none; font-size: 1.1rem; }
.wg-tools .wg-kb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; box-shadow: none; }
.wg-tools .wg-kb:focus { position: static; width: 30px; height: 30px; clip: auto; border: 1px solid var(--edge); }
.editing .wg { transform: none; outline: 2px dashed var(--line); outline-offset: 4px; }
.wg-sorting { cursor: grabbing; user-select: none; }
.wg.wg-dragging { transform: scale(1.03) rotate(1.5deg); box-shadow: var(--drop-lg); z-index: 5; opacity: .92; outline-color: var(--pin); }
.wg-sorting .wg:not(.wg-dragging) { transition: transform .15s; }
.wg-empty { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 26px 18px; text-align: center; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px dashed var(--edge); border-radius: 16px; }
.wg-empty b { font: 800 1.15rem var(--display); }
.wg-empty span:not(.btn) { color: var(--mist); max-width: 46ch; }
.wg-empty:hover { background: var(--surface-2); }
/* add / change dialog */
.wg-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border: 1px solid var(--edge);
  border-radius: 16px; box-shadow: var(--drop-lg); color: var(--ink); background: var(--surface); }
.wg-dialog::backdrop { background: rgba(20, 16, 30, .45); }
.wg-dialog h2 { margin: 0 0 14px; font-size: 1.3rem; padding-right: 36px; }
.wg-dialog-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge);
  background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 800; }
.wg-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wg-type { display: grid; gap: 3px; text-align: left; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; }
.wg-type:hover:not(:disabled), .wg-type:focus-visible { border-color: var(--edge); box-shadow: var(--drop-sm); }
.wg-type:disabled { opacity: .45; cursor: not-allowed; }
.wg-type-emoji { font-size: 1.6rem; }
.wg-type small { color: var(--mist); font-size: .78rem; line-height: 1.3; }
.wg-form { display: grid; gap: 10px; }
.wg-form label { display: grid; gap: 4px; font-weight: 600; }
.wg-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.wg-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.wg-colour { display: inline-flex; align-items: center; gap: 8px; }
.wg-swatch { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--edge); }
@media (prefers-reduced-motion: reduce) { .wg, .wg.wg-dragging { transition: none; transform: none; } }
.wg-bar [hidden], .wg-tools[hidden] { display: none !important; }

/* ---------- Profile extras (9 Nov, late): badges, photo strip, world clock, board styles, share ---------- */
.wg-h small { font-weight: 600; font-size: .78rem; margin-left: 4px; }
.wg-badgegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wg-badgegrid li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 1.35rem; cursor: help;
  border: 1px solid var(--edge); background: var(--note-1); box-shadow: var(--drop-sm); }
.wg-badgegrid li.locked { background: var(--surface-2); border-style: dashed; border-color: var(--line); box-shadow: none; }
.wg-badgegrid li.locked span { filter: grayscale(1); opacity: .35; }
.wg-badgegrid li:focus-visible { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.wg-photostrip { padding: 18px 10px 12px; background: #161616; color: #eee; }
.wg-film { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 12px 6px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #e9e6dc 8px 14px, transparent 14px 22px) top / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, transparent 0 8px, #e9e6dc 8px 14px, transparent 14px 22px) bottom / 100% 6px no-repeat; }
.wg-frame { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: #333; }
.wg-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-film-empty { margin: 0; padding: 18px 0; text-align: center; color: #bbb; grid-column: 1 / -1; }
.wg-clock { text-align: center; }
.wg-time { font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-size: 2.3rem; white-space: nowrap; }
/* backgrounds behind the widgets */
.wg-board[class*="board-"] { border-radius: 18px; }
.wg-board.board-cork, .wg-board.board-grid, .wg-board.board-plain { padding: 26px 18px 18px; border: 1px solid var(--edge); box-shadow: var(--drop); }
.wg-board.board-cork { background-color: #b98a57; background-image: radial-gradient(rgba(70,40,15,.45) 1px, transparent 1.6px), radial-gradient(rgba(255,228,185,.35) 1px, transparent 1.6px);
  background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.wg-board.board-grid { background-color: var(--surface); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 22px 22px; }
.wg-board.board-plain { background: var(--surface-2); }
.wg-style select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; }
.wg-form select { width: 100%; }

/* ---------- Share profile card with QR code (9 Nov) ---------- */
.share-sheet { padding: 26px 22px 20px; }
.ss-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--edge);
  background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 800; }
.ss-head { display: flex; align-items: center; gap: 14px; margin: 4px 40px 16px 0; }
.ss-av { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; border: 1px solid var(--edge);
  color: #fff; font: 800 1.4rem var(--display); box-shadow: var(--drop-sm); }
.ss-av img { width: 100%; height: 100%; object-fit: cover; }
.ss-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.ss-handle { margin: 2px 0 0; }
.ss-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--surface-2); border-radius: 12px; }
.ss-tabs button { border: 0; background: none; padding: 9px; border-radius: 9px; font: 700 .92rem var(--body); color: var(--mist); cursor: pointer; }
.ss-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--edge), var(--drop-sm); }
.ss-copy { display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--surface-2); }
.ss-copy input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 500 .92rem var(--body); outline: 0; padding: 0; }
.ss-copy .btn.ok { background: #1db954; color: #06210f; }
.ss-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px; margin-top: 16px; }
.ss-app { display: grid; justify-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; color: var(--ink); text-decoration: none;
  font: 600 .78rem var(--body); cursor: pointer; border-radius: 12px; }
.ss-app i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--edge); box-shadow: var(--drop-sm);
  font: 800 1.25rem var(--display); font-style: normal; color: #fff; transition: transform .12s; }
.ss-app:hover i, .ss-app:focus-visible i { transform: translate(-1px, -2px); }
.ss-wa i { background: #25d366; }
.ss-x2 i { background: #0f0f10; }
.ss-fb i { background: #1877f2; font-family: Georgia, serif; }
.ss-mail i { background: var(--note-1); color: #17141f; }
.ss-more i { background: var(--surface); color: var(--ink); }
.ss-qr { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ss-qr canvas { border-radius: 16px; border: 1px solid var(--edge); box-shadow: var(--drop); background: #fff; min-height: 120px; max-width: 100%; }
.ss-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.ss-qr-actions [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ss-app i { transition: none; } }

/* =====================================================================================
   10 Nov: shape fixes, smaller names, badge hover cards, awards page, MP3 song player,
   more colours, pronoun/status dropdowns, private visit count
   ===================================================================================== */

/* ---- name size: was up to 4.4rem, now a calmer size that still stands out ---- */
.prof-name { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.08; letter-spacing: -.025em; }
.prof-name[data-namefont="Press Start 2P"] { font-size: clamp(1rem, 2vw, 1.45rem); line-height: 1.4; letter-spacing: 0; }
.prof-name[data-namefont="Bebas Neue"], .prof-name[data-namefont="Orbitron"], .prof-name[data-namefont="Unbounded"] { letter-spacing: 0; }
.prof-name[data-namefont="Pacifico"], .prof-name[data-namefont="Lobster"], .prof-name[data-namefont="Caveat"] { line-height: 1.25; letter-spacing: 0; }
.pv-name { font-size: 1.35rem; }

/* ---- photo shapes: the whole photo shows, no squashing, every shape the same size ----
   Photos always fill their shape (cover) and are centred slightly high, where faces usually are. */
.av img { display: block; object-fit: cover; object-position: 50% 35%; }
/* fuller star and a properly filled heart, so the photo isn't cut down to a sliver */
.shape-star .av, .photo-card.frame-star:not(.tex-none) { clip-path: polygon(50% 2.4%, 67.9% 30.4%, 100% 38.8%, 79% 64.4%, 80.9% 97.6%, 50% 85.5%, 19.1% 97.6%, 21% 64.4%, 0 38.8%, 32.1% 30.4%); }
.shape-star .av img { object-position: 50% 45%; }
.shape-heart .av img, .shape-diamond .av img { object-position: 50% 40%; }
.shape-hexagon .av { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.photo-card.frame-hexagon:not(.tex-none) { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
/* cut-out frames: one even border all round instead of the extra padding that made stars and hearts huge */
.photo-card.frame-hexagon:not(.tex-none), .photo-card.frame-diamond:not(.tex-none), .photo-card.frame-flower:not(.tex-none),
.photo-card.frame-star:not(.tex-none), .photo-card.frame-heart:not(.tex-none) { padding: 14px; }
.photo-card.frame-diamond:not(.tex-none), .photo-card.frame-star:not(.tex-none) { padding: 22px; }
.photo-card.frame-heart:not(.tex-none) .av-wrap { margin-top: 0; }
.photo-card .av-wrap { display: grid; }
.pv-av .photo-card.frame-hexagon:not(.tex-none), .pv-av .photo-card.frame-flower:not(.tex-none), .pv-av .photo-card.frame-heart:not(.tex-none) { padding: 8px; }
.pv-av .photo-card.frame-diamond:not(.tex-none), .pv-av .photo-card.frame-star:not(.tex-none) { padding: 13px; }
/* the outline drawn round cut-out shapes was 1.5px on the photo but missing on the frame's inner edge */
.photo-card .shape-hexagon, .photo-card .shape-diamond, .photo-card .shape-flower, .photo-card .shape-star, .photo-card .shape-heart { filter: none; }
/* polaroid + rounded frames: keep the photo square inside so it isn't stretched */
.photo-card .av-wrap, .photo-card .av { aspect-ratio: 1; }
/* small avatars everywhere: never squash when a flex row is tight */
.av-wrap { min-width: var(--s); min-height: var(--s); }
@media (max-width: 760px) {
  .photo-card.frame-hexagon:not(.tex-none), .photo-card.frame-flower:not(.tex-none), .photo-card.frame-heart:not(.tex-none) { padding: 10px; }
  .photo-card.frame-diamond:not(.tex-none), .photo-card.frame-star:not(.tex-none) { padding: 15px; }
}

/* ---- visit count: only the owner sees it ---- */
.stats.stats-3 { grid-template-columns: repeat(3, auto); }
.only-you { font-size: .7rem; vertical-align: 1px; opacity: .7; }
.wg-statgrid.stat-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- badges widget: hover (or tap) a badge for what it's for and how to get it ---- */
.wg-badges { overflow: visible; z-index: 1; }
.wg-badges:has(li:hover, li:focus) { z-index: 5; }
.wg-badgegrid li { position: relative; }
.wg-badgegrid li:hover, .wg-badgegrid li:focus { transform: scale(1.12); z-index: 3; }
.badge-pop { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30; width: 210px; transform: translateX(-50%) translateY(4px);
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; font-size: .8rem; line-height: 1.35; font-weight: 500;
  background: var(--ink); color: var(--surface); border-radius: 12px; box-shadow: 3px 3px 0 rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s, transform .12s, visibility .12s; }
.badge-pop::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.badge-pop b { font-size: .9rem; }
.badge-pop em { font-style: normal; font-weight: 700; color: #ffd86b; }
.badge-pop em.badge-got { color: #7ef0b0; }
.badge-pop small { opacity: .75; }
.badge-prog { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.badge-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--ua), var(--ub)); }
.wg-badgegrid li:hover .badge-pop, .wg-badgegrid li:focus .badge-pop { opacity: 1; visibility: visible; transform: translateX(-50%); }
.wg-badgegrid li.locked:hover span[aria-hidden], .wg-badgegrid li.locked:focus span[aria-hidden] { filter: none; opacity: 1; }
/* keep the card on screen for badges at the left and right edges */
.wg-badgegrid li:nth-child(5n+1) .badge-pop { left: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(5n+1) .badge-pop::after { left: 22px; }
.wg-badgegrid li:nth-child(5n) .badge-pop { left: auto; right: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(5n) .badge-pop::after { left: auto; right: 17px; }
.wg-badgegrid li:nth-child(5n+1):hover .badge-pop, .wg-badgegrid li:nth-child(5n+1):focus .badge-pop,
.wg-badgegrid li:nth-child(5n):hover .badge-pop, .wg-badgegrid li:nth-child(5n):focus .badge-pop { transform: none; }
.wg-badgegrid li.locked span.badge-pop, .wg-badgegrid li span.badge-pop { filter: none; }
.wg-badgegrid li.locked .badge-pop { opacity: 0; }
.wg-badgegrid li.locked:hover .badge-pop, .wg-badgegrid li.locked:focus .badge-pop { opacity: 1; }
.wg-more { display: inline-block; margin-top: 10px; font-size: .8rem; font-weight: 700; }

/* ---- awards page ---- */
.awards { max-width: 980px; margin: 0 auto; }
.awards-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; margin: 10px 0 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ua) 14%, var(--surface)), color-mix(in srgb, var(--ub) 14%, var(--surface))); }
.awards-title h1 { margin: 2px 0 6px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.03em; }
.awards-title p { margin: 0; }
.awards-ring { --pct: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(var(--ua), var(--ub) calc(var(--pct) * 1%), var(--surface-2) 0);
  border: 1px solid var(--edge); box-shadow: var(--drop-sm); }
.awards-ring b { font: 800 1.7rem/1 var(--display); }
.awards-ring b small { font-size: .9rem; color: var(--mist); }
.awards-ring span { font-size: .72rem; color: var(--mist); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.awards-group .section-h small { font-size: .8rem; font-weight: 600; }
.awards-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.award { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px; border-radius: 16px; align-items: start; }
.award-medal { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; flex: none;
  background: linear-gradient(135deg, #ffe680, #ffb84d); border: 1px solid var(--edge); box-shadow: var(--drop-sm); }
.award.locked .award-medal { background: var(--surface-2); border-style: dashed; border-color: var(--mist); box-shadow: none; filter: grayscale(1); opacity: .6; }
.award.locked { box-shadow: 2px 2px 0 var(--line); border-color: var(--line); }
.award h3 { margin: 2px 0 4px; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.award-tick { font-size: .72rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; background: var(--note-2); border: 1px solid var(--edge); }
.award-what { margin: 0 0 6px; color: var(--mist); font-size: .9rem; }
.award-how { margin: 0 0 8px; font-size: .88rem; }
.award-prog { height: 8px; border-radius: 8px; background: var(--surface-2); border: 1.5px solid var(--line); overflow: hidden; margin-bottom: 3px; }
.award-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--ua), var(--ub)); }
.awards-foot { margin: 34px 0 10px; }
@media (max-width: 640px) {
  .awards-head { grid-template-columns: auto 1fr; padding: 16px; }
  .awards-ring { grid-column: 1 / -1; justify-self: center; }
  .awards-grid { grid-template-columns: 1fr; }
}

/* ---- profile song player (MP3) ---- */
.song-player { --cover: 52px; display: grid; grid-template-columns: var(--cover) 1fr; gap: 12px; align-items: center; padding: 8px 12px 8px 8px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-sm); max-width: 420px; }
.prof-music { margin: 12px 0 4px; }
.song-cover { position: relative; width: var(--cover); height: var(--cover); padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, var(--ua), var(--ub)); display: grid; place-items: center; }
.song-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-cover-blank { color: #fff; font-size: calc(var(--cover) * .42); font-weight: 800; }
.song-btn { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.28); transition: background .15s; }
.song-cover:hover .song-btn, .song-cover:focus-visible .song-btn { background: rgba(0,0,0,.45); }
.song-cover:focus-visible { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.song-btn svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.song-btn .i-pause, .playing .song-btn .i-play { display: none; }
.playing .song-btn .i-pause { display: block; }
.song-meta { min-width: 0; }
.song-title { margin: 0; font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.song-artist { margin: 0; font-size: .8rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-bar { position: relative; height: 5px; margin-top: 7px; border-radius: 5px; background: var(--surface-2); cursor: pointer; overflow: hidden; }
.song-bar:focus-visible { outline: 2px solid #7c6cff; outline-offset: 2px; }
.song-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ua), var(--ub)); border-radius: inherit; }
.song-time { display: flex; justify-content: space-between; margin: 3px 0 0; font-size: .7rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.song-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.song-eq i { width: 3px; height: 4px; border-radius: 2px; background: linear-gradient(var(--ua), var(--ub)); }
.playing .song-eq i { animation: song-eq .9s ease-in-out infinite; }
.playing .song-eq i:nth-child(2) { animation-delay: -.3s; } .playing .song-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes song-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.song-large { --cover: 96px; padding: 10px 14px 10px 10px; }
.song-large .song-title { font-size: 1.05rem; }
.wg-music .song-player { box-shadow: none; border-width: 0; padding: 0; max-width: none; background: none; }
.wg-music .song-large { --cover: 84px; }
.song-broken .song-cover { opacity: .5; }
.song-current { display: grid; gap: 10px; margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .playing .song-eq i { animation: none; height: 9px; } }

/* ---- Edit profile: more colours, dropdowns ---- */
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.colour-field { display: grid; gap: 8px; align-content: start; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; max-width: 280px; }
.swatch { aspect-ratio: 1; width: 100%; padding: 0; border-radius: 8px; border: 1px solid var(--edge); background: var(--c); cursor: pointer; box-shadow: var(--drop-sm); }
.swatch:hover, .swatch:focus-visible { transform: scale(1.15); outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.pick-field { display: grid; gap: 6px; align-content: start; }
.pick-field label[hidden], .status-row label[hidden] { display: none; }
.opt-bg.page-blush { background: #ffd9e8; } .opt-bg.page-mint { background: #d3f8e6; } .opt-bg.page-sky { background: #d6ecff; }
.opt-bg.page-lemon { background: #fff6c2; } .opt-bg.page-lilac { background: #e6dcff; } .opt-bg.page-peach { background: #ffe1cc; }
/* the new page colours (light tints; dark mode keeps its own background) */
.page-blush, .page-mint, .page-sky, .page-lemon, .page-lilac, .page-peach { --dots: rgba(0,0,0,.09); }
.page-blush::before, .page-mint::before, .page-sky::before, .page-lemon::before, .page-lilac::before, .page-peach::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75; }
.page-blush::before { background: #ffd9e8; } .page-mint::before { background: #d3f8e6; } .page-sky::before { background: #d6ecff; }
.page-lemon::before { background: #fff6c2; } .page-lilac::before { background: #e6dcff; } .page-peach::before { background: #ffe1cc; }
:root[data-theme="dark"] .page-blush::before, :root[data-theme="dark"] .page-mint::before, :root[data-theme="dark"] .page-sky::before,
:root[data-theme="dark"] .page-lemon::before, :root[data-theme="dark"] .page-lilac::before, :root[data-theme="dark"] .page-peach::before { opacity: .12; }
.pv.page-blush { background: #ffd9e8; } .pv.page-mint { background: #d3f8e6; } .pv.page-sky { background: #d6ecff; }
.pv.page-lemon { background: #fff6c2; } .pv.page-lilac { background: #e6dcff; } .pv.page-peach { background: #ffe1cc; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }
.swatch { flex: none; width: 24px; height: 24px; aspect-ratio: auto; }
.wg-badgegrid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wg-badgegrid li:nth-child(5n+1) .badge-pop, .wg-badgegrid li:nth-child(5n) .badge-pop { left: 50%; right: auto; transform: translateX(-50%) translateY(4px); }
.wg-badgegrid li:nth-child(5n+1) .badge-pop::after, .wg-badgegrid li:nth-child(5n) .badge-pop::after { left: 50%; right: auto; }
.wg-badgegrid li:nth-child(5n+1):hover .badge-pop, .wg-badgegrid li:nth-child(5n+1):focus .badge-pop,
.wg-badgegrid li:nth-child(5n):hover .badge-pop, .wg-badgegrid li:nth-child(5n):focus .badge-pop { transform: translateX(-50%); }
.wg-badgegrid li:nth-child(4n+1) .badge-pop { left: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(4n+1) .badge-pop::after { left: 24px; }
.wg-badgegrid li:nth-child(4n) .badge-pop { left: auto; right: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(4n) .badge-pop::after { left: auto; right: 19px; }
.wg-badgegrid li:nth-child(4n+1):hover .badge-pop, .wg-badgegrid li:nth-child(4n+1):focus .badge-pop,
.wg-badgegrid li:nth-child(4n):hover .badge-pop, .wg-badgegrid li:nth-child(4n):focus .badge-pop { transform: none; }
.awards p.awards-foot { margin: 40px 0 10px; }
.colour-field .swatches { margin-bottom: 14px; }
.wg-badgegrid { max-width: 260px; }
/* name fix (10 Nov, 2nd pass): the gradient only paints inside the heading's box, so tails of letters
   (g, j, y, script capitals) that reach outside it were cut off. Give every font room on all sides. */
.prof-name { line-height: 1.3; padding: .1em .25em .22em .12em; margin: -.1em -.25em -.12em -.12em; letter-spacing: 0; }
.prof-name[data-namefont="Pacifico"], .prof-name[data-namefont="Lobster"], .prof-name[data-namefont="Caveat"], .prof-name[data-namefont="Permanent Marker"] { line-height: 1.45; }
.pv-name { line-height: 1.3; padding: .08em .2em .2em .1em; }

/* ---- song library picker (10 Nov, 2nd pass) ---- */
.song-current-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.song-current-actions .check { margin: 0; }
.song-picker { margin: 14px 0 6px; padding: 14px; border: 1px solid var(--edge); border-radius: 16px; background: var(--surface-2); }
.song-search { margin-bottom: 10px; }
.song-moods { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: thin; }
.song-moods .chip-btn { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); font: 700 .8rem var(--body); cursor: pointer; white-space: nowrap; color: var(--ink); }
.song-moods .chip-btn.on { background: var(--ink); color: var(--surface); }
.song-results { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; display: grid; gap: 4px; }
.song-row { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; background: var(--surface); }
.song-row-art { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, var(--ua), var(--ub)); }
.song-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.song-row-meta { min-width: 0; display: grid; }
.song-row-meta b, .song-row-meta small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-row-meta b { font-size: .9rem; } .song-row-meta small { color: var(--mist); font-size: .78rem; }
.song-row-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); cursor: pointer; font-size: .75rem; color: var(--ink); }
.song-row-play.on { background: var(--ink); color: var(--surface); }
.song-row .btn.sm { white-space: nowrap; }
.song-e { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; background: var(--mist); color: var(--surface); font-size: .6rem; font-weight: 800; flex: none; }
.song-src { font-size: .68rem; color: var(--mist); text-decoration: none; }
.song-src:hover { text-decoration: underline; }
.song-chosen .song-time { justify-content: flex-start; }
@media (max-width: 560px) { .song-row { grid-template-columns: 40px 1fr auto; } .song-row-art { width: 40px; height: 40px; } .song-row .btn.sm { grid-column: 2 / -1; justify-self: start; } }
.song-current[hidden], .song-picker[hidden], [data-song-add][hidden], [data-song-status][hidden] { display: none !important; }

/* ---- Settings grouped into categories (10 Nov) ---- */
.settings.settings-v2 { max-width: 940px; }
.settings-v2 .set-me { max-width: none; }
.set-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 18px; }
.set-nav { position: sticky; top: 90px; display: grid; gap: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--drop); }
.set-nav a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; }
.set-nav a:hover { background: var(--surface-2); }
.set-nav a.on { background: var(--ink); color: var(--surface); }
.set-group { scroll-margin-top: 90px; margin-bottom: 30px; }
.set-group-h { display: flex; gap: 10px; align-items: center; font-size: 1.3rem; margin: 0 0 12px; letter-spacing: -.02em; }
.set-groups .set-card { scroll-margin-top: 90px; }
/* the background-alerts button was one huge bold line that ran off the screen on phones */
.set-wrap-btn, .settings-v2 .btn.wide, .settings-v2 [data-desktop-alerts] { white-space: normal; height: auto; min-height: 42px; line-height: 1.3; padding: 10px 14px; font-size: .88rem; text-align: center; max-width: 100%; }
.settings-v2 [data-desktop-alerts] { width: 100%; }
.settings-v2 .set-card { overflow-wrap: anywhere; }
.settings-v2 .seg.set-seg { flex-wrap: wrap; }
.settings-v2 .seg.set-seg label { min-width: 0; }
.text-size-seg .ts-small { font-size: .78rem; } .text-size-seg .ts-large { font-size: 1rem; } .text-size-seg .ts-xl { font-size: 1.1rem; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: 1fr; gap: 12px; }
  .set-nav { top: 8px; z-index: 20; display: flex; overflow-x: auto; gap: 6px; padding: 6px; border-radius: 14px; scrollbar-width: none; }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav a { flex: none; padding: 7px 12px; font-size: .82rem; white-space: nowrap; }
  .set-group { scroll-margin-top: 70px; }
}
.comments-off { padding: 10px 14px; margin: 0; }

/* ---- Reading and motion (10 Nov): set per account in Settings ---- */
html[data-text="small"] { font-size: 14px; }
html[data-text="large"] { font-size: 18px; }
html[data-text="xl"] { font-size: 20px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html[data-contrast="high"] { --mist: #3d3947; --line: #6f6a7d; --dots: #9a94ad; }
html[data-contrast="high"][data-theme="dark"] { --mist: #d4d0de; --line: #8d879c; }
html[data-contrast="high"] .muted, html[data-contrast="high"] .sub, html[data-contrast="high"] small { color: var(--mist); }
html[data-contrast="high"] .card, html[data-contrast="high"] .btn { border-width: 2.5px; }
@media (max-width: 860px) { .set-nav { top: 62px; } .set-group, .set-groups .set-card { scroll-margin-top: 120px; } }

/* ---- light / dark fixes (10 Nov) ---- */
/* the top-bar button shows a sun in dark mode and a moon in light mode */
.theme-btn .tb-sun { display: none; }
:root[data-theme="dark"] .theme-btn .tb-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-btn .tb-moon { display: none; }
.theme-btn span { display: inline-flex; }
/* dark mode: outlines were near-black on a near-black page, so cards and boxes blurred together */
:root[data-theme="dark"], .page-midnight, .page-dark { --edge: #4a4361; --line: #3f3954; --mist: #b4aec6; }
:root[data-theme="dark"] input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] ::placeholder { color: #8f88a3; }
:root[data-theme="dark"] .swatch { border-color: rgba(255,255,255,.25); box-shadow: none; }
/* "Classic white" frame is white in dark mode too */
.photo-card.tex-classic { background: #fff; }
:root[data-theme="dark"] .photo-card.tex-classic .av { border-color: #17141f; }
:root[data-theme="dark"] .tex-opt .photo-card.tex-classic { background: #fff; }
.page-mode-form { display: inline; margin: 0; }
.page-mode-form { display: contents; }

/* =====================================================================================
   10 Nov (night): follow buttons, ⋯ sheet, chat tray tabs, 5 themes, widgets in Settings
   ===================================================================================== */
/* profile buttons: never squash the words (Requested / Request to follow / Message) */
.prof-actions { align-items: stretch; }
.prof-actions .btn { white-space: nowrap; min-height: 42px; padding: 0 18px; font-size: .92rem; line-height: 1; letter-spacing: 0; justify-content: center; }
.prof-actions form.inline { display: flex; }
.prof-actions .more-btn { flex: none !important; width: 46px; padding: 0; font-size: 1.2rem; letter-spacing: 1px; }
@media (max-width: 760px) {
  .prof-actions { display: flex; flex-wrap: nowrap; gap: 8px; }
  .prof-actions > *, .prof-actions .btn { flex: 1 1 0; min-width: 0; }
  .prof-actions .btn { padding: 0 10px; font-size: .88rem; }
  .prof-actions form.inline .btn { width: 100%; }
  .prof-actions .more-btn { flex: 0 0 46px !important; }
}
@media (max-width: 360px) { .prof-actions .btn { font-size: .8rem; padding: 0 6px; } }
.btn[data-tip] { overflow: visible; }

/* the ⋯ menu: a clear sheet that sits above everything */
.more-sheet { border: 1px solid var(--edge); border-radius: 20px; padding: 0; width: min(400px, calc(100vw - 24px)); background: var(--surface); color: var(--ink);
  box-shadow: var(--drop-sm), 0 24px 60px rgba(0,0,0,.3); }
.more-sheet::backdrop { background: rgba(15, 12, 24, .45); }
.more-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 16px 12px; border-bottom: 1.5px solid var(--line); }
.more-head b { display: block; font-size: 1.02rem; } .more-head small { color: var(--mist); }
.more-x { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: .9rem; }
.more-list { display: grid; padding: 8px; }
.more-list form { margin: 0; }
.more-item { width: 100%; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 12px; border: 0; border-radius: 14px;
  background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.more-item:hover, .more-item:focus-visible { background: var(--surface-2); outline: none; }
.more-item b { display: block; font-size: .95rem; } .more-item small { display: block; color: var(--mist); font-size: .8rem; line-height: 1.35; margin-top: 2px; }
.more-item.danger b { color: #e5383b; }
.more-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--surface-2); }
@media (max-width: 560px) {
  .more-sheet { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: 0 -10px 40px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
}

/* chat tray: tabs were squashed flat and ran off the side on phones */
.tray { max-height: 360px; }
.tray-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 10px 4px; overflow: visible; }
.tray-tabs button { flex: none; min-height: 40px; padding: 6px 8px; justify-content: center; font-size: .82rem; font-weight: 700; line-height: 1.15;
  white-space: nowrap; color: var(--ink); }
.tray-tabs button .ic { flex: none; }
.tray-panel { flex: 1 1 auto; min-height: 0; }
@media (max-width: 560px) {
  .tray-tabs button { flex-direction: column; gap: 2px; min-height: 52px; font-size: .72rem; padding: 6px 2px; white-space: normal; text-align: center; }
}
.file-pick { color: var(--ink); }
.place-form label { color: var(--ink); }

/* Edit profile: 5 gradient themes */
.theme-picks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.theme-pick { display: grid; gap: 8px; justify-items: center; padding: 10px 6px 8px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--ink); }
.theme-pick i { width: 100%; aspect-ratio: 1.4; height: auto; border-radius: 10px; }
.theme-pick:hover { border-color: var(--edge); }
.theme-pick.on { border-color: var(--edge); box-shadow: var(--drop-sm); }
.theme-pick.on span::before { content: "✓ "; }
@media (max-width: 560px) { .theme-picks { grid-template-columns: repeat(3, 1fr); } }

/* widgets editor inside Settings */
.wg-in-settings { margin: 12px 0; }
.wg-in-settings .wg-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.tt-ico { font-size: 1rem; line-height: 1; }

/* =====================================================================================
   10 Nov (late night): New post page, photo editor, Drop later / Private, hashtag colouring
   ===================================================================================== */
.maker { max-width: 1000px; margin: 0 auto; padding: 22px 24px 26px; }
.maker-h { margin: 0 0 4px; font-size: 1.6rem; letter-spacing: -.03em; }
.maker-where { margin: 0 0 8px; }
.maker-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; margin-top: 14px; align-items: start; }
.maker-media { display: grid; gap: 12px; }
.maker-drop { aspect-ratio: 1; width: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center;
  border-radius: 20px; border: 2px dashed var(--line); background: var(--surface-2); color: var(--mist); cursor: pointer; font: inherit; }
.maker-drop b { color: var(--ink); font-size: 1.1rem; }
.maker-drop:hover, .maker-drop:focus-visible { border-color: var(--edge); color: var(--ink); }
.maker-stage { position: relative; }
.maker-stage[hidden], .maker-thumbs[hidden], .drop-when[hidden], .tag-suggest[hidden] { display: none !important; }
.maker-frame, .pe-frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 18px; border: 1px solid var(--edge); background: #111; }
.maker-frame img, .pe-frame img { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.maker-edit-btn { position: absolute; right: 12px; bottom: 12px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink);
  font: 800 .88rem var(--body); cursor: pointer; box-shadow: var(--drop-sm); }
.maker-edit-btn[hidden] { display: none; }
.maker-count { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; font-weight: 700; }
.maker-count[hidden] { display: none; }
.maker-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.maker-thumb { position: relative; width: 68px; height: 68px; border-radius: 12px; border: 2px solid var(--line); overflow: visible; background: var(--surface-2); padding: 0; }
.maker-thumb.on { border-color: var(--edge); box-shadow: var(--drop-sm); }
.maker-thumb .mt-pick { width: 100%; height: 100%; padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden; cursor: pointer; display: block; }
.maker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.maker-thumb .mt-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font-size: .65rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.maker-thumb.add { display: grid; place-items: center; font-size: 1.6rem; color: var(--mist); border-style: dashed; cursor: pointer; }
.maker-details { display: grid; gap: 14px; align-content: start; }
.maker-details > label, .cap-field > label { display: grid; gap: 6px; font-weight: 700; }
.maker-details input[name="title"] { font-size: 1.05rem; font-weight: 700; }
.maker-opts { display: grid; gap: 4px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: 16px; }
.maker-opts .switch-row { padding: 10px 0; }
.maker-opts .switch-row + .switch-row, .drop-when + .switch-row { border-top: 1.5px solid var(--line); }
.drop-when { display: grid; gap: 8px; padding: 2px 0 12px; }
.drop-when label { display: grid; gap: 6px; font-weight: 700; margin: 0; }
.drop-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.drop-quick .chip-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font: 700 .8rem var(--body); cursor: pointer; }
.drop-quick .chip-btn:hover { background: var(--surface-2); }
@media (max-width: 760px) { .maker { padding: 16px; } .maker-grid { grid-template-columns: 1fr; gap: 18px; } }

/* caption: #tags light blue while typing (the textarea's own text is see-through; this layer behind it draws the colours) */
.cap-field { position: relative; display: grid; gap: 6px; }
.hl-wrap { position: relative; }
.hl-wrap textarea, .hl-back { font: 400 1rem/1.5 var(--body); padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; width: 100%;
  letter-spacing: normal; word-spacing: normal; white-space: pre-wrap; overflow-wrap: break-word; tab-size: 4; margin: 0; }
.hl-back { position: absolute; inset: 0; overflow: hidden; color: var(--ink); background: var(--surface); border-color: transparent; pointer-events: none; }
.hl-wrap textarea { position: relative; display: block; background: transparent; color: transparent; caret-color: var(--ink); resize: vertical; min-height: 130px; }
.hl-wrap textarea::placeholder { color: var(--mist); }
.hl-wrap textarea::selection { background: rgba(0, 150, 255, .25); color: transparent; }
.hl-back mark { background: none; padding: 0; color: inherit; }
.hl-back mark.hl-tag { color: #1da1f2; font-weight: 600; }
.hl-back mark.hl-at { color: #8a5cff; font-weight: 600; }
:root[data-theme="dark"] .hl-back mark.hl-tag { color: #6cc8ff; }
:root[data-theme="dark"] .hl-back mark.hl-at { color: #b69bff; }
.hl-wrap textarea:focus { border-color: var(--edge); background: transparent; }
.hl-wrap:focus-within .hl-back { background: var(--surface); }
/* tag suggestions */
.tag-suggest { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 30; list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-sm); }
.tag-suggest li { padding: 8px 12px; border-radius: 10px; cursor: pointer; color: #1da1f2; font-weight: 600; }
.tag-suggest li b { font-weight: 800; }
.tag-suggest li.on, .tag-suggest li:hover { background: var(--surface-2); }
:root[data-theme="dark"] .tag-suggest li { color: #6cc8ff; }

/* post titles and the "only you" / "drops in" labels */
.post-title { margin: 10px 16px 0; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.post-detail .post-title, .detail-scroll .post-title { margin: 6px 0 4px; font-size: 1.3rem; }
.post-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.post > .post-flags { margin: 0 14px 10px; }
.post-flag { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; border: 1px solid var(--edge); }
.post-flag.flag-drop { background: #fff1c2; color: #5a4300; }
.post-flag.flag-mine { background: #e7e1ff; color: #3a2a80; }
:root[data-theme="dark"] .post-flag.flag-drop { background: #4a3d10; color: #ffe9a3; }
:root[data-theme="dark"] .post-flag.flag-mine { background: #2f2560; color: #ddd3ff; }
.tile-flag { position: absolute; left: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); border: 1px solid var(--edge); font-size: .9rem; }

/* photo editor */
.photo-editor { width: min(980px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--edge); border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: var(--drop-sm); }
.photo-editor::backdrop { background: rgba(10, 8, 18, .6); }
.pe-head { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1.5px solid var(--line); }
.pe-head h2 { margin: 0; font-size: 1.1rem; text-align: center; }
.pe-x { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; }
.pe-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; padding: 18px; overflow-y: auto; max-height: calc(100vh - 100px); }
.pe-stage-wrap { display: grid; gap: 8px; align-content: start; }
.pe-frame { max-height: 70vh; margin: 0 auto; cursor: grab; touch-action: none; }
.pe-frame.dragging { cursor: grabbing; }
.pe-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, transparent 33.1%, rgba(255,255,255,.35) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.35) 66.6%, transparent 66.9%),
              linear-gradient(to bottom, transparent 33.1%, rgba(255,255,255,.35) 33.3%, transparent 33.6%, transparent 66.4%, rgba(255,255,255,.35) 66.6%, transparent 66.9%); }
.pe-help { text-align: center; margin: 0; }
.pe-tools { display: grid; gap: 16px; align-content: start; }
.pe-group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; font-weight: 700; }
.pe-group legend { padding: 0; margin-bottom: 8px; }
.pe-group input[type=range] { width: 100%; accent-color: var(--ink); }
.pe-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pe-filter { display: grid; gap: 4px; justify-items: center; padding: 4px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; font: inherit; }
.pe-filter.on { border-color: var(--edge); background: var(--surface-2); }
.pe-fthumb { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; display: block; }
.pe-fthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-filter small { font-size: .72rem; font-weight: 700; }
@media (max-width: 760px) {
  .photo-editor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; margin: 0; }
  .pe-body { grid-template-columns: 1fr; max-height: calc(100dvh - 64px); padding: 12px; gap: 14px; }
  .pe-frame { max-height: 52vh; }
}

.maker input[type=file][hidden], .maker-drop[hidden] { display: none !important; }
.maker-details > label .lbl { display: flex; gap: 6px; align-items: baseline; }
.maker-details > label .lbl small { font-weight: 500; }
.detail-scroll > .post-flags, .detail-scroll > .post-title { margin-left: 16px; margin-right: 16px; }
.detail-scroll > .post-flags { margin-top: 14px; }
.maker-details > label .lbl small { display: inline; }

/* #tags and @mentions (10 Nov, final): one plain light blue everywhere - no bold, purple, glow or underline.
   In the caption box the coloured layer must match the typed text exactly, or letters look doubled. */
.hl-back mark.hl-tag, .hl-back mark.hl-at { color: #2b8fd6; font-weight: inherit; letter-spacing: inherit; }
:root[data-theme="dark"] .hl-back mark.hl-tag, :root[data-theme="dark"] .hl-back mark.hl-at { color: #7cc4f5; }
.hl-wrap textarea, .hl-back { overflow-y: auto; scrollbar-gutter: stable; -webkit-text-fill-color: initial; text-shadow: none; }
.hl-wrap textarea { -webkit-text-fill-color: transparent; }
.hl-back { scrollbar-color: transparent transparent; }
.tag-suggest li { color: #2b8fd6; font-weight: 600; }
:root[data-theme="dark"] .tag-suggest li { color: #7cc4f5; }
.tag, .mention { color: #2b8fd6; font-weight: 600; text-decoration: none; }
.tag:hover, .mention:hover { text-decoration: underline; text-decoration-thickness: 1px; }
:root[data-theme="dark"] .tag, :root[data-theme="dark"] .mention { color: #7cc4f5; }
/* @ suggestions: friends first, with photo, name and @username */
.tag-suggest.people li[role=option] { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; color: var(--ink); font-weight: 500; padding: 7px 10px; }
.tag-suggest .sug-head { padding: 6px 10px 4px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); cursor: default; }
.tag-suggest .sug-head:hover { background: none; }
.sug-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .9rem; }
.sug-av img { width: 100%; height: 100%; object-fit: cover; }
.sug-name { display: grid; min-width: 0; line-height: 1.25; }
.sug-name b, .sug-name small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-name b { font-size: .9rem; } .sug-name small { color: var(--mist); font-size: .78rem; }
.sug-badge { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--mist); }
.tag-suggest li.empty { color: var(--mist); font-weight: 500; cursor: default; }

/* =====================================================================================
   10 Nov (midnight): reactions, teasers, close friends, collabs, dumps, boards, songs on posts,
   memories, map, albums + slideshow, report / mute / hidden words
   ===================================================================================== */
/* reactions */
.react-wrap { position: relative; display: inline-flex; }
.react-btn { font-size: 1.15rem; line-height: 1; }
.react-btn .rx-smile { font-size: 1.35rem; color: var(--ink); opacity: .85; }
.react-btn .my-rx { font-size: 1.2rem; }
.react-pick { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 999px; box-shadow: var(--drop-sm); }
.react-pick[hidden] { display: none; }
.react-pick button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 1.45rem; cursor: pointer; transition: transform .12s; }
.react-pick button:hover, .react-pick button:focus-visible { transform: scale(1.3) translateY(-3px); outline: none; background: var(--surface-2); }
.react-pick button.on { background: var(--surface-2); }
.rx-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 16px 6px; }
.detail-scroll > .rx-bar { margin: 0 16px; }
.rx-bar[hidden] { display: none; }
.rx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); font-size: .85rem; }
.rx-chip b { font-size: .78rem; }
@media (max-width: 560px) { .react-pick { left: 0; transform: none; } }

/* teaser card with Remind me */
.teaser-card { display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 26px; aspect-ratio: 1;
  background: linear-gradient(135deg, var(--ua), var(--ub)); color: #fff; }
.teaser-card .teaser-ico { font-size: 2.6rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.25)); }
.teaser-card b { font-size: 1.25rem; text-shadow: 0 2px 10px rgba(0,0,0,.2); }
.teaser-card span { font-weight: 700; }
.teaser-card .btn { background: #fff !important; color: #17141f !important; border-color: #17141f; margin-top: 6px; }
.teaser-card .btn.quiet { background: rgba(255,255,255,.85) !important; }
.teaser-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: .86rem; }
.teaser-check input { margin-top: 3px; }

/* flags */
.post-flag.flag-close { background: #d8f7e4; color: #0d5c2e; }
:root[data-theme="dark"] .post-flag.flag-close { background: #173d27; color: #b6f0cc; }
.names { display: inline; } .amp { color: var(--mist); font-weight: 600; margin: 0 2px; }

/* collab invite */
.collab-invite { margin: 10px 16px 0; padding: 12px 14px; border: 1px dashed var(--edge); border-radius: 14px; background: var(--surface-2); }
.collab-invite p { margin: 0 0 10px; font-size: .9rem; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.row-btns form { margin: 0; }

/* song on posts */
.post-song { margin: 10px 14px 0; }
.detail-scroll > .post-song { margin: 4px 16px; }
.post-song .song-player { max-width: none; box-shadow: none; border-width: 1.5px; }

/* pinned comment */
.pinned-c, .comment-row.is-pinned .comment { background: var(--surface-2); border-radius: 10px; padding: 6px 10px; }
.pin-ico { font-size: .85rem; }
.pin-c-btn { opacity: .35; font-size: .8rem; } .comment-row:hover .pin-c-btn, .pin-c-btn:focus-visible, .comment-row.is-pinned .pin-c-btn { opacity: 1; }

/* photo dump collage */
.dump { position: relative; display: grid; gap: 6px; padding: 10px; background: repeating-linear-gradient(45deg, #f4efe4, #f4efe4 10px, #efe8da 10px, #efe8da 20px); aspect-ratio: 1; overflow: hidden; }
:root[data-theme="dark"] .dump { background: repeating-linear-gradient(45deg, #2a2637, #2a2637 10px, #26222f 10px, #26222f 20px); }
.dump img { width: 100%; height: 100%; object-fit: cover; border: 4px solid #fff; border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,.18); transform: rotate(var(--r)); min-height: 0; }
.dump-1 { grid-template-columns: 1fr; } .dump-2 { grid-template-columns: 1fr 1fr; }
.dump-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .dump-3 img:first-child { grid-row: span 2; }
.dump-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dump-5, .dump-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.dump-5 img:first-child { grid-column: span 2; }
.dump-label { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.65); color: #fff; font-size: .75rem; font-weight: 800; }
.dump-more { position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #17141f; color: #fff; font-weight: 800; border: 3px solid #fff; }
.tile-dump { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 5px; background: #efe8da; }
.tile-dump img { width: 100%; height: 100%; object-fit: cover; border: 2px solid #fff; min-height: 0; }

/* new post: audience + more */
.maker-aud { margin: 0; padding: 0; border: 0; display: grid; gap: 6px; }
.maker-aud legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.aud-seg label { font-size: .86rem; }
.maker-aud p[hidden] { display: none; }
.switch-row.is-off { opacity: .45; }
.maker-more { border: 1.5px solid var(--line); border-radius: 16px; padding: 0 14px; }
.maker-more > summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.maker-more > summary::after { content: "▾"; color: var(--mist); }
.maker-more[open] > summary::after { content: "▴"; }
.mm-section { display: grid; gap: 8px; padding: 12px 0; border-top: 1.5px solid var(--line); }
.mm-h { font-size: .92rem; }
.place-row { display: flex; gap: 8px; } .place-row input { flex: 1; min-width: 0; }

/* boards */
.board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.board-card { display: grid; gap: 4px; padding: 10px; text-decoration: none; color: var(--ink); border-radius: 18px; }
.board-card b { margin-top: 6px; } .board-card small { color: var(--mist); }
.board-cover { aspect-ratio: 1; display: grid; gap: 3px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.board-cover img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.cover-2 { grid-template-columns: 1fr 1fr; } .cover-3 { grid-template-columns: 1fr 1fr; } .cover-3 img:first-child { grid-row: span 2; }
.cover-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.board-empty { display: grid; place-items: center; font-size: 2.4rem; height: 100%; }
.board-page, .album-page, .memories-page { max-width: 1000px; margin: 0 auto; }
.board-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 18px 20px; margin-bottom: 18px; flex-wrap: wrap; }
.board-head h1 { margin: 4px 0; } .board-head .sub a { display: inline-flex; gap: 6px; align-items: center; }
.board-edit > summary { list-style: none; }
.board-edit[open] { display: grid; gap: 10px; width: 100%; max-width: 360px; }
.danger-text { color: #e5383b; }
.mini-sheet { border: 1px solid var(--edge); border-radius: 20px; padding: 18px; width: min(420px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); box-shadow: var(--drop-sm); }
.mini-sheet::backdrop { background: rgba(15, 12, 24, .45); }
.mini-sheet h2 { margin: 0 0 10px; font-size: 1.15rem; }
.board-pick-list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; margin-bottom: 12px; }
.board-pick { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.board-pick:hover { background: var(--surface-2); }
.board-new-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.board-new-form input[name=name] { flex: 1; min-width: 140px; }
.undo-toast button { margin-left: 10px; }

/* report */
.report-reasons { display: grid; gap: 4px; margin: 6px 0 12px; }
.report-reason { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; }
.report-reason:has(input:checked) { border-color: var(--edge); background: var(--surface-2); }
.report-sheet textarea { width: 100%; margin-bottom: 12px; }
.report-sheet .row-btns { justify-content: flex-end; }

/* settings lists */
.cf-add { display: flex; gap: 8px; margin: 8px 0 12px; } .cf-add input { flex: 1; min-width: 0; }
.people-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.people-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 4px; }
.people-rows li span { display: grid; } .people-rows small { color: var(--mist); }
.people-rows form { margin: 0; }

/* weekly streak + memories link */
.streak { font-weight: 800; margin: 4px 0; }
.memory-more { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .85rem; }
.mem-head { margin-bottom: 10px; }

/* map */
.map-wrap { padding: 12px; }
.photo-map { height: min(60vh, 520px); border-radius: 14px; border: 1px solid var(--edge); overflow: hidden; margin-bottom: 8px; }
.map-pin { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); overflow: hidden; display: grid !important; place-items: center; background: #17141f; font-size: 1.2rem; }
.map-pin img { width: 100%; height: 100%; object-fit: cover; }
.map-pin.walk { background: #2f8f4e; }
.map-pop { display: grid; gap: 4px; width: 160px; color: #17141f; text-decoration: none; }
.map-pop img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.map-pop small { color: #666; }

/* album + slideshow */
.album-head { margin-bottom: 16px; } .album-links { display: flex; gap: 8px; margin: 0 0 12px; }
.slideshow { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0b0a10; color: #fff; }
.slideshow::backdrop { background: #000; }
.ss-stage { position: absolute; inset: 0 0 64px; display: grid; place-items: center; }
.ss-stage img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; }
.ss-stage img.in { animation: ss-in 4.2s ease-out forwards; }
@keyframes ss-in { 0% { opacity: 0; transform: scale(1.04); } 12% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.ss-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.ss-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.ss-bar button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 1.1rem; cursor: pointer; }
.ss-bar span { min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.ss-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255,255,255,.15); }
.ss-progress i { display: block; height: 100%; width: 0; background: #fff; }
@media (prefers-reduced-motion: reduce) { .ss-stage img.in { animation: none; opacity: 1; } }
.maker-details > *, .maker-more, .mm-section, .mm-section > *, .song-picker, .song-results, .song-row { min-width: 0; max-width: 100%; }
.song-row-meta { overflow: hidden; }
.drop-when .teaser-check { display: flex !important; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 500; }
.drop-when .teaser-check input { flex: none; margin-top: 3px; width: auto; }
.drop-when .teaser-check span { display: inline; font-weight: 500; }
.drop-when .teaser-check b { display: inline; }


/* ---------- 11 Nov: dark page backgrounds + dark themes ----------
   Every dark background also gets .page-dark (set by the profile page and the Edit profile preview),
   which brings in all the dark-mode colours. These rules only tint the page and cards. */
.page-obsidian { --bg: #0b0b0e; --dots: #1e1e24; --surface: #16161b; --surface-2: #1f1f26; }
.page-navy     { --bg: #0d1430; --dots: #1c2650; --surface: #141d40; --surface-2: #1b2652; }
.page-plum     { --bg: #1c0f24; --dots: #34203f; --surface: #26152f; --surface-2: #30203b; }
.page-pine     { --bg: #0c1c15; --dots: #1b3428; --surface: #13281e; --surface-2: #1a3428; }
.page-espresso { --bg: #1a1310; --dots: #34271f; --surface: #251b16; --surface-2: #30241c; }
.page-wine     { --bg: #220c15; --dots: #3e1a29; --surface: #2f121e; --surface-2: #3b1a28; }
.opt-bg.page-obsidian { background: #0b0b0e; } .opt-bg.page-navy { background: #0d1430; } .opt-bg.page-plum { background: #1c0f24; }
.opt-bg.page-pine { background: #0c1c15; } .opt-bg.page-espresso { background: #1a1310; } .opt-bg.page-wine { background: #220c15; }
.opt-bg.page-obsidian, .opt-bg.page-navy, .opt-bg.page-plum, .opt-bg.page-pine, .opt-bg.page-espresso, .opt-bg.page-wine, .opt-bg.page-midnight { border-color: rgba(127,127,140,.6); }
.bg-opts .bg-break { flex-basis: 100%; height: 0; }
.bg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-group-h { font-weight: 800; font-size: .86rem; margin: 4px 0 8px; }
.theme-group-h small { font-weight: 500; margin-left: 4px; }
.dark-pick i { position: relative; background: var(--dbg, #15131c); border: 1px solid rgba(127,127,140,.45); }
.dark-pick i::after { content: ""; position: absolute; inset: 30% 20%; border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 14px var(--a); }
.page-midnight-swatch { --dbg: #15131c; } .page-obsidian-swatch { --dbg: #0b0b0e; } .page-navy-swatch { --dbg: #0d1430; }
.page-plum-swatch { --dbg: #1c0f24; } .page-pine-swatch { --dbg: #0c1c15; } .page-espresso-swatch { --dbg: #1a1310; } .page-wine-swatch { --dbg: #220c15; }
@media (max-width: 560px) { .theme-picks { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 11 Nov: photo shapes are polaroids only ----------
   Classic (tilted left, pinned), Straight, Tilted (right), Taped (washi tape instead of a pin),
   Mini (taller, Instax-mini style photo) and Stacked (a second snapshot behind). Old shapes show as Classic. */
.prof-avatar:has(.frame-polaroid_straight) { transform: none; }
.prof-avatar:has(.frame-polaroid_tilt) { transform: rotate(4deg); }
.prof-avatar:has(.frame-polaroid_tape) .pin { display: none; }
.photo-card.frame-polaroid_tape::after, .pol-sample.frame-polaroid_tape::after { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px;
  transform: rotate(-4deg); opacity: .88; border: 1px solid rgba(0,0,0,.08); pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), linear-gradient(90deg, var(--ua), var(--ub)); }
.photo-card.frame-polaroid_mini:not(.tex-none) { padding: 9px 9px 36px; }
.photo-card.frame-polaroid_mini .av-wrap, .pol-sample.frame-polaroid_mini .av-wrap { width: calc(var(--s) * .76); min-width: 0; aspect-ratio: auto; }
.photo-card.frame-polaroid_mini .av, .pol-sample.frame-polaroid_mini .av { aspect-ratio: auto; }
.photo-card.frame-polaroid_stack:not(.tex-none) { box-shadow: 8px -8px 0 -2px var(--surface), 8px -8px 0 0 var(--edge), var(--drop); }
.photo-card.tex-none::after { display: none; }
/* Edit profile preview */
.pv-av .photo-card.frame-polaroid_straight { transform: none; }
.pv-av .photo-card.frame-polaroid_tilt { transform: rotate(4deg); }
.pv-av .photo-card.frame-polaroid_mini:not(.tex-none) { padding: 6px 6px 24px; }
.pv-av .photo-card.frame-polaroid_tape::after { width: 56px; height: 16px; margin-left: -28px; top: -8px; }
.pv-av .photo-card.frame-polaroid_stack:not(.tex-none) { box-shadow: 5px -5px 0 -1.5px var(--surface), 5px -5px 0 0 var(--edge), var(--drop-sm); }
/* the little polaroids in the "Polaroid style" picker */
.pol-sample { position: relative; display: inline-block; margin: 6px auto 2px; padding: 3px 3px 10px; background: #fff; border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: var(--drop-sm); transform: rotate(-3deg); }
.pol-sample .av-wrap, .pol-sample .av { border-radius: 2px !important; margin: 0 !important; }
.pol-sample .av { border-width: 1px; }
.pol-sample.frame-polaroid_straight { transform: none; }
.pol-sample.frame-polaroid_tilt { transform: rotate(4deg); }
.pol-sample.frame-polaroid_mini { padding-bottom: 13px; }
.pol-sample.frame-polaroid_tape::after { width: 30px; height: 9px; margin-left: -15px; top: -5px; }
.pol-sample.frame-polaroid_stack { box-shadow: 4px -4px 0 -1.5px #fff, 4px -4px 0 0 var(--edge), var(--drop-sm); }
.pol-sample.frame-polaroid:not([class*="polaroid_"])::before { content: ""; position: absolute; z-index: 2; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ua, #ff5fa2), var(--ub, #6a5cff)); border: 1px solid var(--edge); }
.pol-sample.frame-polaroid_straight::before, .pol-sample.frame-polaroid_tilt::before, .pol-sample.frame-polaroid_mini::before, .pol-sample.frame-polaroid_stack::before {
  content: ""; position: absolute; z-index: 2; top: -5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ua, #ff5fa2), var(--ub, #6a5cff)); border: 1px solid var(--edge); }

/* ---------- 11 Nov: Keep me signed in ---------- */
.auth .stay-signed-in { display: flex !important; flex-direction: row; align-items: flex-start; gap: 10px; margin: 4px 0 16px; font-weight: 500; cursor: pointer; }
.auth .stay-signed-in input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pin); }
.auth .stay-signed-in span { display: grid; gap: 2px; }
.auth .stay-signed-in small { font-size: .8rem; line-height: 1.35; }
/* preview photo is a polaroid too (an older rule made it round) */
.pv-av .photo-card .av-wrap, .pv-av .photo-card .av { border-radius: 4px; }

/* =====================================================================================
   Client session 9 (11 Nov evening)
   ===================================================================================== */

/* 1. Profile photos: press-and-hold / drag can't open the full picture (the file is cropped on the server too) */
.av img, .photo-card img, .pv-av img, .pol-sample img {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.av, .photo-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* 2. The little photo in the top right is always a circle, whatever polaroid style is picked */
.me-chip .av-wrap, .me-chip .av-wrap .av { border-radius: 50% !important; clip-path: none !important; aspect-ratio: 1 / 1;
  width: var(--s) !important; height: var(--s) !important; min-width: var(--s); flex: none; transform: none !important; }
.me-chip .av-wrap::before, .me-chip .av-wrap::after { display: none !important; }
.me-chip .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 760px) {
  .me-chip { padding: 2px; border-radius: 50%; flex: none; width: auto; aspect-ratio: 1 / 1; justify-content: center; }
}

/* 3. Badges widget: 8 at a time, in two neat rows of four */
.wg-badgegrid { grid-template-columns: repeat(4, 1fr); }
.wg-badgegrid li[hidden] { display: none; }
.wg-badgegrid li:nth-child(n) .badge-pop { left: 50%; right: auto; transform: translateX(-50%) translateY(4px); }
.wg-badgegrid li:nth-child(n) .badge-pop::after { left: 50%; right: auto; }
.wg-badgegrid li:nth-child(n):hover .badge-pop, .wg-badgegrid li:nth-child(n):focus .badge-pop { transform: translateX(-50%); }
.wg-badgegrid li:nth-child(4n+1) .badge-pop { left: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(4n+1) .badge-pop::after { left: 22px; }
.wg-badgegrid li:nth-child(4n) .badge-pop { left: auto; right: -6px; transform: translateY(4px); }
.wg-badgegrid li:nth-child(4n) .badge-pop::after { left: auto; right: 17px; }
.wg-badgegrid li:nth-child(4n+1):hover .badge-pop, .wg-badgegrid li:nth-child(4n+1):focus .badge-pop,
.wg-badgegrid li:nth-child(4n):hover .badge-pop, .wg-badgegrid li:nth-child(4n):focus .badge-pop { transform: none; }
.badge-more { display: block; width: 100%; margin: 10px 0 0; padding: 7px 10px; border-radius: 999px; border: 2px dashed var(--line);
  background: none; color: inherit; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.badge-more:hover { border-style: solid; background: var(--surface-2); }

/* 4. Discover: a few hashtags (Trending / Top), one swipeable row */
.tag-pick { margin: 4px 0 14px; }
.tag-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tag-pick-head .section-h { margin: 0; }
.tag-seg { margin: 0; }
.tag-seg button { border: 0; background: none; color: inherit; font: inherit; font-weight: 700; font-size: .85rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.tag-seg button[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow); }
.tag-seg button:disabled { opacity: .45; cursor: default; }
.tag-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.tag-row::-webkit-scrollbar { display: none; }
.tag-row[hidden] { display: none; }
.tag-row .chip { flex: none; scroll-snap-align: start; align-items: center; }
.tag-row .chip small { opacity: .55; font-weight: 600; }
.tag-rank { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .68rem; font-weight: 800;
  color: #fff; background: var(--accent); }
.people-cta { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 18px; text-decoration: none !important; color: inherit; }
.people-cta span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.people-cta small { color: var(--mist); }
.people-cta-ico { font-size: 1.6rem; }

/* 5. Home: Board tabs fit the screen; the category row fits the page and slides left/right */
.board-filter, .board-filter .catf { min-width: 0; max-width: 100%; }
.catf-row { scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.catf-row::-webkit-scrollbar { display: none; }
.catf-row .catf-chip { scroll-snap-align: start; }
@media (max-width: 760px) {
  .board-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; margin-right: 0; padding-right: 0; }
  .board-tab { justify-content: center; min-width: 0; gap: 3px; padding: 8px 2px; font-size: .78rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .board-new { grid-column: 1 / -1; justify-self: start; }
  .board-filter .catf { margin: 4px 0 12px; }
  .board-filter .catf-row { gap: 6px; padding: 2px 0 6px; }
  .board-filter .catf-chip { padding: 6px 11px; font-size: .82rem; gap: 4px; }
  .board-filter .catf-chip small { display: none; }
}
@media (max-width: 360px) { .board-tab { font-size: .74rem; } }
/* scroll buttons on bigger screens (added by app.js only when the row overflows) */
.catf-wrap { position: relative; }
.catf-arrow { position: absolute; top: 4px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--edge);
  background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: var(--drop-sm); display: grid; place-items: center; }
.catf-arrow[hidden] { display: none; }
.catf-arrow.l { left: -4px; } .catf-arrow.r { right: -4px; }
@media (hover: none) { .catf-arrow { display: none !important; } }

/* 6. Activity: challenge wins stand out */
.notif-win { background: linear-gradient(90deg, rgba(255, 216, 107, .28), transparent 70%); border-radius: 12px; padding-left: 8px; padding-right: 8px; }

/* 7. Discover people */
.people-page .searchbar { margin-bottom: 14px; }
.people-note { padding: 12px 16px; margin: 0 0 14px; font-size: .9rem; }
.people-sec { margin: 0 0 22px; }
.people-sec .section-h { margin-bottom: 2px; }
.people-blurb { margin: 0 0 10px; }
.people-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.person-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 12px 14px; min-width: 0; }
.person-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 46px; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  background: linear-gradient(135deg, var(--ua), var(--ub)); opacity: .9; }
.pc-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pc-top { position: relative; margin-bottom: 6px; }
.pc-top .av-wrap, .pc-top .av { border-radius: 50% !important; }
.pc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-handle, .pc-why { color: var(--mist); font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-why { font-weight: 700; }
.pc-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; margin: 8px 0 2px; }
.pc-shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.pc-act { position: relative; z-index: 2; margin-top: 8px; }
.people-foot { margin-top: 8px; }
@media (max-width: 560px) { .people-cards { grid-template-columns: 1fr 1fr; gap: 10px; } .person-card { padding: 14px 8px 12px; } }

/* ---------- Client session 9, part 2 (11 Nov) ---------- */
/* Profile banner: no press-and-hold / drag to open the full picture */
.poster-bg img, .pv-banner img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.poster-bg, .pv-banner { -webkit-touch-callout: none; }

/* Last week's challenge winner (Challenge page + Hall of Fame) */
.winner-card { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin: 18px 0 22px; padding: 14px;
  border: 1px solid var(--edge); border-radius: 22px; background: linear-gradient(120deg, rgba(255, 216, 107, .35), rgba(255, 95, 162, .14) 60%, transparent), var(--surface);
  box-shadow: var(--drop-sm); }
.winner-shot { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--edge); background: var(--surface-2); }
.winner-shot img { width: 100%; height: 100%; object-fit: cover; }
.winner-crown { position: absolute; top: 6px; left: 6px; font-size: 1.5rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.winner-txt h2 { margin: 2px 0 6px; font-size: 1.35rem; }
.winner-txt p { margin: 0 0 10px; line-height: 1.5; }
.winner-txt p .av-wrap { vertical-align: middle; margin-right: 4px; }
.winner-kicker { font-size: .75rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mist); margin: 0 !important; }
@media (max-width: 560px) { .winner-card { grid-template-columns: 96px 1fr; gap: 12px; } .winner-txt h2 { font-size: 1.1rem; } }

/* Discover people: ✕ on cards, welcome after sign-up */
.pc-hide { position: absolute; top: 6px; right: 6px; z-index: 3; margin: 0; }
.pc-hide button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; font-size: .8rem; font-weight: 800;
  color: #fff; background: rgba(0, 0, 0, .28); display: grid; place-items: center; }
.pc-hide button:hover, .pc-hide button:focus-visible { background: rgba(0, 0, 0, .5); }
.person-card { transition: opacity .25s, transform .25s; }
.person-card.pc-gone { opacity: 0; transform: scale(.9); }
.people-welcome { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 20px; margin: 4px 0 18px;
  background: linear-gradient(120deg, rgba(255, 95, 162, .16), rgba(106, 92, 255, .14)), var(--surface); }
.people-welcome h1 { margin: 0 0 4px; font-size: 1.4rem; }
.people-welcome p { margin: 0; color: var(--mist); }
.people-welcome-ico { font-size: 2.2rem; }
@media (max-width: 640px) { .people-welcome { grid-template-columns: auto 1fr; } .people-welcome .btn { grid-column: 1 / -1; justify-self: stretch; text-align: center; } }

/* ---------- 11 Nov: Edit profile - choose what shows in the profile photo ---------- */
.av-pick { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--line); }
.av-pick[hidden] { display: none; }
.av-pick-h { margin: 0 0 8px; display: grid; gap: 2px; }
.av-pick-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; cursor: crosshair; touch-action: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--edge); }
.av-pick-stage img { display: block; max-width: min(100%, 280px); max-height: 280px; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.av-pick-box { position: absolute; left: 0; top: 0; border: 3px solid #fff; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--edge), 0 0 0 9999px rgba(10, 8, 20, .55); transition: left .08s, top .08s; }
.av-pick [data-av-reset] { margin-top: 8px; display: block; }

/* 11 Nov: days on Corkboard */
.prof-joined { margin: 2px 0 0; }
.awards-days { margin: 6px 0 0; font-weight: 700; font-size: .92rem; }

/* ---------- 11 Nov: error pages (404, 405, 500...) ---------- */
.err-page { max-width: 720px; margin: 10px auto 40px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.err-art { margin: 0; width: min(100%, 460px); }
.err-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .18)); }
.err-swing { transform-box: view-box; transform-origin: 172px 74px; animation: errSwing 3.2s ease-in-out infinite; }
@keyframes errSwing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
.err-kind-missing .err-art svg { animation: errNudge 5s ease-in-out infinite; }
@keyframes errNudge { 0%, 92%, 100% { transform: none; } 95% { transform: translateX(-3px) rotate(-.5deg); } 98% { transform: translateX(3px) rotate(.5deg); } }
@media (prefers-reduced-motion: reduce) { .err-swing, .err-kind-missing .err-art svg { animation: none; } }
.err-card { width: 100%; padding: 22px 24px; text-align: left; }
.err-code { margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.err-card h1 { margin: 0 0 10px; font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.15; }
.err-what, .err-next { margin: 0 0 8px; line-height: 1.5; }
.err-path { margin: 10px 0 14px; word-break: break-all; }
.err-path code { font-size: .85em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.err-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .err-actions .btn { flex: 1 1 auto; text-align: center; } }

/* ---------- 11 Nov: Settings > Devices, sign-in alert pop-up ---------- */
.dev-list { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.dev-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 14px; }
.dev-row.is-current { border-color: var(--ink); background: var(--surface-2); }
.dev-ico { font-size: 1.5rem; }
.dev-txt { display: grid; min-width: 0; }
.dev-txt b em.pill { font-style: normal; font-size: .72rem; margin-left: 4px; }
.dev-txt small { color: var(--mist); overflow-wrap: anywhere; }
.dev-row form { margin: 0; }
.msg-alert.msg-alert-sec { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25), var(--drop-sm); }

/* session 14: replies from the Corkboard team about reports */
.team-badge { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px;
  background: var(--note-2); border: 1px solid var(--edge); text-decoration: none; }
.notif-team-msg { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--note-2); font-style: italic;
  white-space: pre-line; overflow-wrap: anywhere; }
.myrep { padding: 14px 0; border-bottom: 1px solid var(--line); }
.myrep:last-child { border-bottom: 0; }
.myrep-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.myrep-top .sub { margin-left: auto; }
.myrep-what { margin: 4px 0 0; }
.myrep-details { margin: 6px 0 0; opacity: .8; font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }
.myrep-st { font-size: .78rem; font-weight: 800; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--edge); background: var(--note-2); }
.myrep-st.open { background: #fff3c4; color: #7a5b00; }
.myrep-st.resolved { background: #d9f5e3; color: #15603a; }
.myrep-st.declined, .myrep-st.dismissed { background: #eceff3; color: #475569; }
.myrep-reply { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--note-2); border-left: 4px solid var(--accent, #e0533d); }
.myrep-reply b { display: block; font-size: .85rem; }
.myrep-reply p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- 12 Nov: Edit profile tidy-up ---------- */
/* Photo and banner: matching upload buttons, lined up in two equal columns */
.up-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.up-item { display: grid; align-content: start; gap: 8px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.up-label { font-weight: 700; font-size: .86rem; }
.up-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.up-btns .btn { min-height: 36px; }
.up-btn { position: relative; overflow: hidden; }
.up-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.up-btn:has(input:focus-visible) { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.up-btns [hidden] { display: none; }
.up-name { font-size: .8rem; color: var(--mist); overflow-wrap: anywhere; }
.up-remove { font-size: .85rem; }
@media (max-width: 560px) { .up-row { grid-template-columns: 1fr; } }

/* "Choose what shows" pop-up */
.av-pick.wg-dialog { margin: auto; padding: 22px; border-top: 1px solid var(--edge); }
.av-pick:not([open]) { display: none; }
.av-pick .av-pick-h { margin: -6px 0 14px; display: block; }
.av-pick-body { display: grid; place-items: center; }
.av-pick-stage img { max-width: min(100%, 460px); max-height: min(60vh, 420px); }
.av-pick-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.av-pick-actions .btn { min-width: 92px; min-height: 36px; }
.av-pick [data-av-reset] { margin-top: 0; display: inline-flex; }

/* Swatch dropdowns: colour theme, page background, frame */
.sw-field { display: grid; gap: 8px; margin: 0 0 16px; }
.sw-legend { font-weight: 700; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; }
.sw-pick { position: relative; max-width: 420px; }
.sw-pick summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 9px 14px;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); box-shadow: var(--drop-sm); font-weight: 700; }
.sw-pick summary::-webkit-details-marker { display: none; }
.sw-pick summary:focus-visible { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.sw-pick[open] .font-caret { transform: rotate(180deg); }
.sw-cur { display: inline-flex; align-items: center; gap: 10px; }
.sw-pick .sw-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 340px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-lg, var(--drop-sm)); }
.sw-group { margin: 8px 8px 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mist); }
.sw-group small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sw-group:first-child { margin-top: 4px; }
.sw-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.sw-item input { position: absolute; opacity: 0; pointer-events: none; }
.sw-item:hover, .sw-item:focus-visible, .sw-item:has(input:focus-visible) { background: var(--surface-2); outline: none; }
.sw-item.on, .sw-item:has(input:checked) { background: var(--note-1, var(--surface-2)); }
.sw-item.on::after, .sw-item:has(input:checked)::after { content: "✓"; margin-left: auto; font-weight: 800; }
/* the old tile styles must not leak into the list rows */
.sw-item.theme-pick { display: flex; padding: 8px 10px; border: 0; border-radius: 9px; box-shadow: none; font-size: inherit; }
.sw-item.theme-pick.on span::before { content: none; }
.sw-sw { flex: none; display: inline-block; width: 30px !important; height: 22px !important; aspect-ratio: auto !important; border-radius: 7px; border: 1px solid var(--line); }
.sw-sw.sw-dark { position: relative; background: var(--dbg, #15131c); border: 1px solid rgba(127,127,140,.45); overflow: hidden; }
.sw-sw.sw-dark::after { content: ""; position: absolute; inset: 28% 18%; border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 0 8px var(--a); }
.sw-sw.sw-tex { padding: 0 !important; border: 1px solid var(--edge); clip-path: none !important; box-shadow: none; transform: none; }
.sw-sw.sw-tex.tex-none { background: repeating-linear-gradient(45deg, var(--surface) 0 5px, var(--surface-2) 5px 10px); }
.sw-sw.sw-tex::before, .sw-sw.sw-tex::after { display: none; }

/* Polaroid style and photo ring: every option the same size, pictures and labels on the same lines */
.studio .shape-opts, .studio .ring-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.studio .shape-opt { display: grid; grid-template-rows: 64px auto; justify-items: center; align-items: center; gap: 6px;
  min-height: 104px; min-width: 0; padding: 10px 6px; text-align: center; }
.studio .shape-opt > .pol-sample, .studio .shape-opt > .av-wrap { margin: 0 !important; align-self: center; max-height: 60px; }
.studio .shape-opt .opt-label { align-self: start; line-height: 1.15; }

/* Layout: the two groups stack so all the tile choices fit on one row */
.layout-opts { display: grid; gap: 4px; }

/* New grid tiles (profile + live preview) */
.tile-masonry .tile-inner { aspect-ratio: auto; }
.tile-masonry .tile-inner > img { height: auto; display: block; }
.tile-masonry .tile-inner:has(.tile-thought, .tile-lock, .tile-dump) { aspect-ratio: 1; }
.tile-scrapbook { padding: 10px 10px 30px; border-radius: 3px; background: #fffdf7; }
.tile-scrapbook .tile-inner { border-radius: 2px; }
.grid > .tile-scrapbook:nth-child(3n+1) { transform: rotate(-2.4deg); }
.grid > .tile-scrapbook:nth-child(3n+2) { transform: rotate(1.8deg); }
.grid > .tile-scrapbook:nth-child(3n) { transform: rotate(-.8deg); }
.grid > .tile-scrapbook:hover { transform: rotate(0) translateY(-3px) scale(1.02); }
:root[data-theme="dark"] .tile-scrapbook, .page-dark .tile-scrapbook { background: #f3efe6; }
.pv-grid.grid-masonry { display: block; columns: 3; column-gap: 3px; }
.pv-grid.grid-masonry span { display: block; margin-bottom: 3px; aspect-ratio: 1; }
.pv-grid.grid-masonry span:nth-child(3n+1) { aspect-ratio: 4/5; }
.pv-grid.grid-masonry span:nth-child(3n+2) { aspect-ratio: 4/3; }
.pv-grid.grid-scrapbook { gap: 8px; padding: 4px; }
.pv-grid.grid-scrapbook span { opacity: 1; background: #fffdf7; border: 1px solid var(--edge); padding: 3px 3px 9px; background-clip: padding-box; position: relative; }
.pv-grid.grid-scrapbook span::before { content: ""; display: block; height: 100%; background: linear-gradient(135deg, var(--ua), var(--ub)); opacity: .6; }
.pv-grid.grid-scrapbook span:nth-child(odd) { transform: rotate(-3deg); }
.pv-grid.grid-scrapbook span:nth-child(even) { transform: rotate(2.5deg); }
.up-btns { display: grid; grid-template-columns: 1fr 1fr; }
.up-btns .btn { width: 100%; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.studio-form .card:has(.sw-pick[open]) { position: relative; z-index: 30; }
.sw-pick[open] { z-index: 30; }
.studio-form [data-song-add], .studio-form .song-current-actions .btn { min-height: 36px; }
.up-btns > .btn { margin: 0; height: 38px; }
.up-item .up-remove { margin: 0; }

/* ---------- 12 Nov (session 17) ---------- */
/* Post page: name and time the right sizes, everything lined up on the same 16px edge */
.detail .post-head { align-items: center; gap: 12px; }
.detail .post-head .meta { display: grid; gap: 2px; min-width: 0; }
.detail .post-head .names, .detail .post-head .names a { font-size: .98rem; line-height: 1.2; font-weight: 800; }
.detail .post-head .sub { font-size: .8rem; line-height: 1.25; font-weight: 500; color: var(--mist); }
.detail .post-title { margin: 4px 16px 4px; }
.detail .caption { padding: 0 16px; }
.detail .echo-cta.echo-slim { margin: 10px 16px; padding: 8px 12px; border-radius: 12px; }
.detail .echo-slim .echo-ico { font-size: 1rem; }
.detail .echo-slim small { display: none; }
.detail .actions { display: flex; align-items: center; gap: 4px; padding: 6px 10px; }
.detail .actions form { display: flex; margin: 0; }
.detail .actions .act { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.detail .actions .act .ic { width: 24px; height: 24px; }
.detail .likes { padding: 0 16px; margin: 0 0 8px; font-size: .88rem; }
.post-card .actions .act { display: inline-grid; place-items: center; }
.react-btn .rx-smile { display: inline-flex; }

/* Edit post */
.post-edit .post-edit-media { display: grid; gap: 10px; align-content: start; }
.post-edit-thumb { display: block; border: 1px solid var(--edge); border-radius: 14px; overflow: hidden; box-shadow: var(--drop); aspect-ratio: 1; background: var(--surface-2); }
.post-edit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-edit-thought { display: grid; place-items: center; height: 100%; padding: 14%; font-weight: 800; font-size: 1.2rem; text-align: center;
  background: linear-gradient(140deg, var(--grad-a, #ff5fa2), var(--grad-b, #6a5cff)); color: #fff; }
.post-edit textarea { width: 100%; }
.post-edit-actions { display: flex; gap: 10px; margin-top: 18px; }
.post-edit-actions .btn { min-width: 130px; }
.menu-pop .menu-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-pop .menu-link:hover { background: var(--surface-2); }

/* Handwritten title on profile polaroids */
.tile-titled { padding-bottom: 6px; }
.tile-hw { display: block; padding: 6px 4px 0; font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-weight: 700; font-size: 1.32rem; line-height: 1.1;
  color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-1.2deg); }
.tile-hw.hw-m { font-size: 1.12rem; }
.tile-hw.hw-s { font-size: .98rem; }
.tile-scrapbook.tile-titled { padding-bottom: 8px; }
.tile-scrapbook .tile-hw { color: #2a2433; }
.grid-portrait .tile-hw, .grid-square .tile-hw { padding-top: 7px; }

/* People you may know (board) */
.people-strip { padding: 14px 14px 16px; margin: 0 0 18px; transition: opacity .25s, transform .25s; }
.people-strip.ps-gone { opacity: 0; transform: translateY(-6px); }
.ps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ps-head .strip-h { margin: 0; }
.ps-head form { margin: 0; }
.ps-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 50%; background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; }
.ps-close:hover { background: var(--surface-2); }
.ps-row { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.ps-card { scroll-snap-align: start; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 16px 10px 12px;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--surface); text-align: center; min-width: 0; }
.ps-card .pc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-card .pc-why { color: var(--mist); min-height: 2.4em; }
.ps-card .pc-act { position: relative; z-index: 2; margin-top: 4px; width: 100%; }
.ps-card .pc-act form, .ps-card .pc-act .btn { width: 100%; }

/* Tidier top bar: search + your photo; everything else is in the menu under it */
.top-menu { position: relative; }
.top-menu > summary { list-style: none; cursor: pointer; }
.top-menu > summary::-webkit-details-marker { display: none; }
.top-menu .me-caret { font-size: .75rem; margin-left: 2px; opacity: .7; transition: transform .15s; }
.top-menu[open] .me-caret { transform: rotate(180deg); }
.top-menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; width: 240px; padding: 6px; display: grid;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--drop-sm); }
.top-menu-pop a, .top-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; margin: 0; }
.top-menu-pop a:hover, .top-menu-pop button:hover, .top-menu-pop a:focus-visible, .top-menu-pop button:focus-visible { background: var(--surface-2); outline: none; }
.top-menu-pop hr { border: 0; border-top: 1.5px dashed var(--line); margin: 4px 6px; }
.top-menu-pop form { margin: 0; }
.top-menu-pop .tb-moon, .top-menu-pop .tb-sun, .top-menu-pop .snd-on, .top-menu-pop .snd-off { align-items: center; gap: 10px; }
.top-menu-pop .theme-btn .tb-moon { display: inline-flex; }
.top-menu-pop .sound-btn .snd-off { display: inline-flex; }
.top-menu-pop .sound-btn.on .snd-on { display: inline-flex; }
.top-menu-pop .sound-btn span { font-size: inherit; }
.top-menu-pop i { font-style: normal; width: 18px; text-align: center; }
.top-menu-pop .tm-q { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.8px solid currentColor; border-radius: 50%; font-size: .7rem; font-weight: 800; }
@media (max-width: 700px) { .top-menu .me-caret { display: none; } }

/* Settings: section dropdown on phones (no more swiping) */
.set-jump { display: none; }
@media (max-width: 860px) {
  .set-nav { display: none !important; }
  .set-jump { display: block; position: sticky; top: 62px; z-index: 25; }
  .set-jump summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-sm); font-weight: 700; }
  .set-jump summary::-webkit-details-marker { display: none; }
  .set-jump .sj-lbl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mist); }
  .set-jump .sj-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .set-jump[open] .font-caret { transform: rotate(180deg); }
  .sj-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: grid; padding: 6px; background: var(--surface);
    border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--drop-sm); }
  .sj-list a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
  .sj-list a:hover, .sj-list a.on { background: var(--surface-2); }
}
.people-strip.card { display: block; }
.ps-row { justify-content: start; }
.detail .post-head .names a.who, .detail .post-head .names { color: var(--ink); }

/* ---------- 12 Nov (session 18) ---------- */
/* Favourite in the top right of a post */
.post-head .fav-head { margin: 0 0 0 auto; display: flex; }
.post-head .fav-head + .menu { margin-left: 0; }
.post-head .fav-head .act { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; }
.post-media .fav-corner { position: absolute; top: 10px; right: 10px; z-index: 3; margin: 0; }
.post-media .fav-corner .act { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #15131c; border: 1px solid var(--edge); box-shadow: var(--drop-sm); }
.post-media .fav-corner .act.on { background: #15131c; color: #fff; }
.post-media .fav-corner .act.on .ic { fill: currentColor; }
/* Profile counts: every box the same width */
.stats { grid-template-columns: repeat(2, minmax(84px, 1fr)); }
.stats.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .stats:not(.stats-3) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats li { min-width: 0; }
/* Plain "Choose File" boxes (Start a string, New story, etc.) now look like the app's buttons */
input[type=file] { font: inherit; font-size: .85rem; color: var(--mist); max-width: 100%; }
input[type=file]::file-selector-button { font: inherit; font-weight: 800; font-size: .85rem; margin-right: 10px; padding: 7px 14px; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--drop-sm); }
input[type=file]::file-selector-button:hover { background: var(--surface-2); }
/* Board cards: name bigger than the time (same as the post page) */
.post-foot .meta { display: grid; gap: 2px; min-width: 0; }
.post-foot .meta .names, .post-foot .meta .names a { font-size: .95rem; line-height: 1.2; font-weight: 800; color: var(--ink); }
.post-foot .meta .sub { font-size: .78rem; line-height: 1.25; font-weight: 500; color: var(--mist); }

/* ---------- 12 Nov (session 20) ---------- */
.detail .join-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 14px; margin: 0; border-top: 1.5px dashed var(--line); }
.detail .join-cta .btn { margin: 0; }
.detail .post-head .meta { flex: 1; text-align: left; justify-items: start; }

/* ---------- 12 Nov (session 21): phone notifications + alert sounds ---------- */
.push-state { font-weight: 700; margin: 10px 0; }
.push-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.push-btns .btn { margin: 0; }
.push-ios { margin: 4px 0 12px; padding: 12px 12px 12px 30px; background: var(--surface-2); border-radius: 12px; line-height: 1.5; font-size: .9rem; }
.push-ios li + li { margin-top: 4px; }
.snd-h { margin: 18px 0 2px; font-size: 1rem; }
.snd-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.snd-opt { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--surface); cursor: pointer; font-weight: 700; font-size: .9rem; }
.snd-opt input { position: absolute; opacity: 0; pointer-events: none; }
.snd-opt:hover { background: var(--surface-2); }
.snd-opt:has(input:checked) { border: 1px solid var(--edge); box-shadow: var(--drop-sm); background: var(--surface-2); }
.snd-opt:has(input:focus-visible) { outline: 2.5px solid #7c6cff; outline-offset: 2px; }
.snd-emo { font-size: 1.15rem; }
.snd-name { flex: 1; }
.snd-play { font-size: .7rem; opacity: .45; }
.snd-opt:has(input:checked) .snd-play { opacity: .9; }
.push-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; }
.push-nudge[hidden] { display: none; }
.push-nudge .pn-ico { font-size: 1.6rem; }
.push-nudge > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.push-nudge small { color: var(--mist); }
.push-nudge .btn { margin: 0; }
.push-nudge .pn-x { border: 0; background: none; font-size: 1rem; cursor: pointer; color: var(--mist); padding: 6px; }
[data-push-card] [hidden], [data-push-nudge] [hidden] { display: none !important; }

/* ---------- 12 Nov (session 22): light / dark tidy-up ---------- */
/* The menu's theme switch shows YOUR theme, even on a profile that is always light or always dark */
:root[data-mine="light"] .top-menu-pop .theme-btn .tb-moon { display: inline-flex; }
:root[data-mine="light"] .top-menu-pop .theme-btn .tb-sun { display: none; }
:root[data-mine="dark"] .top-menu-pop .theme-btn .tb-moon { display: none; }
:root[data-mine="dark"] .top-menu-pop .theme-btn .tb-sun { display: inline-flex; }
/* Edit profile dropdowns: the picked row was muddy olive in dark mode */
.sw-item.on, .sw-item:has(input:checked) { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--edge); }
/* Tip-card pictures were glaring on dark pages */
:root[data-theme="dark"] .info-board img { filter: brightness(.82) saturate(.9); }