/* Gukkit web client. Values ported from the Android app:
   app/src/main/res/values/colors.xml and Theme.kt (UiColors). */
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --panel: #F7F5FF;          /* cloud */
  --text: #181818;           /* text_dark / gukkit_charcoal */
  --subtle: #5B5F6E;         /* text_gray */
  --divider: #E8E8E8;
  --cyan: #01C1E4;           /* gukkit_cyan */
  --cyan-dark: #008CA6;
  --cyan-ink: #007A92;
  --tab-cyan: #01A9CE;
  --gold: #FFC531;           /* star_gold */
  --gold-text: #E8A90C;
  --red: #E0245E;            /* counter_red */
  --icon-gray: #6B7280;
  --bubble-theirs: #F5F5F5;
  --input-bg: #F7F5FF;
}
[data-theme="dark"] {
  --bg: #181818;             /* gukkit_charcoal */
  --card: #242424;           /* gukkit_panel */
  --panel: #242424;
  --text: #F4F4F4;           /* gukkit_mist */
  --subtle: #A6A6A6;         /* gukkit_smoke */
  --divider: #2E2E2E;        /* gukkit_line */
  --input-bg: #242424;
  --bubble-theirs: #2B2B2B;
}
* { box-sizing: border-box; }
/* The hidden attribute must always win: .field and #lensbar set
   display:flex/grid, which otherwise defeats it (the spoiler field and
   the feed lens strip leaked onto screens that had hidden them). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* The app owns the pull gesture (OVER_SCROLL_NEVER on its lists):
   the browser must never answer a top pull with its own reload. */
html, body { overscroll-behavior-y: none; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan-ink); }
[data-theme="dark"] a { color: var(--cyan); }
button { font-family: inherit; cursor: pointer; }
#app { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
main#view { flex: 1; padding-bottom: 76px; }

/* ---- Masthead (v56: name up in the top bar, cyan rule under it) ---- */
#masthead { position: sticky; top: 0; z-index: 30; background: var(--bg); }
.mast-row { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 10px 4px 4px; }
.mast-back { background: none; border: 0; width: 48px; height: 48px; font-size: 26px; color: var(--text); line-height: 1; }
.mast-title { font-weight: 700; font-size: 30px; line-height: 1.1; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mast-actions { display: flex; gap: 2px; align-items: center; }
.mast-actions button { background: none; border: 0; width: 44px; height: 44px; font-size: 21px; color: var(--icon-gray); position: relative; }
.mast-rule { height: 3px; background: var(--cyan); margin: 0 10px; border-radius: 2px; }
.mast-sub { color: var(--cyan-dark); font-weight: 700; font-size: 15px; padding: 6px 16px 2px; }
[data-theme="dark"] .mast-sub { color: var(--cyan); }
.mast-wordmark { height: 30px; display: block; }

/* ---- Lens strip (feed only): six tiles, Warren is the sixth ---- */
#lensbar { position: sticky; top: 59px; z-index: 29; background: var(--bg); display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; }
#lensbar::-webkit-scrollbar { display: none; }
.lens { flex: 0 0 auto; border: 1.5px solid var(--divider); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 14px; }
.lens.active { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.lens-blurb { padding: 0 16px 4px; color: var(--subtle); font-size: 13.5px; }

/* ---- Bottom tab bar ---- */
#tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px; background: var(--bg); border-top: 1px solid var(--divider); display: flex; z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
#tabbar button { flex: 1; background: none; border: 0; padding: 8px 0 6px; color: var(--icon-gray); font-size: 11px; font-weight: 800; display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
#tabbar button .tic { font-size: 22px; line-height: 1; }
#tabbar button.active { color: var(--tab-cyan); }
.badge { position: absolute; top: 2px; right: calc(50% - 20px); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 999px; min-width: 17px; height: 17px; line-height: 17px; text-align: center; padding: 0 4px; }
#tabbar .compose-fab { color: var(--cyan-dark); }
#tabbar .compose-fab .tic { font-size: 27px; }

/* ---- Post cards ---- */
.post { background: var(--card); border-bottom: 1px solid var(--divider); padding: 12px 16px 6px; }
.post-head { display: flex; align-items: center; gap: 10px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel); flex: 0 0 auto; }
.avatar.sm { width: 36px; height: 36px; }
.post-who { flex: 1; min-width: 0; }
.post-author { font-weight: 800; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-author .anon { color: var(--subtle); font-weight: 700; }
.post-meta { color: var(--subtle); font-size: 13px; }
.post-body { font-size: 16.5px; margin: 8px 0 4px; white-space: pre-wrap; word-wrap: break-word; }
.post-body a { text-decoration: none; }
.post-media { margin: 8px 0 4px; border-radius: 14px; max-width: 100%; display: block; }
.post-media img, .post-media video { max-width: 100%; border-radius: 14px; display: block; }
.quote-card { border: 1px solid var(--divider); border-radius: 14px; padding: 10px 12px; margin: 8px 0 4px; background: var(--card); }
.quote-card .post-body { font-size: 15px; }
.link-preview { display: flex; gap: 10px; border: 1px solid var(--divider); border-radius: 14px; padding: 10px; margin: 8px 0 4px; text-decoration: none; color: var(--text); }
.link-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.link-preview .lp-title { font-weight: 800; font-size: 14.5px; }
.link-preview .lp-desc { color: var(--subtle); font-size: 13px; }
.actions { display: flex; align-items: center; margin: 2px -8px 0; }
.actions button { background: none; border: 0; color: var(--icon-gray); font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 5px; padding: 8px; border-radius: 999px; }
.actions button .ic { font-size: 19px; line-height: 1; }
.actions button.starred { color: #B97F04; }
.actions button.starred .ic { color: var(--gold); }
.actions button.supered { color: #B97F04; }
.actions button.bookmarked { color: var(--gold-text); }
.actions button.bookmarked .ic { color: var(--gold); }
.actions .spacer { flex: 1; }

/* ---- Generic surfaces ---- */
.empty { padding: 44px 28px; text-align: center; color: var(--subtle); }
.empty .big { font-size: 21px; color: var(--text); font-weight: 600; margin-bottom: 6px; }
.loading { padding: 40px; text-align: center; color: var(--subtle); font-weight: 700; }
.err { padding: 16px; color: var(--red); font-weight: 700; text-align: center; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--divider); background: var(--card); width: 100%; border-top: 0; border-left: 0; border-right: 0; text-align: left; font-size: 16px; color: var(--text); }
.row-item .grow { flex: 1; min-width: 0; }
.row-item .chev { color: var(--subtle); font-size: 20px; }
.section-label { padding: 18px 16px 6px; font-weight: 800; color: var(--subtle); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.btn { display: inline-block; background: var(--cyan); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 800; font-size: 16px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: none; color: var(--cyan-ink); border: 1.5px solid var(--cyan); }
.btn.danger { background: var(--red); }
.btn.block { display: block; width: 100%; text-align: center; }
input[type="text"], input[type="search"], textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--divider); color: var(--text);
  border-radius: 12px; padding: 12px; font-family: inherit; font-size: 16px;
}
textarea { resize: vertical; }
.field { padding: 8px 16px; }
.field label { display: block; font-weight: 800; font-size: 13.5px; color: var(--subtle); margin-bottom: 5px; }

/* ---- Composer ---- */
.composer { padding: 14px 16px; }
.composer textarea { min-height: 110px; border: 0; background: none; font-size: 18px; padding: 4px; }
.composer textarea:focus { outline: none; }
/* Panel row 9: the toolbar used to be one non-wrapping row that
   scrolled sideways, clipping "Allow quotes..." off the screen.
   It wraps now, and its text is 14px with honest tap heights. */
.compose-foot { display: flex; align-items: center; flex-wrap: wrap; overflow: visible; gap: 8px; padding: 6px 16px 14px; border-top: 1px solid var(--divider); }
.compose-foot::-webkit-scrollbar { display: none; }
/* App toolbar buttons: 13sp cyan borderless text (activity_compose.xml). */
.compose-foot .tool { background: none; border: 0; font-size: 14px; font-weight: 500; color: var(--cyan-ink); padding: 8px 6px; white-space: nowrap; flex: 0 0 auto; min-height: 40px; }
.foot-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--subtle); white-space: nowrap; flex: 0 0 auto; padding: 8px 6px; cursor: pointer; min-height: 40px; }
.foot-check input { width: 17px; height: 17px; margin: 0; }
.char-count { margin-left: auto; font-weight: 800; color: var(--subtle); font-size: 14px; }
.char-count.over { color: var(--red); }
.gif-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; }
.gif-strip img { height: 110px; border-radius: 10px; cursor: pointer; }
.gif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; }
.gif-grid img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; cursor: pointer; }
.attach-preview { padding: 8px 16px; position: relative; }
.attach-preview img { max-width: 220px; border-radius: 12px; }
.attach-preview button { position: absolute; margin-left: -34px; margin-top: 6px; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 50%; width: 28px; height: 28px; }

