/* ==========================================================================
   aircooledaddiction — theme (v22, menu/home/register v23)
   The only stylesheet. Dark + orange, colours taken from the phpBB theme.
   Tweak colours here, in :root only; everything below uses the variables.
   ========================================================================== */
:root {
    --bg:          #1e1e1e;   /* page background (phpBB page) */
    --surface:     #2d2d2d;   /* cards, rows, top bar (phpBB rows/navbar) */
    --surface2:    #353535;   /* inputs, code, table heads, hover (phpBB pager buttons) */
    --surface3:    #242424;   /* sunken areas: section headers, sidebars */
    --accent:      #ff5722;   /* links, active page, buttons (phpBB link orange) */
    --accent-hover:#ff7a4d;
    --accent-fill: #e64a19;   /* filled orange behind white text (buttons, current page): a shade deeper for legibility */
    --accent2:     #ff9500;   /* second orange (phpBB user badge) */
    --on-accent:   #fff;      /* text on orange */
    --text:        #cccccc;   /* body text (phpBB text) */
    --text-strong: #ececec;   /* headings, titles */
    --text-muted:  #8c8c8c;   /* meta, hints, stats */
    --border:      #3a3a3a;
    --danger:      #ff6b5e;   /* deleted / purge / errors (readable on dark) */
    --danger-bg:   #4a2320;
    --success:     #6fcf8f;
    --success-bg:  #1f3a2a;
    --info-bg:     #3a2a22;   /* orange-tinted highlight */
    --radius:      6px;
    --wrap:        1200px;    /* max content width */
    --font:        system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:        ui-monospace, Menlo, Consolas, monospace;
    color-scheme: dark;       /* dark native scrollbars, date pickers, etc. */
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { background: var(--bg); }
body  { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--text); background: var(--bg); }
/* No wrapper element in the templates: every top-level block is centred instead. */
/* :where() keeps this rule weak, so a page's own max-width (profile, login, purge) still applies. */
body > :where(:not(.site-nav)) { width: calc(100% - 2rem); max-width: var(--wrap); margin-left: auto; margin-right: auto; }
body > hr { display: none; }
h1, h2, h3 { color: var(--text-strong); font-weight: 600; line-height: 1.25; }
h1    { font-size: 1.5rem; }
a     { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
strong { color: var(--text-strong); }
img   { max-width: 100%; }
::selection { background: var(--accent-fill); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Form controls: dark fields, orange focus ring */
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=file], select, textarea {
    background: var(--surface2); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .45rem .6rem; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 87, 34, .25); }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=file]::file-selector-button { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: .25rem .7rem; margin-right: .6rem; cursor: pointer; }
button, .btn, input[type=submit] {
    background: var(--accent-fill); color: var(--on-accent); border: 1px solid var(--accent-fill);
    border-radius: var(--radius); padding: .45rem 1rem; cursor: pointer; font-weight: 600;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Plain tables (home page, phpBB peek, admin) */
table  { border-collapse: collapse; width: 100%; margin-bottom: 2rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
th     { background: var(--surface3); color: var(--text-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.num   { text-align: right; }
.stats span { display: inline-block; margin-right: 2rem; font-size: 1.2rem; }
.muted { color: var(--text-muted); }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.site-nav {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.2rem;
    background: var(--surface); border-bottom: 2px solid var(--accent);
    padding: .65rem max(1rem, calc((100% - var(--wrap)) / 2));   /* lines up with the content below */
    margin-bottom: 1.5rem; font-size: .92rem;
}
.site-nav a        { color: var(--text); }
.site-nav a:hover  { color: var(--accent); text-decoration: none; }
.site-nav .brand   { color: var(--text-strong); font-weight: 300; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; margin-right: .6rem; white-space: nowrap; }
.site-nav .brand span { color: var(--accent); font-weight: 700; }
.site-nav .nav-links { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; }
.site-nav .who     { margin-left: auto; color: var(--text-muted); display: flex; align-items: center; gap: .5rem; }
.site-nav .who strong { color: var(--accent2); }
/* Guest buttons (Log in / Register) */
.site-nav a.btn { padding: .3rem .85rem; font-size: .85rem; color: var(--on-accent); }
.site-nav a.btn:hover { color: var(--on-accent); }
.site-nav a.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.site-nav a.btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* v23 user menu: <details>/<summary>, opens on click/tap, no JavaScript */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; padding: .2rem .5rem; border-radius: var(--radius); }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::after { content: "▾"; color: var(--text-muted); font-size: .8rem; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--surface2); }
.user-menu-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.user-menu-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: .85rem; }
.user-menu-list {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50; min-width: 180px;
    display: flex; flex-direction: column; padding: .35rem 0;
    background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--accent);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.user-menu-list a, .user-menu-list button { display: block; padding: .45rem 1rem; color: var(--text); text-align: left; }
.user-menu-list a:hover { background: var(--surface2); }
.user-menu-list form { margin: 0; border-top: 1px solid var(--border); margin-top: .3rem; padding-top: .3rem; }
.user-menu-list button { width: 100%; background: transparent; border: 0; border-radius: 0; font-weight: 400; cursor: pointer; }
.user-menu-list button:hover { background: var(--surface2); color: var(--accent); }

/* Hamburger: only visible on small screens (see the media query at the bottom) */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); user-select: none; }
.nav-burger:hover, .nav-toggle:focus-visible + .nav-burger { border-color: var(--accent); color: var(--accent); }
.nav-toggle:checked + .nav-burger { background: var(--surface2); }

footer { margin-top: 3rem; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--border); color: var(--text-muted); }

