/* Forums (modules/forums/render.php). Original VP design in the Midnight look, from the owner's ChatGPT mockup and matching
   the Home, Items and Surgery Clinic pages. Every rule is under #fmRoot so it outranks the template's tag resets and the
   Midnight theme's class-less rules; every element has a class. Icons are VP's own SVG line art (icons/), drawn as masks. */
#fmRoot{--f-bg:var(--vp-bg-elevated,#0E1422);--f-panel:var(--vp-panel,#111A2A);--f-raised:var(--vp-panel-raised,#172239);
  --f-txt:var(--vp-text,#E6EAF4);--f-muted:var(--vp-text-muted,#9AA6BD);--f-line:var(--vp-border,#27354F);--f-row:var(--vp-row-line,#1A2438);
  --f-hover:var(--vp-hover,#202C49);--f-active:var(--vp-active,#292044);--f-accent:var(--vp-accent,#A879FF);--f-accent2:var(--vp-accent-strong,#D04FE8);
  --f-link:var(--vp-link,#B99BFF);--f-ok:#3FD18B;--f-bad:#FF5D73;--f-gold:#F2C46B;
  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start;color:var(--f-txt);
  font-family:Inter,"Segoe UI",system-ui,Roboto,Arial,sans-serif;font-size:13px;line-height:1.45}
html[data-skin=midnight][data-mode=light] #fmRoot{--f-ok:#17804F;--f-bad:#C42F47;--f-gold:#9A6A0C}
#fmRoot *{box-sizing:border-box}
#fmRoot button,#fmRoot input,#fmRoot select,#fmRoot textarea{font:inherit;color:inherit}
#fmRoot a{color:var(--f-link);text-decoration:none}
#fmRoot.loading{opacity:.55;pointer-events:none;transition:opacity .15s}

/* icons */
#fmRoot .fmIco{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#fmRoot .fmIcoSm{width:14px;height:14px}
#fmRoot .fmIco-announce{--ico:url(icons/announce.svg)}#fmRoot .fmIco-chat{--ico:url(icons/chat.svg)}#fmRoot .fmIco-question{--ico:url(icons/question.svg)}
#fmRoot .fmIco-idea{--ico:url(icons/idea.svg)}#fmRoot .fmIco-bug{--ico:url(icons/bug.svg)}#fmRoot .fmIco-studio{--ico:url(icons/studio.svg)}
#fmRoot .fmIco-company{--ico:url(icons/company.svg)}#fmRoot .fmIco-roleplay{--ico:url(icons/roleplay.svg)}#fmRoot .fmIco-tv{--ico:url(icons/tv.svg)}
#fmRoot .fmIco-game{--ico:url(icons/game.svg)}#fmRoot .fmIco-music{--ico:url(icons/music.svg)}#fmRoot .fmIco-coffee{--ico:url(icons/coffee.svg)}
#fmRoot .fmIco-pin{--ico:url(icons/pin.svg)}#fmRoot .fmIco-lock{--ico:url(icons/lock.svg)}#fmRoot .fmIco-thread{--ico:url(icons/thread.svg)}
#fmRoot .fmIco-reply{--ico:url(icons/reply.svg)}#fmRoot .fmIco-like{--ico:url(icons/like.svg)}#fmRoot .fmIco-dislike{--ico:url(icons/dislike.svg)}
#fmRoot .fmIco-plus{--ico:url(icons/plus.svg)}#fmRoot .fmIco-shield{--ico:url(icons/shield.svg)}#fmRoot .fmIco-trash{--ico:url(icons/trash.svg)}
#fmRoot .fmIco-quote{--ico:url(icons/quote.svg)}#fmRoot .fmIco-flag{--ico:url(icons/flag.svg)}#fmRoot .fmIco-link{--ico:url(icons/link.svg)}
#fmRoot .fmIco-edit{--ico:url(icons/edit.svg)}#fmRoot .fmIco-ban{--ico:url(icons/ban.svg)}#fmRoot .fmIco-search{--ico:url(icons/search.svg)}

/* headings */
#fmRoot .fmHead{display:flex;align-items:center;gap:12px}
#fmRoot .fmHeadTx{min-width:0;flex:1}
#fmRoot h2.fmH1{margin:0;font:600 30px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--f-txt);display:flex;align-items:center;gap:16px}
#fmRoot h2.fmH1::after{content:"";width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--f-accent2),transparent);box-shadow:0 0 10px var(--f-accent2)}
#fmRoot .fmSub{margin:6px 0 0;color:var(--f-muted)}
#fmRoot a.fmBack{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--f-line);background:var(--f-panel);color:var(--f-txt);font-size:18px}
#fmRoot a.fmBack:hover{border-color:var(--f-accent)}
#fmRoot h3.fmH2{margin:0;font:600 17px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--f-txt);display:flex;align-items:center;gap:12px}
#fmRoot h3.fmH2::after{content:"";width:50px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--f-accent2),transparent);box-shadow:0 0 8px var(--f-accent2)}
#fmRoot h3.fmH3{margin:0 0 10px;font:600 15px/1.2 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--f-txt)}
#fmRoot .fmMeta{color:var(--f-muted);font-size:12px}

/* buttons, inputs */
#fmRoot .fmBtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--f-line);
  background:var(--f-raised);color:var(--f-txt);font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
#fmRoot .fmBtn:hover{border-color:var(--f-accent);background:var(--f-hover)}
#fmRoot .fmBtnMain{border:0;color:#fff;background:linear-gradient(90deg,var(--f-accent),var(--f-accent2));box-shadow:0 4px 16px color-mix(in srgb,var(--f-accent2) 40%,transparent)}
#fmRoot .fmBtnMain:hover{background:linear-gradient(90deg,var(--f-accent),var(--f-accent2));box-shadow:0 4px 22px color-mix(in srgb,var(--f-accent2) 65%,transparent)}
#fmRoot .fmBtnSm{padding:6px 11px;font-size:12px;border-radius:8px}
#fmRoot .fmBtnBad{color:var(--f-bad);border-color:color-mix(in srgb,var(--f-bad) 50%,var(--f-line))}
#fmRoot .fmBtnBad:hover{background:color-mix(in srgb,var(--f-bad) 14%,var(--f-panel));border-color:var(--f-bad)}
#fmRoot .fmBtn:disabled{opacity:.5;cursor:wait}
#fmRoot .fmInput{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--f-line);background:var(--f-bg);color:var(--f-txt)}
#fmRoot .fmInput:focus{outline:none;border-color:var(--f-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--f-accent) 25%,transparent)}
#fmRoot .fmInputSm{width:auto}
#fmRoot .fmLbl{display:block;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--f-muted)}

/* panels */
#fmRoot .fmPanel{background:var(--f-panel);border:1px solid var(--f-line);border-radius:12px;overflow:hidden;min-width:0}
#fmRoot .fmNote{margin:0;padding:11px 14px;border-radius:10px;border:1px solid;font-size:14px}
#fmRoot .fmNote-ok{color:var(--f-ok);border-color:color-mix(in srgb,var(--f-ok) 50%,transparent);background:color-mix(in srgb,var(--f-ok) 10%,var(--f-panel))}
#fmRoot .fmNote-bad{color:var(--f-bad);border-color:color-mix(in srgb,var(--f-bad) 50%,transparent);background:color-mix(in srgb,var(--f-bad) 10%,var(--f-panel))}
#fmRoot .fmNote-info{color:var(--f-link);border-color:color-mix(in srgb,var(--f-accent) 50%,transparent);background:color-mix(in srgb,var(--f-accent) 10%,var(--f-panel))}
#fmRoot .fmEmpty{margin:0;padding:22px 16px;text-align:center;color:var(--f-muted)}

/* tabs */
#fmRoot .fmTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:12px;background:var(--f-panel);border:1px solid var(--f-line)}
#fmRoot a.fmTab{padding:9px 10px;border-radius:9px;text-align:center;font-weight:600;color:var(--f-muted);transition:background .2s,color .2s}
#fmRoot a.fmTab:hover{color:var(--f-txt);background:var(--f-hover)}
#fmRoot a.fmTab.on{color:#fff;background:linear-gradient(90deg,var(--f-accent),var(--f-accent2));box-shadow:0 0 14px color-mix(in srgb,var(--f-accent2) 35%,transparent)}

/* avatars, names */
#fmRoot .fmAv{display:block;flex:none;border-radius:50%;object-fit:cover;background:var(--f-raised);border:2px solid color-mix(in srgb,var(--f-accent) 55%,var(--f-line))}
#fmRoot .fmAv-xs{width:26px;height:26px;border-width:1px}
#fmRoot .fmAv-sm{width:32px;height:32px}
#fmRoot .fmAv-md{width:44px;height:44px}
#fmRoot .fmAv-lg{width:84px;height:84px;box-shadow:0 0 18px color-mix(in srgb,var(--f-accent) 35%,transparent)}
#fmRoot a.fmAvLink{display:block;flex:none;border-radius:50%}
#fmRoot a.fmName{color:var(--f-txt);font-weight:600}
#fmRoot a.fmName:hover{color:var(--f-link)}
#fmRoot .fmDotOn{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--f-ok);box-shadow:0 0 6px var(--f-ok);margin-right:6px;vertical-align:1px}

/* ---------- index: category panels ---------- */
#fmRoot .fmCatHead{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px 220px;gap:12px;align-items:end;padding:13px 14px;border-bottom:1px solid var(--f-line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--f-accent) 12%,var(--f-panel)),var(--f-panel))}
#fmRoot .fmCols{display:contents}
#fmRoot .fmCol,#fmRoot .fmColWide{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f-muted);text-align:center}
#fmRoot .fmColWide{text-align:left}
#fmRoot a.fmSec{display:grid;grid-template-columns:40px minmax(0,1fr) 10px 64px 64px 220px;gap:12px;align-items:center;padding:11px 14px;color:var(--f-txt);
  border-top:1px solid var(--f-row);transition:background .2s}
#fmRoot a.fmSec:first-of-type{border-top:0}
#fmRoot a.fmSec:hover{background:var(--f-hover)}
#fmRoot .fmSecIco{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--f-accent);
  border:1px solid color-mix(in srgb,var(--f-accent) 55%,transparent);background:color-mix(in srgb,var(--f-accent) 10%,transparent)}