/* ---- Profile / Me ---- */
.sky-band { padding: 20px 16px 8px; text-align: center; }
.sky-band .avatar { width: 84px; height: 84px; }
.sky-name { font-size: 26px; font-weight: 700; margin-top: 8px; }
.sky-anon { color: var(--subtle); font-weight: 700; }
.stars-collected { margin: 14px 16px 0; background: var(--panel); border-radius: 14px; padding: 12px; text-align: center; }
.stars-collected .sc-label { font-weight: 800; font-size: 12.5px; letter-spacing: .08em; color: var(--subtle); text-transform: uppercase; }
.stars-collected .sc-count { font-size: 30px; font-weight: 700; color: var(--gold-text); }
.stat-strip { display: flex; margin: 14px 16px 0; border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
.stat-strip .stat { flex: 1; text-align: center; padding: 10px 2px; }
.stat-strip .stat + .stat { border-left: 1px solid var(--divider); }
.stat-strip .stat .g { font-size: 17px; }
.stat-strip .stat .n { font-weight: 800; font-size: 16px; }
.stat-strip .stat .l { color: var(--subtle); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.profile-tabs { display: flex; border-bottom: 1px solid var(--divider); margin-top: 14px; }
.profile-tabs button { flex: 1; background: none; border: 0; padding: 11px 0; font-weight: 800; font-size: 15px; color: var(--subtle); border-bottom: 3px solid transparent; }
.profile-tabs button.active { color: var(--tab-cyan); border-bottom-color: var(--tab-cyan); }

/* ---- Warren ---- */
.room-row { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--divider); width: 100%; background: var(--card); border-top: 0; border-left: 0; border-right: 0; text-align: left; color: var(--text); }
.room-glyph { width: 46px; height: 46px; border-radius: 14px; background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 24px; flex: 0 0 auto; }
.room-name { font-weight: 800; font-size: 16.5px; }
.room-meta { color: var(--subtle); font-size: 13.5px; }
.live-dot { color: var(--cyan-dark); font-weight: 800; }
.huddle-card { margin: 14px 16px; border: 1.5px solid var(--cyan); border-radius: 16px; padding: 14px 16px; }
.huddle-card .h-label { font-weight: 800; letter-spacing: .06em; font-size: 12.5px; color: var(--cyan-dark); text-transform: uppercase; }
.huddle-card .h-q { font-size: 20px; font-weight: 600; margin: 6px 0; }

/* ---- Chat / DMs ---- */
.chat-list { display: flex; flex-direction: column; }
.bubble-row { display: flex; padding: 3px 16px; }
.bubble-row.mine { justify-content: flex-end; }
.bubble { max-width: 78%; border-radius: 18px; padding: 9px 13px; font-size: 16px; white-space: pre-wrap; word-wrap: break-word; }
.bubble.theirs { background: var(--bubble-theirs); border-bottom-left-radius: 6px; }
.bubble.mine { background: var(--cyan); color: #fff; border-bottom-right-radius: 6px; }
.bubble img.gif { max-width: 200px; border-radius: 12px; display: block; }
.chat-author { font-size: 12.5px; color: var(--subtle); font-weight: 800; padding: 8px 16px 0; }
.chat-input { position: sticky; bottom: 64px; background: var(--bg); border-top: 1px solid var(--divider); display: flex; gap: 8px; padding: 10px 12px; align-items: flex-end; }
.chat-input textarea { min-height: 42px; max-height: 110px; border-radius: 21px; }
.chat-input .send { background: var(--cyan); color: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; font-size: 18px; flex: 0 0 auto; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); flex: 0 0 auto; }

/* ---- Sheets, toasts, dialogs ---- */
#sheet-root:empty { display: none; }
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--bg); width: 100%; max-width: 640px; border-radius: 20px 20px 0 0; max-height: 86vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom); }
.sheet h3 { margin: 16px 16px 6px; font-size: 20px; }
#toast-root { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; max-width: 88vw; text-align: center; }
.phrase-box { margin: 14px 16px; background: var(--panel); border-radius: 14px; padding: 16px; font-size: 18px; line-height: 1.9; font-weight: 700; text-align: center; }
.legal-body { padding: 6px 20px 30px; font-size: 15.5px; }
.legal-body h2 { }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--divider); }
.switch-row .grow { flex: 1; }
.switch-row .desc { color: var(--subtle); font-size: 13.5px; }
.switch { width: 50px; height: 30px; border-radius: 999px; background: var(--divider); border: 0; position: relative; flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: var(--cyan); }
.switch.on::after { left: 23px; }
@media (min-width: 900px) {
  #app { border-left: 1px solid var(--divider); border-right: 1px solid var(--divider); }
}

