/* ============================================================================
   Meyo SKY2 - Global - Community Forum
   Shared stylesheet for forum.html (board / category / member views) and
   thread.html (thread + replies + composer). Load AFTER core.css + meyo.css;
   every colour comes from the --my-* tokens in meyo.css.

   Colour roles
   - board tones are categorical: Community = sky cyan, Marketplace = violet
     (set per section through --tone / --tone-lt, see .tone-*)
   - rank tiers .lv-0..6 mirror the server's LEVELS list (forum routes):
     New / Bronze / Silver / Gold / Platinum / Diamond / Legend. The three
     metal tiers intentionally use the real medal colours (bronze #e0a36a,
     silver #cfd8ea, gold #ffd36b); nothing else here is warm.
   ========================================================================== */

/* ------------------------------------------------------------ primitives -- */
.fo-group, .fo-cathead, .fo-profile { --tone: 56, 208, 255; --tone-lt: #8ee6ff; }
.tone-sky { --tone: 56, 208, 255; --tone-lt: #8ee6ff; }
.tone-violet { --tone: 155, 140, 255; --tone-lt: #c3b8ff; }

@keyframes fo-spin { to { transform: rotate(360deg); } }
@keyframes fo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fo-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fo-fade { from { opacity: 0; } to { opacity: 1; } }

/* avatar: JS passes --h / --h2 (hue from the nick, hueOf()). The hue is folded into the
   cool half of the wheel (cyan -> blue -> violet -> pink) so avatars stay on-palette but
   every member still gets a stable, distinct colour. */
.av {
  border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--my-head); font-weight: 700; line-height: 1; color: #06101f;
  background: linear-gradient(140deg, hsl(calc(175deg + var(--h, 0deg) * .45) 78% 74%), hsl(calc(175deg + var(--h2, 40deg) * .45) 66% 50%));
  box-shadow: 0 0 0 2px rgba(6, 10, 22, .9), 0 0 0 3px rgba(170, 196, 255, .20);
}

/* rank tier pill (thread.html rankPill + forum.html rankPill) */
.lv-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-family: var(--my-head); font-size: .72rem; font-weight: 700; letter-spacing: .08em; line-height: 1.35;
  text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; vertical-align: middle;
}
.lv-badge::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 1px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 8px currentColor; }
.lv-badge.sm { padding: 1px 8px 1px 7px; font-size: .64rem; }
.lv-0 { color: #b3bfdc; background: rgba(170, 196, 255, .07); border-color: rgba(170, 196, 255, .22); }
.lv-1 { color: #e0a36a; background: rgba(224, 163, 106, .10); border-color: rgba(224, 163, 106, .42); }
.lv-2 { color: #cfd8ea; background: rgba(207, 216, 234, .09); border-color: rgba(207, 216, 234, .40); }
.lv-3 { color: #ffd36b; background: rgba(255, 211, 107, .09); border-color: rgba(255, 211, 107, .42); }
.lv-4 { color: #9ff0e6; background: rgba(98, 226, 214, .10); border-color: rgba(98, 226, 214, .42); }
.lv-5 { color: #8ee6ff; background: rgba(56, 208, 255, .12); border-color: rgba(142, 230, 255, .50); }
.lv-6 { color: #ffffff; background: linear-gradient(90deg, #6f7bff, #9b8cff 55%, #38d0ff); border-color: rgba(195, 184, 255, .75); box-shadow: 0 0 16px rgba(155, 140, 255, .45); }

/* breadcrumb (forum hero + thread page) */
.fo-crumb, .th-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--my-text-mute); }
.fo-crumb a, .th-crumb a { color: var(--my-accent-lt); text-decoration: none; }
.fo-crumb a:hover, .th-crumb a:hover { color: #fff; }
.fo-crumb .sep, .th-crumb .sep { opacity: .45; }
.fo-crumb > span:last-child, .th-crumb > span:last-child { color: var(--my-text-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* buttons: pills on the cyan gradient with dark ink (matches .my-btn-primary) */
.fo-newbtn, .fo-cta-btn, .fo-btn, .btn-reply {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px;
  background: var(--my-accent-grad); color: var(--my-accent-ink); font-family: var(--my-head); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 26px rgba(47, 143, 255, .34); transition: transform .18s, filter .18s, box-shadow .18s;
}
.fo-newbtn:hover, .fo-cta-btn:hover, .fo-btn:hover, .btn-reply:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--my-glow); }
.fo-btn[disabled], .btn-reply[disabled] { opacity: .55; cursor: default; transform: none; filter: none; box-shadow: none; }
.fo-newbtn { padding: 13px 24px; font-size: .92rem; }
.fo-newbtn-plus { font-size: 1.05rem; line-height: 1; margin-top: -1px; }
.fo-btn { padding: 11px 22px; font-size: .86rem; }
.fo-btn.ghost { background: rgba(170, 196, 255, .04); border: 1px solid var(--my-line-strong); color: var(--my-text); box-shadow: none; }
.fo-btn.ghost:hover { border-color: rgba(56, 208, 255, .6); background: rgba(56, 208, 255, .08); box-shadow: none; }

/* loading / empty states */
.fo-loading, .th-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 52px 20px; text-align: center; color: var(--my-text-dim); font-size: .95rem; }
.fo-loading::before, .th-loading::before { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(56, 208, 255, .16); border-top-color: var(--my-accent); animation: fo-spin .9s linear infinite; }
.fo-empty, .th-empty { padding: 42px 20px; text-align: center; color: var(--my-text-dim); font-size: .95rem; line-height: 1.55; }
.fo-empty::before, .th-empty::before { content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 14px; background: url("/assets/brand/mark.svg") center / contain no-repeat; opacity: .32; }

/* ================================================================ forum.html */

/* --- hero: aurora sky + mountain range, owner art hook on ::before --- */
.fo-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--my-line);
  background:
    radial-gradient(780px 330px at 14% -12%, rgba(111, 123, 255, .32), transparent 62%),
    radial-gradient(700px 300px at 88% -4%, rgba(56, 208, 255, .22), transparent 60%),
    radial-gradient(520px 240px at 60% 120%, rgba(155, 140, 255, .16), transparent 70%),
    linear-gradient(180deg, #0b1535 0%, #081026 62%, #060a16 100%);
}
/* ART HOOK: owner art /assets/brand/hero-bg.jpg (2560x1080) drops in here - replace
   `background-image: none` with `background-image: url("/assets/brand/hero-bg.jpg")`. */
.fo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: none; background-position: center 30%; background-size: cover; background-repeat: no-repeat;
  opacity: .34; -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 96%); mask-image: linear-gradient(180deg, #000 25%, transparent 96%);
}
/* mountain range + cloud sea + a sparse star field */
.fo-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("/assets/brand/sky.svg") center bottom / 1600px auto repeat-x,
    radial-gradient(1.2px 1.2px at 40px 30px, rgba(233, 244, 255, .85), transparent 60%),
    radial-gradient(1px 1px at 150px 90px, rgba(200, 225, 255, .7), transparent 60%),
    radial-gradient(1.4px 1.4px at 230px 20px, rgba(142, 230, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 90px 150px, rgba(195, 184, 255, .6), transparent 60%);
  background-size: 1600px auto, 260px 180px, 260px 180px, 260px 180px, 260px 180px;
  opacity: .9;
}
/* emblem watermark: sits above the mountain layer, below the hero content */
.fo-hero-mark {
  position: absolute; z-index: 0; pointer-events: none; top: 18px; width: 230px; height: 230px;
  right: max(24px, calc((100vw - 1280px) / 2 + 60px));
  opacity: .13; filter: drop-shadow(0 0 34px rgba(56, 208, 255, .7));
}
.fo-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 44px 24px 60px; box-sizing: border-box; }
.fo-hero .fo-crumb { margin-bottom: 20px; }
.fo-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.fo-hero-copy { min-width: 0; flex: 1 1 420px; animation: fo-rise .45s ease both; }
.fo-hero-copy .my-section-label { margin-bottom: 10px; }
.fo-title { font-family: var(--my-head); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase; margin: 0; color: #f2f6ff; overflow-wrap: anywhere; }
.fo-title b { font-weight: 700; background: var(--my-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 22px rgba(56, 208, 255, .35)); }
.fo-sub { margin: 14px 0 0; color: var(--my-text-dim); font-size: 1rem; max-width: 560px; line-height: 1.65; }

/* command bar: search + new thread in one glass pill */
.fo-hero-actions {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; min-width: 0;
  background: rgba(8, 14, 32, .66); border: 1px solid var(--my-line-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: fo-rise .45s .08s ease both;
}
.fo-search { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; min-width: 250px; flex: 1 1 auto; cursor: text; }
.fo-search-ic { position: relative; width: 16px; height: 16px; flex-shrink: 0; display: inline-block; }
.fo-search-ic i { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border: 2px solid var(--my-text-dim); border-radius: 50%; box-sizing: border-box; }
.fo-search-ic i::after { content: ""; position: absolute; bottom: -4px; right: -5px; width: 6px; height: 2px; background: var(--my-text-dim); border-radius: 2px; transform: rotate(45deg); }
.fo-search input { flex: 1; min-width: 0; padding: 10px 0; background: transparent; border: none; outline: none; color: var(--my-text); font-family: var(--my-font); font-size: .92rem; }
.fo-search input::placeholder { color: var(--my-text-mute); }
.fo-search:focus-within .fo-search-ic i { border-color: var(--my-accent); }
.fo-search:focus-within .fo-search-ic i::after { background: var(--my-accent); }

/* --- body grid --- */
.fo-body { max-width: 1280px; margin: 0 auto; padding: 30px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; width: 100%; box-sizing: border-box; }
.fo-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* --- board group (glass panel, tinted by --tone) --- */
.fo-group {
  position: relative; overflow: hidden; border-radius: var(--my-radius);
  background: var(--my-panel); border: 1px solid var(--my-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 18px 44px rgba(0, 0, 0, .28);
  animation: fo-rise .4s ease both;
}
.fo-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--tone), .75) 30%, rgba(155, 140, 255, .45) 75%, transparent); pointer-events: none; }
.fo-group + .fo-group { animation-delay: .06s; }
.fo-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--my-line); background: linear-gradient(90deg, rgba(var(--tone), .13), rgba(var(--tone), 0) 72%); }
.fo-group-head .fo-group-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fo-group-bar { width: 10px; height: 10px; flex-shrink: 0; border-radius: 2px; transform: rotate(45deg); background: rgb(var(--tone)); box-shadow: 0 0 12px rgba(var(--tone), .85); }
.fo-group-name { font-family: var(--my-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; color: #f2f6ff; margin: 0; }
.fo-group-count { flex-shrink: 0; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--my-line-strong); background: rgba(170, 196, 255, .04); font-family: var(--my-head); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--my-text-dim); }

