:root {
  color-scheme: dark;
  --bg: #07100e;
  --panel: #0c1714;
  --panel-2: #101e1a;
  --line: rgba(184, 255, 190, .12);
  --line-strong: rgba(184, 255, 190, .24);
  --text: #e6f4e8;
  --muted: #829a89;
  --dim: #53685b;
  --green: #a8ff78;
  --green-dark: #172d1a;
  --pink: #ff79c6;
  --amber: #ffb86b;
  --tz-green: #1f8f54;
  --tz-blue: #1b6fae;
  --tz-gold: #f4cf43;
  --tz-black: #11161a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -12%, rgba(27,111,174,.16), transparent 34%), radial-gradient(circle at 8% 72%, rgba(31,143,84,.08), transparent 28%), var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .24; background-image: linear-gradient(rgba(168,255,120,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(168,255,120,.025) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

#app-shell { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 22px 40px; }
.topbar { min-height: 78px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; min-width: 200px; }
.brand-glyph { display: grid; place-items: center; width: 38px; height: 38px; color: var(--bg); background: var(--green); font-family: ui-monospace, monospace; font-size: 22px; font-weight: 900; transform: rotate(-4deg); box-shadow: 5px 5px 0 rgba(255,121,198,.3); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 17px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.search-wrap { flex: 1; max-width: 380px; margin: 0 auto; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(0,0,0,.18); color: var(--dim); position: relative; }
.search-wrap:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(168,255,120,.05); }
.search-wrap > span { font-size: 24px; line-height: 1; }
.search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 13px; }
.search-wrap input::placeholder { color: var(--dim); }

/* === Search suggestions dropdown (ui/search-suggest.js) =================== */
.search-suggest { position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; left: 0; max-height: min(70vh, 480px); overflow: auto; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0c1714; box-shadow: 0 18px 48px rgba(0,0,0,.55); opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; }
.search-suggest.is-open { opacity: 1; transform: translateY(0); }
.search-suggest[hidden] { display: none; }
.search-suggest-group { padding: 4px 0 6px; }
.search-suggest-group + .search-suggest-group { border-top: 1px solid var(--line); }
.search-suggest-heading { display: block; padding: 4px 8px 6px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.search-suggest-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 12px; text-align: left; cursor: pointer; transition: background-color .1s ease, color .1s ease; }
.search-suggest-row:hover, .search-suggest-row.is-active { background: rgba(168,255,120,.08); color: var(--green); }
.search-suggest-row:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.search-suggest-row-main { display: block; overflow: hidden; max-width: 100%; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest-row-main mark { background: rgba(244,207,67,.18); color: var(--tz-gold); border-radius: 2px; padding: 0 1px; }
.search-suggest-row-sub { color: var(--muted); font-size: 10px; }
.search-suggest-row.is-active .search-suggest-row-sub { color: var(--text); opacity: .75; }
.search-suggest-empty { padding: 14px 10px; color: var(--muted); font-size: 11px; text-align: center; }
@media (max-width: 640px) {
  .search-suggest { max-height: min(60vh, 360px); }
  .search-suggest-row { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .search-suggest { transition: none; } }
kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; flex-wrap: wrap; }
.online-count, .signal-live { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.online-count i, .signal-live i { width: 6px; height: 6px; border-radius: 99px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; transition: .18s ease; }
.button-primary { color: #06110d; background: linear-gradient(135deg, var(--green), #d8ff87); box-shadow: 0 6px 18px rgba(168,255,120,.08), inset 0 1px rgba(255,255,255,.3); }
.button-primary:hover { background: #c1ff9e; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(168,255,120,.16); }
.button-primary:disabled { cursor: wait; opacity: .6; transform: none; }
.button-secondary { color: var(--text); background: var(--panel-2); border-color: var(--line-strong); }
.mobile-board-bar { display: none; }
.app-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 220px; gap: 18px; padding-top: 26px; }
.sidebar, .right-rail { min-width: 0; }
.profile-card, .rules-card, .signal-card, .trending-card, .manifesto { border: 1px solid var(--line); background: rgba(12,23,20,.8); border-radius: 9px; }
.profile-card { padding: 17px; }
.profile-top { display: flex; align-items: center; gap: 10px; }
.profile-avatar { position: relative; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--avatar-color); border-radius: 50%; color: var(--avatar-color); background: color-mix(in srgb, var(--avatar-color) 12%, transparent); font-family: ui-monospace, monospace; font-size: 12px; font-weight: 900; overflow: hidden; }
.avatar-mask .avatar-mask-art { width: 100%; height: 100%; }
.avatar-flag-full { font-size: 16px; }
.avatar-custom img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Uploaded avatar is sitting in the media review queue. Same circular
   wrapper as the approved custom avatar so layout stays put; dim + dashed
   amber border + ⧗ glyph (rendered by ui/dom.js avatar()) signal "waiting
   for review". Mirrors the .post-media-pending treatment used elsewhere. */
.avatar.avatar-pending { display: grid; place-items: center; border: 1px dashed var(--amber); color: var(--amber); font-size: 14px; opacity: .85; }
/* Inline notice above the board gallery in the sticker studio while a
   community-sticker upload is waiting for review. */
.sticker-share-pending { margin: 8px 0 14px; padding: 8px 12px; border: 1px dashed var(--amber); border-radius: 6px; color: var(--amber); font-size: 12px; }
.profile-anon-id-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.profile-anon-id-row small { color: var(--muted); font-size: 10px; }
.profile-anon-id { flex: 1; overflow: hidden; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--dim); font-family: ui-monospace, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-picker { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.avatar-copy { margin: 6px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.avatar-type-row { display: flex; gap: 8px; margin-bottom: 10px; }
.chip-button { min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.chip-button:hover { border-color: var(--green); color: var(--text); }
.chip-button.is-active { border-color: var(--green); color: var(--green); background: rgba(168,255,120,.08); }
.avatar-mask-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.avatar-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.avatar-swatch { width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; background: var(--avatar-color); cursor: pointer; }
.avatar-swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--avatar-color); }
.avatar-upload-field { display: block; margin-bottom: 4px; }
.avatar-upload-field span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.avatar-vip-note { display: block; color: var(--dim); font-size: 10px; line-height: 1.5; }
.inline-board-sticker { display: inline-block; max-width: 96px; max-height: 96px; vertical-align: middle; border-radius: 8px; margin: 2px 4px; object-fit: contain; }
.board-sticker-list { margin-top: 6px; }
.board-sticker-choice { padding: 2px; width: 40px; height: 40px; }
.board-sticker-choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.profile-top strong { display: block; font-family: ui-monospace, monospace; font-size: 12px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.anon-dot { width: 7px; height: 7px; margin-left: auto; border: 1px solid var(--green); border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.profile-copy { margin: 16px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.profile-form label, .modal-field > span, .upload-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.inline-field { display: flex; gap: 6px; }
.inline-field input, .modal-field input, .modal-field textarea, .modal-field select, .upload-field { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #08120f; color: var(--text); }
.inline-field input { min-width: 0; height: 34px; padding: 0 9px; font-family: ui-monospace, monospace; font-size: 11px; }
.inline-field button { border: 1px solid var(--line-strong); border-radius: 5px; background: transparent; color: var(--green); font-size: 10px; font-weight: 800; padding: 0 8px; }
.profile-form textarea { width: 100%; min-height: 52px; margin-top: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 5px; resize: vertical; background: #08120f; color: var(--text); font-size: 11px; line-height: 1.4; outline: 0; }
.profile-form textarea:focus { border-color: var(--green); }
.channel-nav { margin-top: 30px; }
.nav-heading, .rail-heading, .signal-head, .thread-meta, .thread-actions, .modal-head, .modal-footer, .reply-heading, .reply-footer { display: flex; align-items: center; justify-content: space-between; }
.nav-heading { margin: 0 8px 9px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.live-pill { color: var(--green); font-size: 9px; letter-spacing: .08em; }
.channel-link { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; font-size: 12px; transition: .16s ease; }
.channel-link:hover { color: var(--text); background: rgba(168,255,120,.04); }
.channel-link.is-active { border-left-color: var(--green); color: var(--green); background: linear-gradient(90deg, rgba(168,255,120,.1), transparent); }
.channel-link b { margin-left: auto; color: var(--dim); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 500; }
.channel-hash { color: var(--pink); font-family: ui-monospace, monospace; font-size: 16px; }
.rules-card { display: flex; gap: 10px; margin-top: 27px; padding: 14px; }
.rule-icon, .manifesto-mark { color: var(--amber); font-size: 17px; }
.rules-card strong { font-size: 11px; }
.rules-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.main-content { min-width: 0; }
.board-hero { position: relative; min-height: 218px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; padding: 30px 34px; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(circle at 88% 50%, rgba(255,121,198,.12), transparent 30%), linear-gradient(135deg, rgba(168,255,120,.09), transparent 56%), var(--panel); }
.board-hero::after { content: "ZACONCHAN // PUBLIC ACCESS"; position: absolute; right: 24px; bottom: 16px; color: rgba(168,255,120,.2); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .18em; transform: rotate(-90deg) translateX(100%); transform-origin: right bottom; }
.board-hero h1 { max-width: 540px; margin: 0; font-size: clamp(30px, 4vw, 51px); letter-spacing: -.07em; line-height: .98; }
.board-hero p:not(.eyebrow) { max-width: 500px; margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.hero-emblem { position: relative; width: 154px; height: 154px; flex: 0 0 154px; overflow: hidden; margin-right: 8%; border: 1px solid rgba(244,207,67,.48); border-radius: 50%; background: var(--tz-blue); box-shadow: 0 0 0 8px rgba(27,111,174,.06), 0 0 42px rgba(31,143,84,.18); transform: rotate(-8deg); }
.hero-emblem::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.hero-emblem .flag-green, .hero-emblem .flag-blue, .hero-emblem .flag-gold, .hero-emblem .flag-black { position: absolute; inset: -25%; transform: rotate(-45deg); }
.hero-emblem .flag-green { background: var(--tz-green); clip-path: polygon(0 0, 100% 0, 0 100%); }
.hero-emblem .flag-blue { background: var(--tz-blue); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hero-emblem .flag-gold { background: var(--tz-gold); clip-path: polygon(44% 0, 53% 0, 100% 47%, 100% 56%, 53% 100%, 44% 100%, 0 56%, 0 47%); }
.hero-emblem .flag-black { background: var(--tz-black); clip-path: polygon(47% 0, 53% 0, 100% 47%, 100% 53%, 53% 100%, 47% 100%, 0 53%, 0 47%); }
.hero-emblem b { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-family: ui-monospace, monospace; font-size: 34px; font-style: italic; text-shadow: 2px 2px 0 rgba(0,0,0,.6); transform: rotate(8deg); }
.hero-orbit { position: relative; width: 150px; height: 150px; margin-right: 10%; border: 1px solid rgba(168,255,120,.26); border-radius: 50%; transform: rotate(-15deg); }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; inset: 13px; border: 1px dashed rgba(255,121,198,.35); border-radius: 50%; }
.hero-orbit::after { inset: 36px; border-style: solid; border-color: rgba(168,255,120,.35) transparent; }
.hero-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.hero-orbit span:first-child { top: 17px; right: 20px; }.hero-orbit span:nth-child(2) { bottom: 20px; left: 24px; background: var(--green); box-shadow: 0 0 12px var(--green); }
.hero-orbit b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--green); font-family: ui-monospace, monospace; font-size: 22px; transform: rotate(15deg); }
.feed-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 35px 0 17px; border-bottom: 1px solid var(--line); }
.feed-toolbar h2 { margin: 0; font-size: 21px; letter-spacing: -.04em; }.feed-toolbar p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.sort-select { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }.sort-select select { border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; cursor: pointer; }.sort-select option { background: var(--panel); }.compact-button { min-height: 38px; padding: 0 13px; }.compact-button span { font-size: 18px; font-weight: 400; }
.feed-list { display: grid; gap: 12px; padding-top: 15px; }
.thread-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(12,23,20,.72); transition: border-color .18s ease, transform .18s ease; }.thread-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }.thread-accent { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--green); opacity: .55; }.thread-content { padding: 18px 20px 12px; }.thread-meta { gap: 10px; }.author { display: flex; align-items: center; gap: 9px; min-width: 0; }.author > span { display: grid; gap: 2px; min-width: 0; }.author strong { overflow: hidden; color: var(--text); font-family: ui-monospace, monospace; font-size: 11px; text-overflow: ellipsis; }.author small, .trend-item small { color: var(--muted); font-size: 10px; }.board-tag { color: var(--pink); font-family: ui-monospace, monospace; font-size: 10px; }.thread-title { display: block; max-width: 100%; margin: 15px 0 7px; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--text); font-size: 19px; font-weight: 800; letter-spacing: -.035em; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.thread-title:hover { color: var(--green); }.thread-body { margin: 0; color: #a7b9aa; font-size: 12px; line-height: 1.65; white-space: pre-line; }.thread-actions { justify-content: flex-start; gap: 20px; margin-top: 17px; }.action-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; }.action-button:hover { color: var(--text); }.action-button.is-liked { color: var(--pink); }.action-button.is-saved { color: var(--amber); }.action-button.share-action { color: var(--tz-gold); }.action-button:first-child { font-size: 12px; }.save-button { margin-left: auto; }
.post-media { position: relative; overflow: hidden; margin-top: 16px; border: 1px solid var(--line); border-radius: 5px; background: #08110e; }.post-media img, .post-media video { display: block; width: 100%; max-height: 360px; object-fit: cover; }.post-media video { background: #000; }.media-label { position: absolute; right: 8px; bottom: 7px; padding: 3px 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: rgba(0,0,0,.65); color: var(--text); font-family: ui-monospace, monospace; font-size: 9px; }.mock-media { height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background-size: 18px 18px; }.mock-media.green { background-color: #0d261b; background-image: linear-gradient(135deg, transparent 45%, rgba(168,255,120,.15) 46%, transparent 47%), radial-gradient(circle at 62% 34%, rgba(168,255,120,.35), transparent 2%, transparent 20%); }.mock-media.pink { background-color: #261122; background-image: linear-gradient(115deg, transparent 38%, rgba(255,121,198,.23) 39%, transparent 41%), radial-gradient(circle at 42% 62%, rgba(255,121,198,.34), transparent 3%, transparent 25%); }.mock-media span { color: var(--pink); font-size: 25px; }.mock-media strong { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; }.mock-media small { color: var(--muted); font-size: 10px; }
.empty-state { padding: 60px 20px; border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; }.empty-glyph { color: var(--pink); font-size: 32px; }.empty-state h3 { margin: 8px 0; }.empty-state p { margin: 0 auto 20px; max-width: 320px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.right-rail { display: grid; align-content: start; gap: 14px; }.signal-card, .trending-card, .manifesto, .library-card { padding: 17px; }.signal-head { color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }.signal-card > strong { display: block; margin-top: 15px; color: var(--green); font-family: ui-monospace, monospace; font-size: 38px; line-height: 1; }.signal-card > p { margin: 5px 0 17px; color: var(--muted); font-size: 11px; }.signal-line { height: 4px; overflow: hidden; border-radius: 4px; background: var(--green-dark); }.signal-line span { display: block; height: 100%; background: var(--green); }.signal-card > small { display: block; margin-top: 8px; color: var(--dim); font-family: ui-monospace, monospace; font-size: 9px; }.rail-heading h3 { margin: 0; font-size: 12px; letter-spacing: .04em; }.rail-heading span { color: var(--green); }.trend-item { width: 100%; display: flex; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; }.trend-item:last-child { border-bottom: 0; padding-bottom: 0; }.trend-index { color: var(--pink); font-family: ui-monospace, monospace; font-size: 10px; flex: 0 0 auto; }.trend-item > span { min-width: 0; flex: 1; }.trend-item strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.trend-item small { display: block; overflow: hidden; margin-top: 4px; text-overflow: ellipsis; white-space: nowrap; }.library-card { border: 1px solid rgba(244,207,67,.24); background: linear-gradient(145deg, rgba(27,111,174,.1), rgba(31,143,84,.05)); }.library-card > p { margin: 11px 0; min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 10px; line-height: 1.5; }.library-link { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 35px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); text-align: left; font-size: 10px; }.library-link:last-child { border-bottom: 0; }.library-link span { width: 20px; color: var(--tz-gold); font-size: 16px; }.library-link:hover { color: var(--green); }.manifesto { display: grid; grid-template-columns: auto 1fr; gap: 10px; background: linear-gradient(135deg, rgba(255,121,198,.08), rgba(168,255,120,.04)); }.manifesto p { margin: 0; min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; line-height: 1.55; }.manifesto small { grid-column: 2; min-width: 0; overflow: hidden; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.modal-backdrop { position: fixed; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,7,5,.78); backdrop-filter: blur(7px); }.modal-card { width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border: 1px solid var(--line-strong); border-radius: 10px; background: #0c1714; box-shadow: 0 25px 80px rgba(0,0,0,.48); }.modal-head { align-items: flex-start; gap: 15px; margin-bottom: 22px; }.modal-head h2 { margin: 0; font-size: 25px; letter-spacing: -.05em; }.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }.icon-button:hover { color: var(--text); border-color: var(--line-strong); }.modal-field { display: block; margin-bottom: 17px; }.modal-field input, .modal-field textarea, .modal-field select { display: block; padding: 12px; font-size: 13px; outline: 0; }.modal-field textarea { resize: vertical; line-height: 1.5; }.modal-field input:focus, .modal-field textarea:focus, .modal-field select:focus, .upload-field:focus-within { border-color: var(--green); }.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.upload-field { display: block; min-height: 75px; padding: 12px; border-style: dashed; cursor: pointer; }.upload-field input { width: 100%; color: transparent; font-size: 10px; }.upload-field input::file-selector-button { min-height: 30px; margin-right: 8px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }.upload-field small { display: block; margin-top: 7px; overflow: hidden; color: var(--dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.modal-footer, .reply-footer { gap: 15px; margin-top: 22px; color: var(--muted); font-size: 10px; }.modal-footer b, .reply-footer b { color: var(--green); font-family: ui-monospace, monospace; }.modal-intro { margin: -8px 0 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }.library-modal { width: min(720px, 100%); }.library-switcher { display: flex; gap: 6px; margin: -4px 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; }.library-tab { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; white-space: nowrap; }.library-tab.is-active { border-color: var(--tz-gold); color: var(--tz-gold); background: rgba(244,207,67,.08); }.library-items { display: grid; gap: 8px; margin-top: 20px; }.library-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(168,255,120,.025); }.library-item a, .library-item strong { display: block; color: var(--text); font-size: 12px; text-decoration: none; }.library-item a:hover { color: var(--green); }.library-item small { display: block; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.library-item-main { min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }.library-item-main strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.mini-action { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--green); }.mini-action:hover { border-color: var(--green); }.thread-card.is-archived { border-color: rgba(244,207,67,.22); }.is-archived-action { color: var(--tz-gold); }.thread-modal { width: min(720px, 100%); }.thread-modal > h2 { margin: 18px 0 8px; font-size: 25px; letter-spacing: -.05em; }.thread-modal > .thread-body { font-size: 13px; }.reply-heading { margin-top: 27px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.reply-heading h3 { margin: 0; font-size: 13px; }.reply-heading span { color: var(--green); font-family: ui-monospace, monospace; font-size: 11px; }.replies { display: grid; gap: 14px; padding: 13px 0; }.reply { padding: 13px; border-left: 2px solid var(--line-strong); background: rgba(168,255,120,.025); }.reply p { margin: 10px 0 0 43px; color: #b3c0b4; font-size: 12px; line-height: 1.55; white-space: pre-line; }.no-replies { margin: 5px 0; color: var(--muted); font-size: 12px; }.reply-form textarea { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 5px; resize: vertical; background: #08120f; color: var(--text); outline: 0; }.reply-form textarea:focus { border-color: var(--green); }
.toast { position: fixed; z-index: 10; right: 22px; bottom: 22px; max-width: min(360px, calc(100vw - 44px)); padding: 12px 15px; border: 1px solid var(--line-strong); border-radius: 6px; opacity: 0; background: var(--panel-2); color: var(--text); font-size: 12px; pointer-events: none; transform: translateY(12px); transition: .2s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast[data-tone="error"] { border-color: rgba(255,121,198,.5); color: #ffd5eb; }
@media (max-width: 1120px) { .app-grid { grid-template-columns: 205px minmax(0, 1fr); }.right-rail { display: none; } .brand { min-width: 205px; } }
@media (max-width: 760px) { #app-shell { padding: 0 14px 26px; }.topbar { min-height: 72px; gap: 12px; }.brand { min-width: auto; }.brand small, .online-count { display: none; }.brand strong { font-size: 15px; }.brand-glyph { width: 34px; height: 34px; font-size: 19px; }.search-wrap { order: 3; flex-basis: 100%; max-width: none; }.topbar { flex-wrap: wrap; padding: 12px 0; }.top-actions { min-width: auto; margin-left: auto; }.top-new { min-height: 36px; padding: 0 10px; }.top-new b { font-size: 17px; }.mobile-board-bar { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 13px 0 2px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; }.mobile-board-bar > span { flex: 0 0 auto; margin-right: 4px; color: var(--green); }.mobile-board-bar button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 10px; }.app-grid { display: block; padding-top: 23px; }.sidebar { display: none; }.board-hero { min-height: 190px; padding: 24px 21px; }.board-hero h1 { font-size: 38px; }.board-hero p:not(.eyebrow) { max-width: 290px; font-size: 12px; }.hero-emblem { position: absolute; right: -38px; width: 145px; height: 145px; opacity: .72; }.hero-orbit { position: absolute; right: -45px; opacity: .45; }.feed-toolbar { align-items: flex-start; flex-direction: column; padding-top: 27px; }.toolbar-actions { width: 100%; justify-content: space-between; }.thread-content { padding: 16px 16px 11px; }.thread-title { font-size: 17px; white-space: normal; }.modal-card { padding: 19px; }.modal-row { grid-template-columns: 1fr; gap: 0; }.modal-footer, .reply-footer { align-items: flex-start; flex-direction: column; }.modal-footer .button, .reply-footer .button { width: 100%; }.thread-modal > h2 { font-size: 21px; } }
@media (max-width: 420px) { .top-new span { display: none; }.top-new { width: 38px; padding: 0; }.thread-actions { gap: 13px; }.action-button { font-size: 10px; }.board-tag { font-size: 9px; } }

/* Tanzania-inspired atmosphere and editorial polish */
body {
  background:
    linear-gradient(145deg, transparent 0 25%, rgba(31,143,84,.055) 25% 34%, rgba(17,22,26,.09) 34% 48%, rgba(244,207,67,.045) 48% 52%, rgba(27,111,174,.06) 52% 69%, transparent 69%),
    radial-gradient(circle at 52% 0%, rgba(27,111,174,.2), transparent 38%),
    radial-gradient(circle at 4% 78%, rgba(31,143,84,.12), transparent 30%),
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: linear-gradient(145deg, transparent 0 38%, var(--tz-green) 38% 41%, var(--tz-black) 41% 47%, var(--tz-gold) 47% 51%, var(--tz-blue) 51% 55%, transparent 55%);
  filter: blur(34px);
  transform: scale(1.16);
}
#app-shell { isolation: isolate; }
.topbar { position: relative; border-bottom-color: rgba(244,207,67,.2); }
.topbar::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, var(--tz-green), var(--tz-gold), var(--tz-blue)); opacity: .55; }
.language-switcher { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.language-switcher select { min-height: 32px; padding: 0 7px; border: 1px solid rgba(244,207,67,.3); border-radius: 5px; outline: 0; background: rgba(8,18,15,.8); color: var(--text); font-family: inherit; font-size: 10px; cursor: pointer; }
.language-switcher select:hover { border-color: var(--tz-gold); }
.button-primary { background: linear-gradient(120deg, var(--green) 0 48%, var(--tz-gold) 49% 51%, #d8ff87 52%); }
.profile-card, .rules-card, .signal-card, .trending-card, .manifesto, .library-card, .thread-card { background: linear-gradient(145deg, rgba(16,31,26,.86), rgba(8,18,15,.88)); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.board-hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); background: radial-gradient(circle at 50% 50%, rgba(244,207,67,.09), transparent 25%), linear-gradient(135deg, rgba(31,143,84,.12), rgba(27,111,174,.1) 52%, rgba(17,22,26,.25)); }
.board-hero > div:first-child { grid-column: 1; z-index: 2; }
.board-hero .hero-emblem { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; z-index: 1; opacity: .92; }
.hero-emblem { box-shadow: 0 0 0 10px rgba(244,207,67,.05), 0 18px 50px rgba(0,0,0,.3), 0 0 42px rgba(31,143,84,.24); }
.thread-card { border-color: rgba(184,255,190,.15); }
.thread-card:hover { box-shadow: 0 16px 35px rgba(0,0,0,.18); }
.modal-card { background: linear-gradient(145deg, #10221b, #0a1512); border-color: rgba(244,207,67,.32); }
.library-card { position: relative; overflow: hidden; }
.library-card::before, .manifesto::before { content: ""; position: absolute; width: 90px; height: 90px; border: 1px solid rgba(244,207,67,.18); border-radius: 50%; transform: translate(120px,-48px); }
.culture-floaters { position: fixed; z-index: 2; inset: 0; pointer-events: none; }
.culture-floater { position: absolute; display: flex; gap: 10px; width: 174px; padding: 13px 12px; border: 1px solid rgba(244,207,67,.27); border-radius: 8px; background: linear-gradient(145deg, rgba(17,34,27,.86), rgba(7,16,14,.8)); box-shadow: 0 18px 40px rgba(0,0,0,.2); backdrop-filter: blur(8px); animation: culture-drift 7s ease-in-out infinite; }
.culture-floater::after { content: ""; position: absolute; top: 0; right: 12px; left: 12px; height: 2px; background: linear-gradient(90deg, var(--tz-green), var(--tz-gold), var(--tz-blue)); opacity: .8; }
.culture-floater-1 { top: 31%; left: 16px; }
.culture-floater-2 { top: 55%; right: 16px; animation-delay: -2.4s; }
.culture-floater-3 { right: 20px; bottom: 34px; animation-delay: -4.8s; }
.culture-floater-mark { color: var(--tz-gold); font-size: 16px; line-height: 1; }
.culture-floater strong { display: block; color: var(--text); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.culture-floater p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
@keyframes culture-drift { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@media (max-width: 1280px) { .culture-floater-1 { left: 8px; }.culture-floater-2, .culture-floater-3 { right: 8px; }.culture-floater { width: 148px; } }
@media (max-width: 1400px) { .culture-floaters { display: none; } }
@media (max-width: 1120px) { .culture-floater-1 { display: none; }.culture-floater-2 { top: auto; right: 14px; bottom: 18px; }.culture-floater-3 { right: auto; bottom: 18px; left: 14px; } }
@media (max-width: 760px) {
  .top-actions { gap: 8px; }
  .language-switcher > span { display: none; }
  .language-switcher select { min-height: 36px; }
  .board-hero { display: block; }
  .board-hero > div:first-child { position: relative; z-index: 2; }
  .board-hero .hero-emblem { position: absolute; right: -38px; top: 24px; width: 145px; height: 145px; margin: 0; opacity: .68; }
  .culture-floaters { display: none; }
}

/* Animated Tanzania flag mark */
.hero-emblem { isolation: isolate; animation: emblem-float 6s ease-in-out infinite; }
.hero-emblem::before { content: ""; position: absolute; z-index: 3; inset: -35% 38% -35% -20%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 49%, transparent 61%); transform: translateX(-130%) rotate(12deg); animation: flag-glint 7s ease-in-out infinite; pointer-events: none; }
.hero-emblem .flag-green, .hero-emblem .flag-blue, .hero-emblem .flag-gold, .hero-emblem .flag-black { animation: flag-drift 8s ease-in-out infinite alternate; transform-origin: center; }
.hero-emblem .flag-blue { animation-delay: -1.5s; }
.hero-emblem .flag-gold { animation: flag-pulse 4.5s ease-in-out infinite; }
.hero-emblem .flag-black { animation-delay: -3s; }
.hero-emblem .hero-z { z-index: 4; color: #fff; font-size: 68px; font-weight: 950; letter-spacing: -.16em; text-shadow: 3px 3px 0 var(--tz-black), -2px -2px 0 rgba(244,207,67,.65), 0 0 18px rgba(255,255,255,.22); animation: z-signal 3.8s ease-in-out infinite; }
.hero-glint { position: absolute; z-index: 5; top: 17%; right: 19%; width: 7px; height: 7px; border-radius: 50%; background: var(--tz-gold); box-shadow: 0 0 15px var(--tz-gold); animation: signal-blink 2.8s ease-in-out infinite; }
@keyframes emblem-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-7px) rotate(-5deg); } }
@keyframes flag-drift { from { filter: saturate(.9); transform: rotate(-45deg) scale(1); } to { filter: saturate(1.3) brightness(1.08); transform: rotate(-42deg) scale(1.05); } }
@keyframes flag-pulse { 0%, 100% { opacity: .9; } 50% { opacity: 1; filter: brightness(1.25); } }
@keyframes flag-glint { 0%, 58% { transform: translateX(-130%) rotate(12deg); } 78%, 100% { transform: translateX(360%) rotate(12deg); } }
@keyframes z-signal { 0%, 100% { transform: rotate(8deg) scale(1); } 50% { transform: rotate(5deg) scale(1.08); } }
@keyframes signal-blink { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.35); } }

/* Permanent culture and civilisation art block */
.culture-gallery { position: relative; overflow: hidden; margin: 30px 0 8px; padding: 23px; border: 1px solid rgba(244,207,67,.3); border-radius: 12px; background: linear-gradient(135deg, rgba(16,35,27,.96), rgba(8,18,15,.94) 58%, rgba(27,111,174,.14)); box-shadow: 0 22px 55px rgba(0,0,0,.22), 0 0 0 1px rgba(31,143,84,.08) inset; }
.culture-gallery::before { content: ""; position: absolute; top: -80px; right: 7%; width: 240px; height: 240px; border: 1px solid rgba(244,207,67,.18); border-radius: 50%; box-shadow: 0 0 0 18px rgba(27,111,174,.05), 0 0 0 38px rgba(31,143,84,.035); }
.culture-gallery::after { content: ""; position: absolute; right: -8%; bottom: -38px; left: -8%; height: 75px; background: linear-gradient(150deg, transparent 15%, rgba(31,143,84,.18) 16% 31%, rgba(17,22,26,.35) 32% 47%, rgba(244,207,67,.14) 48% 52%, rgba(27,111,174,.18) 53% 69%, transparent 70%); opacity: .7; }
.culture-gallery-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.culture-gallery-head h2 { margin: 0; font-size: 22px; letter-spacing: -.05em; }
.gallery-stamp { padding: 6px 8px; border: 1px solid rgba(244,207,67,.38); color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; }
.culture-gallery-intro { position: relative; z-index: 1; max-width: 620px; margin: 8px 0 18px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.culture-art-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.culture-art { min-width: 0; border: 1px solid rgba(184,255,190,.14); border-radius: 7px; background: rgba(3,10,8,.42); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; display: block; width: 100%; }
.culture-art:hover, .culture-art:focus-visible { border-color: rgba(244,207,67,.55); box-shadow: 0 10px 25px rgba(0,0,0,.2); transform: translateY(-5px); }
.culture-art:focus-visible { outline: 2px solid rgba(244,207,67,.75); outline-offset: 2px; }
.art-image { position: relative; height: 96px; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: #12271e; }
.art-image::before, .art-image::after, .art-horizon { content: ""; position: absolute; }
.art-image::before { z-index: -2; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 42%), radial-gradient(circle at 75% 24%, rgba(244,207,67,.5), transparent 3%, transparent 21%); }
.art-image::after { z-index: -1; right: -22px; bottom: -34px; left: -22px; height: 66px; border-radius: 50% 50% 0 0; background: linear-gradient(160deg, rgba(31,143,84,.78), rgba(27,111,174,.64)); transform: rotate(-5deg); }
.art-symbol { color: #fff; font-family: Georgia, serif; font-size: 36px; line-height: 1; text-shadow: 2px 2px 0 rgba(17,22,26,.7), 0 0 18px rgba(255,255,255,.3); animation: art-breathe 4s ease-in-out infinite; }
.art-orbit { position: absolute; width: 52px; height: 52px; border: 1px solid rgba(244,207,67,.55); border-radius: 50%; transform: rotate(25deg); }
.orbit-1 { border-style: dashed; animation: orbit-turn 12s linear infinite; }
.orbit-2 { width: 70px; height: 33px; border-color: rgba(255,121,198,.45); animation: orbit-turn 9s linear infinite reverse; }
.orbit-3 { width: 34px; height: 70px; border-color: rgba(168,255,120,.5); animation: orbit-turn 11s linear infinite; }
.art-horizon { right: 0; bottom: 17px; left: 0; height: 1px; background: rgba(244,207,67,.55); }
.art-caption { padding: 9px 9px 10px; }
.art-caption strong, .art-caption small { display: block; }
.art-caption strong { overflow: hidden; color: var(--text); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.art-caption small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.art-caption small.culture-art-cta { margin-top: 6px; overflow: visible; color: var(--tz-gold); font-weight: 600; letter-spacing: .03em; white-space: normal; opacity: .82; transition: opacity .2s ease; }
.culture-art:hover .culture-art-cta, .culture-art:focus-visible .culture-art-cta { opacity: 1; }
.culture-contribute-intro { color: var(--tz-gold); }
.art-heritage .art-image { background: linear-gradient(145deg, #1f8f54, #11161a 56%, #f4cf43); }
.art-evolution .art-image { background: linear-gradient(145deg, #172d1a, #1b6fae 58%, #a8ff78); }
.art-nature .art-image { background: linear-gradient(145deg, #07100e, #1f8f54 58%, #f4cf43); }
.art-power .art-image { background: linear-gradient(145deg, #11161a, #f4cf43 52%, #ffb86b); }
.art-civilization .art-image { background: linear-gradient(145deg, #1b6fae, #11161a 54%, #ff79c6); }
.art-symbols .art-image { background: linear-gradient(145deg, #ff79c6, #1b6fae 54%, #1f8f54); }
@keyframes art-breathe { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.1) rotate(4deg); } }
@keyframes orbit-turn { to { transform: rotate(385deg); } }
@media (max-width: 1120px) { .culture-art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .culture-gallery { margin-top: 24px; padding: 17px; } .culture-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .art-image { height: 82px; } .culture-gallery-head h2 { font-size: 19px; } }
body::after { animation: flag-wash 18s ease-in-out infinite alternate; }
@keyframes flag-wash { from { opacity: .12; transform: scale(1.1) translate3d(-1%, -1%, 0); } to { opacity: .22; transform: scale(1.2) translate3d(1%, 1%, 0); } }
@media (prefers-reduced-motion: reduce) { body::after, .hero-emblem, .hero-emblem::before, .hero-emblem .flag-green, .hero-emblem .flag-blue, .hero-emblem .flag-gold, .hero-emblem .flag-black, .hero-emblem .hero-z, .hero-glint, .art-symbol, .art-orbit { animation: none; } }

/* Anonymous identity and country signal */
.profile-id { display: block; margin-top: 3px; color: var(--dim); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .05em; }
.author-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; margin-left: -4px; font-size: 15px; line-height: 1; filter: saturate(.9); }
.profile-avatar .author-flag { position: absolute; right: -7px; bottom: -4px; margin: 0; padding: 2px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); font-size: 13px; }
.profile-save { width: 100%; min-height: 35px; margin-top: 10px; }
.identity-form { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.identity-optional { margin: -4px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.identity-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; color: var(--text); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.identity-heading b { font-size: 19px; line-height: 1; }
.identity-form label { display: block; margin: 11px 0 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.identity-form input, .identity-form select { width: 100%; min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #08120f; color: var(--text); font-size: 11px; }
.identity-form input:focus, .identity-form select:focus { border-color: var(--green); }
.identity-check { display: flex !important; align-items: flex-start; gap: 8px; margin: 12px 0 2px !important; color: var(--text) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.4; text-transform: none !important; }
.identity-check input { width: 15px; min-height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--tz-gold); }
.flag-picker { display: flex; align-items: stretch; gap: 6px; }
.flag-picker select { min-width: 0; flex: 1; }
.flag-picker .mini-action { flex: 0 0 35px; width: 35px; height: 35px; font-size: 16px; }
.identity-status { margin: 12px 0; color: var(--dim); font-size: 9px; line-height: 1.45; }
.identity-status.is-pending { color: var(--amber); }
.identity-status.is-approved { color: var(--green); }
.identity-submit { width: 100%; min-height: 36px; padding: 0 8px; font-size: 10px; }
.author { align-items: center; }
.author > .avatar + .author-flag { margin-left: -3px; }
.culture-art-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; mix-blend-mode: screen; transition: transform .35s ease, opacity .2s ease; }
.art-symbol { position: relative; z-index: 2; }
.art-orbit, .art-horizon { z-index: 2; }
.culture-art:hover .culture-art-photo { opacity: .92; transform: scale(1.08); }
@media (max-width: 760px) { .identity-form { margin-top: 14px; }.identity-submit { min-height: 40px; } }

/* Darker station surfaces while keeping the Tanzania flag wash visible. */
:root {
  --bg: #020705;
  --panel: #07110d;
  --panel-2: #0a1711;
  --line: rgba(184, 255, 190, .105);
  --line-strong: rgba(244, 207, 67, .28);
}
body {
  background:
    linear-gradient(145deg, transparent 0 25%, rgba(31,143,84,.07) 25% 34%, rgba(17,22,26,.16) 34% 48%, rgba(244,207,67,.055) 48% 52%, rgba(27,111,174,.075) 52% 69%, transparent 69%),
    radial-gradient(circle at 52% 0%, rgba(27,111,174,.16), transparent 38%),
    radial-gradient(circle at 4% 78%, rgba(31,143,84,.1), transparent 30%),
    var(--bg);
}
body::after { opacity: .2; }
.profile-card, .rules-card, .signal-card, .trending-card, .manifesto, .library-card, .thread-card { background: linear-gradient(145deg, rgba(8,19,14,.92), rgba(2,8,6,.95)); }
.board-hero { background: radial-gradient(circle at 50% 50%, rgba(244,207,67,.065), transparent 25%), linear-gradient(135deg, rgba(31,143,84,.09), rgba(27,111,174,.075) 52%, rgba(2,8,6,.5)); }
.modal-card { background: linear-gradient(145deg, #091710, #030906); }

/* Inline culture artwork replaces failing external SVG image requests in preview. */
.culture-art-photo { display: block; }
.culture-art-photo svg { display: block; width: 100%; height: 100%; }

/* Replies can be written without opening a separate dialog. */
.inline-reply-form { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(184,255,190,.08); }
.inline-reply-form textarea { min-width: 0; flex: 1; min-height: 35px; max-height: 100px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; resize: vertical; outline: 0; background: rgba(2,8,6,.82); color: var(--text); font-size: 11px; line-height: 1.35; }
.inline-reply-form textarea:focus { border-color: var(--tz-gold); box-shadow: 0 0 0 3px rgba(244,207,67,.06); }
.inline-reply-form .button { min-height: 35px; padding: 0 11px; white-space: nowrap; }
.agreement-block { margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(244,207,67,.22); border-radius: 6px; background: rgba(244,207,67,.035); }
.agreement-check { display: flex; align-items: flex-start; gap: 8px; color: var(--text); font-size: 10px; line-height: 1.45; }
.agreement-check input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--tz-gold); }
.agreement-check strong { color: var(--tz-gold); }
.agreement-details { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.agreement-details summary { color: var(--green); cursor: pointer; font-weight: 800; }
.agreement-details p { margin: 8px 0 0; }
.agreement-details ul { margin: 8px 0 0; padding-left: 18px; }
.agreement-details li + li { margin-top: 5px; }
.inline-reply-form { flex-wrap: wrap; }
.inline-reply-form .agreement-block { order: -1; flex: 0 0 100%; }
@media (max-width: 420px) { .agreement-block { padding: 10px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .inline-reply-form { align-items: stretch; flex-direction: column; }.inline-reply-form .button { width: 100%; } }

/* Stable first-visit gate: it cannot be dismissed accidentally and remains
   comfortable to read on small screens. */
.modal-backdrop { overscroll-behavior: contain; }
.modal-card { overscroll-behavior: contain; scrollbar-color: var(--tz-gold) transparent; }
.has-modal { overflow: hidden; }
.agreement-backdrop { cursor: default; }
.agreement-modal { width: min(620px, 100%); }
.agreement-modal .modal-head { margin-bottom: 12px; }
.agreement-modal .modal-intro { max-width: 52ch; margin-bottom: 18px; }
.agreement-modal .agreement-details { max-height: min(42vh, 330px); overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(2,8,6,.56); }
.agreement-modal .agreement-check { margin-top: 18px; padding: 12px; border: 1px solid rgba(244,207,67,.24); border-radius: 8px; background: rgba(244,207,67,.045); font-size: 11px; }
.agreement-modal .modal-footer { align-items: center; margin-top: 12px; }
.agreement-modal .modal-footer > span { color: var(--dim); }
.agreement-modal .button { min-width: 145px; }
@media (max-width: 560px) {
  .agreement-modal .modal-footer { align-items: stretch; }
  .agreement-modal .modal-footer .button { width: 100%; }
}

/* Flag-painted identity mark and a stronger editorial hero. */
.brand-glyph {
  position: relative;
  isolation: isolate;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 2px solid rgba(244,207,67,.72);
  border-radius: 5px;
  color: #fff;
  background: var(--tz-blue);
  font-size: 31px;
  font-style: italic;
  line-height: 1;
  text-shadow: 3px 3px 0 var(--tz-black), 0 0 12px rgba(255,255,255,.5);
  transform: rotate(-6deg) skew(-3deg);
  box-shadow: 7px 8px 0 rgba(255,121,198,.24), 0 0 24px rgba(244,207,67,.25);
}
.brand-glyph::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24%;
  background:
    linear-gradient(145deg, transparent 0 40%, var(--tz-gold) 40% 46%, var(--tz-black) 46% 58%, var(--tz-gold) 58% 64%, transparent 64%),
    linear-gradient(145deg, var(--tz-green) 0 50%, var(--tz-blue) 50% 100%);
  transform: rotate(3deg) scale(1.12);
}
.brand-glyph::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -45%;
  left: 8%;
  width: 18%;
  height: 190%;
  background: rgba(255,255,255,.45);
  transform: rotate(30deg);
  opacity: .5;
}
.brand strong { color: #fff; text-shadow: 0 0 18px rgba(244,207,67,.18); }
.board-hero {
  min-height: 280px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  padding: 38px 40px;
  border-color: rgba(244,207,67,.32);
  background:
    linear-gradient(145deg, rgba(31,143,84,.16), transparent 42%),
    radial-gradient(circle at 78% 45%, rgba(244,207,67,.16), transparent 31%),
    linear-gradient(120deg, rgba(2,8,6,.75), rgba(27,111,174,.16));
  box-shadow: 0 24px 65px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.025);
}
.board-hero > div:first-child { grid-column: 1; }
.board-hero .hero-emblem {
  grid-column: 2;
  width: 250px;
  height: 250px;
  align-self: center;
  justify-self: center;
  border-width: 2px;
  box-shadow: 0 0 0 13px rgba(244,207,67,.06), 0 25px 65px rgba(0,0,0,.42), 0 0 70px rgba(31,143,84,.35);
}
.hero-emblem .hero-z {
  font-size: 105px;
  font-weight: 950;
  text-shadow: 5px 5px 0 var(--tz-black), -3px -3px 0 rgba(244,207,67,.85), 0 0 28px rgba(255,255,255,.3);
}
.culture-gallery { padding: 28px; }
.culture-art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.art-image { height: 150px; }
.culture-art-photo { opacity: .94; mix-blend-mode: normal; filter: saturate(1.08) contrast(1.04); }
.culture-art:hover .culture-art-photo { opacity: 1; transform: scale(1.06); }
@media (max-width: 760px) {
  .brand-glyph { width: 42px; height: 42px; font-size: 25px; }
  .board-hero { min-height: 220px; padding: 25px 21px; }
  .board-hero .hero-emblem { width: 165px; height: 165px; }
  .hero-emblem .hero-z { font-size: 72px; }
  .culture-gallery { padding: 18px; }
  .art-image { height: 105px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-glyph::after { display: none; }
}

/* Persistent database connection indicator */
.cloud-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.cloud-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.cloud-status[data-state="syncing"] i { background: var(--tz-gold); box-shadow: 0 0 9px var(--tz-gold); animation: sync-pulse 1.1s ease-in-out infinite; }
.cloud-status[data-state="synced"] { color: var(--green); }
.cloud-status[data-state="synced"] i { background: var(--green); box-shadow: 0 0 9px var(--green); }
.cloud-status[data-state="offline"] { color: var(--muted); }
.cloud-status[data-state="offline"] i { background: var(--amber); }
@keyframes sync-pulse { 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 1280px) { .cloud-status { display: none; } }
@media (max-width: 1120px) { .cloud-status { display: none; } }

/* Channel guide notice: every board explains what belongs there before the
   reader starts a thread. */
.feed-heading { min-width: 0; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.feed-heading > div:first-child { min-width: 145px; }
.channel-guide { display: flex; align-items: flex-start; gap: 9px; max-width: 365px; min-width: 0; flex: 1 1 240px; padding: 9px 11px; border: 1px solid rgba(244,207,67,.24); border-left: 2px solid var(--tz-gold); border-radius: 6px; background: linear-gradient(135deg, rgba(244,207,67,.065), rgba(27,111,174,.045)); }
.channel-guide-mark { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid var(--tz-gold); border-radius: 50%; color: var(--tz-gold); font-family: Georgia, serif; font-size: 12px; font-weight: 800; }
.channel-guide strong { display: block; color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.channel-guide p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
@media (max-width: 760px) {
  .feed-heading { width: 100%; align-items: stretch; flex-direction: column; gap: 11px; }
  .channel-guide { max-width: none; }
}

.boot-state { min-height: 280px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, rgba(31,143,84,.1), rgba(27,111,174,.08), rgba(2,8,6,.7)); color: var(--muted); }
.boot-state-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid var(--tz-gold); border-radius: 6px; color: #fff; background: linear-gradient(145deg, var(--tz-green), var(--tz-blue)); font-family: ui-monospace, monospace; font-size: 28px; font-style: italic; font-weight: 900; animation: boot-pulse 1.4s ease-in-out infinite; }
.boot-state strong { display: block; color: var(--text); font-family: ui-monospace, monospace; font-size: 13px; }
.boot-state p { margin: 6px 0 0; font-size: 11px; }
@keyframes boot-pulse { 50% { opacity: .5; transform: scale(.94) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .boot-state-mark { animation: none; } }

/* Administrator featured content and moderation-safe public states. */
.thread-meta-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.promo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgba(244,207,67,.48); border-radius: 4px; background: rgba(244,207,67,.1); color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.thread-card.is-promoted { border-color: rgba(244,207,67,.38); box-shadow: 0 16px 38px rgba(244,207,67,.06); }
.thread-card.is-promoted .thread-accent { background: linear-gradient(var(--tz-green), var(--tz-gold), var(--tz-blue)); opacity: 1; }
@media (max-width: 420px) { .thread-meta-right { gap: 5px; }.promo-badge { padding: 3px 5px; font-size: 8px; }.thread-meta-right .board-tag { display: none; } }

/* Automated community prompts remain unmistakably labelled. */
.bot-badge { display: inline-flex; align-items: center; min-height: 15px; margin-left: 4px; padding: 1px 4px; border: 1px solid rgba(139,218,253,.48); border-radius: 3px; background: rgba(139,218,253,.1); color: var(--tz-blue); font-family: ui-monospace, monospace; font-size: 8px; font-weight: 900; letter-spacing: .08em; vertical-align: middle; }
.bot-badge::before { content: ""; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: var(--tz-blue); box-shadow: 0 0 5px var(--tz-blue); }

/* Board pulse, topic tags, pinned notices, and safety actions. */
.pulse-card, .notice-card { position: relative; overflow: hidden; margin-top: 16px; border: 1px solid rgba(244,207,67,.28); border-radius: 9px; background: linear-gradient(135deg, rgba(16,35,27,.9), rgba(27,111,174,.08)); }
.pulse-card { padding: 17px 20px 16px; }
.pulse-card::after { content: ""; position: absolute; right: -35px; bottom: -60px; width: 170px; height: 170px; border: 1px solid rgba(168,255,120,.13); border-radius: 50%; box-shadow: 0 0 0 16px rgba(27,111,174,.05), 0 0 0 32px rgba(31,143,84,.035); pointer-events: none; }
.pulse-heading { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.pulse-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.04em; }
.pulse-mark { color: var(--tz-gold); font-size: 28px; line-height: .7; }
.pulse-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 13px; }
.pulse-stats div { padding-right: 10px; border-right: 1px solid var(--line); }
.pulse-stats div:last-child { border-right: 0; }
.pulse-stats strong, .pulse-stats span { display: block; }
.pulse-stats strong { color: var(--green); font-family: ui-monospace, monospace; font-size: 23px; }
.pulse-stats span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.pulse-featured { position: relative; z-index: 1; width: 100%; padding: 10px 12px; border: 1px solid rgba(244,207,67,.2); border-radius: 6px; background: rgba(2,8,6,.42); color: var(--text); text-align: left; }
.pulse-featured:hover { border-color: var(--tz-gold); }
.pulse-featured span, .pulse-featured strong, .pulse-featured small { display: block; }
.pulse-featured span { color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.pulse-featured strong { margin-top: 5px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pulse-featured small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.notice-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 17px; border-left: 3px solid var(--tz-gold); }
.notice-card.notice-warning { border-left-color: var(--pink); }
.notice-pin { color: var(--tz-gold); font-size: 18px; line-height: 1; }
.notice-card.notice-warning .notice-pin { color: var(--pink); }
.notice-card strong { display: block; font-size: 13px; }
.notice-card p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.thread-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag-pill { padding: 4px 7px; border: 1px solid rgba(27,111,174,.45); border-radius: 4px; background: rgba(27,111,174,.1); color: #8bd9fd; font-family: ui-monospace, monospace; font-size: 9px; }
.tag-filter { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.tag-filter select { max-width: 110px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; cursor: pointer; }
.tag-filter option { background: var(--panel); }
.tag-picker { margin: 0 0 17px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; }
.tag-picker legend { padding: 0 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tag-picker > div { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-picker-dropdown { padding: 0; overflow: hidden; }
.tag-picker-dropdown summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.tag-picker-dropdown summary::-webkit-details-marker { display: none; }
.tag-picker-dropdown summary::after { content: '＋'; color: var(--tz-gold); font-size: 16px; line-height: 1; }
.tag-picker-dropdown[open] summary { border-bottom: 1px solid var(--line); color: var(--tz-gold); }
.tag-picker-dropdown[open] summary::after { content: '−'; }
.tag-picker-dropdown summary small { margin-left: auto; color: var(--dim); font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.tag-picker-dropdown > .tag-picker-options { padding: 11px; }
.tag-option { position: relative; }
.tag-option input { position: absolute; opacity: 0; }
.tag-option span { display: block; padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; cursor: pointer; }
.tag-option input:checked + span { border-color: var(--tz-gold); background: rgba(244,207,67,.1); color: var(--tz-gold); }
.tag-option input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.tag-option > small { display: block; max-width: 220px; margin-top: 4px; color: var(--dim); font-size: 9px; line-height: 1.35; }
.report-action { color: var(--amber); }
.modal-head-actions { display: flex; gap: 6px; }
.reply-author-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.reply-report { flex: 0 0 auto; color: var(--amber); }
.reply > .author { justify-content: space-between; }
.report-modal { width: min(560px, 100%); }
@media (max-width: 760px) {
  .pulse-card, .notice-card { margin-top: 12px; }
  .pulse-card { padding: 15px; }
  .pulse-stats span { line-height: 1.25; }
  .toolbar-actions { flex-wrap: wrap; }
  .tag-filter, .sort-select { min-height: 35px; }
  .tag-filter select { max-width: 130px; }
  .thread-actions { flex-wrap: wrap; }
  .thread-actions .save-button { margin-left: 0; }
}
@media (max-width: 420px) {
  .pulse-stats { gap: 6px; }
  .pulse-stats strong { font-size: 19px; }
  .pulse-stats span { font-size: 9px; }
  .notice-card { padding: 12px; }
  .modal-head-actions .icon-button { width: 32px; }
}

/* Maasai heritage landscape cover: a respectful, original visual layer for
   the board, inspired by pastoral life, beadwork geometry, savanna and
   Kilimanjaro rather than presenting itself as documentary photography. */
.culture-cover { position: relative; min-height: 300px; overflow: hidden; margin-top: 16px; border: 1px solid rgba(244,207,67,.36); border-radius: 12px; background: #12334a; box-shadow: 0 24px 60px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.04); }
.culture-cover::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(2,8,6,.94) 0%, rgba(2,8,6,.82) 34%, rgba(2,8,6,.18) 73%, rgba(2,8,6,.08)); pointer-events: none; }
.culture-cover::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 56px; background: linear-gradient(180deg, transparent, rgba(2,8,6,.72)); pointer-events: none; }
.culture-cover-art { position: absolute; inset: 0; opacity: .97; transform: scale(1.015); animation: culture-cover-pan 18s ease-in-out infinite alternate; }
.culture-cover-art svg { display: block; width: 100%; height: 100%; }
.culture-cover-content { position: relative; z-index: 2; max-width: 470px; padding: 28px 25px 18px; }
.culture-cover-content h2 { max-width: 390px; margin: 0; color: #fff7d0; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.06em; line-height: 1; text-shadow: 2px 3px 0 rgba(17,22,26,.64); }
.culture-cover-content p:not(.eyebrow) { max-width: 430px; margin: 12px 0 0; color: #d5e3d2; font-size: 11px; line-height: 1.6; }
.culture-cover-note { display: inline-block; margin-top: 14px; padding: 5px 8px; border: 1px solid rgba(244,207,67,.38); border-radius: 4px; background: rgba(2,8,6,.38); color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.culture-sticker-rail { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 20px 18px; }
.culture-sticker { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 5px 11px 5px 6px; border: 1px solid rgba(244,207,67,.42); border-radius: 999px; background: rgba(4,13,10,.76); box-shadow: 0 8px 20px rgba(0,0,0,.22); color: var(--text); font-size: 10px; font-weight: 700; backdrop-filter: blur(6px); animation: sticker-bob 5s ease-in-out infinite; animation-delay: var(--sticker-delay); }
.culture-sticker:hover { border-color: var(--tz-gold); background: rgba(16,35,27,.9); transform: translateY(-3px) rotate(-1deg); }
.sticker-art { display: grid; place-items: center; width: 34px; height: 30px; overflow: hidden; border-radius: 50%; background: rgba(244,207,67,.1); }
.sticker-art svg { display: block; width: 32px; height: 25px; }
.sticker-cattle { border-color: rgba(200,137,80,.7); }
.sticker-mountain { border-color: rgba(139,217,253,.48); }
.sticker-beads { border-color: rgba(229,107,103,.62); }
.sticker-wildlife { border-color: rgba(31,143,84,.72); }
@keyframes culture-cover-pan { from { transform: scale(1.015) translateX(-.5%); } to { transform: scale(1.045) translateX(.5%); } }
@keyframes sticker-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@media (max-width: 760px) {
  .culture-cover { min-height: 405px; margin-top: 12px; }
  .culture-cover::before { background: linear-gradient(180deg, rgba(2,8,6,.86) 0%, rgba(2,8,6,.68) 43%, rgba(2,8,6,.3) 78%); }
  .culture-cover-content { padding: 23px 17px 15px; }
  .culture-cover-content h2 { max-width: 280px; font-size: 30px; }
  .culture-cover-content p:not(.eyebrow) { max-width: 330px; font-size: 10px; }
  .culture-cover-art { inset: 80px 0 0; }
  .culture-sticker-rail { gap: 7px; padding: 0 12px 13px; }
  .culture-sticker { min-height: 38px; padding-right: 8px; font-size: 9px; }
  .sticker-art { width: 29px; height: 27px; }
  .sticker-art svg { width: 28px; height: 23px; }
}
@media (max-width: 420px) {
  .culture-cover { min-height: 438px; }
  .culture-sticker-rail { display: grid; grid-template-columns: 1fr 1fr; }
  .culture-sticker { width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .culture-cover-art, .culture-sticker { animation: none; }
}

/* A gentle crossing animation keeps the heritage cover feeling alive: a
   small pastoral herd and companion move through the flag-painted meadow. */
.culture-walker { transform-box: fill-box; transform-origin: center; }
.walker-herd-track { opacity: .96; animation: herd-crossing 28s linear infinite; }
.walker-cow { transform-box: fill-box; transform-origin: center bottom; animation: herd-step 1.25s ease-in-out infinite; }
.walker-cow-two { animation-delay: -.62s; }
.walker-pastoral-figure { transform-box: fill-box; transform-origin: center bottom; animation: pastoral-step 1.25s ease-in-out infinite; }
@keyframes herd-crossing {
  from { transform: translateX(0); }
  to { transform: translateX(1480px); }
}
@keyframes herd-step {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes pastoral-step {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-3px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .walker-herd-track, .walker-cow, .walker-pastoral-figure { animation: none; }
}

/* High-visibility animated walking stickers sit above the landscape so the
   pastoral movement remains obvious on desktop and mobile, even when the
   cover art is darkened by its readable text overlay. */
.walking-sticker-scene { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.walking-sticker { position: absolute; left: -150px; bottom: 35px; display: block; width: 112px; height: 92px; animation: sticker-walk-across 22s linear infinite; }
.walking-sticker-card { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 7px; border: 2px solid rgba(244,207,67,.86); border-radius: 21px 21px 28px 12px; background: rgba(5,16,12,.72); box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 3px rgba(31,143,84,.22); backdrop-filter: blur(3px); transform: rotate(-3deg); }
.walking-sticker-card::before { content: ""; position: absolute; z-index: -1; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--tz-green) 0 39%, var(--tz-gold) 39% 46%, var(--tz-black) 46% 58%, var(--tz-gold) 58% 65%, var(--tz-blue) 65%); opacity: .58; }
.walking-sticker-card::after { content: ""; position: absolute; right: 8px; bottom: 6px; left: 8px; height: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--tz-green), var(--tz-gold), var(--tz-blue)); opacity: .95; }
.walking-sticker-card svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.38)); }
.walking-sticker-cattle { bottom: 29px; animation-duration: 24s; animation-delay: -4s; }
.walking-sticker-herder { bottom: 53px; width: 78px; height: 96px; animation-duration: 24s; animation-delay: -10s; }
.walking-sticker-herder .walking-sticker-card { border-radius: 18px 25px 12px 25px; transform: rotate(4deg); }
.walking-sticker-giraffe { bottom: 112px; width: 76px; height: 92px; animation-duration: 29s; animation-delay: -17s; }
.walking-sticker-giraffe .walking-sticker-card { border-color: rgba(229,107,103,.86); transform: rotate(-5deg); }
.walking-sticker-antelope { bottom: 53px; width: 106px; height: 76px; animation-duration: 27s; animation-delay: -22s; }
.walking-sticker-antelope .walking-sticker-card { border-color: rgba(27,111,174,.86); transform: rotate(3deg); }
@keyframes sticker-walk-across {
  0% { transform: translate3d(0, 0, 0) scale(.78); opacity: 0; }
  7% { opacity: 1; }
  23% { transform: translate3d(22vw, -4px, 0) scale(.86); }
  47% { transform: translate3d(48vw, 2px, 0) scale(.94); }
  71% { transform: translate3d(75vw, -3px, 0) scale(1); }
  93% { opacity: 1; }
  100% { transform: translate3d(116vw, 0, 0) scale(1.04); opacity: 0; }
}
@media (max-width: 760px) {
  .walking-sticker { bottom: 22px; width: 86px; height: 70px; }
  .walking-sticker-cattle { bottom: 21px; }
  .walking-sticker-herder { bottom: 37px; width: 61px; height: 77px; }
  .walking-sticker-giraffe { bottom: 96px; width: 60px; height: 72px; }
  .walking-sticker-antelope { bottom: 38px; width: 82px; height: 59px; }
  .walking-sticker-card { padding: 4px; border-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .walking-sticker { animation: none; opacity: .95; }
  .walking-sticker-cattle { left: 9%; }
  .walking-sticker-herder { left: 31%; }
  .walking-sticker-giraffe { left: 62%; }
  .walking-sticker-antelope { left: 78%; }
}

/* File attachments for replies. The native input stays accessible but the
   visible control uses a compact, touch-friendly sticker-style button. */
.reply-media-input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.reply-upload-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 35px; padding: 0 10px; border: 1px solid rgba(244,207,67,.34); border-radius: 5px; background: rgba(244,207,67,.06); color: var(--tz-gold); font-size: 11px; font-weight: 800; cursor: pointer; }
.reply-upload-button:hover { border-color: var(--tz-gold); background: rgba(244,207,67,.12); }
.reply-upload-button:first-letter { font-size: 17px; }
.reply-media-name { flex: 1 0 100%; min-width: 0; overflow: hidden; color: var(--dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.reply-form .reply-upload-button { margin-top: 9px; }
.reply-form .reply-media-name { margin-top: 7px; }
.reply-form .reply-footer { width: 100%; }
.reply .post-media { margin: 11px 0 0 43px; max-width: calc(100% - 43px); }
@media (max-width: 420px) {
  .inline-reply-form .reply-upload-button { flex: 0 0 auto; }
  .inline-reply-form .reply-media-name { order: 3; }
  .reply-form .reply-upload-button { width: 100%; }
}

/* Parallel Z-shaped heritage stickers visibly travel through the landscape
   and resolve into a Tanzania flag mark. */
.z-flag-procession { position: absolute; z-index: 4; top: 18px; right: 18px; width: min(48%, 390px); height: 112px; pointer-events: none; }
.z-procession-track { position: absolute; inset: 0; overflow: visible; }
.z-runner { position: absolute; top: var(--z-lane); left: -48px; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.7); border-radius: 9px; background: linear-gradient(145deg, var(--tz-green), var(--tz-blue)); box-shadow: 0 5px 0 rgba(17,22,26,.6), 0 0 0 3px rgba(244,207,67,.22); clip-path: polygon(0 0, 100% 0, 100% 25%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 75%, 50% 50%, 0 25%); animation: z-parade 14s linear infinite; }
.z-runner b { color: #fff; font-family: ui-monospace, monospace; font-size: 20px; font-style: italic; font-weight: 950; text-shadow: 2px 2px 0 var(--tz-black); transform: skew(-8deg); }
.z-runner-1 { --z-lane: 7px; background: linear-gradient(145deg, var(--tz-green) 0 48%, var(--tz-gold) 49% 52%, var(--tz-black) 53% 100%); }
.z-runner-2 { --z-lane: 30px; background: linear-gradient(145deg, var(--tz-blue) 0 48%, var(--tz-gold) 49% 52%, var(--tz-green) 53% 100%); }
.z-runner-3 { --z-lane: 53px; background: linear-gradient(145deg, var(--tz-black) 0 48%, var(--tz-gold) 49% 52%, var(--tz-blue) 53% 100%); }
.z-runner-4 { --z-lane: 76px; background: linear-gradient(145deg, var(--tz-gold) 0 48%, var(--tz-black) 49% 52%, var(--tz-green) 53% 100%); }
.tz-assembly { position: absolute; top: 22px; right: 3px; width: 76px; height: 66px; overflow: hidden; border: 2px solid rgba(244,207,67,.9); border-radius: 10px; background: var(--tz-blue); box-shadow: 0 9px 24px rgba(0,0,0,.35), 0 0 0 4px rgba(31,143,84,.18); opacity: .25; animation: flag-assembly 14s ease-in-out infinite; }
.tz-assembly > span { position: absolute; inset: -30%; transform: rotate(-45deg); }
.tz-assembly .assembly-green { background: var(--tz-green); clip-path: polygon(0 0, 100% 0, 0 100%); }
.tz-assembly .assembly-blue { background: var(--tz-blue); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tz-assembly .assembly-gold { background: var(--tz-gold); clip-path: polygon(44% 0, 53% 0, 100% 47%, 100% 56%, 53% 100%, 44% 100%, 0 56%, 0 47%); }
.tz-assembly .assembly-black { background: var(--tz-black); clip-path: polygon(47% 0, 53% 0, 100% 47%, 100% 53%, 53% 100%, 47% 100%, 0 53%, 0 47%); }
.tz-assembly b { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-family: ui-monospace, monospace; font-size: 27px; font-style: italic; text-shadow: 2px 2px 0 var(--tz-black); }
@keyframes z-parade {
  0% { left: -48px; opacity: 0; transform: rotate(-14deg) scale(.68); }
  8% { opacity: 1; }
  20% { left: 12%; opacity: 1; transform: rotate(-8deg) scale(.78); }
  48% { left: 45%; transform: rotate(4deg) scale(.9); }
  67% { left: 69%; top: 38px; transform: rotate(0) scale(.78); }
  76% { left: 76%; top: 38px; opacity: .15; transform: rotate(0) scale(.44); }
  84%, 100% { left: 78%; top: 38px; opacity: 0; transform: rotate(0) scale(.3); }
}
@keyframes flag-assembly {
  0%, 59% { opacity: .22; transform: scale(.82) rotate(-4deg); }
  68% { opacity: .38; transform: scale(.86) rotate(-2deg); }
  77%, 88% { opacity: 1; transform: scale(1.04) rotate(2deg); }
  96%, 100% { opacity: .22; transform: scale(.82) rotate(-4deg); }
}

/* The cover motto is a living, user-advanceable wisdom card rather than a
   fixed quotation. The copy is marked as inspired paraphrase in the locale. */
.culture-motto { position: absolute; z-index: 4; right: 18px; bottom: 67px; width: min(255px, 43%); padding: 12px 13px 10px; border: 1px solid rgba(244,207,67,.45); border-radius: 8px; background: linear-gradient(145deg, rgba(4,13,10,.9), rgba(27,111,174,.25)); box-shadow: 0 12px 28px rgba(0,0,0,.3); backdrop-filter: blur(7px); }
.culture-motto::before { content: ""; position: absolute; top: 0; right: 13px; left: 13px; height: 2px; background: linear-gradient(90deg, var(--tz-green), var(--tz-gold), var(--tz-blue)); }
.culture-motto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.culture-motto-head span { color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.culture-motto-head b { overflow: hidden; color: var(--text); font-family: ui-monospace, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.culture-motto blockquote { margin: 9px 0 5px; color: #fff7d0; font-size: 12px; font-weight: 750; line-height: 1.35; }
.culture-motto small { display: block; color: var(--muted); font-size: 8px; line-height: 1.35; }
.motto-next { display: inline-flex; align-items: center; gap: 7px; min-height: 29px; margin-top: 9px; padding: 0 8px; border: 1px solid rgba(168,255,120,.3); border-radius: 4px; background: rgba(168,255,120,.06); color: var(--green); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; }
.motto-next span { font-size: 14px; }
.motto-next:hover { border-color: var(--green); background: rgba(168,255,120,.12); }
@media (max-width: 760px) {
  .z-flag-procession { top: 132px; right: 10px; width: calc(100% - 20px); height: 102px; }
  .culture-motto { position: relative; right: auto; bottom: auto; width: auto; margin: 4px 12px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .z-runner { animation: none; opacity: .9; left: 12%; }
  .z-runner-2 { left: 30%; }.z-runner-3 { left: 48%; }.z-runner-4 { left: 66%; }
  .tz-assembly { animation: none; opacity: 1; }
}

/* Sophisticated culture atlas finish: the six themes sit above a calm,
   animated rain-and-water landscape instead of competing in a loose card pile. */
.culture-gallery {
  isolation: isolate;
  min-height: 600px;
  padding-bottom: 34px;
  background:
    linear-gradient(180deg, rgba(16,35,27,.98) 0%, rgba(8,18,15,.94) 48%, rgba(7,28,31,.96) 100%);
}
.culture-gallery::before {
  z-index: 0;
  opacity: .55;
}
.culture-gallery::after { display: none; }
.culture-gallery > *:not(.culture-gallery-scene) { position: relative; z-index: 2; }
.culture-gallery-scene {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 280px;
  overflow: hidden;
  pointer-events: none;
  opacity: .9;
  background: linear-gradient(180deg, transparent, rgba(4,18,22,.22));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 13%, #000 44%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 13%, #000 44%, #000 100%);
}
.culture-gallery-scene::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 105px;
  background: linear-gradient(180deg, transparent, rgba(2,8,12,.4));
}
.culture-gallery-scene svg { display: block; width: 100%; height: 100%; }
.gallery-rain, .gallery-rain-fine { transform-box: fill-box; transform-origin: center; }
.gallery-rain { animation: gallery-rainfall 2.2s linear infinite; }
.gallery-rain-fine { animation: gallery-rainfall-fine 1.6s linear infinite -0.7s; }
.gallery-lake { transform-box: fill-box; transform-origin: center bottom; animation: gallery-lake-breathe 6s ease-in-out infinite; }
.gallery-river { stroke-dasharray: 28 18; animation: gallery-current 6s linear infinite; }
.gallery-river-two { animation-duration: 4.2s; animation-direction: reverse; }
.gallery-water-lines { animation: gallery-water-shimmer 5s ease-in-out infinite; }
.gallery-reeds { transform-box: fill-box; transform-origin: bottom center; animation: gallery-reed-sway 4.5s ease-in-out infinite; }
@keyframes gallery-rainfall {
  0% { transform: translateY(-52px); opacity: 0; }
  14% { opacity: .35; }
  74% { opacity: .5; }
  100% { transform: translateY(50px); opacity: 0; }
}
@keyframes gallery-rainfall-fine {
  0% { transform: translateY(-34px); opacity: 0; }
  18% { opacity: .4; }
  80% { opacity: .55; }
  100% { transform: translateY(34px); opacity: 0; }
}
@keyframes gallery-lake-breathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.045) translateY(-2px); }
}
@keyframes gallery-current { to { stroke-dashoffset: -92px; } }
@keyframes gallery-water-shimmer {
  0%, 100% { opacity: .42; transform: translateX(-8px); }
  50% { opacity: .85; transform: translateX(10px); }
}
@keyframes gallery-reed-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(2deg); }
}
.culture-gallery-head { align-items: center; }
.culture-gallery-intro { max-width: 660px; margin-bottom: 22px; }
.gallery-stamp { position: relative; overflow: hidden; background: rgba(2,8,6,.3); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
.gallery-stamp::after {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 8px;
  width: 2px;
  background: var(--tz-gold);
  opacity: .55;
  transform: rotate(27deg);
}
.culture-art-grid { gap: 16px; }
.culture-art {
  overflow: hidden;
  border-color: rgba(184,255,190,.2);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(10,28,22,.9), rgba(3,12,13,.78));
  box-shadow: 0 15px 32px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.culture-art:nth-child(2), .culture-art:nth-child(5) { transform: translateY(12px); }
.culture-art:nth-child(2):hover, .culture-art:nth-child(5):hover { transform: translateY(7px); }
.culture-art:nth-child(3), .culture-art:nth-child(6) { transform: translateY(24px); }
.culture-art:nth-child(3):hover, .culture-art:nth-child(6):hover { transform: translateY(19px); }
.art-image { height: 158px; border-bottom: 1px solid rgba(244,207,67,.18); }
.art-image::after { opacity: .72; }
.art-caption { min-height: 64px; padding: 11px 12px 12px; background: linear-gradient(180deg, rgba(2,8,6,.05), rgba(2,8,6,.36)); }
.art-caption strong { color: #fff7d0; font-size: 10px; letter-spacing: .1em; }
.art-caption small { color: #9db8a3; font-size: 10px; }
.art-symbol { font-size: 39px; }
@media (max-width: 760px) {
  .culture-gallery { min-height: 760px; padding-bottom: 22px; }
  .culture-gallery-scene { height: 310px; }
  .culture-gallery-head { align-items: flex-start; }
  .culture-gallery-intro { margin-bottom: 18px; }
  .culture-art-grid { gap: 11px; }
  .culture-art:nth-child(2), .culture-art:nth-child(5), .culture-art:nth-child(3), .culture-art:nth-child(6) { transform: none; }
  .culture-art:nth-child(2):hover, .culture-art:nth-child(5):hover, .culture-art:nth-child(3):hover, .culture-art:nth-child(6):hover { transform: translateY(-3px); }
  .art-image { height: 108px; }
  .art-caption { min-height: 60px; padding: 9px 9px 10px; }
  .art-caption strong { font-size: 9px; }
  .art-caption small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-rain, .gallery-rain-fine, .gallery-lake, .gallery-river, .gallery-water-lines, .gallery-reeds { animation: none; }
}

/* Safe fallback scene used if an embedded gallery illustration is unavailable. */
.culture-gallery > .culture-gallery-fallback-scene {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 280px;
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
  background:
    linear-gradient(180deg, transparent 0 28%, rgba(8,44,45,.18) 29% 48%, rgba(6,33,42,.78) 49% 100%),
    radial-gradient(ellipse at 35% 104%, rgba(73,189,190,.38) 0 16%, transparent 17%),
    linear-gradient(166deg, transparent 0 57%, rgba(111,226,214,.7) 58% 60%, transparent 61%),
    linear-gradient(174deg, transparent 0 67%, rgba(50,156,180,.58) 68% 70%, transparent 71%),
    repeating-linear-gradient(104deg, transparent 0 18px, rgba(184,255,226,.3) 19px 20px, transparent 21px 42px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000);
  animation: fallback-water-shift 8s ease-in-out infinite alternate;
}
.culture-gallery-fallback-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(105deg, transparent 0 25px, rgba(226,255,244,.35) 26px 28px, transparent 29px 62px);
  transform: translateY(-35px);
  animation: fallback-rain-drop 2.2s linear infinite;
}
.culture-gallery-fallback-scene::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -20px;
  left: -8%;
  height: 82px;
  border-radius: 50% 50% 0 0;
  background: repeating-linear-gradient(176deg, rgba(168,255,240,.4) 0 2px, transparent 3px 18px);
  animation: fallback-lake-ripple 4.5s ease-in-out infinite;
}
.fallback-rain, .fallback-river, .fallback-lake { position: absolute; display: block; }
.fallback-rain { top: 35%; right: 8%; left: 8%; height: 2px; background: rgba(226,255,244,.55); box-shadow: 85px 22px rgba(226,255,244,.4), 230px -10px rgba(226,255,244,.36), 410px 28px rgba(226,255,244,.4), 610px -4px rgba(226,255,244,.35); transform: rotate(104deg); opacity: .4; }
.fallback-river { right: 32%; bottom: 34px; width: 54%; height: 36px; border-bottom: 5px solid rgba(139,239,224,.62); border-radius: 50%; transform: rotate(-8deg); filter: blur(.2px); }
.fallback-lake { right: 0; bottom: 0; left: 0; height: 75px; border-top: 1px solid rgba(139,239,224,.5); background: linear-gradient(180deg, rgba(27,111,174,.16), rgba(3,18,28,.8)); }
@keyframes fallback-rain-drop { to { transform: translateY(78px); opacity: .15; } }
@keyframes fallback-water-shift { to { background-position: 0 0, 18px -4px, 10px 0, -8px 0, 0 18px; } }
@keyframes fallback-lake-ripple { 50% { transform: translateX(18px) scaleY(1.08); opacity: .7; } }
@media (max-width: 760px) { .culture-gallery > .culture-gallery-fallback-scene { height: 310px; } }
@media (prefers-reduced-motion: reduce) { .culture-gallery-fallback-scene, .culture-gallery-fallback-scene::before, .culture-gallery-fallback-scene::after { animation: none; } }

/* Compact culture atlas: the bottom gallery starts as a quiet row and can be
   opened when someone wants to browse the full artwork and water scene. */
.culture-gallery-controls { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.culture-gallery-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 1px solid rgba(168,255,120,.34); border-radius: 6px; background: rgba(168,255,120,.06); color: var(--green); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.culture-gallery-toggle:hover { border-color: var(--green); background: rgba(168,255,120,.12); transform: translateY(-1px); }
.culture-gallery-toggle-icon { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 4px; font-size: 14px; line-height: 1; }
.culture-gallery-content { position: relative; z-index: 2; }
.culture-gallery.is-collapsed { min-height: 0; padding: 14px 18px; }
.culture-gallery.is-collapsed .culture-gallery-content,
.culture-gallery.is-collapsed > .culture-gallery-scene,
.culture-gallery.is-collapsed > .culture-gallery-fallback-scene { display: none; }
.culture-gallery.is-collapsed::before { opacity: .22; }
.culture-gallery.is-collapsed .culture-gallery-head { min-height: 38px; }
.culture-gallery.is-collapsed .gallery-stamp { opacity: .72; }
@media (max-width: 760px) {
  .culture-gallery-controls { gap: 6px; }
  .culture-gallery-toggle { min-height: 38px; padding: 0 9px; }
  .culture-gallery.is-collapsed { padding: 12px 14px; }
  .culture-gallery.is-collapsed .culture-gallery-head { align-items: center; }
  .culture-gallery.is-collapsed .gallery-stamp { display: none; }
}

/* Cross-browser baseline: these are progressive fallbacks for mobile
   Safari, Chromium WebViews, Firefox Android, and browsers without newer CSS
   color, viewport, or backdrop features. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-height: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, a, input, textarea, select { touch-action: manipulation; }
img, video, svg { max-width: 100%; }
.avatar { background: rgba(168,255,120,.08); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .avatar { background: color-mix(in srgb, var(--avatar-color) 12%, transparent); }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-backdrop, .culture-floater, .culture-motto, .culture-art { background: rgba(4,13,10,.96); }
}
@media (hover: none) {
  .thread-card:hover, .culture-art:hover, .culture-gallery-toggle:hover, .button-primary:hover { transform: none; }
}
@media (max-width: 760px) {
  #app-shell { padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
  .modal-backdrop { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .toast { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .post-media img, .post-media video { max-height: min(62vh, 420px); }
}

/* Thread minimize/expand controls and moderator-issued custom badges. */
.thread-meta-right { flex-wrap: wrap; }
.thread-collapse-button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 7px; border: 1px solid rgba(168,255,120,.3); border-radius: 4px; background: rgba(168,255,120,.045); color: var(--green); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; white-space: nowrap; }
.thread-collapse-button:hover { border-color: var(--green); background: rgba(168,255,120,.11); }
.thread-expandable { display: block; }
.thread-card.is-collapsed .thread-expandable { display: none; }
.thread-card.is-collapsed .thread-title { margin-bottom: 3px; }
.thread-empty-room { display: flex; align-items: center; gap: 12px; min-height: 54px; margin: 8px 0 4px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 6px; background: linear-gradient(90deg, rgba(168,255,120,.04), rgba(168,255,120,.015)); color: var(--muted); }
.thread-empty-room-glyph { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid var(--line); border-radius: 50%; background: rgba(168,255,120,.07); color: var(--green); font-size: 17px; line-height: 1; }
.thread-empty-room-text { font-size: 12px; font-style: italic; line-height: 1.45; color: var(--muted); }
.thread-empty-room:hover { border-color: var(--green); }
.thread-empty-room:hover .thread-empty-room-glyph { color: var(--green); border-color: var(--green); background: rgba(168,255,120,.12); }
.badge-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.custom-badge { display: inline-flex; align-items: center; gap: 3px; min-height: 17px; padding: 2px 5px; border: 1px solid var(--badge-color); border-radius: 4px; background: rgba(244,207,67,.1); color: var(--badge-color); font-family: ui-monospace, monospace; font-size: 8px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.custom-badge > span { font-size: 11px; line-height: 1; }
.badge-panel { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.badge-copy, .badge-empty { margin: 5px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.active-badges { margin: 8px 0 10px; }
.badge-switcher-wrap { margin: 4px 0 12px; }
.badge-switcher-copy { margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.badge-switcher { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-switch-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--dim); font-family: ui-monospace, monospace; font-size: 10px; cursor: pointer; }
.badge-switch-chip:hover { border-color: var(--badge-color); color: var(--text); }
.badge-switch-chip.is-active { border-color: var(--badge-color); color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 12%, transparent); }
.badge-voucher-form label { display: block; margin: 9px 0 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.badge-voucher-form input { width: 100%; min-height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; outline: 0; background: #08120f; color: var(--text); font-size: 11px; }
.badge-voucher-form input:focus { border-color: var(--tz-gold); }
.badge-voucher-form .button { width: 100%; min-height: 35px; margin-top: 8px; font-size: 10px; }
.profile-top > div:nth-child(2) { min-width: 0; flex: 1; }
.thread-card.is-collapsed { border-color: rgba(168,255,120,.22); }
@media (max-width: 760px) {
  .thread-collapse-button span { display: none; }
  .thread-collapse-button { width: 30px; justify-content: center; padding: 0; }
  .badge-panel { margin-top: 12px; }
}

/* Egyptian-inspired SVG ornament layer: geometric, symbolic, and clearly
   decorative. The artwork uses inline SVG so it remains sharp in preview,
   on high-density phones, and in browsers that cannot load local SVG files. */
.egyptian-glyph { display: inline-grid; place-items: center; width: 58px; height: 48px; flex: 0 0 auto; }
.egyptian-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.35)); }
.glyph-gold { fill: var(--tz-gold); stroke: var(--tz-gold); }
.glyph-sand { fill: #e8c08a; stroke: #e8c08a; }
.glyph-blue { fill: var(--tz-blue); stroke: var(--tz-blue); }
.glyph-green { fill: var(--tz-green); stroke: var(--tz-green); }
.glyph-ink { fill: var(--tz-black); stroke: var(--tz-black); }
.symbol-atlas-strip { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: 20px; min-height: 220px; margin: 4px 0 26px; padding: 19px 20px; overflow: hidden; border: 1px solid rgba(244,207,67,.32); border-radius: 11px; background: linear-gradient(135deg, rgba(244,207,67,.09), rgba(27,111,174,.11) 45%, rgba(2,8,6,.7)); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 35px rgba(0,0,0,.16); perspective: 900px; }
.symbol-atlas-strip::before { content: ""; position: absolute; inset: -40%; background: repeating-linear-gradient(125deg, transparent 0 25px, rgba(244,207,67,.05) 26px 28px, transparent 29px 54px); transform: rotate(8deg); animation: symbol-texture-slide 16s linear infinite; pointer-events: none; }
.symbol-atlas-copy { position: relative; z-index: 2; align-self: center; max-width: 430px; }
.symbol-atlas-copy h3 { margin: 0; color: #fff7d0; font-size: 20px; letter-spacing: -.04em; }
.symbol-atlas-copy > p:not(.eyebrow) { margin: 7px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.symbol-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.symbol-labels > span { display: inline-flex; align-items: center; gap: 5px; min-height: 29px; padding: 3px 7px 3px 4px; border: 1px solid rgba(244,207,67,.28); border-radius: 5px; background: rgba(2,8,6,.45); color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 8px; text-transform: uppercase; }
.symbol-labels .egyptian-glyph { width: 25px; height: 22px; }
.symbol-labels b { font-weight: 800; }
.symbol-orbit-art { position: relative; z-index: 1; min-height: 180px; transform-style: preserve-3d; transform: rotateY(-10deg) rotateX(5deg); animation: symbol-stage-float 7s ease-in-out infinite; }
.orbit-glyph { position: absolute; display: grid; place-items: center; width: 78px; height: 68px; border: 1px solid rgba(244,207,67,.3); border-radius: 10px; background: linear-gradient(145deg, rgba(27,111,174,.35), rgba(2,8,6,.72)); box-shadow: 0 12px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.1); transform-style: preserve-3d; }
.orbit-glyph::after { content: ""; position: absolute; right: 8px; bottom: 7px; left: 8px; height: 2px; background: linear-gradient(90deg, var(--tz-green), var(--tz-gold), var(--tz-blue)); opacity: .8; }
.orbit-glyph .egyptian-glyph { width: 63px; height: 54px; transform: translateZ(18px); }
.orbit-glyph-eye { top: 7px; left: 8px; animation: glyph-orbit-eye 8s ease-in-out infinite; }
.orbit-glyph-pyramid { top: 50px; right: 14px; animation: glyph-orbit-pyramid 9s ease-in-out infinite -2s; }
.orbit-glyph-ankh { bottom: 3px; left: 74px; width: 61px; height: 75px; animation: glyph-orbit-ankh 8.5s ease-in-out infinite -4s; }
.orbit-glyph-ankh .egyptian-glyph { width: 43px; height: 64px; }
.orbit-glyph-feather { right: 89px; bottom: 12px; width: 48px; height: 55px; animation: glyph-orbit-feather 7s ease-in-out infinite -1s; }
.orbit-glyph-feather .egyptian-glyph { width: 31px; height: 45px; }
.symbol-spark { position: absolute; color: var(--tz-gold); font-style: normal; text-shadow: 0 0 12px currentColor; animation: spark-pulse 2.7s ease-in-out infinite; }
.symbol-spark-1 { top: 13px; right: 63px; color: var(--pink); }.symbol-spark-2 { right: 9px; bottom: 14px; color: var(--green); animation-delay: -.9s; }.symbol-spark-3 { top: 73px; left: 76px; color: var(--tz-gold); animation-delay: -1.7s; }
.signal-symbol-layer { position: absolute; z-index: 3; top: 17px; right: 12px; display: flex; align-items: flex-start; gap: 2px; width: 185px; pointer-events: none; opacity: .82; transform: rotate(5deg); }
.signal-symbol-layer .egyptian-glyph { width: 58px; height: 42px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5)); animation: signal-glyph-float 5.5s ease-in-out infinite; }
.signal-symbol-layer .egyptian-glyph-pyramid { animation-delay: -.9s; transform: translateY(23px) scale(.86); }
.signal-symbol-layer .egyptian-glyph-ankh { animation-delay: -1.8s; transform: translateY(51px) scale(.75); }
.floating-symbols { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.floating-symbol { position: absolute; display: grid; place-items: center; color: var(--tz-gold); font-family: Georgia, serif; font-size: 26px; line-height: 1; opacity: .7; text-shadow: 0 0 14px currentColor, 2px 3px 0 rgba(0,0,0,.32); animation: floating-symbol-drift 11s ease-in-out infinite; }
.floating-eye { top: 20%; left: 7%; color: #ffe18b; }.floating-ankh { top: 44%; right: 7%; color: var(--green); animation-delay: -2.2s; }.floating-pyramid { top: 70%; left: 8%; color: #e8c08a; font-size: 30px; animation-delay: -4.7s; }.floating-feather { right: 14%; bottom: 24%; color: #8bd9fd; font-size: 25px; animation-delay: -6.3s; }.floating-spark { top: 12%; right: 28%; color: var(--pink); font-size: 19px; animation-delay: -8s; }
@keyframes symbol-texture-slide { to { transform: rotate(8deg) translate3d(54px, 26px, 0); } }
@keyframes symbol-stage-float { 0%, 100% { transform: rotateY(-10deg) rotateX(5deg) translateY(0); } 50% { transform: rotateY(7deg) rotateX(-3deg) translateY(-7px); } }
@keyframes glyph-orbit-eye { 0%, 100% { transform: translate3d(0,0,16px) rotate(-4deg); } 50% { transform: translate3d(7px,-8px,30px) rotate(4deg); } }
@keyframes glyph-orbit-pyramid { 0%, 100% { transform: translate3d(0,0,4px) rotate(3deg); } 50% { transform: translate3d(-8px,6px,22px) rotate(-5deg); } }
@keyframes glyph-orbit-ankh { 0%, 100% { transform: translate3d(0,0,8px) rotate(-3deg); } 50% { transform: translate3d(5px,-9px,24px) rotate(4deg); } }
@keyframes glyph-orbit-feather { 0%, 100% { transform: translate3d(0,0,11px) rotate(-10deg); } 50% { transform: translate3d(-4px,-5px,25px) rotate(9deg); } }
@keyframes signal-glyph-float { 0%, 100% { opacity: .45; } 50% { opacity: 1; transform: translateY(-6px) scale(1.06); } }
@keyframes floating-symbol-drift { 0%, 100% { transform: translate3d(0,0,0) rotate(-8deg); } 50% { transform: translate3d(8px,-15px,0) rotate(8deg); } }
@keyframes spark-pulse { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(18deg); } }
@media (max-width: 760px) {
  .signal-symbol-layer { top: 10px; right: 2px; width: 150px; transform: scale(.82) rotate(5deg); transform-origin: top right; }
  .symbol-atlas-strip { grid-template-columns: 1fr; gap: 4px; min-height: 380px; margin-bottom: 18px; padding: 15px; }
  .symbol-atlas-copy { max-width: none; }
  .symbol-orbit-art { min-height: 190px; margin: 0 8px; }
  .floating-symbols { display: block; }
  .culture-floaters .culture-floater { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .symbol-atlas-strip::before, .symbol-orbit-art, .orbit-glyph, .signal-symbol-layer .egyptian-glyph, .floating-symbol, .symbol-spark { animation: none; }
}

/* Final WebView safety layer: prefer the vendor-prefixed effects used by
   older iOS and Android WebViews, keep dialogs inside the visible viewport,
   and replace broken attachment boxes with a readable message. */
.modal-backdrop, .culture-floater, .culture-motto, .culture-art {
  -webkit-backdrop-filter: blur(7px);
}
.modal-card {
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 40px);
}
.media-load-error {
  display: block;
  padding: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.post-media[data-media-failed] img,
.post-media[data-media-failed] video {
  display: none;
}
@supports (height: 100dvh) {
  .modal-card { max-height: calc(100dvh - 40px); }
}
@media (max-width: 760px) {
  .modal-card {
    max-height: calc(100vh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  }
  @supports (height: 100dvh) {
    .modal-card {
      max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    }
  }
}

/* Philosophy layer: a quiet shadow tree stays behind the board from canopy
   to roots, while the content remains readable above it. */
#tree-philosophy {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .46;
}
#tree-philosophy > .tree-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  filter: contrast(1.08) brightness(.72);
}
.tree-birds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 62%;
  overflow: visible;
  opacity: .62;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
.tree-bird { transform-origin: center; }
.tree-bird-1 { opacity: .72; }
.tree-bird-2 { opacity: .52; }
.tree-bird-3 { opacity: .4; }

.thread-list-hint {
  display: block;
  margin-top: 7px;
  color: var(--dim);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .02em;
}
.thread-card.is-collapsed .thread-title {
  margin-bottom: 0;
}
.thread-card.is-collapsed .thread-content {
  padding-bottom: 15px;
}
@media (max-width: 760px) {
  #tree-philosophy { opacity: .27; }
  .tree-birds { height: 48%; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .tree-birds { display: none; }
}

/* The culture portrait atlas keeps each people and historical world in its
   own respectful editorial window. Every portrait is an original abstract
   study, with a distinct animated motif rather than a documentary likeness. */
.culture-portrait-atlas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 16px;
  padding: 22px;
  border: 1px solid rgba(244,207,67,.34);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,34,27,.96), rgba(4,13,11,.97) 60%, rgba(27,111,174,.12));
  box-shadow: 0 20px 48px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.04);
}
.culture-portrait-atlas::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -90px;
  right: -45px;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(244,207,67,.15);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(31,143,84,.04), 0 0 0 38px rgba(27,111,174,.035);
}
.culture-portrait-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.culture-portrait-head h2 { margin: 0; color: #fff7d0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.06em; }
.culture-portrait-head p:not(.eyebrow) { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.culture-portrait-controls { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.culture-portrait-note { max-width: 780px; margin: 16px 0 18px; padding: 9px 11px; border-left: 2px solid var(--tz-gold); color: #b8cbb9; background: rgba(244,207,67,.045); font-size: 10px; line-height: 1.5; }
.culture-portrait-content { position: relative; z-index: 1; }
.culture-portrait-atlas.is-collapsed { padding: 14px 18px; }
.culture-portrait-atlas.is-collapsed .culture-portrait-content { display: none; }
.culture-portrait-atlas.is-collapsed .culture-portrait-head { min-height: 38px; align-items: center; }
.culture-portrait-atlas.is-collapsed .culture-portrait-head p:not(.eyebrow) { display: none; }
.culture-portrait-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.culture-portrait-card { min-width: 0; overflow: hidden; border: 1px solid rgba(184,255,190,.18); border-radius: 9px; background: linear-gradient(160deg, rgba(9,28,21,.94), rgba(2,9,8,.92)); box-shadow: 0 14px 28px rgba(0,0,0,.2); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.culture-portrait-card:hover { transform: translateY(-4px); border-color: rgba(244,207,67,.55); box-shadow: 0 20px 34px rgba(0,0,0,.28); }
.culture-portrait-visual { position: relative; height: 186px; overflow: hidden; background: #12271e; }
.culture-portrait-visual svg { display: block; width: 100%; height: 100%; }
.culture-portrait-visual::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 34px; background: linear-gradient(180deg, transparent, rgba(2,8,6,.7)); pointer-events: none; }
.portrait-floating-vector { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(244,207,67,.65); border-radius: 50%; background: rgba(2,8,6,.46); color: var(--tz-gold); font-family: Georgia, serif; font-size: 20px; text-shadow: 0 0 12px currentColor; animation: portrait-vector-float 5.5s ease-in-out infinite; }
.portrait-vector-label { position: absolute; z-index: 2; right: 10px; bottom: 8px; color: rgba(255,247,208,.72); font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.portrait-motif { transform-box: fill-box; transform-origin: center; animation: portrait-motif-drift 6s ease-in-out infinite; }
.vector-shield { animation-delay: -1.1s; }.vector-rock { animation-delay: -2.2s; }.vector-clicks { animation-delay: -3.4s; }.vector-sun { animation-delay: -4.1s; }.vector-ifa { animation-delay: -1.8s; }.vector-adinkra { animation-delay: -3s; }.vector-tifinagh { animation-delay: -4.8s; }
.culture-portrait-card-body { padding: 13px 13px 14px; }
.culture-portrait-card-head { display: flex; align-items: flex-start; gap: 9px; }
.portrait-index { color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; }
.culture-portrait-card h3 { margin: 0; color: #fff7d0; font-size: 14px; letter-spacing: -.02em; }
.culture-portrait-card-head small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.3; }
.culture-portrait-card blockquote { margin: 13px 0 11px; color: var(--text); font-size: 12px; font-weight: 750; line-height: 1.4; }
.portrait-fact, .portrait-document { margin: 8px 0 0; color: #9eb4a2; font-size: 9px; line-height: 1.5; }
.portrait-fact b, .portrait-document b { color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
@keyframes portrait-vector-float { 0%, 100% { transform: translate3d(0,0,0) rotate(-7deg); } 50% { transform: translate3d(6px,-9px,0) rotate(8deg); } }
@keyframes portrait-motif-drift { 0%, 100% { transform: translate3d(0,0,0) rotate(-1deg); opacity: .78; } 50% { transform: translate3d(4px,-5px,0) rotate(2deg); opacity: 1; } }
@media (max-width: 1120px) { .culture-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .culture-portrait-atlas { margin-top: 12px; padding: 17px; }
  .culture-portrait-atlas.is-collapsed { padding: 12px 14px; }
  .culture-portrait-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .culture-portrait-controls { justify-content: space-between; }
  .culture-portrait-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .culture-portrait-visual { height: 145px; }
  .culture-portrait-card-body { padding: 10px; }
  .culture-portrait-card h3 { font-size: 12px; }
  .culture-portrait-card blockquote { font-size: 10px; }
  .portrait-fact, .portrait-document { font-size: 8px; }
}
@media (max-width: 430px) {
  .culture-portrait-grid { grid-template-columns: 1fr; }
  .culture-portrait-visual { height: 190px; }
  .culture-portrait-atlas.is-collapsed .culture-portrait-head { flex-direction: row; align-items: center; }
  .culture-portrait-atlas.is-collapsed .culture-portrait-controls { width: auto; }
  .culture-portrait-atlas.is-collapsed .gallery-stamp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-floating-vector, .portrait-motif { animation: none; }
}

/* Culture badges are reference buttons, not passive decorations. */
.culture-label-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.culture-label-button:hover,
.culture-label-button:focus-visible {
  border-color: var(--badge-color, var(--tz-gold));
  color: #fff7d0;
  transform: translateY(-3px) rotate(-1deg);
}
.custom-label-symbol { color: var(--badge-color, var(--tz-gold)); font-size: 19px; line-height: 1; }
.culture-reference-modal { width: min(700px, 100%); }
.culture-reference-modal h2 { max-width: 560px; }
.culture-reference-block { margin-top: 14px; padding: 14px 15px; border: 1px solid rgba(244,207,67,.2); border-left: 2px solid var(--tz-gold); border-radius: 7px; background: rgba(244,207,67,.035); }
.culture-reference-block b { color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.culture-reference-block p { margin: 7px 0 0; color: #b9cbb9; font-size: 12px; line-height: 1.65; }
.culture-reference-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--dim); font-size: 10px; }
.culture-source-link { color: var(--green); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 800; text-decoration: none; }
.culture-source-link:hover { color: var(--tz-gold); text-decoration: underline; }

/* A short Z assembly makes the document-opening interaction feel intentional
   without delaying the rest of the page. */
.z-transition { position: fixed; z-index: 7; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(27,111,174,.22), rgba(2,7,5,.96) 62%); color: var(--text); }
.z-transition::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0 47%, rgba(244,207,67,.18) 48% 49%, transparent 50% 100%); animation: z-transition-wash .72s ease-out both; }
.z-transition-track { position: absolute; inset: 0; overflow: hidden; }
.z-transition-track span { position: absolute; left: -80px; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid var(--tz-gold); border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--tz-green), var(--tz-blue)); clip-path: polygon(0 0, 100% 0, 100% 25%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 75%, 50% 50%, 0 25%); font-family: ui-monospace, monospace; font-size: 27px; font-style: italic; font-weight: 950; text-shadow: 2px 2px 0 var(--tz-black); animation: z-transition-run .72s cubic-bezier(.2,.8,.2,1) both; }
.z-transition-track span:nth-child(1) { top: 27%; animation-delay: -.08s; }
.z-transition-track span:nth-child(2) { top: 39%; animation-delay: .04s; background: linear-gradient(145deg, var(--tz-blue), var(--tz-green)); }
.z-transition-track span:nth-child(3) { top: 51%; animation-delay: .16s; background: linear-gradient(145deg, var(--tz-black), var(--tz-gold)); }
.z-transition-track span:nth-child(4) { top: 63%; animation-delay: .28s; background: linear-gradient(145deg, var(--tz-gold), var(--tz-blue)); }
.z-transition > strong { position: relative; z-index: 1; color: #fff7d0; font-family: ui-monospace, monospace; font-size: clamp(80px, 18vw, 160px); font-style: italic; text-shadow: 7px 7px 0 var(--tz-black), -3px -3px 0 var(--tz-gold); animation: z-transition-mark .72s ease-in-out both; }
.z-transition > small { position: absolute; right: 20px; bottom: 24px; left: 20px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
@keyframes z-transition-run { 0% { transform: translateX(0) rotate(-18deg) scale(.5); opacity: 0; } 16% { opacity: 1; } 72% { transform: translateX(58vw) rotate(4deg) scale(1); opacity: 1; } 100% { transform: translateX(112vw) rotate(12deg) scale(.3); opacity: 0; } }
@keyframes z-transition-mark { 0% { opacity: 0; transform: scale(.3) rotate(-22deg); } 48% { opacity: 1; transform: scale(1.08) rotate(7deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes z-transition-wash { from { opacity: 0; transform: translateX(-18%); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 760px) {
  .culture-reference-block p { font-size: 11px; }
  .culture-reference-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .z-transition::before, .z-transition-track span, .z-transition > strong { animation: none; }
  .z-transition-track span { left: 15%; opacity: .75; }
  .z-transition-track span:nth-child(2) { left: 34%; }.z-transition-track span:nth-child(3) { left: 53%; }.z-transition-track span:nth-child(4) { left: 72%; }
}

/* Botanical Zaconchan identity: a sculpted Z mark leads into a living
   wordmark, with a spiral vine, sequential leaf glints, and a small bird
   perched on the first c. */
.brand-glyph {
  position: relative;
  isolation: isolate;
  flex: 0 0 55px;
  width: 55px;
  height: 45px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background:
    linear-gradient(145deg, var(--tz-green) 0 43%, var(--tz-gold) 44% 49%, var(--tz-black) 50% 60%, var(--tz-gold) 61% 66%, var(--tz-blue) 67% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 55% 50%, 100% 75%, 100% 100%, 0 100%, 0 75%, 45% 50%, 0 25%);
  font-size: 0;
  transform: rotate(-5deg) skew(-4deg);
  filter: drop-shadow(5px 7px 0 rgba(255,121,198,.22)) drop-shadow(0 0 15px rgba(244,207,67,.3));
}
.brand-glyph::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -3px;
  border: 2px solid rgba(244,207,67,.85);
  clip-path: inherit;
  opacity: .72;
  animation: z-mark-breathe 4.2s ease-in-out infinite;
}
.brand-glyph::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -28%;
  bottom: -28%;
  left: -46%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  transform: rotate(29deg);
  animation: z-mark-glint 6.5s ease-in-out infinite;
}
.brand-wordmark {
  position: relative;
  display: block;
  min-width: 145px;
  color: var(--text);
}
.brand-wordmark-art {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-height: 25px;
  padding: 3px 4px 3px 0;
  color: #fff7d0;
  letter-spacing: -.1em;
}
.brand-letter {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: #fff7d0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(2,7,5,.85), 0 0 11px rgba(244,207,67,.14);
  animation: wordmark-letter-glow 5.2s ease-in-out infinite;
}
.brand-letter-z { color: var(--green); font-size: 20px; }
.brand-letter:nth-child(2) { animation-delay: -.8s; }
.brand-letter:nth-child(3) { animation-delay: -1.6s; }
.brand-letter:nth-child(4) { animation-delay: -2.4s; }
.brand-letter:nth-child(5) { animation-delay: -3.2s; }
.brand-letter:nth-child(6) { animation-delay: -4s; }
.brand-letter:nth-child(7) { animation-delay: -4.8s; }
.brand-letter:nth-child(8) { animation-delay: -1.2s; }
.brand-letter:nth-child(9) { animation-delay: -2s; }
.brand-letter::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 52%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 7px var(--green);
  opacity: 0;
  animation: letter-sparkle 5.2s ease-in-out infinite;
}
.brand-letter:nth-child(2)::after { animation-delay: -.8s; }
.brand-letter:nth-child(3)::after { animation-delay: -1.6s; }
.brand-letter:nth-child(4)::after { animation-delay: -2.4s; }
.brand-letter:nth-child(5)::after { animation-delay: -3.2s; }
.brand-letter:nth-child(6)::after { animation-delay: -4s; }
.brand-letter:nth-child(7)::after { animation-delay: -4.8s; }
.brand-letter:nth-child(8)::after { animation-delay: -1.2s; }
.brand-letter:nth-child(9)::after { animation-delay: -2s; }
.brand-letter-perch { padding-top: 7px; }
.brand-bird {
  position: absolute;
  z-index: 6;
  top: -14px;
  left: 48%;
  display: block;
  width: 21px;
  height: 17px;
  color: var(--tz-gold);
  transform: translateX(-35%) rotate(-4deg);
  filter: drop-shadow(1px 2px 0 rgba(2,7,5,.8));
  animation: bird-balance 4.8s ease-in-out infinite;
}
.brand-bird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-vine {
  position: absolute;
  z-index: 4;
  inset: -10px -7px -8px -5px;
  pointer-events: none;
}
.brand-vine svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vine-stem {
  fill: none;
  stroke: var(--tz-green);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 4 2;
  filter: drop-shadow(0 0 2px rgba(168,255,120,.5));
  animation: vine-trace 7s ease-in-out infinite;
}
.vine-leaf { transform-box: fill-box; transform-origin: center; animation: leaf-turn 5.2s ease-in-out infinite; }
.vine-leaf path:first-child { fill: var(--green); stroke: rgba(2,7,5,.65); stroke-width: .55; }
.vine-leaf path:last-child { fill: none; stroke: #d7ffad; stroke-width: .55; stroke-linecap: round; opacity: .75; }
.leaf-1 { animation-delay: -.4s; }.leaf-2 { animation-delay: -1.4s; }.leaf-3 { animation-delay: -2.4s; }.leaf-4 { animation-delay: -3.4s; }.leaf-5 { animation-delay: -4.4s; }
@keyframes z-mark-breathe { 0%, 100% { opacity: .58; transform: scale(.98); } 50% { opacity: .95; transform: scale(1.02); } }
@keyframes z-mark-glint { 0%, 56% { transform: translateX(0) rotate(29deg); opacity: 0; } 70% { opacity: .9; } 82%, 100% { transform: translateX(470%) rotate(29deg); opacity: 0; } }
@keyframes wordmark-letter-glow { 0%, 100% { color: #fff7d0; transform: translateY(0); } 48% { color: #eaffc8; transform: translateY(-1px); } }
@keyframes letter-sparkle { 0%, 63% { opacity: 0; transform: scale(.3); } 73% { opacity: 1; transform: scale(1.4); } 84%, 100% { opacity: 0; transform: scale(.4) translateY(-5px); } }
@keyframes vine-trace { 0%, 12% { stroke-dashoffset: 60; opacity: .35; } 48% { opacity: 1; } 72%, 100% { stroke-dashoffset: 0; opacity: .75; } }
@keyframes leaf-turn { 0%, 100% { opacity: .55; transform: rotate(-8deg) scale(.86); } 52% { opacity: 1; transform: rotate(7deg) scale(1.08); } }
@keyframes bird-balance { 0%, 100% { transform: translateX(-35%) rotate(-4deg) translateY(0); } 50% { transform: translateX(-35%) rotate(3deg) translateY(-2px); } }
@media (max-width: 760px) {
  .brand-glyph { flex-basis: 45px; width: 45px; height: 38px; }
  .brand-wordmark { min-width: 130px; }
  .brand-letter { font-size: 16px; }
  .brand-letter-z { font-size: 18px; }
  .brand-wordmark-art { min-height: 22px; }
  .brand-vine { inset: -8px -5px -7px -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-glyph::before, .brand-glyph::after, .brand-letter, .brand-letter::after, .vine-stem, .vine-leaf, .brand-bird { animation: none; }
}

/* Final Tanzania flag Z refinement: a longer, unmistakable Z silhouette with
   two clean gold borders around the black diagonal, matching the flag's
   green upper field and blue lower field. */
.brand-glyph {
  flex-basis: 68px;
  width: 68px;
  height: 48px;
  background:
    linear-gradient(145deg,
      var(--tz-green) 0 38%,
      var(--tz-gold) 38% 44%,
      var(--tz-black) 44% 56%,
      var(--tz-gold) 56% 62%,
      var(--tz-blue) 62% 100%);
  clip-path: polygon(
    0 0, 100% 0, 100% 25%,
    55% 50%,
    100% 75%, 100% 100%, 0 100%, 0 75%,
    45% 50%,
    0 25%
  );
  transform: rotate(-3deg) skew(-2deg);
  filter: drop-shadow(5px 7px 0 rgba(255,121,198,.2)) drop-shadow(0 0 16px rgba(244,207,67,.32));
}
.brand-glyph::before {
  inset: -2px;
  border: 2px solid rgba(244,207,67,.92);
  opacity: .82;
}
.brand-glyph::after {
  left: -52%;
  width: 17%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
@media (max-width: 760px) {
  .brand-glyph {
    flex-basis: 55px;
    width: 55px;
    height: 40px;
  }
}

/* Globe Z identity mark: the globe stays still while a small sunset-like
   flock crosses above it. The flag band is deliberately rendered as two
   equal gold edges with a black centre, rather than as a soft gradient. */
.brand-glyph {
  display: block;
  position: relative;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  clip-path: circle(50% at 50% 50%);
  filter: drop-shadow(4px 6px 0 rgba(255,121,198,.18)) drop-shadow(0 0 13px rgba(244,207,67,.28));
  transform: none;
}
.brand-glyph::before,
.brand-glyph::after { display: none; }
.brand-globe {
  display: block;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}
.brand-globe-surface { shape-rendering: geometricPrecision; }
.brand-globe-rim { filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.brand-z-outline { filter: drop-shadow(1px 1px 0 rgba(0,0,0,.75)); }
.brand-z-core { opacity: .85; }
.brand-flock { transform-box: fill-box; transform-origin: center; animation: brand-flock-flight 6.8s ease-in-out infinite; }
.brand-bird-shade { stroke: var(--tz-gold); stroke-width: 1.8; opacity: .8; filter: drop-shadow(0 1px 1px rgba(17,22,26,.7)); }
.brand-bird-shade-1 { animation: brand-bird-fade 6.8s ease-in-out infinite; }
.brand-bird-shade-2 { stroke: #ffb86b; animation: brand-bird-fade 6.8s ease-in-out infinite -2.2s; }
.brand-bird-shade-3 { stroke: #fff7d0; animation: brand-bird-fade 6.8s ease-in-out infinite -4.4s; }
@keyframes brand-flock-flight {
  0%, 100% { transform: translate3d(-2px, 1px, 0); }
  50% { transform: translate3d(3px, -2px, 0); }
}
@keyframes brand-bird-fade {
  0%, 100% { opacity: .22; transform: translate3d(-1px, 2px, 0) scale(.9); }
  45%, 68% { opacity: .95; transform: translate3d(1px, -1px, 0) scale(1); }
}
@media (max-width: 760px) {
  .brand-glyph { flex-basis: 46px; width: 46px; height: 46px; }
  .brand-globe { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-flock, .brand-bird-shade-1, .brand-bird-shade-2, .brand-bird-shade-3 { animation: none; }
}

/* Firefox-safe circular clipping for the header globe. The radial mask is a
   second guard so no rectangular SVG backing can show outside the mark. */
.brand-glyph {
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0 49%, transparent 50%);
  mask-image: radial-gradient(circle at center, #000 0 49%, transparent 50%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.brand-globe {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  background: transparent;
}
.brand-globe-surface { clip-path: url(#brandGlobeClip); }

/* Africa atmospheric backdrop and timezone-aware theme management. The
   silhouette remains behind the page chrome, breathing between a quiet trace
   and a deeper ink wash without competing with readable content. */
:root {
  --africa-ink: #000b08;
  --africa-edge: rgba(168,255,120,.42);
  --africa-opacity: .19;
  --theme-switch-bg: rgba(8,18,15,.82);
}
html, body { transition: background-color .45s ease, color .45s ease; }
#africa-atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--africa-opacity);
  transition: opacity 1.2s ease;
}
.africa-atmosphere-art {
  width: min(76vw, 980px);
  height: min(116vh, 1040px);
  overflow: visible;
  transform: translate3d(2vw, 2vh, 0) rotate(-3deg);
  filter: drop-shadow(0 0 28px rgba(0,0,0,.18));
  animation: africa-float 24s ease-in-out infinite alternate;
}
.africa-silhouette {
  fill: var(--africa-ink);
  opacity: .72;
  animation: africa-breathe 19s ease-in-out infinite alternate;
}
.madagascar-silhouette { fill: var(--africa-ink); opacity: .44; }
.africa-contour {
  fill: none;
  stroke: var(--africa-edge);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 17;
  opacity: .28;
  animation: africa-contour-drift 14s linear infinite;
}
body[data-theme="dark"] { --africa-opacity: .25; }
body[data-theme="light"] {
  --africa-ink: #102d24;
  --africa-edge: rgba(19,91,63,.32);
  --africa-opacity: .1;
  --theme-switch-bg: rgba(255,255,255,.84);
}
body[data-theme="light"] #africa-atmosphere { mix-blend-mode: multiply; }
body[data-theme="dark"] #africa-atmosphere { mix-blend-mode: normal; }
body[data-theme="light"] #tree-philosophy { opacity: .12; }
body[data-theme="light"]::before { opacity: .1; }
body[data-theme="light"]::after { opacity: .08; }
body[data-theme="light"] .profile-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .signal-card,
body[data-theme="light"] .trending-card,
body[data-theme="light"] .manifesto,
body[data-theme="light"] .library-card,
body[data-theme="light"] .thread-card {
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(235,245,238,.9));
  box-shadow: 0 14px 40px rgba(25,65,45,.1);
}
body[data-theme="light"] .board-hero {
  background: linear-gradient(145deg, rgba(224,244,228,.9), rgba(218,238,248,.82));
}
body[data-theme="light"] .modal-card { background: linear-gradient(145deg, #ffffff, #eaf4ed); }
body[data-theme="light"] .search-wrap,
body[data-theme="light"] .inline-reply-form textarea,
body[data-theme="light"] .profile-form textarea,
body[data-theme="light"] .identity-form input,
body[data-theme="light"] .identity-form select,
body[data-theme="light"] .badge-voucher-form input,
body[data-theme="light"] .reply-form textarea { background: rgba(255,255,255,.76); }
body[data-theme="light"] .thread-body,
body[data-theme="light"] .reply p { color: #365344; }
body[data-theme="light"] .thread-empty-room { background: linear-gradient(90deg, rgba(31,110,68,.05), rgba(31,110,68,.015)); border-color: rgba(31,110,68,.25); }
body[data-theme="light"] .thread-empty-room-glyph { background: rgba(31,110,68,.08); border-color: rgba(31,110,68,.3); color: #1f6e44; }
body[data-theme="light"] .thread-empty-room-text { color: #4d6a5b; }
.theme-switcher { display: flex; align-items: center; gap: 7px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.theme-switcher select { min-height: 32px; max-width: 142px; padding: 0 7px; border: 1px solid rgba(244,207,67,.3); border-radius: 5px; outline: 0; background: var(--theme-switch-bg); color: var(--text); font-family: inherit; font-size: 10px; cursor: pointer; }
.theme-switcher select:hover { border-color: var(--tz-gold); }
@keyframes africa-breathe { from { opacity: .34; } to { opacity: .92; } }
@keyframes africa-float { from { transform: translate3d(2vw, 2vh, 0) rotate(-3deg) scale(.98); } to { transform: translate3d(-1vw, -1vh, 0) rotate(1deg) scale(1.04); } }
@keyframes africa-contour-drift { to { stroke-dashoffset: -54px; } }
@media (max-width: 1120px) {
  .top-actions { gap: 10px; }
  .theme-switcher select { max-width: 124px; }
}
@media (max-width: 760px) {
  .theme-switcher > span { display: none; }
  .theme-switcher select { min-height: 36px; max-width: 116px; }
  .africa-atmosphere-art { width: 110vw; height: 104vh; transform: translate3d(5vw, 3vh, 0) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  #africa-atmosphere, .africa-atmosphere-art, .africa-silhouette, .africa-contour { animation: none; }
}

/* The animated Living Horizon is a quiet window by default. Its header
   remains visible as a touch-friendly control so the full pastoral scene can
   be opened without taking over the board. */
.culture-cover-controls {
  position: absolute;
  z-index: 6;
  top: 16px;
  right: 16px;
  display: flex;
  justify-content: flex-end;
}
.culture-cover-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(168,255,120,.38);
  border-radius: 6px;
  background: rgba(2,8,6,.58);
  color: var(--green);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.culture-cover-toggle:hover {
  border-color: var(--green);
  background: rgba(2,8,6,.78);
  transform: translateY(-1px);
}
.culture-cover-toggle-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
}
.culture-cover.is-collapsed {
  min-height: 0;
  padding: 0;
  background: linear-gradient(135deg, rgba(16,35,27,.86), rgba(27,111,174,.1));
}
.culture-cover.is-collapsed .culture-cover-art,
.culture-cover.is-collapsed .walking-sticker-scene,
.culture-cover.is-collapsed .z-flag-procession,
.culture-cover.is-collapsed .culture-motto,
.culture-cover.is-collapsed .culture-sticker-rail {
  display: none;
}
.culture-cover.is-collapsed::before,
.culture-cover.is-collapsed::after {
  display: none;
}
.culture-cover.is-collapsed .culture-cover-content {
  max-width: none;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 170px 14px 18px;
}
.culture-cover.is-collapsed .culture-cover-content .eyebrow {
  margin: 0;
  white-space: nowrap;
}
.culture-cover.is-collapsed .culture-cover-content h2 {
  margin: 0;
  font-size: 20px;
  white-space: nowrap;
}
.culture-cover.is-collapsed .culture-cover-content > p,
.culture-cover.is-collapsed .culture-cover-note {
  display: none;
}
@media (max-width: 760px) {
  .culture-cover-controls { top: 11px; right: 11px; }
  .culture-cover-toggle { min-height: 38px; padding: 0 9px; }
  .culture-cover.is-collapsed .culture-cover-content {
    min-height: 64px;
    gap: 8px;
    padding: 12px 142px 12px 14px;
  }
  .culture-cover.is-collapsed .culture-cover-content .eyebrow {
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .culture-cover.is-collapsed .culture-cover-content h2 { font-size: 18px; }
}
@media (max-width: 420px) {
  .culture-cover.is-collapsed .culture-cover-content { padding-right: 132px; }
  .culture-cover-toggle span:last-child { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .culture-cover-toggle:hover { transform: none; }
}

/* Lightweight post formatting and private custom sticker shelf. The source
   remains plain text with safe markdown-like markers; only the escaped output
   receives these visual treatments. */
.composer-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: -2px 0 7px;
}
.format-button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(168,255,120,.035);
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
}
.format-button:hover, .format-button:focus-visible {
  border-color: var(--green);
  color: var(--green);
  background: rgba(168,255,120,.1);
}
.format-button span:first-child { font-family: ui-monospace, monospace; font-weight: 900; }
.format-italic span:first-child { font-family: Georgia, serif; font-size: 15px; font-style: italic; }
.format-button-label { margin-left: 4px; font-size: 9px; }
.sticker-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(244,207,67,.18);
  border-radius: 6px;
  background: rgba(244,207,67,.035);
}
.inline-reply-form .composer-tools,
.inline-reply-form .sticker-picker { flex: 0 0 100%; }
.reply-form .composer-tools,
.reply-form .sticker-picker { width: 100%; }
.sticker-picker-label {
  color: var(--tz-gold);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sticker-choice-list { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.sticker-choice, .sticker-create-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(2,8,6,.35);
  color: var(--text);
  cursor: pointer;
}
.sticker-choice:hover, .sticker-create-link:hover { border-color: var(--tz-gold); color: var(--tz-gold); }
.sticker-choice > span { font-size: 16px; line-height: 1; }
.sticker-choice small { color: var(--muted); font-size: 9px; }
.sticker-create-link { color: var(--green); font-size: 9px; font-weight: 800; }
.sticker-empty { color: var(--dim); font-size: 9px; }
.inline-sticker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  margin: 0 3px;
  padding: 2px 7px 2px 4px;
  border: 1px solid var(--sticker-color, var(--tz-gold));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sticker-color, var(--tz-gold)) 12%, transparent);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.inline-sticker > span { font-size: 17px; line-height: 1; }
.inline-sticker small { color: var(--sticker-color, var(--tz-gold)); font-size: 9px; font-weight: 800; }
.formatted-code {
  padding: 2px 5px;
  border: 1px solid rgba(139,217,253,.25);
  border-radius: 4px;
  background: rgba(27,111,174,.13);
  color: #8bd9fd;
  font-family: ui-monospace, monospace;
  font-size: .92em;
}
.formatted-quote, .formatted-list-item {
  display: inline-block;
  padding-left: 9px;
  border-left: 2px solid var(--tz-gold);
  color: #fff7d0;
}
.formatted-list-item { border-left-color: var(--green); }
.thread-body strong, .reply p strong { color: #fff7d0; font-weight: 850; }
.thread-body em, .reply p em { color: #b7e9c0; }
.thread-body del, .reply p del { color: var(--muted); }
.sticker-studio-open { width: 100%; min-height: 36px; margin-top: 12px; font-size: 10px; }
.sticker-studio-modal { width: min(640px, 100%); }
.sticker-form-row { display: grid; grid-template-columns: minmax(110px, .55fr) 1fr; gap: 13px; }
.sticker-color-field input { width: 100%; height: 40px; padding: 3px; cursor: pointer; }
.sticker-studio-library { margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); }
.sticker-library-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; }
.sticker-library-heading span { color: var(--tz-gold); }
.sticker-library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sticker-library-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(168,255,120,.025); }
.sticker-library-item > div { min-width: 0; flex: 1; }
.sticker-library-item strong, .sticker-library-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticker-library-item strong { color: var(--text); font-size: 11px; }
.sticker-library-item small { margin-top: 3px; color: var(--dim); font-family: ui-monospace, monospace; font-size: 9px; }
.sticker-library-preview { display: grid; place-items: center; width: 39px; height: 33px; flex: 0 0 39px; border: 1px solid var(--sticker-color, var(--tz-gold)); border-radius: 9px; background: rgba(244,207,67,.08); font-size: 21px; }
.sticker-delete { flex: 0 0 auto; color: var(--pink); }
.sticker-share-section { margin-top: 23px; padding-top: 17px; border-top: 1px solid var(--line); }
.sticker-share-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 0 16px; }
.sticker-share-form .modal-field { flex: 1; min-width: 140px; }
.sticker-share-form .upload-field { flex: 1; min-width: 160px; }
.board-sticker-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.board-sticker-gallery-item { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(168,255,120,.025); }
.board-sticker-gallery-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.board-sticker-gallery-item figcaption { max-width: 100%; overflow: hidden; color: var(--dim); font-family: ui-monospace, monospace; font-size: 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
body[data-theme="light"] .sticker-picker, body[data-theme="light"] .sticker-library-item { background: rgba(255,255,255,.55); }
body[data-theme="light"] .formatted-quote, body[data-theme="light"] .formatted-list-item { color: #244936; }
@media (max-width: 760px) {
  .format-button-label { display: none; }
  .format-button { width: 34px; padding: 0; }
  .sticker-picker { align-items: flex-start; flex-direction: column; }
  .sticker-choice-list { width: 100%; }
  .sticker-library-list { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .sticker-form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .format-button:hover, .sticker-choice:hover, .sticker-create-link:hover { transform: none; }
}

/* The share control stays visible while a thread card is minimized. */
.thread-share-button {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(244,207,67,.32);
  border-radius: 4px;
  background: rgba(244,207,67,.045);
}
.thread-share-button:hover { border-color: var(--tz-gold); background: rgba(244,207,67,.1); }
@media (max-width: 420px) {
  .thread-share-button { width: 30px; justify-content: center; padding: 0; }
  .thread-share-button span { display: none; }
}

/* Warm glass light theme: creamy, slightly peach-tinted surfaces replace
   clinical white while preserving strong contrast for reading and controls. */
body[data-theme="light"] {
  --bg: #f3e6d3;
  --panel: #f8eddd;
  --panel-2: #f6e7d2;
  --line: rgba(108, 76, 48, .18);
  --line-strong: rgba(155, 101, 48, .38);
  --text: #2e241d;
  --muted: #705c4d;
  --dim: #927b68;
  --green: #236d46;
  --green-dark: #d6e4d2;
  --pink: #ad4f73;
  --amber: #a9621d;
  --theme-switch-bg: rgba(255, 248, 237, .72);
  color-scheme: light;
  background:
    radial-gradient(circle at 84% 5%, rgba(245, 183, 119, .28), transparent 28%),
    radial-gradient(circle at 7% 76%, rgba(111, 181, 135, .18), transparent 30%),
    linear-gradient(145deg, #f7ecdc, #f0dfc8 58%, #f6e9d8);
  color: var(--text);
}
body[data-theme="light"]::before {
  opacity: .16;
  background-image: linear-gradient(rgba(111, 74, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 74, 42, .035) 1px, transparent 1px);
}
body[data-theme="light"]::after { opacity: .055; }
body[data-theme="light"] .topbar::after { background: linear-gradient(90deg, #4d9a62, #d29a49, #5a9ac0); opacity: .7; }
body[data-theme="light"] .profile-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .signal-card,
body[data-theme="light"] .trending-card,
body[data-theme="light"] .manifesto,
body[data-theme="light"] .library-card,
body[data-theme="light"] .thread-card {
  border-color: rgba(108, 76, 48, .18);
  background: linear-gradient(145deg, rgba(255, 249, 239, .78), rgba(244, 228, 207, .66));
  box-shadow: 0 14px 40px rgba(114, 75, 41, .12), inset 0 1px rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body[data-theme="light"] .board-hero {
  border-color: rgba(155, 101, 48, .28);
  background:
    radial-gradient(circle at 78% 45%, rgba(235, 166, 94, .2), transparent 31%),
    linear-gradient(135deg, rgba(225, 242, 220, .72), rgba(255, 246, 228, .82) 54%, rgba(220, 235, 244, .68));
  box-shadow: 0 24px 65px rgba(114, 75, 41, .13), inset 0 1px rgba(255, 255, 255, .72);
}
body[data-theme="light"] .modal-backdrop { background: rgba(77, 52, 34, .42); }
body[data-theme="light"] .modal-card {
  border-color: rgba(155, 101, 48, .32);
  background: linear-gradient(145deg, rgba(255, 249, 239, .94), rgba(244, 228, 207, .94));
  box-shadow: 0 25px 80px rgba(82, 54, 32, .24), inset 0 1px rgba(255, 255, 255, .75);
}
body[data-theme="light"] .search-wrap,
body[data-theme="light"] .inline-reply-form textarea,
body[data-theme="light"] .profile-form textarea,
body[data-theme="light"] .identity-form input,
body[data-theme="light"] .identity-form select,
body[data-theme="light"] .badge-voucher-form input,
body[data-theme="light"] .reply-form textarea,
body[data-theme="light"] .modal-field input,
body[data-theme="light"] .modal-field textarea,
body[data-theme="light"] .modal-field select {
  border-color: rgba(108, 76, 48, .2);
  background: rgba(255, 250, 242, .72);
  color: var(--text);
  box-shadow: inset 0 1px rgba(255, 255, 255, .58);
}
body[data-theme="light"] .search-wrap { color: var(--dim); }
body[data-theme="light"] .search-wrap input::placeholder { color: #9a806d; }
body[data-theme="light"] .inline-field input,
body[data-theme="light"] .upload-field,
body[data-theme="light"] .reply-media-input + label { background: rgba(255, 250, 242, .72); color: var(--text); }
body[data-theme="light"] .thread-body,
body[data-theme="light"] .reply p { color: #4d3d31; }
body[data-theme="light"] .thread-card:hover { border-color: rgba(155, 101, 48, .42); box-shadow: 0 16px 35px rgba(114, 75, 41, .16); }
body[data-theme="light"] .thread-accent { background: linear-gradient(var(--green), var(--tz-gold), #5a9ac0); }
body[data-theme="light"] .button-secondary,
body[data-theme="light"] .channel-link,
body[data-theme="light"] .library-link,
body[data-theme="light"] .trend-item { color: var(--text); }
body[data-theme="light"] .button-secondary { background: rgba(255, 249, 239, .58); border-color: var(--line-strong); }
body[data-theme="light"] .channel-link:hover { background: rgba(35, 109, 70, .08); }
body[data-theme="light"] .channel-link.is-active { background: linear-gradient(90deg, rgba(35, 109, 70, .13), transparent); }
body[data-theme="light"] .post-media { background: #ead6bc; border-color: rgba(108, 76, 48, .2); }
body[data-theme="light"] .post-media video { background: #30251d; }
body[data-theme="light"] .toast { background: rgba(255, 249, 239, .94); color: var(--text); box-shadow: 0 12px 30px rgba(82, 54, 32, .18); }
body[data-theme="light"] .toast[data-tone="error"] { color: #8c2e53; }
body[data-theme="light"] .theme-switcher select,
body[data-theme="light"] .language-switcher select { border-color: rgba(155, 101, 48, .32); background: var(--theme-switch-bg); color: var(--text); }
body[data-theme="light"] .tag-pill { border-color: rgba(54, 125, 157, .34); background: rgba(77, 154, 192, .12); color: #24627c; }
body[data-theme="light"] .formatted-code { background: rgba(77, 154, 192, .12); color: #24627c; }
body[data-theme="light"] .culture-floater,
body[data-theme="light"] .culture-motto,
body[data-theme="light"] .culture-sticker,
body[data-theme="light"] .culture-cover-toggle { background: rgba(255, 246, 231, .78); color: var(--text); }
body[data-theme="light"] .culture-floater strong,
body[data-theme="light"] .culture-motto-head b { color: var(--text); }
body[data-theme="light"] .culture-floater p,
body[data-theme="light"] .culture-motto small { color: var(--muted); }
body[data-theme="light"] .boot-state { background: linear-gradient(135deg, rgba(220, 241, 220, .72), rgba(255, 246, 228, .78), rgba(220, 235, 244, .68)); color: var(--muted); }
body[data-theme="light"] .boot-state strong { color: var(--text); }
body[data-theme="light"] .agreement-modal .agreement-details { background: rgba(255, 249, 239, .62); }
body[data-theme="light"] .profile-avatar .author-flag { background: rgba(255, 249, 239, .86); }
body[data-theme="light"] .inline-sticker { background: rgba(255, 249, 239, .52); }

/* High-contrast creamy glass finish: the warm light surface is intentionally
   more saturated than white so dark typography, borders, and controls stay
   distinct at a glance. */
body[data-theme="light"] {
  --bg: #edc99d;
  --panel: #f8dfbd;
  --panel-2: #f4d3aa;
  --line: rgba(82, 52, 31, .25);
  --line-strong: rgba(117, 69, 31, .5);
  --text: #2b1e16;
  --muted: #624733;
  --dim: #80634b;
  --green: #1f6e44;
  --green-dark: #cfe1d4;
  --pink: #ad3f63;
  --amber: #a85a14;
  --theme-switch-bg: rgba(255, 239, 214, .9);
  background:
    radial-gradient(circle at 88% 4%, rgba(236, 143, 70, .42), transparent 29%),
    radial-gradient(circle at 5% 72%, rgba(64, 139, 88, .25), transparent 31%),
    radial-gradient(circle at 52% 42%, rgba(255, 246, 222, .48), transparent 44%),
    linear-gradient(145deg, #f5dcb9 0%, #e9bd8b 54%, #f1d2a9 100%);
}
body[data-theme="light"]::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(93, 52, 24, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 52, 24, .055) 1px, transparent 1px);
}
body[data-theme="light"]::after { opacity: .04; }
body[data-theme="light"] .topbar { border-bottom-color: rgba(82, 52, 31, .25); }
body[data-theme="light"] .topbar::after { opacity: .95; }
body[data-theme="light"] .brand strong { color: #332217; text-shadow: none; }
body[data-theme="light"] .brand-wordmark-art,
body[data-theme="light"] .brand-letter { color: #503322; text-shadow: 1px 1px 0 rgba(255, 247, 224, .7); }
body[data-theme="light"] .brand-letter-z { color: #1f7048; }
body[data-theme="light"] .brand small { color: #70513a; }
body[data-theme="light"] .profile-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .signal-card,
body[data-theme="light"] .trending-card,
body[data-theme="light"] .manifesto,
body[data-theme="light"] .library-card,
body[data-theme="light"] .thread-card {
  border-color: rgba(82, 52, 31, .25);
  background: linear-gradient(145deg, rgba(255, 244, 225, .94), rgba(239, 202, 157, .88));
  box-shadow: 0 16px 38px rgba(98, 57, 27, .2), inset 0 1px rgba(255, 255, 255, .82);
}
body[data-theme="light"] .thread-card { border-left-color: rgba(117, 69, 31, .34); }
body[data-theme="light"] .board-hero {
  border-color: rgba(117, 69, 31, .42);
  background:
    radial-gradient(circle at 78% 45%, rgba(231, 133, 64, .32), transparent 32%),
    linear-gradient(135deg, rgba(210, 237, 207, .9), rgba(255, 234, 199, .96) 54%, rgba(193, 222, 234, .84));
  box-shadow: 0 24px 62px rgba(98, 57, 27, .2), inset 0 1px rgba(255, 255, 255, .9);
}
body[data-theme="light"] .modal-card {
  border-color: rgba(117, 69, 31, .48);
  background: linear-gradient(145deg, rgba(255, 246, 228, .98), rgba(239, 201, 156, .98));
  box-shadow: 0 25px 80px rgba(82, 49, 25, .32), inset 0 1px rgba(255, 255, 255, .9);
}
body[data-theme="light"] .search-wrap,
body[data-theme="light"] .inline-reply-form textarea,
body[data-theme="light"] .profile-form textarea,
body[data-theme="light"] .identity-form input,
body[data-theme="light"] .identity-form select,
body[data-theme="light"] .badge-voucher-form input,
body[data-theme="light"] .reply-form textarea,
body[data-theme="light"] .modal-field input,
body[data-theme="light"] .modal-field textarea,
body[data-theme="light"] .modal-field select,
body[data-theme="light"] .inline-field input,
body[data-theme="light"] .upload-field {
  border-color: rgba(82, 52, 31, .3);
  background: rgba(255, 247, 232, .9);
  color: #2b1e16;
  box-shadow: inset 0 1px rgba(255, 255, 255, .86), 0 2px 8px rgba(98, 57, 27, .06);
}
body[data-theme="light"] .search-wrap:focus-within,
body[data-theme="light"] .modal-field input:focus,
body[data-theme="light"] .modal-field textarea:focus,
body[data-theme="light"] .modal-field select:focus,
body[data-theme="light"] .profile-form textarea:focus,
body[data-theme="light"] .reply-form textarea:focus { border-color: #a55e25; box-shadow: 0 0 0 3px rgba(165, 94, 37, .14); }
body[data-theme="light"] .thread-title,
body[data-theme="light"] .author strong,
body[data-theme="light"] .feed-toolbar h2,
body[data-theme="light"] .modal-head h2,
body[data-theme="light"] .thread-modal > h2,
body[data-theme="light"] .trend-item strong { color: #2b1e16; }
body[data-theme="light"] .thread-body,
body[data-theme="light"] .reply p { color: #483225; }
body[data-theme="light"] .button-secondary { background: rgba(255, 241, 218, .88); border-color: rgba(117, 69, 31, .48); }
body[data-theme="light"] .post-media { background: #d9ad79; border-color: rgba(82, 52, 31, .3); }
body[data-theme="light"] .toast { background: rgba(255, 244, 225, .98); border-color: rgba(117, 69, 31, .48); box-shadow: 0 12px 30px rgba(82, 49, 25, .25); }
body[data-theme="light"] .modal-backdrop { background: rgba(74, 45, 27, .5); }
body[data-theme="light"] .channel-link:hover { background: rgba(35, 109, 70, .13); }
body[data-theme="light"] .channel-link.is-active { background: linear-gradient(90deg, rgba(35, 109, 70, .2), transparent); }

/* Automatic day-to-night transformation: the creamy surface warms and deepens
   at sunset, then hands the page to an ink-blue night scene. The phase comes
   from services/theme.js and changes without affecting manually selected
   Light or Dark mode. */
body[data-theme-mode="auto"] {
  transition: background-color 1.2s ease, color .8s ease;
}

body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"],
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] {
  --bg: #e6b47d;
  --panel: #f6d2a6;
  --panel-2: #f1c391;
  --line: rgba(76, 45, 25, .3);
  --line-strong: rgba(121, 64, 25, .58);
  --text: #291b12;
  --muted: #5b3e2b;
  --dim: #79583e;
  background:
    radial-gradient(circle at 85% 6%, rgba(221, 105, 42, .52), transparent 30%),
    radial-gradient(circle at 12% 76%, rgba(45, 121, 76, .29), transparent 33%),
    linear-gradient(145deg, #f0c896 0%, #d99158 56%, #ebbd86 100%);
}
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .profile-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .rules-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .signal-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .trending-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .manifesto,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .library-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .thread-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .profile-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .rules-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .signal-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .trending-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .manifesto,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .library-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .thread-card {
  background: linear-gradient(145deg, rgba(255, 236, 207, .96), rgba(225, 169, 113, .88));
  box-shadow: 0 18px 42px rgba(91, 48, 22, .24), inset 0 1px rgba(255, 248, 230, .84);
}

body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="dusk"] {
  --bg: #07100d;
  --panel: #0b1914;
  --panel-2: #0e1e18;
  background:
    radial-gradient(ellipse at 78% 0%, rgba(220, 125, 62, .24), transparent 27%),
    radial-gradient(circle at 10% 78%, rgba(31, 143, 84, .16), transparent 32%),
    linear-gradient(155deg, #101813 0%, #07100d 55%, #081b25 100%);
}

/* After nightfall the existing Africa silhouette, tree, contour lines, and a
   small moon become the special atmospheric artwork for Auto mode. */
body[data-theme-mode="auto"][data-theme-phase="dusk"] #africa-atmosphere::after,
body[data-theme-mode="auto"][data-theme-phase="night"] #africa-atmosphere::after,
body[data-theme-mode="auto"][data-theme-phase="midnight"] #africa-atmosphere::after,
body[data-theme-mode="auto"][data-theme-phase="deep-night"] #africa-atmosphere::after {
  content: "";
  position: absolute;
  top: 11%;
  right: 14%;
  width: clamp(28px, 4vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff8d4 0 44%, rgba(244, 207, 67, .76) 46% 54%, transparent 57%);
  opacity: .58;
  filter: drop-shadow(0 0 18px rgba(244, 207, 67, .36));
  transition: opacity 1.4s ease, transform 1.4s ease;
  animation: auto-moon-breathe 9s ease-in-out infinite;
}
body[data-theme-mode="auto"][data-theme-phase="night"]::before,
body[data-theme-mode="auto"][data-theme-phase="midnight"]::before,
body[data-theme-mode="auto"][data-theme-phase="deep-night"]::before {
  opacity: .3;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 208, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 12%, rgba(139, 217, 253, .64) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 22%, rgba(255, 247, 208, .62) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 37%, rgba(168, 255, 120, .58) 0 1px, transparent 2px),
    linear-gradient(rgba(168, 255, 120, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 255, 120, .018) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
  animation: night-sky-shimmer 11s ease-in-out infinite alternate;
}
body[data-theme-mode="auto"][data-theme-phase="night"] #africa-atmosphere {
  --africa-opacity: .29;
  mix-blend-mode: screen;
}
body[data-theme-mode="auto"][data-theme-phase="night"] #tree-philosophy { opacity: .38; }
body[data-theme-mode="auto"][data-theme-phase="night"] .africa-silhouette { fill: #000805; opacity: .8; }
body[data-theme-mode="auto"][data-theme-phase="night"] .africa-contour { stroke: rgba(168, 255, 120, .58); opacity: .42; }

body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="midnight"],
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="deep-night"] {
  --bg: #010403;
  --panel: #06100c;
  --panel-2: #091712;
  --line: rgba(184, 255, 190, .14);
  --line-strong: rgba(244, 207, 67, .36);
  background:
    radial-gradient(circle at 76% 3%, rgba(27, 111, 174, .23), transparent 30%),
    radial-gradient(circle at 16% 76%, rgba(31, 143, 84, .16), transparent 33%),
    linear-gradient(155deg, #07120f 0%, #010403 58%, #06131d 100%);
}
body[data-theme-mode="auto"][data-theme-phase="midnight"] #africa-atmosphere,
body[data-theme-mode="auto"][data-theme-phase="deep-night"] #africa-atmosphere {
  --africa-opacity: .35;
  mix-blend-mode: screen;
}
body[data-theme-mode="auto"][data-theme-phase="midnight"] #tree-philosophy,
body[data-theme-mode="auto"][data-theme-phase="deep-night"] #tree-philosophy { opacity: .48; }
body[data-theme-mode="auto"][data-theme-phase="midnight"] .africa-contour,
body[data-theme-mode="auto"][data-theme-phase="deep-night"] .africa-contour {
  stroke: rgba(244, 207, 67, .7);
  opacity: .5;
}
body[data-theme-mode="auto"][data-theme-phase="midnight"] #africa-atmosphere::after,
body[data-theme-mode="auto"][data-theme-phase="deep-night"] #africa-atmosphere::after {
  opacity: .82;
  transform: scale(1.08);
}

@keyframes auto-moon-breathe {
  0%, 100% { opacity: .48; transform: translateY(0) scale(.96); }
  50% { opacity: .82; transform: translateY(4px) scale(1.04); }
}
@keyframes night-sky-shimmer {
  from { opacity: .2; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { opacity: .38; background-position: 8px -5px, -6px 4px, 5px 7px, -4px -3px, 0 8px, 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme-mode="auto"][data-theme-phase="night"]::before,
  body[data-theme-mode="auto"][data-theme-phase="midnight"]::before,
  body[data-theme-mode="auto"][data-theme-phase="deep-night"]::before,
  #africa-atmosphere::after { animation: none; }
}

/* Final warm-spectrum theme pass: light mode leans into toasted cream,
   orange, and sunlit yellow instead of reading as white. The same variables
   feed the wordmark so the Zaconchan name changes with the atmosphere too. */
body[data-theme="light"] {
  --bg: #e7b06d;
  --panel: #f8d9a5;
  --panel-2: #f3c789;
  --line: rgba(76, 45, 22, .3);
  --line-strong: rgba(128, 69, 22, .58);
  --text: #281b12;
  --muted: #5c3c25;
  --dim: #795636;
  --green: #1e6241;
  --green-dark: #c9d8af;
  --pink: #a84263;
  --amber: #9a5019;
  --theme-switch-bg: rgba(255, 236, 198, .94);
  background:
    radial-gradient(circle at 86% 3%, rgba(255, 177, 58, .58), transparent 27%),
    radial-gradient(circle at 18% 19%, rgba(255, 224, 132, .42), transparent 25%),
    radial-gradient(circle at 7% 78%, rgba(44, 128, 80, .28), transparent 31%),
    radial-gradient(circle at 68% 58%, rgba(255, 245, 205, .4), transparent 37%),
    linear-gradient(145deg, #f7dca9 0%, #e4a25e 55%, #edc07d 100%);
  color: var(--text);
}
body[data-theme="light"]::after {
  opacity: .13;
  filter: blur(28px) saturate(1.28);
}
body[data-theme="light"] #tree-philosophy { opacity: .16; }
body[data-theme="light"] #africa-atmosphere { opacity: .13; }
body[data-theme="light"] .africa-silhouette { fill: #174332; opacity: .62; }
body[data-theme="light"] .africa-contour { stroke: rgba(126, 73, 25, .48); opacity: .42; }
body[data-theme="light"] .brand strong { color: #173f2d; text-shadow: 0 1px rgba(255, 236, 187, .72); }
body[data-theme="light"] .brand-wordmark-art,
body[data-theme="light"] .brand-letter {
  background: linear-gradient(105deg, #153f2c 0%, #245e3d 38%, #9a541d 68%, #6e3c1d 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 1px 1px 0 rgba(255, 244, 210, .55);
  animation: light-wordmark-flow 7s ease-in-out infinite;
}
body[data-theme="light"] .brand-letter-z {
  background: linear-gradient(145deg, #0f5638, #3f874d 54%, #b76a23);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="light"] .brand-bird { color: #9c5b1e; }
body[data-theme="light"] .brand small { color: #5c4029; }
body[data-theme="light"] .profile-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .signal-card,
body[data-theme="light"] .trending-card,
body[data-theme="light"] .manifesto,
body[data-theme="light"] .library-card,
body[data-theme="light"] .thread-card {
  border-color: rgba(76, 45, 22, .3);
  background:
    linear-gradient(145deg, rgba(255, 244, 214, .94), rgba(244, 201, 137, .86)),
    rgba(255, 235, 193, .7);
  box-shadow: 0 18px 42px rgba(101, 54, 18, .22), inset 0 1px rgba(255, 255, 235, .88);
}
body[data-theme="light"] .board-hero {
  background:
    radial-gradient(circle at 78% 42%, rgba(242, 133, 40, .4), transparent 31%),
    radial-gradient(circle at 53% 14%, rgba(255, 224, 119, .3), transparent 25%),
    linear-gradient(135deg, rgba(201, 232, 193, .92), rgba(255, 229, 177, .96) 52%, rgba(199, 222, 225, .82));
}
body[data-theme="light"] .modal-card {
  background: linear-gradient(145deg, rgba(255, 246, 220, .99), rgba(238, 193, 123, .98));
}
body[data-theme="light"] .search-wrap,
body[data-theme="light"] .inline-reply-form textarea,
body[data-theme="light"] .profile-form textarea,
body[data-theme="light"] .identity-form input,
body[data-theme="light"] .identity-form select,
body[data-theme="light"] .badge-voucher-form input,
body[data-theme="light"] .reply-form textarea,
body[data-theme="light"] .modal-field input,
body[data-theme="light"] .modal-field textarea,
body[data-theme="light"] .modal-field select,
body[data-theme="light"] .inline-field input,
body[data-theme="light"] .upload-field {
  background: rgba(255, 248, 227, .94);
  border-color: rgba(76, 45, 22, .34);
}
body[data-theme="light"] .thread-title,
body[data-theme="light"] .author strong,
body[data-theme="light"] .feed-toolbar h2,
body[data-theme="light"] .modal-head h2,
body[data-theme="light"] .thread-modal > h2,
body[data-theme="light"] .trend-item strong { color: #281b12; }
body[data-theme="light"] .thread-body,
body[data-theme="light"] .reply p { color: #493020; }
body[data-theme="light"] .button-primary {
  color: #1d2817;
  background: linear-gradient(115deg, #9fd477 0%, #e9c54f 48%, #f2a64d 100%);
  box-shadow: 0 8px 22px rgba(145, 79, 23, .2), inset 0 1px rgba(255, 255, 235, .7);
}
body[data-theme="light"] .channel-link.is-active { color: #175b3b; }
body[data-theme="light"] .eyebrow,
body[data-theme="light"] .mobile-board-bar > span { color: #1b6843; }
body[data-theme="light"] .modal-backdrop { background: rgba(73, 43, 23, .56); }

/* During automatic sunset the cream turns amber, then dissolves into the
   original ink palette. The selectors intentionally affect the same surfaces
   as day mode so the transition feels continuous rather than like a reset. */
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dawn"],
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"],
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] {
  --green: #285d3d;
  --text: #28180f;
  background:
    radial-gradient(circle at 84% 5%, rgba(236, 113, 35, .62), transparent 29%),
    radial-gradient(circle at 13% 76%, rgba(41, 116, 71, .31), transparent 32%),
    linear-gradient(145deg, #f1ca8c 0%, #d98245 55%, #dca05f 100%);
}
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dawn"] .brand-letter {
  background-image: linear-gradient(105deg, #174a32, #bf772e, #285e3e);
}
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="sunset"] .brand-letter {
  background-image: linear-gradient(105deg, #214f35, #bd6a26 52%, #713416);
}
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .brand-letter {
  background-image: linear-gradient(105deg, #173e2c, #8e5526 48%, #452516);
}
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="dusk"] .brand-letter {
  background-image: linear-gradient(105deg, #dfffc7, #f4cf43 52%, #8bd9fd);
}
body[data-theme="dark"] .brand strong { color: #eef8df; }
body[data-theme="dark"] .brand-wordmark-art,
body[data-theme="dark"] .brand-letter {
  background-image: linear-gradient(105deg, #eaffc8 0%, #fff7d0 42%, #f4cf43 68%, #8bd9fd 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: dark-wordmark-flow 8s ease-in-out infinite;
}
@keyframes light-wordmark-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes dark-wordmark-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-theme="light"] .brand-wordmark-art,
  body[data-theme="light"] .brand-letter,
  body[data-theme="dark"] .brand-wordmark-art,
  body[data-theme="dark"] .brand-letter { animation: none; }
}

/* Warm glass intensity, safe external links, and channel notification control. */
body[data-theme="light"] {
  --bg: #dfa05c;
  --panel: #f8d39a;
  --panel-2: #f2bd78;
  --line: rgba(69, 38, 16, .34);
  --line-strong: rgba(113, 56, 16, .64);
  background:
    radial-gradient(circle at 88% 2%, rgba(255, 193, 58, .72), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(255, 232, 148, .52), transparent 26%),
    radial-gradient(circle at 8% 82%, rgba(34, 126, 77, .34), transparent 32%),
    radial-gradient(circle at 67% 57%, rgba(255, 247, 210, .34), transparent 38%),
    linear-gradient(145deg, #f7dca8 0%, #df9955 52%, #e9b873 100%);
}
body[data-theme="light"] .profile-card,
body[data-theme="light"] .rules-card,
body[data-theme="light"] .signal-card,
body[data-theme="light"] .trending-card,
body[data-theme="light"] .manifesto,
body[data-theme="light"] .library-card,
body[data-theme="light"] .thread-card {
  background: linear-gradient(145deg, rgba(255, 246, 220, .9), rgba(237, 184, 111, .78));
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
  box-shadow: 0 20px 48px rgba(92, 45, 14, .26), inset 0 1px rgba(255, 255, 236, .92), inset 0 -1px rgba(151, 76, 22, .12);
}
body[data-theme="light"] .thread-title,
body[data-theme="light"] .author strong,
body[data-theme="light"] .feed-toolbar h2,
body[data-theme="light"] .modal-head h2,
body[data-theme="light"] .thread-modal > h2,
body[data-theme="light"] .trend-item strong { color: #24150d; }
body[data-theme="light"] .thread-body,
body[data-theme="light"] .reply p { color: #432719; }
body[data-theme="light"] .board-hero {
  background:
    radial-gradient(circle at 76% 40%, rgba(237, 113, 30, .48), transparent 33%),
    radial-gradient(circle at 52% 8%, rgba(255, 225, 105, .4), transparent 28%),
    linear-gradient(135deg, rgba(190, 226, 180, .88), rgba(255, 224, 165, .94) 53%, rgba(186, 217, 228, .78));
}
body[data-theme="light"] .modal-card {
  background: linear-gradient(145deg, rgba(255, 248, 225, .98), rgba(231, 170, 91, .96));
  -webkit-backdrop-filter: blur(20px) saturate(1.14);
  backdrop-filter: blur(20px) saturate(1.14);
}

body[data-theme-mode="auto"] {
  transition: background 2s ease, color 1.2s ease;
}
body[data-theme-mode="auto"][data-theme-phase="dusk"] {
  transition: background 1.5s ease, color 1.2s ease;
}
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .profile-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .rules-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .signal-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .trending-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .manifesto,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .library-card,
body[data-theme="light"][data-theme-mode="auto"][data-theme-phase="dusk"] .thread-card {
  background: linear-gradient(145deg, rgba(255, 225, 179, .7), rgba(49, 60, 46, .38) 58%, rgba(14, 35, 31, .34));
  border-color: rgba(113, 75, 38, .46);
  -webkit-backdrop-filter: blur(24px) saturate(1.24);
  backdrop-filter: blur(24px) saturate(1.24);
  box-shadow: 0 20px 50px rgba(63, 35, 18, .25), inset 0 1px rgba(255, 244, 208, .6);
}
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="night"] .profile-card,
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="midnight"] .profile-card,
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="deep-night"] .profile-card,
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="night"] .thread-card,
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="midnight"] .thread-card,
body[data-theme="dark"][data-theme-mode="auto"][data-theme-phase="deep-night"] .thread-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 1px rgba(168, 255, 120, .055);
}

.formatted-link { color: var(--tz-blue); font-weight: 750; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 42%, transparent); text-underline-offset: 2px; }
.formatted-link:hover { color: var(--green); }
.formatted-link > span { display: inline-block; margin-left: 3px; font-size: .85em; text-decoration: none; }
.link-previews { display: grid; gap: 7px; margin-top: 12px; }
.link-preview { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(139, 217, 253, .3); border-radius: 7px; background: linear-gradient(135deg, rgba(27, 111, 174, .11), rgba(168, 255, 120, .045)); color: var(--text); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.link-preview:hover { border-color: var(--tz-gold); background: rgba(244, 207, 67, .1); transform: translateY(-1px); }
.link-preview-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid var(--tz-gold); border-radius: 6px; color: var(--tz-gold); font-size: 16px; }
.link-preview-copy { min-width: 0; flex: 1; }
.link-preview-copy strong, .link-preview-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-preview-copy strong { font-size: 11px; }
.link-preview-copy small { margin-top: 3px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 9px; }
.link-preview-open { flex: 0 0 auto; color: var(--green); font-size: 9px; font-weight: 800; }
body[data-theme="light"] .formatted-link { color: #155f75; }
body[data-theme="light"] .link-preview { border-color: rgba(31, 104, 124, .34); background: linear-gradient(135deg, rgba(193, 225, 222, .55), rgba(255, 242, 203, .58)); }
body[data-theme="light"] .link-preview:hover { background: rgba(255, 220, 117, .65); }

.notification-button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 8px; border: 1px solid rgba(244, 207, 67, .32); border-radius: 5px; background: rgba(244, 207, 67, .055); color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.notification-button:hover { border-color: var(--tz-gold); background: rgba(244, 207, 67, .13); }
.notification-button[data-notification-state="granted"] { border-color: rgba(168, 255, 120, .4); background: rgba(168, 255, 120, .08); color: var(--green); }
.notification-button[data-notification-state="denied"] { color: var(--muted); opacity: .78; }
body[data-theme="light"] .notification-button { background: rgba(255, 244, 211, .72); color: #6e3d18; }
@media (max-width: 1120px) { .notification-button span { display: none; } .notification-button { width: 32px; justify-content: center; padding: 0; } }
@media (max-width: 760px) { .notification-button { min-height: 36px; } .link-preview-open { display: none; } }
@media (prefers-reduced-motion: reduce) { .link-preview:hover { transform: none; } }

/* Admin-replaceable background artwork. The supplied continent SVG is kept
   bold and visible behind the interface while remaining safely below the app
   chrome. Administrators can replace the artwork without changing CSS. */
#admin-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 26px rgba(0, 0, 0, .3));
}
#admin-background .admin-background-art {
  display: block;
  width: min(68vw, 68vh, 860px);
  height: min(68vw, 68vh, 860px);
  object-fit: contain;
  object-position: center;
  filter: saturate(1.18) contrast(1.28) brightness(.72);
}
body[data-theme="light"] #admin-background {
  opacity: .24;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 0 22px rgba(61, 37, 19, .16));
}
body[data-theme="light"] #admin-background .admin-background-art {
  filter: saturate(1.24) contrast(1.3) brightness(.86);
}
body[data-theme="dark"] #admin-background {
  opacity: .56;
}
@media (max-width: 760px) {
  #admin-background { opacity: .2; }
  body[data-theme="dark"] #admin-background { opacity: .56; }
  body[data-theme="light"] #admin-background { opacity: .17; }
}

/* Database-backed support terminal: compact on desktop, full-width and
   thumb-friendly on phones. The launcher remains available while dialogs or
   the thread composer are open. */
#supportBotRoot { position: relative; z-index: 8; }
.support-bot { position: fixed; z-index: 8; right: 22px; bottom: 22px; display: flex; align-items: flex-end; flex-direction: column; gap: 9px; pointer-events: none; }
.support-launcher { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px 0 7px; border: 1px solid rgba(244,207,67,.62); border-radius: 999px; background: linear-gradient(135deg, rgba(9,23,16,.96), rgba(27,111,174,.78)); color: #fff7d0; box-shadow: 0 14px 35px rgba(0,0,0,.3), 0 0 0 3px rgba(244,207,67,.08); font-family: ui-monospace, monospace; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.support-launcher:hover { border-color: var(--green); transform: translateY(-2px); }
.support-avatar { display: block; width: 42px; height: 48px; flex: 0 0 42px; overflow: hidden; border: 1px solid rgba(0,255,136,.58); border-radius: 9px; background: #061713; object-fit: cover; object-position: center 32%; box-shadow: 0 0 14px rgba(0,255,136,.2); }
.support-launcher-avatar { width: 33px; height: 36px; flex-basis: 33px; border-radius: 50%; object-position: center 29%; }
.support-panel { pointer-events: auto; width: min(390px, calc(100vw - 28px)); max-height: min(650px, calc(100vh - 94px)); overflow: hidden; padding: 16px; border: 1px solid rgba(244,207,67,.42); border-radius: 12px; background: linear-gradient(145deg, rgba(8,22,16,.98), rgba(6,18,24,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.support-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.support-head-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.support-head-identity .support-avatar { width: 49px; height: 55px; flex-basis: 49px; }
.support-head h2 { margin: 0; color: #fff7d0; font-size: 21px; letter-spacing: -.05em; }
.support-intro { margin: 7px 0 11px; color: #b2c8b6; font-size: 11px; line-height: 1.5; }
.support-command-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.support-command-row button { min-height: 28px; padding: 0 8px; border: 1px solid rgba(168,255,120,.3); border-radius: 5px; background: rgba(168,255,120,.05); color: var(--green); font-family: ui-monospace, monospace; font-size: 10px; }
.support-command-row button:hover { border-color: var(--tz-gold); color: var(--tz-gold); }
.support-messages { display: flex; flex-direction: column; gap: 8px; max-height: 330px; overflow: auto; margin: 0; padding: 4px 3px 8px; list-style: none; scrollbar-color: var(--tz-gold) transparent; }
.support-message { display: flex; align-items: flex-start; gap: 8px; max-width: 92%; padding: 8px 10px; border: 1px solid rgba(184,255,190,.15); border-radius: 8px; background: rgba(168,255,120,.055); }
.support-message-avatar { width: 27px; height: 31px; flex-basis: 27px; border-radius: 6px; object-position: center 30%; }
.support-message-copy { min-width: 0; flex: 1; }
.support-message-user { align-self: flex-end; border-color: rgba(244,207,67,.34); background: rgba(244,207,67,.09); }
.support-message-role { display: block; color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.support-message p { margin: 4px 0 0; color: #e4f1df; font-size: 11px; line-height: 1.48; white-space: pre-line; }
.support-empty { padding: 25px 10px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.support-message.is-busy p { color: var(--tz-gold); animation: support-pulse 1.1s ease-in-out infinite; }
.support-form { display: flex; gap: 7px; padding-top: 8px; border-top: 1px solid rgba(184,255,190,.12); }
.support-form input { min-width: 0; flex: 1; min-height: 40px; padding: 0 10px; border: 1px solid rgba(184,255,190,.2); border-radius: 6px; outline: 0; background: rgba(2,8,6,.72); color: var(--text); font-size: 11px; }
.support-form input:focus { border-color: var(--tz-gold); box-shadow: 0 0 0 3px rgba(244,207,67,.08); }
.support-form .button { min-height: 40px; padding: 0 12px; }
.support-footnote { display: block; margin-top: 8px; color: var(--dim); font-size: 9px; line-height: 1.35; }
@keyframes support-pulse { 50% { opacity: .48; } }
body[data-theme="light"] .support-launcher { background: linear-gradient(135deg, rgba(255,247,224,.96), rgba(221,172,91,.94)); color: #2b1d13; box-shadow: 0 14px 35px rgba(92,45,14,.24); }
body[data-theme="light"] .support-panel { border-color: rgba(117,69,31,.5); background: linear-gradient(145deg, rgba(255,248,225,.98), rgba(225,170,94,.96)); box-shadow: 0 24px 70px rgba(82,49,25,.3); }
body[data-theme="light"] .support-head h2, body[data-theme="light"] .support-message p { color: #2b1d13; }
body[data-theme="light"] .support-intro { color: #5c3c25; }
body[data-theme="light"] .support-form input { border-color: rgba(82,52,31,.3); background: rgba(255,248,227,.94); color: #2b1d13; }
@media (max-width: 760px) {
  .support-bot { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .support-panel { width: min(420px, calc(100vw - 28px)); max-height: min(72vh, 620px); }
  .support-messages { max-height: min(45vh, 330px); }
}
@media (prefers-reduced-motion: reduce) { .support-launcher:hover, .support-message.is-busy p { animation: none; transform: none; } }

/* Compact reply composers prevent long text areas from colliding with the
   attachment row. The field expands only while someone is actively writing. */
.inline-reply-form,
.reply-form { min-width: 0; clear: both; }
.inline-reply-form textarea,
.reply-form textarea {
  min-height: 35px;
  max-height: 35px;
  overflow-y: hidden;
  transition: max-height .18s ease, border-color .18s ease;
}
.inline-reply-form textarea:focus,
.reply-form textarea:focus,
.inline-reply-form textarea:not(:placeholder-shown),
.reply-form textarea:not(:placeholder-shown) {
  max-height: 128px;
  overflow-y: auto;
}
.inline-reply-form .voice-recorder,
.reply-form .voice-recorder {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  flex: 0 0 auto;
}
.voice-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 35px;
  padding: 0 9px;
  border: 1px solid rgba(255,121,198,.35);
  border-radius: 5px;
  background: rgba(255,121,198,.06);
  color: var(--pink);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.voice-button:hover,
.voice-recorder[data-state="recording"] .voice-button {
  border-color: var(--pink);
  background: rgba(255,121,198,.14);
}
.voice-recorder[data-state="recording"] .voice-button { animation: voice-pulse 1.1s ease-in-out infinite; }
.voice-recorder small { color: var(--dim); font-size: 9px; white-space: nowrap; }
.voice-recorder[data-state="recording"] small { color: var(--pink); }
.modal-field > .voice-recorder { margin-top: 9px; }
.reply-form .voice-recorder { width: 100%; margin-top: 8px; }
.reply-form .voice-recorder small { overflow: hidden; text-overflow: ellipsis; }
.audio-media { padding: 12px; background: linear-gradient(135deg, rgba(255,121,198,.08), rgba(27,111,174,.1)); }
.audio-media audio { display: block; width: 100%; margin-top: 10px; }
.audio-media-head,
.document-head { display: flex; align-items: center; gap: 9px; }
.audio-media-head strong,
.document-head strong { font-size: 11px; }
.audio-mark,
.document-mark { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--pink); border-radius: 7px; color: var(--pink); }
.document-media { padding: 12px; background: linear-gradient(135deg, rgba(244,207,67,.08), rgba(27,111,174,.1)); }
.document-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.document-reader { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: rgba(2,8,6,.5); }
.document-reader summary { padding: 8px 10px; color: var(--tz-gold); font-family: ui-monospace, monospace; font-size: 9px; font-weight: 800; cursor: pointer; }
.document-reader iframe { display: block; width: 100%; height: 260px; border: 0; background: #fff; }
.document-open { display: inline-flex; align-items: center; min-height: 32px; margin-top: 9px; padding: 0 9px; border: 1px solid rgba(244,207,67,.3); border-radius: 5px; color: var(--tz-gold); font-size: 10px; font-weight: 800; text-decoration: none; }
.document-open:hover { border-color: var(--tz-gold); background: rgba(244,207,67,.09); }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 4px rgba(255,121,198,.1); } }
@media (max-width: 560px) {
  .inline-reply-form .voice-recorder { width: 100%; }
  .inline-reply-form .voice-recorder small { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .document-reader iframe { height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .voice-recorder[data-state="recording"] .voice-button { animation: none; } }

/* === Image lightbox (ui/lightbox.js) ====================================== */
/* Singleton mounted on <body> by bindLightbox(). Click any
   .post-media[data-media-kind="image"]:not(.post-media-pending) img to open. */
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 36px; background: rgba(2, 7, 5, .88); opacity: 0; transition: opacity .16s ease; backdrop-filter: blur(6px); }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-stage { display: grid; place-items: center; max-width: min(1180px, 100%); max-height: calc(100dvh - 80px); margin: 0; padding: 0; }
.lightbox-image { display: block; max-width: 100%; max-height: calc(100dvh - 100px); border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.55); background: #050a08; opacity: 0; transition: opacity .18s ease; object-fit: contain; }
.lightbox-image.is-loaded { opacity: 1; }
.lightbox-image.is-failed { display: none; }
.lightbox-spinner { font-size: 28px; color: var(--green); opacity: .8; }
.lightbox-counter { position: absolute; right: 0; bottom: 18px; left: 0; text-align: center; color: var(--muted); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; pointer-events: none; }
.lightbox-caption { position: absolute; right: 0; bottom: 40px; left: 0; text-align: center; color: var(--text); font-size: 12px; opacity: .8; padding: 0 16px; }
.lightbox-button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(2,7,5,.6); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .14s ease, background-color .14s ease, color .14s ease; }
.lightbox-button:hover { border-color: var(--green); color: var(--green); background: rgba(2,7,5,.85); }
.lightbox-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.lightbox-button:disabled { opacity: .35; cursor: not-allowed; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
/* Cursor hint on lightbox-able images (replaces the natural pointer only on
   real, non-pending post-media images; the composer preview stays click-
   neutral). */
.post-media[data-media-kind="image"]:not(.post-media-pending) img { cursor: zoom-in; }
@media (max-width: 640px) {
  .lightbox { padding: 14px; }
  .lightbox-button { width: 38px; height: 38px; font-size: 18px; }
  .lightbox-close { top: 8px; right: 8px; }
  .lightbox-prev { left: 4px; }
  .lightbox-next { right: 4px; }
  .lightbox-image { max-height: calc(100dvh - 70px); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-image { transition: none; }
}