/* ufos.dev forum — Discourse look and feel (default Light / Dark themes). Loaded only on forum pages. */

/* ---------- Colours: Discourse's layout in the site's own liquid-glass theme ---------- */
body.discourse {
  --d-primary: var(--text); --d-primary-high: var(--text-2); --d-primary-medium: var(--text-3);
  --d-primary-low-mid: color-mix(in srgb, var(--text) 26%, transparent); --d-primary-low: var(--panel-line); --d-primary-very-low: var(--panel);
  --d-secondary: #12141c; --d-surface: rgba(18, 20, 28, .92);
  --d-tertiary: var(--accent); --d-tertiary-hover: color-mix(in srgb, var(--accent) 82%, #fff); --d-on-accent: var(--accent-ink);
  --d-tertiary-low: var(--accent-soft); --d-tertiary-very-low: color-mix(in srgb, var(--accent) 7%, transparent);
  --d-quaternary: #ff9f43; --d-highlight: rgba(255, 214, 10, .4); --d-highlight-low: rgba(255, 214, 10, .1); --d-danger: var(--danger); --d-danger-low: color-mix(in srgb, var(--danger) 14%, transparent);
  --d-success: #30d158; --d-success-low: rgba(48, 209, 88, .12); --d-love: #ff5c8a;
  --d-shadow: var(--glass-shadow); --d-shadow-sm: none;
  --d-heat-1: #ffb15c; --d-heat-2: #ff9f43; --d-heat-3: #ff6b35;
  --header-h: calc(var(--topbar-h) + 10px + env(safe-area-inset-top, 0px)); --sb-w: 250px;
  font-size: 15px;
}
[data-theme="light"] body.discourse { --d-secondary: #fff; --d-surface: rgba(255, 255, 255, .94); --d-quaternary: #e45735; --d-heat-1: #f08a3c; --d-heat-2: #e8692b; --d-heat-3: #d4461f; --d-success: #1a9e47; }
.discourse .topbar-glass { position: relative; }
.discourse .sb-btn { margin-left: -6px; margin-right: -4px; }
@media (max-width: 767px) { .discourse .topbar-actions .icon-btn { display: grid; } .discourse .topbar-actions .translate-btn { display: none; } }
button.me { border: 0; padding: 0; background: none; cursor: pointer; }
.discourse .icon-btn { border: 0; background: none; cursor: pointer; }
.discourse .icon-btn.active, .discourse .me.active { background: var(--lens); }
.discourse .me.active { box-shadow: 0 0 0 2px var(--accent); }
.discourse .fi { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.125em; }
.discourse .muted { color: var(--d-primary-medium); }
.discourse .link-btn { background: none; border: 0; padding: 0; color: var(--d-tertiary); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.discourse [hidden] { display: none !important; }
.discourse .avatar.xs { width: 20px; height: 20px; font-size: 10px; }
.discourse .avatar.sm { width: 25px; height: 25px; font-size: 11px; }
.discourse .avatar { width: 32px; height: 32px; font-size: 14px; }
.discourse .avatar.lg { width: 45px; height: 45px; font-size: 19px; }
.discourse .avatar.xl { width: 90px; height: 90px; font-size: 36px; box-shadow: none; }
.discourse .avatar.huge { width: 120px; height: 120px; font-size: 48px; }
.discourse .spinner { border-color: var(--d-primary-low); border-top-color: var(--d-tertiary); }
.discourse input, .discourse select, .discourse textarea { font: inherit; color: var(--d-primary); background: var(--field); border: 1px solid var(--panel-line); border-radius: 10px; }
.discourse input:focus, .discourse select:focus, .discourse textarea:focus { outline: none; border-color: var(--d-tertiary); box-shadow: 0 0 0 2px var(--d-tertiary-low); }

/* ---------- Buttons ---------- */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px;
  background: var(--d-primary-low); color: var(--d-primary); font: 500 15px/1.2 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; text-decoration: none !important; transition: background .15s, color .15s; }
.d-btn:hover { background: var(--d-primary-medium); color: var(--d-secondary); }
.d-btn .fi { font-size: 15px; }
.d-btn.sm { min-height: 28px; padding: 3px 9px; font-size: 14px; }
.d-btn.on { color: var(--d-tertiary); }
.d-btn-primary, a.d-btn-primary { background: var(--d-tertiary); color: var(--d-on-accent) !important; }
.d-btn-primary:hover { background: var(--d-tertiary-hover); color: var(--d-on-accent); }
.d-btn-danger { background: var(--d-danger); color: #fff; }
.d-btn-danger:hover { background: color-mix(in srgb, var(--d-danger) 80%, #000); color: #fff; }
.d-btn-flat { background: transparent; color: var(--d-primary-high); }
.d-btn-flat:hover { background: var(--d-primary-low); color: var(--d-primary); }
.d-btn:disabled { opacity: .5; cursor: not-allowed; }
.d-btn.busy { position: relative; color: transparent !important; }
.d-btn.busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }
.d-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--d-primary-medium); font-size: 20px; cursor: pointer; border-radius: 0; transition: background .15s, color .15s; }
.d-icon:hover, .d-icon.active { background: var(--d-primary-low); color: var(--d-primary); }
.d-icon.on { color: var(--d-tertiary); }

/* ---------- Panels that drop down from the top bar ---------- */
.d-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-width: calc(100vw - 20px); max-height: calc(100vh - var(--header-h) - 20px); overflow: auto;
  background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--panel-line); border-radius: 20px; box-shadow: var(--d-shadow); z-index: 90; pointer-events: auto; }