/* --- forum (category) row --- */
.fo-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 236px; gap: 18px; align-items: center; padding: 17px 22px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--my-line); transition: background .18s; }
.fo-row:last-child { border-bottom: none; }
.fo-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), .8); opacity: 0; transition: opacity .18s; }
.fo-row:hover { background: rgba(var(--tone), .05); }
.fo-row:hover::before { opacity: 1; }
.fo-glyph { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--tone-lt); background: radial-gradient(circle at 30% 18%, rgba(var(--tone), .32), rgba(var(--tone), .06) 72%); border: 1px solid rgba(var(--tone), .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .25); transition: box-shadow .2s, transform .2s; }
.fo-glyph svg { width: 24px; height: 24px; display: block; }
.fo-row:hover .fo-glyph { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 22px rgba(var(--tone), .35); }
.fo-info { min-width: 0; }
.fo-info-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fo-fname { font-family: var(--my-head); font-weight: 700; font-size: 1.18rem; letter-spacing: .02em; color: #f2f6ff; transition: color .18s; }
.fo-row:hover .fo-fname { color: var(--tone-lt); }
.fo-desc { font-size: .86rem; color: var(--my-text-dim); margin-top: 3px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-counts { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .76rem; color: var(--my-text-mute); flex-wrap: wrap; }
.fo-counts b { color: var(--tone-lt); font-weight: 700; }
.fo-counts .fo-cdot, .fo-trow-sub .fo-cdot { opacity: .45; }
.fo-last { display: flex; align-items: center; gap: 11px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--my-line); }
.fo-last-txt { min-width: 0; }
.fo-last-title { font-size: .84rem; font-weight: 600; color: #dce6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-last-meta { font-size: .74rem; color: var(--my-text-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-last-empty { font-size: .8rem; color: var(--my-text-mute); font-style: italic; }

/* --- sidebar --- */
.fo-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 88px; min-width: 0; }
.fo-cta {
  position: relative; overflow: hidden; padding: 22px; border-radius: var(--my-radius);
  border: 1px solid rgba(56, 208, 255, .28);
  background:
    radial-gradient(360px 180px at 100% 0%, rgba(56, 208, 255, .22), transparent 62%),
    radial-gradient(320px 200px at 0% 100%, rgba(155, 140, 255, .20), transparent 62%),
    var(--my-panel-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.fo-cta::after { content: ""; position: absolute; right: -28px; top: -28px; width: 124px; height: 124px; background: url("/assets/brand/mark.svg") center / contain no-repeat; opacity: .12; pointer-events: none; }
.fo-cta > * { position: relative; z-index: 1; }
.fo-cta-title { font-family: var(--my-head); font-weight: 700; font-size: 1.3rem; letter-spacing: .05em; text-transform: uppercase; color: #f2f6ff; margin-bottom: 6px; padding-right: 50px; }
.fo-cta-p { font-size: .86rem; color: var(--my-text-dim); line-height: 1.6; margin: 0 0 16px; }
.fo-cta-btn { display: flex; width: 100%; box-sizing: border-box; padding: 12px 16px; font-size: .88rem; }
.fo-cta .fo-me { display: flex; align-items: center; gap: 13px; min-width: 0; }
.fo-cta .fo-me .av { box-shadow: 0 0 0 3px var(--my-panel-solid), 0 0 0 4px rgba(56, 208, 255, .55), 0 0 22px rgba(56, 208, 255, .35); }
.fo-cta .fo-me-txt { min-width: 0; }
.fo-cta .fo-me-name { font-family: var(--my-head); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; color: #f2f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-cta .fo-me-rank { margin-top: 4px; }
.fo-cta .fo-bar { margin: 16px 0 6px; max-width: none; }

.fo-card { background: var(--my-panel); border: 1px solid var(--my-line); border-radius: var(--my-radius); padding: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 36px rgba(0, 0, 0, .24); }
.fo-card-head { display: flex; align-items: center; gap: 9px; font-family: var(--my-head); font-weight: 700; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--my-violet-lt); margin-bottom: 12px; }
.fo-card-head::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; transform: rotate(45deg); background: var(--my-accent-grad); box-shadow: 0 0 10px rgba(56, 208, 255, .6); }
.fo-act-list { display: flex; flex-direction: column; gap: 2px; }
.fo-act { display: flex; align-items: flex-start; gap: 11px; padding: 9px 8px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; }
.fo-act:hover { background: rgba(56, 208, 255, .06); }
.fo-act-txt { min-width: 0; }
.fo-act-title { font-size: .85rem; font-weight: 600; color: #dce6ff; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fo-act:hover .fo-act-title { color: var(--my-accent-lt); }
.fo-act-meta { font-size: .73rem; color: var(--my-text-mute); margin-top: 3px; }
.fo-act-empty { font-size: .85rem; color: var(--my-text-dim); padding: 4px 8px; line-height: 1.5; }

/* stats: three tiles + a full-width "latest thread" row */
.fo-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fo-stat { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 12px; background: rgba(170, 196, 255, .04); border: 1px solid var(--my-line); text-align: center; min-width: 0; }
.fo-stat span { font-size: .66rem; font-weight: 600; letter-spacing: .03em; line-height: 1.25; text-transform: uppercase; color: var(--my-text-mute); max-width: 100%; overflow-wrap: anywhere; }
.fo-stat b { font-family: var(--my-head); font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: #f2f6ff; }
.fo-stat.top { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; gap: 12px; padding: 11px 14px; text-align: left; }
.fo-stat.top span { flex-shrink: 0; }
.fo-stat.top b { font-family: var(--my-font); font-size: .84rem; font-weight: 600; color: var(--my-mint-lt); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- category view --- */
.fo-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 12px; border-radius: 999px; border: 1px solid var(--my-line-strong); background: rgba(170, 196, 255, .04); font-family: var(--my-head); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--my-text-dim); text-decoration: none; transition: color .16s, border-color .16s, background .16s; }
.fo-back:hover { color: #fff; border-color: rgba(56, 208, 255, .55); background: rgba(56, 208, 255, .08); }
.fo-cathead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fo-cathead h1 { display: flex; align-items: center; gap: 14px; min-width: 0; font-family: var(--my-head); font-weight: 700; font-size: 1.9rem; letter-spacing: .03em; color: #f2f6ff; margin: 0; overflow-wrap: anywhere; }
.fo-cathead .fo-cat-ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--tone-lt); background: radial-gradient(circle at 30% 18%, rgba(var(--tone), .32), rgba(var(--tone), .06) 72%); border: 1px solid rgba(var(--tone), .36); box-shadow: 0 0 22px rgba(var(--tone), .22); }
.fo-cathead .fo-cat-ic svg { width: 24px; height: 24px; display: block; }
.fo-cathead .fo-newbtn { padding: 11px 20px; font-size: .86rem; }
.fo-catdesc { font-size: .92rem; color: var(--my-text-dim); margin: -8px 0 0; line-height: 1.55; }
.fo-tlist { display: flex; flex-direction: column; }

/* thread rows (category + member lists) */
.fo-trow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 22px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--my-line); transition: background .15s; }
.fo-trow:last-child { border-bottom: none; }
.fo-trow::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), .8); opacity: 0; transition: opacity .18s; }
.fo-trow:hover { background: rgba(var(--tone), .05); }
.fo-trow:hover::before { opacity: 1; }
.fo-trow-main { min-width: 0; }
.fo-trow-title { font-family: var(--my-head); font-weight: 600; font-size: 1.14rem; letter-spacing: .01em; color: #f2f6ff; line-height: 1.3; overflow-wrap: anywhere; transition: color .16s; }
.fo-trow:hover .fo-trow-title { color: var(--tone-lt); }
.fo-trow-sub { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: .78rem; color: var(--my-text-mute); flex-wrap: wrap; }
.fo-trow-sub .fo-by { display: inline-flex; align-items: center; gap: 7px; }
.fo-trow-sub .fo-byname { color: #cfdcff; font-weight: 600; }
.fo-trow-stats { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fo-trow-stats > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(170, 196, 255, .04); border: 1px solid var(--my-line); font-size: .76rem; color: var(--my-text-dim); white-space: nowrap; }
.fo-trow-stats svg { width: 14px; height: 14px; color: var(--tone-lt); opacity: .9; flex-shrink: 0; }
.fo-trow-stats b { color: #f2f6ff; font-weight: 700; }

/* pagination */
.fo-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.fo-pager button { width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--my-line-strong); background: rgba(170, 196, 255, .04); color: #d0d9ef; font-family: var(--my-head); font-size: 1.35rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .18s, background .18s, color .18s, box-shadow .18s; }
.fo-pager button:hover:not([disabled]) { border-color: rgba(56, 208, 255, .6); background: rgba(56, 208, 255, .10); color: #fff; box-shadow: 0 0 18px rgba(56, 208, 255, .25); }
.fo-pager button[disabled] { opacity: .32; cursor: default; }
.fo-pager .fo-pageno { min-width: 42px; height: 42px; padding: 0 12px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--my-accent-grad); color: var(--my-accent-ink); font-family: var(--my-head); font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 22px rgba(47, 143, 255, .35); }

/* --- member profile --- */
.fo-profile { position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; border: 1px solid var(--my-line-strong); background: var(--my-panel); padding: 86px 26px 24px; box-shadow: 0 20px 48px rgba(0, 0, 0, .32); animation: fo-rise .4s ease both; }
.fo-profile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 136px; z-index: -1; pointer-events: none;
  background:
    url("/assets/brand/sky.svg") center bottom / 1100px auto repeat-x,
    radial-gradient(480px 170px at 18% 0%, rgba(111, 123, 255, .40), transparent 66%),
    radial-gradient(420px 170px at 86% 0%, rgba(56, 208, 255, .28), transparent 62%),
    linear-gradient(180deg, #0d1840, #0b1330);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.fo-profile-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.fo-profile-head > .av { box-shadow: 0 0 0 4px var(--my-panel-solid), 0 0 0 5px rgba(56, 208, 255, .6), 0 0 30px rgba(56, 208, 255, .35); }
.fo-profile-nick { font-family: var(--my-head); font-weight: 700; font-size: 1.8rem; letter-spacing: .02em; line-height: 1.1; color: #f2f6ff; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; overflow-wrap: anywhere; }
.fo-bar { height: 8px; border-radius: 999px; background: rgba(170, 196, 255, .08); border: 1px solid var(--my-line); overflow: hidden; margin: 12px 0 7px; max-width: 400px; }
.fo-bar span { display: block; height: 100%; border-radius: 999px; background: var(--my-accent-grad); box-shadow: 0 0 12px rgba(56, 208, 255, .6); transition: width .6s ease; }
.fo-xptext { font-size: .78rem; color: var(--my-text-dim); }
.fo-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.fo-profile-stats > div { text-align: center; padding: 16px 8px; border-radius: 14px; background: rgba(170, 196, 255, .04); border: 1px solid var(--my-line); min-width: 0; }
.fo-profile-stats b { display: block; font-family: var(--my-head); font-weight: 700; font-size: 1.5rem; line-height: 1.15; background: var(--my-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.fo-profile-stats span { display: block; margin-top: 4px; font-family: var(--my-head); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--my-text-mute); }

/* --- toasts --- */
#fo-toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 10px; align-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.fo-toast { display: flex; align-items: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 12px 20px 12px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--my-text); background: rgba(12, 20, 42, .94); border: 1px solid var(--my-line-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .25s, transform .25s; }
.fo-toast::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--my-accent); box-shadow: 0 0 10px var(--my-accent); }
.fo-toast.show { opacity: 1; transform: none; }
.fo-toast.ok { border-color: rgba(62, 230, 176, .45); color: var(--my-mint-lt); }
.fo-toast.ok::before { background: var(--my-mint); box-shadow: 0 0 10px var(--my-mint); }
.fo-toast.err { border-color: rgba(255, 107, 139, .45); color: #ffa3b5; }
.fo-toast.err::before { background: var(--my-rose); box-shadow: 0 0 10px var(--my-rose); }

/* --- modals (nick picker + thread composer) --- */
.fo-modal-bg { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 7, 16, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fo-fade .18s ease; }
.fo-modal {
  position: relative; overflow: auto; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); box-sizing: border-box;
  padding: 28px; border-radius: 22px; border: 1px solid var(--my-line-strong);
  background: radial-gradient(420px 200px at 100% 0%, rgba(56, 208, 255, .12), transparent 62%), radial-gradient(380px 200px at 0% 100%, rgba(155, 140, 255, .12), transparent 62%), var(--my-panel-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: fo-pop .22s ease;
}
.fo-modal::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 208, 255, .7), rgba(155, 140, 255, .6), transparent); }
.fo-modal.wide { max-width: 640px; }
.fo-modal h3 + .fo-field { margin-top: 18px; }
.fo-modal h3 { font-family: var(--my-head); font-weight: 700; font-size: 1.55rem; letter-spacing: .03em; color: #f2f6ff; margin: 0 0 8px; }
.fo-modal p { font-size: .88rem; color: var(--my-text-dim); line-height: 1.55; margin: 0 0 18px; }
.fo-field { display: block; margin-bottom: 14px; }
.fo-label { display: block; margin-bottom: 7px; font-family: var(--my-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--my-text-dim); }
.fo-modal input, .fo-modal textarea, .fo-modal select { width: 100%; box-sizing: border-box; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--my-line-strong); background: rgba(4, 8, 20, .6); color: var(--my-text); font-family: var(--my-font); font-size: .95rem; line-height: 1.5; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.fo-modal input::placeholder, .fo-modal textarea::placeholder { color: var(--my-text-mute); }
.fo-modal textarea { resize: vertical; min-height: 140px; }
.fo-modal select option { background: var(--my-panel-solid); color: var(--my-text); }
.fo-modal input:focus, .fo-modal textarea:focus, .fo-modal select:focus { border-color: rgba(56, 208, 255, .6); background: rgba(6, 12, 28, .8); box-shadow: 0 0 0 3px rgba(56, 208, 255, .14); }
.fo-modal > input { margin-bottom: 12px; }
.fo-modal-msg { margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; font-size: .86rem; display: none; }
.fo-modal-msg.error { display: block; color: #ffa3b5; background: rgba(255, 107, 139, .10); border: 1px solid rgba(255, 107, 139, .40); }
.fo-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ============================================================== thread.html */
.th-wrap { max-width: 1040px; margin: 0 auto; padding: 28px 24px 72px; width: 100%; box-sizing: border-box; }
.th-crumb { margin-bottom: 18px; }

/* thread header: glass card with its own little sky */
.th-head {
  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 24px; padding: 28px 28px 26px;
  border-radius: 20px; border: 1px solid var(--my-line-strong);
  background:
    radial-gradient(620px 230px at 10% -20%, rgba(111, 123, 255, .32), transparent 62%),
    radial-gradient(540px 230px at 94% 0%, rgba(56, 208, 255, .22), transparent 60%),
    linear-gradient(180deg, #0c1636, #0a1227);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: fo-rise .4s ease both;
}
.th-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: -1; pointer-events: none; background: url("/assets/brand/sky.svg") center bottom / 1200px auto repeat-x; opacity: .6; }
.th-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.th-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-family: var(--my-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.th-tag-answered { color: var(--my-mint-lt); background: rgba(62, 230, 176, .12); border: 1px solid rgba(62, 230, 176, .42); }
.th-tag-hot { color: #ffb3c4; background: rgba(255, 107, 139, .12); border: 1px solid rgba(255, 107, 139, .42); }
.th-tag-lock { color: #d0d9ef; background: rgba(170, 196, 255, .08); border: 1px solid rgba(170, 196, 255, .24); }
.th-title { font-family: var(--my-head); font-weight: 700; font-size: 2.3rem; line-height: 1.1; letter-spacing: .01em; margin: 0; color: #f6f9ff; overflow-wrap: anywhere; text-shadow: 0 2px 26px rgba(56, 208, 255, .18); }
.th-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.th-meta-by { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .84rem; color: var(--my-text-dim); flex-wrap: wrap; }
.th-meta-by .op-name, .th-meta-by .op-cat { color: var(--my-accent-lt); font-weight: 600; text-decoration: none; }
.th-meta-by .op-name:hover, .th-meta-by .op-cat:hover { color: #fff; }
.th-meta-by .dot { opacity: .45; }
.th-meta-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-meta-stats .st { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 14, 32, .6); border: 1px solid var(--my-line-strong); font-size: .78rem; color: var(--my-text-dim); white-space: nowrap; }
.th-meta-stats .st svg { width: 14px; height: 14px; color: var(--my-accent-lt); flex-shrink: 0; }
.th-meta-stats .st b { color: #f2f6ff; font-weight: 700; }

/* post cards */
.th-posts { display: flex; flex-direction: column; gap: 16px; }
.post { position: relative; display: flex; gap: 22px; padding: 22px; border-radius: var(--my-radius); border: 1px solid var(--my-line); background: var(--my-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 14px 36px rgba(0, 0, 0, .26); animation: fo-rise .35s ease both; }
.post.op { border-color: rgba(56, 208, 255, .34); background: radial-gradient(560px 220px at 0% 0%, rgba(56, 208, 255, .10), transparent 65%), var(--my-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 46px rgba(47, 143, 255, .14); }
.post.op::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 208, 255, .85), rgba(155, 140, 255, .6), transparent); }
.post-side { width: 176px; flex-shrink: 0; padding-right: 20px; border-right: 1px solid var(--my-line); text-align: center; }
.post-side .side-head { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.post-side .av-lg { width: 66px; height: 66px; font-size: 26px; }
.post.op .post-side .av-lg { box-shadow: 0 0 0 3px rgba(6, 10, 22, .9), 0 0 0 4px rgba(56, 208, 255, .6), 0 0 24px rgba(56, 208, 255, .35); }
.post-side .name { display: inline-block; max-width: 100%; margin-top: 12px; font-family: var(--my-head); font-weight: 700; font-size: 1.12rem; letter-spacing: .02em; color: var(--my-accent-lt); text-decoration: none; overflow-wrap: anywhere; }
.post-side .name:hover { color: #fff; }
.post-side .pill-row { display: flex; justify-content: center; margin-top: 8px; }
.post-side .side-stats { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--my-line); display: flex; flex-direction: column; gap: 7px; font-size: .74rem; color: var(--my-text-mute); }
.post-side .side-stats .row { display: flex; justify-content: space-between; gap: 8px; }
.post-side .side-stats b { color: #d6e0fa; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-main-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.post-main-top .grow { flex: 1; }
.op-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-family: var(--my-head); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--my-accent-lt); background: rgba(56, 208, 255, .10); border: 1px solid rgba(56, 208, 255, .34); }
.op-badge::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--my-accent); box-shadow: 0 0 8px var(--my-accent); }
.post-main-top .p-date { font-size: .78rem; color: var(--my-text-mute); white-space: nowrap; }
.post-main-top .p-num { padding: 2px 9px; border-radius: 999px; background: rgba(170, 196, 255, .05); border: 1px solid var(--my-line); font-family: var(--my-head); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--my-text-dim); }
.post-body { flex: 1; }
.post-body p { margin: 0 0 12px; line-height: 1.78; color: #cdd6ee; font-size: .98rem; overflow-wrap: anywhere; }
.post-body p:last-child { margin-bottom: 0; }

/* "N replies" divider */
.th-section { display: flex; align-items: center; gap: 12px; margin: 10px 2px 0; font-family: var(--my-head); font-weight: 700; font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--my-violet-lt); }
.th-section::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; transform: rotate(45deg); background: var(--my-accent-grad); box-shadow: 0 0 10px rgba(56, 208, 255, .6); }
.th-section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--my-line-strong), transparent); }

/* reply composer */
.th-reply {
  position: relative; margin-top: 26px; padding: 22px; border-radius: 20px; border: 1px solid rgba(56, 208, 255, .24);
  background: radial-gradient(480px 180px at 100% 0%, rgba(155, 140, 255, .14), transparent 62%), radial-gradient(420px 160px at 0% 100%, rgba(56, 208, 255, .08), transparent 62%), var(--my-panel-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.th-reply::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 208, 255, .75), rgba(155, 140, 255, .55), transparent); }