/* ── Shared bits ──────────────────────────────────────────────────────── */
.breadcrumb { font-size: .88rem; color: var(--text-muted); margin-top: 0; margin-bottom: 1rem; }   /* v46.3: longhand keeps the page's auto centring */
.badge, .tag, .pv-banned {
    display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; white-space: nowrap;
    background: var(--surface2); color: var(--text);
}
.badge-pinned, .tag-restore   { background: var(--success-bg); color: var(--success); }
.badge-locked, .tag-delete, .tag-purge, .pv-banned { background: var(--danger-bg); color: var(--danger); }
.badge-deleted { background: var(--danger); color: #1e1e1e; }
.tag-edit      { background: var(--info-bg); color: var(--accent2); }

.alert, .alert-error, .alert-success, .pv-notice, .editor-error, .purge-error, .login-error {
    padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .92rem; border-left: 3px solid;
}
.alert-error, .editor-error, .purge-error, .login-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.alert-success, .pv-notice { background: var(--success-bg); color: var(--success); border-color: var(--success); }

/* Pagination: square buttons, current page in orange (like phpBB) */
.pagination, .pager { margin-top: 1rem; margin-bottom: 1rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.pagination a, .pagination span {
    min-width: 2rem; text-align: center; padding: .3rem .6rem; border-radius: 4px;
    background: var(--surface2); color: var(--text); font-weight: 600;
}
.pagination a:hover { background: var(--accent-fill); color: var(--on-accent); text-decoration: none; }
.pagination .cur    { background: var(--accent-fill); color: var(--on-accent); }
/* v47: jump-to-page box at the end of a topic's pager */
.page-jump { display: flex; align-items: center; gap: .35rem; margin-left: .5rem; }
.page-jump input { width: 4.5rem; padding: .25rem .4rem; }
.page-jump button { padding: .3rem .7rem; }

/* Card: the shared look of boxes */
.post, .reply-box, .section, .admin-box, .login-box, .purge-box, #preview, .diff {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}

/* ── Forum index ──────────────────────────────────────────────────────── */
.forum-index { counter-reset: cat; }
.forum-index h2 {
    counter-increment: cat; display: flex; align-items: baseline; gap: .8rem;
    margin: 2rem 0 .6rem; font-size: .95rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--text);
}
/* "01", "02"… in orange before each category, as on the old board */
.forum-index h2::before { content: counter(cat, decimal-leading-zero); color: var(--accent); font-size: 1.6rem; font-weight: 300; letter-spacing: 0; }
/* v37: sub-categories, indented under their parent */
.forum-index .cat-sub { margin-left: 1.25rem; padding-left: .9rem; border-left: 1px solid var(--border); }
.forum-index h3 { margin: 1rem 0 .4rem; font-size: .85rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
@media (max-width: 640px) { .forum-index .cat-sub { margin-left: .5rem; padding-left: .6rem; } }
.forum-table { border-collapse: separate; border-spacing: 0 .35rem; margin: 0 0 1rem; }
.forum-table td { background: var(--surface); border: 0; padding: .8rem 1rem; vertical-align: middle; }
.forum-table td:first-child { border-left: 3px solid transparent; border-radius: var(--radius) 0 0 var(--radius); transition: border-color .15s; }
.forum-table td:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.forum-table tr:hover td    { background: #323232; }
.forum-table tr:hover td:first-child { border-left-color: var(--accent); }
.forum-table .f-name   { font-weight: 600; font-size: 1.02rem; }
.forum-table .f-desc   { color: var(--text-muted); font-size: .88rem; margin-top: .15rem; }
.forum-table .f-stats  { text-align: right; white-space: nowrap; color: var(--text-muted); font-size: .85rem; width: 8rem; }
.forum-table .f-last   { font-size: .85rem; color: var(--text-muted); width: 17rem; }
.forum-table .f-last a { color: var(--text); }
.forum-table .f-last a:hover { color: var(--accent); }
.no-forums, .no-topics, .no-history, .reply-note { color: var(--text-muted); padding: 1.5rem 0; }

/* ── Topic list ───────────────────────────────────────────────────────── */
.forum-desc { color: var(--text-muted); margin-top: 0; margin-bottom: 1.2rem; }
.new-topic-btn { display: inline-block; padding: .5rem 1.1rem; border-radius: var(--radius); background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.new-topic-btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.topic-table { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.topic-table th { padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.topic-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.topic-table tr:last-child td { border-bottom: none; }
/* Orange bar on the left of a row on hover (the old board's arrow) */
.topic-table td.t-title { border-left: 3px solid transparent; transition: border-color .15s; }
.topic-table tbody tr:hover td { background: #323232; }
.topic-table tbody tr:hover td.t-title { border-left-color: var(--accent); }
.t-title a   { font-weight: 600; }
.t-title .badge { margin-right: .3rem; }
.t-deleted td { opacity: .55; }
.t-by   { font-size: .82rem; color: var(--text-muted); }
.t-num  { text-align: right; white-space: nowrap; }
td.t-num { color: var(--text-strong); font-weight: 600; font-size: 1rem; }
.t-last { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }

/* ── Topic / posts ────────────────────────────────────────────────────── */
.topic-title  { margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; }
.topic-badges { font-size: .8rem; }
.topic-badges .badge { margin-left: .3rem; }
.post         { display: flex; margin-bottom: 1rem; overflow: hidden; }
.post-sidebar { flex: 0 0 10rem; background: var(--surface3); padding: 1rem .8rem; border-right: 1px solid var(--border); text-align: center; font-size: .85rem; }
.post-sidebar .uname   { font-weight: 700; font-size: .98rem; word-break: break-word; }
.post-sidebar .uname a { color: var(--accent); }
.post-sidebar .urole   { color: var(--accent2); font-size: .75rem; margin-top: .15rem; text-transform: uppercase; letter-spacing: .06em; }
.post-sidebar .ustat   { color: var(--text-muted); margin-top: .5rem; line-height: 1.6; }
.post-avatar, .post-avatar-ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto .5rem; display: block; border: 2px solid var(--border); }
.post-avatar-ph, .avatar-preview .ph, .pv-avatar-ph { background: var(--surface2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.post-body    { flex: 1; padding: 1rem 1.1rem; min-width: 0; }
.post-meta    { font-size: .8rem; color: var(--text-muted); margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.post-meta a  { color: var(--text-muted); }
.post-content { line-height: 1.7; overflow-wrap: break-word; }
.post-content img { max-width: 100%; height: auto; border-radius: 4px; }
.post-content blockquote { border-left: 3px solid var(--accent); background: var(--surface3); margin: .6rem 0; padding: .5rem .9rem; color: var(--text); border-radius: 0 4px 4px 0; }
.post-content pre  { background: var(--surface2); padding: .7rem .9rem; overflow-x: auto; border-radius: 4px; border: 1px solid var(--border); }
.post-content code { background: var(--surface2); padding: .1rem .35rem; border-radius: 3px; font-size: .9em; font-family: var(--mono); }
.post-content pre code { background: none; padding: 0; border: 0; }
.post-content table { margin: .6rem 0; }
.post-content .yt-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: .5rem 0; }
.post-content .yt-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.post-content .ig-embed { max-width: 400px; }
.post-edited, .post-edited a { font-size: .78rem; color: var(--text-muted); margin-top: .6rem; font-style: italic; }
.post-sig   { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--border); max-width: 30rem; font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }

.post-actions { display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-start; margin-top: .8rem; padding-top: .5rem; border-top: 1px solid var(--border); font-size: .8rem; }
.post-actions a, .post-actions summary, .post-actions button.link {
    color: var(--text-muted); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-weight: 500;
}
.post-actions a:hover, .post-actions summary:hover, .post-actions button.link:hover { color: var(--accent); background: none; text-decoration: none; }
.post-actions form { display: inline; margin: 0; }

/* v28: subscribe / unsubscribe under the topic title, and the editor tick box */
.watch-form { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: -.4rem; margin-bottom: 1rem; font-size: .85rem; color: var(--text-muted); }
.watch-form button.link, .watch-list button.link { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.watch-form button.link:hover, .watch-list button.link:hover { color: var(--accent-hover); background: none; text-decoration: underline; }
.editor-watch { display: flex; gap: .45rem; align-items: center; margin: .2rem 0 .7rem; font-size: .88rem; cursor: pointer; }
.editor-watch input { width: auto; margin: 0; }
.watch-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.watch-list li { display: flex; gap: .8rem; align-items: baseline; justify-content: space-between; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.watch-list form { margin: 0; flex-shrink: 0; }
.watch-list .meta { color: var(--text-muted); font-size: .8rem; }
.watch-list .sub-mode { display: flex; gap: .4rem; align-items: center; margin-left: auto; }
.watch-list .sub-mode select { width: auto; padding: .15rem .3rem; font-size: .82rem; }
.post-actions details[open] { flex-basis: 100%; }
.post-actions details form  { display: flex; gap: .4rem; margin-top: .4rem; }
.post-actions details input { flex: 1; padding: .3rem .5rem; }
.post-actions details button { padding: .3rem .8rem; }
.post-actions .danger, .post-actions .danger:hover { color: var(--danger); }

.attach-info { margin-top: .6rem; font-size: .78rem; color: var(--text-muted); }
.attach-info summary { cursor: pointer; }
.attach-info table { margin: .3rem 0 0; }
.attach-info th, .attach-info td { background: none; padding: .1rem .6rem .1rem 0; border: 0; text-transform: none; letter-spacing: 0; font-size: .78rem; word-break: break-word; vertical-align: top; }
.attach-info .attach-one { border-top: 1px solid var(--border); padding-top: .3rem; margin-top: .3rem; }
.attach-info pre { max-height: 12rem; overflow: auto; background: var(--surface2); padding: .4rem; font-size: .72rem; }

/* Deleted posts/topics (staff only) */
.post-deleted { border-style: dashed; border-color: var(--danger); background: #2e2523; }
.post-deleted .post-sidebar { opacity: .6; }
.deleted-note { font-size: .85rem; color: var(--danger); }
.deleted-note summary { cursor: pointer; color: var(--text-muted); margin-top: .4rem; }
.topic-deleted-banner { background: var(--danger-bg); color: var(--danger); border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.topic-deleted-banner form { margin: 0; }
.topic-deleted-banner button, .pv-actions button, .btn-danger {
    background: transparent; color: var(--danger); border: 1px solid var(--danger); padding: .25rem .8rem; font-weight: 500;
}
.topic-deleted-banner button:hover, .pv-actions button:hover, .btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ── Editor (reply, new topic, edit) ──────────────────────────────────── */
.reply-box    { padding: 1rem 1.1rem; margin-top: 1.5rem; }
.reply-box h2 { margin: 0 0 .7rem; font-size: 1.1rem; }
.new-topic h1, .edit-post h1, .history h1 { margin: 0 0 1rem; font-size: 1.5rem; }
.edit-note    { color: var(--text-muted); font-size: .85rem; margin: -.6rem 0 1rem; }
.editor input[type=text], .editor textarea { width: 100%; }
.editor input[type=text] { margin-bottom: .6rem; font-weight: 600; }
.editor #post-reason { font-weight: normal; }
.editor textarea { min-height: 10rem; line-height: 1.55; resize: vertical; }
.editor label    { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: .2rem; }
.editor-help     { font-size: .8rem; color: var(--text-muted); margin: .3rem 0 .7rem; }
/* v47: draft auto-save line under the editor */
.draft-status { font-size: .8rem; color: var(--text-muted); margin: 0 0 .7rem; }
.draft-status button { margin-left: .4rem; color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.draft-status button:hover { color: var(--accent-hover); background: none; text-decoration: underline; }
.editor-buttons  { display: flex; gap: .5rem; flex-wrap: wrap; }
.editor-buttons button { background: transparent; color: var(--accent); }
.editor-buttons button:hover { background: var(--info-bg); color: var(--accent-hover); }
.editor-buttons button[type=submit] { background: var(--accent-fill); color: var(--on-accent); }
.editor-buttons button[type=submit]:hover { background: var(--accent-hover); }
.editor-attach   { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 .2rem; font-size: .85rem; }
.editor-attach button { padding: .3rem .8rem; background: var(--surface2); color: var(--text); border-color: var(--border); font-weight: 500; }
.editor-attach button:hover { border-color: var(--accent); background: var(--surface2); color: var(--accent); }
#attach-status   { color: var(--text-muted); }
#attach-status.is-error { color: var(--danger); }
.editor textarea.is-dropping { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--info-bg); }
#preview         { margin-top: 1rem; border-style: dashed; padding: .9rem; }
#preview .preview-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: .4rem; }

/* ── History / diff ───────────────────────────────────────────────────── */
.rev-table { font-size: .88rem; margin-bottom: .7rem; }
.rev-table .pick  { text-align: center; width: 2.5rem; }
.rev-table .track { color: var(--text-muted); font-size: .8rem; word-break: break-all; }
.rev-table tr.shown td { background: var(--info-bg); }
.diff-head { margin: 1.5rem 0 .5rem; font-size: 1.05rem; }
.diff { white-space: pre-wrap; overflow-wrap: break-word; font-family: var(--mono); font-size: .88rem; line-height: 1.55; padding: .9rem; }
.diff del { background: var(--danger-bg); color: var(--danger); }
.diff ins { background: var(--success-bg); color: var(--success); text-decoration: none; }

/* ── Purge confirmation ───────────────────────────────────────────────── */
.purge-box { border: 2px solid var(--danger); padding: 1.1rem; max-width: 40rem; }
.purge-box h1 { margin: 0 0 .6rem; font-size: 1.3rem; color: var(--danger); }
.purge-box ul { margin: .4rem 0 1rem; }
.purge-box label { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: .2rem; }
.purge-box input[type=text] { width: 100%; margin-bottom: .8rem; }
.purge-go, .purge-go:hover { background: var(--danger); border-color: var(--danger); color: #1e1e1e; }

/* ── Login ────────────────────────────────────────────────────────────── */
.login-box { max-width: 380px; margin: 3rem auto; padding: 1.6rem; border-top: 3px solid var(--accent); }
.login-box h1 { margin-top: 0; font-size: 1.4rem; text-align: center; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }
.login-box label { display: block; margin: .9rem 0 .3rem; font-weight: 600; font-size: .9rem; }
.login-box input[type=text], .login-box input[type=password] { width: 100%; font-size: 1rem; }
.login-box button { margin-top: 1.3rem; width: 100%; padding: .65rem; font-size: 1rem; }
.login-box > p.muted { text-align: center; font-size: .88rem; margin: 1rem 0 0; }

/* v23 registration / confirmation */
.register-box { max-width: 440px; }
.register-box h1 + p.muted { text-align: center; font-size: .88rem; }
.register-box input[type=email] { width: 100%; font-size: 1rem; }
.register-box .hint { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.register-box .code-input { font-size: 1.6rem !important; letter-spacing: .35em; text-align: center; font-family: var(--mono); }
.resend-form { margin-top: 1rem; text-align: center; font-size: .9rem; }
.resend-form .btn-link { width: auto; margin: 0; padding: 0; background: none; border: 0; color: var(--accent); font-size: .9rem; font-weight: 400; }
.resend-form .btn-link:hover { text-decoration: underline; background: none; }

/* v23 home page */
.home-hero { text-align: center; padding: 2.2rem 1rem 2.4rem; margin-bottom: 1.8rem; background: var(--surface); border-radius: var(--radius); border-bottom: 3px solid var(--accent); }
.home-hero h1 { margin: 0; font-size: 2.1rem; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; }
.home-tagline { margin: .5rem 0 0; color: var(--accent2); font-size: 1.05rem; }
.home-join { display: inline-block; margin-top: 1.3rem; padding: .6rem 1.4rem; font-size: 1rem; }
.home-join:hover { color: var(--on-accent); text-decoration: none; }
.home-latest h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .8rem; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed-item { background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: .5rem; }
.feed-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.feed-title { font-weight: 600; font-size: 1rem; }
.feed-forum, .feed-meta { font-size: .82rem; color: var(--text-muted); }
.feed-meta { margin-top: .1rem; }
.feed-excerpt { margin: .35rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }

/* ── Profile edit ─────────────────────────────────────────────────────── */
.profile-edit { max-width: 720px; margin-left: max(1rem, calc((100% - var(--wrap)) / 2)); }   /* left-aligned with the rest */
.section      { padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; }
.section h2   { margin: 0 0 1rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.form-row     { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.form-row label { font-size: .88rem; font-weight: 600; color: var(--text); }
.form-row input, .form-row textarea { width: 100%; }
.form-row input[type=checkbox] { width: auto; }
.form-row textarea { resize: vertical; }
.form-row .hint { font-size: .78rem; color: var(--text-muted); }
.btn-primary  { background: var(--accent-fill); color: var(--on-accent); }
.avatar-preview { display: flex; align-items: center; gap: 1.2rem; margin-bottom: .8rem; flex-wrap: wrap; }
.avatar-preview img, .avatar-preview .ph { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 2rem; }
.remove-link  { font-size: .8rem; }

/* ── Public profile ───────────────────────────────────────────────────── */
.pv-head   { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pv-avatar, .pv-avatar-ph { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--accent); }
.pv-avatar-ph { font-size: 3rem; }
.pv-name   { margin: 0; font-size: 1.6rem; word-break: break-word; }
.pv-role   { color: var(--accent2); margin-top: .2rem; }
.pv-banned { margin-left: .4rem; }
.pv-actions { margin-top: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.pv-actions form { margin: 0; }
.pv-facts  { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin-top: 0; margin-bottom: 1.5rem; font-size: .95rem; }
.pv-facts dt { font-weight: 600; color: var(--text-muted); }
.pv-facts dd { margin: 0; word-break: break-word; }
.pv-sig    { border-top: 1px solid var(--border); padding-top: .8rem; margin-bottom: 1.5rem; color: var(--text-muted); font-size: .9rem; }
.pv-sig h2, .pv-posts h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
.pv-posts ul { list-style: none; padding: 0; margin: 0; }
.pv-posts li { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .4rem; }
.pv-posts li:hover { border-left-color: var(--accent); }
.pv-posts .where { font-size: .92rem; }
.pv-posts .when  { font-size: .78rem; color: var(--text-muted); }
.pv-posts .snip  { font-size: .88rem; color: var(--text-muted); margin-top: .2rem; overflow-wrap: break-word; }

/* ── Admin panel ──────────────────────────────────────────────────────── */
.admin-tabs   { display: flex; gap: .3rem; border-bottom: 2px solid var(--accent); margin-bottom: 1.3rem; flex-wrap: wrap; }
.admin-tabs a { padding: .5rem 1rem; color: var(--text); border-radius: var(--radius) var(--radius) 0 0; }
.admin-tabs a:hover { color: var(--accent); background: var(--surface); text-decoration: none; }
.admin-tabs a.on { background: var(--accent-fill); color: var(--on-accent); }
.admin-box    { padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; overflow-x: auto; }
.admin-box h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
.admin-help   { color: var(--text-muted); font-size: .88rem; margin: .3rem 0 .8rem; }
.admin-form   { display: flex; gap: .6rem 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.admin-form label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; color: var(--text); gap: .25rem; }
.admin-form input, .admin-form select { padding: .35rem .5rem; }
.admin-form button { padding: .4rem 1rem; }
.admin-form a { font-size: .88rem; align-self: center; }
.admin-table td, .admin-table th { font-size: .88rem; vertical-align: top; }
.admin-table .when { white-space: nowrap; color: var(--text-muted); }
.admin-table .muted, .admin-muted { color: var(--text-muted); }
.admin-num { width: 5rem; }   /* v37: order inputs */
.admin-table tr:hover td { background: var(--surface); }

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    body { font-size: 14px; }
    /* Top bar: row 1 the brand; row 2 "☰ Menu" left, user menu / guest buttons right.
       The links drop down underneath only while the checkbox is ticked. */
    .site-nav { gap: .5rem .6rem; position: relative; }
    .site-nav .brand { flex-basis: 100%; font-size: 1rem; letter-spacing: .08em; white-space: normal; }
    .nav-burger { display: inline-block; order: 2; }
    .site-nav .who { order: 3; margin-left: auto; }
    /* The menu opens as a full-width panel under the whole bar (anchored to
       .site-nav, not the name), so it can never run off the screen edge. */
    .user-menu { position: static; }
    .user-menu-list { left: 1rem; right: 1rem; top: calc(100% - .3rem); }
    .site-nav .nav-links { order: 4; display: none; flex-basis: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--border); padding-top: .3rem; }
    .site-nav .nav-links a { padding: .45rem 0; }
    .nav-toggle:checked ~ .nav-links { display: flex; }
    .user-menu summary strong { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .home-hero h1 { font-size: 1.5rem; }

    /* Forum and topic tables become stacked cards */
    .forum-table, .forum-table tbody, .forum-table tr, .forum-table td,
    .topic-table, .topic-table tbody, .topic-table tr, .topic-table td { display: block; width: 100%; }
    .forum-table { border-spacing: 0; }
    .forum-table tr { margin-bottom: .45rem; border-left: 3px solid var(--accent); border-radius: var(--radius); overflow: hidden; }
    .forum-table td, .forum-table td:first-child, .forum-table td:last-child { border-radius: 0; border-left: 0; padding: .35rem .9rem; min-width: 0; }
    .forum-table td:first-child { padding-top: .75rem; }
    .forum-table td:last-child  { padding-bottom: .75rem; }
    .forum-table .f-stats, .forum-table .f-last { width: 100%; }
    .forum-table .f-stats { text-align: left; white-space: normal; }
    .forum-table .f-stats br { display: none; }

    .topic-table thead { display: none; }
    .topic-table tr { border-bottom: 1px solid var(--border); padding: .5rem 0; }
    .topic-table tr:last-child { border-bottom: 0; }
    .topic-table td { border: 0; padding: .15rem .9rem; }
    .topic-table td.t-title { border-left: 0; }
    .topic-table td.t-num { display: inline-block; width: auto; text-align: left; font-size: .82rem; font-weight: 500; color: var(--text-muted); }
    .topic-table td.t-num + td.t-num { padding-left: .3rem; }
    .topic-table td.t-num:nth-of-type(2)::after { content: " replies ·"; }
    .topic-table td.t-num:nth-of-type(3)::after { content: " views"; }
    .t-last { white-space: normal; }

    .post { flex-direction: column; }
    .post-sidebar { flex: none; border-right: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .7rem; text-align: left; padding: .6rem .8rem; }
    .post-avatar, .post-avatar-ph { width: 40px; height: 40px; margin: 0; font-size: 1.1rem; }
    .post-sidebar .ustat { display: none; }
    .post-body { padding: .8rem; }

    .pv-facts { grid-template-columns: 1fr; gap: .1rem; }
    .pv-facts dd { margin-bottom: .5rem; }
    .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ── Private messages (v29) ───────────────────────────────────────────── */
.pm-badge {
    display: inline-block; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .3rem;
    border-radius: 999px; background: var(--accent-fill); color: var(--on-accent);
    font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center; vertical-align: middle;
}
.badge-new { background: var(--info-bg); color: var(--accent2); }
.pm-title { margin-top: 0; margin-bottom: .6rem; font-size: 1.4rem; color: var(--text-strong); }
.pm-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.pm-tabs a { padding: .45rem .9rem; color: var(--text); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.pm-tabs a:hover { color: var(--accent); text-decoration: none; }
.pm-tabs a.active { background: var(--surface); border-color: var(--border); color: var(--accent); margin-bottom: -1px; }
.pm-empty, .pm-count { color: var(--text-muted); }
.pm-count { font-size: .85rem; }
.pm-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.pm-table th { background: var(--surface3); color: var(--text-muted); font-weight: 600; font-size: .82rem; text-align: left; padding: .55rem .9rem; }
.pm-table td { padding: .6rem .9rem; border-top: 1px solid var(--border); }
.pm-table tr:hover td { background: var(--surface2); }
.pm-table td.pm-subject { border-left: 3px solid transparent; }
.pm-table tr.pm-unread td.pm-subject { border-left-color: var(--accent); }
.pm-unread .pm-subject a, .pm-unread .pm-who a { font-weight: 700; color: var(--text-strong); }
.pm-thread-link { display: block; font-size: .78rem; color: var(--text-muted); }
.pm-when { white-space: nowrap; color: var(--text-muted); font-size: .85rem; width: 1%; }
.pm-original { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.2rem; }
.pm-original-label { font-size: .85rem; color: var(--text-muted); margin-bottom: .5rem; }
/* Conversation (v30): their messages on the left, the viewer's on the right.
   Only vertical margins on body-level blocks; the page wrap sets the sides. */
.pm-thread-title { margin-top: 0; margin-bottom: .8rem; font-size: 1.2rem; }
.pm-thread-title .muted { font-size: .85rem; font-weight: 400; }
.pm-older { margin-top: 0; margin-bottom: .8rem; font-size: .88rem; }
.pm-thread { list-style: none; padding: 0; margin-top: 0; margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.pm-msg { display: flex; gap: .7rem; align-items: flex-start; max-width: 85%; }
.pm-mine { flex-direction: row-reverse; align-self: flex-end; }
.pm-theirs { align-self: flex-start; }
.pm-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border); }
.pm-avatar-ph { display: flex; align-items: center; justify-content: center; background: var(--surface2); color: var(--accent2); font-weight: 700; }
.pm-bubble { min-width: 0; flex: 1 1 auto; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); }
.pm-mine .pm-bubble { background: var(--surface3); border-color: var(--accent); }
.pm-focus .pm-bubble { box-shadow: 0 0 0 2px var(--accent2); }
.pm-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-size: .82rem; color: var(--text-muted); margin-bottom: .3rem; }
.pm-msg-who { font-weight: 700; font-size: .9rem; }
.pm-seen { font-style: italic; }
.pm-msg-delete { margin: 0 0 0 auto; }
.pm-msg-delete .btn-link { padding: 0; background: none; border: 0; color: var(--text-muted); font-size: .8rem; font-weight: 400; }
.pm-msg-delete .btn-link:hover { color: var(--danger); background: none; text-decoration: underline; }
.pm-msg-subject { font-weight: 600; color: var(--text-strong); margin-bottom: .3rem; }
.pm-bubble .post-content { overflow-wrap: anywhere; }
.pm-bubble .post-content > :first-child { margin-top: 0; }
.pm-bubble .post-content > :last-child { margin-bottom: 0; }
.pm-quick-reply { margin-top: 0; margin-bottom: 1.5rem; padding: .9rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pm-quick-reply label { display: block; font-weight: 600; margin-bottom: .4rem; }
.pm-quick-reply textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.pm-quick-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; font-size: .9rem; }
@media (max-width: 720px) {
    .pm-msg { max-width: 100%; }
    .pm-avatar { width: 32px; height: 32px; font-size: .85rem; }
    .pm-table thead { display: none; }
    .pm-table { display: block; }
    .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: 100%; }
    .pm-table tr { border-top: 1px solid var(--border); padding: .4rem 0; }
    .pm-table td { border: 0; padding: .15rem .9rem; }
    .pm-table td.pm-who, .pm-table td.pm-when { display: inline-block; width: auto; font-size: .82rem; }
}

/* v34: one-click unsubscribe page, "Show older messages" links, profile time zone / devices */
.unsub-box { max-width: 36rem; margin: 2rem auto; }
.unsub-box h1 { font-size: 1.4rem; }
.unsub-box form { margin: 1rem 0; }
.pm-older a { margin-left: .6rem; }
#timezone select { max-width: 100%; }

/* v36: unread markers (members only) and "Mark all read" buttons */
.read-dot {
    display: inline-block; width: .6rem; height: .6rem; margin-right: .45rem; vertical-align: middle;
    border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; align-self: center;
}
.is-unread .read-dot { background: var(--accent); border-color: var(--accent); }
.is-unread .f-name a, .is-unread .t-title > a:not(.badge), .is-unread .feed-title { font-weight: 800; color: var(--text-strong); }
.badge-unread { background: var(--accent-fill); color: var(--on-accent); margin-right: .35rem; }
a.badge-unread:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.forum-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 0; margin-bottom: 1rem; }
.mark-read { margin: 0 0 1rem; text-align: right; }
.forum-actions .mark-read { margin: 0 0 0 auto; }
.mark-read .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.mark-read .btn-ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

/* v38: favorites ★, notifications 🔔, home feed filter, collapsible forum index */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fav-form { display: inline; margin: 0; }
.fav-btn { background: none; border: 0; padding: 0 .3rem 0 0; font-size: 1.05rem; line-height: 1; color: var(--text-muted); cursor: pointer; vertical-align: middle; }
.fav-btn:hover { background: none; color: var(--accent); }
.fav-btn.is-fav { color: var(--accent); }
.topic-title .fav-form .fav-btn { font-size: 1.3rem; }
.nav-notif { white-space: nowrap; }
.feed-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .5rem; font-size: .85rem; }
.feed-filter-label { color: var(--text-muted); }
.feed-filter .pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; }
.feed-filter .pill:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.feed-filter button { font-size: .8rem; padding: .25rem .7rem; }
.feed-filter .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.feed-filter .btn-ghost:disabled { opacity: .5; cursor: default; }
.feed-filter-note { font-size: .8rem; margin: 0 0 .6rem; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; background: var(--surface); border-left: 3px solid var(--border); border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: .45rem; }
.notif-item.is-unread { border-left-color: var(--accent); }
.notif-item.is-unread .notif-text { font-weight: 600; }
.notif-icon { width: 1.4rem; text-align: center; color: var(--accent); font-weight: 700; }
.notif-text { flex: 1; overflow-wrap: anywhere; }
.notif-time { font-size: .8rem; color: var(--text-muted); }

/* v41: forum index — per-member collapse (▶/▼) and pin (📌) on top-level categories */
.cat-pref-form { display: none; }
.forum-index h2 .cat-name { min-width: 0; }
.cat-collapse-btn, .cat-pin-btn { background: none; border: 0; padding: 0 .2rem; font: inherit; line-height: 1; cursor: pointer; letter-spacing: 0; }
.cat-collapse-btn { font-size: .8em; color: var(--text-muted); }
.cat-collapse-btn:hover { background: none; color: var(--accent); }
.cat-pin-btn { margin-left: auto; font-size: .85rem; opacity: .3; filter: grayscale(1); transition: opacity .15s; }
.cat-pin-btn:hover, .cat-pin-btn:focus-visible { background: none; opacity: .8; }
.cat-pin-btn.is-pinned { opacity: 1; filter: none; }
.cat-unread-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); align-self: center; flex: none; }
.cat-collapsed > .forums-list { display: none; }
.cat-collapsed > h2 { margin-bottom: 0; }

/* v42: mod tools (move / split / merge) */
.mod-tools { font-size: .85rem; color: var(--text-muted); margin-top: .4rem; margin-bottom: .8rem; }   /* v47.1: longhand keeps auto centring */
.mod-box { max-width: 44rem; }
.mod-box h1 { margin: 0 0 .6rem; font-size: 1.3rem; }
.mod-box label { display: block; font-size: .85rem; color: var(--text-muted); margin-bottom: .2rem; }
.mod-box input[type=text], .mod-box select { width: 100%; margin-bottom: .8rem; }
.split-list { margin: .4rem 0 1rem; max-height: 28rem; overflow-y: auto; }
.mod-box label.split-row { display: block; color: inherit; font-size: .9rem; padding: .4rem; border-bottom: 1px solid var(--border, #ccc); cursor: pointer; }
.split-excerpt { color: var(--text-muted); }

/* v43 search */
.nav-search { display: inline-flex; margin: 0; }
.nav-search input { width: 9rem; padding: .15rem .4rem; font-size: .9em; }
.search-form { display: flex; gap: .5rem; margin: 0 0 1rem; }
.search-form input[type=search] { flex: 1; max-width: 30rem; }
.search-results { list-style: none; padding: 0; }
.search-results li { padding: .6rem 0; border-bottom: 1px solid var(--border); }
.search-results .snippet { margin: .2rem 0; }
.search-results .meta { font-size: .85em; opacity: .8; }

/* ── Articles (v44) ───────────────────────────────────────────────────── */
.article-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; margin-bottom: 1rem; }   /* v47.2: longhand keeps auto centring */
.tag-chip { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-size: .82rem; color: var(--text); background: var(--surface); }
.tag-chip:hover, .tag-chip.on { border-color: var(--accent); color: var(--accent); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; margin-bottom: 1rem; }   /* v47.2 */
.article-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.article-card-img { display: block; aspect-ratio: 16 / 9; background: var(--surface3); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card-body { padding: .8rem 1rem 1rem; }
.article-card-body h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.article-meta { font-size: .85rem; color: var(--text-muted); }
.article { max-width: 820px; }
.article-header h1 { font-size: 2rem; margin: .4rem 0; }
.article-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); margin: 1rem 0; display: block; }
.article-body { font-size: 1.05rem; line-height: 1.7; }
.article-body::after { content: ""; display: block; clear: both; }
.article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.article-body img.img-left  { float: left;  max-width: 45%; margin: .3rem 1.2rem .8rem 0; }
.article-body img.img-right { float: right; max-width: 45%; margin: .3rem 0 .8rem 1.2rem; }
.article-body img.img-center { display: block; margin: 1rem auto; }
.article-body img.img-wide { display: block; width: 100%; margin: 1rem 0; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right  { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1 { padding-left: 2em; } .article-body .ql-indent-2 { padding-left: 4em; }
.article-body blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: .2rem 1rem; color: var(--text-strong); background: var(--surface3); }
.article-body iframe.ql-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1rem 0; }
@media (max-width: 600px) { .article-body img.img-left, .article-body img.img-right { float: none; max-width: 100%; margin: 1rem 0; } }
.article-discuss { margin: 2rem 0; padding: 1rem; background: var(--info-bg); border-radius: var(--radius); }
.article-related { margin: 2rem 0; }
.article-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; gap: 1rem; align-items: start; }
.article-form > .admin-box { margin: 0; }
.article-form > .admin-box:first-of-type { grid-column: 1; grid-row: 1; }   /* title box: left, top */
.article-form > .article-editor-box { grid-column: 1; grid-row: 2; }       /* editor: left, under the title */
.article-form > .article-side { grid-column: 2; grid-row: 1 / 3; }          /* settings + buttons: right column */
@media (max-width: 900px) { .article-form { grid-template-columns: 1fr; grid-template-rows: none; } .article-form > .admin-box:first-of-type, .article-form > .article-editor-box, .article-form > .article-side { grid-column: 1; grid-row: auto; } }
.article-input-wide { width: 100%; }
.article-status { font-size: .85rem; color: var(--text-muted); }
.article-editor { position: relative; background: var(--surface); }
.article-editor .ql-editor { min-height: 480px; }
.article-form .ql-toolbar.ql-snow { background: var(--surface2); border-color: var(--border); position: sticky; top: 0; z-index: 5; }
.article-form .ql-container.ql-snow { border-color: var(--border); }
.article-form .ql-snow .ql-stroke { stroke: var(--text); }
.article-form .ql-snow .ql-fill { fill: var(--text); }
.article-form .ql-snow .ql-picker { color: var(--text); }
.article-form .ql-snow .ql-picker-options { background: var(--surface2); }
.article-side label { display: block; margin-top: .6rem; }
.article-side input[type=text], .article-side textarea, .article-side select { width: 100%; }
.article-cover-preview { max-width: 100%; border-radius: 4px; margin-top: .4rem; display: block; }
.article-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.img-pos-bar { position: absolute; z-index: 20; display: flex; gap: .25rem; padding: .25rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.img-pos-bar[hidden] { display: none; }
.img-pos-bar button { padding: .2rem .55rem; font-size: .8rem; }
.forum-welcome { display: flex; gap: 1rem; align-items: center; margin-top: .8rem; margin-bottom: 1.2rem; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.forum-welcome-img img { width: 200px; height: 130px; object-fit: cover; border-radius: 4px; display: block; }
.forum-welcome-body h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.forum-welcome-body p { margin: 0 0 .6rem; }
@media (max-width: 600px) { .forum-welcome { flex-direction: column; align-items: stretch; } .forum-welcome-img img { width: 100%; height: auto; aspect-ratio: 16 / 9; } }

/* v45: home page — collapsible filter box above the feed, latest articles */
/* margin-bottom only: a "margin" shorthand would cancel the page's auto centring (body > * rule) */
.feed-filter-box { margin-bottom: 1.2rem; padding: .5rem .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-sizing: border-box; }
.feed-filter-box > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; list-style: none; }
.feed-filter-box > summary::-webkit-details-marker { display: none; }
.feed-filter-box[open] > summary { margin-bottom: .5rem; }
.feed-filter-toggle { font-size: .7rem; color: var(--text-muted); transition: transform .15s; display: inline-block; }
.feed-filter-toggle::before { content: "▶"; }
details[open].feed-filter-box .feed-filter-toggle { transform: rotate(90deg); }
.feed-filter-box .pill-on { display: inline-block; padding: .1rem .55rem; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: .8rem; }
.home-articles { margin-top: 1.8rem; }
.home-article-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.home-article-list li { padding: .7rem .9rem; margin-bottom: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.home-article-title { font-weight: 600; }
.home-article-meta { font-size: .8rem; margin-left: .5rem; }
.home-article-summary { margin: .3rem 0 0; font-size: .9rem; }

/* v48: PM bulk delete, conversation delete and search */
.pm-table .pm-pick { width: 2rem; padding-right: 0; }
.pm-pick input { width: auto; margin: 0; }
.pm-list-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; margin-bottom: 1rem; }
.pm-list-actions .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.pm-list-actions .btn-ghost:hover { background: transparent; border-color: var(--danger); color: var(--danger); }
.pm-delete-all { margin-top: -.4rem; margin-bottom: .8rem; }
.pm-delete-all .btn-link { padding: 0; background: none; border: 0; color: var(--text-muted); font-size: .8rem; font-weight: 400; cursor: pointer; }
.pm-delete-all .btn-link:hover { color: var(--danger); background: none; text-decoration: underline; }
.pm-search { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 0; margin-bottom: 1rem; }
.pm-search input[type=search] { flex: 1 1 16rem; }
.pm-results { list-style: none; padding: 0; margin-top: 0; margin-bottom: 1rem; }
.pm-results li { padding: .6rem .9rem; margin-bottom: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.pm-result-subject { font-weight: 600; }
.pm-result-text { margin-top: .3rem; margin-bottom: 0; font-size: .9rem; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .pm-table td.pm-pick { display: inline-block; width: auto; }
}

/* v48: who's online (forum index) and "Last seen" on profiles */
.who-online { margin-top: 1.5rem; margin-bottom: 0; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: .9rem; }
.who-online h4 { margin-top: 0; margin-bottom: .4rem; font-size: .95rem; color: var(--text-strong); }
.who-online h4 .muted { font-weight: 400; font-size: .85rem; }
.who-online p { margin-top: 0; margin-bottom: 0; }
.who-online a.staff { color: var(--accent2); font-weight: 600; }
.online-now { color: var(--success); font-weight: 600; }

/* v48: report a post, moderator report queue */
.report-quote { margin-top: 0; margin-bottom: 1rem; padding: .6rem .9rem; border-left: 3px solid var(--border); background: var(--surface); font-size: .9rem; overflow-wrap: anywhere; }
.report-quote .muted { display: block; font-size: .8rem; margin-bottom: .2rem; }
.report-box textarea { width: 100%; box-sizing: border-box; resize: vertical; margin-bottom: .8rem; }
.reports h1 { margin-top: 0; margin-bottom: .6rem; font-size: 1.4rem; }
.reports h2 { margin-top: 1.4rem; margin-bottom: .6rem; font-size: 1.1rem; }
.report-list { list-style: none; padding: 0; margin-top: 0; margin-bottom: 1rem; }
.report-item { padding: .8rem 1rem; margin-bottom: .6rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.report-head { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.report-head > a { font-weight: 600; }
.report-head .muted { font-size: .85rem; }
.report-flag { font-size: .75rem; color: var(--danger); background: var(--danger-bg); padding: 0 .4rem; border-radius: var(--radius); }
.report-excerpt { margin-top: .4rem; margin-bottom: .4rem; font-size: .9rem; color: var(--text-muted); overflow-wrap: anywhere; }
.report-reason { margin-top: 0; margin-bottom: .3rem; overflow-wrap: anywhere; }
.report-meta { margin-top: 0; margin-bottom: .5rem; font-size: .82rem; }
.report-close { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.report-close input[type=text] { flex: 1 1 14rem; }
.report-closed { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .88rem; }
.report-closed th { background: var(--surface3); color: var(--text-muted); text-align: left; font-weight: 600; padding: .5rem .8rem; }
.report-closed td { padding: .5rem .8rem; border-top: 1px solid var(--border); overflow-wrap: anywhere; }

/* v50: likes and the marked answer */
.badge-answer, a.badge-answer, a.badge-answer:hover { background: var(--success-bg); color: var(--success); text-decoration: none; }
.post-actions .like-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--text-muted); cursor: pointer; }
.post-actions span.like-btn { cursor: default; }
.post-actions button.like-btn:hover { background: none; color: var(--accent); }
.post-actions .like-btn.is-liked { color: var(--accent); font-weight: 700; }
.answer-copy {
    margin-top: 0; margin-bottom: 1rem; padding: .8rem 1rem;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: var(--radius);
}
.answer-head { font-size: .85rem; color: var(--text-muted); margin-bottom: .5rem; }
.answer-copy .post-content { max-height: 24rem; overflow: auto; }
.answer-jump { display: inline-block; margin-top: .6rem; font-size: .85rem; font-weight: 600; }

/* ── Garage (v51) ─────────────────────────────────────────────────────── */
/* --bg-alt from the spec doesn't exist in :root; --surface3 is the sunken shade. */
.garage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.garage-card { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: var(--surface); }
.garage-card-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--surface3); }
.garage-card-img-placeholder { width: 100%; aspect-ratio: 4/3; background: var(--surface3); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 2rem; }
.garage-card-body { padding: .5rem .75rem; }
.garage-card-title { font-weight: bold; margin-bottom: .15rem; margin-top: .25rem; }
.garage-card-sub { font-size: .85rem; color: var(--text-muted); }
.status-badge { display: inline-block; padding: .1rem .4rem; border-radius: 3px; font-size: .75rem; font-weight: bold; text-transform: uppercase; vertical-align: middle; }
.status-driver { background: #2d862d; color: #fff; }
.status-project { background: #cc6600; color: #fff; }
.status-stored { background: #666; color: #fff; }
.status-sold { background: #444; color: #fff; }
.status-lost { background: #333; color: #fff; }
.garage-hero { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 4px; margin-bottom: 1rem; }
.garage-photos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }
.garage-photo-item { margin: 0; }
.garage-photo-item img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.garage-photo-caption { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.post-garage-line { font-size: .78rem; font-style: italic; color: var(--text-muted); margin-top: .25rem; margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.garage-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; margin-bottom: 1rem; }
.garage-title { margin-bottom: .2rem; }
.garage-subtitle { margin-top: 0; color: var(--text-muted); font-size: 1.05rem; }
.garage-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .9rem; }
.garage-byline-avatar { border-radius: 50%; object-fit: cover; }
.garage-desc { margin-top: 1rem; margin-bottom: 1rem; }
.garage-back { margin-top: 1.5rem; margin-bottom: 1rem; }
.inline-form { display: inline; margin: 0; }
.garage-byline button.link, .garage-manage-actions button.link, .garage-photo-item button.link {
    color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.garage-byline .danger, .garage-manage-actions .danger, .garage-photo-item .danger { color: var(--danger); }
.garage-manage-list { list-style: none; padding: 0; margin-top: 0; margin-bottom: 1rem; }
.garage-manage-row { display: flex; gap: .9rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; margin-bottom: .5rem; }
.garage-thumb { width: 120px; flex-shrink: 0; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: flex; font-size: 1.5rem; }
.garage-manage-info { flex: 1; min-width: 0; }
.garage-manage-actions { display: flex; gap: .8rem; align-items: center; font-size: .9rem; }
.garage-form-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.garage-form-row > div { flex: 1 1 10rem; }
.garage-form-row input, .garage-form-row select { width: 100%; margin-bottom: .6rem; }
.garage-form #g-engine { font-weight: normal; }
.garage-cover { border: 1px solid var(--border); border-radius: var(--radius); margin-top: .6rem; margin-bottom: .8rem; padding: .6rem .8rem; }
.garage-cover-pick { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.garage-cover-pick label { display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.garage-cover-pick img { width: 90px; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; }
.garage-gallery-edit { margin-top: 1.5rem; margin-bottom: 1rem; }
.garage-caption-form { display: flex; gap: .4rem; margin-top: .3rem; }
.garage-caption-form input { flex: 1; min-width: 0; padding: .25rem .4rem; font-size: .85rem; }
.garage-photo-actions { display: flex; gap: .8rem; font-size: .85rem; margin-top: .25rem; }
#g-upload-status.is-error { color: var(--danger); }
/* v52: gallery reorder buttons on the edit page */
.garage-photo-order { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .85rem; }
.garage-photo-pos { color: var(--text-muted); min-width: 2rem; }
.garage-drag-handle { background: var(--surface2); color: var(--text); border: 1px solid var(--border); padding: .1rem .45rem; font-weight: 400; line-height: 1.3; cursor: grab; touch-action: none; }
.garage-drag-handle:hover, .garage-drag-handle:focus-visible { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.garage-photos-grid.is-sorting { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.garage-photo-item.is-dragging { opacity: .45; outline: 2px dashed var(--accent-fill); outline-offset: 2px; }
.garage-photo-order .status-badge { margin-left: auto; }
.garage-photo-item > a, .garage-vehicle > a { display: block; cursor: zoom-in; }
.pv-garage { margin-bottom: 1.5rem; }
.pv-garage h2 { font-size: 1.05rem; margin-top: 0; margin-bottom: .6rem; }
.garage-grid-small { grid-template-columns: repeat(4, 1fr); }
.pv-garage-links { display: flex; gap: 1.2rem; font-size: .9rem; }
@media (max-width: 700px) {
  .garage-grid, .garage-grid-small { grid-template-columns: repeat(2, 1fr); }
  .garage-photos-grid { grid-template-columns: repeat(2, 1fr); }
  .garage-manage-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .garage-grid { grid-template-columns: 1fr; }
  .garage-photos-grid { grid-template-columns: repeat(2, 1fr); }
  .post-garage-line { display: none; }
}

/* v52: lightbox (forum.js). Full-screen overlay; opened by a[data-lightbox].
   width/max-width/margins set here because the overlay is a direct child of body. */
.lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; width: auto; max-width: none; margin-left: 0; margin-right: 0;
            display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); }
.lightbox[hidden], .lightbox [hidden] { display: none; }
html.lightbox-open { overflow: hidden; }
.lightbox-figure { margin: 0; max-width: calc(100vw - 7rem); text-align: center; }
.lightbox-img { display: block; max-width: 100%; max-height: calc(100vh - 6rem); margin-left: auto; margin-right: auto; border-radius: 3px; }
.lightbox-caption { color: var(--text-strong); margin-top: .6rem; font-size: .95rem; min-height: 1.2em; }
.lightbox-count { position: absolute; top: .9rem; left: 1rem; color: var(--text-muted); font-size: .9rem; }
.lightbox button { background: transparent; border: 0; color: var(--text-strong); font-weight: 400; padding: .2rem .7rem; line-height: 1; }
.lightbox button:hover { background: transparent; color: var(--accent); }
.lightbox-close { position: absolute; top: .4rem; right: .6rem; font-size: 2.2rem; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.lightbox-prev { left: .3rem; }
.lightbox-next { right: .3rem; }
@media (max-width: 600px) {
  .lightbox-figure { max-width: calc(100vw - 1rem); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: .5rem; transform: none; }
}

/* v53: hide tools on a collapsed category, the "N hidden" note, article tag box */
.cat-hide-form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; margin-top: -.2rem; margin-bottom: .6rem; padding-left: 1.6rem; }
.cat-hide-form button.link { font-size: .8rem; }
.cat-hidden-note { font-size: .85rem; margin-top: .4rem; margin-bottom: 1rem; }
#article-tags-box .article-tags { margin-top: 0; margin-bottom: 0; }

/* v56: garage member header + follow button */
.garage-member-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: .8rem 1rem; margin: .4rem 0 .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.garage-member-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.garage-member-info { flex: 1 1 12rem; }
.garage-member-info .muted { font-size: .88rem; }
.garage-follow { display: inline-flex; align-items: center; gap: .5rem; }
.garage-follow .muted { font-size: .85rem; }
.garage-follow .btn-on { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.garage-followed-list { list-style: none; padding: 0; }
.garage-followed-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.garage-followed-list button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }