/* The forum (docs/65 §2): the owner's layout — rail, forums with icon tiles, side panels, statistics — in Nuxtre's colours.
   Calm dark panels for reading; the neon is in the tiles, the edges and the glow. No inline styles (CSP): every width and
   colour is a class. */
.nx-main:has(> .fm) { max-width: 1480px; padding-top: 14px; }
.fm { --fm-bg: #0a0f2e; --fm-panel: #0e1438; --fm-row: #121a46; --fm-row-hi: #17205a; --fm-line: rgba(95, 223, 246, .16); --fm-dim: #9aa3d6;
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; color: var(--nx-text); font: 15px/1.5 var(--nx-font-body); }
.fm a { color: var(--nx-link); }
.fm .dim, .fm small.dim { color: var(--fm-dim); }
.fm .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* colours of tiles and swatches */
.fc-cyan { --fc: #0bdefb; --fc2: #0865ec; } .fc-magenta { --fc: #f209f3; --fc2: #8e10c8; } .fc-acid { --fc: #cef41b; --fc2: #5fae0f; } .fc-orange { --fc: #ff8a1c; --fc2: #e23a00; }
.fc-violet { --fc: #9b6bff; --fc2: #5122d6; } .fc-blue { --fc: #2f8bff; --fc2: #1640c8; } .fc-green { --fc: #39ff8a; --fc2: #0e9a55; } .fc-red { --fc: #ff4d6d; --fc2: #b5123a; }

/* ---------------------------------------------------------------- the rail */
.fm-rail { position: sticky; top: 12px; align-self: start; background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 22px; padding: 18px 12px; box-shadow: 0 0 0 1px rgba(242, 9, 243, .08), 0 20px 50px rgba(0, 0, 0, .35); }
.fm-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px 16px; font: 22px/1 var(--nx-font-display); letter-spacing: .06em; color: var(--nx-text) !important; }
.fm-brand-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--nx-cyan), var(--nx-magenta)); color: #fff; font: 22px var(--nx-font-display); box-shadow: var(--nx-glow-cyan); }
.fm-rail nav { display: flex; flex-direction: column; gap: 2px; }
.fm-rail nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--fm-dim); text-decoration: none; font-weight: 600; font-size: 14px; position: relative; }
.fm-rail nav a:hover { color: var(--nx-text); background: rgba(95, 223, 246, .07); }
.fm-rail nav a[aria-current] { color: var(--nx-text); background: linear-gradient(90deg, rgba(11, 222, 251, .16), rgba(11, 222, 251, 0)); }
.fm-rail nav a[aria-current]::after { content: ''; position: absolute; right: -13px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--nx-acid); box-shadow: 0 0 10px var(--nx-acid); }
.fm-ri svg { fill: currentColor; display: block; }
.fm-rail hr { border: 0; border-top: 1px solid var(--fm-line); margin: 14px 8px; }
.fm-count { margin-left: auto; min-width: 20px; height: 20px; border-radius: 10px; background: var(--nx-blue); color: #fff; font: 700 11px/20px var(--nx-font-body); text-align: center; padding: 0 6px; }

/* ---------------------------------------------------------------- the top bar, columns, crumbs */
.fm-main { min-width: 0; }
.fm-top { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.fm-railbtn { display: none; background: var(--fm-panel); border: 1px solid var(--fm-line); color: var(--nx-text); border-radius: 12px; width: 44px; height: 44px; cursor: pointer; }
.fm-railbtn svg { fill: currentColor; }
.fm-search { flex: 0 1 420px; display: flex; align-items: center; gap: 10px; background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 14px; padding: 0 14px; height: 46px; }
.fm-search svg { fill: var(--fm-dim); flex: none; }
.fm-search input { flex: 1; background: none; border: 0; color: var(--nx-text); font: 15px var(--nx-font-body); outline: none; min-width: 0; }
.fm-search:focus-within { border-color: var(--nx-cyan); box-shadow: 0 0 0 3px rgba(11, 222, 251, .2); }
.fm-top-sp { flex: 1; }
.fm-iconbtn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fm-line); background: var(--fm-panel); color: var(--fm-dim); cursor: pointer; }
.fm-iconbtn svg { fill: currentColor; }
.fm-iconbtn:hover, .fm-iconbtn[aria-expanded="true"] { color: var(--nx-text); border-color: var(--nx-cyan); }
.fm-pip { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--nx-magenta); color: #fff; font: 700 10px/18px var(--nx-font-body); text-align: center; padding: 0 4px; box-shadow: 0 0 8px var(--nx-magenta); }
.fm-meav img { display: block; width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--nx-cyan); }
.fm-bellbox { position: relative; }
.fm-bellpanel { position: absolute; right: 0; top: 52px; z-index: 50; width: min(360px, 90vw); max-height: 420px; overflow: auto; background: var(--fm-panel); border: 1px solid var(--nx-cyan); border-radius: 16px; padding: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), var(--nx-glow-cyan); }
.fm-bellpanel ul { list-style: none; margin: 0; padding: 0; }
.fm-bellpanel li a { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--nx-text); font-size: 14px; }
.fm-bellpanel li a:hover { background: var(--fm-row); }
.fm-bellpanel li.unread a { border-left: 3px solid var(--nx-acid); }
.fm-bellpanel small { display: block; color: var(--fm-dim); font-size: 12px; }
.fm-crumbs { color: var(--fm-dim); font-size: 13px; margin: 4px 2px 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fm-crumbs::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 8px var(--nx-cyan); margin-right: 4px; }
.fm-crumbs a { color: var(--fm-dim); text-decoration: none; } .fm-crumbs a:hover { color: var(--nx-text); }
.fm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.fm-cols:has(> .fm-col:only-child) { grid-template-columns: minmax(0, 1fr); }
.fm-col { min-width: 0; }
.fm-col > section, .fm-col > .fm-card { margin: 0 0 26px; }
.fm-flash { background: var(--fm-panel); border: 1px solid var(--fm-line); border-left: 4px solid var(--nx-acid); border-radius: 12px; padding: 12px 16px; margin: 0 0 18px; }
.fm-flash.bad { border-left-color: var(--nx-danger); }
.fm-empty { color: var(--fm-dim); background: var(--fm-panel); border: 1px dashed var(--fm-line); border-radius: 14px; padding: 18px; }
.fm-h1 { font: 32px/1.1 var(--nx-font-display); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 8px; }
.fm-h2 { display: flex; align-items: center; gap: 10px; font: 700 18px var(--nx-font-body); margin: 0 0 14px; }
.fm-h2 svg { fill: var(--nx-cyan); }
.fm-rank { color: var(--nx-acid); }