.d-btn-primary .fi, .d-header .fi { flex: none; }
.search-menu form { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--d-primary-low); }
.search-menu .sm-ico { color: var(--d-primary-medium); font-size: 18px; display: grid; }
.search-menu input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 16px; }
.search-menu .sm-adv { color: var(--d-primary-medium); font-size: 18px; display: grid; padding: 6px; }
.sm-results { padding: 6px 0 8px; }
.sm-results.loading { opacity: .5; }
.sm-results h4 { margin: 10px 12px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--d-primary-medium); letter-spacing: .02em; }
.sm-tip { margin: 8px 12px; font-size: 14px; }
.sr-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; color: var(--d-primary) !important; }
.sr-item:hover, .sr-item.on, .sr-item:focus { background: var(--d-tertiary-low); outline: none; }
.sr-item > .fi { margin-top: 3px; color: var(--d-primary-medium); }
.sr-item span { display: grid; gap: 2px; min-width: 0; }
.sr-item small { color: var(--d-primary-high); font-size: 13px; }
.sr-item mark, .fps-result mark { background: var(--d-highlight); color: inherit; padding: 0 1px; }
.sr-more { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-top: 4px; border-top: 1px solid var(--d-primary-low); font-size: 14px; }
.user-menu { width: 380px; display: grid; grid-template-columns: 1fr 52px; padding: 0; overflow: hidden; }
.um-body { max-height: calc(100vh - var(--header-h) - 30px); overflow: auto; min-height: 280px; }
.um-tabs { display: flex; flex-direction: column; border-left: 1px solid var(--d-primary-low); background: var(--d-primary-very-low); }
.um-tabs button { position: relative; display: grid; place-items: center; height: 50px; border: 0; background: none; color: var(--d-primary-medium); font-size: 20px; cursor: pointer; }
.um-tabs button:hover { background: var(--d-primary-low); color: var(--d-primary); }
.um-tabs button[aria-current="true"] { background: var(--d-secondary); color: var(--d-tertiary); box-shadow: inset 3px 0 0 var(--d-tertiary); }
.um-tabs button:last-child { margin-top: auto; border-top: 1px solid var(--d-primary-low); }
.um-tabs b { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--d-tertiary); color: var(--d-on-accent); font-size: 10px; line-height: 16px; padding: 0 4px; }
.um-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--d-primary) !important; font-size: 14px; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
.um-item:hover { background: var(--d-tertiary-low); }
.um-item.unread { background: var(--d-tertiary-very-low); }
.um-item.unread:hover { background: var(--d-tertiary-low); }
.um-ico { color: var(--d-primary-medium); font-size: 16px; display: grid; }
.um-item.unread .um-ico { color: var(--d-tertiary); }
.um-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.um-item time { color: var(--d-primary-medium); font-size: 12px; flex: none; }
.um-empty { padding: 30px 16px; text-align: center; }
.um-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-top: 1px solid var(--d-primary-low); font-size: 14px; position: sticky; bottom: 0; background: var(--d-secondary); }
.um-profile { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--d-primary-low); font-size: 16px; }
.uc-loading { display: grid; place-items: center; padding: 30px; }

/* ---------- Shell: sidebar + main ---------- */
.d-shell { flex: 1; display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); align-items: start; }
body.sb-collapsed .d-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.sb-collapsed .d-sidebar { visibility: hidden; }
.d-sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); border-right: 1px solid var(--d-primary-low); background: transparent; overflow: hidden; z-index: 40; }
.sb-scroll { height: 100%; overflow-y: auto; padding: 12px 0 30px; scrollbar-width: thin; }
.sb-sec { margin-bottom: 14px; }
.sb-sec summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 16px 4px 10px; cursor: pointer; color: var(--d-primary-medium); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; user-select: none; }
.sb-sec summary::-webkit-details-marker { display: none; }
.sb-sec summary .fi { font-size: 16px; transition: transform .15s; }
.sb-sec:not([open]) summary .fi { transform: rotate(-90deg); }
.sb-sec summary:hover { color: var(--d-primary); }
.sb-links a { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 4px 14px 4px 18px; margin: 0 8px; border-radius: 10px; color: var(--d-primary-high) !important; font-size: 15px; }
.sb-links a .fi { font-size: 16px; color: var(--d-primary-medium); }
.sb-links a span:not(.cat-sq) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-links a:hover { background: var(--d-primary-low); color: var(--d-primary) !important; }
.sb-links a[aria-current] { background: var(--lens); box-shadow: inset 0 1px 0 var(--glass-hi); color: var(--d-primary) !important; font-weight: 600; }
.sb-links a[aria-current] .fi { color: var(--d-primary); }
.sb-count { background: none; color: var(--d-tertiary); font-size: 13px; font-weight: 600; }
.sb-foot { padding: 8px 20px; margin: 0; font-size: 13px; }
.sb-foot .link-btn { color: var(--d-primary-medium); }
.sb-backdrop { display: none; }
.cat-sq { display: inline-block; width: 12px; height: 12px; background: var(--c, var(--d-primary-medium)); flex: none; }
.cat-sq.lg { width: 18px; height: 18px; }

.d-main { min-width: 0; width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 26px calc(90px + var(--tabbar-h)); }
body.composer-open .d-main { padding-bottom: calc(var(--cp-h, 420px) + 40px); }
body.composer-open .tabbar { display: none; }

/* ---------- List controls ---------- */
.list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.d-drops { display: flex; gap: 8px; }
.d-select { position: relative; }
.d-select > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--panel-line); border-radius: 999px;
  background: var(--panel); color: var(--d-primary); font-size: 14px; cursor: pointer; user-select: none; white-space: nowrap; }
.d-select > summary::-webkit-details-marker { display: none; }
.d-select > summary .fi { color: var(--d-primary-medium); }
.d-select > summary.d-btn { border: 0; background: var(--d-primary-low); }
.d-select[open] > summary { border-color: var(--d-tertiary); }
.ds-menu { position: absolute; top: calc(100% + 2px); left: 0; z-index: 60; min-width: 280px; max-width: min(380px, 92vw); max-height: 60vh; overflow: auto;
  background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); padding: 4px 0; }
