/* Murof app components, layered on float.css (the design system). Uses only float.css tokens,
   so a theme change there restyles everything here too. */
:root { --gold: #e0a100; --ease: var(--ease-liquid); --spring: var(--ease-spring); }
:root[data-theme="night"] { --gold: #fbbf24; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --gold: #fbbf24; } }

h1, h2, h3 { letter-spacing: var(--track-tight); }
.small { font-size: var(--fs-sm); }
.inline { display: inline; }
.hidden, [hidden] { display: none !important; }
#app { min-height: 100vh; }
main.wrap { padding-bottom: 40px; }
main.wrap > .crumbs:first-child { padding-top: var(--s-6); }
main.wrap > :is(.crumbs, .flash) + * { margin-top: var(--s-4); }
.crumbs .sep { opacity: .5; } .crumbs [aria-current] { color: var(--text); font-weight: 600; padding: 2px 8px; }

/* Layout with side column (board index) */
.layout { display: grid; gap: var(--s-6); padding: var(--s-6) 0 0; }
@media (min-width: 1080px) { .layout.has-side { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .side { position: sticky; top: 96px; } }
.greet-tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.section-label { font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: var(--s-4) 6px var(--s-3); }
.stack-sep { font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: var(--s-4) 6px 2px; }
.toolbar-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-5) 0 var(--s-4); }
.toolbar-row .pager, .toolbar-row.end { margin-left: auto; justify-content: flex-end; }
.thead-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.viewing { padding: var(--s-4) 6px; }
.empty { padding: 36px 20px; text-align: center; color: var(--text-muted); }
.pad { padding: var(--s-5); }

/* Header extras: account menu, guest buttons, search as form */
.me.guest { gap: 8px; }
@media (min-width: 761px) { .me.guest { margin-left: 4px; } }  /* phones: pushed right by float.css */
.me .badge[hidden] { display: none; }
form.search { margin: 0 0 0 auto; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; }
.menu > summary::-webkit-details-marker { display: none; }
.me .menu > summary { padding: 4px 4px 4px 8px; border-radius: var(--r-pill); }
.menu-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; z-index: 40; padding: 8px; border-radius: var(--r-md); box-shadow: var(--rim), var(--e-3);
  background: var(--surface-solid); display: flex; flex-direction: column; gap: 2px; transform-origin: top right; animation: menu-in 260ms var(--ease-spring); }
