/* NullMC forums. Loaded after style.css on forums.php, category.php, view_thread.php and news.php. */
:root {
  --f-card: rgba(13, 16, 27, .82);
  --f-card2: rgba(255, 255, 255, .035);
  --f-line: rgba(255, 255, 255, .08);
  --f-head: linear-gradient(90deg, rgba(255, 122, 26, .16), rgba(56, 189, 248, .10) 60%, transparent);
  --f-rad: 16px;
}

.fwrap { max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.fwrap a { text-decoration: none; }
.fmuted { color: var(--mu); font-size: .88rem; }

/* style.css styles bare nav/details/summary for the landing page; undo that inside the forums. */
.fwrap nav, .ffoot nav { justify-self: auto; }
.fwrap nav a, .ffoot nav a { padding: 0; border-radius: 0; background: none; font-size: inherit; }
.fwrap details { max-width: none; border: 0; }
.fwrap summary { padding: 0; font-size: inherit; }

/* ---------------------------------------------------------------- tabs + search */
.ftabs { display: flex; align-items: center; gap: 4px; padding: 6px; margin-bottom: 18px; border-radius: 14px; background: var(--f-card); border: 1px solid var(--f-line); backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; }
.ftabs::-webkit-scrollbar { display: none; }
.ftabs > a { padding: 9px 16px; border-radius: 10px; color: var(--mu); font-weight: 700; font-size: .9rem; white-space: nowrap; transition: color .15s, background .15s; }
.ftabs > a:hover { color: var(--tx); background: rgba(255, 255, 255, .05); }
.ftabs > a[aria-current] { color: #fff; background: linear-gradient(135deg, rgba(255, 122, 26, .22), rgba(255, 122, 26, .08)); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .35); }
.fsearch { margin-left: auto; flex: 0 1 260px; min-width: 150px; }
.fsearch input { width: 100%; padding: 9px 14px 9px 34px; border-radius: 10px; border: 1px solid var(--f-line); color: var(--tx); font: inherit; font-size: .88rem;
  background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2398a2c3' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") 11px 50% no-repeat; }
.fsearch input:focus { outline: none; border-color: var(--bl); }

/* ---------------------------------------------------------------- breadcrumbs + headings */
.crumbs { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .85rem; color: var(--mu); margin: 4px 2px 14px; }
.crumbs a { color: var(--mu) !important; }
.crumbs a:hover { color: var(--or) !important; }
.crumbs b { color: var(--tx); font-weight: 600; }
.crumbs span { opacity: .5; }

.fhero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 32px; margin-bottom: 20px; border-radius: 20px; border: 1px solid var(--f-line);
  background: radial-gradient(circle at 0% 0%, rgba(255, 122, 26, .28), transparent 55%), radial-gradient(circle at 100% 100%, rgba(56, 189, 248, .26), transparent 55%), var(--f-card); }
.fhero h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 900; margin-bottom: 6px; }
.fhero h1 span { background: linear-gradient(90deg, var(--or), var(--bl)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fhero p { color: #c3cbe6; max-width: 52ch; }
.fip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(56, 189, 248, .35); background: rgba(0, 0, 0, .4); color: var(--tx); cursor: pointer; font: inherit; transition: transform .15s, border-color .15s; }
.fip:hover { transform: translateY(-2px); border-color: var(--bl); }
.fip small { color: var(--mu); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fip code { font: 800 1.2rem var(--mono); color: var(--bl); }

.fhead { display: flex; align-items: center; gap: 16px; padding: 22px 24px; margin-bottom: 16px; border-radius: var(--f-rad); border: 1px solid var(--f-line); background: var(--f-head), var(--f-card); }
.fhead > div:not(.fhead-ico) { flex: 1; min-width: 0; }
.fhead h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 4px; }
.fhead p { color: var(--mu); font-size: .92rem; }
.fhead-ico { font-size: 1.8rem; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--f-line); flex: none; }

/* ---------------------------------------------------------------- buttons, inputs, messages */
.fbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; font: 700 .9rem var(--sans); cursor: pointer; white-space: nowrap; color: #1a0b00 !important;
  background: linear-gradient(135deg, var(--or), #ffa055); box-shadow: 0 6px 20px -8px rgba(255, 122, 26, .8); transition: transform .15s, filter .15s; }
.fbtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fbtn:disabled { opacity: .6; cursor: wait; transform: none; }
.fbtn.ghost { background: rgba(255, 255, 255, .06); color: var(--tx) !important; border-color: var(--f-line); box-shadow: none; }
.fbtn.sm { padding: 6px 12px; font-size: .8rem; }
.fbadge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--f-line); color: var(--mu); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.flink { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px 8px; border-radius: 8px; color: var(--mu); font: 600 .82rem var(--sans); cursor: pointer; }
.flink:hover { color: var(--tx); background: rgba(255, 255, 255, .06); }
.flink.danger:hover { color: #ff6b6b; background: rgba(255, 85, 85, .1); }
.flink.like.on { color: var(--bl); }
.finput, .fmodal input[type=text], .fmodal select, .sform input, .ttools select { width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--f-line); background: rgba(0, 0, 0, .4); color: var(--tx); font: inherit; font-size: .92rem; }
.finput:focus, .fmodal input:focus, .fmodal select:focus, .sform input:focus { outline: none; border-color: var(--or); }
.fmsg { padding: 13px 18px; border-radius: 12px; font-weight: 600; margin-bottom: 16px; }
.fmsg.success { background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .3); color: #4ade80; }
.fmsg.error { background: rgba(255, 85, 85, .1); border: 1px solid rgba(255, 85, 85, .3); color: #ff6b6b; }
.fempty { padding: 36px 20px; text-align: center; color: var(--mu); }
.fempty b { display: block; color: var(--tx); margin-bottom: 4px; }

/* ---------------------------------------------------------------- layout */
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.fside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

.fblock { border-radius: var(--f-rad); border: 1px solid var(--f-line); background: var(--f-card); overflow: hidden; margin-bottom: 18px; backdrop-filter: blur(10px); }
.fblock-h { position: relative; font: 800 1.02rem var(--disp); letter-spacing: .01em; padding: 14px 20px 14px 24px; background: var(--f-head); border-bottom: 1px solid var(--f-line); }
.fblock-h::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--or), var(--bl)); }