.ds-menu.up { top: auto; bottom: calc(100% + 2px); }
.ds-filter { width: calc(100% - 12px); margin: 4px 6px 6px; padding: 6px 8px; font-size: 14px; }
.ds-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 7px 12px; color: var(--d-primary) !important; font-size: 14px; border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; }
.ds-item .cat-sq { margin-top: 4px; }
.ds-item span { display: block; min-width: 0; }
.ds-item b { font-weight: 600; }
.ds-item small { color: var(--d-primary-medium); }
.ds-item em { display: block; font-style: normal; font-size: 12.5px; color: var(--d-primary-high); margin-top: 2px; }
.ds-item:hover, .ds-item[aria-current="true"] { background: var(--d-tertiary-low); }
.ds-item.danger { color: var(--d-danger) !important; }
.ds-item > .fi { margin-top: 2px; color: var(--d-primary-medium); }
.nav-pills { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-pills a { display: block; padding: 6px 14px; border-radius: 999px; color: var(--d-primary) !important; font-size: 15px; line-height: 22px; }
.nav-pills a:hover { background: var(--d-primary-low); }
.nav-pills a[aria-current] { background: var(--d-tertiary); color: var(--d-on-accent) !important; }
.list-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.top-periods { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px; font-size: 14px; }
.category-heading { margin: 0 0 16px; }
.category-heading h1 { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
.category-heading p { margin: 0; color: var(--d-primary-high); }

/* ---------- Topic list ---------- */
.topic-list { width: 100%; }
.tl-head, .tl-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 70px 70px 76px; align-items: center; column-gap: 8px; }
.tl-head { padding: 6px 0; border-bottom: 3px solid var(--d-primary-low); color: var(--d-primary-medium); font-size: 14px; font-weight: 500; }
.tl-head .num, .tl-num, .tl-act { text-align: center; }
.tl-row { position: relative; padding: 12px 0; border-bottom: 1px solid var(--d-primary-low); }
.tl-row.selected { box-shadow: inset 3px 0 0 var(--d-tertiary); background: var(--d-primary-very-low); }
.tl-op { display: none; }
.tl-main { min-width: 0; padding-left: 6px; }
.tl-title-row { display: block; line-height: 1.3; }
.tl-title-row > * { vertical-align: baseline; }
.tl-title-row .tl-ico { margin-right: 5px; vertical-align: -1px; }
.tl-title-row .badge-unread, .tl-title-row .badge-new { margin-left: 4px; vertical-align: 1px; }
.tl-ico { color: var(--d-primary-medium); font-size: 14px; display: inline-block; }
.tl-ico.bm { color: var(--d-tertiary); }
.tl-title { color: var(--d-primary) !important; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.tl-title:visited { color: var(--d-primary-high) !important; }
.tl-row.unseen .tl-title { font-weight: 600; }
.badge-unread { display: inline-grid; vertical-align: middle; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--d-tertiary); color: var(--d-on-accent) !important; font-size: 12px; font-weight: 700; }
.badge-new { color: var(--d-tertiary); font-size: 11px; display: inline-block; }
.tl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; }
.cat-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--d-primary-high) !important; font-size: 13px; line-height: 1; max-width: 100%; }
.cat-badge .cat-sq { width: 10px; height: 10px; }
.cat-badge .cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-tag, .discourse-tag { color: var(--d-primary-medium) !important; font-size: 13px; }
.tl-tag::before, .discourse-tag::before { content: "#"; opacity: .6; margin-right: 1px; }
.tl-excerpt { margin: 6px 0 0; color: var(--d-primary-high); font-size: 14px; line-height: 1.45; max-width: 640px; }
.tl-mobile-stats { display: none; }
.tl-posters { display: flex; gap: 3px; overflow: hidden; }
.tl-posters .pa { display: block; border-radius: 50%; }
.tl-posters .pa.op .avatar { box-shadow: 0 0 0 2px var(--d-secondary), 0 0 0 3px var(--d-primary-low-mid); }
.tl-num { color: var(--d-primary-medium); font-size: 15px; }
.tl-num.hot { color: var(--d-quaternary); font-weight: 600; }
.tl-num.views.heat-1 { color: var(--d-heat-1); } .tl-num.views.heat-2 { color: var(--d-heat-2); font-weight: 600; } .tl-num.views.heat-3 { color: var(--d-heat-3); font-weight: 700; }
.tl-act a { color: var(--d-primary-medium) !important; font-size: 14px; }
.tl-last-visit { position: relative; height: 0; border-top: 1px solid var(--d-danger); margin: -1px 0 0; z-index: 1; }
.tl-last-visit span { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); background: var(--d-secondary); color: var(--d-danger); font-size: 12px; padding: 1px 8px; line-height: 18px; }
.f-more { display: grid; place-items: center; padding: 22px; }
.f-end { text-align: center; color: var(--d-primary-medium); padding: 22px 0; margin: 0; }
.f-empty { text-align: center; padding: 50px 10px; color: var(--d-primary-high); }
.f-empty h2 { font-size: 20px; font-weight: 500; color: var(--d-primary); }

/* Categories page */
.categories-and-latest { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.category-list { width: 100%; border-collapse: collapse; }
.category-list th { text-align: left; padding: 6px 0; border-bottom: 3px solid var(--d-primary-low); color: var(--d-primary-medium); font-size: 14px; font-weight: 500; }
.category-list .num { text-align: right; padding-right: 8px; }
.category-list td { padding: 12px 10px 12px 14px; border-bottom: 1px solid var(--d-primary-low); vertical-align: top; }
.category-list td.cl-cat { border-left: 6px solid var(--c); }
.category-list h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--d-primary); letter-spacing: 0; }
.category-list h3 .cat-sq { display: none; }
.category-list p { margin: 0; color: var(--d-primary-high); font-size: 14px; }
.category-list td.num b { display: block; font-size: 16px; color: var(--d-primary-high); font-weight: 500; }
.category-list td.num small { color: var(--d-primary-medium); font-size: 12px; }
.cat-edit { font-size: 12px; margin-top: 6px; }
.ltl-head { padding: 6px 0; border-bottom: 3px solid var(--d-primary-low); color: var(--d-primary-medium); font-size: 14px; font-weight: 500; }
.ltl-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--d-primary-low); }
.ltl-main { flex: 1; min-width: 0; }
.ltl-main .tl-title { font-size: 15.5px; }
.ltl-stats { text-align: right; display: grid; gap: 2px; }
.ltl-stats b { color: var(--d-primary-medium); font-weight: 500; }
.ltl-stats small { color: var(--d-primary-medium); font-size: 12px; }
.ltl-more { display: inline-block; margin-top: 12px; }

/* ---------- Topic page ---------- */
.topic-title-wrap { padding: 4px 0 14px; max-width: 900px; }
.topic-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 28px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.topic-title a { color: var(--d-primary) !important; }
.tt-ico { color: var(--d-primary-medium); font-size: 22px; display: inline-flex; }
.edit-topic { width: 32px; height: 32px; font-size: 16px; align-self: center; }
.topic-category { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pm-members { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; }
.pm-user { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 2px; border-radius: 14px; background: var(--d-primary-low); color: var(--d-primary) !important; }
.d-alert { padding: 10px 14px; background: var(--d-highlight-low); border-left: 4px solid var(--d-highlight); margin: 12px 0; display: flex; align-items: center; gap: 8px; color: var(--d-primary); }
.d-alert.error { background: var(--d-danger-low); border-left-color: var(--d-danger); }
.topic-body-wrap { display: grid; grid-template-columns: minmax(0, 760px) 160px; gap: 40px; align-items: start; }
.posts { min-width: 0; }

.post { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-top: 1px solid var(--d-primary-low); scroll-margin-top: calc(var(--header-h) + 10px); position: relative; transition: background 1s; }
.post.first { border-top: 0; }
.post .p-avatar { padding-top: 15px; }
.post .p-avatar a { position: sticky; top: calc(var(--header-h) + 12px); display: block; width: 45px; }
.post .p-main { min-width: 0; padding: 15px 0 6px 11px; }
.post.highlighted { animation: d-highlight 2.5s ease-out; }
@keyframes d-highlight { 0%, 30% { background: var(--d-tertiary-low); } 100% { background: transparent; } }
.post.selected { box-shadow: -4px 0 0 var(--d-tertiary); }
.post.unread .p-date::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--d-tertiary); margin-left: 6px; vertical-align: 1px; }
.post.deleted { opacity: .7; }
.post.deleted .p-main { padding: 12px 0 12px 11px; }
.post.hidden-post .cooked { opacity: .55; }
.p-hidden-note { background: var(--d-highlight-low); padding: 8px 12px; font-size: 14px; margin: 0 0 10px; }
.p-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 15px; }
.p-user { color: var(--d-primary-high) !important; font-weight: 600; }
.p-flair { color: var(--d-primary-medium); display: inline-flex; font-size: 13px; }
.p-right { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--d-primary-medium); font-size: 14px; }
.p-date { color: var(--d-primary-medium) !important; }
.p-replyto, .p-edited { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--d-primary-medium); font: inherit; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.p-replyto:hover, .p-replyto.on, button.p-edited:hover { color: var(--d-primary); background: var(--d-primary-low); }
.p-replyto .fi { transform: scaleX(-1); }
.p-edited .fi { color: var(--d-primary-medium); }
.p-embedded-top { margin: 0 0 12px; border: 1px solid var(--d-primary-low); background: var(--d-primary-very-low); }
.p-replies { margin: 6px 0 4px 0; border-left: 2px solid var(--d-primary-low); background: var(--d-primary-very-low); }
.mini-post { padding: 10px 14px; border-top: 1px solid var(--d-primary-low); }
.mini-post:first-child { border-top: 0; }
.mp-head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.mp-head .p-date { margin-left: auto; font-size: 13px; }
.mini-post .cooked { font-size: 14.5px; }