.modtools .menu-pop { left: 0; right: auto; transform-origin: top left; min-width: 280px; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.menu-pop a, .menu-pop button, .menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: 600 var(--fs-sm)/1.2 var(--font-ui); cursor: pointer; }
.menu-pop a:hover, .menu-pop button:hover { background: var(--surface-2); }
.menu-pop .danger { color: var(--neg); }
.menu-pop form { margin: 0; } .menu-pop label { display: block; padding: 8px 12px 2px; }
.menu-head { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.inline-row { display: flex; gap: 6px; padding: 0 8px 6px; } .inline-row select { flex: 1; min-width: 0; }

/* Buttons beyond float.css */
.btn.sm { height: 34px; padding: 0 14px; font-size: var(--fs-xs); }
.btn.danger { color: #fff; background: linear-gradient(180deg, color-mix(in oklab, var(--neg) 85%, #fff), var(--neg)); }
.btn[aria-disabled="true"], .btn[disabled] { opacity: .55; pointer-events: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; }
.jump-unread { font: 700 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--on-accent); background: var(--accent); padding: 4px 7px; border-radius: var(--r-pill); margin-left: 6px; vertical-align: 2px; position: relative; z-index: 1; }
.chip svg { width: 12px; height: 12px; margin-right: 4px; }
.seg a { white-space: nowrap; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }

/* Boxes: every legacy box is now a floating card */
.box { margin-bottom: var(--gap-float); overflow: hidden; }
.box + .box { margin-top: var(--s-4); }
.tcat { padding: var(--s-4) var(--s-5) var(--s-2); font: 650 var(--fs-xs)/1.3 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tcat-desc { text-transform: none; letter-spacing: 0; font-weight: 500; }
.table { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.row { display: grid; grid-template-columns: 52px 1fr 84px 84px 230px; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-md); color: inherit; transition: background-color var(--t-fast); }
.row:hover { background: var(--surface-2); }
.online-row { grid-template-columns: 220px 1fr 90px; } .pm-row { grid-template-columns: 1fr 180px; } .notif-row { grid-template-columns: 52px 1fr 90px; }
.row.unread .c-main b, .notif-row.unread .c-main { font-weight: 700; }
.notif-row.unread { background: var(--accent-soft); }
.c-icon { display: grid; place-items: center; }
.ficon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.c-stat { text-align: center; line-height: 1.2; } .c-stat b { display: block; font-variant-numeric: tabular-nums; } .c-stat span { font-size: var(--fs-xs); color: var(--text-faint); }
.c-main { min-width: 0; } .c-last { font-size: var(--fs-sm); }
.result, .logline, .report, .repline, .review { padding: 12px var(--s-5); border-top: 1px solid var(--border); }
.box > .result:first-of-type, .box > .logline:first-of-type { border-top: 0; }
.snippet { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }
.searchform { display: flex; gap: 8px; } .searchform input { flex: 1; }

/* Forum / thread cards (float.css .forum) extras */
.f-ico { font-size: 22px; }
.t-ico { background: none; box-shadow: none; }
.t-ico .av { width: 46px; height: 46px; }
.t-ico .hot { position: absolute; right: -6px; bottom: -6px; font-size: 15px; }
.thread-card .f-title { font-size: var(--fs-md); }
.t-flags { display: flex; gap: 6px; flex-wrap: wrap; } .t-flags:not(:empty) { margin-bottom: 4px; }
.thread-card.sticky { box-shadow: var(--rim), var(--e-1), inset 3px 0 0 var(--gold); }
.empty-last { padding: 8px 10px; margin: -8px -10px; }
.thead h1 .prefix { vertical-align: middle; margin-right: 6px; }
.thead .meta .av { display: inline-grid; }

/* Prefixes */
.prefix { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font: 700 11px/1 var(--font-ui); background: var(--accent-soft); color: var(--accent); }
.px-release { background: color-mix(in oklab, #22c55e 16%, transparent); color: #16a34a; }
.px-question, .px-help { background: color-mix(in oklab, #f59e0b 18%, transparent); color: #c27c00; }
.px-wip { background: color-mix(in oklab, #8b5cf6 16%, transparent); color: #7c3aed; }
.px-news { background: color-mix(in oklab, #ef4444 15%, transparent); color: #dc2626; }
.px-guide { background: color-mix(in oklab, #06b6d4 16%, transparent); color: #0891b2; }

/* Avatars: uploaded images + supporter frame + online dot */
img.av { object-fit: cover; padding: 0; }
.av.supporter { box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 4px var(--gold), 0 0 18px color-mix(in oklab, var(--gold) 55%, transparent); }
.av.lg.supporter { animation: halo 3.6s ease-in-out infinite; }
@keyframes halo { 50% { box-shadow: 0 0 0 4px var(--surface-solid), 0 0 0 6px var(--gold), 0 0 30px color-mix(in oklab, var(--gold) 75%, transparent); } }
.av-wrap { position: relative; display: inline-block; }
.ident .av-wrap { display: block; width: max-content; margin: 16px auto 12px; }
.ident .av-wrap .av.lg { margin: 0; }
.odot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 0 0 2px var(--surface-2); }
.av-wrap .odot { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--surface-2); }
.odot.on { background: var(--pos); }
.who .rep { justify-content: center; margin-bottom: 8px; }
.rep-bar i.gold { background: linear-gradient(180deg, #fde047, #f59e0b); }
.rep-bar i.neg { background: var(--neg); }
.rep b.neg { color: var(--neg); }
.pips i.on { background: var(--name-c1, var(--accent)); }
.uname { text-decoration: none; }
a.uname:hover { filter: brightness(1.15); }
.utitle:empty { display: none; }

/* Group badges */
.gbadges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.gbadge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font: 700 10px/1 var(--font-ui); letter-spacing: .02em; color: #fff; }
.b-admin { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.b-mod { background: linear-gradient(135deg, #10b981, #14b8a6); }
.b-supporter { background: linear-gradient(135deg, #fde047, #f59e0b); color: #4a2f00; }
.b-founder { background: linear-gradient(135deg, #6366f1, #a855f7); }
.b-dev { background: linear-gradient(135deg, #06b6d4, #8b5cf6); }

/* Post content (BBCode output) */
.content .bb-quote { margin: 0 0 var(--s-4); padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--border); font-size: var(--fs-sm); }
.bb-quote { margin: 8px 0; } .bb-quote-head { font-weight: 700; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; }
.bb-code { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: #0d1117; color: #e6edf3; font: var(--fs-sm)/1.6 var(--font-mono); overflow-x: auto; white-space: pre; }
.bb-img { max-height: 520px; border-radius: var(--r-md); display: inline-block; box-shadow: var(--e-1); }
.spoiler { background: var(--surface-2); border-radius: var(--r-md); padding: 8px 14px; margin: 6px 0; box-shadow: inset 0 0 0 1px var(--border); }
.spoiler summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); }
.sig img { max-height: 60px; } .sig.sig-big { max-height: 320px; } .sig.sig-big img { max-height: 200px; }
.sig img, .content img { display: inline-block; }
.edited { margin-top: 6px; }
.post .actions { border-top: 1px solid var(--border); padding-top: 8px; }

/* Optimistic post: swap in the typed text */
.post.fresh .content p { white-space: pre-wrap; }

/* Reply dock + body padding so the last post isn't hidden behind it */
body.thread main.wrap { padding-bottom: 120px; }
.dock .icon-btn { align-self: center; }
.dock.is-sending { opacity: .8; }
.dock textarea, .dock textarea:focus { background: transparent; border: 0; box-shadow: none; min-height: 44px; }

/* Forms */
input, select, textarea { font: inherit; color: var(--text); background: var(--surface-solid); border: 0; border-radius: var(--r-sm); padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow var(--t-med) var(--ease-liquid); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
input[type=color] { padding: 3px; width: 48px; height: 38px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; box-shadow: none; }
textarea { width: 100%; resize: vertical; min-height: 80px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.form label.check, label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; display: inline-flex; }
.form.narrow { max-width: 480px; }
.form fieldset { border: 0; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); padding: var(--s-5) var(--s-5) var(--s-2); margin: 0 0 var(--s-4); }
.form legend { font: 650 var(--fs-xs)/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 0; float: left; width: 100%; margin-bottom: var(--s-4); }
.form legend + * { clear: both; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; } .field-row .grow { flex: 1; min-width: 200px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }
.error { padding: 12px 16px; border-radius: var(--r-md); background: color-mix(in oklab, var(--neg) 12%, var(--surface-solid)); margin-bottom: var(--s-4); }
.notice { padding: 12px 16px; border-radius: var(--r-md); background: var(--accent-soft); margin-bottom: var(--s-4); font-size: var(--fs-sm); }
.flash { padding: 14px 18px; border-left: 3px solid var(--pos); animation: float-in var(--t-slow) var(--ease-spring) both; }
.welcome { padding: 16px 20px; margin-top: var(--s-4); }
.danger-zone { border-top: 1px solid var(--border); display: flex; gap: 12px; align-items: center; }
form.is-sending { opacity: .7; pointer-events: none; transition: opacity 150ms; }
.swatches { display: flex; gap: 8px; margin: -6px 0 var(--s-4); flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; box-shadow: 0 0 0 2px var(--surface-solid), 0 0 0 3px var(--border); cursor: pointer; transition: transform var(--t-fast) var(--ease-spring); }
.swatch:hover { transform: scale(1.18); }

/* Editor */
.editor { border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-4); background: var(--surface-solid); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow var(--t-med) var(--ease-liquid); }
.editor:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft); }
.editor .toolbar { display: flex; gap: 2px; flex-wrap: wrap; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.editor .toolbar button { background: transparent; border: 0; color: var(--text-muted); padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer; font: 600 var(--fs-xs)/1 var(--font-ui); }
.editor .toolbar button:hover { background: var(--surface-solid); color: var(--text); }
.editor textarea { border-radius: 0; box-shadow: none; background: transparent; }
.editor textarea:focus { box-shadow: none; }

/* Polls */
.poll { display: flex; flex-direction: column; gap: 10px; }
.poll-box { margin-bottom: var(--s-4); }
.poll-opt { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.poll-opt:hover { box-shadow: inset 0 0 0 1px var(--accent); transform: translateX(2px); }
.poll-label { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); margin-bottom: 5px; }
.poll-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.poll-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: color-mix(in oklab, var(--accent) 50%, var(--surface-3)); transform-origin: 0 50%; animation: grow 900ms var(--ease-liquid) both; }
.poll-res.win .poll-bar span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--glow); }
.poll-res.mine .poll-label span { font-weight: 700; }
@keyframes grow { from { transform: scaleX(0); } }
.poll-builder { margin: 0 0 var(--s-4); } .poll-builder summary { list-style: none; display: inline-flex; } .poll-builder summary::-webkit-details-marker { display: none; }
.poll-builder[open] > .pad { background: var(--surface-2); border-radius: var(--r-md); margin-top: 10px; box-shadow: inset 0 0 0 1px var(--border); }

/* Shoutbox */
.shouts { max-height: 300px; overflow-y: auto; padding: 10px var(--s-5) 10px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.shout { line-height: 1.45; }
.shout-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.shout-form input { flex: 1; min-width: 0; height: 36px; border-radius: var(--r-pill); }
.side .box { margin-bottom: var(--gap-float); }
.side .tcat { padding: var(--s-5) var(--s-5) var(--s-2); }
.stat b.newest { font-size: var(--fs-md); }
.legend .uname { font-size: var(--fs-xs); }

/* Profiles & members */
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6); align-items: center; padding: var(--s-6); margin: var(--s-4) 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--rim), var(--e-1); }
.ph-main h1 { font: 700 var(--fs-xl)/1.15 var(--font-display); margin: 0 0 6px; }
.ph-main .rank { align-items: flex-start; }
.ph-main .gbadges { justify-content: flex-start; margin: 6px 0; }
.ph-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ph-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ph-stats div { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 16px; text-align: center; min-width: 120px; box-shadow: inset 0 0 0 1px var(--border); }
.ph-stats b { display: block; font: 700 var(--fs-lg)/1.2 var(--font-display); font-variant-numeric: tabular-nums; } .ph-stats span { font-size: var(--fs-xs); color: var(--text-faint); }
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-4); align-items: start; }
.repline { font-size: var(--fs-sm); } .rep-amt { display: inline-block; min-width: 36px; font-weight: 800; }
.repline.pos .rep-amt { color: var(--pos); } .repline.neg .rep-amt { color: var(--neg); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap-float); padding: 4px var(--s-4) var(--s-4); }
.member-card { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-md); color: inherit; background: var(--surface-solid); box-shadow: var(--rim), var(--e-1); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med); }
.member-card:hover { transform: translateY(-3px); box-shadow: var(--rim), var(--e-2); }
.member-card .gbadges { justify-content: flex-start; margin-top: 4px; }
.avatar-up { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.av-preview .av { width: 72px; height: 72px; font-size: 24px; margin: 0; }
.file-pick { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--border); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.file-pick:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Supporter page */
.hero { text-align: center; padding: 48px 20px; border-radius: var(--r-xl); margin: var(--s-4) 0; background: var(--surface); box-shadow: var(--rim), var(--e-2); }
.hero h1 { font: 700 var(--fs-xl)/1.15 var(--font-display); }
.hero-gold { background: radial-gradient(80% 120% at 50% 0, color-mix(in oklab, var(--gold) 28%, transparent), var(--surface) 70%); }
.price { font: 800 2.2rem/1.1 var(--font-display); color: var(--gold); margin: 10px 0; }
.perk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap-float); }
.perk { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--rim), var(--e-1); transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med); }
.perk:hover { transform: translateY(-3px); box-shadow: var(--rim), var(--e-2); }
.perk-icon { font-size: 28px; margin-bottom: 8px; }

/* Staff panels */
.report { display: flex; flex-direction: column; gap: 6px; } .report form { align-self: flex-start; }
.admin { display: grid; grid-template-columns: 210px 1fr; gap: var(--s-5); align-items: start; padding-top: var(--s-4); }
.admin-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--rim), var(--e-1); position: sticky; top: 96px; view-transition-name: admin-nav; }
.admin-nav a { padding: 10px 14px; border-radius: var(--r-pill); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a.on { background: var(--surface-solid); color: var(--text); box-shadow: var(--e-1); }
.admin-main { min-width: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--gap-float); margin-bottom: var(--s-4); }
.tile { background: var(--surface); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--rim), var(--e-1); }
.tile b { display: block; font: 700 1.7rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .tile span { color: var(--text-faint); font-size: var(--fs-xs); }
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.board-row { display: flex; gap: 8px; align-items: center; padding: 10px var(--s-5); border-top: 1px solid var(--border); flex-wrap: wrap; }
.board-row:first-of-type { border-top: 0; }
.board-row.depth1 { padding-left: 52px; } .board-row.depth2 { padding-left: 84px; }
.board-row label { display: inline-flex; gap: 6px; align-items: center; }
.b-icon { width: 56px; text-align: center; } .b-name { width: 200px; } .b-desc { flex: 1; min-width: 180px; } .b-sort { width: 74px; }
.cat-edit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; text-transform: none; letter-spacing: 0; }
.preview-name { min-width: 110px; }

/* Phones */
@media (max-width: 860px) {
  .row { grid-template-columns: 44px 1fr 70px; }
  .row .c-stat:nth-of-type(4), .row .c-last { display: none; }
  .online-row, .pm-row { grid-template-columns: 1fr; }
  .grid-2, .admin { grid-template-columns: 1fr; }
  .admin-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; position: static; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav .nav-sec { display: contents; }
  .admin-nav .nav-h { display: none; }
  .admin-nav a, .admin-nav .cmdk-open { flex: none; white-space: nowrap; }
  .profile-head { grid-template-columns: auto 1fr; }
  .ph-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .thead-tools .pager { margin-left: 0; }
}
@media (max-width: 760px) {
  main.wrap { padding-bottom: 100px; }
  .row { grid-template-columns: 38px 1fr; } .row .c-stat { display: none; }
  .online-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .online-row .c-main + .c-main { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-sm); color: var(--text-muted); }
  .online-row .c-stat { display: block; grid-column: 2; grid-row: 1; width: auto; }
  .pm-row { grid-template-columns: minmax(0, 1fr); }
  .profile-head { grid-template-columns: 1fr; text-align: center; }
  .ph-main .rank, .ph-main .gbadges, .ph-actions { justify-content: center; align-items: center; }
  .ph-stats { grid-template-columns: repeat(2, 1fr); }
  .b-name, .b-desc { width: 100%; }
  .ident .id-row { display: flex; align-items: center; gap: 12px; }
  .ident .gbadges { justify-content: flex-start; }
  .who .rep { justify-content: flex-start; }
  .ident .av-wrap { margin: 0; }
  .av-wrap .odot { width: 11px; height: 11px; right: 0; bottom: 0; }
  .greet-tools { width: 100%; }
}