/* Sky earned name: the app's one serif-italic treatment (SPEC-DESIGN 3.7). */
.sky-name.earned { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
/* Sealed Huddle box (SPEC-DESIGN 1.4): dashed gold stroke, translucent white. */
.huddle-sealed { background: rgba(255,255,255,.6); border: 1.5px dashed #D9B84A; border-radius: 14px; padding: 12px 14px; margin-top: 8px; color: #6B5A1E; }
[data-theme="dark"] .huddel-sealed, [data-theme="dark"] .huddle-sealed { background: rgba(255,255,255,.08); }
.accent-row { display: flex; gap: 8px; padding: 4px 16px 10px; flex-wrap: wrap; }
.accent-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; }
.accent-dot.sel { border-color: var(--text); }
.settings-foot { text-align: center; color: var(--subtle); font-size: 13px; padding: 18px 0 6px; }

/* ================= PARITY PASS (app-matched surfaces) ================= */
/* Inline SVG icons ported from the app's vector drawables (icons.js). */
.icn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.icn svg { width: 100%; height: 100%; display: block; }
button .icn { pointer-events: none; }

/* Avatars: critter art in a cyan ring; placeholder = charcoal disc + letter. */
.avatar-wrap { position: relative; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #EAF7FA; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ph { width: 100%; height: 100%; background: #181818; color: var(--cyan); display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* Main shell chrome */
.top-row { display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 10px; min-height: 52px; }
.top-critter { background: none; border: 0; padding: 0; border-radius: 50%; }
.top-wordmark { height: 26px; margin-left: 8px; }
.top-btn { background: none; border: 0; width: 44px; height: 44px; position: relative; color: var(--icon-gray); display: flex; align-items: center; justify-content: center; }
.top-btn .icn { width: 25px; height: 25px; }
.top-btn .badge, .badge.mini { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cyan); color: #181818; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.header-divider { height: 1px; background: var(--divider); margin: 0 10px; }
.lockdown-banner { background: #FFF3D6; color: #7A5200; border-bottom: 1px solid #F0D48A; font-size: 13px; font-weight: 700; padding: 8px 16px; text-align: center; }
[data-theme="dark"] .lockdown-banner { background: #3A2E10; color: #FFD968; border-color: #6B5518; }
.lockdown-banner.inline { border: 1px solid #F0D48A; border-radius: 12px; margin: 0 16px 12px; }

/* Settings shell */
.settings-row { min-height: 52px; }
.settings-title { font-size: 18px; font-weight: 700; flex: 1; }
.teal-divider { height: 3px; background: var(--tab-cyan); margin: 0 16px; border-radius: 2px; }

/* Tab bar: floating pill on the active tab (v56) */
#tabbar button { position: relative; padding: 6px 0 8px; gap: 1px; }
.tab-pill { display: flex; align-items: center; justify-content: center; width: 52px; height: 27px; border-radius: 999px; position: relative; }
#tabbar button.active .tab-pill { background: var(--cyan); }
.tab-pill .icn { width: 21px; height: 21px; }
.tab-label { font-size: 10.5px; font-weight: 700; line-height: 1.15; position: relative; }
/* Anchored to the .tab-pill (its offset parent), exactly like the app's
   notif_badge inside the pill FrameLayout: 18x18, top|end, margins -2/-10. */
#tabbar .badge { position: absolute; top: -2px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.compose-fab { position: fixed; right: max(18px, calc(50vw - 302px)); bottom: 86px; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--cyan); color: #181818; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(1,160,200,.35); z-index: 45; }
.compose-fab .icn { width: 27px; height: 27px; }

/* Lens strip: grid of tiles, only the active tile shows its label. */
#lensbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 10px 14px 2px; overflow: visible; top: 53px; }
.lens-tile { background: none; border: 0; border-radius: 17px; padding: 5px 0 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text); position: relative; min-height: 62px; }
.lens-tile .icn { width: 40px; height: 40px; }
.lens-tile.active { background: var(--cyan); color: #181818; }
.lens-label { font-size: 12px; font-weight: 700; visibility: visible; line-height: 1.1; }
.lens-tile.active .lens-label { visibility: visible; }
.lens-badge { position: absolute; top: 0; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--cyan); color: #181818; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lens-tile.active .lens-badge { background: #181818; color: var(--cyan); }
.live-dot { position: absolute; top: 4px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.blurb-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px 2px; flex-wrap: wrap; }
.blurb-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; border-radius: 999px; padding: 6px 12px; background: #E1F7FD; border: 1px solid #AEE9F8; color: #007A92; }
.blurb-pill .icn { width: 14px; height: 14px; }
[data-theme="dark"] .blurb-pill { background: #0D2E38; border-color: #175263; color: #8FE3F7; }
.named-chip { border-radius: 14px; padding: 6px 12px; font-size: 13px; font-weight: 700; border: 1px solid var(--subtle); background: transparent; color: var(--subtle); }
.named-chip.on { background: var(--cyan); border-color: var(--cyan); color: #181818; }
.feed-list { position: relative; }
.feed-list.crossfade { animation: feedfade .25s ease; }
@keyframes feedfade { from { opacity: 0; } to { opacity: 1; } }
.new-pill { position: fixed; top: 118px; left: 50%; transform: translateX(-50%); z-index: 35; background: var(--cyan); color: #fff; border: 0; border-radius: 20px; padding: 10px 18px; font-weight: 800; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.sentinel { height: 2px; }
/* Pull-to-refresh indicator (app: the spinner in screen_list.xml,
   driven by setupPullToRefresh in app.js). The anchor takes no space;
   the chip slides down over the content top as the pull tracks. */
.ptr-anchor { position: relative; height: 0; z-index: 34; }
.ptr-ind { position: absolute; left: 50%; top: 4px; width: 38px; height: 38px; border-radius: 50%; background: var(--card); box-shadow: 0 3px 12px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, -6px); pointer-events: none; }
.ptr-ring { width: 20px; height: 20px; border-radius: 50%; border: 3px solid #CDEDF5; border-top-color: var(--cyan); }
.ptr-ind.spin .ptr-ring { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
.avatar-btn { cursor: pointer; }
.critter-menu-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 2px; }
.critter-menu-name { font-size: 17px; font-weight: 800; color: var(--text); }

/* Skeleton shimmer (SkeletonView geometry approximation) */
.skel { padding: 6px 0; }
.skel-row { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; }
.skel-av { width: 44px; height: 44px; border-radius: 50%; background: var(--divider); flex: 0 0 auto; position: relative; overflow: hidden; }
.skel-bars { flex: 1; display: flex; flex-direction: column; gap: 11px; padding-top: 2px; }
.skel-bar { height: 12px; border-radius: 6px; background: var(--divider); position: relative; overflow: hidden; }
.skel-av::after, .skel-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%); animation: shimmer 1.3s linear infinite; transform: translateX(-100%); }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Empty + error states (132dp cyan disc) */
.empty-disc { width: 132px; height: 132px; margin: 8px auto 14px; border-radius: 50%; background: rgba(1,193,228,.1); border: 3px solid rgba(1,193,228,.35); display: flex; align-items: center; justify-content: center; color: var(--cyan); position: relative; }
.empty-disc::before, .empty-disc::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: rgba(1,193,228,.5); }
.empty-disc::before { top: 18px; left: 26px; }
.empty-disc::after { bottom: 20px; right: 24px; }
.empty-glyph .icn { width: 44px; height: 44px; }
.empty .big { font-size: 19px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.empty-body { color: var(--subtle); font-size: 14.5px; }
.empty-cta { margin-top: 16px; }
.pad-note { padding: 14px 16px; }
.center-note { text-align: center; padding: 6px 16px; }
.err { padding: 30px 22px; text-align: center; color: var(--red); font-weight: 700; }

/* Posts */
.post-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 2px; }
.post-headline { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; }
.post-headline .author-name { font-weight: 800; }
.post-headline .post-meta { font-size: 13px; }
.filter-bar, .cw-bar { width: 100%; text-align: left; background: var(--input-bg); border: 1px solid var(--divider); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-weight: 600; color: var(--subtle); margin: 4px 0 8px; }
.media-strip { display: flex; gap: 6px; margin: 8px 0 2px; overflow-x: auto; }
.media-cell { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: var(--divider); }
img.post-media { max-width: 100%; border-radius: 12px; margin: 8px 0 2px; display: block; }
.link-prompt { display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--divider); border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--cyan-ink); margin: 8px 0 2px; }
[data-theme="dark"] .link-prompt { color: var(--cyan); }
.quote-unavailable { font-style: italic; color: var(--subtle); font-size: 14px; padding: 8px 0 2px; }
.pin-line { display: flex; align-items: center; gap: 5px; color: var(--gold-text); font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.pin-line .icn { width: 14px; height: 14px; }
.actions { display: flex; align-items: center; margin: 6px -6px 0; min-height: 46px; }
.act { flex: 0.8; background: none; border: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--icon-gray); padding: 8px 2px; }
.act.counted { flex: 1.2; }
.act .icn { width: 25px; height: 25px; }
.act.super .icn { width: 29px; height: 29px; }
.act.bookmark .icn { width: 24px; height: 24px; }
.act.more .icn { width: 26px; height: 26px; }
.act-count { font-size: 13px; font-weight: 700; }
.act-count.gold-count { color: #B97F04; }
.act.dim { opacity: .38; }
.act.on-star { color: var(--gold-text); }
.inline-link { color: var(--cyan-ink); font-weight: 600; }
[data-theme="dark"] .inline-link { color: var(--cyan); }

/* Sheets */
.grab { width: 44px; height: 5px; border-radius: 3px; background: #D8E2E5; margin: 10px auto 2px; }
.sheet-rows { padding: 6px 8px 2px; }
.sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 10.5px 10px; text-align: left; color: var(--text); }
.sheet-chip { width: 40px; height: 40px; border-radius: 13px; background: #EFF7F8; display: flex; align-items: center; justify-content: center; color: var(--cyan-ink); flex: 0 0 auto; }
[data-theme="dark"] .sheet-chip { background: #12333D; color: var(--cyan); }
.sheet-chip .icn { width: 25px; height: 25px; }
.sheet-chip.report { background: #FDECEF; color: #C81E4E; }
.sheet-row-label { font-size: 15.5px; font-weight: 500; }
.sheet-row-label.report { color: #C81E4E; font-weight: 700; }
.sheet-div { height: 1.5px; background: #EDF1F2; margin: 6px 16px; }
[data-theme="dark"] .sheet-div { background: #2E2E2E; }
.sheet-cancel { display: block; width: 100%; background: none; border: 0; padding: 14px; font-size: 15.5px; font-weight: 700; color: #37474F; text-align: center; }
[data-theme="dark"] .sheet-cancel { color: var(--subtle); }
.sheet-sub { padding: 0 16px; color: var(--subtle); font-size: 14px; }

/* Thread */
.comments-head { font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--cyan-ink); border-bottom: 2px solid var(--cyan); margin: 10px 16px 0; padding: 16px 4px 8px 0; }
[data-theme="dark"] .comments-head { color: var(--cyan); }
.chat-input { position: sticky; bottom: 64px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-top: 1px solid var(--divider); z-index: 20; }
.chat-field { background: var(--input-bg); border: 1px solid var(--divider); border-radius: 999px; padding: 0 14px; display: flex; }
.chat-field input { flex: 1; border: 0; background: none; color: var(--text); font-size: 15px; padding: 10px 0; outline: none; min-width: 0; }
.send-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--cyan); color: #fff; border: 0; border-radius: 999px; padding: 10px 17px 10px 15px; font-size: 15px; font-weight: 800; flex: 0 0 auto; }
.send-pill .icn { width: 16px; height: 16px; }

/* Composer */
.compose-top { display: flex; align-items: center; padding: 8px 12px; gap: 8px; border-bottom: 1px solid var(--divider); }
.link-btn.subtle-link { color: var(--subtle); font-size: 13px; font-weight: 500; }
.compose-top .char-count { margin-left: 6px; font-size: 15px; font-weight: 500; }
.link-btn { background: none; border: 0; color: var(--cyan-ink); font-size: 15px; font-weight: 700; padding: 8px 4px; }
[data-theme="dark"] .link-btn { color: var(--cyan); }
.drafts-label { font-size: 13px; color: var(--subtle); font-weight: 600; }
.icon-btn { background: none; border: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text); border-radius: 50%; }
.icon-btn .icn { width: 24px; height: 24px; }
.composer { display: flex; gap: 10px; padding: 16px 16px 0; align-items: flex-start; }
.composer textarea { flex: 1; border: 0; background: none; color: var(--text); font-size: 18px; resize: none; outline: none; min-height: 140px; font-family: inherit; }
.field { margin: 10px 16px; background: var(--input-bg); border: 1px solid var(--divider); border-radius: 14px; padding: 4px 12px; display: flex; flex-direction: column; }
.field input, .field textarea { border: 0; background: none; color: var(--text); font-size: 15.5px; padding: 10px 0; outline: none; font-family: inherit; width: 100%; }
.fld-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--cyan-ink); padding-top: 8px; }
[data-theme="dark"] .fld-label { color: var(--cyan); }
.compose-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px; }
.text-tool { background: none; border: 0; color: var(--cyan-ink); font-size: 14.5px; font-weight: 700; padding: 9px 10px; border-radius: 10px; }
[data-theme="dark"] .text-tool { color: var(--cyan); }
.text-tool:disabled { opacity: .4; }
/* The CW field is a plain single-line EditText in the app (margins 16dp,
   hint 15sp), not a filled box: strip the generic .field chrome. */
.field.spoiler-field { margin: 2px 16px 0; background: none; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0; padding: 2px 0; }
.field.spoiler-field input { font-size: 15px; padding: 8px 0; }
.compose-quote { margin: 8px 16px; }
.compose-quote .quote-head { display: flex; align-items: center; gap: 8px; }
.compose-postbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px 16px; }
.char-count { font-size: 13.5px; font-weight: 700; color: var(--subtle); margin-left: auto; }
.char-count.over { color: var(--red); }
.post-fab-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--cyan); color: #181818; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; }
.post-fab-btn .icn { width: 27px; height: 27px; }
.post-fab-btn:disabled { opacity: .4; }
.attach-preview { display: flex; align-items: center; gap: 8px; margin: 8px 16px; font-size: 14px; background: var(--input-bg); border: 1px solid var(--divider); border-radius: 10px; padding: 8px 12px; }
.attach-preview button { margin-left: auto; }
.undo-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: 158px; width: min(92vw, 600px); background: #242424; color: #F4F4F4; border-radius: 12px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; z-index: 70; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.undo-label { flex: 1; font-size: 14.5px; font-weight: 600; }
.undo-btn { background: none; border: 0; color: var(--cyan); font-size: 15px; font-weight: 800; padding: 6px 8px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 12px; max-height: 46vh; overflow-y: auto; }
.gif-grid img { width: 100%; height: 92px; object-fit: cover; border-radius: 8px; }
.tiny-btn { background: none; border: 0; color: var(--subtle); font-size: 12.5px; font-weight: 700; padding: 4px 6px 4px 0; }
.tiny-btn.danger-text, .danger-text { color: var(--red); }

/* Scheduled */
.sched-row { padding: 13px 16px; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 6px; }
.sched-text { font-size: 15px; }
.draft-text { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft-row .grow { min-width: 0; }
.sched-bottom { display: flex; align-items: center; justify-content: space-between; }

/* Search / Discover */
.quick-row { display: flex; gap: 8px; padding: 12px 16px 2px; flex-wrap: wrap; }
.quick-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border-radius: 999px; padding: 7px 14px; background: #E1F7FD; border: 1px solid #AEE9F8; color: #007A92; font-size: 13.5px; font-weight: 700; }
.quick-pill .icn { width: 16px; height: 16px; }
[data-theme="dark"] .quick-pill { background: #0D2E38; border-color: #175263; color: #8FE3F7; }
.search-field { margin: 12px 16px; background: var(--input-bg); border: 1px solid var(--divider); border-radius: 999px; display: flex; align-items: center; padding: 2px 4px 2px 16px; gap: 8px; }
.search-field input { flex: 1; border: 0; background: none; color: var(--text); font-size: 15.5px; padding: 10px 0; outline: none; min-width: 0; }
.search-btn { flex: 0 0 auto; }
.type-chips { display: flex; gap: 8px; padding: 4px 16px 10px; }
.type-chip { border: 1px solid #E4ECEE; background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; }
[data-theme="dark"] .type-chip { border-color: #2E4A54; }
.type-chip.on { background: var(--cyan); border-color: var(--cyan); color: #181818; }
.section-title { font-size: 16px; font-weight: 800; padding: 14px 16px 6px; }
.section-title.pad-title { padding-top: 18px; }

/* Notifications */
.notif-top { display: flex; justify-content: flex-end; padding: 8px 16px 0; }
.cyan-link { background: none; border: 0; color: var(--cyan-ink); font-size: 14px; font-weight: 700; padding: 6px 0; }
[data-theme="dark"] .cyan-link { color: var(--cyan); }
.notif-row { display: flex; gap: 11px; width: 100%; background: var(--card); border: 0; border-bottom: 1px solid var(--divider); padding: 12px 16px; text-align: left; color: var(--text); align-items: flex-start; }
.notif-ic { width: 28px; height: 28px; color: var(--cyan-ink); flex: 0 0 auto; margin-top: 2px; }
[data-theme="dark"] .notif-ic { color: var(--cyan); }
.notif-ic .icn { width: 28px; height: 28px; }
.notif-body { font-size: 14.5px; padding-top: 8px; }
.ceremony-pin-card { margin: 12px 16px; background: linear-gradient(135deg, #FFF6D8, #FFFDF4); border: 1.5px solid #F0C94E; border-radius: 16px; padding: 14px 16px; }
[data-theme="dark"] .ceremony-pin-card { background: #2E2A18; border-color: #8A6D1F; }
.ceremony-pin-card .big { font-weight: 800; font-size: 16px; margin-bottom: 4px; }

/* Profile */
.profile-hero { display: flex; gap: 14px; padding: 18px 16px 6px; align-items: center; }
.hero-id { flex: 1; min-width: 0; }
.hero-name { font-size: 24px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.named-badge { display: inline-block; background: var(--gold); color: #1A1A1A; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; margin-top: 4px; }
.formerly { font-style: italic; color: var(--subtle); font-size: 13px; margin-top: 3px; }
.profile-actions { display: flex; gap: 10px; padding: 10px 16px 4px; }
.pill-action { flex: 1; min-height: 46px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.pill-action .icn { width: 19px; height: 19px; }
.sky-panel { margin: 14px 16px 0; border-radius: 20px; padding: 16px 16px 12px; background: linear-gradient(160deg, #191938, #12122B 55%, #1B2350); color: #fff; }
.sky-head { display: flex; align-items: center; }
.sky-tag { font-size: 13px; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.92); }
.sky-slots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 12px; }
.sky-slot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: rgba(190,225,245,.13); }
.sky-earned-name { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 24px; color: var(--gold); margin-top: 12px; }
.sky-earned-sub { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.75); margin-top: 2px; }
.sky-line { font-size: 13.5px; font-weight: 700; padding: 10px 18px 0; }
.ceremony-progress { margin: 12px 16px 0; background: #FFF3D6; border: 1px solid #F0D48A; border-radius: 14px; padding: 10px 14px; }
[data-theme="dark"] .ceremony-progress { background: #2E2A18; border-color: #6B5518; }
.cp-text { font-size: 13.5px; font-weight: 700; }
.cp-track { height: 6px; border-radius: 3px; background: #F3E5C0; margin-top: 8px; overflow: hidden; }
[data-theme="dark"] .cp-track { background: #4A3F1C; }
.cp-fill { height: 100%; background: #E8A90C; border-radius: 3px; }
.links-box { margin: 12px 16px 0; border: 1px solid var(--divider); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.links-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--subtle); }
.profile-link { font-size: 14.5px; word-break: break-all; }
.warren-line { text-align: center; color: var(--subtle); font-size: 13px; padding: 12px 16px 0; }
.stat-strip { display: flex; margin: 14px 8px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 10px 0; }
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; color: var(--text); }
.stat .stat-ic { width: 17px; height: 19px; color: var(--cyan-ink); }
[data-theme="dark"] .stat .stat-ic { color: var(--cyan); }
.stat .n { font-size: 20px; font-weight: 800; line-height: 1.15; }
.stat .l { font-size: 10px; font-weight: 600; color: var(--subtle); letter-spacing: .03em; }
.stat.tappable { cursor: pointer; }
.profile-tabs { display: flex; margin-top: 8px; border-bottom: 1px solid var(--divider); }
.profile-tabs button { flex: 1; background: none; border: 0; font-size: 15px; padding: 12px 0 10px; color: var(--subtle); position: relative; font-weight: 500; }
.profile-tabs button.active { color: var(--tab-cyan); font-weight: 800; }
.profile-tabs button.active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 52px; height: 3.5px; border-radius: 2px; background: var(--tab-cyan); }

/* Me menu */
.me-menu { padding: 22px 16px 8px; }
.menu-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--cyan-ink); margin-bottom: 8px; }
[data-theme="dark"] .menu-label { color: var(--cyan); }
.menu-card, .logout-card, .demo-card { border: 1px solid #E6EDEF; border-radius: 20px; overflow: hidden; margin-bottom: 12px; background: var(--card); }
[data-theme="dark"] .menu-card, [data-theme="dark"] .logout-card, [data-theme="dark"] .demo-card { border-color: #2E2E2E; }
.logout-card { border: 2px solid #F3C3D3; }
.demo-card { border: 1.5px dashed #C9D6DB; }
[data-theme="dark"] .demo-card { border-color: #3A4A50; }
.demo-head { padding: 8px 14px 0; display: flex; justify-content: flex-end; }
.demo-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; background: var(--divider); color: var(--subtle); border-radius: 6px; padding: 2px 7px; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 11px 14px; text-align: left; color: var(--text); }
.menu-chip { width: 34px; height: 34px; border-radius: 11px; background: #EFF7F8; display: flex; align-items: center; justify-content: center; color: var(--cyan-ink); flex: 0 0 auto; }
[data-theme="dark"] .menu-chip { background: #12333D; color: var(--cyan); }
.menu-chip .icn { width: 19px; height: 19px; }
.menu-chip.rose { background: #FDE8EF; color: #C2185B; }
.menu-row-label { flex: 1; font-size: 15.5px; font-weight: 500; }
.menu-row-label.rose-text { color: #C2185B; font-weight: 700; }
.menu-chev { width: 18px; height: 18px; color: var(--subtle); }
.menu-div { height: 1px; background: var(--divider); margin: 0 14px; }

/* Digest */
.digest-week { font-size: 15px; font-weight: 800; color: var(--cyan-ink); padding: 12px 16px 0; }
[data-theme="dark"] .digest-week { color: var(--cyan); }
.digest-card { margin: 0 16px 10px; border: 2px solid #CFE3EA; border-radius: 14px; padding: 12px 14px; background: var(--card); cursor: pointer; }
[data-theme="dark"] .digest-card { border-color: #2E4A54; }

/* Critter Lab */
.lab-head { padding-bottom: 4px; }
.lab-preview { display: flex; margin: 6px auto 2px; }
.lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px 16px; }
.lab-cell { background: var(--card); border: 1.5px solid var(--divider); border-radius: 16px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--text); }
.lab-cell.sel { border-color: var(--cyan); box-shadow: 0 0 0 1.5px var(--cyan); }
.lab-cell img { width: 56px; height: 56px; object-fit: contain; }
.lab-name { font-size: 13.5px; font-weight: 700; text-transform: capitalize; }
.lab-cond { font-size: 11px; color: var(--subtle); text-align: center; line-height: 1.25; }
.colorway-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 16px; }
.colorway-dot { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--divider); padding: 0; }
.colorway-dot.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }
.colorway-dot.locked { opacity: .35; }

/* Ceremonies */
.ceremony-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 4px; }
.live-pill-sm { background: var(--cyan); color: #181818; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 11px; letter-spacing: .04em; }
.ceremony-countdown { font-size: 22px; font-weight: 800; color: var(--cyan-ink); }
[data-theme="dark"] .ceremony-countdown { color: var(--cyan); }
.ceremony-av { margin: 10px auto 2px; display: flex; }
.ceremony-blurb { padding: 10px 22px; font-size: 15px; text-align: center; color: var(--subtle); }
.sort-row { display: flex; gap: 8px; padding: 6px 16px; }
.ceremony-foot { text-align: center; color: var(--subtle); font-size: 13.5px; padding: 18px 24px 8px; }
.prop-counter { text-align: right; padding: 0 20px 6px; font-size: 12.5px; color: var(--subtle); font-weight: 700; }
.chev-ic { width: 18px; height: 18px; color: var(--subtle); }

/* Lists */
.list-manage { display: flex; gap: 10px; padding: 12px 16px 0; }
.filters-sub { padding: 12px 16px 4px; color: var(--subtle); font-size: 14px; }

/* Warren */
.warren-presence { display: flex; align-items: center; gap: 8px; padding: 14px 16px 2px; }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FBF71; flex: 0 0 auto; }
.presence-dot.grey { background: #9AA5AB; }
.presence-line { font-size: 13px; font-weight: 700; color: var(--subtle); }
.room-search { margin: 10px 16px 0; background: var(--input-bg); border: 1px solid var(--divider); border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.room-search .icn { width: 19px; height: 19px; color: var(--subtle); }
.room-search input { flex: 1; border: 0; background: none; color: var(--text); font-size: 15px; padding: 11px 0; outline: none; min-width: 0; }
.create-room-btn { margin: 12px 16px 4px; width: calc(100% - 32px); min-height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.create-room-btn .icn { width: 17px; height: 17px; }
.warren-label { font-size: 12px; font-weight: 800; letter-spacing: .09em; color: var(--subtle); padding: 18px 16px 8px; }
.warren-label.gold-label { color: #8A6100; }
[data-theme="dark"] .warren-label.gold-label { color: var(--gold); }
.warren-tile { position: relative; }
.room-row { display: flex; gap: 12px; align-items: flex-start; width: calc(100% - 28px); margin: 0 14px 10px; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 13px 14px; text-align: left; color: var(--text); }
.room-row.venue { background: #FFFBEC; border-color: #EBCB6B; }
[data-theme="dark"] .room-row.venue { background: #2E2A18; border-color: #6B5518; }
.room-medallion { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.room-medallion .icn { width: 24px; height: 24px; }
.room-medallion.sm { width: 34px; height: 34px; }
.room-medallion.sm .icn { width: 18px; height: 18px; }
.room-name-row { display: flex; align-items: center; gap: 7px; }
.room-name { font-size: 15.5px; font-weight: 800; }
.room-name.big { font-size: 19px; }
.room-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; background: var(--gold); color: #5C4300; border-radius: 5px; padding: 2px 5px; }
.venue-host { font-size: 12.3px; font-weight: 700; color: #8A6100; margin-top: 1px; }
[data-theme="dark"] .venue-host { color: var(--gold); }
.room-topic { font-size: 12.8px; color: var(--subtle); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.room-foot { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.room-here { font-size: 12px; font-weight: 800; }
.presence-cluster { display: inline-flex; align-items: center; }
.room-action { align-self: center; border: 1.5px solid var(--cyan); color: var(--cyan-ink); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 800; flex: 0 0 auto; }
[data-theme="dark"] .room-action { color: var(--cyan); }
.main-burrow-card { margin: 0 14px 10px; border-radius: 20px; padding: 15px 14px 13px; background: #F2FBFE; border: 1.5px solid #AEE9F8; cursor: pointer; }
.main-burrow-card.huddle-mode { background: #FFF6D8; border-color: #F0C94E; }
[data-theme="dark"] .main-burrow-card { background: #0D2E38; border-color: #175263; }
[data-theme="dark"] .main-burrow-card.huddle-mode { background: #2E2A18; border-color: #6B5518; }
.mb-tags { display: flex; gap: 6px; margin-bottom: 6px; }
.mb-tag.gold { background: var(--gold); color: #5C4300; font-size: 10px; font-weight: 800; letter-spacing: .08em; border-radius: 6px; padding: 3px 8px; }
.mb-name { font-size: 19px; font-weight: 800; }
.mb-topic { font-size: 13px; color: #45525A; margin-top: 2px; }
[data-theme="dark"] .mb-topic { color: var(--subtle); }
.mb-here-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.mb-here { font-size: 12.5px; font-weight: 800; color: var(--subtle); }
.mb-here.green { color: #1E7A46; }
.jump-in { margin-left: auto; border-radius: 999px; padding: 8px 18px; }
.keeper-strip { margin-top: 10px; background: #FFF8E6; border: 1px solid #F3DFA0; border-radius: 10px; padding: 8px 11px; font-size: 13px; }
[data-theme="dark"] .keeper-strip { background: #2E2A18; border-color: #6B5518; }
.sort-chips { display: flex; gap: 7px; padding: 0 16px 10px; }
.sort-chip { border: 1px solid var(--divider); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.sort-chip.on { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.glyph-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 4px 16px 8px; }
.glyph-cell { aspect-ratio: 1; max-width: 50px; border-radius: 50%; border: 0; background: var(--cyan); color: #fff; display: flex; align-items: center; justify-content: center; justify-self: center; width: 100%; }
.glyph-cell .icn { width: 23px; height: 23px; }
.glyph-cell.sel { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5.5px #181818; }
.accent-row { display: flex; gap: 10px; padding: 4px 16px 10px; flex-wrap: wrap; }
.accent-dot { width: 36px; height: 36px; border-radius: 50%; border: 0; }
.accent-dot.sel { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5.5px #181818; }
.room-note { display: flex; gap: 8px; margin: 4px 16px 6px; background: #F2FBFE; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: #45525A; align-items: flex-start; }
[data-theme="dark"] .room-note { background: #0D2E38; color: var(--subtle); }
.room-note .icn { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.topic-counter { font-size: 11.5px; color: var(--subtle); text-align: right; padding-bottom: 6px; }
.create-cta { min-height: 52px; border-radius: 26px; }

/* Room view */
#masthead.room-top, #masthead.chat-top { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; }
.room-head { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.room-title-btn { background: none; border: 0; color: var(--text); padding: 4px 2px; text-align: left; min-width: 0; }
.room-title-col { display: flex; align-items: center; gap: 4px; }
.room-chev { width: 18px; height: 18px; color: var(--subtle); }
.people-btn { position: relative; width: 40px; height: 40px; border-radius: 14px; background: #F2FBFE; border: 1px solid #AEE9F8; color: var(--cyan-ink); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
[data-theme="dark"] .people-btn { background: #0D2E38; border-color: #175263; color: var(--cyan); }
.people-btn .icn { width: 22px; height: 22px; }
.people-count { position: absolute; top: -7px; right: -7px; background: var(--gold); color: #181818; font-size: 10.5px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.room-status { display: flex; align-items: center; gap: 9px; padding: 8px 16px 2px; }
.room-topic-line { font-size: 13px; color: var(--subtle); }
.msglist { display: flex; flex-direction: column; padding: 8px 0 10px; }
.roommsg { display: flex; gap: 10px; padding: 7px 16px; align-items: flex-start; }
.msg-author { display: flex; gap: 7px; align-items: baseline; }
.msg-author .author-name { font-size: 13.5px; font-weight: 800; }
.msg-author .author-time { font-size: 11.5px; color: var(--subtle); }
.roommsg-img { max-width: 220px; border-radius: 12px; margin-top: 4px; }
.empty-room { text-align: center; color: var(--subtle); padding: 34px 30px; font-size: 15px; }
.huddle-card { margin: 10px 14px 2px; border-radius: 16px; padding: 13px 15px; border: 1.5px solid var(--divider); background: var(--card); }
.huddle-card.sealed { border-style: dashed; border-color: #D9B84A; background: #FFFBEC; }
.huddle-card.live { background: #F2FBFE; border-color: #AEE9F8; }
.huddle-card.keeper { background: #FFF8E6; border-color: #F3DFA0; }
[data-theme="dark"] .huddle-card.sealed, [data-theme="dark"] .huddle-card.keeper { background: #2E2A18; }
[data-theme="dark"] .huddle-card.live { background: #0D2E38; }
.huddle-label { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: var(--subtle); }
.huddle-label.teal { color: var(--cyan-ink); font-size: 12px; letter-spacing: 0; text-transform: none; }
.huddle-label.gold-cap { color: #8A6100; margin-top: 8px; }
.huddle-ic { width: 16px; height: 16px; }
.starts-chip { margin-left: auto; background: var(--gold); color: #5C4300; border-radius: 999px; padding: 3px 9px; font-size: 11px; letter-spacing: 0; }
.sealed-title { font-size: 15.5px; font-weight: 800; margin-top: 7px; }
.sealed-note { font-size: 13px; color: var(--subtle); margin-top: 3px; }
.huddle-prompt { font-size: 20px; font-weight: 600; margin-top: 4px; line-height: 1.3; }
.huddle-note { font-size: 13px; margin-top: 6px; }
.huddle-note.dim { color: var(--subtle); }
.huddle-answer { font-size: 16.5px; margin-top: 6px; line-height: 1.35; }
.keeper-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 700; }
.keeper-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; background: #FFF3D6; border: 1px solid #F0D48A; color: #8A6100; border-radius: 999px; padding: 3px 9px; font-size: 12.5px; font-weight: 800; }
.keeper-chip .icn { width: 14px; height: 14px; }
.huddle-star-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; background: #FFF8E6; border: 1px solid #F3DFA0; color: #8A6100; border-radius: 999px; padding: 3px 9px; font-size: 12.5px; font-weight: 800; min-height: 32px; }
.huddle-star-chip .icn { width: 13px; height: 13px; }
.huddle-star-chip.on { background: var(--gold); color: #181818; }
.presence-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 65; display: flex; justify-content: flex-end; }
.presence-panel { width: min(320px, 86vw); background: var(--bg); height: 100%; overflow-y: auto; padding-bottom: 20px; }
.presence-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 4px; }
.presence-count { font-size: 15px; font-weight: 800; color: var(--cyan-ink); }
.presence-title { font-size: 17px; font-weight: 800; flex: 1; }

/* Messages + chat */
.requests-banner { display: block; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--divider); color: var(--cyan-ink); font-size: 15px; font-weight: 800; text-align: center; padding: 14px 16px; }
[data-theme="dark"] .requests-banner { color: var(--cyan); }
.convo-l1 { display: flex; align-items: baseline; gap: 8px; }
.convo-name { font-size: 15px; font-weight: 800; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-time { font-size: 12px; color: var(--subtle); }
.convo-anon { font-size: 13px; color: var(--subtle); }
.convo-snippet { font-size: 14px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.chat-title { font-size: 16px; font-weight: 800; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search { padding: 8px 14px; border-bottom: 1px solid var(--divider); }
.chat-search.hidden { display: none; }
.chat-search input { width: 100%; border: 1px solid var(--divider); background: var(--input-bg); color: var(--text); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; outline: none; }
.msglist .bubble { align-self: flex-start; font-size: 14px; max-width: 78%; }
.msglist .bubble.mine { align-self: flex-end; background: var(--cyan); color: #181818; border-bottom-right-radius: 4px; }
.msglist .bubble:not(.mine) { background: var(--bubble-theirs); border-bottom-left-radius: 4px; }
.bubble .btime { font-size: 10px; opacity: .65; margin-top: 3px; text-align: right; }
.bubble.pending { opacity: .65; }
.bubble.hit { outline: 2px solid var(--gold); }
.bubble.dimmed { opacity: .45; }
.dm-gif { width: 180px; height: 120px; object-fit: cover; border-radius: 10px; display: block; }
.gif-btn { background: none; border: 1.5px solid var(--divider); border-radius: 10px; color: var(--subtle); font-size: 12px; font-weight: 800; padding: 8px 9px; flex: 0 0 auto; }

/* Settings */
.settings-hero { margin: 14px 16px 4px; border: 1.5px solid var(--divider); border-radius: 20px; padding: 16px; background: var(--card); }
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-title { font-size: 17.5px; font-weight: 800; }
.hero-chip { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: #FDE8EF; color: #C2185B; border-radius: 999px; padding: 4px 9px; }
.hero-chip.backed { background: #E4F7EC; color: #1E7A46; }
.hero-body { font-size: 13.5px; color: var(--subtle); margin: 9px 0 4px; line-height: 1.45; }
.hero-fine { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.settings-hero .btn { margin-top: 8px; }
.set-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--cyan-ink); padding: 20px 18px 7px; }
[data-theme="dark"] .set-group-label { color: var(--cyan); }
.set-card { margin: 0 16px; border: 1px solid #E6EDEF; border-radius: 20px; background: var(--card); overflow: hidden; }
[data-theme="dark"] .set-card { border-color: #2E2E2E; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 12px 14px; text-align: left; color: var(--text); }
.set-chip { width: 34px; height: 34px; border-radius: 11px; background: #EFF7F8; display: flex; align-items: center; justify-content: center; color: var(--cyan-ink); flex: 0 0 auto; }
[data-theme="dark"] .set-chip { background: #12333D; color: var(--cyan); }
.set-chip .icn { width: 19px; height: 19px; }
.set-chip.contrib { background: #FDE8EF; color: #C2185B; }
.set-title { font-size: 15.5px; font-weight: 700; }
.set-sub { font-size: 12.8px; color: var(--subtle); margin-top: 1px; line-height: 1.35; }
.set-div { height: 1px; background: var(--divider); margin: 0 14px; }
.value-pill { background: var(--input-bg); border: 1px solid var(--divider); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 800; flex: 0 0 auto; }
.set-chev { width: 17px; height: 17px; color: var(--subtle); flex: 0 0 auto; }
.mini-label { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; color: var(--subtle); padding: 12px 14px 2px; }
.switch.disabled { opacity: .35; }
.contrib-card { padding-bottom: 14px; margin-top: 12px; }
.contrib-head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 0; }
.contrib-title { font-size: 17.5px; font-weight: 800; }
.contrib-body { font-size: 13.5px; color: var(--subtle); padding: 8px 14px 12px; line-height: 1.45; }
.contrib-card .btn { margin: 0 14px; width: calc(100% - 28px); }
.lens-editor { margin: 0 16px; }
.lens-editor-title { font-size: 16.5px; font-weight: 800; }
.lens-edit-row { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 9px 10px; margin-top: 8px; }
.lens-edit-row.dragging { opacity: .5; }
.grip-ic { width: 20px; height: 20px; color: var(--subtle); cursor: grab; }
.lens-edit-name { flex: 1; font-size: 15.5px; font-weight: 600; }
.default-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; background: var(--gold); color: #5C4300; border-radius: 5px; padding: 2px 6px; }
.chev-chip { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--divider); background: var(--input-bg); color: var(--subtle); display: flex; align-items: center; justify-content: center; padding: 0; }
.chev-chip .icn { width: 16px; height: 16px; }
.lens-editor .set-card { margin: 10px 0 0; }
.pad-title { padding: 14px 14px 0; }
.pad-sub { padding: 4px 14px 10px; }
.settings-foot { text-align: center; padding: 30px 16px 20px; }
.foot-wordmark { width: 160px; }
.foot-tagline { font-size: 14.5px; color: var(--gold-text); font-weight: 600; margin-top: 6px; }
.logout-link { background: none; border: 0; color: var(--red); font-size: 15.5px; font-weight: 800; margin-top: 16px; padding: 8px; }
.btn.sm { min-height: 36px; padding: 6px 14px; font-size: 13.5px; }
.btn.danger { background: var(--red); color: #fff; }
.save-btn { margin: 14px 16px; width: calc(100% - 32px); }
.edit-avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
.switch-label { font-size: 15.5px; font-weight: 600; }

/* Never sell / legal / account */
.never-body { padding: 8px 22px 20px; }
.never-intro { font-style: italic; font-size: 15.5px; color: var(--subtle); }
.never-title { font-size: 16.5px; font-weight: 800; color: var(--cyan-ink); margin-top: 16px; }
[data-theme="dark"] .never-title { color: var(--cyan); }
.never-text { font-size: 15px; margin: 4px 0 0; line-height: 1.45; }
.never-rosa { font-size: 15px; line-height: 1.5; }
.legal-text { white-space: pre-wrap; font-family: inherit; font-size: 14.5px; line-height: 1.55; padding: 16px 20px 30px; margin: 0; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 20px 14px; font-size: 15px; font-weight: 600; }
.check-row input { width: 20px; height: 20px; accent-color: var(--cyan); }
.phrase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 16px 16px; }
.phrase-cell { background: var(--input-bg); border: 1px solid var(--divider); border-radius: 10px; padding: 10px 8px; font-size: 17px; font-weight: 600; text-align: center; }
.pad-intro { white-space: pre-wrap; }
.warn-note { color: var(--red); }

/* Enter + onboarding */
#masthead.enter-top { display: flex; justify-content: flex-end; padding: 8px 10px; }
.enter-wrap { padding: 12vh 26px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.enter-wordmark { width: 210px; max-width: 70vw; }
.enter-tagline { font-size: 16px; color: var(--gold-text); font-weight: 600; margin: 12px 0 34px; }
.enter-btn { width: 100%; min-height: 54px; font-size: 16.5px; }
.enter-browse { font-size: 13px; color: var(--subtle); margin-top: 18px; line-height: 1.45; }
.enter-note { font-size: 13px; color: var(--subtle); margin-top: 14px; line-height: 1.45; }
.enter-legal { margin-top: 22px; font-size: 13px; }
.enter-legal a { color: var(--cyan-ink); font-weight: 700; text-decoration: none; }
.ob-overlay { position: fixed; inset: 0; background: #181818; color: #F4F4F4; z-index: 90; display: flex; flex-direction: column; align-items: center; padding: 18px 26px calc(20px + env(safe-area-inset-bottom)); }
.ob-skip { align-self: flex-end; background: none; border: 0; color: #E8E8E8; font-size: 14px; font-weight: 800; padding: 10px 6px; }
.ob-art { height: 190px; display: flex; align-items: center; justify-content: center; margin-top: 4vh; }
.ob-critter { width: 168px; height: 168px; object-fit: contain; animation: obbob 2.6s ease-in-out infinite; }
@keyframes obbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.ob-backup-icon { width: 128px; height: 128px; color: var(--cyan); }
.ob-body { text-align: center; max-width: 420px; }
.ob-title { font-size: 24px; font-weight: 800; line-height: 1.2; }
.ob-text { font-size: 15.5px; color: #C9C9C9; margin-top: 12px; line-height: 1.5; }
.ob-text b { color: #fff; }
.ob-dots { display: flex; gap: 7px; margin-top: auto; padding: 18px 0 14px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); }
.ob-dot.on { background: #fff; }
.ob-next { width: 100%; max-width: 420px; min-height: 52px; }
.ob-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ob-actions .btn.ghost { background: transparent; color: #F4F4F4; border-color: #3A3A3A; }
.ob-note { font-size: 12.5px; color: #9A9A9A; margin-top: 14px; line-height: 1.45; }

/* Media viewer */
.media-back { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 85; display: flex; align-items: center; justify-content: center; }
.media-viewer img, .media-viewer video { max-width: 96vw; max-height: 88vh; border-radius: 8px; }

/* Reduced motion + text scale hooks */
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; }
.post-body, .notif-body, .set-sub, .convo-snippet { font-size: calc(1em * var(--text-scale, 1)); }

/* ================= PIXZACT PARITY FIX (D1-D9, APP_SPEC) ================= */
/* Masthead rule: 3dp cyan, radius 2, inset 16dp, bottom margin 10 (0.6A). */
.mast-rule { margin: 0 16px 10px; }
.mast-actions button { width: 48px; height: 48px; }

/* Main shell top bar (0.3): 56dp, critter 32 + wordmark 36, 48dp buttons,
   and the 9dp gradient header divider (4dp gradient + 5dp fade). */
.top-row { padding: 4px 8px 4px 16px; min-height: 56px; }
.top-wordmark { height: 36px; }
.top-btn { width: 48px; height: 48px; }
.header-divider { height: 9px; margin: 0; background: linear-gradient(to bottom, #2ED3F3 0, #01C1E4 22%, #008CA6 44%, rgba(1,160,199,.35) 44%, rgba(1,160,199,0) 100%); }

/* Bottom nav (0.3): 68dp tall; selected pill 52x30 radius 16, fill
   #DFF7FD, stroke 2 #AEE9F8; label 11sp, cyan-ink bold when selected. */
#tabbar { min-height: 68px; }
#tabbar button { justify-content: center; }
.tab-pill { width: 52px; height: 30px; border-radius: 16px; border: 2px solid transparent; }
#tabbar button.active .tab-pill { background: #DFF7FD; border-color: #AEE9F8; }
[data-theme="dark"] #tabbar button.active .tab-pill { background: #0E323B; border-color: #1D5A6B; }
.tab-pill .icn { width: 25px; height: 25px; }
.tab-label { font-size: 11px; font-weight: 500; }
#tabbar button.active { color: var(--cyan-ink); }
#tabbar button.active .tab-label { font-weight: 800; }

/* Secondary header (0.6B): 56dp bar, 18sp bold title, 1dp divider. */
.sec-row { display: flex; align-items: center; height: 56px; padding: 0 16px 0 4px; }
.sec-title { font-size: 18px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-divider { height: 1px; background: var(--divider); }
.sec-actions { display: flex; align-items: center; }
.sec-action { background: none; border: 0; font-size: 14px; color: var(--subtle); padding: 8px; }
.sec-action.danger { color: var(--red); }

/* Settings header (6.1): own bar + 2.5dp gradient divider, full width. */
.settings-row { padding: 7px 16px 3px 8px; min-height: 0; }
.teal-divider { height: 2.5px; background: linear-gradient(90deg, #01C1E4, #008CA6); margin: 0; border-radius: 0; }

/* Lens strip (1.2): tiles are a 62dp box + a 27dp label slot under it;
   only the active tile's label is visible; strip height never changes. */
#lensbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 14px 10px 0; top: 65px; }
.lens-tile { padding: 0 2px; min-height: 0; border-radius: 0; gap: 0; background: none; }
.lens-box { width: 100%; height: 62px; border-radius: 17px; display: flex; align-items: center; justify-content: center; position: relative; }
/* Panel row 2: every tile carries its name at all times, not just
   the active one. The reserved label slot stays (strip height never
   changes); the active tile stays unmistakable via the cyan box,
   the bold label, and the blurb pill under the strip. */
.lens-tile .lens-label { visibility: visible; }
.lens-tile.active .lens-label { visibility: visible; }
.lens-tile.active { background: none; }
.lens-tile.active .lens-box { background: var(--cyan); box-shadow: 0 3px 8px rgba(1,160,200,.35); }
.lens-box .icn { width: 40px; height: 40px; }
.lens-label { height: 27px; margin-top: 5px; display: flex; align-items: flex-start; justify-content: center; text-align: center; font-size: 12px; line-height: 1.0; font-weight: 600; }
.lens-tile.active .lens-label { font-weight: 800; }
.lens-badge { top: 4px; right: 4px; }
.lens-tile.active .lens-badge { background: var(--cyan); color: #181818; }
.live-dot { top: 5px; right: 5px; }
.blurb-row { padding: 15px 14px 2px; }
.blurb-pill { padding: 6px 14px 6px 11px; border-width: 2px; }
.named-chip { font-size: 12px; padding: 6px 12px; }

/* Feed swap animation (25.2): fade + slide-in of NEW content only. */
.feed-list.swap-in { animation: feedswap .25s cubic-bezier(0, 0, .2, 1); }
@keyframes feedswap { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
[data-motion="reduced"] .feed-list.swap-in { animation: none; }

/* Skeleton (25.4): rows start y20, row height 78, gap 22, avatar r22. */
.skel { padding: 20px 0 0; background: var(--bg); }
.skel-row { height: 78px; margin-bottom: 22px; padding: 0 16px; align-items: flex-start; }
.skel-av { width: 44px; height: 44px; }
.skel-bars { gap: 11px; padding-top: 2px; }

/* Empty states (0.4 / 24): 132dp art, title 18 bold mt16, body 15 mt8,
   CTA mt16 minHeight 48, column padding 32. */
.empty { padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.empty-disc { width: 132px; height: 132px; margin: 0; background: none; border: 0; border-radius: 0; display: block; }
.empty-disc::before, .empty-disc::after { display: none; }
.empty-art svg { display: block; }
.empty .big { font-size: 18px; font-weight: 700; margin: 16px 0 0; }
.empty-body { font-size: 15px; margin-top: 8px; }
.empty-cta { margin-top: 16px; min-height: 48px; }
.pad-intro .big { margin-top: 0; }
.empty.pad-intro { display: block; text-align: center; }

/* Posts (1.3): row padding 12, avatar gap 12, headline 14, body 15 mt2. */
.post { padding: 12px; }
.post-head { gap: 12px; }
.post-headline .post-author { font-size: 14px; }
.post-body { font-size: 15px; margin-top: 2px; }
.act.act-super .icn { width: 27px; height: 27px; }
.act.act-bookmark .icn { width: 24px; height: 24px; }
.act.act-quote .icn { width: 25px; height: 25px; }
.act.act-more .icn { width: 26px; height: 26px; }
.act.act-comment .act-count { color: var(--cyan-ink); }

/* Comment rows (9): avatar 37, head 13.5, body 14.5, mini action row. */
.comment-row { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.comment-col { flex: 1; min-width: 0; }
.comment-head { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comment-name { font-weight: 700; }
.you-chip { font-size: 9.5px; font-weight: 800; background: #DFF7FD; color: var(--cyan-ink); border-radius: 999px; padding: 2px 7px; margin-left: 6px; }
[data-theme="dark"] .you-chip { background: #0E323B; color: var(--cyan); }
.comment-body { font-size: 14.5px; margin-top: 1px; white-space: pre-wrap; word-wrap: break-word; }
.comment-actions { display: flex; align-items: center; margin-top: 2px; }
.mini-act { display: inline-flex; align-items: center; background: none; border: 0; color: var(--subtle); padding: 2px 4px 2px 0; }
.mini-act.static { padding: 2px 4px; }
.mini-star { width: 14px; height: 14px; }
.mini-super { width: 13px; height: 13px; }
.mini-count { font-size: 12.5px; margin-left: 6px; }
.mini-count.bold { font-size: 11.5px; font-weight: 800; margin-left: 2px; }

/* Sky (2): wrap padding 14/14/0; panel radius 20, height = width*252/362
   via the SVG viewBox; tag + moon are dp-placed overlays, not board units. */
.sky-wrap { padding: 14px 14px 0; }
.sky-panel { margin: 0; padding: 0; border-radius: 20px; background: none; position: relative; overflow: hidden; }
.sky-svg { display: block; width: 100%; height: auto; }
.sky-tag { position: absolute; left: 15px; top: 11px; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.92); }
.sky-moon { position: absolute; right: 13px; top: 10px; width: 17px; height: 17px; }
.sky-earned-name { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; margin: 0; font-size: 24px; color: var(--gold); text-shadow: 0 0 14px rgba(255,197,49,.45); }
.sky-earned-sub { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.7); }
.sky-line { color: var(--cyan-ink); text-align: center; padding: 11px 18px 0; }
.ceremony-progress { margin: 0; padding: 12px 30px 4px; background: none; border: 0; border-radius: 0; text-align: center; }
.cp-text { display: inline-flex; align-items: center; gap: 7px; background: #FFF3D6; border: 1.5px solid #F0D48A; border-radius: 999px; padding: 6px 12px; font-size: 14.5px; font-weight: 700; color: var(--cyan-ink); }
.cp-star { width: 18px; height: 18px; }
.cp-track { height: 6px; border-radius: 3px; background: #F3E5C0; margin-top: 9px; overflow: hidden; text-align: left; }
.cp-fill { background: #E8A90C; }
.ceremony-hint { font-size: 13px; color: var(--subtle); padding: 0 16px 12px; }

/* Me / Profile (3): hero padding 12/12/12/8, name col marginStart 16. */
.profile-hero { padding: 12px 12px 8px; gap: 0; }
.hero-id { margin-left: 16px; }
.named-badge { border-radius: 12px; padding: 5px 10px; margin-top: 6px; }
.formerly { font-style: normal; margin-top: 4px; }
.profile-actions { padding: 12px 12px 2px; gap: 10px; }
.pill-action { height: 46px; min-height: 46px; border-radius: 23px; font-size: 15.5px; font-weight: 700; padding: 0 12px; white-space: nowrap; gap: 8px; }
.pill-action .icn { width: 19px; height: 19px; }
.edit-pill { background: var(--cyan); color: #fff; border: 0; box-shadow: inset 0 -2px 0 var(--cyan-dark); }
.lab-pill { background: #fff; color: var(--cyan-ink); border: 2px solid var(--cyan); }
[data-theme="dark"] .lab-pill { background: #242424; }
.lab-pill .icn { width: 20px; height: 20px; }
.msg-action { background: none; border: 0; color: var(--cyan-ink); }
[data-theme="dark"] .msg-action { color: var(--cyan); }
/* Stat strip (3.3): ONE merged strip, 76 tall, margins 12, fill #F6FAFB,
   stroke 1 #E4ECEE, radius 14, full-height 1dp dividers. */
.stat-strip { margin: 12px 12px 0; height: 76px; background: #F6FAFB; border: 1px solid #E4ECEE; border-radius: 14px; padding: 0; overflow: hidden; align-items: stretch; }
[data-theme="dark"] .stat-strip { background: #1D2A30; border-color: #2E4A54; }
.stat { justify-content: center; padding: 0 4px; gap: 0; }
.stat + .stat { border-left: 1px solid #E4ECEE; }
[data-theme="dark"] .stat + .stat { border-left-color: #2E4A54; }
.stat .n { margin-top: 3px; }
.stat .l { margin-top: 3px; font-weight: 500; }
.warren-line { font-size: 12px; padding: 6px 16px 2px; }
.profile-tabs { margin-top: 4px; }
.profile-tabs button.active::after { background: var(--cyan); }
/* Me menu (3.4): wrap 14/18/14/0, chips #E1F7FD, rows 15/13. */
.me-menu { padding: 18px 14px 0; }
.menu-label { padding-left: 6px; margin-bottom: 8px; }
.menu-row { padding: 13px 15px; }
.menu-chip { background: #E1F7FD; }
.set-chip { background: #E1F7FD; }

/* Warren hub (8.1): LIVE pill beside the masthead name; card tags. */
.warren-live-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-left: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tray-live-pill { background: var(--cyan); color: #181818; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 6px 12px; margin-left: 10px; }
.mb-tag.charcoal { background: #181818; color: var(--gold); }
.main-burrow-card { background: var(--card); border: 1px solid var(--divider); }
.main-burrow-card.huddle-mode { background: #FFF6D8; border: 2px solid #F0C94E; }
[data-theme="dark"] .main-burrow-card { background: var(--card); }
[data-theme="dark"] .main-burrow-card.huddle-mode { background: #2E2A18; border-color: #6B5518; }
.sealed-head { display: flex; align-items: center; gap: 10px; }
.sealed-head .huddle-ic { width: 24px; height: 24px; flex: 0 0 auto; }
.sealed-head .sealed-title { margin: 0; font-size: 13px; }
.huddle-sealed { padding: 12px 10px; }
.huddle-count-row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.count-pill { display: inline-flex; align-items: center; gap: 7px; background: #181818; color: var(--gold); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.count-pill .icn { width: 14px; height: 14px; }
.count-note { font-size: 12px; font-weight: 700; color: #6B5A1E; }
.keeper-strip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #8A6100; padding: 8px 11px; }
.keeper-strip-ic { width: 14px; height: 14px; flex: 0 0 auto; }

/* Room header + Huddle cards (8.2 / 23.4). */
#masthead.room-top { padding: 4px 16px 6px 8px; border-bottom: 1.5px solid var(--divider); }
.room-top .icon-btn { width: 44px; height: 44px; }
.room-title-btn { display: flex; flex-direction: column; align-items: flex-start; }
.room-topic-line { display: block; font-size: 13px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.huddle-live-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(to bottom, #FFD968, #F0A81C); color: #4A3200; border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 11px; font-weight: 800; letter-spacing: .11em; box-shadow: 0 3px 8px rgba(0,0,0,.18); flex: 0 0 auto; }
.hl-dot { width: 7px; height: 7px; border-radius: 50%; background: #4A3200; box-shadow: 0 0 0 3px rgba(74,50,0,.18); }
.huddle-card { margin: 12px 14px 4px; padding: 15px 15px 12px; border-radius: 18px; }
.huddle-card.sealed { border-radius: 14px; padding: 12px 10px; background: #FFFBEC; border: 1.5px dashed #D9B84A; }
.huddle-card.live { background: #F2FBFE; border: 1.5px solid #AEE9F8; }
.huddle-card.keeper { background: linear-gradient(to bottom, #FFF6D8, #FFEDB0); border: 2px solid #FFC531; }
[data-theme="dark"] .huddle-card.sealed { background: #2E2A18; }
[data-theme="dark"] .huddle-card.live { background: #0D2E38; }
[data-theme="dark"] .huddle-card.keeper { background: #2E2A18; }
.huddle-label { font-size: 10.5px; letter-spacing: .1em; color: var(--cyan-ink); gap: 6px; }
.huddle-label .huddle-ic { width: 13px; height: 13px; }
.huddle-label.keeper-label { color: #8A6100; }
.keeper-from { margin-left: auto; font-size: 11.5px; letter-spacing: 0; }
.starts-line { font-size: 13px; font-weight: 700; color: #8A6100; margin-top: 8px; }
.huddle-prompt { font-weight: 700; margin-top: 7px; }
.huddle-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 10px; }
.huddle-ends { font-size: 12.5px; font-weight: 700; color: #45525A; }
.huddle-starhint { font-size: 12px; font-weight: 700; color: var(--cyan-ink); white-space: nowrap; }
.huddle-answer { font-weight: 700; color: #181818; margin-top: 8px; }
.keeper-who { font-size: 13px; font-weight: 700; color: #181818; }
.keeper-chip { background: #FFF8E6; border: 1px solid #F3DFA0; color: #B97F04; padding: 3px 10px 3px 7px; }
.huddle-star-chip { padding: 3px 10px 3px 7px; }
/* Room empty state (24.3): spotlight art 118, big 16.5 bold mt10, small 13.5 mt3. */
.empty-room { padding: 8px 30px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: inherit; }
.room-empty-art { width: 118px; height: 118px; object-fit: contain; }
.empty-room-big { font-size: 16.5px; font-weight: 700; color: var(--text); margin-top: 10px; }
.empty-room-small { font-size: 13.5px; color: var(--subtle); margin-top: 3px; }

/* Messages (10): banner padding 16; convo rows padding 12; unread dot cyan. */
.requests-banner { padding: 16px; }
.convo { padding: 12px; }
.unread-dot { background: var(--cyan); }
.msglist .bubble { padding: 10px; }
.dm-count { font-size: 12px; color: var(--subtle); margin-left: 8px; flex: 0 0 auto; }
.send-pill.dm-send { background: var(--cyan); color: #181818; margin-left: 8px; }

/* Notifications (11): text 14; tray pin card = card fill, radius 16. */
.notif-body { font-size: 14px; padding-top: 0; }
.ceremony-pin-card { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); text-align: left; background: var(--card); border: 0; border-radius: 16px; padding: 12px 14px; color: var(--text); }
.pin-trophy { width: 30px; height: 30px; flex: 0 0 auto; }
.pin-big { font-size: 16px; font-weight: 700; }
.pin-chev { font-size: 24px; color: var(--subtle); }

/* Discover (12): quick pills equal thirds, 14 bold; trend rows 14 padding. */
.quick-pill { flex: 1; justify-content: center; font-size: 14px; }
.search-field { margin: 12px; }
.search-btn { font-size: 15px; padding: 10px 18px; }
.trend-row { padding: 14px; }
.trend-row .post-author { font-size: 16px; }
.trend-row .post-meta { margin-top: 2px; }

/* Lists (14): intro 13 secondary, padding 16. */
.lists-intro { font-size: 13px; color: var(--subtle); padding: 16px; }

/* Digest (15): in-column masthead block. */
.digest-head { padding: 12px 16px 0; }
.digest-name { font-size: 30px; font-weight: 700; letter-spacing: .01em; margin-top: 6px; }
.digest-rule { height: 3px; border-radius: 2px; background: var(--cyan); margin: 10px 0; }

/* Settings (6): hero, contribute, cards, lens editor, lockdown, footer. */
.set-group-label { padding: 0 20px; margin: 18px 0 8px; }
.set-card { margin: 0 14px; }
.set-row { padding: 12px 15px; }
.settings-hero { margin: 2px 14px 0; padding: 17px 17px 15px; border-radius: 22px; border: 2px solid #F0D48A; background: linear-gradient(to bottom, #FFF7DC, #FFF0BF); }
.settings-hero.backed-up { border-color: var(--cyan); background: linear-gradient(to bottom, #EAF9FD, #DFF7FD); }
.hero-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 0; }
.hero-disc { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid #F0D48A; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.backed-up .hero-disc { border-color: var(--cyan); }
.hero-disc .icn { width: 27px; height: 27px; }
.hero-col { margin-left: 12px; }
.hero-title { font-size: 17.5px; }
.hero-chip { display: inline-block; margin-top: 5px; background: var(--gold); color: #5C4300; font-size: 10.5px; letter-spacing: .08em; padding: 4px 9px; }
.hero-chip.backed { background: var(--cyan); color: #fff; }
.hero-body { font-size: 13.5px; color: #5C4A12; margin-top: 11px; }
.backed-up .hero-body { color: #33525C; }
.hero-fine { font-size: 12px; font-weight: 700; color: #8A6100; text-align: center; margin-top: 9px; }
.settings-hero .btn { height: 46px; min-height: 46px; border-radius: 23px; font-size: 15.5px; display: flex; align-items: center; justify-content: center; margin-top: 13px; width: 100%; }
.hero-div { height: 1px; background: rgba(0,140,166,.25); margin-top: 12px; }
.hero-newrow { display: flex; align-items: center; width: 100%; background: none; border: 0; padding: 11px 0 0; font-size: 14px; font-weight: 700; color: var(--cyan-ink); }
.hero-newrow span { flex: 1; text-align: left; }
.contrib-card { margin: 12px 14px 0; padding: 17px 17px 15px; border-radius: 20px; border: 2px solid var(--gold-text); background: linear-gradient(to bottom, #FFDC73, #FFC531); }
.contrib-head { padding: 0; align-items: center; }
.contrib-disc { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-text); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.contrib-disc .icn { width: 26px; height: 26px; }
.contrib-title { margin-left: 12px; color: #181818; }
.contrib-body { color: #5C4A12; padding: 11px 0 0; margin: 0; }
.contrib-card .btn { background: #181818; color: #fff; height: 46px; min-height: 46px; border-radius: 23px; font-size: 15.5px; display: flex; align-items: center; justify-content: center; margin: 13px 0 0; width: 100%; }
.lens-editor { padding: 0; }
.lens-head { padding: 15px 16px 6px; }
.lens-head .set-sub { margin-top: 2px; }
.lens-edit-row { border: 0; border-top: 1px solid #EFF3F5; border-radius: 0; margin: 0; padding: 11px 14px; }
[data-theme="dark"] .lens-edit-row { border-top-color: #333; }
.grip-ic { width: 14px; height: 22px; }
.lens-edit-name { margin-left: 1px; font-weight: 700; }
.default-tag { background: #FFF3D6; color: #8A6100; border: 1px solid var(--gold); border-radius: 999px; padding: 3px 7px; }
.chev-pair { display: inline-flex; gap: 3px; margin-right: 10px; }
/* Panel row 9: these rendered at 23x14px, below any honest tap
   target. Back to the 30x30 the base rule specified. */
.chev-chip { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--divider); }
.chev-chip .icn { width: 16px; height: 16px; }
.lens-editor .set-row { background: #FBFDFD; border-top: 1px solid #EFF3F5; }
[data-theme="dark"] .lens-editor .set-row { background: #1E1E1E; }
.rose-card { border-color: #F3C3D3; }
.rose-card .set-chip { background: #FDE8EF; color: #C2185B; }
.lockdown-btn { display: block; width: calc(100% - 30px); height: 42px; margin: 0 15px 15px; border-radius: 21px; background: transparent; border: 1.8px solid var(--red); color: #C2185B; font-size: 14.5px; font-weight: 700; }
.lockdown-on-banner { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 11px 15px; border-radius: 16px; background: #FDE8EF; }
.lk-moon { width: 16px; height: 16px; flex: 0 0 auto; }
.lk-text { flex: 1; font-size: 13.5px; font-weight: 700; color: #8E1240; }
.lk-end { background: none; border: 0; font-size: 13px; font-weight: 700; color: #C2185B; padding: 4px 8px; }
.settings-foot { padding: 30px 30px 4px; }
.foot-tagline { color: var(--cyan-ink); margin-top: 7px; font-weight: 500; }
[data-theme="dark"] .foot-tagline { color: var(--cyan); }
.foot-version { font-size: 12.5px; color: #9AA5AB; margin-top: 3px; }
.logout-link { padding: 16px; margin-top: 2px; }
/* Room header: the title button takes the slack and truncates, so the
   name never wraps into the LIVE pill (8.2). */
.room-head .room-title-btn { flex: 1 1 auto; min-width: 0; }
.room-title-col { max-width: 100%; min-width: 0; }
.room-name.big { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Room header slots per 8.2: name 19sp 1-line ellipsized, pills 10.5sp. */
.room-name.big { font-size: 19px; flex: 1 1 auto; min-width: 0; }
.room-title-col { display: flex; align-items: center; width: 100%; min-width: 0; }
.room-title-btn { margin: 0 8px 0 9px; }
.live-pill-sm { font-size: 10.5px; padding: 5px 9px; flex: 0 0 auto; }
.huddle-live-pill { font-size: 10.5px; padding: 5px 9px; letter-spacing: .08em; }
.people-btn { margin-left: 8px; }
/* 8.2 spacing comes from margins, not a container gap: medallion
   marginStart 2 (masthead gap), title 9/8, people marginStart 8. */
.room-head { gap: 0; }
.room-head .room-medallion { margin-left: 2px; }
.room-head .people-btn { margin-left: 8px; }

/* ============ Drake tour fixes, Oct 24 2026 ============ */

/* (1) Discover search (APP_SPEC 12, screen_discover.xml): the app row
   is a horizontal container (padding 12dp) holding an EditText
   (weight 1, padding 12dp, input_bg = white fill, radius 8dp, stroke
   1dp #E1E8ED) and a SEPARATE cyan pill Search button beside it
   (marginStart 8dp, 15sp bold white, padding 18dp sides, radius
   23dp). The web merged both into one 999px blob because the generic
   .field rule's flex-direction: column leaked into .search-field
   (equal specificity, and .search-field never set a direction). */
.search-field { flex-direction: row; align-items: center; gap: 8px;
  margin: 12px; padding: 0; background: none; border: 0; border-radius: 0; }
.search-field input { background: var(--input-bg);
  border: 1px solid var(--divider); border-radius: 8px; padding: 12px; }
.search-btn { padding: 12px 18px; font-size: 15px; }
.quick-row { padding: 12px 12px 2px; }
.type-chips { padding: 12px 12px 8px; }

/* (2) Me menu stack (APP_SPEC 3.4): the app stacks three wraps -
   MENU card (padding 14/18/14/0), Log out card (14/12/14/0), demo
   card (14/12/14/16) - so the card gaps are 12 and 12 with 16 below
   the demo card. The web shared one margin-bottom: 12 on all three
   and hung a single DEMO ONLY header inside the demo card; the app
   puts the tag on EACH demo row instead of a chevron, with the chip
   dimmed (alpha .65) and the label in slate #60707A. */
.me-menu .menu-card, .me-menu .logout-card, .me-menu .demo-card { margin-bottom: 0; }
.me-menu .logout-card { margin-top: 12px; }
.me-menu .demo-card { margin-top: 12px; }
.me-menu { padding-bottom: 16px; }
.menu-chip.dim { opacity: .65; }
.menu-row-label.dim-text { color: #60707A; }
.demo-tag { background: #EDF3F5; color: #42565F; border-radius: 999px; }
[data-theme="dark"] .demo-tag { background: #22333A; color: #9FB3BC; }

/* (3) Block buttons: width: 100% plus side margins overflowed the
   viewport (Lists "New list" carries margin 0 12px, so it rendered
   24px too wide and ran off the right edge; the profile "Load more"
   had the same fault). A block-level button with width: auto fills
   its container minus margins, which is what every call site wants. */
.btn.block { width: auto; }

/* (5) Header logo (activity_main.xml logo_critter 32x32dp,
   marginEnd 10dp; CritterMoods IDLE): translationY 0 -> -8dp,
   1000ms, INFINITE REVERSE, AccelerateDecelerateInterpolator -
   a 2s ease-in-out bob cycle. Reduced motion disables it through
   the global [data-motion="reduced"] animation kill rule. */
.top-critter { flex: 0 0 auto; }
.top-logo { width: 32px; height: 32px; display: block; border-radius: 50%;
  animation: critter-bob 2000ms ease-in-out infinite; }
.top-wordmark { margin-left: 10px; }
@keyframes critter-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- Panel fix run (Oct 24, 2026) ---- */
/* Text size (row 9): the scale used to reach four classes. It now
   multiplies the text of every principal surface at its own base
   size, so scale 1 is identical to before and Large / Extra large
   actually grow the app: posts, comments, chat, rooms, messages,
   notifications, profiles, settings, sheets, and chrome labels. */
.post-author { font-size: calc(15.5px * var(--text-scale, 1)); }
.post-body { font-size: calc(16.5px * var(--text-scale, 1)); }
.post-meta, .act-count, .convo-anon, .convo-time { font-size: calc(13px * var(--text-scale, 1)); }
.convo-name { font-size: calc(15px * var(--text-scale, 1)); }
.convo-snippet { font-size: calc(14px * var(--text-scale, 1)); }
.notif-body, .comment-body, .empty-body { font-size: calc(14.5px * var(--text-scale, 1)); }
.author-name { font-size: calc(13.5px * var(--text-scale, 1)); }
.room-name { font-size: calc(16.5px * var(--text-scale, 1)); }
.room-topic { font-size: calc(12.8px * var(--text-scale, 1)); }
.room-here { font-size: calc(12px * var(--text-scale, 1)); }
.presence-line { font-size: calc(13px * var(--text-scale, 1)); }
.set-title { font-size: calc(15.5px * var(--text-scale, 1)); }
.set-sub { font-size: calc(12.8px * var(--text-scale, 1)); }
.sheet-row-label { font-size: calc(15.5px * var(--text-scale, 1)); }
.blurb-pill { font-size: calc(13.5px * var(--text-scale, 1)); }
.tab-label { font-size: calc(11px * var(--text-scale, 1)); }
.lens-label { font-size: calc(12px * var(--text-scale, 1)); }
.dm-count, .chat-count { font-size: calc(12px * var(--text-scale, 1)); }
.btn { font-size: calc(16px * var(--text-scale, 1)); }
.toast { font-size: calc(14.5px * var(--text-scale, 1)); }
.value-pill { font-size: calc(12.5px * var(--text-scale, 1)); }
input, textarea, select { font-size: calc(16px * var(--text-scale, 1)); }

/* Room composer character counter (row 21) */
.chat-count { color: var(--subtle); flex: 0 0 auto; min-width: 44px; text-align: right; }

/* DM honesty line (row 5) */
.dm-note { padding: 14px 16px 4px; color: var(--subtle); font-size: 12.8px; text-align: center; }

/* Blocked and muted (row 18) */
.blocked-note { padding: 14px 16px 4px; color: var(--subtle); font-size: 13px; }
.blocked-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--divider); }
.blocked-row .btn { flex: 0 0 auto; }

/* Report note (row 18) */
.report-note { padding: 0 16px 8px; }

/* Enter screen additions (rows 10, 11) */
.enter-what { max-width: 300px; margin: 10px auto 2px; text-align: center; color: var(--subtle); font-size: 14.5px; line-height: 1.45; }
.enter-recover { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--cyan-ink); font-size: 14.5px; font-weight: 700; padding: 10px 12px; cursor: pointer; }