#fmRoot a.fmSec.unread .fmSecIco{color:#fff;background:linear-gradient(135deg,var(--f-accent),var(--f-accent2));box-shadow:0 0 12px color-mix(in srgb,var(--f-accent2) 45%,transparent)}
#fmRoot .fmSecTx{display:grid;min-width:0}
#fmRoot .fmSecName{font-weight:700;font-size:14px}
#fmRoot .fmSecDesc{color:var(--f-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmRoot .fmDot{width:9px;height:9px;border-radius:50%;background:transparent}
#fmRoot a.fmSec.unread .fmDot{background:var(--f-accent2);box-shadow:0 0 8px var(--f-accent2)}
#fmRoot .fmNum{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-weight:600;color:var(--f-txt);font-variant-numeric:tabular-nums}
#fmRoot .fmLatest{display:flex;align-items:center;gap:9px;min-width:0}
#fmRoot .fmLatestTx{display:grid;min-width:0}
#fmRoot .fmLatestTitle{font-size:12px;color:var(--f-link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmRoot .fmLatestNone{color:var(--f-muted);font-size:12px}
#fmRoot .fmFoot{display:flex;flex-wrap:wrap;gap:18px;padding:4px 2px;color:var(--f-muted);font-size:12px}

/* ---------- section: filters, thread rows ---------- */
#fmRoot .fmBar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
#fmRoot .fmFilters{display:flex;gap:6px;padding:4px;border-radius:12px;background:var(--f-panel);border:1px solid var(--f-line)}
#fmRoot a.fmFilter{padding:7px 14px;border-radius:9px;font-weight:600;color:var(--f-muted)}
#fmRoot a.fmFilter:hover{color:var(--f-txt);background:var(--f-hover)}
#fmRoot a.fmFilter.on{color:#fff;background:var(--f-active);box-shadow:inset 0 0 0 1px var(--f-accent)}
#fmRoot .fmSort{display:flex;align-items:center;gap:8px}
#fmRoot .fmSortLbl{font-size:12px;color:var(--f-muted)}
#fmRoot .fmSortSel{padding:7px 10px;border-radius:9px;border:1px solid var(--f-line);background:var(--f-panel);color:var(--f-txt)}
#fmRoot .fmListHead,#fmRoot a.fmRow{display:grid;grid-template-columns:34px minmax(0,1fr) 150px 64px 64px 160px;gap:12px;align-items:center;padding:10px 14px}
#fmRoot .fmListHead{border-bottom:1px solid var(--f-line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f-muted);
  background:linear-gradient(90deg,color-mix(in srgb,var(--f-accent) 12%,var(--f-panel)),var(--f-panel))}
#fmRoot .fmListHead > span:first-child{grid-column:span 2}
#fmRoot .fmListHead > span:nth-child(3),#fmRoot .fmListHead > span:nth-child(4){text-align:center}
#fmRoot a.fmRow{color:var(--f-txt);border-top:1px solid var(--f-row);transition:background .2s}
#fmRoot a.fmRow:first-child{border-top:0}
#fmRoot a.fmRow:hover{background:var(--f-hover)}
#fmRoot a.fmRow.pinned{background:color-mix(in srgb,var(--f-accent) 7%,var(--f-panel))}
#fmRoot .fmRowIco{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--f-muted);background:var(--f-bg);border:1px solid var(--f-line)}
#fmRoot a.fmRow.unread .fmRowIco{color:var(--f-accent2);border-color:color-mix(in srgb,var(--f-accent2) 55%,var(--f-line))}
#fmRoot a.fmRow.pinned .fmRowIco{color:var(--f-gold)}
#fmRoot .fmRowTx{display:grid;min-width:0}
#fmRoot .fmRowTitle{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmRoot a.fmRow.unread .fmRowTitle{color:#fff}
html[data-skin=midnight][data-mode=light] #fmRoot a.fmRow.unread .fmRowTitle{color:var(--f-txt)}
#fmRoot .fmRowEx{color:var(--f-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmRoot .fmRowMob{display:none}
#fmRoot .fmRowBy,#fmRoot .fmRowLast{display:flex;align-items:center;gap:8px;min-width:0}
#fmRoot .fmRowLastTx{display:grid;min-width:0}
#fmRoot .fmRowByName{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fmRoot .fmRating{color:var(--f-ok)}
#fmRoot .fmRating.neg{color:var(--f-bad)}

/* pager */
#fmRoot .fmPager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
#fmRoot .fmPg{display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--f-line);background:var(--f-panel);color:var(--f-txt);font-weight:600}
#fmRoot a.fmPg:hover{border-color:var(--f-accent)}
#fmRoot .fmPg.on{color:#fff;border:0;background:linear-gradient(135deg,var(--f-accent),var(--f-accent2))}
#fmRoot .fmPg.off{opacity:.35}
#fmRoot .fmPgGap{align-self:center;color:var(--f-muted)}

/* ---------- thread ---------- */
#fmRoot a.fmCrumb{justify-self:start;display:inline-flex;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--f-line);background:var(--f-panel);color:var(--f-txt);font-weight:600}
#fmRoot a.fmCrumb:hover{border-color:var(--f-accent)}
#fmRoot .fmThreadHead{display:flex;align-items:center;gap:14px;padding:14px 16px}
#fmRoot .fmThreadHeadTx{display:grid;gap:4px;min-width:0;flex:1}
#fmRoot h2.fmThreadTitle{margin:0;font:600 20px/1.2 var(--f-display);letter-spacing:.03em;color:var(--f-txt);overflow-wrap:anywhere}
#fmRoot .fmTag{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:2px 8px;border-radius:999px;font:600 11px/1.4 Inter,sans-serif;letter-spacing:0;
  vertical-align:3px;color:var(--f-gold);border:1px solid color-mix(in srgb,var(--f-gold) 50%,transparent)}