.th-reply-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.th-reply-head .av-md { width: 40px; height: 40px; font-size: 15px; }
.th-reply-head .rh-name { font-family: var(--my-head); font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; text-transform: uppercase; color: #f2f6ff; }
.th-reply-head .rh-sub { font-size: .78rem; color: var(--my-text-dim); overflow-wrap: anywhere; }
.th-reply-head .rh-sub b { color: var(--my-accent-lt); font-weight: 600; }
.th-reply textarea { display: block; width: 100%; min-height: 128px; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--my-line-strong); background: rgba(4, 8, 20, .55); color: var(--my-text); font-family: var(--my-font); font-size: .96rem; line-height: 1.65; resize: vertical; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.th-reply textarea::placeholder { color: var(--my-text-mute); }
.th-reply textarea:focus { border-color: rgba(56, 208, 255, .6); background: rgba(6, 12, 28, .8); box-shadow: 0 0 0 3px rgba(56, 208, 255, .14); }
.th-reply-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.th-reply-note { flex: 1 1 260px; display: flex; align-items: flex-start; gap: 9px; font-size: .78rem; line-height: 1.5; color: var(--my-text-mute); }
.th-reply-note::before { content: "i"; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; border: 1px solid rgba(155, 140, 255, .55); color: var(--my-violet-lt); font-family: var(--my-head); font-size: .72rem; font-weight: 700; line-height: 15px; text-align: center; }
.btn-reply { padding: 12px 24px; font-size: .88rem; }

/* reply gate (login / pick a name / locked) */
.th-gate { position: relative; margin-top: 26px; padding: 30px 22px; text-align: center; border-radius: 20px; border: 1px dashed var(--my-line-strong); background: var(--my-panel); color: var(--my-text-dim); font-size: .95rem; }
.th-gate::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 14px; background: url("/assets/brand/mark.svg") center / contain no-repeat; opacity: .5; filter: drop-shadow(0 0 12px rgba(56, 208, 255, .45)); }