/* ---------- client feedback: load bar, toasts, counters ---------- */
.loadbar { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; pointer-events: none; transform-origin: left; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 40%, #fff)); }
.loadbar.go { opacity: 1; animation: load-go 1.6s var(--ease-glide) forwards; }
.loadbar.done { animation: none; transform: scaleX(1); opacity: 0; transition: opacity 300ms var(--ease-glide), transform 200ms var(--ease-glide); }
@keyframes load-go { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.85); } }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%);
  max-width: min(92vw, 460px); padding: 12px 18px; border-left: 3px solid var(--neg, #f43f5e); font-size: var(--fs-sm);
  animation: float-in var(--t-slow) var(--ease-spring) both; transition: opacity 300ms var(--ease-glide), transform 300ms var(--ease-glide); }
.toast.out { opacity: 0; transform: translate(-50%, 8px); }
.badge[hidden] { display: none; }
.badge.bump { animation: pop 520ms var(--ease-spring); }
form.is-sending .btn.primary { opacity: .7; }

/* ---------- threaded replies (Reddit-style nesting under each post) ---------- */
.branch-root { margin-top: calc(var(--s-2) * -1); }
.branch-root > summary, .reply > summary { list-style: none; }
.branch-root > summary::-webkit-details-marker, .reply > summary::-webkit-details-marker { display: none; }
.branch-root > summary { display: inline-flex; align-items: center; margin: 0 0 var(--s-2) var(--s-5); padding: 7px 14px; border-radius: var(--r-pill);
  font: 600 var(--fs-xs)/1 var(--font-ui); color: var(--text-muted); background: var(--surface); box-shadow: var(--rim), var(--e-1); cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.branch-root > summary:hover { color: var(--text); transform: translateY(-1px); }
.branch-root[open] .when-closed, .branch-root:not([open]) .when-open { display: none; }
.replies { display: grid; gap: var(--s-2); margin-left: var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--border); }
.replies:empty { display: none; }
.reply > .replies { margin: var(--s-2) 0 0 6px; }
.replies[data-depth="6"] .replies { margin-left: 0; padding-left: 0; border-left: 0; }  /* very deep chains stop indenting */
.reply { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--rim), var(--e-1); padding: 10px 14px;
  transition: box-shadow var(--t-fast), opacity var(--t-fast); }
.reply > .rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; min-height: 30px; }
.rhead .uname { font-weight: 700; }
.rhead .chip { font-size: 10px; padding: 2px 7px; }
.rline { width: 8px; height: 8px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-fast) var(--ease-spring); margin: 0 2px 0 0; flex: none; }
.reply:not([open]) > .rhead .rline { transform: rotate(-45deg); }
.rnum { margin-left: auto; }
.rmore { display: none; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); font: 700 10px/1 var(--font-ui); color: var(--accent); }
.reply:not([open]) > .rhead .rmore { display: inline-block; }
.reply:not([open]) { padding-block: 6px; box-shadow: var(--rim); }
.rbody { padding: 4px 0 0 46px; }
.rbody .content { font-size: var(--fs-md); }
.rbody .content > :first-child { margin-top: 0; }
.rbody .actions { margin-top: 6px; padding-top: 0; border-top: 0; }
.reply:target, .post:target { box-shadow: 0 0 0 2px var(--accent), var(--e-2); }
.reply.fresh { animation: settle var(--t-slow) var(--ease-spring) both; }
.reply.fresh .phead span::after { content: " · sending"; color: var(--accent); }
.reply.fresh.sent .phead span::after { content: " · just now"; color: var(--text-faint); }
.inline-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: var(--s-2); padding: 8px; border-radius: var(--r-lg);
  background: var(--surface-solid); box-shadow: var(--rim), var(--e-2); animation: float-in var(--t-slow) var(--ease-spring) both; }
