too (position:relative above), so if the
ring itself rotated, the avatar photo inside would spin along with it.
--frame-bg (set inline per avatar, see partials/avatar.ejs) lets this
pseudo-element paint the SAME gradient without repeating the value. */
.avatar-frame-ring.is-animated::before {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: var(--frame-bg); animation: avatar-frame-spin 2.5s linear infinite;
}
/* The ::before above is position:absolute with z-index:auto, which paints
ABOVE a normal in-flow inline-level child in default stacking order --
without lifting the real avatar onto its own stacking position here, the
spinning gradient would cover it entirely instead of just ringing it. */
.avatar-frame-ring > .avatar { position: relative; z-index: 1; }
@keyframes avatar-frame-spin { to { transform: rotate(360deg); } }
.avatar-110 { width: 110px; height: 110px; font-size: 34px; }
/* ---- generic card -------------------------------------------------------*/
.card {
background: var(--card-solid);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
}
.card-header .title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.card-header .title .icon { color: var(--accent); font-size: 20px; }
.view-all { font-size: 12.5px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
/* ---- page header --------------------------------------------------------*/
.page-header { display: flex; align-items: flex-end; justify-content: space-between; margin: 28px 0 20px; }
.page-header h1 { margin: 0 0 4px; font-size: 26px; }
.page-header p { margin: 0; color: var(--text-dim); font-size: 14px; }
.btn {
display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px;
border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); color: #fff; }
.btn:hover { border-color: var(--accent); }
.btn:disabled, .btn.primary:disabled {
background: var(--bg-elevated); border-color: var(--border); color: var(--text-faint);
cursor: not-allowed;
}
.btn:disabled:hover, .btn.primary:disabled:hover { background: var(--bg-elevated); border-color: var(--border); }
/* ---- layout grid ---------------------------------------------------------*/
/* Only used on the home page. Each column is ONE grid cell (a flex-column
stack of its cards), so the FIRST card in each column lines up at the
same Y for free -- that's the pairing that's actually visible at a
glance (Shoutbox next to Latest posts). An earlier version gave every
card below that its own explicit grid-row so row 2 also lined up
(Forum Categories / Latest profile posts) -- technically exact, but
whichever side was shorter then had empty space forced into it to reach
the row's height, which read as an even worse "unevenness" than the
thing it fixed. Letting everything after the first card flow freely is
the better trade-off: one guaranteed alignment, zero dead gaps. */
.layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.cell-left { grid-column: 1; grid-row: 1; }
.cell-right { grid-column: 2; grid-row: 1; }
.cell-stack { display: flex; flex-direction: column; gap: 20px; }
/* ---- shoutbox ------------------------------------------------------------*/
.shout-online { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12.5px; }
.shout-online .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.shout-body {
max-height: 260px; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 14px;
scrollbar-width: thin; scrollbar-color: var(--border) transparent; /* Firefox */
}
.shout-body::-webkit-scrollbar { width: 8px; }
.shout-body::-webkit-scrollbar-track { background: transparent; }
.shout-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.shout-body::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.shout-msg { display: flex; gap: 10px; align-items: flex-start; }
.shout-msg .shout-msg-body { flex: 1; min-width: 0; }
.shout-msg .meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.shout-msg .author { font-weight: 600; font-size: 13px; }
.shout-msg .time { font-size: 11.5px; color: var(--text-faint); }
.shout-msg .text { font-size: 13.5px; color: var(--text); line-height: 1.4; }
.shout-mod-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.shout-msg:hover .shout-mod-actions { opacity: 1; }
.shout-delete, .shout-mute { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; }
.shout-delete:hover { color: #f0556c; }
.shout-mute:hover { color: var(--accent); }
.shout-form input:disabled { opacity: 0.6; cursor: not-allowed; }
#mute-dialog {
background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; color: var(--text); width: 320px; max-width: 90vw;
}
#mute-dialog::backdrop { background: rgba(0,0,0,0.5); }
#mute-dialog h3 { margin: 0 0 14px; font-size: 15px; }
#mute-form { display: flex; flex-direction: column; gap: 10px; }
#mute-form label { font-size: 12px; color: var(--text-dim); margin-bottom: -4px; }
#mute-form select, #mute-form input {
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px; color: var(--text); font-family: inherit; font-size: 13px; outline: none;
}
.mute-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* Matches the shoutbox card's total height (.shout-body's 260px + the
.shout-form row below it, ~66px) so "Latest posts" and "Community
Shoutbox" bottom out at the same y -- keeps Forum Categories and Latest
profile posts, the next row down in each column, starting flush too. */
.latest-posts-body {
max-height: 326px; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.latest-posts-body::-webkit-scrollbar { width: 8px; }
.latest-posts-body::-webkit-scrollbar-track { background: transparent; }
.latest-posts-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.latest-posts-body::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.shout-form { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.shout-form input {
flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 13.5px; outline: none;
}
.shout-form input:focus { border-color: var(--accent); }
/* ---- sticker/emoji picker (shoutbox) ---------------------------------*/
.sticker-picker-wrap { position: relative; }
.sticker-picker {
display: none; position: absolute; bottom: calc(100% + 8px); right: 0; width: 260px;
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0,0,0,0.45); padding: 10px; z-index: 30;
grid-template-columns: repeat(5, 1fr); gap: 4px;
}
.sticker-picker.open { display: grid; }
.sticker-option {
display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
border-radius: 8px; border: none; background: transparent; cursor: pointer;
}
.sticker-option:hover { background: var(--bg); }
.sticker-option img { width: 28px; height: 28px; }
.icon-btn {
width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
color: var(--text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn.send { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ---- category table -------------------------------------------------------*/
.cat-row {
/* Each row is its OWN grid (not one shared grid across the whole card),
so a flexible last column (used to be minmax(140px, auto)) resolves
to a DIFFERENT width per row depending on that row's own content --
the row with a real last post (avatar + text) needs much more space
there than a bare "No posts yet" row, which visibly shifted every
other column (Threads/Messages/name) out of alignment between rows.
A fixed width keeps every row's grid identical regardless of content. */
display: grid; grid-template-columns: auto 1fr 90px 90px 220px; gap: 16px; align-items: center;
padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
/* Without this, a row with a real last post (avatar + two text lines)
is visibly taller than a "No posts yet" row (one line) right above
or below it -- every row now reserves that same height whether or
not it actually needs it, so the list reads as one even table
instead of a jagged one where only some rows are "full size". */
min-height: 82px;
}
.cat-row:last-child { border-bottom: none; }
.cat-row .icon-wrap {
width: 42px; height: 42px; background: none; color: var(--text-dim);
display: flex; align-items: center; justify-content: center;
}
.cat-row .icon-wrap .icon { font-size: 24px; }
.cat-row .cat-name { font-weight: 600; font-size: 15px; }
/* .stat is shared with .topic-row (category.ejs's reply-count column) --
was .cat-row-scoped only, so topic-row's own "0 Replies" rendered
completely unstyled (left-aligned, no label styling) until this moved
out to a base rule both rows can use. */
.stat { text-align: center; }
.stat .n { font-weight: 600; font-size: 15px; }
.stat .label { color: var(--text-faint); font-size: 12px; margin-bottom: 2px; }
.cat-row .last-post { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.cat-row .last-post .lp-title { font-size: 13.5px; color: var(--text); font-weight: 600; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-row .last-post .lp-title a { display: block; overflow: hidden; text-overflow: ellipsis; }
.cat-row .last-post .lp-meta { font-size: 12px; color: var(--text-faint); }
/* ---- sidebar lists ---------------------------------------------------------*/
.list-item { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-soft); }
.list-item:last-child { border-bottom: none; }
.list-item .lt { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; display: block; }
.list-item .lm { font-size: 11.5px; color: var(--text-faint); }
/* :not([class*="name-"]) -- a badge-colored author link (rowNameClass()
always adds a name-admin/name-member/etc class, see view_helpers.ts)
needs to be EXCLUDED from this dim-gray rule entirely, not merely
outrun by it: .list-item .lm a (two classes + tag) beats any single
.name-* class on plain specificity regardless of source order, which is
exactly what made every role/color here (Admin, Premium, bought name
colors, Prism's rainbow -- confirmed live 2026-10-19) render pale/dim in
Latest Posts and Latest Profile Posts instead of its real color. The
plain, un-badged category link on the line below (e.g. "Announcements")
has no name-* class and still gets the dim color as intended. */
.list-item .lm a:not([class*="name-"]) { color: var(--text-dim); }
/* Profile wall / "Latest profile posts" -- unlike .lt/.lm above (title +
dim meta line, correct for category/topic previews), here the SECOND
line is the actual message body, not meta -- so it's the one that should
read as normal (white, larger) text, with the date/time dim instead. */
.wall-post-meta { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 4px; display: block; }
.wall-post-meta a { font-size: 15px; font-weight: 700; }
.wall-post-time { font-size: 12px; color: var(--text-faint); font-weight: 400; }
.wall-post-body { font-size: 14.5px; color: var(--text); line-height: 1.5; }
/* ---- stats ---------------------------------------------------------*/
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 18px 20px; }
.stats-grid .stat-n { font-size: 20px; font-weight: 700; }
.stats-grid .stat-l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
/* ---- members online --------------------------------------------------*/
/* Reuses .list-item (same row style as "Latest posts"/"Latest profile
posts" above it) instead of the old flex-wrap chip list -- consistent
with the rest of the sidebar instead of a bespoke, unfinished-looking
layout, and each row is now a real link straight to that member's profile. */
.online-row:hover { background: var(--bg); }
.online-total { padding: 10px 20px; font-size: 11.5px; color: var(--text-faint); border-top: 1px solid var(--border-soft); }
/* ---- community member directory (homepage, under Forum Categories) -----*/
.member-directory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 10px; }
.member-card {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
color: inherit; text-decoration: none;
}
.member-card:hover { background: var(--bg); }
.member-card-text { min-width: 0; }
.member-card-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card-role { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card-role .icon { color: var(--text-faint); }
@media (max-width: 900px) {
.member-directory { grid-template-columns: repeat(2, 1fr); }
}
/* ---- topics / posts ------------------------------------------------------*/
.topic-row { display: grid; grid-template-columns: 1fr 90px 160px auto; gap: 16px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.topic-row:last-child { border-bottom: none; }
.topic-row .t-title { font-weight: 600; font-size: 14px; }
.topic-row .t-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.topic-row .t-last-reply { font-size: 12px; color: var(--text-faint); line-height: 1.5; text-align: right; }
.mod-actions { display: flex; gap: 6px; }
.mod-actions form { margin: 0; }
.mod-actions .icon-btn { width: 32px; height: 32px; }
.pin { color: var(--accent); font-size: 16px; margin-right: 4px; }
.post {
display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px; border-bottom: 1px solid var(--border-soft);
}
.post:last-child { border-bottom: none; }
.post-author { display: flex; flex-direction: column; align-items: center; text-align: center; }
.post-author .name { font-weight: 600; font-size: 13.5px; margin-top: 8px; }
.post-author-badges { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.post-body { font-size: 14px; line-height: 1.6; }
.post-body p { margin: 0 0 10px; }
.post-body p:last-child { margin-bottom: 0; }
.post-body code { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 0.9em; font-family: "Consolas", "Monaco", monospace; }
.post-body pre { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 10px 0; white-space: pre-wrap; }
.post-body pre code { background: none; border: none; padding: 0; white-space: pre-wrap; }
.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }
.post-body u { text-decoration: underline; }
.post-body s { text-decoration: line-through; }
.post-body h1, .post-body h2, .post-body h3 { margin: 14px 0 8px; line-height: 1.3; }
.post-body h1 { font-size: 1.5em; }
.post-body h2 { font-size: 1.3em; }
.post-body h3 { font-size: 1.1em; }
.post-body ul, .post-body ol { margin: 8px 0; padding-left: 24px; }
.post-body li { margin: 2px 0; }
.post-body blockquote {
margin: 10px 0; padding: 4px 14px; border-left: 3px solid var(--accent);
color: var(--text-dim); font-style: italic;
}
.post-body a { color: var(--accent); word-break: break-word; }
.post-body a:hover { text-decoration: underline; }
.post-body img { max-width: 100%; border-radius: 8px; margin: 6px 0; }
/* Quill's alignment format is class-based (ql-align-*), not inline style --
kept as-is through sanitize-html (src/sanitize.ts allows "class" on ). */
.post-body .ql-align-center { text-align: center; }
.post-body .ql-align-right { text-align: right; }
.post-body .ql-align-justify { text-align: justify; }
.post-time { font-size: 11.5px; color: var(--text-faint); }
.post-time-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.post-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.post-attachment {
display: inline-flex; align-items: center; gap: 6px; width: fit-content;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
padding: 6px 12px; font-size: 12.5px; color: var(--text); text-decoration: none;
}
.post-attachment:hover { border-color: var(--accent); }
.post-attachment .icon { font-size: 15px; }
.post-attachment-size { color: var(--text-faint); }
.post-attachment-image { display: block; width: fit-content; margin-top: 8px; }
.post-attachment-image img { max-width: 320px; max-height: 320px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.ticket-attach-btn { cursor: pointer; font-size: 12.5px; padding: 6px 12px; }
.ticket-attach-filename { font-size: 12px; color: var(--text-faint); }
.reply-form-footer { display: flex; align-items: center; gap: 10px; }
/* ---- skin editor (visual skin picker, /skins/editor) --------------------*/
.skin-editor-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.skin-editor-spacer { flex: 1; }
.skin-side-toggle { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.skin-side-btn { background: var(--bg); border: none; color: var(--text-dim); padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.skin-side-btn.active { background: var(--accent); color: #fff; }
.skin-sync-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
#skin-config-name {
box-sizing: border-box; appearance: none; margin: 0; width: 220px; height: 40px; line-height: 38px;
background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px;
color: var(--text); font-family: inherit; font-size: 13.5px; outline: none;
}
#skin-editor-error, #skin-editor-success { margin: 16px 20px 0; }
#skin-breadcrumb { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
#skin-breadcrumb-title { font-weight: 600; font-size: 14.5px; }
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 20px; }
.skin-card {
position: relative; cursor: pointer; border-radius: 10px; background: var(--bg);
border: 1px solid var(--border); overflow: hidden; transition: border-color 0.12s;
}
.skin-card:hover { border-color: var(--accent); }
.skin-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.skin-card-bar { position: absolute; top: 0; left: 0; bottom: 38px; width: 3px; }
.skin-card-img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: #0000; display: block; padding: 6px 6px 0; box-sizing: border-box; }
.skin-card-label { padding: 6px 10px 9px; }
.skin-card-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-card-sub { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.skin-card-clear {
position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
opacity: 0; transition: opacity 0.12s;
}
.skin-card-clear .icon { font-size: 14px; }
.skin-card:hover .skin-card-clear { opacity: 1; }
.reply-closed { display: flex; align-items: center; gap: 8px; color: var(--text-faint); font-size: 13.5px; justify-content: center; }
.reply-closed .icon { font-size: 16px; }
.post-content { display: flex; flex-direction: column; }
.post-reactions { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; padding-top: 10px; }
.reaction-btn {
display: inline-flex; align-items: center; gap: 4px; background: var(--bg);
border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
font-size: 13px; cursor: pointer; color: var(--text); line-height: 1.4;
}
.reaction-btn:hover { border-color: var(--accent); }
.reaction-btn.active { border-color: var(--accent); background: rgba(var(--accent-rgb, 124, 58, 237), 0.15); }
.reaction-btn:disabled { opacity: 0.45; cursor: default; }
.reaction-count { font-size: 11.5px; color: var(--text-dim); }
.attachment-input {
display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.attachment-input .icon { font-size: 16px; }
.attachment-input input[type=file] { font-size: 12px; color: var(--text-dim); }
.attachment-input input[type=file]::file-selector-button {
background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
color: var(--text-dim); font-family: inherit; font-size: 12px; padding: 5px 10px;
margin-right: 8px; cursor: pointer;
}
.attachment-input input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--text); }
/* Older WebKit/Chromium alias -- ::file-selector-button is the standard
name, but some engine versions still only recognize this prefixed one. */
.attachment-input input[type=file]::-webkit-file-upload-button {
background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
color: var(--text-dim); font-family: inherit; font-size: 12px; padding: 5px 10px;
margin-right: 8px; cursor: pointer;
}
.attachment-input input[type=file]::-webkit-file-upload-button:hover { border-color: var(--accent); color: var(--text); }
.reply-form, .form-card { padding: 20px; }
.reply-form textarea, .form-card textarea, .form-card input[type=text] {
width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 13.5px; outline: none; resize: vertical;
}
.form-card input[type=text] { margin-bottom: 12px; }
.reply-form textarea:focus, .form-card textarea:focus, .form-card input:focus { border-color: var(--accent); }
/* Quill (public/editor.js) -- the "snow" theme ships light-mode colors by
default, overridden here to match the rest of the site's dark palette
instead of carrying a second, forum-specific theme CSS file.
IMPORTANT: Quill does NOT nest the toolbar inside the element you pass to
`new Quill(container, ...)` -- that element itself just gets turned into
`.ql-container.ql-snow` in place, and the toolbar is built as a SEPARATE
element next to it. Every rule below that scoped itself as
".rich-editor .ql-toolbar..." (a descendant combinator) silently matched
nothing at all -- confirmed live 2026-10-14 via getComputedStyle() showing
Quill's own default #ccc border completely unaffected by those rules
despite !important. Fixed by dropping the wrong ".rich-editor " ancestor
assumption everywhere below and targeting Quill's own classes directly. */
/* .rich-editor (the element passed to `new Quill(...)`) BECOMES
.ql-container.ql-snow in place once Quill runs -- it never ends up
wrapping the toolbar (that's a separate sibling, inserted right before
it, see the big comment above). So "one dark frame around the whole
editor" is actually two adjacently-bordered pieces with matching side
borders and only their OUTER corners rounded, not a border on a single
wrapping element. */
.rich-editor { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.rich-editor.ql-container {
border: 1px solid var(--border) !important; border-top: none !important; border-radius: 0 0 10px 10px;
}
.ql-toolbar.ql-snow {
background: var(--card-solid) !important; border: 1px solid var(--border) !important; border-bottom: 1px solid var(--border-soft) !important;
border-radius: 10px 10px 0 0; padding: 8px 10px;
}
.ql-container.ql-snow { font-family: inherit; font-size: 13.5px; }
.ql-editor {
color: var(--text); min-height: 140px; padding: 12px 14px; outline: none;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.ql-editor::-webkit-scrollbar { width: 8px; }
.ql-editor::-webkit-scrollbar-track { background: transparent; }
.ql-editor::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.ql-editor::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.ql-editor.ql-blank::before { color: var(--text-faint) !important; font-style: normal !important; }
.ql-snow .ql-stroke { stroke: var(--text-dim); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--text-dim); }
.ql-snow .ql-picker { color: var(--text-dim); }
.ql-snow .ql-picker-options { background: var(--card-solid) !important; border: 1px solid var(--border) !important; }
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
.ql-toolbar.ql-snow button:hover .ql-fill,
.ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent); }
/* Faint box around each toolbar control (buttons + pickers) -- user asked
for some visible separation between them, they had none before. */
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
border: 1px solid var(--border) !important; border-radius: 6px; margin: 1px;
}
.ql-toolbar.ql-snow button.ql-active,
.ql-toolbar.ql-snow .ql-expanded .ql-picker-label { border-color: var(--accent) !important; }
.ql-editor pre.ql-syntax { background: var(--bg-elevated); border-radius: 8px; }
.ql-editor a { color: var(--accent); }
/* Custom 5-step size picker (public/editor.js) -- Quill's own snow.css base
rule (".ql-snow .ql-picker.ql-size ...::before { content:'Normal' }")
loads after this file and would otherwise win -- !important is the
reliable way to override a third-party stylesheet this project doesn't
control, confirmed live 2026-10-14 (plain specificity bumps weren't
enough once the exact competing selector was found). */
.ql-snow .ql-picker.ql-size { width: 96px; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "Size: 3" !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before { content: "Size: 1" !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12.5px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12.5px"]::before { content: "Size: 2" !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="17px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="17px"]::before { content: "Size: 4" !important; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="21px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="21px"]::before { content: "Size: 5" !important; }
.reply-form { display: flex; flex-direction: column; gap: 12px; }
.auth-wrap { max-width: 400px; margin: 80px auto; }
.auth-wrap h1 { text-align: center; font-size: 22px; margin-bottom: 6px; }
.auth-wrap .sub { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; }
.field input:focus { border-color: var(--accent); }
/* Hides the native up/down spin buttons AND Edge's own little clipboard/
"paste a number" glyph it docks inside every --
neither is part of our UI, Edge just draws them unprompted (2026-10-21,
screenshot: a square icon sitting inside the Upgrade bet/target fields).
Chromium/Safari use the ::-webkit-* spin-button pseudo-elements; Firefox
needs the plain `appearance: textfield` instead, there's no pseudo-
element to target there. */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; resize: vertical; }
.field textarea:focus { border-color: var(--accent); }
.field select { width: 100%; height: 42px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; cursor: pointer; }
.field select:focus { border-color: var(--accent); }
.auth-error { background: #f0556c1a; border: 1px solid #f0556c40; color: #f0859a; font-size: 13px; padding: 10px 14px; border-radius: 9px; margin-bottom: 16px; }
.redeem-success { background: #4ade801a; border: 1px solid #4ade8040; color: var(--green); font-size: 13px; padding: 10px 14px; border-radius: 9px; margin-bottom: 16px; }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-dim); }
.auth-switch a { color: var(--accent); font-weight: 500; }
.profile-header { display: flex; gap: 20px; align-items: center; padding: 24px; }
.profile-header .info h2 { margin: 0 0 6px; font-size: 20px; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---- profile banner + overlapping avatar -------------------------------*/
.profile-banner {
position: relative; height: 220px; background-color: var(--bg-elevated); background-size: cover; background-position: center;
display: flex; align-items: flex-start; justify-content: flex-end; padding: 16px;
/* Clips the banner image's own top corners to match the card's radius --
moved here (off the outer .card, see profile.ejs) so the card's own
overflow is NOT hidden, which was clipping away the status-pill glow
(filter: drop-shadow(), see view_helpers.ts's badgeStyle()) on any
badge rendered further down the card, like the profile name's Custom
badge -- confirmed live 2026-10-17, glow was invisible until this. */
border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
/* Both the "Edit profile banner" label and the remove button sit in a flex
row together (see profile.ejs) -- a