.p-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 10px; min-height: 36px; }
.show-replies { margin-right: auto; color: var(--d-primary-medium) !important; font-size: 14px; padding: 0 10px !important; width: auto !important; gap: 4px; }
.show-replies[aria-expanded="true"] .fi { transform: rotate(180deg); }
.rx-list { display: flex; flex-wrap: wrap; gap: 4px; margin-right: auto; }
.show-replies + .rx-list { margin-right: 0; margin-left: 8px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--d-primary-low); background: var(--d-secondary); border-radius: 13px; color: var(--d-primary-high); font-size: 13px; cursor: pointer; }
.rx:hover:not(:disabled) { border-color: var(--d-primary-low-mid); background: var(--d-primary-very-low); }
.rx.mine { border-color: var(--d-tertiary); background: var(--d-tertiary-very-low); color: var(--d-tertiary); }
.rx:disabled { cursor: default; }
.rx-e { font-size: 15px; line-height: 1; }
.p-btns { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 38px; padding: 0 9px; border: 0; background: none; color: var(--d-primary-medium); font: inherit; font-size: 15px; cursor: pointer; border-radius: 0; }
.pb .fi { font-size: 17px; }
.pb:hover { background: var(--d-primary-low); color: var(--d-primary); }
.pb.like:hover { color: var(--d-love); background: color-mix(in srgb, var(--d-love) 12%, transparent); }
.pb.like.on { color: var(--d-love); }
.pb.like .like-e { font-size: 18px; line-height: 1; }
.pb.like.pop .like-e, .pb.like.pop .fi { animation: d-pop .4s var(--spring, ease); }
@keyframes d-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.reply-btn span { font-size: 15px; }
.rx-wrap, .pb-more { position: relative; }
.rx-pop { position: absolute; bottom: calc(100% + 4px); right: -40px; z-index: 30; display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; padding: 6px;
  background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); animation: d-rise .14s ease-out; }
.rx-pop button { height: 38px; border: 0; background: none; font-size: 22px; cursor: pointer; border-radius: 6px; transition: transform .12s; }
.rx-pop button:hover { transform: scale(1.25); background: var(--d-primary-low); }
.rx-pop button.on { background: var(--d-tertiary-low); }
@keyframes d-rise { from { opacity: 0; transform: translateY(4px); } }
.pb-menu { display: none; position: absolute; bottom: calc(100% + 4px); right: 0; z-index: 30; min-width: 190px; padding: 4px 0; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); }
.pb-more.open .pb-menu { display: grid; animation: d-rise .14s ease-out; }
.pb-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 0; background: none; color: var(--d-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.pb-menu button .fi { color: var(--d-primary-medium); }
.pb-menu button:hover { background: var(--d-tertiary-low); }
.pb-menu button.danger, .pb-menu button.danger .fi { color: var(--d-danger); }

.small-action { display: grid; grid-template-columns: 58px auto 1fr auto; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--d-primary-low); color: var(--d-primary-medium); font-size: 14px; }
.small-action .sa-ico { display: grid; place-items: center; width: 45px; height: 32px; font-size: 18px; color: var(--d-primary-medium); }
.small-action a { color: var(--d-primary-high) !important; font-weight: 600; }
.small-action time { font-size: 13px; }

.topic-map { margin: 4px 0 16px 69px; border: 1px solid var(--d-primary-low); background: var(--d-primary-very-low); }
.tm-stats { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tm-stats li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 14px; min-width: 70px; text-align: center; }
.tm-stats li span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--d-primary-high); }
.tm-stats b { font-size: 17px; font-weight: 500; color: var(--d-primary-high); line-height: 1.2; }
.tm-stats small { font-size: 12px; color: var(--d-primary-medium); }
.tm-stats .tm-toggle { margin-left: auto; }
.tm-toggle .d-icon.on .fi { transform: rotate(180deg); }
.tm-details { border-top: 1px solid var(--d-primary-low); padding: 10px 14px 14px; }
.tm-details h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--d-primary-medium); }
.tm-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-avatars a { position: relative; }
.tm-avatars i { position: absolute; right: -6px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--d-primary-low-mid); color: var(--d-secondary); font: 700 11px/18px inherit; font-style: normal; text-align: center; }