.inline-reply textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--text); padding: 11px 12px; font: inherit;
  min-height: 44px; max-height: 40vh; field-sizing: content; box-shadow: none; }
.inline-reply textarea:focus { outline: none; }
.inline-reply .btn { height: 40px; }
@media (max-width: 760px) {
  .branch-root > summary { margin-left: var(--s-2); }
  .replies { margin-left: 6px; padding-left: 10px; }
  .replies[data-depth="4"] .replies { margin-left: 0; padding-left: 0; border-left: 0; }
  .rbody { padding-left: 0; }
  .rrank { display: none; }
}

/* Supporter plans (supporter.py) */
.tier-grid { margin: var(--s-4) 0; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }  /* plans share the row evenly, whatever their number */
.tier { display: flex; flex-direction: column; gap: 6px; }
.tier .price { font-size: 1.8rem; margin: 4px 0; }
.tier-perks { margin: 0 0 8px; padding-left: 18px; color: var(--text-muted); font-size: var(--fs-sm); flex: 1; }
.tier-current { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--s-4); }
.section-title { font: 700 var(--fs-lg, 1.15rem)/1.2 var(--font-display); margin: var(--s-5, 24px) 0 var(--s-3, 12px); }
.tier-edit + .tier-edit { border-top: 1px solid var(--border); }

/* ---------- Admin CP 1.0: dashboard, members, maintenance, audit log, command bar ---------- */
.pad-x { padding: 0 20px 16px; }
.att-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-float); margin-bottom: var(--s-4); }  /* six cards: two even rows of three */
@media (max-width: 760px) { .att-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.att { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-lg); color: inherit; }
.att svg { width: 20px; height: 20px; color: var(--text-faint); }
.att { align-content: start; }
.att b { font: 700 1.5rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att b.word { font-size: 1.15rem; line-height: 1.4; }  /* status words (Not licensed) stay on one line, same height as numbers */
.att span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.att.warn svg { color: var(--accent); }
.att .dot { position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px; border-radius: var(--r-lg); margin-bottom: var(--s-4); }
.kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); }
.kpi > span { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.kpi b { font: 700 1.6rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.kpi small { color: var(--text-faint); font-size: 11px; }
.delta { font: 700 11px/1 var(--font-ui); width: max-content; padding: 3px 7px; border-radius: var(--r-pill); background: var(--surface-2); }
.delta.up { color: var(--pos); } .delta.down { color: var(--neg); } .delta.flat { color: var(--text-faint); }
.chart { margin: 0; padding: 12px 18px 16px; }
.chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.c-area { fill: color-mix(in oklab, var(--accent) 14%, transparent); }
.c-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.c-bars rect { fill: var(--accent-2, #14b8a6); opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .c-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s var(--ease-glide) .2s forwards; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart figcaption { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-posts { background: var(--accent); } .k-users { background: var(--accent-2, #14b8a6); }
.loglist { list-style: none; margin: 0; display: grid; gap: 8px; font-size: var(--fs-sm); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border-radius: var(--r-lg); margin: var(--s-3) 0; }
.filters .search.grow { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); }
.filters .search input { border: 0; background: transparent; height: 40px; flex: 1; box-shadow: none; }
.filters .search svg { width: 16px; height: 16px; color: var(--text-faint); }
.filters select { height: 40px; width: auto; }
.wrap-seg { flex-wrap: wrap; }
@media (max-width: 760px) {  /* on phones a segmented control stays one pill row and scrolls, whatever a page or plugin asks */
  nav.seg, div.seg { flex-wrap: nowrap; }
}
.mlist { display: grid; gap: var(--s-2); }
.mrow { display: grid; grid-template-columns: auto 1fr 72px 72px 150px; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-lg); color: inherit; }
.mrow .m-main { min-width: 0; } .mrow .m-main > span { color: var(--text-muted); }
.m-stat { text-align: right; } .m-stat b { display: block; font-variant-numeric: tabular-nums; } .m-stat span { font-size: 11px; color: var(--text-faint); }
.m-when { text-align: right; }
.mlist .mrow:has(.btn) { grid-template-columns: auto 1fr auto; }
.mlist .mrow:not(:has(.m-stat)):not(:has(.btn)) { grid-template-columns: auto 1fr auto; }
.cmdk-open { justify-content: flex-start; margin-bottom: 6px; color: var(--text-muted); }
.cmdk-open kbd, .cmdk kbd { margin-left: auto; font: 600 10px/1 var(--font-ui); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text-faint); }
.cmdk { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: 12vh; background: hsl(var(--sh) / .25); backdrop-filter: blur(3px);
  animation: float-in var(--t-med, 220ms) var(--ease-liquid) both; }
.cmdk-box { width: min(560px, calc(100% - 28px)); border-radius: var(--r-lg); background: var(--surface-solid); box-shadow: var(--rim), var(--e-3); overflow: hidden; }
.cmdk-box input { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; height: 54px; padding: 0 18px; font-size: var(--fs-md); box-shadow: none; }
.cmdk-box input:focus { outline: none; }
.cmdk-list { max-height: 50vh; overflow: auto; padding: 6px; }
.cmdk-list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text); }
.cmdk-list a small { margin-left: auto; color: var(--text-faint); font-size: 11px; }
.cmdk-list a[aria-selected="true"] { background: var(--surface-2); }
.cmdk-empty { padding: 16px; color: var(--text-faint); font-size: var(--fs-sm); }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .mrow { grid-template-columns: auto 1fr 64px; } .mrow .m-stat:nth-of-type(2), .mrow .m-when { display: none; }
  .cmdk-open { display: none; }
}
.m-main .gbadges { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.filters .search { margin: 0; width: auto; max-width: none; height: 40px; box-shadow: none; }
.filters .search kbd { display: none; }

/* ---------- Admin CP pass 2: forum tree, drawer, permission grid ---------- */
.ahead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.ahead h1 { margin: 0; font: 700 var(--fs-xl)/1.15 var(--font-display); letter-spacing: var(--track-tight); }
.ahead p { margin: 4px 0 0; }
.ahead-tools { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip.warn { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }
.chip.accent { text-decoration: none; }
a.chip:hover { filter: brightness(1.08); }

.ftree-wrap { padding: var(--s-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--rim), var(--e-1); }
.ftree, .fkids { list-style: none; margin: 0; padding: 0; }
.fkids { padding-left: 26px; position: relative; }
.fkids::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 10px; width: 2px; border-radius: 2px; background: var(--surface-3); }
.lv1.cat + .lv1.cat { margin-top: var(--s-2); }
.frow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; margin: 2px 0; border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-liquid), box-shadow var(--t-fast) var(--ease-liquid), transform var(--t-med) var(--ease-spring); }
.frow:hover { background: var(--surface-2); }
.frow.is-sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.crow { font-weight: 700; }
.crow .fname { font: 700 var(--fs-md)/1.2 var(--font-display); }
.fname { color: var(--text); font-weight: 650; text-decoration: none; }
.fname:hover { color: var(--accent); }
.frow .f-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); font-size: 16px; flex: none; }
.fcount { margin-left: auto; white-space: nowrap; }
.grip { cursor: grab; touch-action: none; user-select: none; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 6px 4px; border-radius: 8px; }
.grip:hover, .grip:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.fnode.is-drag > .frow { opacity: .35; }
.fghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; background: var(--surface-solid); box-shadow: var(--rim), var(--e-3);
  transform-origin: 20px 50%; animation: fg-lift var(--t-med) var(--ease-spring) both; }
