:root, :root[data-theme="legend"] {
  --ink: #f2ead7;
  --muted: #b9ae93;
  --accent: #d6ad57;
  --accent-strong: #f1ce79;
  --line: #655332;
  --panel: rgba(25, 23, 20, .84);
  --field: #181714;
  --shadow: rgba(0, 0, 0, .45);
  --page: #151412;
  --hero: none;
  font-family: Georgia, serif;
  color: var(--ink);
  background: var(--page);
}

:root[data-theme="forest"] {
  --ink: #e6ead9;
  --muted: #a9b59a;
  --accent: #a8bd65;
  --accent-strong: #d4e694;
  --line: #526c46;
  --panel: rgba(17, 28, 22, .88);
  --field: #101b16;
  --page: #0d1713;
  --hero: linear-gradient(135deg, rgba(12, 30, 23, .78), rgba(9, 16, 13, .95));
}

:root[data-theme="obsidian"] {
  --ink: #e8e9ed;
  --muted: #a9abb5;
  --accent: #b8a5e5;
  --accent-strong: #ded2ff;
  --line: #5d5a70;
  --panel: rgba(24, 23, 32, .88);
  --field: #16151d;
  --page: #101015;
  --hero: linear-gradient(135deg, rgba(40, 35, 56, .72), rgba(12, 12, 17, .96));
}

:root[data-theme="harbor"] {
  --ink: #e6f0f2;
  --muted: #9db6bc;
  --accent: #46b6c9;
  --accent-strong: #83d8e4;
  --line: #315765;
  --panel: rgba(15, 35, 43, .9);
  --field: #0d252e;
  --page: #0b1b23;
  --hero: linear-gradient(145deg, rgba(15, 65, 78, .7), rgba(7, 20, 28, .98));
}

:root[data-theme="ember"] {
  --ink: #f5e7dc;
  --muted: #c5a99a;
  --accent: #e2764e;
  --accent-strong: #ffad7d;
  --line: #704331;
  --panel: rgba(43, 25, 22, .91);
  --field: #281815;
  --page: #1d1212;
  --hero: linear-gradient(145deg, rgba(91, 42, 28, .7), rgba(25, 13, 15, .98));
}

:root[data-theme="terminal"] {
  --ink: #d4e8d1;
  --muted: #8bad88;
  --accent: #66c174;
  --accent-strong: #a2e5a0;
  --line: #365c3c;
  --panel: rgba(13, 28, 17, .93);
  --field: #0a1d10;
  --page: #08150b;
  --hero: linear-gradient(145deg, rgba(20, 65, 31, .58), rgba(5, 14, 8, .99));
}

:root[data-theme="cyber"] {
  --ink: #f0edf5;
  --muted: #aaa6b6;
  --accent: #e44732;
  --accent-strong: #ff9b69;
  --line: #4d4a5a;
  --panel: rgba(15, 14, 19, .94);
  --field: #111015;
  --page: #171522;
  --shadow: rgba(0, 0, 0, .68);
  --hero: linear-gradient(135deg, rgba(40, 34, 48, .8), rgba(14, 13, 20, .98));
}

:root[data-theme="cyber"] body::before {
  background-image: linear-gradient(115deg, rgba(13, 13, 20, .96), rgba(74, 20, 22, .46) 48%, rgba(13, 13, 20, .98));
  opacity: .9;
}

:root[data-theme="cyber"] body::after {
  background: linear-gradient(180deg, rgba(12, 11, 17, .15), var(--page) 82%);
}

:root[data-theme="cyber"] .forum-nav,
:root[data-theme="cyber"] .admin-nav,
:root[data-theme="cyber"] .node-browser {
  background: #0e0d12;
  border-color: #3e3b4a;
}

:root[data-theme="cyber"] .forum-nav a:hover,
:root[data-theme="cyber"] .forum-nav a.is-selected {
  background: #302d39;
  color: #fff;
}

:root[data-theme="cyber"] .forum-masthead,
:root[data-theme="cyber"] .forum-index-header,
:root[data-theme="cyber"] .server-card header {
  background: linear-gradient(100deg, #272431, #541b1c 52%, #17151e);
  border-color: #514c5e;
}

:root[data-theme="cyber"] .forum-category-heading,
:root[data-theme="cyber"] .forum-letter-heading {
  background: linear-gradient(100deg, rgba(40, 36, 48, .95), rgba(103, 30, 28, .65), rgba(26, 23, 32, .95));
}

:root[data-theme="cyber"] .forum-row:hover,
:root[data-theme="cyber"] .thread-row:hover,
:root[data-theme="cyber"] .tree-node:hover,
:root[data-theme="cyber"] .tree-node:focus {
  background: rgba(228, 71, 50, .12);
}

:root[data-theme="cyber"] button:not(:disabled):hover,
:root[data-theme="cyber"] .admin-nav-item:hover,
:root[data-theme="cyber"] .admin-nav-item.active {
  border-color: var(--accent-strong);
  background: rgba(228, 71, 50, .2);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--page); overflow-y: scroll; scrollbar-gutter: stable; }