/* Timeline */
.topic-timeline { position: sticky; top: calc(var(--header-h) + 40px); }
.tlx-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tlx-reply { margin-bottom: 10px; }
.tlx-date { color: var(--d-primary-medium) !important; font-size: 13px; padding-left: 14px; }
.tlx-track { position: relative; height: 240px; width: 100%; margin-left: 2px; border-left: 1px solid var(--d-primary-low); cursor: pointer; touch-action: none; user-select: none; }
.tlx-fill { position: absolute; left: -1px; top: 0; width: 1px; background: var(--d-tertiary); }
.tlx-handle { position: absolute; left: -3px; top: 0; display: grid; gap: 2px; padding: 4px 0 4px 12px; border-left: 5px solid var(--d-tertiary); min-height: 46px; transition: transform .12s; }
.tlx-track.dragging .tlx-handle { transition: none; }
.tlx-handle b { font-size: 15px; font-weight: 600; color: var(--d-primary); white-space: nowrap; }
.tlx-handle small { font-size: 13px; color: var(--d-primary-medium); white-space: nowrap; }
.tlx-controls { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.tlx-level > summary { padding: 4px 8px; min-height: 32px; font-size: 13px; }

.topic-footer-buttons { margin: 18px 0 0 69px; max-width: 760px; }
.tfb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.tfb-row .admin-menu { margin-right: auto; }
.tfb-level { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; font-size: 14px; }
.tfb-level p { margin: 0; }
.level-select .ds-menu { right: 0; left: auto; }
.tfb-row .admin-menu .ds-menu { left: 0; }
.suggested-topics { margin: 50px 0 0; max-width: 1000px; }
.suggested-topics h2 { font-size: 20px; font-weight: 500; margin: 0 0 10px; }
.more-topics { color: var(--d-primary-high); margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.progress-wrap { position: fixed; right: 12px; bottom: calc(12px + var(--tabbar-h) + var(--safe-b)); z-index: 75; }
.pw-btn { min-height: 40px; padding: 8px 16px; border: 1px solid var(--panel-line); border-radius: 999px; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: var(--d-primary); font: 600 15px inherit; font-family: inherit; box-shadow: var(--d-shadow); cursor: pointer; }
body.composer-open .progress-wrap { display: none; }
.quote-button { position: absolute; z-index: 60; box-shadow: var(--d-shadow); }

/* ---------- Post content ("cooked") ---------- */
.cooked { font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; color: var(--d-primary); }
.cooked p { margin: 0 0 1em; }
.cooked > :last-child { margin-bottom: 0; }
.cooked h1, .cooked h2, .cooked h3, .cooked h4 { letter-spacing: 0; font-weight: 600; margin: 1.1em 0 .5em; line-height: 1.25; }
.cooked h1 { font-size: 1.7em; } .cooked h2 { font-size: 1.45em; } .cooked h3 { font-size: 1.2em; } .cooked h4 { font-size: 1.05em; }
.cooked a { color: var(--d-tertiary); }
.cooked a:hover { text-decoration: underline; }
.cooked a.mention { display: inline-block; padding: 0 5px; border-radius: 8px; background: var(--d-primary-low); color: var(--d-primary-high) !important; font-size: .93em; font-weight: 600; text-decoration: none !important; }
.cooked img { max-width: 100%; height: auto; margin: .3em 0; cursor: zoom-in; }
.cooked ul, .cooked ol { padding-left: 1.5em; margin: 0 0 1em; }
.cooked li { margin: .2em 0; }
.cooked blockquote { margin: 0 0 1em; padding: 12px; border-left: 5px solid var(--d-primary-low); background: var(--d-primary-very-low); clear: both; }
.cooked blockquote > :last-child { margin-bottom: 0; }
.cooked aside.quote { margin: 0 0 1em; }
.cooked aside.quote .quote-title { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0; background: var(--d-primary-very-low); border-left: 5px solid var(--d-primary-low); font-size: 14px; color: var(--d-primary-high); }
.cooked aside.quote .quote-jump { margin-left: auto; color: var(--d-primary-medium) !important; text-decoration: none !important; }
.cooked aside.quote blockquote { margin: 0; padding-top: 6px; }
.cooked code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--d-primary-very-low); border: 1px solid var(--d-primary-low); padding: 1px 4px; }
.cooked pre { background: var(--d-primary-very-low); border: 1px solid var(--d-primary-low); padding: 12px; overflow-x: auto; max-height: 500px; }
.cooked pre code { background: none; border: 0; padding: 0; }
.cooked hr { border: 0; border-top: 2px solid var(--d-primary-low); margin: 1.5em 0; }
.cooked table { border-collapse: collapse; margin: 0 0 1em; display: block; overflow-x: auto; }
.cooked th, .cooked td { border-bottom: 1px solid var(--d-primary-low); padding: 6px 10px; text-align: left; }
.cooked th { border-bottom-width: 2px; }
.cooked .embed, .cooked figure { margin: .4em 0 1em; }
.cooked figure figcaption { color: var(--d-primary-medium); font-size: 13px; margin-top: 4px; }
.cp-preview .avatar, .cooked .avatar { display: inline-grid; vertical-align: middle; }

/* Polls */
.poll { margin: 0 0 1em; border: 1px solid var(--d-primary-low); }
.poll-options { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.cooked .poll-options li { margin: 0; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px 12px; border: 0; background: none; color: var(--d-primary); font: inherit; text-align: left; cursor: pointer; }
.poll-opt:hover:not(:disabled) { background: var(--d-primary-very-low); }
.poll-opt:disabled { cursor: default; }
.po-radio { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--d-primary-low-mid); border-radius: 50%; flex: none; font-size: 12px; color: var(--d-on-accent); }
.poll-opt.chosen .po-radio { background: var(--d-tertiary); border-color: var(--d-tertiary); }
.po-text { flex: 1; }
.po-pct { font-weight: 600; color: var(--d-primary-high); }
.po-bar { position: absolute; left: 40px; right: 10px; bottom: 4px; height: 6px; background: var(--d-primary-low); }
.po-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--d-primary-low-mid); transition: width .4s; }
.poll-opt.chosen .po-bar::after { background: var(--d-tertiary); }
.poll-info { padding: 8px 14px; border-top: 1px solid var(--d-primary-low); font-size: 14px; color: var(--d-primary-medium); }
.poll-info b { color: var(--d-primary); font-size: 18px; }

/* ---------- Composer ---------- */
.composer-dock { position: fixed; z-index: 85; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1200px); height: var(--cp-h, 420px); max-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--panel-line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); animation: cp-up .2s ease-out; }
@keyframes cp-up { from { transform: translate(-50%, 30px); opacity: 0; } }
.composer-dock.drag { box-shadow: inset 0 0 0 3px var(--d-tertiary); }
.cp-grip { height: 11px; cursor: row-resize; display: grid; place-items: center; touch-action: none; flex: none; }
.cp-grip::before { content: ""; width: 36px; height: 4px; background: var(--d-primary-low-mid); }
.cp-head { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex: none; }
.cp-action { flex: 1; min-width: 0; font-weight: 600; color: var(--d-primary-high); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.cp-head-btns { display: flex; }
.cp-ico { width: 34px; height: 30px; border: 0; background: none; color: var(--d-primary-medium); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.cp-ico:hover { background: var(--d-primary-low); color: var(--d-primary); }
.cp-topic-fields { display: grid; gap: 8px; margin-bottom: 8px; flex: none; }
.cp-topic-fields input, .cp-topic-fields select { width: 100%; padding: 8px 10px; font-size: 15px; min-width: 0; }
#cpTitle { font-size: 17px; }
.cp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.cp-toolbar { display: flex; align-items: center; gap: 1px; flex-wrap: wrap; border: 1px solid var(--d-primary-low-mid); border-bottom: 0; background: var(--d-primary-very-low); padding: 2px; flex: none; }
.cp-toolbar button { min-width: 32px; height: 30px; border: 0; background: none; color: var(--d-primary-high); font: 15px inherit; font-family: inherit; cursor: pointer; display: grid; place-items: center; }
.cp-toolbar button:hover, .cp-toolbar button.on { background: var(--d-primary-low); color: var(--d-primary); }
.cp-sep { width: 1px; height: 18px; background: var(--d-primary-low-mid); margin: 0 4px; }
.cp-spacer { flex: 1; }
.cp-preview-toggle { padding: 0 10px; font-size: 13px !important; }
.cp-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.composer-dock.show-preview .cp-body { grid-template-columns: minmax(0, 1fr); }
.composer-dock.show-preview .cp-preview { display: none; }
.cp-body textarea { width: 100%; height: 100%; resize: none; padding: 10px; font-size: 15px; line-height: 1.5; }
.cp-preview { overflow: auto; padding: 10px 14px; border: 1px dashed var(--d-primary-low-mid); }
.cp-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; flex: none; }
.cp-status { font-size: 13px; margin-left: auto; }
.composer-dock[data-kind="topic-edit"] { height: auto; }
.emoji-pop { position: absolute; left: 4px; top: 4px; z-index: 5; display: grid; grid-template-columns: repeat(auto-fill, 38px); width: min(420px, calc(100% - 8px)); max-height: 220px; overflow: auto; padding: 6px;
  background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); }
.emoji-pop button { height: 36px; border: 0; background: none; font-size: 21px; cursor: pointer; border-radius: 4px; }
.emoji-pop button:hover { background: var(--d-primary-low); }
.mention-pop { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: grid; min-width: 220px; padding: 4px 0; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); }
.composer-dock .mention-pop.for-to { position: fixed; bottom: auto; top: auto; }
.mention-pop button { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; background: none; color: var(--d-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mention-pop button.on, .mention-pop button:hover { background: var(--d-tertiary-low); }
.ac-emoji { font-size: 18px; width: 22px; text-align: center; }
.cp-mini { position: fixed; z-index: 85; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1200px); background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 18px 18px 0 0; border-top: 1px solid var(--d-primary-low); box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cp-mini button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; background: none; color: var(--d-primary-high); font: 600 15px inherit; font-family: inherit; text-align: left; cursor: pointer; }

/* ---------- User card, share, toast, modals, lightbox ---------- */
.user-card { position: absolute; z-index: 95; padding: 18px; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); animation: d-rise .14s ease-out; }
.uc-top { display: flex; align-items: center; gap: 14px; }
.uc-names { flex: 1; min-width: 0; display: grid; gap: 2px; }
.uc-names a { color: var(--d-primary) !important; font-size: 21px; }
.uc-names small { color: var(--d-primary-high); font-size: 14px; }
.uc-actions { align-self: flex-start; }
.uc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.badge-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--d-primary-low); font-size: 12.5px; color: var(--d-primary-high); }
.badge-chip.bronze { border-color: #cd7f32; } .badge-chip.silver { border-color: #a8a8a8; } .badge-chip.gold { border-color: #e7c300; }
.uc-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--d-primary-low); font-size: 13px; color: var(--d-primary-medium); }
.uc-stats b { color: var(--d-primary); font-weight: 600; }
.share-pop { position: absolute; z-index: 95; width: min(380px, calc(100vw - 24px)); padding: 14px; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 14px; border: 1px solid var(--d-primary-low); box-shadow: var(--d-shadow); display: grid; gap: 10px; }
.share-pop input { width: 100%; padding: 7px 9px; font-size: 14px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.d-toast { position: fixed; z-index: 120; left: 50%; bottom: calc(24px + var(--tabbar-h) + var(--safe-b)); transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--d-primary); color: var(--bg); font-size: 14px; box-shadow: var(--d-shadow); animation: d-rise .18s ease-out; max-width: calc(100vw - 32px); }
.d-toast.out { opacity: 0; transition: opacity .25s; }
body.composer-open .d-toast { bottom: calc(var(--cp-h, 420px) + 16px); }
dialog.d-modal { width: min(620px, calc(100vw - 24px)); max-height: 86vh; padding: 0; border: 1px solid var(--panel-line); border-radius: 22px; background: var(--d-secondary); color: var(--d-primary); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
dialog.d-modal.wide { width: min(980px, calc(100vw - 24px)); }
dialog.d-modal::backdrop { background: rgba(0, 0, 0, .6); }
.dm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--d-primary-low); }
.dm-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0; }
.dm-head .d-icon { width: 34px; height: 34px; font-size: 16px; }
.dm-body { padding: 16px; overflow: auto; max-height: 70vh; }
.dm-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--d-primary-low); }
.flag-opt { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--d-primary-low); cursor: pointer; }
.flag-opt b { font-weight: 500; }
#flagForm textarea { width: 100%; margin-top: 12px; padding: 8px; }
.kb-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 16px; font-size: 14px; }
.kb-list dt { text-align: right; white-space: nowrap; }
.kb-list dd { margin: 0; color: var(--d-primary-high); }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--d-primary-low-mid); border-bottom-width: 2px; background: var(--d-primary-very-low); font: 12px/18px ui-monospace, Menlo, monospace; text-align: center; color: var(--d-primary); }
.rev-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.rev-nav span { min-width: 60px; text-align: center; }
.rev-meta { text-align: center; margin: 8px 0 14px; }
.rev-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rev-col { padding: 12px; border: 1px solid var(--d-primary-low); }
.rev-col h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; color: var(--d-primary-medium); }
.rev-col.old { background: var(--d-danger-low); }
.rev-col.new { background: var(--d-success-low); }
.d-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .9); cursor: zoom-out; }
.d-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; }
.d-lightbox .d-icon { position: absolute; top: 12px; right: 12px; color: #fff; }

/* ---------- Profiles, users, badges ---------- */
.user-header { display: flex; align-items: center; gap: 22px; padding: 22px; background: var(--d-primary-very-low); border: 1px solid var(--d-primary-low); }
.uh-info { flex: 1; min-width: 0; }
.uh-info h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: 0; }
.uh-title { margin: 2px 0 10px; color: var(--d-primary-high); }
.uh-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 14px; }
.uh-meta div { display: flex; gap: 6px; }
.uh-meta dt { color: var(--d-primary-medium); }
.uh-meta dd { margin: 0; font-weight: 600; }
.uh-actions { display: grid; gap: 8px; align-self: flex-start; }
.user-nav { display: flex; gap: 2px; margin: 18px 0; border-bottom: 1px solid var(--d-primary-low); overflow-x: auto; scrollbar-width: none; }
.user-nav a { padding: 10px 14px; color: var(--d-primary-high) !important; font-size: 15px; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.user-nav a:hover { color: var(--d-primary) !important; }
.user-nav a[aria-current] { color: var(--d-primary) !important; border-bottom-color: var(--d-tertiary); font-weight: 600; }
.us-h { font-size: 16px; font-weight: 600; margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--d-primary-low); letter-spacing: 0; }
.stats-grid { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.stats-grid li { display: grid; gap: 2px; min-width: 120px; padding: 12px; background: var(--d-primary-very-low); text-align: center; }
.stats-grid b { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 21px; font-weight: 500; }
.stats-grid b .fi { color: var(--d-love); font-size: 16px; }
.stats-grid span { color: var(--d-primary-medium); font-size: 13px; }
.summary-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.summary-list a { flex: 1; min-width: 0; color: var(--d-primary) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-likes { display: inline-flex; align-items: center; gap: 3px; min-width: 40px; color: var(--d-primary-medium); font-size: 13px; }
.sl-likes .fi { color: var(--d-love); }
.user-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.user-people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-people a { display: flex; align-items: center; gap: 8px; color: var(--d-primary) !important; }
.user-people b { display: inline-flex; align-items: center; gap: 4px; color: var(--d-primary-medium); font-weight: 500; font-size: 14px; }
.user-people b .fi { color: var(--d-love); }
.badge-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.badge-cards.big { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.badge-card { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 12px; border: 1px solid var(--d-primary-low); border-top: 4px solid var(--d-primary-low-mid); }
.badge-card.bronze { border-top-color: #cd7f32; } .badge-card.silver { border-top-color: #a8a8a8; } .badge-card.gold { border-top-color: #e7c300; }
.badge-card.earned { background: var(--d-tertiary-very-low); }
.bc-ico { font-size: 30px; line-height: 1.2; }
.badge-card small { color: var(--d-primary-high); font-size: 13px; }
.badge-card em { font-style: normal; color: var(--d-success); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.trust-list { padding-left: 24px; line-height: 1.8; }
.user-stream-item { padding: 14px 0; border-bottom: 1px solid var(--d-primary-low); position: relative; }
.usi-head { display: flex; align-items: flex-start; gap: 10px; }
.usi-head > div { flex: 1; min-width: 0; }
.usi-title { color: var(--d-primary) !important; font-size: 16px; font-weight: 500; }
.usi-meta { margin-top: 3px; }
.usi-excerpt { margin: 8px 0 0 42px; color: var(--d-primary-high); font-size: 14.5px; }
.usi-rx { position: absolute; right: 0; bottom: 12px; font-size: 18px; }
.d-input-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--d-primary-low-mid); padding: 0 10px; background: var(--d-secondary); color: var(--d-primary-medium); }
.d-input-search input { border: 0 !important; box-shadow: none !important; padding: 7px 0; flex: 1; min-width: 0; background: none; }
.d-input-search.big input { font-size: 17px; padding: 9px 0; }
.list-controls > .d-input-search { margin-left: auto; min-width: 220px; }
.directory-wrap { overflow-x: auto; }
.directory { width: 100%; border-collapse: collapse; min-width: 640px; }
.directory th { padding: 8px 6px; border-bottom: 3px solid var(--d-primary-low); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; }
.directory th a { color: var(--d-primary-medium) !important; display: inline-flex; align-items: center; gap: 3px; }
.directory th a[aria-current] { color: var(--d-primary) !important; font-weight: 600; }
.directory td { padding: 10px 6px; border-bottom: 1px solid var(--d-primary-low); }
.directory .num { text-align: center; }
.directory td.num { color: var(--d-primary-high); }
.dir-user { display: flex; align-items: center; gap: 10px; color: var(--d-primary) !important; }
.dir-user span { display: grid; }
.dir-user small { color: var(--d-primary-medium); font-size: 12px; }
.search-page { max-width: 900px; }
.search-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 18px; }
.search-bar > .d-input-search { flex: 1; min-width: 240px; }
.adv-search { width: 100%; }
.adv-search > summary { list-style: none; display: inline-flex; cursor: pointer; }
.adv-search > summary::-webkit-details-marker { display: none; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px; margin-top: 8px; background: var(--d-primary-very-low); border: 1px solid var(--d-primary-low); }
.adv-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--d-primary-high); }
.adv-grid input, .adv-grid select { padding: 6px 8px; font-size: 14px; }
.search-count { margin: 0 0 6px; }
.fps-result { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--d-primary-low); }
.fps-avatar { flex: none; }
.fps-main { min-width: 0; flex: 1; }
.fps-title { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; color: var(--d-primary) !important; }
.fps-meta { margin: 4px 0 6px; }
.fps-blurb { margin: 0; color: var(--d-primary-high); font-size: 14.5px; line-height: 1.5; }
.fps-likes { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--d-primary-medium); font-size: 13px; }
.fps-likes .fi { color: var(--d-love); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .topic-body-wrap { grid-template-columns: minmax(0, 1fr) 140px; gap: 24px; }
}
@media (max-width: 1000px) {
  .tl-head, .tl-row { grid-template-columns: minmax(0, 1fr) 60px 60px 70px; }
  .tl-posters, .tl-head span:nth-child(2) { display: none; }
  .categories-and-latest { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .d-shell, body.sb-collapsed .d-shell { grid-template-columns: minmax(0, 1fr); }
  body.sb-collapsed .d-sidebar { visibility: visible; }
  .d-sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: min(320px, 86vw); z-index: 100; padding-top: env(safe-area-inset-top, 0px);
    background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 0 24px 24px 0;
    transform: translateX(-104%); transition: transform .26s var(--ease); box-shadow: var(--d-shadow); }
  body.sb-open .d-sidebar { transform: none; }
  .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .4); }
  .sb-links a { min-height: 40px; font-size: 16px; }
  .d-main { padding: 14px 12px 90px; }
  .d-panel { position: fixed; top: calc(var(--header-h) + 4px); left: 8px; right: 8px; width: auto; max-width: none; max-height: calc(100dvh - var(--header-h) - var(--tabbar-h) - 10px); }
  .user-menu { grid-template-columns: 1fr 56px; }
  .um-body { max-height: calc(100dvh - var(--header-h) - 10px); }
  .topic-body-wrap { grid-template-columns: minmax(0, 1fr); }
  .topic-timeline { display: none; }
  .topic-title { font-size: 22px; }
  .post { grid-template-columns: 46px minmax(0, 1fr); }
  .post .p-avatar a { width: 38px; }
  .post .avatar.lg { width: 38px; height: 38px; font-size: 16px; }
  .post .p-main { padding-left: 8px; }
  .small-action { grid-template-columns: 46px auto 1fr auto; }
  .small-action .sa-ico { width: 38px; }
  .topic-map, .topic-footer-buttons { margin-left: 0; }
  .tfb-row { justify-content: flex-start; }
  .tfb-row .d-btn span { display: none; }
  .tfb-row .d-btn-primary span { display: inline; }
  .tfb-row .admin-menu { margin-right: 0; }
  .tfb-level { flex-wrap: wrap; justify-content: flex-start; }
  .user-header { flex-wrap: wrap; padding: 16px; gap: 14px; }
  .user-header .avatar.huge { width: 80px; height: 80px; font-size: 32px; }
  .uh-actions { display: flex; flex-wrap: wrap; width: 100%; }
  .summary-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .list-controls { gap: 6px; }
  .d-drops { width: 100%; }
  .d-drops .d-select { flex: 1; }
  .d-drops .d-select > summary { width: 100%; justify-content: space-between; }
  .nav-pills { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav-pills a { white-space: nowrap; }
  .list-actions { margin-left: 0; width: 100%; }
  .list-actions .d-btn-primary { margin-left: auto; }
  .list-controls > .d-input-search { margin-left: 0; width: 100%; }
  .tl-head { display: none; }
  .tl-row { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; column-gap: 10px; }
  .tl-op { display: block; align-self: start; }
  .tl-op .avatar { width: 40px; height: 40px; font-size: 16px; }
  .tl-main { padding-left: 0; }
  .tl-num, .tl-act { display: none; }
  .tl-title { font-size: 16px; }
  .tl-mobile-stats { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--d-primary-medium); font-size: 13px; }
  .ds-menu { position: fixed; left: 8px !important; right: 8px; top: auto; bottom: 8px; max-width: none; max-height: 70vh; }
  .ds-menu.up { bottom: 8px; }
  .composer-dock { --cp-h: 100dvh; top: 0; height: auto; max-height: none; z-index: 110; border-radius: 0; padding: env(safe-area-inset-top, 0px) 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--d-secondary); }
  .cp-mini { bottom: calc(var(--tabbar-h) + var(--safe-b) - 6px); width: calc(100% - 24px); border-radius: 18px; border: 1px solid var(--panel-line); }
  .cp-grip { display: none; }
  .cp-head { padding-top: 8px; }
  .cp-row { grid-template-columns: 1fr; }
  .cp-body { grid-template-columns: minmax(0, 1fr); }
  .cp-preview { display: none; }
  .composer-dock.show-preview .cp-preview { display: block; }
  .composer-dock.show-preview textarea { display: none; }
  body.composer-open { overflow: hidden; }
  .cp-toolbar button { min-width: 36px; height: 34px; }
  .cp-sep { display: none; }
  .p-btns .pb { min-width: 40px; padding: 0 8px; }
  .reply-btn span { display: none; }
  .rx-pop { right: -90px; grid-template-columns: repeat(6, 38px); }
  .user-card { left: 8px !important; width: calc(100vw - 16px) !important; }
  .stats-grid li { min-width: calc(50% - 4px); flex: 1; }
  .search-bar .d-btn-primary { width: 100%; }
  .kb-list { grid-template-columns: 1fr; }
  .kb-list dt { text-align: left; }
}
@media (hover: none) {
  .pb:hover, .d-icon:hover { background: none; }
}
@media print {
  .d-header, .d-sidebar, .topic-timeline, .p-actions, .topic-footer-buttons, .suggested-topics, .composer-dock, .cp-mini { display: none !important; }
  .d-shell { display: block; }
}