@keyframes fg-lift { from { scale: 1; rotate: 0deg; } to { scale: 1.02; rotate: -.6deg; } }
.fdrop { position: absolute; z-index: 89; pointer-events: none; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 4px var(--glow); transition: top 90ms linear, left 90ms linear, height 90ms linear; }
.fdrop.inside { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-md); }
.fdrop.bad { background: color-mix(in oklab, var(--neg) 14%, transparent); box-shadow: inset 0 0 0 2px var(--neg); color: var(--neg); font: 650 var(--fs-xs)/1 var(--font-ui);
  display: flex !important; align-items: center; justify-content: center; min-height: 28px; }
.fempty { padding: 10px 12px; border: 1px dashed var(--surface-3); border-radius: var(--r-md); margin: 4px 0; }
.rmenu { position: relative; }
.rmenu > summary { list-style: none; min-width: 32px; justify-content: center; }
.rmenu > summary::-webkit-details-marker { display: none; }

.drawer { position: fixed; top: 76px; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); z-index: 60; overflow: auto; padding: var(--s-5);
  border-radius: var(--r-xl); background: var(--surface-solid); box-shadow: var(--rim), var(--e-3);
  animation: drawer-in var(--t-slow) var(--ease-liquid) both; }
@keyframes drawer-in { from { opacity: 0; transform: translateX(32px) scale(.98); } to { opacity: 1; transform: none; } }
.drawer header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.drawer h2 { margin: 0; font: 700 var(--fs-lg)/1.2 var(--font-display); }
.dtabs { margin-bottom: var(--s-4); }
.dtabs button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.dpanel .form { padding: 0; }
.dpanel[hidden] { display: none; }
.dpanel:not([hidden]) { animation: float-in var(--t-med) var(--ease-liquid) both; }
.icon-in input { width: 64px; text-align: center; font-size: 20px; }
.ovlist { margin: 0 0 var(--s-4); padding-left: 18px; line-height: 1.9; }
@media (min-width: 1100px) { .admin-main:has(.drawer) { padding-right: 456px; } }
@media (max-width: 720px) {
  .drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 82vh; border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
    animation-name: sheet-in; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); z-index: 80; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .fcount { display: none; }
  .frow .chip { display: none; }
  .fkids { padding-left: 16px; } .fkids::before { left: 8px; }
}

.pbox { overflow: visible; }
.pbox .filters { padding: var(--s-4) var(--s-4) 0; align-items: flex-end; }
.pbox .filters label { display: flex; flex-direction: column; gap: 4px; font: 600 var(--fs-xs)/1.2 var(--font-ui); color: var(--text-muted); }
.ptools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4) 0; }
.ptools form { display: flex; gap: var(--s-2); align-items: center; margin: 0; }
.ptools label { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
.plegend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: var(--s-3) var(--s-4); color: var(--text-muted); }
.plegend .pcell { min-width: 0; height: 22px; font-size: 11px; cursor: default; }
.pgrid-wrap { overflow-x: auto; padding: 0 var(--s-2) var(--s-3); -webkit-overflow-scrolling: touch; }
.pgrid { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 640px; }
.pgrid thead th { position: sticky; top: 0; font: 650 var(--fs-xs)/1.2 var(--font-ui); color: var(--text-muted); text-align: center; padding: 6px 4px; white-space: nowrap; }
.pgrid thead th:first-child, .pgrid tbody th { text-align: left; }
.pgrid tbody th { font-weight: 500; padding: 4px 8px 4px 4px; min-width: 210px; }
.pgrid tbody th code { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast); }
.pgrid tbody tr:hover th code { opacity: 1; }
.pgrid tr.parea th { padding: var(--s-3) 4px 2px; font: 700 var(--fs-xs)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.pgrid td { text-align: center; padding: 0; }
.pcell { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  font: 650 var(--fs-xs)/1 var(--font-ui); cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), color var(--t-fast); }
button.pcell:hover { transform: translateY(-1px) scale(1.04); }
button.pcell:active { transform: scale(.96); }
.pcell.allow { background: color-mix(in oklab, var(--pos) 18%, transparent); color: color-mix(in oklab, var(--pos) 80%, var(--text)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pos) 40%, transparent); }
.pcell.deny { background: color-mix(in oklab, var(--neg) 16%, transparent); color: var(--neg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--neg) 40%, transparent); }
.pcell.inherit { background: var(--surface-2); color: var(--text-faint); }
.pcell.inherit.n { color: color-mix(in oklab, var(--neg) 55%, var(--text-faint)); }
.pcell.lock, .pcell.na { background: none; color: var(--text-faint); cursor: default; min-width: 0; }
.pcell.is-sending { opacity: .5; }
.pcell.pop { animation: cell-pop var(--t-med) var(--ease-spring); }
@keyframes cell-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.pv { display: inline-block; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: var(--r-pill); font: 700 11px/1.2 var(--font-ui); }
.pv.allow { background: color-mix(in oklab, var(--pos) 16%, transparent); color: color-mix(in oklab, var(--pos) 80%, var(--text)); }
.pv.deny { background: color-mix(in oklab, var(--neg) 14%, transparent); color: var(--neg); }
.checklist { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-2); }
.checklist li { display: grid; grid-template-columns: 64px minmax(160px, 260px) 1fr; gap: var(--s-3); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
@media (max-width: 720px) { .checklist li { grid-template-columns: 60px 1fr; } .checklist li .muted { grid-column: 2; } }

.grow-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.grow-row .board-row { border: 0; flex: 1 1 560px; }
.grow-tools { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4) var(--s-2); margin-left: auto; }
.group-form { display: grid; grid-template-columns: 200px 44px max-content max-content max-content; justify-content: start; align-items: center; gap: var(--s-2) var(--s-3); }
.group-form .b-name { width: 100%; }
.group-form > label { white-space: nowrap; }
.group-form .g-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.group-form .g-meta .preview-name { min-width: 150px; }
.group-form .g-meta .btn { margin-left: auto; }
.grow-row:has(.group-form) .grow-tools { padding: var(--s-2) var(--s-4); }
@media (max-width: 760px) {
  .group-form { grid-template-columns: minmax(0, 1fr) 44px; }
  .group-form > label { grid-column: 1 / -1; }
  .group-form .g-meta { flex-wrap: wrap; }
}
.fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgrid th, .pgrid td { vertical-align: middle; }
.pcell.inherit.y { color: color-mix(in oklab, var(--pos) 50%, var(--text-faint)); }
.dtabs button { position: relative; z-index: 1; padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.dtabs button[aria-current="page"] { color: var(--text); }
.dtabs button[aria-current="page"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-solid); box-shadow: var(--e-1); }
.drawer .dtabs { background: var(--surface-2); }
@media (max-width: 720px) { .drawer { box-shadow: var(--rim), var(--e-3), 0 0 0 100vmax rgb(0 0 0 / .28); } }