/* inline alerts under the composer */
.th-alert { margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: .86rem; display: none; }
.th-alert.error { display: block; color: #ffa3b5; background: rgba(255, 107, 139, .10); border: 1px solid rgba(255, 107, 139, .40); }
.th-alert.ok { display: block; color: var(--my-mint-lt); background: rgba(62, 230, 176, .10); border: 1px solid rgba(62, 230, 176, .40); }

/* ============================================================== responsive */
@media (max-width: 1100px) {
  .fo-row { grid-template-columns: 52px minmax(0, 1fr) 200px; }
}
@media (max-width: 960px) {
  .fo-body { grid-template-columns: minmax(0, 1fr); }
  .fo-side { position: static; }
  .fo-hero-mark { width: 190px; height: 190px; opacity: .08; }
}
@media (max-width: 720px) {
  .fo-hero-inner { padding: 26px 16px 36px; }
  .fo-title { font-size: 2.15rem; }
  .fo-sub { font-size: .94rem; }
  .fo-hero-actions { width: 100%; flex-wrap: wrap; border-radius: 22px; padding: 8px; }
  .fo-search { min-width: 0; flex: 1 1 100%; padding: 2px 10px; }
  .fo-hero-actions .fo-newbtn { flex: 1 1 100%; }
  .fo-hero-mark { top: 12px; right: -30px; width: 150px; height: 150px; }
  .fo-body { padding: 22px 16px 60px; gap: 20px; }
  .fo-group-head { padding: 14px 16px; }
  .fo-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 15px 16px; }
  .fo-glyph { width: 44px; height: 44px; border-radius: 13px; }
  .fo-glyph svg { width: 21px; height: 21px; }
  .fo-last { display: none; }
  .fo-cathead h1 { font-size: 1.5rem; gap: 11px; }
  .fo-cathead .fo-cat-ic { width: 42px; height: 42px; }
  .fo-trow { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 15px 16px; }
  .fo-trow-stats { justify-content: flex-start; }
  .fo-profile { padding: 72px 16px 18px; }
  .fo-profile-nick { font-size: 1.45rem; }
  .fo-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-modal { padding: 22px 18px; border-radius: 18px; }

  .th-wrap { padding: 20px 16px 60px; }
  .th-head { padding: 22px 18px 20px; border-radius: 18px; }
  .th-title { font-size: 1.65rem; }
  .post { flex-direction: column; gap: 14px; padding: 16px; }
  .post.op::before { left: 16px; right: 16px; }
  .post-side { width: auto; border-right: none; padding-right: 0; padding-bottom: 14px; border-bottom: 1px solid var(--my-line); display: flex; align-items: center; gap: 12px; text-align: left; flex-wrap: wrap; }
  .post-side .side-head { flex-direction: row; align-items: center; gap: 12px; }
  /* !important: avatar() writes its size inline; this compact size is the mobile override */
  .post-side .av-lg { width: 46px !important; height: 46px !important; font-size: 18px !important; margin: 0; }
  .post-side .name { margin-top: 0; }
  .post-side .pill-row { justify-content: flex-start; margin-top: 0; }
  .post-side .side-stats { display: none; }
  .th-reply { padding: 18px 16px; }
  .th-reply-actions .btn-reply { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-group, .fo-profile, .fo-hero-copy, .fo-hero-actions, .th-head, .post, .fo-modal, .fo-modal-bg { animation: none; }
  .fo-loading::before, .th-loading::before { animation-duration: 2.4s; }
}

/* ============================================================================
   LEGACY - css for /js/forum.js (the pre-redesign hash-routed forum SPA).
   No page loads forum.js today; these rules only keep it presentable in the
   night-sky palette if it is ever wired back in. Scoped to its own f-* / btn-go
   classes so nothing here can touch forum.html or thread.html.
   ========================================================================== */
.forum-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 16px 90px; color: var(--my-text); }
.forum-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 22px; align-items: start; }
.forum-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.forum-main { min-width: 0; }
#forum-app .forum-loading { padding: 70px 0; text-align: center; color: var(--my-text-dim); }
.f-muted { color: var(--my-text-dim); }
.f-side-card { background: var(--my-panel); border: 1px solid var(--my-line); border-radius: var(--my-radius); overflow: hidden; }
.f-side-brand { padding: 18px 18px 14px; border-bottom: 1px solid var(--my-line); background: radial-gradient(120% 120% at 0% 0%, rgba(56, 208, 255, .14), transparent 60%); }
.f-side-brand h2 { font-family: var(--my-head); font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; background: var(--my-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-side-brand p { color: var(--my-text-dim); font-size: .78rem; margin-top: 2px; }
.f-me { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.f-me-top { display: flex; align-items: center; gap: 11px; }
.f-me-info { min-width: 0; }
.f-me-name { font-weight: 700; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-me-guest { padding: 14px 16px; }
.f-bar { height: 6px; background: rgba(170, 196, 255, .08); border-radius: 99px; overflow: hidden; border: 1px solid var(--my-line); }
.f-bar > span { display: block; height: 100%; background: var(--my-accent-grad); border-radius: 99px; }
.f-me-xptext { color: var(--my-text-dim); font-size: .74rem; margin-top: 4px; }
.f-nav { display: flex; flex-direction: column; padding: 8px; }
.f-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; color: var(--my-text-dim); font-weight: 600; font-size: .9rem; text-decoration: none; transition: .14s; }
.f-nav-item:hover { background: rgba(56, 208, 255, .06); color: var(--my-text); }
.f-nav-item.active { background: rgba(56, 208, 255, .12); border-color: rgba(56, 208, 255, .3); color: var(--my-accent-lt); }
.f-nav-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--my-panel-2); border: 1px solid var(--my-line); }
.f-nav-cnt { margin-left: auto; font-size: .74rem; color: var(--my-text-mute); background: var(--my-panel-2); border-radius: 99px; padding: 1px 8px; }
.f-section { margin: 24px 0 14px; font-family: var(--my-head); font-size: 1.05rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.f-section::after { content: ""; flex: 1; height: 1px; background: var(--my-line); }
.f-hero { position: relative; overflow: hidden; margin-bottom: 20px; padding: 38px 30px; border-radius: 18px; border: 1px solid var(--my-line); background: url("/assets/brand/sky.svg") center bottom / 1200px auto repeat-x, radial-gradient(600px 240px at 12% 0%, rgba(111, 123, 255, .3), transparent 62%), linear-gradient(180deg, #0c1636, #0a1227); }
.f-hero h1 { position: relative; font-family: var(--my-head); font-size: 2rem; font-weight: 700; }
.f-hero h1 b { background: var(--my-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-hero p { position: relative; color: var(--my-text-dim); margin-top: 8px; max-width: 560px; font-size: .95rem; }
.btn-go { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border: none; border-radius: 999px; background: var(--my-accent-grad); color: var(--my-accent-ink); font-family: var(--my-head); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .88rem; line-height: 1.1; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(47, 143, 255, .3); transition: .15s; }
.btn-go:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-go.ghost { background: transparent; color: var(--my-text-dim); border: 1px solid var(--my-line-strong); box-shadow: none; }
.btn-go.ghost:hover { color: var(--my-text); border-color: rgba(56, 208, 255, .6); transform: none; }
.btn-go:disabled { opacity: .5; cursor: default; transform: none; }
.f-list { display: flex; flex-direction: column; gap: 10px; }
.f-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--my-line); background: var(--my-panel); text-decoration: none; transition: .14s; }
.f-row:hover { border-color: rgba(56, 208, 255, .4); background: rgba(56, 208, 255, .05); }
.f-row-body { flex: 1 1 auto; min-width: 0; }
.f-row-title { color: var(--my-text); font-weight: 600; font-size: 1.04rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-row-sub { color: var(--my-text-dim); font-size: .82rem; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f-by { display: inline-flex; align-items: center; gap: 6px; }
.f-byname, .f-author { color: var(--my-accent-lt); font-weight: 600; text-decoration: none; }
.f-author:hover { color: #fff; }
.f-trades { display: inline-flex; align-items: center; gap: 4px; color: var(--my-mint-lt); font-weight: 600; }
.f-dot { opacity: .5; }
.f-row-stats { display: flex; gap: 16px; flex-shrink: 0; color: var(--my-text-dim); }
.f-stat { display: flex; align-items: center; gap: 5px; font-size: .86rem; font-weight: 600; }
.f-stat svg, .f-trades svg { opacity: .8; }
.f-cat-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--my-line-strong); background: var(--my-panel-2); color: var(--my-accent-lt); font-size: .74rem; font-weight: 600; }
.f-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-weight: 800; color: #06101f; background: linear-gradient(135deg, hsl(calc(175deg + var(--h, 0deg) * .45) 78% 72%), hsl(calc(215deg + var(--h, 0deg) * .45) 66% 52%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.f-crumb { color: var(--my-text-dim); font-size: .85rem; margin-bottom: 16px; display: flex; gap: 7px; align-items: center; }
.f-crumb a { color: var(--my-accent-lt); text-decoration: none; }
.f-cathead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.f-cathead h1 { font-family: var(--my-head); font-size: 1.7rem; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.f-cathead .f-nav-ic { width: 38px; height: 38px; font-size: 19px; }
.f-thread { display: flex; flex-direction: column; gap: 14px; }
.f-post { display: flex; gap: 18px; padding: 18px 20px; border-radius: var(--my-radius); border: 1px solid var(--my-line); background: var(--my-panel); }
.f-post.f-op { border-color: rgba(56, 208, 255, .34); }
.f-post-side { flex-shrink: 0; width: 150px; display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center; padding-right: 16px; border-right: 1px solid var(--my-line); }
.f-post-main { flex: 1; min-width: 0; }
.f-post-title { font-family: var(--my-head); font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 14px; }
.f-post-body { color: #cdd6ee; line-height: 1.7; overflow-wrap: anywhere; font-size: .97rem; }
.f-post-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--my-line); font-size: .78rem; color: var(--my-text-mute); }
.f-replybox { margin-top: 20px; padding: 16px; border-radius: var(--my-radius); border: 1px solid var(--my-line); background: var(--my-panel); }
.f-replybox textarea, .f-modal textarea, .f-modal input { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--my-line-strong); background: rgba(4, 8, 20, .6); color: var(--my-text); font-family: inherit; font-size: .95rem; resize: vertical; transition: .15s; }
.f-replybox textarea:focus, .f-modal textarea:focus, .f-modal input:focus { outline: none; border-color: rgba(56, 208, 255, .6); box-shadow: 0 0 0 3px rgba(56, 208, 255, .14); }
.f-reply-actions { margin-top: 11px; text-align: right; }
.f-profile { margin-bottom: 10px; padding: 26px; border-radius: 18px; border: 1px solid var(--my-line); background: var(--my-panel); }
.f-profile-head { display: flex; gap: 20px; align-items: center; }
.f-profile-nick { font-family: var(--my-head); font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.f-profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.f-profile-stats > div { padding: 16px 8px; border-radius: 12px; border: 1px solid var(--my-line); background: rgba(170, 196, 255, .04); text-align: center; }
.f-profile-stats b { display: block; font-family: var(--my-head); font-size: 1.45rem; font-weight: 700; background: var(--my-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-profile-stats span { display: block; margin-top: 2px; color: var(--my-text-dim); font-size: .78rem; }
.f-empty { padding: 40px 18px; text-align: center; color: var(--my-text-dim); border-radius: 14px; border: 1px dashed var(--my-line-strong); background: var(--my-panel); }
.f-modal-bg { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(4, 7, 16, .74); backdrop-filter: blur(6px); }
.f-modal { width: 100%; max-width: 440px; padding: 26px; border-radius: 20px; border: 1px solid var(--my-line-strong); background: var(--my-panel-solid); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.f-modal-wide { max-width: 620px; }
.f-modal h3 { font-family: var(--my-head); font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.f-modal p { color: var(--my-text-dim); margin-bottom: 16px; font-size: .9rem; }
.f-modal input, .f-modal textarea { margin-bottom: 12px; }
.f-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
#f-toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 8px; }
.f-toast { padding: 12px 22px; border-radius: 999px; border: 1px solid var(--my-line-strong); background: rgba(12, 20, 42, .94); color: var(--my-text); font-size: .9rem; opacity: 0; transform: translateY(12px); transition: .3s; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.f-toast.show { opacity: 1; transform: none; }
.f-toast.ok { border-color: rgba(62, 230, 176, .45); color: var(--my-mint-lt); }
@media (max-width: 860px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-sidebar { position: static; }
  .f-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .f-nav-item { flex: 1 1 auto; }
  .f-nav-cnt { display: none; }
}
@media (max-width: 560px) {
  .f-post { flex-direction: column; gap: 12px; }
  .f-post-side { width: auto; flex-direction: row; border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: 1px solid var(--my-line); }
  .f-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-hero { padding: 26px 20px; }
}