/* ---------------------------------------------------------------- buttons, tags */
.fm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--fm-line); background: var(--fm-row); color: var(--nx-text) !important; font: 600 14px var(--nx-font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.fm-btn:hover { border-color: var(--nx-cyan); box-shadow: 0 0 12px rgba(11, 222, 251, .35); }
.fm-btn.hot { background: linear-gradient(180deg, #e8ff53, #8ccf12); color: #0b1156 !important; border-color: transparent; box-shadow: 0 0 16px rgba(206, 244, 27, .45); }
.fm-btn.on { border-color: var(--nx-acid); color: var(--nx-acid) !important; }
.fm-btn.bad { border-color: var(--nx-danger); color: #ffd0d8 !important; }
.fm-btn.big { padding: 13px 22px; font-size: 16px; }
.fm-link { background: none; border: 0; color: var(--nx-link); cursor: pointer; font: inherit; padding: 0; }
.fm-tag { display: inline-block; font: 700 10px/1 var(--nx-font-console); letter-spacing: .12em; padding: 4px 7px; border-radius: 6px; border: 1px solid var(--nx-magenta); color: #ffc2fb; vertical-align: middle; }
.fm-tag.off { border-color: var(--nx-cyan); color: var(--nx-ice); }
.fm-tag.bad { border-color: var(--nx-danger); color: #ffc2cc; }
.fm-in { display: inline-block; font-size: 12px; color: var(--fm-dim) !important; text-decoration: none; }

/* ---------------------------------------------------------------- tiles */
.fm-tile { display: inline-grid; place-items: center; flex: none; border-radius: 12px; background: linear-gradient(160deg, var(--fc), var(--fc2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 14px color-mix(in srgb, var(--fc) 45%, transparent); }
.fm-tile svg { fill: #fff; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.fm-tile.fm-sm { width: 30px; height: 30px; border-radius: 9px; } .fm-tile.fm-sm svg { width: 17px; height: 17px; }
.fm-tile.fm-md { width: 48px; height: 48px; } .fm-tile.fm-md svg { width: 26px; height: 26px; }
.fm-tile.fm-lg { width: 84px; height: 84px; border-radius: 22px; } .fm-tile.fm-lg svg { width: 46px; height: 46px; }
.fm-emo { font-size: 26px; line-height: 1; } .fm-sm .fm-emo { font-size: 16px; } .fm-lg .fm-emo { font-size: 46px; }

/* ---------------------------------------------------------------- the hero */
.fm-hero { display: flex; align-items: center; gap: 20px; background: radial-gradient(120% 140% at 100% 0%, rgba(242, 9, 243, .22), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(11, 222, 251, .18), transparent 60%), var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 26px; padding: 34px 36px; margin: 0 0 30px; overflow: hidden; }
.fm-hero > div { flex: 1; min-width: 0; }
.fm-kicker { margin: 0 0 8px; font: 700 12px var(--nx-font-console); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-acid); text-shadow: none; }
.fm-hero .fm-hero-t { font: 40px/1.05 var(--nx-font-display); letter-spacing: .02em; margin: 0 0 12px; text-shadow: 0 0 18px rgba(11, 222, 251, .35); overflow-wrap: anywhere; }
.fm-hero p { color: var(--fm-dim); max-width: 60ch; margin: 0 0 16px; }
.fm-hero-cta { display: flex; gap: 12px; align-items: center; }
.fm-go { display: inline-block; padding: 13px 26px; border-radius: 14px; background: linear-gradient(180deg, #e8ff53, #7fc40e); color: #0b1156 !important; font: 700 15px var(--nx-font-body); text-decoration: none; box-shadow: 0 0 18px rgba(206, 244, 27, .5); }
.fm-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0a0e28; border: 1px solid var(--fm-line); color: var(--nx-text) !important; text-decoration: none; font-size: 20px; }
.fm-hero-art { width: 150px; flex: none; filter: drop-shadow(0 0 18px rgba(11, 222, 251, .35)); }

/* ---------------------------------------------------------------- tabs and forum rows */
.fm-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.fm-tab { padding: 10px 18px; border-radius: 12px; border: 1px solid var(--fm-line); color: var(--nx-text) !important; text-decoration: none; font-weight: 600; font-size: 14px; background: transparent; }
.fm-tab small { color: var(--fm-dim); margin-left: 4px; }
.fm-tab[aria-current] { background: linear-gradient(180deg, #19b2ff, #0865ec); border-color: transparent; box-shadow: 0 0 16px rgba(8, 158, 248, .5); }
.fm-tab[aria-current] small { color: #d6ecff; }
.fm-rows, .fm-trows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fm-row, .fm-trow { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px 86px minmax(0, 220px); gap: 16px; align-items: center; background: var(--fm-row); border: 1px solid transparent; border-radius: 16px; padding: 14px 18px; }
.fm-trow { grid-template-columns: 34px minmax(0, 1fr) 76px minmax(0, 150px); padding: 12px 16px; }
.fm-row:hover, .fm-trow:hover { background: var(--fm-row-hi); border-color: var(--fm-line); }
.fm-row.archived { opacity: .55; }
.fm-row-tile { text-decoration: none; }
.fm-row-main { min-width: 0; }
.fm-row-name { font-weight: 700; color: var(--nx-text) !important; text-decoration: none; font-size: 16px; }
.fm-row-name:hover { color: var(--nx-cyan) !important; }
.fm-row-desc { display: block; color: var(--fm-dim); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fm-row-num { text-align: left; } .fm-row-num b { display: block; font-size: 15px; } .fm-row-num small { color: var(--fm-dim); font-size: 12px; }
.fm-row-last { min-width: 0; font-size: 13px; } .fm-row-last a { display: block; color: var(--nx-text) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fm-row-last small { color: var(--fm-dim); }
.fm-subs { margin-top: 4px; font-size: 13px; }
.fm-subs summary { cursor: pointer; color: var(--fm-dim); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.fm-subs summary::-webkit-details-marker { display: none; }
.fm-subs summary::after { content: '▾'; font-size: 11px; }
.fm-subs[open] summary::after { content: '▴'; }
.fm-subs ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fm-subs li a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 10px; background: #0b112f; border: 1px solid var(--fm-line); color: var(--nx-text) !important; text-decoration: none; }
.fm-tstat { font-size: 15px; display: flex; gap: 2px; justify-content: center; }
.fm-tmain { min-width: 0; } .fm-tmain > a { display: block; font-weight: 700; color: var(--nx-text) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.fm-tmain small { color: var(--fm-dim); font-size: 12px; } .fm-tmain small a { color: var(--fm-dim) !important; }

/* ---------------------------------------------------------------- side panels */
.fm-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 12px; }
.fm-panel { background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 20px; padding: 18px; }
.fm-panel h2 { display: flex; align-items: center; gap: 10px; font: 700 16px var(--nx-font-body); margin: 0 0 14px; }
.fm-panel h2 svg { fill: var(--nx-cyan); }
.fm-panel h3 { font: 700 14px var(--nx-font-body); margin: 14px 0 6px; }
.fm-people, .fm-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fm-person { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--nx-text) !important; }
.fm-person small { display: block; color: var(--fm-dim); font-size: 12px; }
.fm-av { position: relative; flex: none; } .fm-av img { display: block; width: 40px; height: 40px; border-radius: 12px; background: #1b1f5e; }
.fm-av .fm-dot { position: absolute; right: -3px; bottom: -3px; }
.fm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--fm-panel); background: #4a5280; }
.fm-dot.is-online { background: #39ff8a; } .fm-dot.is-busy, .fm-dot.is-phone { background: #ff4d6d; } .fm-dot.is-away, .fm-dot.is-brb, .fm-dot.is-lunch { background: #ffd23d; }
.fm-recent li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--fm-line); }
.fm-recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.fm-recent a b { color: var(--nx-text); font-size: 14px; } .fm-recent a { text-decoration: none; }
.fm-recent small { color: var(--fm-dim); font-size: 12px; }
.fm-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.fm-dl dt { color: var(--fm-dim); } .fm-dl dd { margin: 0; }
.fm-rules { font-size: 14px; color: var(--fm-dim); } .fm-rules p { margin: 0 0 8px; }
.fm-small { font-size: 12px; margin: 12px 0 0; }

/* ---------------------------------------------------------------- statistics */
.fm-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fm-stat { display: flex; flex-direction: column; gap: 4px; background: transparent; border: 1px solid var(--fm-line); border-radius: 20px; padding: 18px; }
.fm-stat:nth-child(2) { background: var(--fm-panel); }
.fm-stat b { font-size: 17px; margin-top: 12px; } .fm-stat small { color: var(--fm-dim); font-size: 12px; }
.fm-stat-v { font: 700 13px var(--nx-font-body); align-self: flex-end; margin-top: -18px; }
.fm-bar { height: 4px; border-radius: 2px; background: #2a3166; margin-top: 18px; width: calc(100% - 70px); overflow: hidden; }
.fm-bar i { display: block; height: 100%; border-radius: 2px; background: var(--fc); box-shadow: 0 0 8px var(--fc); }
.fm-stat:nth-child(1) .fm-bar i { --fc: #8ccf12; } .fm-stat:nth-child(2) .fm-bar i { --fc: #ff8a1c; } .fm-stat:nth-child(3) .fm-bar i { --fc: #2f8bff; } .fm-stat:nth-child(4) .fm-bar i { --fc: #9b6bff; }
.fm-w0 { width: 0; } .fm-w5 { width: 5%; } .fm-w10 { width: 10%; } .fm-w15 { width: 15%; } .fm-w20 { width: 20%; } .fm-w25 { width: 25%; } .fm-w30 { width: 30%; } .fm-w35 { width: 35%; } .fm-w40 { width: 40%; } .fm-w45 { width: 45%; } .fm-w50 { width: 50%; }
.fm-w55 { width: 55%; } .fm-w60 { width: 60%; } .fm-w65 { width: 65%; } .fm-w70 { width: 70%; } .fm-w75 { width: 75%; } .fm-w80 { width: 80%; } .fm-w85 { width: 85%; } .fm-w90 { width: 90%; } .fm-w95 { width: 95%; } .fm-w100 { width: 100%; }

/* ---------------------------------------------------------------- a forum's head */
.fm-forumhead { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: radial-gradient(100% 160% at 100% 0%, rgba(242, 9, 243, .14), transparent 60%), var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 24px; padding: 24px; margin: 0 0 24px; }
.fm-fh-main { flex: 1; min-width: 220px; }
.fm-fh-main h1 { font: 34px/1.05 var(--nx-font-display); letter-spacing: .02em; margin: 0 0 6px; overflow-wrap: anywhere; }
.fm-fh-main p { margin: 0 0 6px; color: var(--fm-dim); }
.fm-fh-meta { font-size: 13px; }
.fm-fh-acts { display: flex; flex-wrap: wrap; gap: 8px; } .fm-fh-acts form { margin: 0; }
.fm-compose { background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 20px; padding: 20px; }
.fm-compose .nx-field, .fm-card .nx-field, .fm-createform .nx-field { margin: 0 0 14px; }
.fm label { color: var(--nx-text); }
.fm input:not([type=radio]):not([type=checkbox]), .fm textarea, .fm select { width: 100%; box-sizing: border-box; background: #070b24; border: 1px solid var(--fm-line); border-radius: 12px; color: var(--nx-text); font: 15px var(--nx-font-body); padding: 10px 12px; }
.fm-search input { width: auto !important; border: 0 !important; background: none !important; padding: 0 !important; }
.fm input:focus, .fm textarea:focus, .fm select:focus { outline: none; border-color: var(--nx-cyan); box-shadow: 0 0 0 3px rgba(11, 222, 251, .18); }
.fm .nx-field label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.fm-card { background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 20px; padding: 20px; }
.fm-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fm-inline label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; flex: 1 1 140px; }
.fm-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; }
.fm-banlist { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.fm-banlist li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .fm-banlist form { margin: 0 0 0 auto; }

/* ---------------------------------------------------------------- a thread */
.fm-threadhead { margin: 0 0 18px; } .fm-threadhead .fm-tile { vertical-align: middle; margin-right: 8px; }
.fm-threadhead h1 { font: 34px/1.1 var(--nx-font-display); letter-spacing: .02em; margin: 10px 0 6px; overflow-wrap: anywhere; }
.fm-modbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0 0 18px; padding: 12px; border: 1px dashed rgba(242, 9, 243, .5); border-radius: 14px; }
.fm-modbar form { margin: 0; }
.fm-modbox { display: inline-block; }
.fm-modbox summary { cursor: pointer; color: var(--fm-dim); font-size: 13px; list-style: none; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--fm-line); background: var(--fm-row); }
.fm-modbox summary::-webkit-details-marker { display: none; }
.fm-modbox[open] { display: block; width: 100%; } .fm-modbox form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.fm-posts { display: flex; flex-direction: column; gap: 16px; margin: 0 0 24px; }
.fm-post { display: grid; grid-template-columns: 150px minmax(0, 1fr); background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 20px; overflow: hidden; }
.fm-post:target { border-color: var(--nx-acid); box-shadow: 0 0 18px rgba(206, 244, 27, .25); }
.fm-postbit { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 18px 10px; background: #0b1131; border-right: 1px solid var(--fm-line); }
.fm-pb-av { position: relative; display: block; } .fm-pb-av img { display: block; width: 72px; height: 72px; border-radius: 18px; background: #1b1f5e; }
.fm-pb-av .fm-dot { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; }
.fm-pb-name { color: var(--nx-text) !important; text-decoration: none; margin-top: 6px; overflow-wrap: anywhere; }
.fm-pb-rank { font: 700 11px var(--nx-font-console); letter-spacing: .1em; text-transform: uppercase; color: var(--nx-acid); }
.fm-postbit small { color: var(--fm-dim); font-size: 11px; }
.fm-role { display: inline-block; font: 700 9px/1 var(--nx-font-console); letter-spacing: .12em; padding: 3px 6px; border-radius: 5px; margin-top: 2px; }
.fm-role.owner { background: #cef41b; color: #0b1156; } .fm-role.mod { background: #f209f3; color: #fff; } .fm-role.staff { background: #0bdefb; color: #0b1156; }
.fm-postmain { padding: 14px 20px 16px; min-width: 0; }
.fm-postmain > header { display: flex; gap: 10px; align-items: center; font-size: 12px; margin: 0 0 8px; }
.fm-postmain .body { overflow-wrap: anywhere; } .fm-postmain .body p { margin: 0 0 10px; }
.fm-postmain blockquote { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--nx-magenta); background: #0a0f2e; border-radius: 0 12px 12px 0; color: var(--fm-dim); }
.fm-postmain blockquote cite { display: block; font-style: normal; font-size: 12px; margin: 0 0 4px; }
.fm-postmain blockquote p { margin: 0 0 6px; }
.fm-mention { font-weight: 700; }
.fm-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.fm-react { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--fm-line); background: #0a0f2e; color: var(--nx-text); cursor: pointer; font-size: 14px; }
.fm-react b { font: 700 12px var(--nx-font-body); }
.fm-react.none { opacity: .45; } .fm-reacts:hover .fm-react.none { opacity: .8; }
.fm-react.on { border-color: var(--nx-acid); background: rgba(206, 244, 27, .12); opacity: 1; }
.fm-react:disabled { cursor: default; }
.fm-sig { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--fm-line); color: var(--fm-dim); font-size: 12px; }
.fm-quoting { font-size: 13px; color: var(--fm-dim); margin: 0 0 8px; }

/* ---------------------------------------------------------------- starting a forum */
.fm-create { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 26px; align-items: start; }
.fm-create-form { background: var(--fm-panel); border: 1px solid var(--fm-line); border-radius: 24px; padding: 24px; }
.fm-create-form h1 { font: 30px var(--nx-font-display); margin: 0 0 6px; letter-spacing: .02em; }
.fm-who { display: flex; align-items: center; gap: 10px; } .fm-who img { border-radius: 12px; }
.fm-pick { border: 0; padding: 0; margin: 0 0 14px; } .fm-pick legend { font-weight: 600; font-size: 14px; margin: 0 0 8px; padding: 0; }
.fm-glyphs, .fm-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-glyphs label, .fm-colors label { position: relative; cursor: pointer; }
.fm-glyphs input, .fm-colors input { position: absolute; opacity: 0; inset: 0; }
.fm-glyphs input:checked + .fm-tile, .fm-colors input:checked + .fm-swatch { outline: 3px solid #fff; outline-offset: 2px; }
.fm-glyphs input:focus-visible + .fm-tile, .fm-colors input:focus-visible + .fm-swatch { outline: 3px solid var(--nx-acid); outline-offset: 2px; }
.fm-emoji-pick { display: inline-flex !important; align-items: center; gap: 4px; }
.fm-emoji-pick input[name=emoji] { position: static !important; opacity: 1 !important; width: 64px !important; height: 30px; padding: 2px 6px !important; text-align: center; }
.fm-swatch { display: block; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg, var(--fc), var(--fc2)); box-shadow: 0 0 10px color-mix(in srgb, var(--fc) 50%, transparent); }
.fm-preview { background: #050a22; border: 1px solid var(--fm-line); border-radius: 24px; padding: 18px; position: sticky; top: 12px; }
.fm-preview > header { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } .fm-preview h2 { margin: 0; font: 700 18px var(--nx-font-body); }
.fm-devbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--fm-line); background: var(--fm-row); cursor: pointer; font-size: 18px; }
.fm-devbtn[aria-pressed="true"] { border-color: var(--nx-cyan); box-shadow: 0 0 10px rgba(11, 222, 251, .4); }
.fm-pv-screen { margin: 0 auto; transition: max-width .25s ease; max-width: 100%; }
.fm-pv-screen[data-fm-screen="phone"] { max-width: 380px; border: 8px solid #1b2150; border-radius: 34px; padding: 16px 10px; }
.fm-pv-screen[data-fm-screen="phone"] .fm-row { grid-template-columns: auto minmax(0, 1fr); } .fm-pv-screen[data-fm-screen="phone"] .fm-row-num, .fm-pv-screen[data-fm-screen="phone"] .fm-row-last { display: none; }
.fm-pv-cap { color: var(--fm-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin: 4px 0 8px; }

/* ---------------------------------------------------------------- lists: what's new, members, notes, mod log */
.fm-feed, .fm-members, .fm-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fm-feed li { display: flex; gap: 12px; background: var(--fm-row); border-radius: 14px; padding: 12px 14px; }
.fm-feed img { border-radius: 10px; flex: none; } .fm-feed p { margin: 0 0 4px; } .fm-excerpt { color: var(--fm-dim); font-size: 14px; overflow-wrap: anywhere; }
.fm-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fm-members a { display: flex; gap: 12px; align-items: center; background: var(--fm-row); border-radius: 14px; padding: 10px 12px; text-decoration: none; color: var(--nx-text) !important; }
.fm-members .fm-av img { width: 48px; height: 48px; } .fm-members small { display: block; color: var(--fm-dim); font-size: 12px; }
.fm-notes li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--fm-row); }
.fm-notes li.unread { border-left: 3px solid var(--nx-acid); }
.fm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .fm-table th, .fm-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--fm-line); vertical-align: top; } .fm-table th { color: var(--fm-dim); font-weight: 600; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1180px) {
  .fm-cols { grid-template-columns: minmax(0, 1fr); }
  .fm-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .fm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-create { grid-template-columns: minmax(0, 1fr); } .fm-preview { position: static; }
}
@media (max-width: 860px) {
  .fm { grid-template-columns: minmax(0, 1fr); }
  .fm-rail { position: fixed; z-index: 900; left: 10px; top: 10px; bottom: 10px; width: 240px; overflow: auto; transform: translateX(-120%); transition: transform .2s ease; }
  .fm-rail.open { transform: none; }
  .fm-railbtn { display: grid; place-items: center; }
  .fm-row { grid-template-columns: auto minmax(0, 1fr) auto; } .fm-row .fm-row-num:nth-of-type(2), .fm-row .fm-row-last { display: none; }
  .fm-trow { grid-template-columns: 26px minmax(0, 1fr) auto; } .fm-trow .fm-row-last { display: none; }
  .fm-hero { padding: 24px; } .fm-hero .fm-hero-t { font-size: 30px; } .fm-hero-art { display: none; }
  .fm-post { grid-template-columns: minmax(0, 1fr); } .fm-postbit { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; border-right: 0; border-bottom: 1px solid var(--fm-line); padding: 12px 14px; gap: 6px 10px; }
  .fm-pb-av img { width: 44px; height: 44px; border-radius: 12px; }
  .fm-search { flex: 1; }
}
@media (max-width: 520px) { .fm-stat-grid { gap: 10px; } .fm-stat { padding: 14px; } .fm-stat b { font-size: 15px; } .fm-bar { width: 100%; } .fm-stat-v { align-self: flex-start; margin-top: 6px; } .fm-top .fm-iconbtn:first-of-type { display: none; } }

/* ELiTE.EXE's flair (docs/65 §4): while a member's prog runs */
.fm-1337 { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #000; color: #0f0; font: bold 11px "Courier New", monospace; letter-spacing: .1em; box-shadow: 0 0 8px rgba(0, 255, 0, .5); vertical-align: middle; }