/* ---------- Admin CP pass 3: member page, trash ---------- */
.mhead { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-5); border-radius: var(--r-xl); margin-bottom: var(--s-4); }
.mh-id { display: flex; align-items: center; gap: var(--s-4); }
.mh-id h1 { margin: 0 0 4px; font: 700 var(--fs-xl)/1.1 var(--font-display); letter-spacing: var(--track-tight); }
.mh-stats { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-left: auto; }
.mh-stats div { display: flex; flex-direction: column; } .mh-stats b { font: 700 var(--fs-lg)/1.1 var(--font-display); } .mh-stats span { font-size: var(--fs-xs); color: var(--text-muted); }
.mhead .ahead-tools { width: 100%; }
.mtabs { padding: var(--s-5); }
.mtabs .form { padding: 0; }
.subhead { margin: var(--s-5) 0 var(--s-2); font: 700 var(--fs-xs)/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.dpanel > .subhead:first-child { margin-top: 0; }
.wlist { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.wlist li { display: flex; gap: var(--s-2); align-items: baseline; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--border); }
.wlist li.muted { opacity: .6; }
.trow { align-items: center; }
.trow form { display: flex; gap: var(--s-2); margin: 0 0 0 auto; }
@media (max-width: 720px) { .mh-stats { margin-left: 0; gap: var(--s-4); } .trow form { margin: 0; width: 100%; } }

/* ---------- live threads ---------- */
.live-new { animation: settle var(--t-slow) var(--ease-spring) both, live-glow 2.8s var(--ease-liquid) both; }
@keyframes live-glow { from { background-color: var(--accent-soft); } }
.live-pill { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70; transform: translateX(-50%);
  padding: 10px 18px; border: 0; border-radius: var(--r-pill); font: 650 var(--fs-sm)/1 var(--font-ui); color: var(--on-accent);
  background: var(--accent); box-shadow: var(--e-3), 0 0 0 6px var(--accent-soft); cursor: pointer; animation: float-in var(--t-med) var(--ease-spring) both; }
.live-pill:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .live-new { animation: none; } }
.errlog{max-height:320px;overflow:auto;font-size:12px;background:var(--surface-2,rgba(127,127,127,.08));padding:12px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
#main [tabindex="-1"]:focus, #main[tabindex="-1"]:focus { outline: none; }

/* Admin › Licence */
.lic { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--r-lg, 22px); margin: var(--s-4) 0; }
.lic h2 { margin: 0 0 6px; font-size: 1.15rem; }
.lic.ok .f-ico { color: var(--ok, #16a34a); }
.lic.warn .f-ico { color: var(--warn, #d97706); }
.lic-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 var(--s-4); padding: 0 var(--s-5); }
.lic-facts dt { color: var(--muted, #6b7280); }
.lic-facts dd { margin: 0; overflow-wrap: anywhere; }
textarea[name=key] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* ---------- Search (search.py) ---------- */
.sfilters .s-by { height: 40px; width: 150px; }
.s-type { margin: 0 0 var(--s-4); }
.slist { display: grid; gap: var(--s-3); }
.sresult { padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); }
.sresult .s-title { display: block; font: 650 var(--fs-lg)/1.3 var(--font-display); color: var(--text); text-decoration: none; }
.sresult .s-title:hover { color: var(--accent); }
.s-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.s-meta .chip { margin-left: 4px; }
.s-meta .s-n { margin-left: auto; }
.s-snip { margin: 8px 0 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; overflow-wrap: anywhere; }
.sresult mark, .s-title mark { background: color-mix(in oklab, var(--accent) 18%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.s-empty { color: var(--text-muted); }
@media (max-width: 640px) {
  .sfilters .s-by, .sfilters select { flex: 1 1 calc(50% - 8px); width: auto; }
  .sfilters .btn { flex: 1 1 100%; }
  .s-meta .s-n { margin-left: 0; }
}

/* ---------- Admin CP: import wizard (admin_import.py) ---------- */
.imp-steps { display: flex; gap: 4px; list-style: none; margin: 0 0 var(--s-4); padding: 6px; border-radius: var(--r-pill); counter-reset: s; overflow-x: auto; scrollbar-width: none; }
.imp-steps li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: max-content; padding: 9px 14px; border-radius: var(--r-pill);
  color: var(--text-faint); font: 600 var(--fs-sm)/1 var(--font-ui); transition: background-color var(--t-med) var(--ease-liquid), color var(--t-med); }
.imp-steps i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 11px/1 var(--font-ui); font-style: normal; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.imp-steps li.ok { color: var(--text-muted); } .imp-steps li.ok i { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.imp-steps li.on { background: var(--surface-solid); color: var(--text); box-shadow: var(--e-1); } .imp-steps li.on i { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: var(--s-3); }
.src-pick { position: relative; display: block; cursor: pointer; }
.src-pick input { position: absolute; opacity: 0; pointer-events: none; }
.src-pick span { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-solid); box-shadow: var(--rim), var(--e-1);
  transition: transform var(--t-med) var(--ease-spring), box-shadow var(--t-med) var(--ease-liquid); }
.src-pick small { color: var(--text-faint); font-size: var(--fs-xs); }
.src-pick:hover span { transform: translateY(-2px); box-shadow: var(--rim), var(--e-2); }
.src-pick input:checked + span { box-shadow: 0 0 0 2px var(--accent), var(--e-2); }
.src-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.imp-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: var(--s-3) 0 6px; }
.imp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width .6s var(--ease-liquid); }
.imp-up:empty { display: none; }
.imp-more { margin: var(--s-3) 0; } .imp-more > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); }
.imp-more[open] > summary { margin-bottom: var(--s-3); }
.imp-run { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.imp-run li { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: var(--fs-sm); }
.imp-run i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border); flex: none; }
.imp-run li.ok { color: var(--text-muted); } .imp-run li.ok i { background: var(--accent); box-shadow: none; }
.imp-run li.on { color: var(--text); font-weight: 600; } .imp-run li.on i { box-shadow: inset 0 0 0 2px var(--accent); animation: imp-pulse 1.2s var(--ease-liquid) infinite; }
@keyframes imp-pulse { 50% { transform: scale(.7); } }
.imp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.imp-list h3 { margin: 0 0 6px; font: 700 var(--fs-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.imp-list ul, .imp-more ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); }
.imp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.imp-links li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-sm); } .imp-links li span { color: var(--text-faint); }
.imp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; margin-bottom: 8px; border-radius: var(--r-lg); color: inherit; }
.imp-row .m-main { display: grid; min-width: 0; } .imp-row .m-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-form .form-actions { align-items: center; flex-wrap: wrap; }
.danger-box { box-shadow: var(--rim), var(--e-1), inset 3px 0 0 var(--gold); }
@media (prefers-reduced-motion: reduce) { .imp-run li.on i { animation: none; } .imp-bar i { transition: none; } }
@media (max-width: 720px) { .imp-steps li { flex: none; padding: 8px 10px; } .src-grid { grid-template-columns: 1fr 1fr; } }
.imp-form fieldset { min-width: 0; } .imp-form input:not([type=radio]):not([type=checkbox]) { max-width: 100%; box-sizing: border-box; } .imp-form code { overflow-wrap: anywhere; }

/* Log in with Discord / Steam (sso.py) */
.sso-row { display: flex; flex-wrap: wrap; gap: var(--s-3, 12px); justify-content: center; padding: var(--s-5, 20px) var(--s-5, 20px) 0; }
.sso-btn { min-width: 220px; }
.btn.sso-discord { color: #fff; background: linear-gradient(180deg, #6b75f2, #5865f2); }
.btn.sso-steam { color: #fff; background: linear-gradient(180deg, #2a475e, #171a21); }
.sso-or { display: flex; align-items: center; gap: 12px; max-width: 480px; margin: var(--s-4, 16px) auto 0; padding: 0 var(--s-5, 20px); color: var(--text-3, inherit); font-size: var(--fs-xs); }
.sso-or::before, .sso-or::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.sso-links { display: grid; gap: 10px; }
.sso-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2, rgba(127,127,127,.06)); }
.sso-link > svg { width: 22px; height: 22px; flex: none; }
.sso-who { flex: 1; min-width: 0; }
.sso-btn svg { width: 18px; height: 18px; }
.bridge-forums { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.sso-link .sso-btn { min-width: 0; }

/* Admin › API & webhooks */
.mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.keybox code { display: block; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--rim); word-break: break-all; user-select: all; }
.break { word-break: break-all; }
.hookev .check { margin-right: 18px; }