body { position: relative; margin: 0; min-width: 320px; overflow-x: hidden; background: transparent; }
body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  background-image: var(--hero);
  background-position: center top;
  background-size: cover;
  opacity: .66;
}
body::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(12, 11, 9, .28), var(--page) 78%);
  pointer-events: none;
}
main { position: relative; z-index: 1; min-height: 100vh; max-width: 1480px; margin: auto; padding: 0 .55rem 0; }
body:has(#admin-panel:not([hidden])) main { max-width: none; min-height: 100vh; padding: 0; }
body:has(#admin-panel:not([hidden])) .topbar { padding: 1rem 2rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 118px; gap: 1rem; padding: 1rem 1.5rem; }
.brand-lockup { display: grid; gap: .25rem; }
.site-brand { display: inline-flex; align-items: center; min-height: 4.5rem; color: #d7d7d7; font: italic 2.65rem Georgia, serif; letter-spacing: -.045em; text-shadow: 0 0 9px rgba(255, 255, 255, .7), 0 0 20px rgba(110, 170, 210, .55); text-decoration: none; }
.site-brand img { display: none; width: min(34rem, 55vw); max-height: 6rem; object-fit: contain; object-position: left center; }
.site-brand img[src] { display: block; }
.site-brand img + span { display: none; }
.site-brand img:not([src]) + span, .site-brand img[src=""] + span { display: inline; }
.brand-lockup .eyebrow { margin-left: .25rem; color: #7892a4; }
.site-controls { display: flex; align-items: center; gap: .8rem; }
.eyebrow, .label, .status, code, button, .theme-control, select { font-family: monospace; letter-spacing: .08em; }
.eyebrow { margin: 0; color: var(--accent-strong); font-size: .75rem; }
.theme-control { display: flex; align-items: center; gap: .65rem; color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.forum-nav { display: flex; align-items: center; min-height: 46px; gap: 0; padding: 0 1.4rem; background: #2b2b2b; border: 1px solid #363636; }
.forum-nav a { padding: .85rem 1rem; color: #d3d3d3; font: .78rem Arial, sans-serif; text-decoration: none; }
.forum-nav a:hover, .forum-nav a.is-selected { color: #fff; background: #3a3a3a; }
.nav-spacer { flex: 1; }
.nav-account { display: inline-flex; align-items: center; gap: .75rem; margin-left: auto; color: #d3d3d3; font: .78rem Arial, sans-serif; }
.nav-account strong { color: #fff; font-weight: 700; cursor: pointer; }
#auth-user { cursor: pointer; }
.nav-account button { padding: .45rem .7rem; color: #d3d3d3; border: 0; background: transparent; font: .78rem Arial, sans-serif; }
.nav-account button:hover { color: #fff; background: #3a3a3a; }
.auth-pending .forum-masthead,
.auth-pending .forum-index,
.auth-pending .actions,
.auth-pending .hint,
.auth-pending .forum-footer { display: none !important; }
.auth-pending .auth { display: none !important; }
html.auth-known body.auth-pending .auth { display: none !important; }
.auth-pending .forum-masthead[hidden], .auth-pending .forum-index[hidden] { display: none !important; }
.auth-pending .forum-nav > a[href="#auth-form"] { visibility: hidden; }
.auth-pending .nav-account { visibility: hidden; min-width: 7rem; }
select { border: 1px solid var(--line); padding: .55rem .7rem; color: var(--ink); background: rgba(15, 14, 12, .84); font-size: .68rem; }
h1 { max-width: 760px; margin: 10vh 0 1rem; font-size: clamp(3rem, 7vw, 6rem); line-height: .94; letter-spacing: -.06em; text-shadow: 0 4px 30px var(--shadow); }
h1 em { color: var(--accent-strong); font-style: normal; }
.intro { max-width: 560px; color: var(--muted); font-size: 1.15rem; }
.forum-masthead { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: 1.1rem; border: 1px solid #454545; background: #363c42; }
.forum-masthead h1 { margin: 1rem 0 .8rem; }
.breadcrumb { margin: 0; color: var(--accent-strong); font: .72rem monospace; letter-spacing: .08em; text-transform: uppercase; }
.forum-masthead-mark { display: grid; place-items: center; width: 6rem; height: 6rem; border: 1px solid var(--accent); color: var(--accent-strong); font: 1.5rem Georgia, serif; letter-spacing: .08em; }
.forum-index { margin-top: 2rem; }
.forum-index-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding: .65rem .85rem; }
.forum-index-header > div { min-width: 0; overflow-wrap: anywhere; }
.forum-child-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-top: .8rem; font-size: .82rem; }
.forum-child-links > span { color: var(--muted); }
.forum-child-links ul { display: flex; flex-wrap: wrap; gap: .4rem .8rem; padding: 0; margin: 0; list-style: none; }
.forum-child-links a { color: var(--accent-strong); text-decoration: none; }
.forum-child-links a::before { content: '›'; margin-right: .3rem; color: var(--muted); }
.forum-child-links a:hover, .forum-child-links a:focus-visible { text-decoration: underline; }
.heading-kind { font-weight: 400; }
.forum-path { margin-top: .35rem; color: var(--muted); font-size: .85rem; }
.forum-path ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; margin: 0; padding: 0; list-style: none; }
.forum-path li { min-width: 0; overflow-wrap: anywhere; }
.forum-path li + li::before { content: '→'; margin-right: .5rem; color: var(--muted); }
.forum-path a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.forum-path a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.forum-index-header h2 { margin: .45rem 0 0; color: var(--ink); font-size: 2rem; }
.forum-count { color: var(--muted); font: .7rem monospace; letter-spacing: .06em; text-transform: uppercase; }
.forum-category { margin: 1.5rem 0 2rem; border: 1px solid var(--line); background: var(--panel); }
.forum-category-heading { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; width: 100%; gap: .75rem; padding: .85rem 1.2rem; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: rgba(255, 255, 255, .055); text-align: left; }
.forum-category-heading:hover { background: rgba(255, 255, 255, .1); }
.forum-category-toggle { color: var(--accent-strong); font: 1.2rem monospace; }
.forum-category-heading-copy { display: grid; gap: .25rem; min-width: 0; }
.forum-category-heading-copy strong { color: var(--accent-strong); font: 1.1rem Georgia, serif; }
.forum-category-heading-copy small { overflow: hidden; color: var(--muted); font: .78rem Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.forum-category-count { display: grid; place-items: center; min-width: 2rem; min-height: 2rem; color: var(--accent-strong); border: 1px solid var(--line); font: .7rem monospace; }
.forum-category.collapsed .forum-category-heading { border-bottom-color: transparent; }
.forum-category.collapsed .forum-category-toggle { transform: rotate(0deg); }
.forum-category:not(.collapsed) .forum-category-toggle { transform: rotate(45deg); }
.forum-category.collapsed .forum-rows { display: none; }
.forum-letter-group { border-bottom: 1px solid rgba(101, 83, 50, .45); }
.forum-letter-group:last-child { border-bottom: 0; }
.forum-letter-heading { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; width: 100%; gap: .6rem; padding: .55rem 1.2rem .55rem 2.3rem; border: 0; color: var(--muted); background: rgba(0, 0, 0, .12); text-align: left; }
.forum-letter-heading:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.forum-letter-heading span { color: var(--accent-strong); font: 1rem Georgia, serif; }
.forum-letter-heading small { font: .68rem monospace; }
.forum-letter-heading b { color: var(--accent-strong); font: 1rem monospace; }
.forum-letter-group:not(.collapsed) .forum-letter-heading b { transform: rotate(45deg); }
.forum-letter-group.collapsed .forum-letter-rows { display: none; }
.forum-letter-group .forum-row { padding-left: 2.3rem; }
.forum-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 20rem; align-items: center; gap: 1rem; min-height: 5.5rem; padding: .8rem 1.2rem; border-bottom: 1px solid rgba(101, 83, 50, .45); color: inherit; text-decoration: none; position: relative; }
.forum-row:last-child { border-bottom: 0; }
.forum-row:hover { background: rgba(255, 255, 255, .035); }
.forum-row { cursor: pointer; }
.forum-row-count { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.forum-row-alert { padding: .2rem .5rem; border-radius: .3rem; background: var(--accent-strong, #47a7eb); color: #0f0e0c; font: 700 .6rem Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(.35rem); transition: opacity .25s ease, transform .25s ease; }
.forum-row-alert.is-visible { opacity: 1; transform: translateX(0); }
.forum-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--accent); color: var(--accent-strong); font-size: 1.5rem; }
.forum-row-copy h4 { margin: 0; color: var(--ink); font-size: 1.05rem; }
.forum-row-copy p { overflow: hidden; margin: .3rem 0 0; color: var(--muted); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.forum-subforums { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .55rem; }
.forum-main-link { color: inherit; text-decoration: none; }
.forum-main-link::after { position: absolute; inset: 0; z-index: 1; content: ''; }
.forum-main-link:focus-visible::after { outline: 2px solid var(--accent-strong); outline-offset: -2px; }
.forum-subforums a { position: relative; z-index: 2; color: var(--accent-strong); font: .7rem monospace; text-decoration: none; }
.forum-subforums a:hover, .forum-subforums a:focus-visible { text-decoration: underline; }
.forum-subforums a::before { margin-right: .3rem; color: var(--muted); content: '›'; }
.forum-row [data-thread-slug], .forum-row [data-username] { position: relative; z-index: 2; }
.forum-row-meta { display: grid; gap: .2rem; justify-items: end; color: var(--muted); font: .68rem monospace; text-align: right; }
.forum-row-meta strong { color: var(--ink); font: 1rem Georgia, serif; }
.forum-row-meta span { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.last-post-title[data-thread-slug] { color: var(--ink); text-decoration: none; cursor: pointer; }
.last-post-title[data-thread-slug]:hover { color: var(--accent-strong); text-decoration: underline; }
.last-post-line { display: flex; align-items: baseline; justify-content: flex-end; gap: .5rem; max-width: 100%; overflow: hidden; }
.last-post-line .last-post-author { color: var(--accent-strong); text-decoration: none; }
.last-post-line .last-post-author:hover { text-decoration: underline; }
.last-post-line .last-post-time { flex-shrink: 0; }
.forum-loading { padding: 2rem; color: var(--muted); }
.empty-forum { padding: 4rem 2rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); text-align: center; }

.profile-modal { position: fixed; z-index: 20; inset: 0; margin: auto; width: min(42rem, 92vw); height: min(800px, 90vh); padding: 2rem; border: 1px solid var(--line, #454545); border-radius: .5rem; background: var(--page, #1c1b19); color: var(--ink, #f2ead7); overflow-y: auto; }
.profile-modal::backdrop { background: rgba(0, 0, 0, .55); }
.profile-modal-close { position: absolute; top: .6rem; right: .8rem; padding: .2rem .5rem; border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.profile-modal-close:hover { color: var(--ink); }
.profile-modal-body h3 { margin: 0 0 1.2rem; font-size: 1.4rem; }
.profile-modal-body dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.2rem; margin: 0; font-size: .95rem; }
.profile-modal-body dt { color: var(--muted); }
.profile-modal-body dd { margin: 0; }
.profile-modal-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line, #454545); }
.profile-modal-tab { padding: .6rem 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: .9rem Arial, sans-serif; cursor: pointer; }
.profile-modal-tab:hover { color: var(--ink); }
.profile-modal-tab.is-active { color: var(--ink); border-bottom-color: var(--accent-strong, #47a7eb); }
.profile-modal-panel p { color: var(--muted); font-size: .95rem; margin: 0; }
.profile-modal-tabs { overflow-x: auto; }
.profile-message-button { margin-top: 1.2rem; }
#nav-messages { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
#nav-message-count { padding: .1rem .45rem; border-radius: 1rem; background: var(--accent-strong, #47a7eb); color: #101010; font-size: .8rem; }
.site-controls { position: relative; z-index: 21; }

.message-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.message-key-lock { color: #58d68d; width: 1em; height: 1em; display: inline-block; vertical-align: -.1em; margin-left: .35em; }
.message-mode { padding: .7rem; border: 1px solid currentColor; border-radius: .4rem; margin: .8rem 0 !important; }
.profile-modal-panel .message-mode.is-encrypted { color: #58d68d; }
.profile-modal-panel .message-mode.is-plain { color: #efc16c; }
.message-key-confirm { display: block; margin: 1rem 0; }
.message-fingerprint { display: block; overflow-wrap: anywhere; padding: .8rem 0; }
[data-key-controls] { display: grid; gap: .8rem; margin-top: 1rem; }
.message-compose-to, .message-compose { display: grid; gap: .7rem; margin: 1rem 0; }
.message-compose-to label, .message-compose label, [data-unlock] label { display: grid; gap: .4rem; }
.message-compose textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 6rem; }
.message-conversations { display: grid; gap: .5rem; margin: 1rem 0; }
.message-conversation { text-align: left; overflow-wrap: anywhere; }
.message-security { margin: .8rem 0; font-size: .85rem; }
.message-security summary { cursor: pointer; }
.message-security code { display: block; overflow-wrap: anywhere; padding: .5rem 0; }
.message-history { max-height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; margin: .8rem 0; }
.private-message { align-self: flex-start; max-width: 90%; padding: .7rem .9rem; border: 1px solid var(--line, #454545); border-radius: .5rem; background: #252522; }
.private-message.is-sent { align-self: flex-end; background: #193047; }
.private-message.is-invalid { border-color: #e68585; }
.private-message small { color: var(--muted, #bdb8aa); font-size: .75rem; }
.profile-modal-panel .private-message p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink, #f2ead7); margin-top: .4rem; }
.profile-modal-panel .auth-message.error { color: #f09c9c; }
.settings-form { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.settings-form strong { color: var(--ink); }
.settings-form input[type="text"], .settings-form input[type="email"], .settings-form input[type="password"] { padding: .55rem .7rem; border: 1px solid var(--line, #454545); background: rgba(255, 255, 255, .04); color: var(--ink); }
.settings-form label { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .9rem; }
.settings-form button[type="submit"] { justify-self: start; padding: .5rem 1rem; }
.empty-forum strong { display: block; color: var(--ink); font: 1.4rem Georgia, serif; }
.empty-forum p { color: var(--muted); }
.thread-list { border: 1px solid var(--line); background: var(--panel); }
.thread-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 10rem; align-items: center; gap: .8rem; min-height: 4.3rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(101, 83, 50, .35); }
.thread-row { cursor: pointer; }
.thread-row { color: inherit; text-decoration: none; }
.thread-row:hover, .thread-row:focus { background: rgba(255, 255, 255, .06); outline: none; }
.thread-row:last-child { border-bottom: 0; }
.thread-row h3 { margin: 0; color: var(--accent-strong); font-size: 1rem; }
.thread-row p, .thread-meta { margin: .3rem 0 0; color: var(--muted); font: .72rem monospace; }
.thread-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; white-space: nowrap; }
.thread-row-count { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.thread-row-count strong { color: var(--ink); font: 1rem Georgia, serif; }
.thread-author { color: var(--accent-strong); text-decoration: none; }
.thread-author:hover { text-decoration: underline; }
.thread-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--accent-strong); border: 1px solid var(--line); }
.login-to-post { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.thread-composer { display: grid; gap: .8rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #454545; border-radius: 3px; background: #1f2024; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.composer-header { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); }
.composer-header span { color: var(--muted); font: .68rem monospace; }
.thread-composer input, .thread-composer textarea { width: 100%; border: 1px solid var(--line); padding: .75rem; color: var(--ink); background: var(--field); font: .95rem Arial, sans-serif; }
.thread-composer input:focus, .thread-composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.thread-composer textarea { min-height: 16rem; resize: vertical; line-height: 1.5; }
.composer-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; }
.composer-toolbar { padding: .45rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .16); }
.composer-toolbar button { padding: .45rem .65rem; border: 0; color: #c7c7c7; background: transparent; font-size: .72rem; }
.composer-toolbar button:hover { background: rgba(255, 255, 255, .08); }
.composer-preview-toggle { margin-left: auto; color: #47a7eb !important; border-left: 1px solid var(--line) !important; }
.image-embed-button { font-size: 1rem !important; line-height: 1; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font: .68rem monospace; }
.thread-preview { padding: 1rem; border-left: 2px solid var(--accent); color: var(--ink); background: rgba(255, 255, 255, .04); line-height: 1.6; }
.thread-preview blockquote { margin: .5rem 0; padding: .6rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); background: rgba(0, 0, 0, .18); }
.thread-preview pre { overflow: auto; padding: .8rem; background: #111; }
.attachment-picker { display: grid; gap: .35rem; padding: .8rem; border: 1px dashed #555; color: var(--muted); background: #171717; font: .75rem monospace; }
.attachment-picker input { padding: 0; border: 0; background: transparent; }
.attachment-picker small { color: var(--muted); }
.thread-detail { display: grid; gap: 1rem; }
.post-card { border: 1px solid var(--line); background: var(--panel); }
.post-card header { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font: .72rem monospace; }
.post-card header strong { color: var(--accent-strong); }
.post-card > div { padding: 1.2rem; line-height: 1.6; }
.post-edit-button, .post-save-button, .post-cancel-button { margin-left: .6rem; padding: .35rem .6rem; border: 1px solid var(--line); color: var(--accent-strong); background: transparent; cursor: pointer; font: .7rem monospace; }
.post-edit-button:hover, .post-save-button:hover, .post-cancel-button:hover { background: rgba(255, 255, 255, .08); }
.post-delete-button { margin-left: .6rem; padding: .35rem .6rem; border: 1px solid #e08a3c; color: #e08a3c; background: transparent; cursor: pointer; font: .7rem monospace; }
.post-delete-button:hover { background: rgba(224, 138, 60, .12); }
.post-edited { display: block; padding: 0 1.2rem .8rem; color: var(--muted); font: .7rem monospace; }

.confirm-modal { position: fixed; inset: 0; margin: auto; width: min(24rem, 90vw); padding: 1.5rem; border: 1px solid var(--line, #454545); border-radius: .5rem; background: var(--page, #1c1b19); color: var(--ink, #f2ead7); }
.confirm-modal::backdrop { background: rgba(0, 0, 0, .55); }
.confirm-modal p { margin: 0 0 1.2rem; font-size: .95rem; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.confirm-modal-actions .danger-button { border-color: #e08a3c; color: #e08a3c; }
.post-edit-textarea { box-sizing: border-box; width: 100%; min-height: 10rem; padding: .75rem; border: 1px solid var(--line); color: var(--ink); background: var(--field); font: .95rem Arial, sans-serif; }
.edit-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; padding: .45rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .16); }
.edit-toolbar button { padding: .4rem .6rem; border: 1px solid var(--line); color: var(--accent-strong); background: transparent; cursor: pointer; font: .72rem monospace; }
.edit-toolbar button:hover { background: rgba(255, 255, 255, .08); }
.edit-preview { margin-top: .6rem; padding: .8rem; border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .04); }
.post-edit-actions { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; }
.post-attachment-image { display: block; max-width: min(100%, 720px); max-height: 560px; margin-top: 1rem; object-fit: contain; }
.post-attachment-file { display: inline-block; margin: 1rem .6rem 0 0; padding: .55rem .8rem; border: 1px solid var(--line); color: var(--accent-strong); font: .75rem monospace; }
.auth { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; width: min(100%, 620px); margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px var(--shadow); }
.auth-modal { position: fixed; z-index: 10; inset: 0; width: min(42rem, 92vw); height: max-content; max-height: calc(100vh - 2rem); max-width: none; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: .5rem; background: var(--panel); color: var(--ink); box-shadow: 0 8px 32px rgba(0, 0, 0, .45); overflow: auto; }
.auth-modal::backdrop { background: rgba(0, 0, 0, .62); }
.auth-modal .auth { width: 100%; margin: 0; border: 0; box-shadow: none; }
.auth-modal-close { position: absolute; z-index: 1; top: .6rem; right: .8rem; padding: .2rem .5rem; border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.auth-modal-close:hover { color: var(--ink); }
.auth-heading { display: grid; align-content: start; gap: 1rem; }
.auth-heading strong { font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.auth form { display: grid; gap: .7rem; min-width: 0; }
.auth label { display: grid; gap: .3rem; color: var(--muted); font: .75rem monospace; letter-spacing: .05em; }
.auth label[hidden] { display: none; }
.auth input { width: min(100%, 22rem); margin-left: auto; border: 1px solid var(--line); padding: .65rem; color: var(--ink); background: var(--field); font: 1rem Georgia, serif; }
.auth input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }
.auth-message { height: 2.2rem; min-height: 2.2rem; margin: .2rem 0 0; color: var(--accent-strong); font: .75rem monospace; }
.auth-message.error { color: #e89d78; }
.auth-message.email-alert { grid-column: 1 / -1; justify-self: end; box-sizing: border-box; min-width: 0; width: max-content; max-width: 100%; margin: .2rem 0 0; padding: .55rem .7rem; border: 1px solid var(--accent); background: var(--panel); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: clip; visibility: visible; }
.label { color: var(--muted); font-size: .7rem; }
.status { color: #e0b86a; font-size: .7rem; }
.status.live { color: var(--accent-strong); }
.actions { display: flex; gap: .75rem; margin-top: 2rem; }
button { border: 1px solid var(--accent); padding: .8rem 1.3rem; color: var(--page); background: var(--accent); cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .38; filter: saturate(.35); }
button:hover:not(:disabled) { color: var(--page); background: var(--accent-strong); }
button.secondary { color: var(--accent-strong); background: transparent; }
#email-login { min-width: 12rem; white-space: nowrap; }
#auth-form .auth-actions { display: grid; grid-template-columns: 2fr 3fr; width: min(100%, 22rem); margin-left: auto; }
#auth-form .auth-actions button { min-width: 0; width: 100%; padding-inline: .35rem; font-size: .78rem; white-space: nowrap; }
button:disabled { cursor: not-allowed; opacity: .35; }
.hint { margin-top: 3rem; color: var(--muted); }
.forum-footer { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 2rem; margin: 2rem -.55rem 0; padding: 1.5rem 1.2rem; color: #d1d1d1; background: #363c42; border-top: 1px solid #454545; }
.forum-footer > div { display: grid; align-content: start; gap: .55rem; }
.forum-footer strong { color: #fff; font: 700 .9rem Arial, sans-serif; }
.forum-footer a { color: #aeb8bf; font: .75rem Arial, sans-serif; text-decoration: none; }
.forum-footer a:hover { color: #47a7eb; }
.footer-about p { margin: 0; color: #c0c5c9; font-size: .78rem; line-height: 1.5; }
.admin-panel { margin-top: 5rem; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px var(--shadow); }
.admin-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 620px; }
.admin-nav { border-right: 1px solid var(--line); background: rgba(9, 12, 16, .42); }
.admin-nav-heading { display: grid; gap: .5rem; padding: 1.4rem 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.admin-nav-heading strong { color: var(--ink); font: 1.2rem Georgia, serif; letter-spacing: .04em; }
.admin-nav nav { display: grid; gap: .15rem; padding: .8rem .6rem; }
.admin-nav-item { width: 100%; border: 0; border-left: 2px solid transparent; padding: .75rem .7rem; color: var(--muted); background: transparent; text-align: left; font: .74rem monospace; letter-spacing: .06em; }
.admin-nav-item:hover, .admin-nav-item.active { border-left-color: var(--accent); color: var(--ink); background: rgba(255, 255, 255, .06); }
.admin-workspace { min-width: 0; padding: 1.5rem; }
.admin-workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.admin-workspace-header h2 { margin: .45rem 0 0; font-size: 2rem; }
.admin-status { color: var(--muted); font: .68rem monospace; letter-spacing: .04em; white-space: nowrap; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: var(--accent); }
.admin-view { padding-top: 1.3rem; }
.metrics-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; color: var(--muted); font-size: .85rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.metric-card { padding: 1.2rem; border: 1px solid var(--line); background: var(--panel); }
.metric-card h3 { margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }
.metric-card strong { display: block; font-size: 1.7rem; color: var(--ink); }
.metric-card p { margin: .6rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.server-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.server-card { display: grid; align-content: start; gap: .8rem; padding: 1.2rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.server-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .65rem .8rem .8rem; border-bottom: 1px solid var(--line); }
.server-meta { display: flex; align-items: flex-end; flex-direction: column; gap: .35rem; }
.server-card h3 { margin: .35rem 0 0; color: var(--ink); font-size: 1.25rem; }
.server-card label { display: grid; gap: .35rem; color: var(--muted); font: .72rem monospace; }
.server-card input, .server-card select { width: 100%; min-width: 0; border: 1px solid var(--line); padding: .65rem; color: var(--ink); background: var(--field); font: .9rem Arial, sans-serif; }
.server-status { padding: .25rem .45rem; border: 1px solid var(--line); color: var(--muted); font: .65rem monospace; white-space: nowrap; }
.server-method { color: var(--muted); font: .65rem monospace; white-space: nowrap; }
.server-card:nth-child(2) .server-status { color: var(--accent-strong); border-color: var(--accent); }
.server-status-error { color: #e89d78; border-color: #9c493f; }
.server-status { display: inline-flex; align-items: center; gap: .4rem; }
.server-security-warning { display: inline-flex; color: #f2b544; cursor: help; }
.server-security-warning:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.server-autoconfigure { justify-self: start; padding: .55rem .8rem; font-size: .75rem; }
.server-setup { margin: 0; padding: .65rem; border-left: 2px solid var(--accent); color: var(--muted); font: .72rem monospace; }
.admin-grid, .admin-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.admin-form { display: grid; gap: .65rem; padding: 1rem; border: 1px solid var(--line); }
.admin-form input, .admin-form textarea, .admin-form select, .admin-user select { width: 100%; border: 1px solid var(--line); padding: .65rem; color: var(--ink); background: var(--field); font: 1rem Georgia, serif; }
.admin-form textarea { min-height: 4rem; resize: vertical; }
.admin-lists { grid-template-columns: 1.2fr .8fr; margin-top: 2rem; }
.admin-lists h3 { color: var(--accent-strong); }
.admin-node, .admin-user { display: grid; gap: .35rem; margin: .6rem 0; padding: .75rem; border-left: 2px solid var(--accent); background: rgba(0, 0, 0, .18); }
.admin-node span, .admin-user span { color: var(--muted); font-size: .85rem; }
.admin-forum { margin-left: 1rem; padding-top: .4rem; color: var(--ink); }
.admin-forum code { margin-left: .5rem; color: var(--muted); }
.admin-node-list, .admin-user-list { margin-top: 1.8rem; }
.admin-node-list h3, .admin-user-list h3 { margin: 0 0 .8rem; color: var(--accent-strong); font-size: 1.1rem; }
.admin-user-form { grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.node-editor-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(360px, 1.28fr); gap: 1rem; min-height: 520px; }
.node-browser { overflow: auto; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.node-browser header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--accent-strong); }
.node-browser header div { display: flex; gap: .35rem; }
.node-browser header button { width: 1.7rem; height: 1.7rem; padding: 0; color: var(--accent-strong); background: transparent; }
.node-tree { padding: .5rem 0; }
.tree-category { border-bottom: 1px solid rgba(101, 83, 50, .25); }
.tree-node { display: flex; align-items: center; width: 100%; gap: .5rem; padding: .6rem .8rem; border: 0; color: var(--muted); background: transparent; text-align: left; font: .82rem Arial, sans-serif; }
.tree-node:hover, .tree-node:focus { color: var(--ink); background: rgba(255, 255, 255, .06); }
.tree-node span { width: 1rem; color: var(--accent-strong); text-align: center; }
.tree-category-node { color: var(--ink); font-weight: 700; }
.tree-children { padding: 0 0 .35rem 1.25rem; }
.tree-category.is-collapsed .tree-children { display: none; }
.tree-expander { display: inline-block; width: 1rem; color: var(--accent-strong); font-size: 1.1rem; }
.tree-node-count { min-width: 1.6rem; margin-left: auto; padding: .2rem .35rem; color: var(--muted); border: 1px solid var(--line); text-align: center; font: .68rem monospace; }
.tree-branch { margin-left: calc(var(--tree-depth, 0) * 1rem); }
.tree-forum-node { padding-top: .42rem; padding-bottom: .42rem; }
.node-editor { align-content: start; min-width: 0; padding: 1.4rem; }
.node-editor-header { display: flex; align-items: start; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.node-editor-header h3 { margin: .45rem 0 0; color: var(--ink); font-size: 1.5rem; }
.node-id { color: var(--muted); font: .7rem monospace; }
.node-editor label { display: grid; gap: .35rem; color: var(--muted); font: .72rem monospace; }
.node-editor input, .node-editor textarea, .node-editor select { width: 100%; border: 1px solid var(--line); padding: .7rem; color: var(--ink); background: var(--field); font: .95rem Arial, sans-serif; }
.node-editor textarea { min-height: 8rem; resize: vertical; }
.node-editor-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.checkbox-field { display: flex !important; align-items: center; gap: .55rem !important; padding-bottom: .7rem; }
.checkbox-field input { width: auto; }
.danger-button { color: #ffb0a2; border-color: #9c493f; background: transparent; }
.node-empty { display: grid; place-content: center; min-height: 300px; padding: 2rem; border: 1px dashed var(--line); color: var(--muted); text-align: center; }
.node-empty strong { color: var(--ink); font: 1.25rem Arial, sans-serif; }
.node-empty p { font-size: .85rem; }
.user-form-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.user-form-fields input, .user-form-fields select { min-width: 0; border: 1px solid var(--line); padding: .65rem; color: var(--ink); background: var(--field); font: .9rem Georgia, serif; }
.admin-overview { max-width: 620px; padding: 1.4rem; border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .04); }
.admin-overview strong { color: var(--ink); font: 1.3rem Georgia, serif; }
.admin-overview p { color: var(--muted); line-height: 1.6; }
.theme-chip { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-strong); font: .72rem monospace; }
.theme-chip i { width: 1rem; height: 1rem; background: var(--accent); }
code { color: var(--accent-strong); }
@media (max-width: 640px) {
  main { padding-top: 1.5rem; }
  .topbar { align-items: flex-start; }
  .topbar { min-height: 100px; padding: 1rem; }
  .site-brand { font-size: 1.9rem; }
  .site-brand img { width: min(18rem, 58vw); max-height: 4rem; }
  .site-controls { align-items: flex-end; flex-direction: column; gap: .35rem; }
  .theme-control { flex-direction: column; align-items: flex-end; gap: .35rem; }
  .forum-masthead { align-items: start; margin-top: 6vh; }
  .forum-masthead-mark { width: 4rem; height: 4rem; }
  .forum-index-header { align-items: start; flex-direction: column; }
  .forum-row { grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; }
  .forum-row-meta { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth-modal { height: max-content; min-height: 0; }
  .auth-message.email-alert { grid-column: 1; width: 100%; }
  .server-grid { grid-template-columns: 1fr; }
  .auth-message.email-alert { width: auto; margin-left: 0; white-space: normal; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-nav nav { grid-template-columns: repeat(2, 1fr); }
  .admin-grid, .admin-lists, .user-form-fields { grid-template-columns: 1fr; }
  .admin-user-form { grid-template-columns: 1fr; }
  .node-editor-layout { grid-template-columns: 1fr; }
  .node-browser { max-height: 360px; }
  .forum-nav { padding: 0 .5rem; overflow-x: auto; }
  .forum-nav a { white-space: nowrap; }
  .forum-footer { grid-template-columns: 1fr; }
  .thread-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .thread-meta { display: none; }
  .composer-footer { align-items: stretch; flex-direction: column; }
}

/* Chat workspace */
.profile-modal { width: min(68rem, 96vw); height: min(850px, calc(100dvh - 7rem)); padding: 1.5rem 1rem 1rem; box-sizing: border-box; overflow: hidden; }
.profile-modal .profile-modal-body { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.profile-modal-panel:not(.message-app):not([hidden]) { min-height: 0; overflow-y: auto; }
.profile-modal-body > h3 { flex-shrink: 0; }
.profile-modal h3[data-own-profile] { font-size: 1rem; margin: 0 2rem .6rem .4rem; }
.profile-modal .profile-modal-tabs { flex-shrink: 0; margin-bottom: .6rem; }
.message-app:not([hidden]) { flex: 1; min-height: 0; font-family: Arial, sans-serif; }
.message-layout { display: grid; grid-template-columns: minmax(15rem, 32%) minmax(0, 1fr); height: 100%; min-height: 22rem; border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; background: var(--page); }
.message-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.message-layout svg { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.message-layout button { cursor: pointer; font: inherit; color: var(--ink); }
.message-layout button:disabled { opacity: .45; cursor: default; }
.message-layout button:focus-visible, .message-layout input:focus-visible, .message-layout textarea:focus-visible { outline: 2px solid #36bda1; outline-offset: -2px; }
.message-layout .message-toolbar { padding: 1rem; margin: 0; min-height: 2rem; }
.message-layout .message-toolbar > strong { font-size: 1.4rem; letter-spacing: -.04em; }
.message-toolbar [data-keys] { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; font-size: .75rem; color: var(--muted); }
.message-layout .message-compose-to { display: flex; gap: .3rem; margin: 0 .75rem .8rem; }
.message-compose-to label { position: relative; flex: 1; min-width: 0; }
.message-compose-to label > svg { position: absolute; left: .65rem; top: .7rem; color: var(--muted); width: 1rem; height: 1rem; }
.message-layout .message-compose-to input { width: 100%; box-sizing: border-box; border: 0; border-radius: .6rem; background: color-mix(in srgb, var(--ink) 7%, var(--page)); color: var(--ink); padding: .8rem .5rem .8rem 2.1rem; font-size: .78rem; }
.message-layout .message-compose-to button { display: grid; place-items: center; padding: .5rem; border: 0; border-radius: .5rem; background: transparent; color: #36bda1; }
.message-layout .message-conversations { display: flex; flex-direction: column; flex: 1; overflow-y: auto; margin: 0; gap: 0; }
.message-layout .message-conversation { display: flex; align-items: center; gap: .7rem; width: 100%; padding: 1rem .8rem; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); border-radius: 0; }
.message-layout .message-conversation[hidden] { display: none; }
.message-layout .message-conversation:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.message-layout .message-conversation.is-active { background: color-mix(in srgb, #36bda1 14%, var(--page)); }
.message-avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, #36bda1 22%, var(--page)); color: #73dbc5; font-size: 1.15rem; font-weight: 600; }
.message-contact { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.message-contact strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-contact > span, .message-conversation time { font-size: .7rem; color: var(--muted); }
.message-conversation time { align-self: flex-start; padding-top: .2rem; }
.message-layout .message-key-lock { width: .85rem; height: .85rem; }
.message-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 0) 0 0 / 22px 22px, var(--page); }
.message-chat-header { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.message-chat-header > div { display: grid; gap: .3rem; flex: 1; min-width: 0; }
.message-chat-header strong { font-size: .95rem; overflow-wrap: anywhere; }
.message-chat-header span:not(.message-avatar) { font-size: .7rem; color: var(--muted); }
.message-chat-header [data-inbox] { border: 0; background: transparent; padding: .3rem; display: grid; place-items: center; }
.message-chat-notices { padding: 0 1rem; max-height: 30%; overflow: auto; flex-shrink: 0; }
.message-chat-notices .message-mode { border: 0; text-align: center; padding: .45rem; margin: .3rem 0 !important; font-size: .7rem; }
.message-chat-notices .message-security { font-size: .7rem; text-align: center; margin: 0 0 .35rem; color: var(--muted); }
.message-chat-notices .message-security code { font-size: .65rem; }
.message-layout .message-history { flex: 1; min-height: 0; max-height: none; gap: .4rem; margin: 0; padding: 1rem 1.3rem; overscroll-behavior: contain; }
.message-layout .private-message { position: relative; max-width: 82%; border: 0; border-radius: .1rem .7rem .7rem .7rem; padding: .6rem .75rem .35rem; background: color-mix(in srgb, var(--ink) 9%, var(--page)); box-shadow: 0 1px 2px #0002; }
.message-layout .private-message.is-sent { background: color-mix(in srgb, #168d70 35%, var(--page)); border-radius: .7rem .1rem .7rem .7rem; }
.message-layout .private-message.is-invalid { outline: 1px solid #e68585; }
.message-layout .private-message p { font-size: .9rem; line-height: 1.45; margin: 0; }
.message-layout .private-message small { display: block; text-align: right; margin-top: .25rem; font-size: .65rem; }
.message-receipt { white-space: nowrap; }
.message-receipt.is-read { color: #64c9f4; }
.message-day { align-self: center; padding: .35rem .7rem; margin: .4rem 0 .7rem; border-radius: .45rem; background: var(--panel); color: var(--muted); font-size: .68rem; box-shadow: 0 1px 2px #0001; }
.message-layout .message-compose { display: flex; flex-shrink: 0; gap: .65rem; align-items: flex-end; margin: 0; padding: .7rem .9rem; background: var(--panel); }
.message-compose > label { flex: 1; min-width: 0; }
.message-layout .message-compose textarea { min-height: 2.7rem; max-height: 9rem; padding: .75rem 1rem; resize: none; border: 0; border-radius: 1.3rem; background: color-mix(in srgb, var(--ink) 6%, var(--page)); color: var(--ink); font: .9rem/1.3 Arial, sans-serif; }
.message-layout .message-compose > button { border: 0; border-radius: 50%; width: 2.7rem; height: 2.7rem; padding: .65rem; flex-shrink: 0; display: grid; place-items: center; color: #092c22; background: #36bda1; }
.message-layout [data-message-status]:empty { display: none; }
.message-layout [data-message-status]:not(:empty) { padding: .5rem 1rem; background: var(--panel); font-size: .8rem; }
.message-layout [data-more], .message-layout [data-older] { border: 0; background: var(--panel); color: #73dbc5; padding: .6rem; font-size: .75rem; }
.message-layout .message-list-empty, .message-layout .message-search-empty { padding: 1rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.message-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: 1rem; }
.message-welcome-icon { display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #36bda1 10%, transparent); width: 6rem; height: 6rem; color: #36bda1; }
.message-welcome-icon svg { width: 3rem; height: 3rem; }
.message-welcome h3 { margin: 0; font: 1.5rem Arial, sans-serif; }
.message-welcome p, .message-welcome small { color: var(--muted); line-height: 1.5; font-size: .85rem; }
.message-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px) {
  .profile-modal { padding: 1.4rem .35rem .35rem; width: 98vw; height: calc(100dvh - 6rem); }
  .message-layout { grid-template-columns: 1fr; min-height: 0; }
  .message-layout:not(.has-conversation) .message-chat, .message-layout.has-conversation .message-sidebar { display: none; }
  .message-sidebar { border-right: 0; }
  .message-layout .message-history { padding: .6rem; }
  .message-layout .private-message { max-width: 88%; }
  .message-chat-header { padding: .6rem; }
  .message-chat-notices { padding: 0 .5rem; }
  .message-layout .message-compose { padding: .5rem; }
  .profile-modal .profile-modal-tab { padding: .5rem .65rem; font-size: .8rem; }
}
.profile-modal-tabs { scrollbar-width: none; }
.profile-modal-tabs::-webkit-scrollbar { display: none; }
.message-layout { scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent; scrollbar-width: thin; }
.message-unread-badge { display: inline-block; min-width: 1.25rem; margin-left: .4rem; padding: .15rem .35rem; border-radius: 1rem; background: #36bda1; color: #092c22; font-size: .7rem; line-height: 1.2; text-align: center; vertical-align: middle; }
.message-member-suggestions { flex-shrink: 0; max-height: 18rem; overflow-y: auto; margin: 0 .75rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--page); box-shadow: 0 4px 16px #0002; }
.message-member-suggestions button { width: 100%; display: flex; align-items: center; gap: .7rem; border: 0; padding: .65rem; background: transparent; text-align: left; }
.message-member-suggestions button:hover, .message-member-suggestions button[aria-selected="true"] { background: color-mix(in srgb, #36bda1 18%, var(--page)); }
.message-member-suggestions .message-avatar { width: 2rem; height: 2rem; font-size: .9rem; }

/* Separate forum totals and thread activity */
.forum-statistics { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; flex-shrink: 0; }
.forum-stat { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 3.5rem; color: var(--muted); font: .7rem Arial, sans-serif; white-space: nowrap; }
.forum-stat strong { color: var(--ink); font: 1.1rem Arial, sans-serif; font-variant-numeric: tabular-nums; }
.forum-row { grid-template-columns: 2.5rem minmax(0, 1fr) 11rem 17rem; }
/* Reserve alert space so live updates never wrap or move the counters. */
.forum-row-count, .thread-row-count { position: relative; padding-top: 1.4rem; flex-wrap: nowrap; }
.forum-row-count > .forum-row-alert, .thread-row-count > .forum-row-alert { position: absolute; top: 0; right: 0; pointer-events: none; }
.thread-row { grid-template-columns: 2rem minmax(0, 1fr) 14rem; }
.thread-meta { gap: .6rem; }
@media (max-width: 1000px) {
  .forum-row { grid-template-columns: 2rem minmax(0, 1fr) 10rem; }
  .forum-row-meta { grid-column: 2 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 600px) {
  .forum-row, .thread-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .forum-row-count { grid-column: 2; justify-content: flex-start; }
  .forum-row-count > .forum-row-alert, .thread-row-count > .forum-row-alert { right: auto; left: 0; }
  .forum-row-meta { display: grid; }
  .thread-meta { grid-column: 2; display: flex; align-items: flex-start; text-align: left; }
  .forum-statistics { gap: 1rem; }
  .forum-stat { align-items: flex-start; }
}