/* lamky.net - responsive redesign of the fisubgrey template (2026)
   One stylesheet for every width. Loaded by overall_header.tpl and simple_header.tpl only;
   admin/ and modcp/ keep using fisubgrey.css. ASCII only (non-ASCII via CSS escapes). */

:root {
	--bg: #e9eaed;
	--surface: #ffffff;
	--surface-2: #f6f7f8;
	--surface-3: #eef0f2;
	--line: #dcdfe3;
	--line-2: #e8eaed;
	--text: #24272c;
	--muted: #686d75;
	--faint: #8a8f97;
	--head: #33363b;
	--head-2: #3f4349;
	--head-text: #f2f3f5;
	--accent: #bc221b;
	--accent-2: #9e1b15;
	--accent-soft: #fbeceb;
	--link: #1d2126;
	--postlink: #b0302a;
	--focus: #2f6fdf;
	--icon: #5f6670;
	--danger: #c0392b;
	--ok: #2e9b47;
	--radius: 8px;
	--radius-s: 6px;
	--shadow: 0 1px 2px rgba(20, 22, 26, .06);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--wrap: 1320px;
	--gutter: 20px;
	--accent-fg: #bc221b;
	--text-2: #43474d;
	--faint-2: #a7abb1;
	--field-bg: #ffffff;
	--field-line: #c4c8ce;
	--field-line-h: #aeb3ba;
	--field-focus: #8b9097;
	--focus-ring: rgba(47, 111, 223, .3);
	--row-hover: #fafafb;
	--row3: #f1f2f4;
	--head-sub: #c9ccd1;
	--hd-bg: linear-gradient(#d1d2d6 0%, #dedfe3 45%, #edeef0 100%);
	--hd-flat: #e4e5e8;
	--hd-line: #c4c6cb;
	--hd-text: #2b2e33;
	--hd-chip: rgba(255, 255, 255, .55);
	--hd-chip-h: rgba(255, 255, 255, .7);
	--hd-chip-line: rgba(0, 0, 0, .08);
	--acct-bg: #f6f6f7;
	--ft-bg: #f3f4f5;
	--legal: #8b3a35;
	--thanks-bg: #f3f8f2;
	--bq-line: #b9bdc3;
	--bq-nested: #eceef1;
	--code-text: #1f5f2a;
	--code-line: #6d8f6a;
	--err-line: #efc2bf;
	--err-text: #7f1814;
	--c-admin: #c46f12;
	--c-mod: #1d7a2e;
	--pop-shadow: rgba(20, 22, 26, .18);
	--tip-bg: #1f2227;
	--st-ok: #1e7b34;
	--st-warn: #a65300;
	--st-bad: #bc221b;
	--tip-fg: #ffffff;
	color-scheme: light;
}
/* dark theme: only when the user picked it with the toggle (localStorage lamky-theme = dark); <html> is rendered
   with data-theme="light" and the inline script in <head> switches it to "dark" before first paint. The OS
   preference (prefers-color-scheme) is deliberately ignored: light is the default for everyone. */
:root[data-theme="dark"] {
	--bg: #111214;
	--surface: #1a1b1e;
	--surface-2: #1f2124;
	--surface-3: #26282c;
	--line: #34373c;
	--line-2: #2a2c30;
	--text: #e4e6e9;
	--text-2: #c9ccd1;
	--muted: #a2a7af;
	--faint: #858a92;
	--faint-2: #6a6f77;
	--head: #26282d;
	--head-2: #303238;
	--head-text: #eef0f2;
	--head-sub: #a2a7af;
	--accent: #c62a22;
	--accent-2: #a91f18;
	--accent-fg: #ff7a70;
	--accent-soft: #3a1f1e;
	--link: #e4e6e9;
	--postlink: #ff8b82;
	--focus: #7aa7ff;
	--focus-ring: rgba(122, 167, 255, .35);
	--icon: #a2a7af;
	--danger: #ff6b61;
	--ok: #4cc46a;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4);
	--field-bg: #141518;
	--field-line: #3e4147;
	--field-line-h: #555960;
	--field-focus: #6e737b;
	--row-hover: #212327;
	--row3: #232529;
	--hd-bg: linear-gradient(#1c1d20 0%, #222428 100%);
	--hd-flat: #1f2124;
	--hd-line: #2e3035;
	--hd-text: #e4e6e9;
	--hd-chip: rgba(255, 255, 255, .06);
	--hd-chip-h: rgba(255, 255, 255, .12);
	--hd-chip-line: rgba(255, 255, 255, .1);
	--acct-bg: #17181b;
	--ft-bg: #17181b;
	--legal: #e2a19b;
	--thanks-bg: #1c2a1f;
	--bq-line: #4a4e55;
	--bq-nested: #26282c;
	--code-text: #8fd19a;
	--code-line: #4f7a55;
	--err-line: #6b2a26;
	--err-text: #ffb4ad;
	--c-admin: #f0a24a;
	--c-mod: #5cc472;
	--pop-shadow: rgba(0, 0, 0, .55);
	--tip-bg: #f1f2f4;
	--st-ok: #5fd27a;
	--st-warn: #ffb454;
	--st-bad: #ff7a70;
	--tip-fg: #16171a;
	color-scheme: dark;
}


/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; padding: 0;
	background: var(--bg); color: var(--text);
	font: 14px/1.5 var(--font);
	overflow-wrap: break-word;
}
font, th, td, p { font-family: var(--font); }
td, th, p { font-size: 14px; }
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
table img { max-width: none; }
.postbody img, .p-text img, .quote img { max-width: 100%; }
a:link, a:visited, a:active { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-fg); text-decoration: none; }
a.postlink, a.postlink:visited, a.postbody { color: var(--postlink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
a.postlink:hover { color: var(--accent-2); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--line); height: 0; margin: 10px 0; }
form { display: inline; margin: 0; }
form.box, form.frm { display: block; }
form.jumpbox { display: flex; }
h1, h2, h3 { line-height: 1.25; }
strong, b { font-weight: 700; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--surface); color: var(--text); padding: 10px 14px; border-radius: var(--radius-s); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* legacy text classes */
.gensmall { font-size: 12px; }
.genmed, td.genmed { font-size: 13px; }
.gen { font-size: 14px; }
.explaintitle { font-size: 13px; font-weight: 700; color: var(--muted); }
.name { font-size: 14px; font-weight: 700; }
.postdetails { font-size: 12px; color: var(--muted); }
.copyright { color: var(--muted); }
.paginko { color: var(--accent-fg); }
.maintitle, h1 {
	font: 700 24px/1.25 var(--font); color: var(--text); margin: 0;
	letter-spacing: -.01em;
}
.maintitle a, h1 a { color: inherit; }
.subtitle, h2 { font-size: 18px; font-weight: 700; margin: 0; }
.nav { font-size: 13px; font-weight: 600; }
.cattitle { font-weight: 700; }
.topictitle { font-size: 14px; font-weight: 600; }
a.topictitle:visited { color: var(--text-2); }
.postbody { font-size: 15px; line-height: 1.6; }
.style7 { font-size: 12px; }
.style13 { color: var(--accent-fg); font-weight: 700; text-align: center; }
.va a img, .va input { vertical-align: middle; }
.admin, .mod { font-size: inherit; font-weight: 700; }
.admin, a.admin, a.admin:visited { color: var(--c-admin); }
.mod, a.mod, a.mod:visited { color: var(--c-mod); }
.imgtopic, .imgicon { margin-left: 0; }
.imgspace { margin: 0 4px 0 0; }
.imgfolder { margin: 0; }
#reklam { text-align: center; font-size: 12px; font-weight: 700; }
#reklam a { color: var(--accent-fg); }
#reklam2 { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ---------- form controls ---------- */
input, select, textarea, button { font-family: var(--font); font-size: 14px; color: var(--text); }
input.post, textarea.post, select, input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="number"], textarea {
	background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius-s);
	padding: 7px 10px; min-height: 36px; line-height: 1.4;
	max-width: 100%;
}
select { padding: 6px 8px; }
textarea, textarea.post { min-height: 80px; resize: vertical; }
input.post:focus, textarea.post:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
	border-color: var(--field-focus); outline: 2px solid var(--focus-ring); outline-offset: 0;
}
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--accent-fg); }
input[type="image"] { vertical-align: middle; }
.helpline, input.helpline { background: var(--surface-2); border: 1px dashed var(--line); color: var(--muted); font-size: 12px; min-height: 30px; }

/* buttons */
.btn, input.button, input.liteoption, input.mainoption, input.catbutton, button.button, .fakebut a.but, input[type="submit"], input[type="button"], input[type="reset"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 36px; padding: 6px 14px; margin: 2px 0;
	border: 1px solid var(--field-line); border-radius: var(--radius-s);
	background: var(--field-bg); color: var(--text);
	font: 600 13px/1.2 var(--font); text-decoration: none; cursor: pointer;
	white-space: nowrap; vertical-align: middle;
	transition: background-color .15s, border-color .15s, color .15s;
	-webkit-appearance: none; appearance: none;
}
.btn:hover, input.button:hover, input.liteoption:hover, input.catbutton:hover, button.button:hover, input[type="submit"]:hover, input[type="button"]:hover {
	background: var(--surface-3); border-color: var(--field-line-h); color: var(--text);
}
.btn-primary, .btn-primary:link, .btn-primary:visited, input.mainoption, input[name="login_submit"], input[name="post"][type="submit"] {
	background: var(--accent); border-color: var(--accent-fg); color: #fff;
}
.btn-primary:hover, input.mainoption:hover, input[name="login_submit"]:hover, input[name="post"][type="submit"]:hover {
	background: var(--accent-2); border-color: var(--accent-2); color: #fff;
}
.btn-ghost, .btn-ghost:link, .btn-ghost:visited { background: transparent; border-color: var(--hd-chip-line); color: var(--text); }
.btn-ghost:hover { background: var(--hd-chip-h); }
.btn-sm, input.catbutton { min-height: 32px; padding: 4px 10px; font-size: 12px; }
.fakebut { background: none; border: 0; }
a.but, a.but:hover, a.but:visited { color: var(--text); }
/* image buttons from the language pack (post/reply/thanks) */
.imgbtn { display: inline-flex; align-items: center; min-height: 40px; }
.imgbtn img { display: block; }

/* buttons created from template text */
.abtn, .abtn:link, .abtn:visited {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 38px; padding: 7px 14px;
	border-radius: var(--radius-s); border: 1px solid var(--accent);
	background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 1.2;
	white-space: nowrap;
}
.abtn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.abtn svg { flex: none; }
.abtn-2, .abtn-2:link, .abtn-2:visited { background: var(--field-bg); color: var(--text); border-color: var(--field-line); }
.abtn-2:hover { background: var(--surface-3); color: var(--text); border-color: var(--field-line-h); }
.abtn.is-locked { background: #6b7079; border-color: #6b7079; }
.abtn-wrap a, .abtn-wrap a:link, .abtn-wrap a:visited {
	display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border-radius: var(--radius-s);
	background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 700; white-space: nowrap;
}
.abtn-wrap a:hover { background: var(--accent-2); color: #fff; }
.abtn-wrap.abtn-2 a, .abtn-wrap.abtn-2 a:link, .abtn-wrap.abtn-2 a:visited { background: var(--field-bg); color: var(--text); border-color: var(--field-line); }
.abtn-wrap.abtn-2 a:hover { background: var(--surface-3); }

/* ---------- header ---------- */
.nav-t { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: -9999px; }
.hd {
	background: var(--hd-bg);
	border-bottom: 1px solid var(--hd-line);
}
.hd-in { display: flex; align-items: center; gap: 16px; min-height: 86px; }
.hd-logo { flex: none; display: block; line-height: 0; }
.hd-logo img { display: block; height: 68px; width: auto; max-width: none; }
.hd-logo:focus-visible { outline-offset: -2px; }
.hd-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hd-search { display: flex; align-items: stretch; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: 999px; overflow: hidden; height: 38px; }
.hd-search input[type="search"] { border: 0; border-radius: 0; background: transparent; min-height: 0; height: 36px; width: 240px; padding: 0 6px 0 16px; outline: 0; -webkit-appearance: none; appearance: none; }
.hd-search button { display: flex; align-items: center; justify-content: center; width: 42px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.hd-search button:hover { color: var(--accent-fg); }
.hd-search:focus-within { border-color: var(--field-focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.hd-btn {
	position: relative; display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; min-width: 40px; padding: 6px 10px; border-radius: 999px;
	color: var(--hd-text); font-weight: 600; font-size: 13px; cursor: pointer; list-style: none;
	-webkit-user-select: none; user-select: none;
}
.hd-btn:link, .hd-btn:visited { color: var(--hd-text); }
.hd-btn:hover { background: var(--hd-chip-h); color: var(--hd-text); }
.hd-btn svg { flex: none; }
.hd-pm { background: var(--hd-chip); border: 1px solid var(--hd-chip-line); padding-right: 14px; }
.hd-pm-t font, .hd-pm-t strong { color: inherit !important; font-weight: 600; }
.hd-pm.on { background: var(--accent); border-color: var(--accent-fg); color: #fff; }
.hd-pm.on:link, .hd-pm.on:visited, .hd-pm.on:hover { color: #fff; }
.hd-pm[data-n]::after {
	content: attr(data-n); position: absolute; top: -3px; left: 24px;
	min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--field-bg); color: #bc221b; font: 700 11px/18px var(--font); text-align: center;
	box-shadow: 0 0 0 2px var(--accent);
}
.hd-search-link { display: none; }
.hd-user { position: relative; }
.hd-user > summary { background: var(--hd-chip); border: 1px solid var(--hd-chip-line); }
.hd-user > summary::-webkit-details-marker { display: none; }
.hd-user > summary::marker { content: ""; }
.hd-user[open] > summary { background: var(--field-bg); }
.hd-user .caret { transition: transform .15s; }
.hd-user[open] .caret { transform: rotate(180deg); }
/* account button: avatar + nick (HD_AVATAR from page_header.php); the letter sits under the image and shows when there is none */
.hd-user > summary { padding-left: 5px; }
.hd-av { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--surface-3); color: var(--muted); font: 700 13px/1 var(--font); }
.hd-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.hd-user-t { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-menu {
	position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
	width: 290px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 10px 30px var(--pop-shadow);
}
.hd-menu a { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-s); font-weight: 500; }
.hd-menu a:hover { background: var(--surface-3); color: var(--text); }
.hd-menu-note { margin: 4px 6px; padding: 8px 10px; border-radius: var(--radius-s); background: var(--surface-2); font-size: 12px; color: var(--muted); }
.hd-menu-note a { display: inline; min-height: 0; padding: 0; color: var(--accent-fg); font-weight: 700; }
.hd-menu-note a:hover { background: none; text-decoration: underline; }
a.hd-menu-out { border-top: 1px solid var(--line-2); border-radius: 0 0 var(--radius-s) var(--radius-s); margin-top: 4px; color: var(--accent-fg); }
.hd-menu-st { --st: var(--st-ok); display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--st); font-variant-numeric: tabular-nums; }
.hd-menu-st.is-warn { --st: var(--st-warn); }
.hd-menu-st.is-expired { --st: var(--st-bad); }
.hd-menu-st img[src*="/ico/"] { width: 18px; height: 18px; flex: none; color: inherit !important; }
.hd-burger { display: none; }
.hd-burger .i-close { display: none; }

.mnav { background: var(--head); border-bottom: 3px solid var(--accent); }
.nav-in { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; }
.mnav .nav-main { flex: 1; justify-content: center; }
.mnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.mnav li { display: flex; }
.mnav a, .mnav a:link, .mnav a:visited {
	display: flex; align-items: center; gap: 6px; padding: 10px 12px; min-height: 42px;
	color: #e6e8eb; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.mnav a:hover { color: #fff; background: var(--head-2); }
.mnav a strong { font-weight: 700; color: #fff; }
.mnav .nav-m, .nav-user { display: none !important; }

.acct { background: var(--acct-bg); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.acct .wrap { padding-top: 6px; padding-bottom: 6px; text-align: right; }
.acct a { color: var(--accent-fg); font-weight: 700; }
.modbar { padding-top: 8px; font-size: 13px; text-align: right; }

/* ---------- main / footer ---------- */
.main { padding-top: 18px; padding-bottom: 28px; }
.ft { border-top: 1px solid var(--line); background: var(--ft-bg); color: var(--muted); font-size: 12px; }
.ft .wrap { padding-top: 18px; padding-bottom: 26px; text-align: center; }
.ft p { font-size: 12px; margin: 0 0 10px; }
.ft-top { text-align: right; }
.ft-top a { display: inline-flex; min-height: 36px; align-items: center; padding: 0 6px; }
.ft-mod { margin-bottom: 12px; font-size: 13px; }
.ft-mod:empty { display: none; }
.ft-legal { max-width: 900px; margin: 0 auto 14px; color: var(--legal); font-size: 12px; line-height: 1.55; }
.ft-legal strong { color: var(--accent-fg); }
.ft-meta { color: var(--faint); }
.ft-design { margin: 0 0 8px; }
.ft p.ft-design a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; font-size: 13px; font-weight: 500; }

/* ---------- page heading, breadcrumbs, action bars ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 20px; margin: 2px 0 12px; }
.page-head h1 { font-size: 24px; }
.page-head .ph-side { font-size: 12px; color: var(--muted); text-align: right; }
.page-head .ph-side a { color: var(--muted); }
.page-head .ph-side a:hover { color: var(--accent-fg); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.crumbs a { color: var(--text); display: inline-flex; align-items: center; min-height: 28px; }
.crumbs a:hover { color: var(--accent-fg); }
.crumbs .sep { margin: 0 8px; color: var(--faint-2); font-weight: 400; }
.crumbs a:first-child::before {
	content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px;
	background: currentColor;
	-webkit-mask: url("images/ico/house.svg") center / contain no-repeat;
	mask: url("images/ico/house.svg") center / contain no-repeat;
}
.actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.actionbar .ab-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actionbar .ab-info { font-size: 13px; color: var(--muted); }
.actionbar .pagination { margin-left: auto; }
.actionbar.bottom { margin: 12px 0 14px; }
/* topic: bookmark + previous / next topic on the right of the action bar (viewtopic_body.tpl) */
.actionbar .ab-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.actionbar .ab-nav ~ .pagination { flex-basis: 100%; margin-left: 0; text-align: right; }
.actionbar .pagination:empty { display: none; }
.ab-watch { font-size: 13px; font-weight: 600; margin-right: 4px; }
.ab-watch:empty { display: none; }
.ab-watch a { color: var(--muted); }
.ab-watch a:hover { color: var(--accent-fg); }
.tbtn, .tbtn:link, .tbtn:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; min-height: 38px; padding: 0 12px;
	border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--field-bg);
	color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.tbtn:hover { border-color: var(--field-line-h); background: var(--surface-3); color: var(--text); }
.tbtn img[src*="/ico/"] { width: 18px; height: 18px; color: inherit !important; }
.tbtn .tb-ar { font-size: 18px; line-height: 1; margin-top: -2px; }
/* guests: [code] blocks with links are replaced by this box (viewtopic.php) */
.lockbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0; padding: 14px 16px; border: 1px dashed var(--field-line-h); border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 14px; line-height: 1.45; }
.lockbox > img[src*="/ico/"] { width: 22px; height: 22px; flex: none; color: inherit !important; }
.lockbox .lb-t { flex: 1 1 260px; }
.lockbox .lb-t strong { color: var(--text); }
.lockbox .lb-b { display: flex; flex-wrap: wrap; gap: 8px; }
.p-text .lockbox a.btn, .p-text .lockbox a.btn:hover { text-decoration: none; }
@media (max-width: 760px) {
	.tbtn { padding: 0 10px; }
	.tbtn .tb-t, .ab-watch { display: none; }
	.actionbar .ab-nav ~ .pagination { text-align: left; }
}

/* pagination (spans come from generate_pagination) */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.pagination:empty { display: none; }
.pagination .pg-sep { display: none; }
.pagination .pg-dots { display: inline; color: var(--faint); padding: 0 2px; }
.pagination .pg-label { color: var(--muted); font-weight: 500; margin-right: 4px; }
.pagination a, .pagination .paginko {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 32px; height: 32px; padding: 0 9px; border-radius: var(--radius-s);
	border: 1px solid var(--line); background: var(--field-bg); font-weight: 600; color: var(--text);
}
.pagination a:hover { border-color: var(--accent-fg); color: var(--accent-fg); }
.pagination .paginko { background: var(--accent); border-color: var(--accent-fg); color: #fff; }
.pagination .paginko b { font-weight: 700; }
.pagination select { min-height: 32px; height: 32px; padding: 2px 6px; font-size: 13px; }

/* ---------- boxes ---------- */
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 16px; overflow: hidden; }
.box-head, .list-head {
	display: flex; align-items: center; gap: 10px;
	background: var(--head); color: var(--head-text);
	padding: 9px 16px; min-height: 40px;
}
.box-head h2, .list-head h2, .box-head h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--head-text); }
.box-head a, .list-head a, .box-head a:link, .list-head a:link, .box-head a:visited, .list-head a:visited { color: var(--head-text); }
.box-head a:hover, .list-head a:hover { color: #fff; text-decoration: underline; }
.box-head font, .box-head span[style] { color: #fff !important; }
.box-head .bh-side { margin-left: auto; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--head-sub); }
.box-body { padding: 14px 16px; }
.box-foot { padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; font-size: 13px; }
.box-foot.right { justify-content: flex-end; }
.box-sub { padding: 8px 16px; background: var(--surface-3); border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 600; }

/* ---------- list rows: forums (index), topics (viewforum, search) ---------- */
.list-head .lh-title { flex: 1 1 auto; min-width: 0; }
.list-head .lh-col { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--head-sub); text-align: center; }
.list-head .c-num { width: 92px; }
.list-head .c-auth { width: 130px; }
.list-head .c-last { width: 230px; text-align: left; padding-left: 14px; }
.rows { list-style: none; margin: 0; padding: 0; }
.lrow { display: flex; align-items: center; gap: 0 12px; padding: 10px 16px; border-top: 1px solid var(--line-2); min-height: 62px; }
.rows > .lrow:first-child { border-top: 0; }
.lrow:hover { background: var(--row-hover); }
.lr-icon { flex: none; width: 36px; display: flex; justify-content: center; }
.lr-icon img { width: 36px; height: 36px; }
.lr-main { flex: 1 1 auto; min-width: 0; }
.lr-title, .lr-title:link, .lr-title:visited { font-size: 15px; font-weight: 700; color: var(--text); }
.lr-title:hover { color: var(--accent-fg); }
.lr-desc { font-size: 13px; color: var(--muted); margin-top: 1px; }
.lr-mods { color: var(--faint); margin-top: 2px; }
.lr-mods:empty { display: none; }
.lr-num { flex: none; width: 92px; text-align: center; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lr-auth { flex: none; width: 130px; text-align: center; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.lr-last { flex: none; width: 230px; font-size: 12px; color: var(--muted); line-height: 1.45; padding-left: 14px; border-left: 1px solid var(--line-2); }
.lr-last a { font-weight: 600; color: var(--text); }
.lr-last a:hover { color: var(--accent-fg); }
.lr-last img { width: 16px; height: 16px; margin-left: 2px; }
.lr-lbl { display: none; }
.lr-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lr-sub a { color: var(--text-2); font-weight: 600; }
.lr-pages { font-size: 12px; color: var(--muted); }
.lr-pages a { display: inline-block; min-width: 22px; padding: 0 5px; margin: 1px 0; border: 1px solid var(--line); border-radius: 4px; text-align: center; background: var(--field-bg); font-weight: 600; }
.lr-pages a:hover { border-color: var(--accent-fg); }
.lr-pages:empty { display: none; }
.lr-prefix { font-weight: 700; color: var(--accent-fg); }
.lr-prefix:empty { display: none; }
.lrow img.imgspace, .lr-main > a > img { width: 16px; height: 16px; }
.lrow.is-empty { justify-content: center; color: var(--muted); padding: 24px 16px; }

.alpha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 8px 16px; background: var(--surface-3); border-bottom: 1px solid var(--line-2); font-size: 12px; color: var(--muted); }
.alpha a { font-weight: 700; padding: 2px 3px; }

/* board info bar on index */
.board-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.board-bar-time { color: var(--muted); }
.quick-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.quick-links a, .quick-links a:link, .quick-links a:visited {
	display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px;
	background: var(--field-bg); border: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--text);
}
.quick-links a:hover { border-color: var(--accent-fg); color: var(--accent-fg); }
.below-list { margin: -6px 0 16px; text-align: left; }

/* guest login strip on index */
.login-strip { display: block; }
.login-strip-in { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.login-strip-msg { margin: 0; flex: 1 1 320px; font-size: 14px; }
.login-strip-msg a { color: var(--accent-fg); }
.login-strip-f { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fld input { width: 170px; }
.chk { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; color: var(--muted); cursor: pointer; }
/* desktop: username + password + button on one row, "remember me" right under the fields */
@media (min-width: 761px) {
	.login-strip-f { display: grid; grid-template-columns: auto auto auto; align-items: end; gap: 4px 10px; }
	.login-strip-f .fld input { width: 150px; min-height: 34px; height: 34px; padding-top: 4px; padding-bottom: 4px; }
	.login-strip-f input[name="login_submit"] { grid-column: 3; grid-row: 1; min-height: 34px; height: 34px; }
	.login-strip-f .chk { grid-column: 1 / 3; grid-row: 2; min-height: 26px; font-size: 12px; }
}

/* stats / who is online */
.stats-in { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 13px; }
.stats-in p { margin: 0 0 6px; font-size: 13px; }
.stats-online { grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding-top: 10px; font-size: 13px; line-height: 1.7; }
.legend-groups { color: var(--muted); }
.legend-groups font, .stats-online font { font-weight: 700; }

.legend { list-style: none; margin: 16px 0 4px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend img { width: 24px; height: 24px; }

/* bottom tools (jumpbox, moderators, watch topic...) */
.tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin: 12px 0; font-size: 13px; }
.tools .t-side { text-align: right; color: var(--muted); font-size: 12px; line-height: 1.7; }
.tools .t-side a { font-weight: 600; }
.jumpbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.jumpbox select { max-width: 260px; }
.auth-list { font-size: 12px; color: var(--muted); line-height: 1.6; }
.auth-list b { color: var(--text); }
.mod-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mod-tools a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--field-bg); }
.mod-tools a:hover { border-color: var(--field-line-h); background: var(--surface-3); }
.mod-tools img { width: 20px; height: 20px; }

/* ---------- topic view: posts ---------- */
.topic-head { margin: 2px 0 12px; }
.topic-head h1 { font-size: 24px; }
.topic-head .th-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13px; }
.topic-head .th-meta a { color: var(--muted); font-weight: 500; }
.topic-head .th-meta a:hover { color: var(--accent-fg); }
.topic-head .th-meta strong a, .topic-head .th-meta b a { color: var(--text); font-weight: 600; }
.topic-head .mod-tools { margin-top: 8px; }

.posts { margin: 0 0 12px; }
.posts-del { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.post {
	display: grid; grid-template-columns: 200px minmax(0, 1fr);
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); margin: 0 0 12px; overflow: hidden;
}
.post.row2 { background: var(--surface); }
.p-author { background: var(--surface-2); border-right: 1px solid var(--line-2); padding: 14px 14px 12px; font-size: 12px; color: var(--muted); }
.p-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--text); word-break: break-word; }
.p-name a { color: inherit; }
.p-name img { width: 10px; height: 10px; }
.p-rank { margin-top: 2px; font-size: 12px; color: var(--muted); }
.p-rank img { display: block; margin: 4px 0; }
.p-avatar { margin: 10px 0 8px; }
.p-avatar img { display: block; max-width: 160px; max-height: 160px; border-radius: var(--radius-s); }
.p-avatar:empty { display: none; }
.p-facts { font-size: 12px; line-height: 1.6; }
.p-facts a { color: var(--muted); }
.p-facts a:hover { color: var(--accent-fg); }
.p-body { display: flex; flex-direction: column; min-width: 0; }
.p-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line-2); }
.p-date { font-size: 12px; color: var(--muted); }
.p-date img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.p-date a { display: inline-block; }
.p-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.p-actions a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: var(--radius-s); }
.p-actions a:hover { background: var(--surface-3); }
.p-actions img { width: 20px; height: 20px; margin: 0; }
.p-actions input[type="checkbox"] { margin: 0 6px; width: 18px; height: 18px; }
.p-text { padding: 14px 18px 16px; flex: 1 1 auto; }
.p-text, .p-text.postbody { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.p-text img { max-width: 100%; height: auto; }
.p-text iframe, .p-text embed, .p-text object, .p-text video { max-width: 100%; }
.p-sig { margin: 0 18px 12px; padding-top: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.p-sig:empty { display: none; }
.p-sig img { max-height: 200px; width: auto; }
.p-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--line-2); background: var(--surface-2); }
.p-foot:empty { display: none; }
.p-foot a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: var(--radius-s); }
.p-foot a:hover { background: var(--surface-3); }
.p-foot img { width: 20px; height: 20px; }
.p-note { grid-column: 1 / -1; padding: 8px 16px; border-top: 1px solid var(--line-2); background: var(--surface-3); font-size: 12px; color: var(--muted); }
.p-thanks { grid-column: 1 / -1; padding: 10px 16px; border-top: 1px solid var(--line-2); background: var(--thanks-bg); font-size: 13px; }
.p-thanks .gensmall { font-size: 13px; }
.post-ad { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 16px; margin: 0 0 12px; text-align: center; overflow: hidden; }
.post-ad .pa-title { font-weight: 700; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.posts-sort { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; padding: 10px 14px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; color: var(--muted); }
.posts-sort form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }

/* quotes / code (bbcode.tpl) */
.bq { margin: 10px 0; border-left: 3px solid var(--bq-line); background: var(--surface-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.bq-h { padding: 6px 12px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.quote { padding: 6px 12px 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.bq .bq { background: var(--bq-nested); }
.bq-code { border-left-color: var(--code-line); }
.code { display: block; padding: 8px 12px 10px; font: 13px/1.5 var(--mono); color: var(--code-text); background: transparent; overflow-x: auto; white-space: normal; }
table .quote, table .code { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }

/* polls */
.poll { margin: 0 0 14px; }
.poll-q { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.poll-opts { list-style: none; margin: 0; padding: 0; }
.poll-opts li { margin: 0 0 8px; }
.poll-opts label { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; }
.poll-opts label:hover { background: var(--surface-2); }
.poll-res { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr auto; gap: 8px 12px; align-items: center; font-size: 14px; }
.poll-bar { height: 12px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.poll-bar span { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.poll-bar img { display: none; }
.poll-pct { font-size: 13px; color: var(--muted); white-space: nowrap; }
.poll-total { margin-top: 12px; font-weight: 700; }

/* ---------- forms (posting, profile, search...) ---------- */
.frm { display: block; }
.frm-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px 18px; padding: 12px 16px; border-top: 1px solid var(--line-2); align-items: start; }
.frm-row:first-child { border-top: 0; }
.frm-l { font-weight: 700; font-size: 13px; color: var(--text-2); padding-top: 8px; }
.frm-l .gensmall, .frm-l small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; font-size: 12px; }
.frm-f { min-width: 0; }
.frm-f input.post, .frm-f input[type="text"], .frm-f input[type="password"], .frm-f textarea, .frm-f select.wide { width: 100%; max-width: 560px; }
.frm-f .inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.frm-f .inline input.post { width: auto; flex: 1 1 200px; }
.frm-opts { display: flex; flex-direction: column; gap: 2px; }
.frm-opts label { display: flex; align-items: center; min-height: 32px; font-size: 13px; cursor: pointer; }
.frm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-top: 1px solid var(--line-2); }
.frm-actions input[type="submit"] { min-width: 120px; min-height: 40px; }
.frm-sep { padding: 9px 16px; background: var(--surface-3); border-top: 1px solid var(--line-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }

/* posting editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; }
.bb-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.bb-bar input.button { min-height: 34px; min-width: 38px; padding: 4px 10px; font-weight: 600; margin: 0; }
.bb-bar2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.bb-bar2 select { min-height: 32px; padding: 3px 6px; font-size: 13px; }
.bb-bar2 .close-tags { margin-left: auto; }
.editor textarea { width: 100%; min-height: 280px; font-size: 15px; line-height: 1.5; }
.editor input.helpline { width: 100%; margin: 0 0 6px; }
.smilies { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; }
.smilies a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 2px; border-radius: var(--radius-s); }
.smilies a:hover { background: var(--surface-3); }
.smilies-t { font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 6px; }
.smilies-more { margin-top: 6px; font-size: 13px; font-weight: 600; }
.status-list { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 400; }
.status-list a { color: var(--muted); text-decoration: underline; }

.preview .p-text { padding-top: 12px; }
.review-frame { width: 100%; height: 340px; border: 0; display: block; }

/* message / error boxes */
.msg-box .box-body { text-align: center; padding: 26px 20px; font-size: 15px; }
.msg-box form { display: block; }
.msg-box .msg-actions { margin-top: 16px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.error-box { background: var(--accent-soft); border: 1px solid var(--err-line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; color: var(--err-text); font-weight: 600; }

/* PM */
.pm-folders { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pm-folders .pmf { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 14px 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--field-bg); font-size: 13px; font-weight: 600; }
.pm-folders .pmf img { width: 20px; height: 20px; }
.pm-folders .pmf a { color: var(--text); }
.pm-folders .pmf.cur { background: var(--head); border-color: var(--head); color: #fff; }
.pm-folders .pmf.cur img { color: inherit; }
.pm-mark { flex: none; width: 44px; display: flex; justify-content: center; }
.pm-mark input { margin: 0; width: 18px; height: 18px; }
.pm-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); font-size: 13px; }
.pm-meta dt { font-weight: 700; color: var(--muted); }
.pm-meta dd { margin: 0; }
.pm-meta .pm-subj { font-weight: 700; font-size: 15px; color: var(--text); }
.pm-meta .pm-act { display: flex; gap: 4px; margin-left: 10px; vertical-align: middle; }

/* data tables (memberlist, viewonline...) */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; height: auto; }
.tbl td { padding: 9px 10px; border-top: 1px solid var(--line-2); font-size: 13px; vertical-align: middle; }
.tbl tr:hover td { background: var(--row-hover); }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl .cat td, .tbl td.cat { background: var(--surface-3); font-weight: 700; }

/* profile */
.profile { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.profile-card { text-align: center; padding: 18px 16px; }
.profile-card .pc-name { font-size: 20px; font-weight: 700; margin: 10px 0 2px; }
.profile-card img { max-width: 200px; border-radius: var(--radius); }
.dl { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); gap: 0; margin: 0; }
.dl dt, .dl dd { padding: 9px 16px; border-top: 1px solid var(--line-2); margin: 0; font-size: 14px; }
.dl dt { font-weight: 700; color: var(--muted); font-size: 13px; }
.dl > dt:first-child, .dl > dt:first-child + dd { border-top: 0; }

/* FAQ */
.faq-index { columns: 2 320px; column-gap: 24px; padding: 14px 16px; }
.faq-index .fi-block { break-inside: avoid; margin: 0 0 14px; }
.faq-index .fi-title { font-weight: 700; margin: 0 0 4px; }
.faq-index a { display: block; padding: 3px 0; font-size: 13px; color: var(--text-2); }
.faq-index a:hover { color: var(--accent-fg); }
.faq-item { padding: 14px 16px; border-top: 1px solid var(--line-2); }
.faq-item:first-of-type { border-top: 0; }
.faq-q { font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.faq-top { display: inline-block; margin-top: 6px; font-size: 12px; }

/* ---------- legacy table compatibility (secondary pages) ---------- */
.forumline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 4px; }
.forumline > tbody > tr > td, .forumline > tr > td { border-top: 1px solid var(--line-2); }
.forumline > tbody > tr:first-child > td, .forumline > tbody > tr:first-child > th { border-top: 0; }
.bodyline { background: transparent; border: 0; }
th {
	background: var(--head); color: var(--head-text);
	font-size: 12px; font-weight: 700; letter-spacing: .03em;
	height: 38px; padding: 6px 10px; white-space: nowrap; text-align: center;
}
th a, th a:link, th a:visited { color: var(--head-text); }
td.cat, td.catHead, td.catBottom, td.catLeft, td.catSides {
	background: var(--surface-3); font-weight: 700; letter-spacing: 0; height: 36px; padding: 7px 10px; text-indent: 0;
	border-top: 1px solid var(--line);
}
td.rowpic { background: var(--surface-3); }
.row1 { background: var(--surface); }
.row2, .helpline { background: var(--surface-2); }
.row3 { background: var(--row3); }
td.spacerow, td.spaceRow { background: var(--line-2); height: 1px; padding: 0; }
.forumline td { padding: 7px 10px; }
.errorline { background: var(--accent-soft); border: 1px solid var(--err-line); border-radius: var(--radius-s); color: var(--err-text); }
.topbkg, .topnav, .topnavads { background: var(--surface-2); }
td.inlineadtitle, td.inlinead { background: var(--surface-2); border: 0; }
td.inlinead { text-align: center; }
.menu { font-size: 12px; color: var(--muted); }

/* legacy label/field form tables (profile edit, register, secondary forms) */
table.form-tbl { width: 100%; }
.form-tbl > tbody > tr > td { padding: 12px 16px; vertical-align: top; }
.form-tbl > tbody > tr > td.row1 { width: 38%; background: var(--surface); }
.form-tbl > tbody > tr > td.row2 { background: var(--surface); }
.form-tbl > tbody > tr > td.row1 > .gen { font-weight: 700; font-size: 13px; color: var(--text-2); }
.form-tbl > tbody > tr > td.row1 .gensmall { color: var(--muted); }
.form-tbl > tbody > tr > td[colspan="2"].row2, .form-tbl > tbody > tr > td[colspan="2"].row1 { background: var(--surface-2); }
.form-tbl > tbody > tr > th { text-align: left; padding: 9px 16px; height: auto; text-transform: uppercase; }
.form-tbl > tbody > tr > td.catSides { display: none; }
.form-tbl > tbody > tr > td.catBottom { background: var(--surface-2); text-align: center; padding: 12px 16px; }
.form-tbl input.post[style*="width"], .form-tbl textarea[style*="width"] { width: 100% !important; max-width: 440px; }
.form-tbl input[type="radio"] { margin-left: 2px; }
.form-tbl input[type="radio"] + .gen { margin-right: 14px; }
.form-tbl input[type="file"] { padding: 6px; }
.form-tbl .style2 { color: var(--accent-fg) !important; }

/* ---------- popups (simple_header) ---------- */
body.simple { background: var(--surface); }
body.simple .simple-in { padding: 12px; }
body.simple .forumline { width: 100%; }

/* misc helpers */
.simple-ft { text-align: center; color: var(--faint); padding: 10px; }
.review-list { background: var(--surface); }
.rv-post { padding: 10px 14px; border-top: 1px solid var(--line-2); }
.rv-post:first-child { border-top: 0; }
.rv-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-bottom: 6px; }
.rv-head img { width: 14px; height: 14px; margin-right: 4px; }
.rv-text { font-size: 14px; overflow-wrap: anywhere; }
.rv-text img { max-width: 100%; }
body.simple .review-list { border: 0; }
.editor-main { min-width: 0; }
.editor-side { min-width: 0; }
.bb-bar2 label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bb-bar2 select { max-width: 150px; }
.frm-f.editor textarea, .frm-f.editor input.helpline { max-width: none; width: 100%; }
.frm-note .frm-f { color: var(--muted); }
input.post.short { width: 70px !important; flex: none !important; }
.type-toggle { margin-top: 6px; font-size: 13px; }
.type-toggle input { margin-left: 8px; }
.posts form { display: block; }
.posts-del input[type="image"] { max-height: 36px; }
.inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center; }
.lr-pages img { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.lr-main > a:first-child img { width: 18px; height: 18px; margin-right: 4px; vertical-align: -3px; }
.lr-sub .lr-first { color: var(--faint); }

/* search results / filter bars */
.sr-topic { grid-column: 1 / -1; padding: 9px 16px; background: var(--surface-3); border-bottom: 1px solid var(--line-2); font-size: 13px; }
.sr-topic a { font-size: 15px; }
.lr-sub-auth { display: none; }
.filter-bar { justify-content: flex-start; border-top: 0; border-bottom: 1px solid var(--line-2); }
.filter-bar input.post { width: 180px; }
.filter-sep { flex: 0 0 12px; }
.frm-opts-row { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
.frm-f .frm-opts { margin-top: 6px; }
.t-icons img { width: 20px; height: 20px; }
.t-icons a { display: inline-flex; min-width: 34px; min-height: 34px; align-items: center; justify-content: center; border-radius: var(--radius-s); }
.t-icons a:hover { background: var(--surface-3); }

/* login page */
.login-banner { text-align: center; margin: 0 0 12px; }
.login-box { max-width: 640px; margin-left: auto; margin-right: auto; }
.login-box .frm-row { grid-template-columns: 160px minmax(0, 1fr); }
.admin-del { text-align: center; margin: 10px 0; }
.dl dd img { vertical-align: middle; }
.dl-contact { grid-template-columns: minmax(110px, auto) minmax(0, 1fr); }

/* PM list */
.ab-crumbs { margin: 0; }
.list-head .c-date, .lr-date { width: 160px; flex: none; }
.list-head .c-mark { width: 64px; }
.pm-mark { width: 64px; }
.pm-folders .pmf:not(:has(a)) { background: var(--head); border-color: var(--head); color: #fff; }
.pm-folders .pmf:not(:has(a)) img { color: inherit; }
.pmlist .lr-auth { width: 150px; text-align: left; }
.lr-date { color: var(--muted); }
.pmlist .lr-icon img { width: 32px; height: 32px; }
.pm-actions { gap: 6px; }


/* ---------- icons (Lucide, images/ico/*.svg) ----------
   Every icon is an <img src=".../ico/NAME.svg"> (from fisubgrey.cfg or templates). The file is pushed out of
   its box and the same SVG is used as a mask over currentColor, so icons follow the theme and hover colours.
   "?new" = accent (new / unread), "?red" = destructive / reported, "?ok" = online. */
img[src*="/ico/"] {
	display: inline-block; width: 20px; height: 20px; max-width: none; flex: none;
	object-position: -9999px 0; overflow: hidden;
	background-color: currentColor; color: var(--icon);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: contain; mask-size: contain;
	vertical-align: middle; border: 0;
}
img[src*="/ico/"][src$="?new"] { color: var(--accent-fg); }
img[src*="/ico/"][src$="?red"] { color: var(--danger); }
img[src*="/ico/status-online.svg"] { color: var(--ok); width: 10px; height: 10px; }
img[src*="/ico/status-offline.svg"] { color: var(--faint); width: 10px; height: 10px; }
a:hover > img[src*="/ico/"]:not([src$="?new"]):not([src$="?red"]), button:hover > img[src*="/ico/"] { color: var(--text); }
.abtn img[src*="/ico/"], .btn img[src*="/ico/"], .hd-btn img[src*="/ico/"], .mnav img[src*="/ico/"], .hd-search img[src*="/ico/"] { color: inherit !important; }
.abtn img[src*="/ico/"] { width: 18px; height: 18px; }
img[src*="ico/message-square-quote.svg"] { -webkit-mask-image: url("images/ico/message-square-quote.svg"); mask-image: url("images/ico/message-square-quote.svg"); }
img[src*="ico/square-pen.svg"] { -webkit-mask-image: url("images/ico/square-pen.svg"); mask-image: url("images/ico/square-pen.svg"); }
img[src*="ico/search.svg"] { -webkit-mask-image: url("images/ico/search.svg"); mask-image: url("images/ico/search.svg"); }
img[src*="ico/user-round.svg"] { -webkit-mask-image: url("images/ico/user-round.svg"); mask-image: url("images/ico/user-round.svg"); }
img[src*="ico/mail.svg"] { -webkit-mask-image: url("images/ico/mail.svg"); mask-image: url("images/ico/mail.svg"); }
img[src*="ico/at-sign.svg"] { -webkit-mask-image: url("images/ico/at-sign.svg"); mask-image: url("images/ico/at-sign.svg"); }
img[src*="ico/trash-2.svg"] { -webkit-mask-image: url("images/ico/trash-2.svg"); mask-image: url("images/ico/trash-2.svg"); }
img[src*="ico/network.svg"] { -webkit-mask-image: url("images/ico/network.svg"); mask-image: url("images/ico/network.svg"); }
img[src*="ico/globe.svg"] { -webkit-mask-image: url("images/ico/globe.svg"); mask-image: url("images/ico/globe.svg"); }
img[src*="ico/contact.svg"] { -webkit-mask-image: url("images/ico/contact.svg"); mask-image: url("images/ico/contact.svg"); }
img[src*="ico/file-text.svg"] { -webkit-mask-image: url("images/ico/file-text.svg"); mask-image: url("images/ico/file-text.svg"); }
img[src*="ico/circle-arrow-right.svg"] { -webkit-mask-image: url("images/ico/circle-arrow-right.svg"); mask-image: url("images/ico/circle-arrow-right.svg"); }
img[src*="ico/eye.svg"] { -webkit-mask-image: url("images/ico/eye.svg"); mask-image: url("images/ico/eye.svg"); }
img[src*="ico/folder.svg"] { -webkit-mask-image: url("images/ico/folder.svg"); mask-image: url("images/ico/folder.svg"); }
img[src*="ico/folder-dot.svg"] { -webkit-mask-image: url("images/ico/folder-dot.svg"); mask-image: url("images/ico/folder-dot.svg"); }
img[src*="ico/folder-lock.svg"] { -webkit-mask-image: url("images/ico/folder-lock.svg"); mask-image: url("images/ico/folder-lock.svg"); }
img[src*="ico/message-square.svg"] { -webkit-mask-image: url("images/ico/message-square.svg"); mask-image: url("images/ico/message-square.svg"); }
img[src*="ico/message-square-dot.svg"] { -webkit-mask-image: url("images/ico/message-square-dot.svg"); mask-image: url("images/ico/message-square-dot.svg"); }
img[src*="ico/flame.svg"] { -webkit-mask-image: url("images/ico/flame.svg"); mask-image: url("images/ico/flame.svg"); }
img[src*="ico/lock.svg"] { -webkit-mask-image: url("images/ico/lock.svg"); mask-image: url("images/ico/lock.svg"); }
img[src*="ico/pin.svg"] { -webkit-mask-image: url("images/ico/pin.svg"); mask-image: url("images/ico/pin.svg"); }
img[src*="ico/megaphone.svg"] { -webkit-mask-image: url("images/ico/megaphone.svg"); mask-image: url("images/ico/megaphone.svg"); }
img[src*="ico/cake.svg"] { -webkit-mask-image: url("images/ico/cake.svg"); mask-image: url("images/ico/cake.svg"); }
img[src*="ico/square-plus.svg"] { -webkit-mask-image: url("images/ico/square-plus.svg"); mask-image: url("images/ico/square-plus.svg"); }
img[src*="ico/reply.svg"] { -webkit-mask-image: url("images/ico/reply.svg"); mask-image: url("images/ico/reply.svg"); }
img[src*="ico/inbox.svg"] { -webkit-mask-image: url("images/ico/inbox.svg"); mask-image: url("images/ico/inbox.svg"); }
img[src*="ico/mail-clock.svg"] { -webkit-mask-image: url("images/ico/mail-clock.svg"); mask-image: url("images/ico/mail-clock.svg"); }
img[src*="ico/archive.svg"] { -webkit-mask-image: url("images/ico/archive.svg"); mask-image: url("images/ico/archive.svg"); }
img[src*="ico/send.svg"] { -webkit-mask-image: url("images/ico/send.svg"); mask-image: url("images/ico/send.svg"); }
img[src*="ico/mail-open.svg"] { -webkit-mask-image: url("images/ico/mail-open.svg"); mask-image: url("images/ico/mail-open.svg"); }
img[src*="ico/mail-plus.svg"] { -webkit-mask-image: url("images/ico/mail-plus.svg"); mask-image: url("images/ico/mail-plus.svg"); }
img[src*="ico/lock-open.svg"] { -webkit-mask-image: url("images/ico/lock-open.svg"); mask-image: url("images/ico/lock-open.svg"); }
img[src*="ico/split.svg"] { -webkit-mask-image: url("images/ico/split.svg"); mask-image: url("images/ico/split.svg"); }
img[src*="ico/folder-input.svg"] { -webkit-mask-image: url("images/ico/folder-input.svg"); mask-image: url("images/ico/folder-input.svg"); }
img[src*="ico/merge.svg"] { -webkit-mask-image: url("images/ico/merge.svg"); mask-image: url("images/ico/merge.svg"); }
img[src*="ico/thumbs-up.svg"] { -webkit-mask-image: url("images/ico/thumbs-up.svg"); mask-image: url("images/ico/thumbs-up.svg"); }
img[src*="ico/flag.svg"] { -webkit-mask-image: url("images/ico/flag.svg"); mask-image: url("images/ico/flag.svg"); }
img[src*="ico/arrow-up-to-line.svg"] { -webkit-mask-image: url("images/ico/arrow-up-to-line.svg"); mask-image: url("images/ico/arrow-up-to-line.svg"); }
img[src*="ico/arrow-down-to-line.svg"] { -webkit-mask-image: url("images/ico/arrow-down-to-line.svg"); mask-image: url("images/ico/arrow-down-to-line.svg"); }
img[src*="ico/scale.svg"] { -webkit-mask-image: url("images/ico/scale.svg"); mask-image: url("images/ico/scale.svg"); }
img[src*="ico/archive-x.svg"] { -webkit-mask-image: url("images/ico/archive-x.svg"); mask-image: url("images/ico/archive-x.svg"); }
img[src*="ico/user-lock.svg"] { -webkit-mask-image: url("images/ico/user-lock.svg"); mask-image: url("images/ico/user-lock.svg"); }
img[src*="ico/user-pen.svg"] { -webkit-mask-image: url("images/ico/user-pen.svg"); mask-image: url("images/ico/user-pen.svg"); }
img[src*="ico/ticket-plus.svg"] { -webkit-mask-image: url("images/ico/ticket-plus.svg"); mask-image: url("images/ico/ticket-plus.svg"); }
img[src*="ico/ticket-minus.svg"] { -webkit-mask-image: url("images/ico/ticket-minus.svg"); mask-image: url("images/ico/ticket-minus.svg"); }
img[src*="ico/paperclip.svg"] { -webkit-mask-image: url("images/ico/paperclip.svg"); mask-image: url("images/ico/paperclip.svg"); }
img[src*="ico/history.svg"] { -webkit-mask-image: url("images/ico/history.svg"); mask-image: url("images/ico/history.svg"); }
img[src*="ico/bold.svg"] { -webkit-mask-image: url("images/ico/bold.svg"); mask-image: url("images/ico/bold.svg"); }
img[src*="ico/italic.svg"] { -webkit-mask-image: url("images/ico/italic.svg"); mask-image: url("images/ico/italic.svg"); }
img[src*="ico/underline.svg"] { -webkit-mask-image: url("images/ico/underline.svg"); mask-image: url("images/ico/underline.svg"); }
img[src*="ico/text-quote.svg"] { -webkit-mask-image: url("images/ico/text-quote.svg"); mask-image: url("images/ico/text-quote.svg"); }
img[src*="ico/code.svg"] { -webkit-mask-image: url("images/ico/code.svg"); mask-image: url("images/ico/code.svg"); }
img[src*="ico/list.svg"] { -webkit-mask-image: url("images/ico/list.svg"); mask-image: url("images/ico/list.svg"); }
img[src*="ico/list-ordered.svg"] { -webkit-mask-image: url("images/ico/list-ordered.svg"); mask-image: url("images/ico/list-ordered.svg"); }
img[src*="ico/image.svg"] { -webkit-mask-image: url("images/ico/image.svg"); mask-image: url("images/ico/image.svg"); }
img[src*="ico/link.svg"] { -webkit-mask-image: url("images/ico/link.svg"); mask-image: url("images/ico/link.svg"); }
img[src*="ico/house.svg"] { -webkit-mask-image: url("images/ico/house.svg"); mask-image: url("images/ico/house.svg"); }
img[src*="ico/chevron-down.svg"] { -webkit-mask-image: url("images/ico/chevron-down.svg"); mask-image: url("images/ico/chevron-down.svg"); }
img[src*="ico/menu.svg"] { -webkit-mask-image: url("images/ico/menu.svg"); mask-image: url("images/ico/menu.svg"); }
img[src*="ico/x.svg"] { -webkit-mask-image: url("images/ico/x.svg"); mask-image: url("images/ico/x.svg"); }
img[src*="ico/sun.svg"] { -webkit-mask-image: url("images/ico/sun.svg"); mask-image: url("images/ico/sun.svg"); }
img[src*="ico/moon.svg"] { -webkit-mask-image: url("images/ico/moon.svg"); mask-image: url("images/ico/moon.svg"); }
img[src*="ico/plus.svg"] { -webkit-mask-image: url("images/ico/plus.svg"); mask-image: url("images/ico/plus.svg"); }
img[src*="ico/bookmark-plus.svg"] { -webkit-mask-image: url("images/ico/bookmark-plus.svg"); mask-image: url("images/ico/bookmark-plus.svg"); }
img[src*="ico/user-plus.svg"] { -webkit-mask-image: url("images/ico/user-plus.svg"); mask-image: url("images/ico/user-plus.svg"); }
img[src*="ico/users.svg"] { -webkit-mask-image: url("images/ico/users.svg"); mask-image: url("images/ico/users.svg"); }
img[src*="ico/status-online.svg"] { -webkit-mask-image: url("images/ico/status-online.svg"); mask-image: url("images/ico/status-online.svg"); }
img[src*="ico/calendar-check.svg"] { -webkit-mask-image: url("images/ico/calendar-check.svg"); mask-image: url("images/ico/calendar-check.svg"); }
img[src*="ico/calendar-clock.svg"] { -webkit-mask-image: url("images/ico/calendar-clock.svg"); mask-image: url("images/ico/calendar-clock.svg"); }
img[src*="ico/calendar-x.svg"] { -webkit-mask-image: url("images/ico/calendar-x.svg"); mask-image: url("images/ico/calendar-x.svg"); }
img[src*="ico/infinity.svg"] { -webkit-mask-image: url("images/ico/infinity.svg"); mask-image: url("images/ico/infinity.svg"); }
img[src*="ico/copy.svg"] { -webkit-mask-image: url("images/ico/copy.svg"); mask-image: url("images/ico/copy.svg"); }
img[src*="ico/check.svg"] { -webkit-mask-image: url("images/ico/check.svg"); mask-image: url("images/ico/check.svg"); }
img[src*="ico/smartphone.svg"] { -webkit-mask-image: url("images/ico/smartphone.svg"); mask-image: url("images/ico/smartphone.svg"); }
img[src*="ico/circle-alert.svg"] { -webkit-mask-image: url("images/ico/circle-alert.svg"); mask-image: url("images/ico/circle-alert.svg"); }
img[src*="ico/shield-check.svg"] { -webkit-mask-image: url("images/ico/shield-check.svg"); mask-image: url("images/ico/shield-check.svg"); }
img[src*="ico/clock.svg"] { -webkit-mask-image: url("images/ico/clock.svg"); mask-image: url("images/ico/clock.svg"); }
img[src*="ico/message-circle.svg"] { -webkit-mask-image: url("images/ico/message-circle.svg"); mask-image: url("images/ico/message-circle.svg"); }
img[src*="ico/status-offline.svg"] { -webkit-mask-image: url("images/ico/status-offline.svg"); mask-image: url("images/ico/status-offline.svg"); }


/* icon sizes per context (beat the generic img rules above and in the media queries) */
.lr-icon img[src*="/ico/"] { width: 26px; height: 26px; }
.pmlist .lr-icon img[src*="/ico/"] { width: 24px; height: 24px; }
.legend img[src*="/ico/"] { width: 22px; height: 22px; }
.p-date img[src*="/ico/"], .lr-last img[src*="/ico/"], .lr-main > a > img[src*="/ico/"], .lr-main > a:first-child img[src*="/ico/"] { width: 16px; height: 16px; }
.lr-pages img[src*="/ico/"], .rv-head img[src*="/ico/"] { width: 14px; height: 14px; }
.pm-folders img[src*="/ico/"] { width: 18px; height: 18px; color: inherit; }
.hd-btn img[src*="/ico/"] { width: 22px; height: 22px; }
.hd-btn img.caret { width: 16px; height: 16px; }
.hd-burger img[src*="/ico/"] { width: 24px; height: 24px; }
.hd-search button img[src*="/ico/"] { width: 18px; height: 18px; }
.mnav img[src*="/ico/"] { width: 16px; height: 16px; }
.crumbs img[src*="/ico/"] { width: 14px; height: 14px; }
.lr-icon a:hover img[src*="/ico/"]:not([src$="?new"]) { color: var(--text); }

/* moderator tools: icon + short label */
.mod-tools a.mt, .mod-tools button.mt, .mt {
	display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; margin: 0;
	padding: 4px 11px 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-s);
	background: var(--field-bg); color: var(--text); font: 600 13px/1.2 var(--font); cursor: pointer; white-space: nowrap;
}
.mod-tools a.mt:hover, .mod-tools button.mt:hover, .mt:hover { border-color: var(--field-line-h); background: var(--surface-3); color: var(--text); }
.mt img[src*="/ico/"] { width: 17px; height: 17px; }
.mod-tools form { display: inline-flex; }
.box-foot.mod-tools { gap: 6px; }

/* per-post "select for bulk delete" checkbox (moderators) */
.p-sel { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: var(--radius-s); cursor: pointer; }
.p-sel:hover { background: var(--surface-3); }
.p-sel input[type="checkbox"] { margin: 0; width: 17px; height: 17px; }
.btn-danger, button.btn-danger { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-danger:hover, button.btn-danger:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn img[src*="/ico/"], button.btn img[src*="/ico/"] { width: 16px; height: 16px; }
.posts-del .btn { margin: 0; }

/* BBCode toolbar: icon buttons; an open tag gets "*" appended to the value by the editor script */
.bb-bar button.bb { min-width: 38px; min-height: 36px; padding: 0 9px; margin: 0; }
.bb-bar button.bb img[src*="/ico/"] { width: 18px; height: 18px; color: var(--text-2); }
.bb-bar button.bb:hover img[src*="/ico/"] { color: var(--text); }
.bb-bar button.bb[value$="*"] { background: var(--accent-soft); border-color: var(--accent); }
.bb-bar button.bb[value$="*"] img[src*="/ico/"] { color: var(--accent-fg); }


/* short text actions where no glyph is unambiguous (IP address) */
.p-actions a.p-txt { font: 700 12px/1 var(--mono); letter-spacing: .02em; color: var(--icon); }
.p-actions a.p-txt:hover { color: var(--text); }
.p-sel { gap: 5px; padding: 0 6px; }
.p-mod { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--line); }
.p-mod:empty { display: none; }
.p-sel-t { font-size: 12px; font-weight: 600; color: var(--muted); }
/* colours that come inline from the old DB theme (report counter etc.) */
.ft-mod b[style], .modbar b[style] { color: var(--ok) !important; }

/* smilies: Noto emoji PNGs (64 px files) shown at text size inline and larger in the pickers;
   the kept original GIF smilies keep their own size */
img.smilie[src*="noto_"], .p-text img[src*="smiles/noto_"], .rv-text img[src*="smiles/noto_"] { width: 22px; height: 22px; vertical-align: -5px; margin: 0 1px; }
.smilies img[src*="noto_"] { width: 28px; height: 28px; }
.smilies a { min-width: 40px; min-height: 40px; }


/* account status badge (header) + its row in the mobile menu. Colour AND icon differ per state:
   infinity = unlimited, calendar-check = ok, calendar-clock = <= 14 days, calendar-x = expired. */
.hd-acct { --st: var(--st-ok); gap: 6px; padding: 6px 12px 6px 10px; border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); background: color-mix(in srgb, var(--st) 10%, transparent); font-variant-numeric: tabular-nums; font-weight: 700; }
.hd-acct.is-warn { --st: var(--st-warn); }
.hd-acct.is-expired { --st: var(--st-bad); }
.hd-acct, .hd-acct:link, .hd-acct:visited, .hd-acct:hover { color: var(--st); }
.hd-acct:hover { background: color-mix(in srgb, var(--st) 18%, transparent); }
.hd-acct img[src*="/ico/"] { width: 18px; height: 18px; color: inherit !important; }
.hd-acct.is- { display: none; }
.mnav .nav-acct a, .mnav .nav-acct a:link, .mnav .nav-acct a:visited { color: #6fdc8a; font-weight: 600; }
.mnav .nav-acct.is-warn a { color: #ffb454; }
.mnav .nav-acct.is-expired a { color: #ff8b82; }
.mnav .nav-acct img[src*="/ico/"] { width: 18px; height: 18px; color: inherit; }
@media (max-width: 960px) {
	.hd-acct { padding: 6px 8px; border-color: transparent; background: transparent; }
	.hd-acct-t { display: none; }
}


/* ---------- SMS payment card (sms_activate / sms_reactivate) ---------- */
.pay { max-width: 760px; margin: 0 auto 16px; }
.pay-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; padding: 20px 22px; border-bottom: 1px solid var(--line-2); }
.pay-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-fg); }
.pay-ico img[src*="/ico/"] { width: 24px; height: 24px; color: inherit; }
.pay-title { flex: 1 1 300px; min-width: 0; }
.pay-title h1 { font-size: 22px; margin: 0 0 4px; }
.pay-title p { margin: 0; color: var(--muted); font-size: 14px; }
.pay-title .pay-support { margin-top: 6px; font-size: 13px; }
/* account validity on the SMS page (same SMS_STATE / SMS_STATUS as the account menu) */
.pay-title .pay-status { --st: var(--st-ok); display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--st); }
.pay-title .pay-status.is-warn { --st: var(--st-warn); }
.pay-title .pay-status.is-expired { --st: var(--st-bad); }
.pay-status img[src*="/ico/"] { width: 18px; height: 18px; flex: none; color: inherit !important; }
.pay-price { flex: none; text-align: right; }
.pay-price strong { display: block; font-size: 26px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-price span { font-size: 12px; color: var(--muted); }
.pay-main { padding: 20px 22px 22px; }
.pay-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.pay-code { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.pay-code code {
	flex: 1 1 260px; min-width: 0; display: flex; align-items: center; padding: 12px 16px; border-radius: var(--radius-s);
	background: var(--surface-2); border: 1px dashed var(--field-line); color: var(--text);
	font: 700 22px/1.3 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; user-select: all;
}
.pay-copy { min-height: 52px; margin: 0; padding: 6px 16px; }
.pay-copy .pc-ok { display: none; align-items: center; gap: 6px; color: var(--ok); }
.pay-copy.copied .pc-ok { display: inline-flex; }
.pay-copy.copied .pc-t, .pay-copy.copied > img { display: none; }
.pay-copy img[src*="/ico/"] { width: 18px; height: 18px; }
.pay-num { margin: 10px 0 0; font-size: 15px; }
.pay-num strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.pay-num span { display: block; font-size: 13px; color: var(--muted); }
.pay-error { display: none; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-soft); border: 1px solid var(--err-line); color: var(--err-text); font-size: 14px; }
.pay-error img[src*="/ico/"] { width: 20px; height: 20px; color: inherit; margin-top: 1px; }
.pay.is-error .pay-error { display: flex; }
.pay.is-error .pay-code code { color: var(--muted); font-size: 15px; letter-spacing: 0; border-style: solid; }
.pay.is-error .pay-copy, .pay.is-error .pay-cta { display: none; }
.pay-steps { list-style: none; counter-reset: st; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.pay-steps li { counter-increment: st; position: relative; padding: 2px 0 2px 38px; font-size: 14px; min-height: 26px; }
.pay-steps li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--head); color: var(--head-text); font: 700 13px/26px var(--font); text-align: center; }
.pay-cta { margin-top: 18px; }
.pay-fine { padding: 14px 22px 18px; background: var(--surface-2); border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); line-height: 1.55; }
.pay-fine p { margin: 0 0 8px; font-size: 12px; }
.pay-fine ul { margin: 0 0 8px; padding-left: 18px; }
.pay-fine li { margin: 2px 0; }
.pay-fine a { color: var(--accent-fg); }
@media (max-width: 760px) {
	.pay-head, .pay-main { padding-left: 16px; padding-right: 16px; }
	.pay-fine { padding-left: 16px; padding-right: 16px; }
	.pay-price { text-align: left; width: 100%; display: flex; align-items: baseline; gap: 8px; }
	.pay-code code { font-size: 19px; }
	.pay-copy { flex: 1 1 100%; }
}

/* ---------- fast tooltips ----------
   Controls carry data-tip (+ aria-label); lamky.js moves title/alt of icon-only controls there, so the slow native
   tooltip does not show as well. With JS: one fixed-position bubble (.tip) placed inside the viewport, fading in
   50-140 ms after hover / keyboard focus, never on touch screens, never catching clicks.
   Without JS: the CSS ::after fallback below (hover-capable pointers only). */
.tipw { display: inline-flex; align-items: center; }
.tip {
	position: fixed; z-index: 10000; left: -9999px; top: 0; display: none;
	max-width: min(280px, calc(100vw - 16px)); padding: 5px 9px; border-radius: 6px;
	background: var(--tip-bg); color: var(--tip-fg);
	font: 600 12px/1.35 var(--font); text-align: center; white-space: normal; overflow-wrap: break-word;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28); pointer-events: none;
}
.tip.measure { display: block; visibility: hidden; }
.tip.on {
	display: block; opacity: 1; transform: none;
	transition: opacity .09s ease .05s, transform .09s ease .05s;
}
@starting-style {
	.tip.on { opacity: 0; transform: translateY(3px); }
	.tip.on.below { opacity: 0; transform: translateY(-3px); }
}
@media (hover: hover) and (pointer: fine) {
	html:not(.js) :where([data-tip]) { position: relative; }
	html:not(.js) [data-tip]::after {
		content: attr(data-tip); position: absolute; z-index: 1000; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
		display: none; width: max-content; max-width: 260px; padding: 5px 9px; border-radius: 6px;
		background: var(--tip-bg); color: var(--tip-fg); font: 600 12px/1.35 var(--font); text-transform: none; letter-spacing: 0;
		pointer-events: none;
	}
	html:not(.js) [data-tip]:hover::after, html:not(.js) [data-tip]:focus-visible::after { display: block; }
}

/* ---------- theme toggle ---------- */
.hd-theme { border: 0; background: transparent; font: inherit; }
.hd-theme:hover { background: var(--hd-chip-h); }
.i-sun, .t-light { display: none !important; }
html:not(.js) [data-theme-toggle], html:not(.js) .nav-theme { display: none !important; }
.nav-theme { display: none; }
.nav-theme button {
	display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 11px 18px;
	border: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: transparent; color: #e6e8eb;
	font: 500 15px/1.3 var(--font); text-align: left; cursor: pointer;
}
.nav-theme button:hover { background: var(--head-2); color: #fff; }
.nav-theme img[src*="/ico/"] { width: 18px; height: 18px; color: inherit; }

/* logo: vector logo-lamky.svg (light) / logo-lamky-dark.svg (dark), transparent, 234x82 viewBox.
   Two <img> in overall_header.tpl, shown per theme (data-theme on <html>); the hidden one is
   lazy, so it is not downloaded. Sized by height only (width auto). */
.hd-logo .logo-d { display: none; }
:root[data-theme="dark"] .hd-logo .logo-l { display: none; }
:root[data-theme="dark"] .hd-logo .logo-d { display: block; }
/* dark-only adjustments (same rules for "system dark" and "user picked dark") */
:root[data-theme="dark"] .i-moon, :root[data-theme="dark"] .t-dark { display: none !important; }
:root[data-theme="dark"] .i-sun { display: inline-block !important; }
:root[data-theme="dark"] .t-light { display: inline !important; }
:root[data-theme="dark"] .p-text font[color="black"], :root[data-theme="dark"] .p-text font[color="#000000"], :root[data-theme="dark"] .p-text font[color="#000"], :root[data-theme="dark"] .p-text span[style*="color: black"], :root[data-theme="dark"] .p-text span[style*="color:black"], :root[data-theme="dark"] .p-text font[color="darkblue"], :root[data-theme="dark"] .p-text font[color="indigo"], :root[data-theme="dark"] .p-text font[color="navy"] { color: var(--text) !important; }
:root[data-theme="dark"] .p-text font[color="darkred"], :root[data-theme="dark"] .p-text span[style*="color: darkred"] { color: #ff8b82 !important; }
:root[data-theme="dark"] .p-avatar img, :root[data-theme="dark"] .profile-card img { background: #fff; }
@media (max-width: 960px) {
	.hd-theme { display: none !important; }
	.mnav .nav-theme { display: block !important; }
}

/* dark: user-chosen post colours that would be invisible on a dark card */
:root[data-theme="dark"] .p-text span[style*="color:black"],
:root[data-theme="dark"] .p-text span[style*="color: black"],
:root[data-theme="dark"] .p-text font[color="black"],
:root[data-theme="dark"] .p-text span[style*="color:#000000"],
:root[data-theme="dark"] .p-text span[style*="color: #000000"],
:root[data-theme="dark"] .p-text font[color="#000000"],
:root[data-theme="dark"] .p-text span[style*="color:#000"],
:root[data-theme="dark"] .p-text span[style*="color: #000"],
:root[data-theme="dark"] .p-text font[color="#000"],
:root[data-theme="dark"] .p-text span[style*="color:darkblue"],
:root[data-theme="dark"] .p-text span[style*="color: darkblue"],
:root[data-theme="dark"] .p-text font[color="darkblue"],
:root[data-theme="dark"] .p-text span[style*="color:navy"],
:root[data-theme="dark"] .p-text span[style*="color: navy"],
:root[data-theme="dark"] .p-text font[color="navy"],
:root[data-theme="dark"] .p-text span[style*="color:indigo"],
:root[data-theme="dark"] .p-text span[style*="color: indigo"],
:root[data-theme="dark"] .p-text font[color="indigo"],
:root[data-theme="dark"] .p-text span[style*="color:#000080"],
:root[data-theme="dark"] .p-text span[style*="color: #000080"],
:root[data-theme="dark"] .p-text font[color="#000080"],
:root[data-theme="dark"] .p-text span[style*="color:#00008b"],
:root[data-theme="dark"] .p-text span[style*="color: #00008b"],
:root[data-theme="dark"] .p-text font[color="#00008b"] { color: var(--text) !important; }
:root[data-theme="dark"] .p-text span[style*="color:darkred"],
:root[data-theme="dark"] .p-text span[style*="color: darkred"],
:root[data-theme="dark"] .p-text font[color="darkred"],
:root[data-theme="dark"] .p-text span[style*="color:#8b0000"],
:root[data-theme="dark"] .p-text span[style*="color: #8b0000"],
:root[data-theme="dark"] .p-text font[color="#8b0000"],
:root[data-theme="dark"] .p-text span[style*="color:maroon"],
:root[data-theme="dark"] .p-text span[style*="color: maroon"],
:root[data-theme="dark"] .p-text font[color="maroon"],
:root[data-theme="dark"] .p-text span[style*="color:#800000"],
:root[data-theme="dark"] .p-text span[style*="color: #800000"],
:root[data-theme="dark"] .p-text font[color="#800000"] { color: #ff8b82 !important; }
/* dark: username / group colours (colour-groups mod, ranks, legend) come inline from the DB as style="color:..."
   or <font color>. Light mode keeps them as they are; dark mode lightens each hue to >= 4.5:1 on the dark cards. */
:root[data-theme="dark"] [style*="color:#000000;" i],
:root[data-theme="dark"] [style*="color: #000000;" i],
:root[data-theme="dark"] [style$="color:#000000" i],
:root[data-theme="dark"] [style$="color: #000000" i],
:root[data-theme="dark"] font[color="#000000" i],
:root[data-theme="dark"] [style*="color:#000;" i],
:root[data-theme="dark"] [style*="color: #000;" i],
:root[data-theme="dark"] [style$="color:#000" i],
:root[data-theme="dark"] [style$="color: #000" i],
:root[data-theme="dark"] font[color="#000" i],
:root[data-theme="dark"] [style*="color:black;" i],
:root[data-theme="dark"] [style*="color: black;" i],
:root[data-theme="dark"] [style$="color:black" i],
:root[data-theme="dark"] [style$="color: black" i],
:root[data-theme="dark"] font[color="black" i] { color: var(--text) !important; }
:root[data-theme="dark"] [style*="color:#ff0000;" i],
:root[data-theme="dark"] [style*="color: #ff0000;" i],
:root[data-theme="dark"] [style$="color:#ff0000" i],
:root[data-theme="dark"] [style$="color: #ff0000" i],
:root[data-theme="dark"] font[color="#ff0000" i],
:root[data-theme="dark"] [style*="color:red;" i],
:root[data-theme="dark"] [style*="color: red;" i],
:root[data-theme="dark"] [style$="color:red" i],
:root[data-theme="dark"] [style$="color: red" i],
:root[data-theme="dark"] font[color="red" i],
:root[data-theme="dark"] [style*="color:#f00;" i],
:root[data-theme="dark"] [style*="color: #f00;" i],
:root[data-theme="dark"] [style$="color:#f00" i],
:root[data-theme="dark"] [style$="color: #f00" i],
:root[data-theme="dark"] font[color="#f00" i] { color: #ff6b61 !important; }
:root[data-theme="dark"] [style*="color:#006600;" i],
:root[data-theme="dark"] [style*="color: #006600;" i],
:root[data-theme="dark"] [style$="color:#006600" i],
:root[data-theme="dark"] [style$="color: #006600" i],
:root[data-theme="dark"] font[color="#006600" i],
:root[data-theme="dark"] [style*="color:green;" i],
:root[data-theme="dark"] [style*="color: green;" i],
:root[data-theme="dark"] [style$="color:green" i],
:root[data-theme="dark"] [style$="color: green" i],
:root[data-theme="dark"] font[color="green" i],
:root[data-theme="dark"] [style*="color:#008000;" i],
:root[data-theme="dark"] [style*="color: #008000;" i],
:root[data-theme="dark"] [style$="color:#008000" i],
:root[data-theme="dark"] [style$="color: #008000" i],
:root[data-theme="dark"] font[color="#008000" i] { color: #5fd27a !important; }
:root[data-theme="dark"] [style*="color:#0000ff;" i],
:root[data-theme="dark"] [style*="color: #0000ff;" i],
:root[data-theme="dark"] [style$="color:#0000ff" i],
:root[data-theme="dark"] [style$="color: #0000ff" i],
:root[data-theme="dark"] font[color="#0000ff" i],
:root[data-theme="dark"] [style*="color:blue;" i],
:root[data-theme="dark"] [style*="color: blue;" i],
:root[data-theme="dark"] [style$="color:blue" i],
:root[data-theme="dark"] [style$="color: blue" i],
:root[data-theme="dark"] font[color="blue" i],
:root[data-theme="dark"] [style*="color:#00f;" i],
:root[data-theme="dark"] [style*="color: #00f;" i],
:root[data-theme="dark"] [style$="color:#00f" i],
:root[data-theme="dark"] [style$="color: #00f" i],
:root[data-theme="dark"] font[color="#00f" i] { color: #86aeff !important; }
:root[data-theme="dark"] [style*="color:#005555;" i],
:root[data-theme="dark"] [style*="color: #005555;" i],
:root[data-theme="dark"] [style$="color:#005555" i],
:root[data-theme="dark"] [style$="color: #005555" i],
:root[data-theme="dark"] font[color="#005555" i],
:root[data-theme="dark"] [style*="color:teal;" i],
:root[data-theme="dark"] [style*="color: teal;" i],
:root[data-theme="dark"] [style$="color:teal" i],
:root[data-theme="dark"] [style$="color: teal" i],
:root[data-theme="dark"] font[color="teal" i],
:root[data-theme="dark"] [style*="color:#008080;" i],
:root[data-theme="dark"] [style*="color: #008080;" i],
:root[data-theme="dark"] [style$="color:#008080" i],
:root[data-theme="dark"] [style$="color: #008080" i],
:root[data-theme="dark"] font[color="#008080" i] { color: #4fd1c5 !important; }
:root[data-theme="dark"] [style*="color:#660066;" i],
:root[data-theme="dark"] [style*="color: #660066;" i],
:root[data-theme="dark"] [style$="color:#660066" i],
:root[data-theme="dark"] [style$="color: #660066" i],
:root[data-theme="dark"] font[color="#660066" i],
:root[data-theme="dark"] [style*="color:purple;" i],
:root[data-theme="dark"] [style*="color: purple;" i],
:root[data-theme="dark"] [style$="color:purple" i],
:root[data-theme="dark"] [style$="color: purple" i],
:root[data-theme="dark"] font[color="purple" i],
:root[data-theme="dark"] [style*="color:#800080;" i],
:root[data-theme="dark"] [style*="color: #800080;" i],
:root[data-theme="dark"] [style$="color:#800080" i],
:root[data-theme="dark"] [style$="color: #800080" i],
:root[data-theme="dark"] font[color="#800080" i] { color: #df92ef !important; }
:root[data-theme="dark"] [style*="color:maroon;" i],
:root[data-theme="dark"] [style*="color: maroon;" i],
:root[data-theme="dark"] [style$="color:maroon" i],
:root[data-theme="dark"] [style$="color: maroon" i],
:root[data-theme="dark"] font[color="maroon" i],
:root[data-theme="dark"] [style*="color:#800000;" i],
:root[data-theme="dark"] [style*="color: #800000;" i],
:root[data-theme="dark"] [style$="color:#800000" i],
:root[data-theme="dark"] [style$="color: #800000" i],
:root[data-theme="dark"] font[color="#800000" i] { color: #ff8b82 !important; }
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
	.list-head .c-last, .lr-last { width: 200px; }
	.list-head .c-num, .lr-num { width: 78px; }
	.hd-search input[type="search"] { width: 180px; }
}
@media (max-width: 1080px) {
	.hd-pm-t { display: none; }
	.hd-pm { padding-right: 10px; }
	.hd-pm[data-n]::after { left: 22px; }
}
@media (max-width: 960px) {
	:root { --gutter: 14px; }
	.hd-in { min-height: 60px; gap: 8px; }
	.hd-logo img { height: 48px; }
	.hd-search { display: none; }
	.hd-search-link { display: inline-flex; }
	/* account: avatar only; the menu hangs from the header row so it never runs off a narrow screen */
	.hd-in { position: relative; }
	.hd-user { position: static; }
	.hd-user > summary { padding: 6px; background: transparent; border-color: transparent; }
	.hd-user-t, .hd-user .caret { display: none; }
	.hd-menu { right: var(--gutter); width: min(290px, calc(100% - 2 * var(--gutter))); }
	.hd-pm { background: transparent; border-color: transparent; }
	.hd-pm.on { background: transparent; border-color: transparent; color: var(--accent-fg); }
	.hd-pm.on:link, .hd-pm.on:visited, .hd-pm.on:hover { color: var(--accent-fg); }
	.hd-pm[data-n]::after { background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--hd-flat); top: 0; left: 24px; }
	.hd-burger { display: inline-flex; }
	.hd-reg { display: none; }
	.hd-login { min-height: 38px; }
	.mnav { display: none; border-bottom-width: 0; }
	.nav-t:checked ~ .mnav { display: block; }
	.nav-t:checked ~ .hd .hd-burger .i-open { display: none; }
	.nav-t:checked ~ .hd .hd-burger .i-close { display: block; }
	.nav-t:checked ~ .hd .hd-burger { background: var(--hd-chip-h); }
	.nav-in { flex-direction: column; gap: 0; padding-left: 0; padding-right: 0; }
	.mnav ul { flex-direction: column; }
	.mnav .nav-main { justify-content: flex-start; }
	.mnav li { display: block; }
	.mnav a, .mnav a:link, .mnav a:visited { padding: 11px 18px; min-height: 46px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.06); white-space: normal; }
	.mnav .nav-m { display: block !important; }
	.nav-user { display: flex !important; border-top: 6px solid var(--hd-chip-line); }
	.nav-user font, .nav-user strong { color: inherit !important; }
	.mnav .nav-out a { color: #ffb4ae; }
	.mnav { border-bottom: 3px solid var(--accent); }
	.acct .wrap { text-align: left; }
	.list-head .c-auth, .lr-auth { display: none; }
	.lr-sub-auth { display: inline; }
	.list-head .c-num, .lr-num { width: 66px; }
	.list-head .c-last, .lr-last { width: 180px; }
}
@media (max-width: 760px) {
	body { font-size: 15px; }
	.main { padding-top: 12px; }
	.maintitle, h1, .page-head h1, .topic-head h1 { font-size: 20px; }
	/* lists collapse into stacked rows */
	.list-head .lh-col { display: none; }
	.lrow { flex-wrap: wrap; align-items: flex-start; padding: 12px 14px; gap: 4px 12px; }
	.lr-icon { width: 32px; padding-top: 2px; }
	.lr-icon img { width: 32px; height: 32px; }
	.lr-main { flex: 1 1 calc(100% - 44px); }
	.lr-num, .lr-last {
		width: auto; text-align: left; border: 0; padding: 0; font-size: 12px; color: var(--muted);
	}
	.lr-num { margin-left: 44px; }
	.lr-num + .lr-num { margin-left: 0; }
	.lr-num + .lr-num::before { content: "\00B7"; margin-right: 10px; color: var(--faint-2); }
	.lr-last { flex: 1 1 100%; margin-left: 44px; }
	.lr-last .lr-lbl + * { margin-left: 0; }
	.lr-lbl { display: inline; color: var(--faint); }
	.lr-num b, .lr-num strong { color: var(--text); }
	.lr-desc { font-size: 13px; }
	.lr-title, .lr-title:link, .lr-title:visited { font-size: 15px; }
	.board-bar { align-items: flex-start; }
	.board-bar { flex-direction: column; gap: 8px; }
	.page-head .ph-side { text-align: left; }
	.alpha { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
	.quick-links { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.quick-links::-webkit-scrollbar { display: none; }
	.quick-links li { flex: none; }
	.stats-in { grid-template-columns: 1fr; }
	.actionbar .pagination { margin-left: 0; width: 100%; }
	.tools { flex-direction: column; }
	.tools .t-side { text-align: left; }
	/* posts: author column becomes compact header */
	.post { grid-template-columns: minmax(0, 1fr); }
	/* avatar in its own column left of name, rank and facts; no avatar = no column */
	.p-author { border-right: 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 10px 14px; }
	.p-avatar { grid-column: 1; grid-row: 1 / span 3; margin: 2px 12px 0 0; }
	.p-name, .p-rank, .p-facts { grid-column: 2; }
	.p-avatar img { width: 48px; height: 48px; object-fit: cover; max-width: 48px; border-radius: 50%; }
	.p-name { font-size: 15px; }
	.p-rank { margin: 0; }
	.p-rank br { display: none; }
	.p-rank img { display: inline-block; margin: 0 0 0 6px; max-height: 18px; width: auto; }
	.p-facts { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 11.5px; line-height: 1.5; }
	.p-facts br { display: none; }
	.p-facts > span { white-space: nowrap; }
	.p-head { padding: 6px 8px 6px 14px; }
	.p-actions a { min-width: 38px; min-height: 40px; }
	.p-actions { margin-left: 0; }
	.p-foot a { min-width: 40px; min-height: 40px; }
	.p-text { padding: 12px 14px 14px; }
	.p-sig { margin: 0 14px 10px; }
	/* forms stack */
	.frm-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; }
	.frm-l { padding-top: 0; }
	.frm-f input.post, .frm-f input[type="text"], .frm-f input[type="password"], .frm-f textarea, .frm-f select { width: 100%; max-width: 100%; }
	.editor { grid-template-columns: minmax(0, 1fr); }
	.login-box .frm-row { grid-template-columns: minmax(0, 1fr); }
	.smilies a { min-width: 40px; min-height: 40px; }
	.editor textarea { min-height: 220px; }
	.profile { grid-template-columns: minmax(0, 1fr); }
	.dl { grid-template-columns: minmax(0, 1fr); }
	.dl dt { padding-bottom: 0; }
	.dl dd { border-top: 0; padding-top: 2px; }
	.pm-meta { grid-template-columns: minmax(0, 1fr); }
	.pm-meta dd { margin-bottom: 6px; }
	.poll-res { grid-template-columns: minmax(0, 1fr) auto; }
	.poll-res .poll-bar { grid-column: 1 / -1; order: 0; }
	/* card-style data tables */
	.tbl.cards thead, .tbl.cards tr.tbl-head { display: none; }
	.tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td { display: block; width: auto; }
	.tbl.cards tr { padding: 10px 14px; border-top: 1px solid var(--line-2); }
	.tbl.cards tr:first-child { border-top: 0; }
	.tbl.cards td { border: 0; padding: 1px 0; text-align: left !important; }
	.tbl.cards td[data-l]::before { content: attr(data-l) ": "; color: var(--faint); font-size: 12px; }
	.tbl.cards td.t-main { font-size: 15px; font-weight: 700; padding-bottom: 3px; }
	.tbl.cards td.t-hide { display: none; }
	.tbl.cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
	.tbl.cards td { flex: 1 1 100%; }
	.tbl.cards td.t-main { order: -2; flex: 1 1 auto; }
	.tbl.cards td.t-icons { order: -1; flex: none; }
	.tbl.cards td.t-icons:empty { display: none; }
	.filter-bar input.post { width: 100%; }
	.tbl.cards td.cat { margin: -10px -14px; padding: 8px 14px; }
	/* legacy tables: never push the page wider */
	table.forumline { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
	table.forumline.stack, table.forumline.stack > tbody, table.forumline.stack > tbody > tr, table.forumline.stack > tbody > tr > td, table.forumline.stack > tbody > tr > th { display: block; width: auto !important; text-align: left; }
	table.forumline.stack td[align="right"] { text-align: left; }
	table.forumline.stack > tbody > tr > td.row1 { padding-bottom: 2px; border-top: 1px solid var(--line-2); }
	table.forumline.stack > tbody > tr > td.row1 + td.row2 { border-top: 0; padding-top: 4px; }
	table.forumline.stack table { width: 100% !important; }
	table.forumline.stack input.post, table.forumline.stack textarea, table.forumline.stack select { max-width: 100%; }
	table.forumline.stack input[style*="width"], table.forumline.stack textarea[style*="width"] { width: 100% !important; }
	td, th { white-space: normal; }
	td[nowrap] { white-space: normal; }
	.fld input { width: 100%; }
	.login-strip-f { width: 100%; }
	.login-strip-f .fld { flex: 1 1 140px; }
	.login-strip-f input[name="login_submit"] { flex: 1 1 100%; min-height: 42px; }
	input, select, textarea { font-size: 16px; } /* no iOS zoom on focus */
	.bb-bar input.button { min-height: 40px; min-width: 42px; }
	.abtn, .abtn:link, .abtn:visited { white-space: normal; max-width: 100%; }
}
@media (max-width: 760px) {
	.pmlist .lrow { position: relative; padding-right: 56px; }
	.pmlist .pm-mark { position: absolute; right: 8px; top: 10px; height: 40px; align-items: center; }
	.pmlist .lr-auth, .pmlist .lr-date { display: block; width: auto; flex: 1 1 100%; margin-left: 44px; text-align: left; font-size: 12px; }
	.box-foot.pm-actions { justify-content: center; }
}
@media (max-width: 400px) {
	:root { --gutter: 10px; }
	.hd-logo img { height: 44px; }
	.hd-btn { min-width: 36px; padding: 6px; }
	.hd-tools { gap: 2px; }
	.hd-login { padding: 6px 10px; }
	.p-author { padding: 10px 12px; }
	.p-text { padding: 12px 12px 14px; }
	.lrow { padding: 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
	.hd, .mnav, .acct, .ft, .actionbar, .tools, .p-actions, .p-foot { display: none !important; }
	body { background: var(--field-bg) !important; color: #000; }
}

/* ---------- alphabet filter: chips, no separators (the template prints ", " between letters) ---------- */
.alpha { font-size: 0; gap: 4px; }
.alpha > * { flex: none; }
.alpha .alpha-l { font-size: 12px; margin-right: 4px; color: var(--muted); }
.alpha a { font-size: 12px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px; background: var(--field-bg); border: 1px solid var(--line); color: var(--text); }
.alpha a:hover { border-color: var(--accent); color: var(--accent-fg); }

/* wide tables between the card breakpoint and desktop: scroll inside the card instead of being cut off */
@media (max-width: 960px) { .box:has(> .tbl), .box:has(> form > .tbl) { overflow-x: auto; } }

/* quick links: wrap on medium widths, one scrollable row with a fade edge on phones */
@media (max-width: 760px) {
	.board-bar { gap: 6px; margin-bottom: 10px; }
	.quick-links { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
	.quick-links a, .quick-links a:link, .quick-links a:visited { min-height: 30px; padding: 3px 11px; font-size: 12.5px; }
}
@media (max-width: 600px) {
	.board-bar-time { display: none; }
	.quick-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 28px;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
	.alpha { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); padding-right: 24px; scrollbar-width: none; }
	.alpha::-webkit-scrollbar { display: none; }
}

/* ---------- compact mobile scale (one type/spacing scale for all pages on phones) ---------- */
@media (max-width: 760px) {
	body { font-size: 14px; }
	.main { padding-top: 10px; padding-bottom: 20px; }
	.maintitle, h1, .page-head h1, .topic-head h1 { font-size: 18px; }
	.page-head { margin-bottom: 8px; }
	.page-head .ph-side { font-size: 12px; }
	.crumbs { font-size: 12.5px; margin-bottom: 8px; }
	.crumbs a { min-height: 24px; }
	.box { margin-bottom: 12px; }
	.box-head, .list-head { padding: 7px 12px; min-height: 34px; }
	.box-head h2, .list-head h2, .box-head h3 { font-size: 11.5px; }
	.box-body { padding: 12px; }
	.actionbar { margin-bottom: 10px; gap: 6px 8px; }
	.abtn, .abtn:link, .abtn:visited { min-height: 34px; padding: 6px 12px; font-size: 13px; }
	.pagination a, .pagination .paginko { min-width: 30px; height: 30px; font-size: 12.5px; }

	/* list rows: title + one compact meta line, icons instead of words */
	.rows > .lrow:nth-child(even) { background: var(--surface-2); }
	/* icon pinned left, everything else flows in one column; column-gap separates items on a line */
	.lrow { position: relative; padding: 9px 12px 9px 44px; gap: 1px 12px; min-height: 0; }
	.lr-icon { position: absolute; left: 12px; top: 10px; width: 22px; padding: 0; }
	.lr-icon img[src*="/ico/"], .pmlist .lr-icon img[src*="/ico/"] { width: 20px; height: 20px; }
	.lr-main { flex: 1 1 100%; }
	.lr-title, .lr-title:link, .lr-title:visited { font-size: 15px; font-weight: 600; line-height: 1.3; }
	.lr-desc { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.lr-sub, .lr-pages, .lr-mods { font-size: 12px; margin-top: 1px; }
	.lr-auth-l { display: none; }
	.lr-num, .lr-last { font-size: 12px; line-height: 1.5; margin: 2px 0 0 !important; }
	.lr-num { display: inline-flex; align-items: center; gap: 3px; }
	.lr-num + .lr-num::before { content: none; }
	.lr-last { flex: 0 1 auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
	.lr-last br { display: none; }
	.lr-last img[src*="/ico/"] { width: 14px; height: 14px; }
	.lr-lbl { font-size: 0; display: inline-flex; }
	.lr-lbl::before {
		content: ""; display: inline-block; width: 13px; height: 13px; background: currentColor; opacity: .75;
		-webkit-mask: url("images/ico/clock.svg") center / contain no-repeat; mask: url("images/ico/clock.svg") center / contain no-repeat;
	}
	.n-topics .lr-lbl::before { -webkit-mask-image: url("images/ico/list.svg"); mask-image: url("images/ico/list.svg"); }
	.n-posts .lr-lbl::before, .n-replies .lr-lbl::before { -webkit-mask-image: url("images/ico/message-circle.svg"); mask-image: url("images/ico/message-circle.svg"); }
	.n-views .lr-lbl::before { -webkit-mask-image: url("images/ico/eye.svg"); mask-image: url("images/ico/eye.svg"); }

	/* posts: tighter card, author bar tied to its post */
	.post { margin-bottom: 10px; border-color: var(--line); }
	.p-author { padding: 8px 12px; background: var(--surface-3); }
	.p-avatar img { width: 40px; height: 40px; max-width: 40px; }
	.p-name { font-size: 14px; }
	.p-facts { font-size: 11px; }
	.p-head { padding: 4px 6px 4px 12px; }
	.p-text, .p-text.postbody { padding: 10px 12px 12px; font-size: 14.5px; line-height: 1.55; }
	.p-actions a, .p-foot a { min-width: 36px; min-height: 36px; }
	.p-actions img[src*="/ico/"], .p-foot img[src*="/ico/"] { width: 19px; height: 19px; }

	.topic-head .th-meta { font-size: 12.5px; gap: 2px 12px; }
	.mod-tools { gap: 4px; }
	.mod-tools a.mt, .mod-tools button.mt, .mt { min-height: 30px; padding: 3px 9px 3px 7px; font-size: 12px; gap: 5px; }
	.mt img[src*="/ico/"] { width: 15px; height: 15px; }
	.p-mod { border-left: 0; margin-left: 0; padding-left: 0; }
	.posts-del .btn { min-height: 32px; font-size: 12px; }
	.pm-folders { gap: 5px; margin-bottom: 10px; }
	.pm-folders .pmf { min-height: 32px; padding: 3px 11px 3px 8px; font-size: 12.5px; }
	.pm-folders img[src*="/ico/"] { width: 16px; height: 16px; }
	.abtn-wrap a, .abtn-wrap a:link, .abtn-wrap a:visited { min-height: 34px; padding: 6px 12px; font-size: 13px; }
	.btn, input.button, input.liteoption, input.mainoption, input.catbutton, button.button, input[type="submit"], input[type="button"], input[type="reset"] { min-height: 34px; padding: 5px 12px; font-size: 12.5px; }
	.box-foot { padding: 8px 12px; gap: 6px; }
	/* data tables as cards */
	.tbl.cards tr { padding: 8px 12px; }
	.tbl.cards td.t-main { font-size: 14px; }
	.tbl.cards td { font-size: 12.5px; }
	.tbl.cards tr:nth-child(even) { background: var(--surface-2); }

	/* forms */
	.frm-row { padding: 10px 12px; }
	.frm-l { font-size: 12.5px; }
	.hd-btn img[src*="/ico/"] { width: 22px; height: 22px; }
}

/* ---------- quick links: plain text links like the original (no pills) ---------- */
.quick-links { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-wrap: nowrap;
	overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.quick-links li { flex: none; }
.quick-links a, .quick-links a:link, .quick-links a:visited {
	display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
	font-size: 13px; font-weight: 400; color: var(--text); line-height: 1.5; }
.quick-links a strong { font-weight: 700; }
.quick-links a:hover { color: var(--accent-fg); text-decoration: underline; }
@media (max-width: 600px) {
	.quick-links { align-items: flex-start; width: 100%; padding: 0; -webkit-mask-image: none; mask-image: none; }
	.quick-links a, .quick-links a:link, .quick-links a:visited { font-size: 12.5px; line-height: 1.7; }
}

/* index: time + breadcrumb vlavo, rychle odkazy vpravo, tesne nad prvou kategoriou (ako povodne) */
.board-bar { align-items: flex-end; margin: 4px 0 6px; }
.board-bar .crumbs { margin: 6px 0 0; }
.quick-links { gap: 0; }
.quick-links a, .quick-links a:link, .quick-links a:visited { font-size: 12px; line-height: 1.4; }
.board-bar-time .bb-times { display: block; }
@media (max-width: 600px) {
	.board-bar-time { display: block; }
	.board-bar-time .bb-times { display: none; }
}
@media (max-width: 760px) {
	.board-bar { flex-direction: column; align-items: stretch; gap: 6px; }
	.board-bar-time { order: 2; align-self: stretch; text-align: left; }
	.board-bar .crumbs { justify-content: flex-start; margin: 0; }
	.quick-links { align-items: flex-start; }
}

/* ---------- moderator reports (viewpost_reports.php / reports_view.tpl) ----------
   one filter toolbar, one compact row per report (checkbox | post + report + handling | status pill + action),
   bulk action bar at the bottom; rows become stacked cards on phones */
.rep-filter, .rep-bulk { justify-content: flex-start; gap: 8px 14px; }
.rep-fld { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rep-fld select { min-width: 0; }
.rep-list .rep {
	display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0 12px; align-items: start;
	padding: 10px 16px 10px 10px; border-top: 1px solid var(--line-2);
}
.rep-list > .rep:first-child { border-top: 0; }
.rep-list .rep:hover { background: var(--row-hover); }
.rep-list .rep:has(.rep-chk input:checked) { background: var(--accent-soft); }
.rep.is-open { box-shadow: inset 3px 0 0 var(--st-bad); }
.rep.is-reopened { box-shadow: inset 3px 0 0 var(--st-warn); }
.rep-chk { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -8px; border-radius: var(--radius-s); cursor: pointer; }
.rep-chk:hover { background: var(--surface-3); }
.rep-chk input[type="checkbox"] { margin: 0; width: 18px; height: 18px; }
.rep-main { min-width: 0; font-size: 13px; line-height: 1.45; }
.rep-title, .rep-title:link, .rep-title:visited { display: inline-block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.rep-sub, .rep-meta { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.rep-sub a, .rep-meta a, .rep-act a { color: var(--text); font-weight: 600; }
.rep-sub a:hover, .rep-meta a:hover, .rep-act a:hover { color: var(--accent-fg); }
.rep-dot { color: var(--faint); margin: 0 3px; }
.rep-date { white-space: nowrap; }
.rep-line { margin-top: 4px; }
.rep-lbl { color: var(--muted); font-weight: 600; margin-right: 2px; }
.rep-comment { padding: 4px 9px; background: var(--surface-2); border-left: 3px solid var(--line); border-radius: 0 var(--radius-s) var(--radius-s) 0; overflow-wrap: anywhere; }
.rep-act { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.rep-act + .rep-act { margin-top: 4px; border-top-style: dotted; }
.rep-act-c { margin-top: 2px; color: var(--text); overflow-wrap: anywhere; }
.rep-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 120px; }
.rep-st {
	--st: var(--muted);
	display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--st) 45%, transparent); background: color-mix(in srgb, var(--st) 10%, transparent);
	color: var(--st); font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.rep-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.is-open .rep-st { --st: var(--st-bad); }
.is-reopened .rep-st { --st: var(--st-warn); }
.is-closed .rep-st { --st: var(--muted); }
.rep-side .rep-btn { margin: 0; }
.is-open .rep-btn, .is-reopened .rep-btn { border-color: color-mix(in srgb, var(--accent-fg) 55%, var(--field-line)); color: var(--accent-fg); }
.is-open .rep-btn:hover, .is-reopened .rep-btn:hover { background: var(--accent-soft); border-color: var(--accent-fg); color: var(--accent-fg); }
.rep-opt { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.rep-opt a { color: var(--text-2); font-weight: 600; }
.rep-opt a:hover { color: var(--accent-fg); }
.rep-note { display: block; color: var(--faint); }
.rep-note:empty { display: none; }
.rep-cleanup { justify-content: flex-start; font-size: 12px; color: var(--muted); }
.rep-ver { text-align: center; font-size: 11px; margin: 4px 0 0; }
@media (max-width: 760px) {
	.rep-filter, .rep-bulk { gap: 8px; }
	.rep-fld { flex: 1 1 100%; }
	.rep-fld .rep-fld-l { flex: none; width: 96px; }
	.rep-fld select { flex: 1 1 auto; width: 100%; min-height: 42px; }
	.rep-form input.rep-go { flex: 1 1 100%; min-height: 42px; font-size: 14px; }
	.rep-bulk .rep-fld { flex: 1 1 160px; }
	.rep-bulk .rep-fld .rep-fld-l { width: auto; }
	.rep-bulk input.rep-go { flex: 0 0 auto; }
	.rep-opt { margin-left: 0; flex: 1 1 100%; text-align: left; }
	.rep-opt a { display: inline-flex; align-items: center; min-height: 40px; }
	.rep-list .rep { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 12px 12px 6px; gap: 0 8px; }
	.rep-list > .rep:nth-child(even) { background: var(--surface-2); }
	.rep-list .rep:has(.rep-chk input:checked) { background: var(--accent-soft); }
	.rep-chk { margin-top: -6px; }
	.rep-chk input[type="checkbox"] { width: 20px; height: 20px; }
	.rep-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; margin-top: 8px; }
	.rep-form .rep-side .rep-btn { min-height: 40px; padding: 6px 16px; font-size: 13px; }
}

/* site-wide notice under the header (security update / bug reports), closable */
.site-notice { margin-top: 10px; }
.site-notice .sn-in { position: relative; padding: 8px 38px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-s); color: var(--text); font-size: 12px; line-height: 1.5; text-align: center; }
.site-notice .sn-x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.notice-line { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* design switch button (index quick links, forum and topic head) */
.quick-links .ql-design { margin-top: 8px; }
a.design-btn, a.design-btn:link, a.design-btn:visited, .page-head .ph-side a.design-btn {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
	border: 1px solid var(--accent); border-radius: var(--radius-s); background: var(--surface);
	color: var(--accent-fg); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
a.design-btn.design-btn:hover, .page-head .ph-side a.design-btn:hover { background: var(--accent); color: #fff; text-decoration: none; }
a.design-btn img[src*="/ico/"] { width: 16px; height: 16px; color: inherit !important; }
.ph-side a.design-btn { margin-top: 8px; }
.crumbs-row { margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.crumbs-row .crumbs { margin-bottom: 0; }

/* index, mobile: quick links at the bottom, left, on one line with "Hore" (index_body .ql-foot) */
.ql-foot { display: none; }
@media (max-width: 760px) {
	.board-bar .quick-links { display: none; }
	.ql-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
	.ql-foot .quick-links { flex: 1 1 auto; width: auto; min-width: 0; }
	.ql-foot .ft-top { flex: none; margin: 0; }
	.ql-foot .ft-top a { min-height: 0; padding: 0 0 0 6px; line-height: 1.7; }
	body:has(.ql-foot) .ft .ft-top { display: none; }
}