/* Admin › Extensions */
.ext-list { display: grid; gap: var(--gap-float); margin-bottom: var(--s-4); }
.ext-card { display: flex; gap: var(--s-4); align-items: flex-start; justify-content: space-between; padding: 18px 20px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--rim), var(--e-1); transition: box-shadow .3s, transform .3s; }
.ext-card:hover { box-shadow: var(--rim), var(--e-2, var(--e-1)); }
.ext-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-md, 1rem); }
.ext-main { min-width: 0; display: grid; gap: 4px; } .ext-main p { margin: 0; }
.ext-main .neg, .ext-facts .neg { color: var(--neg); }
.ext-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.ext-up { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.notice.warn { background: color-mix(in oklab, var(--neg) 10%, transparent); }
@media (max-width: 640px) { .ext-card { flex-direction: column; } .ext-acts { justify-content: flex-start; } }

/* Health & backups (MUR030) */
.hgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-float, 14px); margin: var(--s-4) 0; }
.hcheck { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg, 22px); color: inherit; text-decoration: none; }
a.hcheck:hover { filter: brightness(1.04); }
.hcheck b { display: block; margin-bottom: 2px; }
.hcheck p { margin: 0; }
.hdot { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--ok, #16a34a); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok, #16a34a) 18%, transparent); }
.hcheck.warn .hdot { background: var(--warn, #d97706); box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn, #d97706) 18%, transparent); }
.hcheck.bad .hdot { background: var(--neg, #dc2626); box-shadow: 0 0 0 4px color-mix(in oklab, var(--neg, #dc2626) 18%, transparent); }
.hstate.ok { color: var(--ok, #16a34a); } .hstate.warn { color: var(--warn, #d97706); } .hstate.bad { color: var(--neg, #dc2626); }
.atable-wrap { overflow-x: auto; padding: 0 var(--s-5, 20px); }
.atable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); font-variant-numeric: tabular-nums; }
.atable th, .atable td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, rgba(127,127,127,.15)); white-space: nowrap; }
.atable th { color: var(--text-muted); font-weight: 600; font-size: var(--fs-xs, 12px); }
.atable td.neg { color: var(--neg, #dc2626); font-weight: 600; }
form.inline { display: inline-block; margin: 0 6px 6px 0; }
.mrow form.inline { margin: 0; }
.mlist .mrow:has(form.inline + .btn) { grid-template-columns: auto 1fr auto auto; }

/* Supporter-only boards and ad slots (MUR031) */
.forum.locked .f-title { color: var(--text-muted); }
.forum.locked .chip.accent svg { width: 12px; height: 12px; margin-right: 4px; }
.last.unlock { display: flex; align-items: center; gap: 10px; color: var(--accent); }
.last.unlock svg { width: 20px; height: 20px; flex: none; }
.gate .f-ico { color: var(--accent); }
.ad { display: block; margin: var(--s-4, 16px) 0; padding: 12px 16px; border-radius: var(--r-lg, 22px); overflow: hidden; text-align: center; }
.ad .ad-label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); text-align: left; }
.ad .ad-label a { text-transform: none; letter-spacing: 0; }
.ad img, .ad iframe { max-width: 100%; height: auto; }
.side .ad { margin: 0 0 var(--gap-float, 14px); }

/* Growth (MUR031) */
.growlist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line, rgba(127,127,127,.12)); }
.growlist li:last-child { border-bottom: 0; }
.growlist.people .btn { margin-left: auto; }
.gchart { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; align-items: end; height: 180px; margin-top: var(--s-3, 12px); }
.gbar { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; gap: 6px; }
.gbar span { font-size: 11px; color: var(--text-faint); text-align: center; white-space: nowrap; }
.gstack { display: flex; flex-direction: column; min-height: 2px; border-radius: 8px; overflow: hidden; }
.gstack i { display: block; min-height: 0; }
.g-back { background: var(--accent); }
.g-new { background: color-mix(in oklab, var(--accent) 35%, transparent); }
.growlist { padding: 0; margin: 0; list-style: none; }

/* Admin sidebar sections (MUR032) */
.admin-nav .nav-sec { display: flex; flex-direction: column; gap: 2px; }
.admin-nav .nav-sec + .nav-sec { margin-top: 8px; }
.admin-nav .nav-h { padding: 6px 14px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.admin-nav a { padding: 7px 14px; }
@media (max-width: 860px) {  /* one scrolling row of pills; restates the earlier phone rule that .nav-sec above overrode */
  .admin-nav { align-items: center; }
  .admin-nav .nav-sec { display: contents; }
  .admin-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; }
}
@media (min-width: 861px) { .admin-nav { max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; } .admin-nav > *, .admin-nav .nav-sec > * { flex-shrink: 0; } }

/* Appearance (MUR033) */
.logo .logo-img { width: 32px; height: 32px; border-radius: 10px; object-fit: contain; flex: none; }
/* Murof brand mark (brand.py, docs/brand.md): white ribbon m inside the accent badge */
.logo b .mk { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 1px rgb(11 20 64 / .25)); }
.brand-row { display: flex; gap: var(--s-4, 16px); align-items: flex-start; }
.brand-row + .brand-row { border-top: 1px solid var(--line, rgba(127,127,127,.12)); }
.brand-prev { width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: var(--surface-2, rgba(127,127,127,.08)); flex: none; }
.brand-prev.empty { display: grid; place-items: center; font-size: 12px; color: var(--text-faint); }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.form label.file-pick { display: inline-flex; align-items: center; gap: 0; margin: 0; }

