/* ==========================================================================
   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: 0 0 1rem; }
.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: 1rem 0; 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); }

/* 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; }
.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: 0 0 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: 0 0 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: -.4rem 0 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; }
.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; }
.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: 0 0 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-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; }
}