#fmRoot .fmTagBad{color:var(--f-bad);border-color:color-mix(in srgb,var(--f-bad) 50%,transparent)}
#fmRoot .fmSwitch{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;color:var(--f-muted);font-size:12px;font-weight:600}
#fmRoot .fmSwitchTrack{position:relative;width:38px;height:22px;border-radius:999px;background:var(--f-raised);border:1px solid var(--f-line);transition:background .2s}
#fmRoot .fmSwitchKnob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--f-muted);transition:left .2s,background .2s}
#fmRoot .fmSwitch.on{color:var(--f-txt)}
#fmRoot .fmSwitch.on .fmSwitchTrack{background:linear-gradient(90deg,var(--f-accent),var(--f-accent2));border-color:transparent}
#fmRoot .fmSwitch.on .fmSwitchKnob{left:18px;background:#fff}
#fmRoot .fmTools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--f-gold) 45%,var(--f-line));background:color-mix(in srgb,var(--f-gold) 5%,var(--f-panel))}
#fmRoot .fmToolsLbl{display:inline-flex;align-items:center;gap:6px;margin-right:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--f-gold)}
#fmRoot .fmConfirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--f-bad) 50%,transparent);background:color-mix(in srgb,var(--f-bad) 8%,var(--f-panel))}
#fmRoot .fmConfirm[hidden],#fmRoot .fmInline[hidden]{display:none}
#fmRoot .fmPosts{display:grid;gap:12px}
#fmRoot .fmPost{display:grid;grid-template-columns:170px minmax(0,1fr);background:var(--f-panel);border:1px solid var(--f-line);border-radius:12px;overflow:hidden;scroll-margin-top:12px}
#fmRoot .fmPost.op{border-color:color-mix(in srgb,var(--f-accent) 45%,var(--f-line))}
#fmRoot .fmPost:target{box-shadow:0 0 0 2px var(--f-accent2)}
#fmRoot .fmPoster{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;text-align:center;border-right:1px solid var(--f-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--f-accent) 9%,var(--f-panel)),var(--f-panel))}
#fmRoot .fmPosterTx{display:grid;gap:4px;justify-items:center;min-width:0;width:100%}
#fmRoot .fmPosterName{max-width:100%;overflow:hidden}
#fmRoot .fmBadge{display:inline-block;max-width:100%}
#fmRoot .fmPosterLine{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--f-muted)}
#fmRoot .fmPosterStudio{color:var(--f-link)}
#fmRoot .fmPosterLine.fmOn{color:var(--f-ok)}
#fmRoot .fmPosterLine.fmOff .fmDotOn{background:var(--f-muted);box-shadow:none}
#fmRoot .fmPostMain{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-width:0}
#fmRoot .fmPostMeta{display:flex;gap:10px;color:var(--f-muted);font-size:12px}
#fmRoot .fmEdited:empty{display:none}
#fmRoot .fmEdited{font-style:italic}
#fmRoot .fmPostNo{margin-left:auto}
#fmRoot button.fmIconBtn{display:grid;place-items:center;width:26px;height:26px;margin-top:-4px;padding:0;border-radius:7px;border:1px solid transparent;background:none;color:var(--f-muted);cursor:pointer}
#fmRoot button.fmIconBtn:hover{color:var(--f-txt);border-color:var(--f-line);background:var(--f-hover)}
#fmRoot button.fmIconBad:hover{color:var(--f-bad);border-color:color-mix(in srgb,var(--f-bad) 50%,var(--f-line))}
#fmRoot .fmBody{flex:1;font-size:14px;line-height:1.6;color:var(--f-txt);overflow-wrap:anywhere}
#fmRoot .fmBody img{max-width:100%;height:auto;border-radius:8px}
#fmRoot .fmBody p{margin:0 0 8px}
#fmRoot .fmBody blockquote{margin:0 0 10px;padding:10px 14px;border-left:3px solid var(--f-accent);border-radius:0 10px 10px 0;
  background:color-mix(in srgb,var(--f-accent) 9%,var(--f-bg));color:var(--f-muted);font-size:13px}
#fmRoot .fmBody blockquote b:first-child{color:var(--f-txt)}
#fmRoot .fmActs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:10px;border-top:1px solid var(--f-row)}
#fmRoot .fmVotes{display:inline-flex;gap:6px}
#fmRoot .fmActsMine{display:inline-flex;gap:6px;margin-left:auto}
#fmRoot .fmT{color:inherit}
#fmRoot button.fmAct{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--f-line);background:transparent;
  color:var(--f-muted);font-size:12px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
#fmRoot button.fmAct:hover{color:var(--f-txt);border-color:var(--f-accent);background:var(--f-hover)}
#fmRoot button.fmAct .fmIco{width:15px;height:15px}
#fmRoot button.fmVote.on{color:var(--f-ok);border-color:color-mix(in srgb,var(--f-ok) 55%,var(--f-line));background:color-mix(in srgb,var(--f-ok) 10%,transparent)}
#fmRoot button.fmVoteDown.on{color:var(--f-bad);border-color:color-mix(in srgb,var(--f-bad) 55%,var(--f-line));background:color-mix(in srgb,var(--f-bad) 10%,transparent)}
#fmRoot button.fmActBad:hover{color:var(--f-bad);border-color:var(--f-bad)}
#fmRoot .fmPanels:empty{display:none}
#fmRoot .fmInline{display:grid;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--f-line);background:var(--f-bg)}
#fmRoot .fmInline textarea{min-height:70px;resize:vertical}
#fmRoot .fmInlineRow{display:flex;gap:8px}
#fmRoot .fmInlineBtns{display:flex;gap:8px}
#fmRoot .fmGone{margin:0;padding:14px 16px;color:var(--f-muted);font-style:italic;grid-column:1/-1}
#fmRoot .fmEditBox{display:grid;gap:8px}

/* reply / new thread editor */
#fmRoot .fmReply,#fmRoot .fmNew{padding:14px 16px}
#fmRoot .fmReplyRow{display:flex;gap:12px;align-items:flex-start}
#fmRoot .fmReplyEd{flex:1;min-width:0}
#fmRoot .fmReplyBtns{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
#fmRoot .fmSubject{margin-bottom:14px;font-size:15px}
#fmRoot .vpEditor{border:1px solid var(--f-line);border-radius:10px;overflow:hidden;background:var(--f-bg)}
#fmRoot .vpEditorArea{padding:10px 12px;color:var(--f-txt);background:var(--f-raised);outline:none;line-height:1.6}
#fmRoot .vpEditorBar{border-top:1px solid var(--f-line);background:var(--f-raised)}

/* My Threads, search */
#fmRoot .fmSearch{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
#fmRoot .fmSearchQ{flex:1 1 220px;width:auto}
#fmRoot .fmResultCount{margin:0;color:var(--f-muted)}
#fmRoot .fmResults{display:grid;gap:10px}
#fmRoot a.fmResult{display:grid;gap:8px;padding:12px 14px;color:var(--f-txt);transition:border-color .2s}
#fmRoot a.fmResult:hover{border-color:var(--f-accent)}
#fmRoot .fmResultHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#fmRoot .fmResultTitle{font-weight:700}
#fmRoot .fmResultEx{color:var(--f-muted);font-size:13px}
#fmRoot mark.fmMark{background:color-mix(in srgb,var(--f-accent2) 35%,transparent);color:inherit;border-radius:3px;padding:0 2px}

/* toast (outside #fmRoot so a page swap doesn't drop it) */
.fmToast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9999;max-width:90vw;padding:11px 18px;border-radius:12px;font:600 14px/1.4 Inter,"Segoe UI",sans-serif;
  color:#fff;background:#1B1430;border:1px solid #A879FF;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 18px rgba(168,121,255,.35)}
.fmToast.bad{border-color:#FF5D73;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 18px rgba(255,93,115,.35)}
/* clear of the phone bottom icon bar */
html.vp-mobile .fmToast{bottom:76px}

/* ---------- narrower screens ---------- */
@media (max-width:900px){
  #fmRoot .fmCatHead{grid-template-columns:minmax(0,1fr) 54px 54px}
  #fmRoot .fmColWide{display:none}
  #fmRoot a.fmSec{grid-template-columns:40px minmax(0,1fr) 10px 54px 54px}
  #fmRoot .fmLatest{display:none}
  #fmRoot .fmListHead,#fmRoot a.fmRow{grid-template-columns:34px minmax(0,1fr) 56px 56px 130px}
  #fmRoot .fmListHead > span:nth-child(2),#fmRoot .fmRowBy{display:none}
}
@media (max-width:640px){
  /* phones: everything a step smaller (owner: "the font is a little big throughout") */
  #fmRoot{font-size:12px;gap:10px}
  #fmRoot h2.fmH1{font-size:20px;gap:10px}
  #fmRoot h2.fmH1::after{width:36px}
  #fmRoot .fmSub{font-size:12px;margin-top:3px}
  #fmRoot a.fmBack{width:30px;height:30px;font-size:15px;border-radius:8px}
  #fmRoot .fmBtn{padding:7px 12px;font-size:12px;border-radius:8px}
  #fmRoot a.fmTab{padding:7px 6px;font-size:12px}
  #fmRoot a.fmFilter{padding:5px 6px;font-size:12px}
  #fmRoot .fmFilters{padding:3px}
  #fmRoot .fmSortSel{padding:5px 8px;font-size:12px}
  #fmRoot h3.fmH2{font-size:14px}
  #fmRoot .fmSecName,#fmRoot .fmRowTitle{font-size:13px}
  #fmRoot .fmMeta,#fmRoot .fmRowMob{font-size:11px}
  #fmRoot .fmBody{font-size:13px;line-height:1.55}
  #fmRoot h2.fmThreadTitle{font-size:17px}
  #fmRoot .fmEmpty{padding:16px 12px}
  #fmRoot .fmHead{flex-wrap:wrap}
  #fmRoot .fmCatHead{grid-template-columns:minmax(0,1fr) 44px 44px;padding:11px 12px}
  #fmRoot a.fmSec{grid-template-columns:34px minmax(0,1fr) 8px 44px 44px;gap:8px;padding:10px 12px}
  #fmRoot .fmSecIco{width:34px;height:34px}
  #fmRoot .fmSecDesc{display:none}
  #fmRoot .fmListHead{display:none}
  #fmRoot a.fmRow{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  #fmRoot .fmRowIco{width:30px;height:30px}
  #fmRoot .fmRowEx,#fmRoot .fmRowLast,#fmRoot .fmRating{display:none}
  #fmRoot .fmRowMob{display:block;color:var(--f-muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #fmRoot .fmBar{flex-direction:column;align-items:stretch}
  #fmRoot .fmFilters{justify-content:space-between}
  #fmRoot a.fmFilter{flex:1;text-align:center;padding:6px;white-space:nowrap}
  #fmRoot .fmFilters{align-items:center}
  #fmRoot .fmThreadHead{flex-wrap:wrap;padding:12px}
  #fmRoot .fmThreadHead > #fmSub{width:100%;display:flex;justify-content:flex-end}
  /* the poster card becomes a strip above the post */
  #fmRoot .fmPost{grid-template-columns:minmax(0,1fr)}
  #fmRoot .fmPoster{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;text-align:left;border-right:0;border-bottom:1px solid var(--f-line)}
  #fmRoot .fmAv-lg{width:46px;height:46px}
  #fmRoot .fmPosterTx{display:flex;flex-wrap:wrap;align-items:center;justify-items:start;gap:2px 10px}
  #fmRoot .fmPosterName{flex-basis:100%}
  #fmRoot .fmPostMain{padding:12px}
  #fmRoot .fmAct .fmT{display:none}
  #fmRoot .fmVote .fmT{display:inline}
  #fmRoot .fmReplyRow > .fmAv{display:none}
  #fmRoot .fmSearch > *{flex:1 1 100%}
}

/* ---------- public (logged-out) view, inside the landing shell ---------- */
.lp .lpSection.lpForum{max-width:920px;margin:28px auto 0;padding:0 16px;border:0;background:none;box-shadow:none}
#fmRoot.fmPublic{margin-bottom:40px}
#fmRoot a.fmRow.fmNewsRow{grid-template-columns:34px minmax(0,1fr) 96px 56px}
#fmRoot .fmNewsDate{color:var(--f-muted);font-size:12px;text-align:right}
#fmRoot .fmStatic{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--f-line);color:var(--f-muted);font-size:12px;font-weight:600}
#fmRoot .fmJoin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;
  border-color:color-mix(in srgb,var(--f-accent) 55%,var(--f-line));background:linear-gradient(90deg,color-mix(in srgb,var(--f-accent) 14%,var(--f-panel)),var(--f-panel))}
#fmRoot .fmJoinTx{display:grid;gap:2px}
#fmRoot .fmJoinTitle{font:600 17px/1.2 var(--f-display);letter-spacing:.05em;text-transform:uppercase;color:var(--f-txt)}
#fmRoot .fmJoinSub{color:var(--f-muted)}
#fmRoot .fmJoinBtns{display:flex;gap:8px}
#fmRoot label.fmBtn{cursor:pointer}
@media (max-width:640px){
  #fmRoot a.fmRow.fmNewsRow{grid-template-columns:30px minmax(0,1fr) auto}
  #fmRoot a.fmRow.fmNewsRow .fmRowEx{display:block;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #fmRoot a.fmRow.fmNewsRow .fmNum{display:none}
  #fmRoot .fmJoinBtns{width:100%}
  #fmRoot .fmJoinBtns .fmBtn{flex:1}
}
/* follow the landing page's own colours (and its light mode) */
.lp #fmRoot{--f-bg:var(--bg2);--f-panel:var(--panel);--f-raised:var(--raised);--f-txt:var(--txt);--f-muted:var(--muted);--f-line:var(--line);
  --f-row:var(--row);--f-accent:var(--accent);--f-accent2:var(--accent2);--f-link:var(--link);--f-hover:color-mix(in srgb,var(--accent) 10%,var(--panel))}