/* Thread timeline (MUR034) */
.tl { position: fixed; right: max(16px, calc((100vw - 1200px) / 2 - 190px)); top: 50%; transform: translateY(-50%); z-index: 30; padding: 6px; border-radius: var(--r-lg, 22px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 280px; }
.tl[hidden] { display: none; }
.tl-pill { border: 0; background: none; color: var(--text-muted); font: 600 var(--fs-xs, 12px)/1.2 inherit; padding: 8px 12px; border-radius: var(--r-pill, 999px); cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-pill:hover, .tl[data-open] .tl-pill { color: var(--text); background: var(--surface-2, rgba(127,127,127,.08)); }
.tl-panel { display: none; flex-direction: column; gap: 10px; padding: 6px 8px 8px; width: 250px; }
.tl[data-open] .tl-panel { display: flex; }
.tl-row { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs, 12px); color: var(--text-muted); }
.tl-row input[type=range] { width: 100%; accent-color: var(--accent); }
.tl-date { flex-direction: row; align-items: center; }
.tl-date input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.tl-btns { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1500px) { .tl { right: 16px; top: auto; bottom: 96px; transform: none; } }
@media (max-width: 760px) { .tl { bottom: 150px; right: 12px; } .tl-panel { width: min(260px, calc(100vw - 48px)); } }
.tl[data-open] { background: var(--surface-solid, var(--surface)); }
/* ---------- trust levels, held posts, Mod CP queue (antispam.py, modqueue.py) ---------- */
.chip.trust { font-size: 11px; padding: 2px 8px; vertical-align: middle; }
.chip.trust.t0 { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); }
.chip.trust.t3 { background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); }
.post.held { opacity: .92; border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); }
.held-note { display: flex; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 10px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--accent) 9%, transparent); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.held-note svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.mq-bulk { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
.mq-item { padding: 14px 16px; border-top: 1px solid var(--line, rgba(127,127,127,.15)); outline: none; border-radius: var(--r-md);
  transition: background .25s var(--ease-glide, ease), box-shadow .25s var(--ease-glide, ease); }
.mq-item:focus-visible, .mq-item:focus-within { background: color-mix(in oklab, var(--accent) 6%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.mq-head { display: flex; gap: 10px; align-items: flex-start; }
.mq-head .grow { flex: 1; min-width: 0; }
.mq-head form { display: flex; gap: 6px; flex-wrap: wrap; }
.mq-body { margin: 10px 0 10px 28px; max-height: 260px; overflow: auto; overflow-wrap: anywhere; }
.mq-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: 28px; }
.mq-actions select { width: auto; min-height: 32px; height: 34px; padding: 0 10px; font-size: var(--fs-xs, 13px); }
@media (max-width: 600px) { .mq-body, .mq-actions { margin-left: 0; } .mq-actions .btn, .mq-actions select { flex: 1 1 40%; } }
/* Reports, infractions and appeals (reports.py, infractions.py) */
.hid-note { margin: 0; } .hid-body { margin-top: 10px; opacity: .6; border-left: 2px dashed color-mix(in oklab, var(--accent) 45%, transparent); padding-left: 12px; }
.ractions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rcard .wlist { margin-top: 2px; } .rcard .wlist li { padding: 6px 0; font-size: var(--fs-sm); }
.report-why, .itypes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.itypes { flex-direction: column; } .itype { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.itype > span { display: flex; flex-direction: column; gap: 2px; } .itype input { margin-top: 4px; flex: none; }
.itype-row { padding: 12px 0; border-top: 1px solid var(--border); } .itype-row:first-of-type { border-top: 0; }
.appeal { margin-top: 8px; } .appeal > summary { list-style: none; display: inline-flex; cursor: pointer; } .appeal > summary::-webkit-details-marker { display: none; }
.appeal[open] > summary { opacity: .6; } .appeal form { margin-top: 10px; }
.appeal-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-sm); }
@media (max-width: 600px) { .ractions .btn { flex: 1 1 40%; } }
.form label.itype { flex-direction: row; } .itype-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Admin CP > Revenue: six-month bars; simulated Stripe checkout */
.rev-chart { display: flex; align-items: flex-end; gap: 10px; height: 140px; }
.rev-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.rev-bar i { display: block; width: 100%; max-width: 48px; border-radius: var(--r-md) var(--r-md) 4px 4px; background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 55%, transparent)); box-shadow: var(--e-1); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.rev-bar span { font-size: var(--fs-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.stripe-sim .price { font: 700 1.6rem/1.2 var(--font-display); margin: 4px 0 10px; }
.chip.ok { background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); }
.stripe-keys code { overflow-wrap: anywhere; }
/* Sign in with Google / Apple / X (sso_social.py): each brand's own button colours */
.btn.sso-google { color: #1f1f1f; background: #fff; box-shadow: inset 0 0 0 1px #dadce0; }
.btn.sso-apple, .btn.sso-x { color: #fff; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.sso-finish-who { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--surface-2, rgba(127,127,127,.06)); }
.sso-finish-who > svg, .sso-finish-av { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }

/* Sign in with Microsoft / GitHub / Twitch / Battle.net / Epic Games (sso_more.py) */
.btn.sso-microsoft { color: #5e5e5e; background: #fff; box-shadow: inset 0 0 0 1px #8c8c8c; }
.btn.sso-github { color: #fff; background: #24292f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.btn.sso-twitch { color: #fff; background: linear-gradient(180deg, #a06bff, #9146ff); }
.btn.sso-battlenet { color: #fff; background: linear-gradient(180deg, #1a9bff, #0074e0); }
.btn.sso-epic { color: #fff; background: #121212; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---------- Admin › Features: one liquid switch per optional module ---------- */
.fx-grid { display: grid; gap: var(--gap-float); }
.fx-list { display: grid; padding: 6px; }
.fx-row { display: flex; align-items: center; gap: var(--s-3); padding: 14px var(--s-4); border-radius: var(--r-md); color: inherit; transition: background-color var(--t-fast), opacity var(--t-med) var(--ease-liquid); }
.fx-row + .fx-row { box-shadow: 0 -1px 0 var(--border); }
.fx-row:hover { background: var(--surface-2); }
.fx-row.is-off .fx-main { opacity: .62; }
.fx-main { flex: 1; min-width: 0; display: grid; gap: 2px; transition: opacity var(--t-med) var(--ease-liquid); }
.fx-blurb { color: var(--text-muted); font-size: var(--fs-sm); }
.fx-note { color: var(--text-faint); font-size: var(--fs-xs); }
.fx-go { color: var(--text-faint); font-size: 20px; }
.fx-switch { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); transition: background-color var(--t-med) var(--ease-liquid), box-shadow var(--t-med); }
.fx-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-solid); box-shadow: var(--e-1);
  transition: transform var(--t-med) var(--ease-spring), width var(--t-fast) var(--ease-liquid); }
.fx-switch[aria-checked="true"] { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.fx-switch[aria-checked="true"] .fx-knob { transform: translateX(22px); }
.fx-switch:active .fx-knob { width: 30px; }
.fx-switch[aria-checked="true"]:active .fx-knob { transform: translateX(16px); }
.fx-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* While the switch saves, it already shows where it's going (the page swaps in when the server answers). */
.fx-row.is-sending .fx-switch[aria-checked="true"] { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); }
.fx-row.is-sending .fx-switch[aria-checked="true"] .fx-knob { transform: none; }
.fx-row.is-sending .fx-switch[aria-checked="false"] { background: var(--accent); }
.fx-row.is-sending .fx-switch[aria-checked="false"] .fx-knob { transform: translateX(22px); }
.fx-hero { padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); margin-bottom: var(--gap-float); }
.fx-hero h1 { margin: var(--s-4) 0 6px; }
.fx-hero p { margin: 0; max-width: 62ch; }
.fx-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.fx-logo { height: 34px; width: auto; color: var(--text); }
.fx-ver { padding: 6px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .fx-row { padding: 12px; } .fx-setup { display: none; } .fx-hero { padding: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .fx-switch, .fx-knob, .fx-row, .fx-main { transition: none; } }

/* Admin > Branding: owner logos and icons (branding.py) */
.bi-list { display: flex; flex-direction: column; }
.bi-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; flex-wrap: wrap; }
.bi-row + .bi-row { border-top: 1px solid var(--line, rgba(127,127,127,.12)); }
.bi-row .grow { flex: 1 1 180px; min-width: 0; }
.bi-prev { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2, rgba(127,127,127,.08)); font-size: 22px; overflow: hidden; }
.bi-prev .bi-img { max-width: 44px; max-height: 44px; object-fit: contain; }
.bi-prev .logo b { width: 30px; height: 30px; }
.bi-row .file-pick.sm { height: 32px; padding: 0 14px; }
@media (max-width: 560px) { .bi-row { padding: 10px 14px; } .bi-row .grow { flex-basis: calc(100% - 64px); } }
/* uploaded icons where pages show them */
.rank-ico { max-height: 24px; max-width: 120px; object-fit: contain; display: block; }
.gicon { height: 20px; width: auto; max-width: 64px; object-fit: contain; }
.ach-img { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -.2em; }
.f-ico .f-img { width: 100%; height: 100%; max-width: 32px; max-height: 32px; object-fit: contain; }
h1 .f-img { height: 1em; width: auto; vertical-align: -.12em; }
.foot-logo { display: inline-flex; vertical-align: middle; margin-right: 10px; }
.foot-logo-img { height: 28px; width: auto; max-width: 160px; object-fit: contain; }
/* footer credit: "Powered by" plus the murof wordmark */
.pby { display: inline-flex; align-items: center; gap: .35em; vertical-align: middle; color: inherit; }
.pby-logo { height: 1.05em; width: auto; color: var(--text); opacity: .85; transition: opacity .2s; }
.pby:hover .pby-logo { opacity: 1; }

/* Sign-in pages: one centred card, and the page footer sits at the bottom of short pages */
.box.auth-card { max-width: 520px; margin-inline: auto; }
.box.auth-card .form.narrow { max-width: none; }
.auth-links { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
#app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app > main.wrap { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
#app > header, #app > footer { width: 100%; box-sizing: border-box; }
body > .sr-only { top: 0; left: 0; }  /* the live region must not add a pixel of scroll under the page */