/* ---------- Live updates, presence, bookmarks, details, spoilers ---------- */
.new-topics-banner { display: block; width: 100%; margin: 0 0 10px; padding: 10px; border: 0; border-radius: 12px; background: var(--d-tertiary-low); color: var(--d-tertiary); font: 600 15px inherit; font-family: inherit; cursor: pointer; animation: d-rise .2s ease-out; }
.new-topics-banner:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.replying-bar { grid-column: 1; display: flex; align-items: center; gap: 6px; padding: 10px 0 0 69px; color: var(--d-primary-medium); font-size: 14px; }
.replying-bar .avatar { margin-right: -2px; }
.replying-bar span { margin-left: 6px; }
.replying-bar i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: d-dot 1.2s infinite; }
.replying-bar i:nth-of-type(2) { animation-delay: .2s; } .replying-bar i:nth-of-type(3) { animation-delay: .4s; }
@keyframes d-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.topic-timeline { grid-column: 2; grid-row: 1 / span 2; }
.pb.bm.on { color: var(--d-tertiary); }
.pb.bm .fi + .fi { font-size: 11px; margin-left: -6px; margin-top: -10px; }
.bm-name { width: 100%; padding: 9px 12px; }
.bm-label { margin: 14px 0 8px; font-weight: 600; font-size: 14px; color: var(--d-primary-high); }
.bm-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.bm-opt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 10px 12px; border: 1px solid var(--panel-line); border-radius: 12px; background: var(--panel); color: var(--d-primary); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.bm-opt small { grid-column: 2; color: var(--d-primary-medium); font-size: 12px; }
.bm-opt.on { border-color: var(--d-tertiary); background: var(--d-tertiary-low); }
.bm-opt.custom input { grid-column: 1 / -1; margin-top: 6px; padding: 6px 8px; }
.cooked .d-details { margin: 0 0 1em; border: 1px solid var(--panel-line); border-radius: 10px; padding: 0 12px; }
.cooked .d-details summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.cooked .d-details[open] summary { border-bottom: 1px solid var(--panel-line); margin-bottom: 8px; }
.cooked .d-details-body { padding-bottom: 10px; }
.cooked .spoiler { filter: blur(5px); cursor: pointer; user-select: none; transition: filter .2s; border-radius: 4px; background: var(--panel); }
.cooked .spoiler.revealed { filter: none; cursor: auto; user-select: auto; background: none; }
.cp-similar { border: 1px solid var(--panel-line); border-radius: 12px; padding: 8px 10px; background: var(--d-tertiary-very-low); display: grid; gap: 4px; max-height: 180px; overflow: auto; }
.cp-similar h4 { margin: 0 0 4px; font-size: 13px; color: var(--d-primary-high); }
.cp-similar a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--d-primary) !important; font-size: 14px; padding: 4px 0; }
.cp-similar small { color: var(--d-primary-medium); font-size: 12px; }
.cp-more { position: relative; display: inline-flex; }
.cp-more-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 8; display: grid; min-width: 190px; padding: 4px; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--panel-line); border-radius: 12px; box-shadow: var(--d-shadow); }
.cp-more-menu button { justify-content: flex-start; gap: 8px; display: flex !important; width: 100%; padding: 0 10px; height: 34px !important; border-radius: 8px; white-space: nowrap; }
.emoji-pop { display: block !important; }
.emoji-pop[hidden] { display: none !important; }
.emoji-search { width: 100%; margin-bottom: 6px; padding: 6px 10px; font-size: 14px; }
.emoji-grid, .emoji-recent { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 2px; }
.emoji-recent small { grid-column: 1 / -1; color: var(--d-primary-medium); font-size: 12px; }
.emoji-recent:not(:empty) { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-line); }
.tm-summary .d-btn.on { background: var(--d-tertiary-low); color: var(--d-tertiary); }
@media (max-width: 900px) { .replying-bar { padding-left: 54px; } }