/* ---------------------------------------------------------------- forum nodes (board index) */
.node { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px 250px; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--f-line); transition: background .15s; }
.node:last-child { border-bottom: 0; }
.node:hover { background: var(--f-card2); }
.node-ico { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.55rem; border-radius: 14px; background: linear-gradient(145deg, rgba(255, 122, 26, .16), rgba(56, 189, 248, .12)); border: 1px solid var(--f-line); transition: transform .2s; }
.node:hover .node-ico { transform: scale(1.06) rotate(-3deg); }
.node-main h3 { font: 700 1.04rem var(--sans); letter-spacing: 0; }
.node-main h3 a { color: var(--tx); }
.node-main h3 a:hover { color: var(--or); }
.node-main p { color: var(--mu); font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.node-link { color: var(--bl); font-size: .8rem; }
.node-stats, .trow-stats { display: flex; gap: 18px; margin: 0; }
.node-stats div, .trow-stats div { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.node-stats dt, .trow-stats dt { font-size: .7rem; color: var(--mu); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.node-stats dd, .trow-stats dd { margin: 0; font-weight: 800; font-size: .98rem; }
.node-last { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .82rem; }
.node-last > div { min-width: 0; display: flex; flex-direction: column; }
.node-last-t { color: var(--tx); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-last-t:hover { color: var(--or); }
.node-last span { color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-none { color: var(--mu); font-style: italic; }

.fav { border-radius: 9px; flex: none; image-rendering: pixelated; background: rgba(255, 255, 255, .05); }
.fav.sm { border-radius: 6px; }

/* ---------------------------------------------------------------- latest news card */
.fnews { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin-bottom: 18px; border-radius: var(--f-rad); overflow: hidden; border: 1px solid rgba(255, 122, 26, .3); background: var(--f-card); transition: transform .2s, box-shadow .2s; }
.fnews:not(:has(img)) { grid-template-columns: 1fr; }
.fnews:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(255, 122, 26, .6); }
.fnews img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.fnews > div { padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fnews h2 { font-size: 1.3rem; margin: 0; color: var(--tx); }
.fnews p { color: #c3cbe6; font-size: .9rem; }
.fnews small { color: var(--mu); font-size: .8rem; }

/* ---------------------------------------------------------------- sidebar widgets */
.fcardx { padding: 18px; border-radius: var(--f-rad); border: 1px solid var(--f-line); background: var(--f-card); backdrop-filter: blur(10px); }
.fcardx h3 { display: flex; align-items: center; justify-content: space-between; font: 800 .95rem var(--disp); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--f-line); }
.fcardx h3 em { font-style: normal; font-size: .75rem; padding: 2px 9px; border-radius: 99px; background: rgba(74, 222, 128, .12); color: #4ade80; }
.fjoin { background: radial-gradient(circle at 100% 0, rgba(255, 122, 26, .25), transparent 60%), var(--f-card); border-color: rgba(255, 122, 26, .3); }
.fjoin p { color: #c3cbe6; font-size: .88rem; margin-bottom: 12px; }
.fjoin-btns { display: flex; gap: 8px; }
.fjoin-btns .fbtn { flex: 1; }
.fjoin-btns.center { justify-content: center; margin-top: 14px; }
.fjoin-btns.center .fbtn { flex: 0 0 auto; }
.fstaff, .flatest { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fstaff li, .flatest li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.fstaff li > div, .flatest li > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.fstaff small { font-size: .72rem; font-weight: 700; }
.flatest a { color: var(--tx); font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flatest a:hover { color: var(--or); }
.flatest small { color: var(--mu); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fonline { font-size: .86rem; line-height: 1.7; }
.fstats { margin: 0; display: grid; gap: 6px; font-size: .86rem; }
.fstats div { display: flex; justify-content: space-between; gap: 10px; }
.fstats dt { color: var(--mu); }
.fstats dd { margin: 0; font-weight: 700; }

/* ---------------------------------------------------------------- usernames + rank banners */
.fu { font-weight: 700; }
.fu:hover { text-decoration: underline !important; }
.rk-member { color: #c3cbe6; }
.rk-donor { color: var(--bl); }
.rk-owner { color: #ff4d4d; }
.rk-manager { color: #ff7a1a; }
.rk-admin { color: #ff5f5f; }
.rk-dev { color: #b794ff; }
.rk-mod { color: #4ade80; }
.rk-helper { color: #facc15; }
.rk-builder { color: #2dd4bf; }
.rk-media { color: #f472b6; }
.fu.rk-owner, .fu.rk-admin, .fu.rk-manager { text-shadow: 0 0 12px currentColor; }

.banner { display: block; width: 100%; padding: 4px 8px; border-radius: 7px; font: 800 .72rem var(--sans); text-transform: uppercase; letter-spacing: .08em; text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 65%, #000), color-mix(in srgb, currentColor 35%, #000)); border: 1px solid color-mix(in srgb, currentColor 60%, transparent); }
.banner.rk-member { color: #8b93b0; }
.banner { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* currentColor drives the gradient; the text itself stays white. */
.banner { -webkit-text-fill-color: #fff; }

/* ---------------------------------------------------------------- thread lists */
.tsep { padding: 8px 20px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mu); background: rgba(0, 0, 0, .25); border-bottom: 1px solid var(--f-line); }
.trow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 140px 190px; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--f-line); transition: background .15s; }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--f-card2); }
.trow.sticky { background: rgba(255, 122, 26, .045); }
.trow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; line-height: 1.35; }
.trow-title > a { color: var(--tx); }
.trow-title > a:hover { color: var(--or); }
.trow-title .ico { font-size: .85rem; }
.trow-meta { font-size: .8rem; color: var(--mu); margin-top: 3px; }
.trow-meta a:not(.fu) { color: var(--mu); }
.trow-meta a:not(.fu):hover { color: var(--tx); }
.tpages { display: inline-flex; gap: 3px; margin-left: 6px; }
.tpages a { padding: 0 6px; border-radius: 5px; border: 1px solid var(--f-line); font-size: .72rem; }
.trow-last { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-align: right; font-size: .8rem; min-width: 0; }
.trow-last > div { display: flex; flex-direction: column; min-width: 0; }
.trow-last > div > a { color: var(--mu); }
.trow-last span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* prefixes */
.pfx { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .72rem; font-weight: 800; line-height: 1.6; vertical-align: middle; margin-right: 4px;
  background: rgba(152, 162, 195, .16); color: #c3cbe6; border: 1px solid rgba(152, 162, 195, .3); }
.pfx-question { background: rgba(56, 189, 248, .14); color: #7dd3fc; border-color: rgba(56, 189, 248, .35); }
.pfx-suggestion, .pfx-guide { background: rgba(167, 139, 250, .15); color: #c4b5fd; border-color: rgba(167, 139, 250, .35); }
.pfx-bug, .pfx-denied { background: rgba(255, 85, 85, .14); color: #ff8a8a; border-color: rgba(255, 85, 85, .35); }
.pfx-media { background: rgba(244, 114, 182, .14); color: #f9a8d4; border-color: rgba(244, 114, 182, .35); }
.pfx-accepted, .pfx-resolved, .pfx-implemented { background: rgba(74, 222, 128, .14); color: #4ade80; border-color: rgba(74, 222, 128, .35); }
.pfx-important { background: rgba(255, 122, 26, .16); color: #ffa766; border-color: rgba(255, 122, 26, .4); }

/* pagination */
.pg { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pg a, .pg span { min-width: 36px; padding: 6px 11px !important; border-radius: 9px !important; text-align: center; font-weight: 700; font-size: .85rem !important; border: 1px solid var(--f-line); background: var(--f-card) !important; color: var(--mu) !important; }
.pg span { border-color: transparent; background: none !important; }
.pg a:hover { color: var(--tx) !important; border-color: rgba(255, 255, 255, .2); }
.pg a[aria-current] { color: #1a0b00 !important; background: var(--or) !important; border-color: var(--or); }

.sform { display: grid; grid-template-columns: 1fr 220px auto; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--f-line); }

/* ---------------------------------------------------------------- thread view */
.thead { margin-bottom: 14px; }
.thead h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.2; margin-bottom: 8px; }
.thead h1 .pfx { font-size: .9rem; vertical-align: .25em; }
.thead-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; color: var(--mu); font-size: .86rem; }

.ttools { margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(56, 189, 248, .3) !important; background: rgba(56, 189, 248, .06); }
.ttools summary { padding: 10px 16px !important; cursor: pointer; font-weight: 700; font-size: .88rem !important; color: var(--bl); }
.ttools-body { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 14px; }
.ttools-body form { display: flex; gap: 6px; align-items: center; }
.ttools select { width: auto; padding: 6px 10px; font-size: .82rem; }

.post { display: grid; grid-template-columns: 170px minmax(0, 1fr); margin-bottom: 14px; border-radius: var(--f-rad); border: 1px solid var(--f-line); background: var(--f-card); overflow: hidden; scroll-margin-top: 20px; }
.post:target { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 30px -10px rgba(255, 122, 26, .6); }
.post.op { border-color: rgba(255, 122, 26, .25); }
.post-user { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 14px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); border-right: 1px solid var(--f-line); }
.post-av { display: block; height: 120px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .6)); transition: transform .2s; }
.post-av:hover { transform: translateY(-3px) scale(1.04); }
.post-av img { height: 120px; width: auto; image-rendering: pixelated; }
.post-name { font-size: 1rem; word-break: break-all; }
.post-facts { margin: 4px 0 0; width: 100%; display: grid; gap: 3px; font-size: .74rem; }
.post-facts div { display: flex; justify-content: space-between; gap: 6px; }
.post-facts dt { color: var(--mu); }
.post-facts dd { margin: 0; font-weight: 700; }
.post-main { display: flex; flex-direction: column; min-width: 0; }
.post-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; font-size: .8rem; color: var(--mu); border-bottom: 1px solid var(--f-line); }
.post-num { color: var(--mu); font-weight: 700; }
.post-num:hover { color: var(--or); }
.opbadge { margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: .68rem; font-weight: 800; color: var(--or); border: 1px solid rgba(255, 122, 26, .4); }
.post-body { padding: 18px 20px; flex: 1; }
.post-edited { padding: 0 20px 10px; font-size: .75rem; color: var(--mu); font-style: italic; }
.post-edit { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.post-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--f-line); }
.post-acts { display: flex; align-items: center; gap: 2px; }
.post-acts form { display: inline; }
.post-likes { margin: 0 12px 12px; padding: 8px 12px; border-radius: 9px; font-size: .8rem; color: var(--mu); background: rgba(56, 189, 248, .07); border-left: 3px solid var(--bl); }
.post-likes a { color: var(--tx); font-weight: 600; }

/* post content (BBCode output) */
.bb { line-height: 1.7; word-wrap: break-word; overflow-wrap: anywhere; }
.bb a { color: var(--bl) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.bb .bb-img { max-width: 100%; max-height: 600px; border-radius: 10px; margin: 6px 0; display: block; }
.bb .bb-center { text-align: center; }
.bb .bb-center .bb-img { margin-inline: auto; }
.bb .bb-quote { margin: 8px 0; padding: 10px 14px; border-radius: 10px; border-left: 3px solid var(--or); background: rgba(255, 122, 26, .06); color: #c3cbe6; font-size: .94rem; }
.bb .bb-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--or); font-size: .82rem; margin-bottom: 4px; }
.bb .bb-code { margin: 8px 0; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .5); border: 1px solid var(--f-line); overflow-x: auto; font: .85rem/1.5 var(--mono); }
.bb .bb-spoiler { margin: 8px 0 !important; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .2) !important; }
.bb .bb-spoiler summary { padding: 8px 12px !important; cursor: pointer; font-weight: 700; font-size: .85rem !important; color: var(--mu); }
.bb .bb-spoiler[open] { padding-bottom: 10px; }
.bb .bb-spoiler[open] > :not(summary) { margin-inline: 12px; }
.bb .bb-spoiler { padding-inline: 0; }

/* reply box */
.replybox { display: flex; gap: 14px; margin-top: 20px; padding: 18px; border-radius: var(--f-rad); border: 1px solid var(--f-line); background: var(--f-card); }
.replybox > .fempty { flex: 1; padding: 18px; }
.replybox-form { flex: 1; min-width: 0; }
.replybox-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.replybox-f small { color: var(--mu); font-size: .75rem; }

/* editor */
.editor { border-radius: 12px; border: 1px solid var(--f-line); background: rgba(0, 0, 0, .35); overflow: hidden; }
.editor:focus-within { border-color: var(--or); }
.ed-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--f-line); background: rgba(255, 255, 255, .03); }
.ed-bar button { min-width: 32px; height: 30px; padding: 0 8px; border-radius: 7px; border: 0; background: none; color: var(--mu); font: 600 .85rem var(--sans); cursor: pointer; }
.ed-bar button:hover { background: rgba(255, 255, 255, .08); color: var(--tx); }
.editor textarea { display: block; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--tx); font: .94rem/1.6 var(--sans); resize: vertical; min-height: 120px; }
.editor textarea:focus { outline: none; }

/* ---------------------------------------------------------------- dialogs */
.fmodal { width: min(560px, calc(100vw - 32px)); padding: 0; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); background: #0c0f18; color: var(--tx); box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.fmodal.wide { width: min(760px, calc(100vw - 32px)); }
.fmodal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(5px); }
.fmodal form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.fmodal label, .flabel { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: .85rem; color: #d7dcf0; }
.fmodal-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--f-line); }
.fmodal-h h3 { font-size: 1.15rem; }
.fx { background: none; border: 0; color: var(--mu); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.fx:hover { color: var(--tx); }
.fmodal-f { display: flex; justify-content: flex-end; gap: 10px; }
.frow { display: flex; gap: 12px; }
.fpfx { flex: 0 0 160px; }
.fgrow { flex: 1; }

/* ---------------------------------------------------------------- news */
.newscard { margin-bottom: 18px; border-radius: 18px; overflow: hidden; border: 1px solid var(--f-line); background: var(--f-card); }
.newscard-img { width: 100%; max-height: 420px; object-fit: cover; display: block; border-bottom: 1px solid var(--f-line); }
.newscard-body { padding: 22px 26px; }
.newscard-body h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 10px 0 8px; }
.newscard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--mu); margin-bottom: 16px; }
.newscard-meta form { margin-left: auto; }

/* ---------------------------------------------------------------- footer + toast */
.ffoot { margin-top: 30px; padding: 28px 0; border-top: 1px solid var(--f-line); background: rgba(5, 6, 11, .7); }
.ffoot .w { max-width: 1180px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.ffoot-brand { display: flex; align-items: center; gap: 12px; }
.ffoot-brand img { border-radius: 10px; }
.ffoot-brand b { display: block; font: 900 1.15rem var(--disp); }
.ffoot-brand small { color: var(--mu); font-size: .78rem; }
.ffoot nav { display: flex !important; flex-wrap: wrap; gap: 18px; }
.ffoot nav a { color: var(--mu) !important; text-decoration: none; font-weight: 600; font-size: .86rem !important; }
.ffoot nav a:hover { color: var(--tx) !important; background: none !important; }
.ffoot p { width: 100%; font-size: .78rem; color: #6b7391; }

.ftoast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2000; padding: 11px 20px; border-radius: 12px; font-weight: 700; font-size: .9rem; background: #12182a; border: 1px solid rgba(56, 189, 248, .5); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); animation: ftin .2s ease-out; transition: opacity .3s, transform .3s; }
.ftoast.out { opacity: 0; transform: translate(-50%, 10px); }
@keyframes ftin { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .fgrid { grid-template-columns: 1fr; }
  .fside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .node { grid-template-columns: 48px minmax(0, 1fr) 210px; }
  .node-stats { display: none; }
}
@media (max-width: 760px) {
  .fhero { padding: 22px; }
  .fsearch { display: none; }
  .fhead { flex-wrap: wrap; padding: 18px; }
  .fhead-ico { width: 46px; height: 46px; font-size: 1.4rem; }
  .node { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
  .node-ico { width: 44px; height: 44px; font-size: 1.3rem; grid-row: span 2; }
  .node-last { grid-column: 2; }
  .node-last .fav { display: none; }
  .trow { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; }
  .trow-av .fav { width: 36px; height: 36px; }
  .trow-stats { display: none; }
  .trow-last { grid-column: 2; justify-content: flex-start; text-align: left; }
  .trow-last .fav { display: none; }
  .trow-last > div { flex-direction: row; gap: 6px; }
  .fnews { grid-template-columns: 1fr; }
  .fnews img { max-height: 170px; }
  .post { grid-template-columns: 1fr; }
  .post-user { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--f-line); gap: 6px 12px; }
  .post-av, .post-av img { height: 54px; }
  .post-av { width: 40px; overflow: hidden; }
  .post-av img { height: 96px; }
  .post-user .banner { width: auto; }
  .post-facts { display: none; }
  .post-body, .post-head { padding-inline: 16px; }
  .replybox-av { display: none; }
  .replybox-f small { display: none; }
  .sform { grid-template-columns: 1fr; }
  .frow { flex-direction: column; }
  .fpfx { flex: none; }
}

/* style.css pads every <section> for the landing page; forum blocks bring their own spacing. */
.fwrap section.fblock { padding: 0; }

/* Rows adapt to the width of the main column, not the window, so they never get cramped next to the sidebar. */
.fmain, .fwrap > .fblock { container-type: inline-size; }
@container (max-width: 760px) {
  .node { grid-template-columns: 48px minmax(0, 1fr) 210px; }
  .node-stats { display: none; }
  .trow { grid-template-columns: 40px minmax(0, 1fr) 170px; }
  .trow-stats { display: none; }
}
@container (max-width: 560px) {
  .node { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
  .node-ico { width: 44px; height: 44px; font-size: 1.3rem; grid-row: span 2; }
  .node-last { grid-column: 2; }
  .node-last .fav { display: none; }
  .trow { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 12px 16px; }
  .trow-last { grid-column: 2; justify-content: flex-start; text-align: left; }
  .trow-last .fav { display: none; }
  .trow-last > div { flex-direction: row; gap: 6px; }
}

/* The #latest jump target on the last post must not take a grid cell. */
.post { position: relative; }
.post > #latest { position: absolute; top: 0; left: 0; }
.fmodal { margin: auto; max-height: calc(100vh - 32px); }

/* Hero text takes the free width and wraps before the IP box, never under it. */
.fhero > div { flex: 1 1 380px; min-width: 0; }
.fhero p { overflow-wrap: anywhere; }
.node-main, .trow-main { overflow-wrap: anywhere; }

/* Tighter stat/last-post columns so board descriptions get the room. */
.node { grid-template-columns: 52px minmax(0, 1fr) auto 210px; }
.node-stats { gap: 10px; }
.node-stats div { min-width: 60px; }
@container (max-width: 760px) { .node { grid-template-columns: 48px minmax(0, 1fr) 200px; } }
@container (max-width: 560px) { .node { grid-template-columns: 44px minmax(0, 1fr); } }

/* Hero: title and server IP sit side by side instead of at opposite edges.
   .fwrap prefix so no generic section rule can ever strip the padding again. */
.fwrap .fhero { justify-content: flex-start; gap: 20px 48px; padding: 30px 36px; }
.fwrap .fhero > div { flex: 0 1 auto; max-width: 560px; }
.fwrap .fhero h1 span { color: transparent; }
@media (max-width: 760px) { .fwrap .fhero { padding: 22px; } }