/* Phones: the timeline opens from the progress button as a panel */
.tl-backdrop { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, .35); }
.pw-btn { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
  body.tl-open .topic-timeline { display: block; position: fixed; z-index: 95; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 64px); top: auto;
    width: min(280px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 22px; background: var(--d-surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--panel-line); box-shadow: var(--d-shadow); animation: d-rise .18s ease-out; }
  body.tl-open .tlx-track { height: min(300px, 42vh); }
  body.tl-open .progress-wrap { z-index: 96; }
}

/* Vertical reading progress on topic pages (same as the article reader) */
.f-progress { position: fixed; right: 5px; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 22px); bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px);
  width: 4px; border-radius: 4px; background: var(--lens); z-index: 44; pointer-events: none; }
.f-progress span { display: block; width: 100%; height: 0; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent); transition: height .12s linear; }
/* Member card: buttons on their own row so the name always has room */
.uc-top { flex-wrap: wrap; }
.uc-actions { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; }
.uc-actions .d-btn { text-decoration: none; }

/* Tabs and pills wrap instead of scrolling sideways, so every option is visible */
.user-nav, .nav-pills { flex-wrap: wrap !important; overflow: visible !important; }

/* ===== Liquid-glass sidebar (matches the rest of the site) ===== */
@media (min-width: 901px) {
  .d-sidebar { top: calc(var(--header-h) + 12px); height: calc(100dvh - var(--header-h) - 24px); margin: 12px 0 12px 12px; border: 0; border-radius: var(--radius-lg);
    background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box; border: 1px solid transparent;
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi); }
  body.sb-collapsed .d-sidebar { margin: 0; }
}
@media (max-width: 900px) {
  .d-sidebar { background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, var(--edge) border-box; border: 1px solid transparent; border-left: 0;
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
}
.sb-sec summary { padding: 6px 16px 6px 14px; letter-spacing: .08em; }
.sb-links a { border-radius: 12px; transition: background .15s, transform .15s; }
.sb-links a:hover { transform: translateX(2px); }
.sb-links a[aria-current] { background: var(--lens); box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 14px rgba(0, 0, 0, .18); }