/* Visual parity layer for the original Vue/Tailwind application. */
:root {
  color-scheme: light;
  --page-bg: #f5f5f4;
  --text: #1c1917;
  --muted: #57534e;
  --faint: #78716c;
  --line: #d6d3d1;
  --panel-border: rgba(125, 211, 252, .70);
  --panel-bg: linear-gradient(135deg, rgba(255,255,255,.95), rgba(224,242,254,.72));
  --inner-border: rgba(199, 210, 254, .80);
  --inner-bg: linear-gradient(135deg, rgba(238,242,255,.80), rgba(224,242,254,.70));
  --header-bg: rgba(255,255,255,.70);
  --header-border: rgba(125,211,252,.50);
  --header-panel: #f5f5f4;
  --brand: #312e81;
  --link: #3730a3;
  --input-bg: #fff;
  --input-border: #a8a29e;
  --button-bg: rgba(224,231,255,.70);
  --button-border: #a5b4fc;
  --button-text: #312e81;
  --chat-in: #fff;
  --chat-in-border: #d6d3d1;
  --chat-own: #0ea5e9;
  --chat-own-border: rgba(56,189,248,.80);
  --chat-own-text: #fff;
  --success: #047857;
  --danger: #be123c;
  font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #020617;
  --text: #f1f5f9;
  --muted: #cbd5e1;
  --faint: #94a3b8;
  --line: #334155;
  --panel-border: rgba(217,70,239,.30);
  --panel-bg: linear-gradient(135deg, rgba(30,41,59,.88), rgba(49,46,129,.72));
  --inner-border: rgba(6,182,212,.25);
  --inner-bg: linear-gradient(135deg, rgba(2,6,23,.62), rgba(30,58,138,.35));
  --header-bg: rgba(15,23,42,.70);
  --header-border: rgba(6,182,212,.25);
  --header-panel: #1e293b;
  --brand: #cffafe;
  --link: #cffafe;
  --input-bg: #020617;
  --input-border: #475569;
  --button-bg: rgba(6,182,212,.15);
  --button-border: rgba(34,211,238,.40);
  --button-text: #cffafe;
  --chat-in: #1e293b;
  --chat-in-border: #475569;
  --chat-own: rgba(14,116,144,.70);
  --chat-own-border: rgba(103,232,249,.20);
  --chat-own-text: #ecfeff;
  --success: #6ee7b7;
  --danger: #fecdd3;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--page-bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--page-bg); font-family: inherit; }
.background-layer { position: fixed; inset: 0; z-index: -10; pointer-events: none; background: radial-gradient(circle at 12% 12%,rgba(14,165,233,.18),transparent 36%),radial-gradient(circle at 86% 4%,rgba(236,72,153,.16),transparent 34%),radial-gradient(circle at 50% 100%,rgba(99,102,241,.15),transparent 45%),linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%); }
html[data-theme="dark"] .background-layer { background: radial-gradient(circle at 12% 12%,rgba(34,211,238,.22),transparent 36%),radial-gradient(circle at 86% 4%,rgba(236,72,153,.20),transparent 34%),radial-gradient(circle at 50% 100%,rgba(99,102,241,.18),transparent 45%),linear-gradient(180deg,#020617 0%,#111827 100%); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { color: inherit; font: inherit; }
button, summary { cursor: pointer; }
img { max-width: 100%; }
h1,h2,h3,p { overflow-wrap: anywhere; }

/* Header */
.site-header { border-bottom: 1px solid var(--header-border); background: var(--header-bg); backdrop-filter: blur(4px); }
.header-row { width: 100%; max-width: 1152px; min-height: 61px; margin: 0 auto; padding: 12px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--brand); font-size: 18px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 44px; height: 36px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #a5b4fc; border-radius: 8px; background: #eef2ff; }
html[data-theme="dark"] .brand-mark { border-color: rgba(103,232,249,.40); background: rgba(34,211,238,.10); }
.brand-mark svg { width: 100%; height: 24px; }
.site-nav { flex: 1; display: flex; align-items: center; gap: 16px; color: #3730a3; font-size: 14px; }
html[data-theme="dark"] .site-nav { color: rgba(207,250,254,.85); }
.header-actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mailbox-link { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; color: var(--brand); }
.mailbox-link.has-unread { color: #fb923c; }
.mailbox-link svg { width: 36px; height: 36px; }
.mailbox-badge { position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f97316; color: #fff; font-size: 10px; font-weight: 700; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-pill { height: 38px; padding: 4px 8px; display: flex; align-items: center; gap: 8px; border: 1px solid #a5b4fc; border-radius: 999px; background: rgba(224,231,255,.70); color: var(--brand); }
html[data-theme="dark"] .account-pill { border-color: rgba(34,211,238,.40); background: rgba(6,182,212,.10); }
.account-pill .avatar { width: 28px; height: 28px; flex-basis: 28px; }
.account-pill > span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.account-dropdown { position: absolute; right: 0; top: 42px; z-index: 50; width: 288px; padding: 16px; border: 1px solid var(--panel-border); border-radius: 4px; background: var(--panel-bg); box-shadow: 0 20px 25px -5px rgba(0,0,0,.20); }
.account-dropdown h3 { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.settings-card,.settings-row { margin-top: 12px; padding: 8px 12px; border: 1px solid var(--inner-border); border-radius: 4px; background: var(--inner-bg); font-size: 12px; }
.settings-card { display: flex; flex-direction: column; }
.settings-card span { margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); }
.settings-button,.logout-button { width: 100%; margin-top: 12px; padding: 6px 8px; display: block; border: 1px solid var(--button-border); border-radius: 4px; background: var(--button-bg); color: var(--button-text); text-align: center; font-size: 12px; font-weight: 600; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-row strong,.settings-row small { display: block; }
.settings-row small { color: var(--faint); font-size: 11px; }
.settings-link:hover { text-decoration: none; filter: brightness(.98); }
.theme-switch { position: relative; width: 44px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: #a8a29e; }
.theme-switch span { position: absolute; top: 2px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
html[data-theme="dark"] .theme-switch { background: #10b981; }
html[data-theme="dark"] .theme-switch span { transform: translateX(17px); }
.logout-button { border-color: #fda4af; background: #fff1f2; color: #9f1239; }
html[data-theme="dark"] .logout-button { border-color: #9f1239; background: rgba(76,5,25,.40); color: #fecdd3; }
.auth-button { padding: 4px 12px; border: 1px solid var(--button-border); border-radius: 4px; background: var(--button-bg); color: var(--button-text); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.guest-theme { width: 28px; height: 28px; border: 1px solid var(--button-border); border-radius: 50%; background: var(--button-bg); color: var(--button-text); }

/* Page and shared panels */
.main-content { width: 100%; max-width: 1152px; margin: 0 auto; padding: 20px 32px; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; }
.main-content.home-main-grid { grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
.notice,.error { grid-column: 1 / -1; padding: 12px 16px; border: 1px solid; border-radius: 4px; font-size: 14px; }
.notice { border-color: #86efac; background: #f0fdf4; color: #166534; }
.error { border-color: #fda4af; background: #fff1f2; color: #9f1239; }
html[data-theme="dark"] .notice { border-color: #047857; background: rgba(6,78,59,.35); color: #d1fae5; }
html[data-theme="dark"] .error { border-color: #9f1239; background: rgba(76,5,25,.40); color: #fecdd3; }
.panel,.page-shell { border: 1px solid var(--panel-border); border-radius: 4px; background: var(--panel-bg); }
.page-shell { padding: 20px; }
.inner-panel { border: 1px solid var(--inner-border); border-radius: 4px; background: var(--inner-bg); }
.panel-header { min-height: 49px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: var(--header-panel); }
.panel-header h1 { margin: 0; font-size: 18px; }
.panel-header h2 { margin: 0; font-size: 14px; font-weight: 600; }
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-title-row h1 { margin: 0; font-size: 20px; }
.page-title-row p { margin: 4px 0 0; color: var(--faint); font-size: 14px; }
.page-header { padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.page-header h1 { margin: 0; font-size: 20px; }
.page-header p { margin: 4px 0 0; color: var(--faint); font-size: 14px; }
.action-button,.button,.voice-button,.danger-button,.small-control { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--button-border); border-radius: 4px; background: var(--button-bg); color: var(--button-text); font-size: 14px; font-weight: 600; }
.action-button:hover,.button:hover,.voice-button:hover,.small-control:hover { text-decoration: none; filter: brightness(.96); }
.button.small { padding: 6px 10px; font-size: 12px; }
.button.secondary { border-color: var(--line); background: transparent; color: var(--text); }
.danger-button { padding: 6px 12px; border-color: #fda4af; background: #fff1f2; color: #9f1239; font-size: 12px; }
html[data-theme="dark"] .danger-button { border-color: #be123c; background: rgba(76,5,25,.40); color: #fecdd3; }
.empty { margin: 0; padding: 20px 16px; color: var(--faint); font-size: 14px; }
.badge { min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f97316; color: #fff; font-size: 10px; font-weight: 700; }
.avatar { width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid #d6d3d1; border-radius: 50%; object-fit: cover; background: #fff; }
html[data-theme="dark"] .avatar { border-color: #475569; background: #0f172a; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; color: #4338ca; font-size: 10px; font-weight: 600; }
html[data-theme="dark"] .avatar-fallback { color: #a5f3fc; }

/* Home */
.home-column { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.home-sidebar { display: flex; flex-direction: column; gap: 16px; }
.board-list { display: flex; flex-direction: column; }
.board-row { padding: 16px; display: grid; grid-template-columns: minmax(0,1fr) 120px 120px; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.board-row:first-child { border-top: 0; }
.board-row h2 { margin: 0; font-size: 16px; font-weight: 600; }
.board-row p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.board-row > p { margin: 0; color: var(--text); }
.latest-list { margin: 0; padding: 0; list-style: none; }
.latest-list li { padding: 12px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.latest-list li:first-child { border-top: 0; }
.latest-list li div { min-width: 0; }
.latest-list .topic-title { text-decoration: underline; }
.latest-list li div span { margin-left: 8px; color: var(--faint); font-size: 12px; }
.latest-list time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.latest-list p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 12px; }
.latest-list p a { font-weight: 600; text-decoration: underline; }
.stats-panel { padding: 16px; }
.stats-panel h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.stats-panel ul { margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 14px; list-style: none; }
.stats-panel a { text-decoration: underline; }
.member-chat-notice { padding: 16px; border: 1px solid #a5b4fc; border-radius: 4px; background: #eef2ff; color: #312e81; font-size: 14px; }
.member-chat-notice a { font-weight: 600; text-decoration: underline; }
html[data-theme="dark"] .member-chat-notice { border-color: #0e7490; background: rgba(8,51,68,.30); color: #cffafe; }
.voice-panel { padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.voice-panel h3 { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.voice-panel p { margin: 5px 0 0; color: var(--faint); font-size: 12px; }
.voice-button { padding: 6px 12px; border-color: #86efac; background: rgba(209,250,229,.70); color: #064e3b; font-size: 12px; }
html[data-theme="dark"] .voice-button { border-color: rgba(52,211,153,.40); background: rgba(16,185,129,.15); color: #d1fae5; }
.voice-status { grid-column: 1 / -1; color: var(--faint); font-size: 12px; }

/* Board */
.topics-panel { overflow: hidden; }
.topics-panel > header { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.topics-panel ul { margin: 0; padding: 0; list-style: none; }
.topics-panel li { padding: 16px; border-top: 1px solid var(--line); }
.topics-panel li:first-child { border-top: 0; }
.thread-card { display: block; padding: 12px; border-radius: 12px; transition: background .15s; }
.thread-card:hover { background: rgba(255,255,255,.85); text-decoration: none; }
html[data-theme="dark"] .thread-card:hover { background: rgba(15,23,42,.45); }
.thread-grid { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: start; gap: 12px; }
.thread-thumb { width: 88px; height: 64px; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; object-fit: cover; background: #fff; }
.brand-thumb { padding: 8px; background: linear-gradient(155deg,#eef2ff,#e0f2fe); }
.brand-thumb svg { width: 100%; height: 100%; }
.thread-card h2 { margin: 0; font-size: 20px; }
.thread-preview { max-height: 48px; margin: 8px 0 0; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 24px; }
.thread-byline { margin-top: 8px; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; }
.author-link { text-decoration: underline; }

/* Topic and rendered content */
.topic-heading { margin-bottom: 16px; }
.section-kicker { margin: 0 0 8px; color: var(--faint); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.section-kicker a { text-decoration: underline; }
.topic-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.topic-title-row h1 { margin: 0; font-size: 20px; }
.author-line { margin-top: 6px; display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; }
.author-line a { text-decoration: underline; }
.anonymous-notice { margin-bottom: 16px; padding: 8px 12px; border: 1px solid #fcd34d; border-radius: 4px; background: #fffbeb; color: #78350f; font-size: 14px; }
html[data-theme="dark"] .anonymous-notice { border-color: rgba(217,119,6,.60); background: rgba(120,53,15,.30); color: #fef3c7; }
.admin-topic-bar { margin-bottom: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--inner-bg); font-size: 12px; }
.admin-topic-bar form,.admin-topic-bar label { display: flex; align-items: center; gap: 7px; }
.topic-content,.forum-reply,.reply-form { padding: 16px; }
.content-actions { margin-top: 12px; }
.owner-actions { margin: 8px 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 7px; color: var(--faint); font-size: 12px; }
.owner-actions a { text-decoration: underline; }
.owner-actions form,.forum-reply footer form { display: inline; }
.owner-actions button,.forum-reply footer button { padding: 0; border: 0; background: transparent; text-decoration: underline; }
.reply-section { margin-top: 16px; }
.reply-section > h2 { margin: 0 0 12px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.reply-list { display: flex; flex-direction: column; gap: 12px; }
.forum-reply.reply-depth-1 { margin-left: 18px; }
.forum-reply.reply-depth-2 { margin-left: 36px; }
.forum-reply.reply-depth-3 { margin-left: 54px; }
.forum-reply.reply-depth-4 { margin-left: 72px; }
.forum-reply.highlight { outline: 2px solid #f59e0b; box-shadow: 0 0 0 2px rgba(217,119,6,.20); }
.forum-reply header { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reply-number { color: var(--faint); font-size: 11px; }
.forum-reply footer { margin-top: 12px; display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.forum-reply footer > a { text-decoration: underline; }
.forum-reply details { position: relative; }
.forum-reply details[open] { z-index: 60; }
.forum-reply details form { position: absolute; right: 0; top: 28px; z-index: 60; min-width: 260px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); box-shadow: 0 8px 32px rgba(0,0,0,.18); backdrop-filter: blur(6px); }
.forum-reply details form input { width: 100%; }
.forum-reply details form button { align-self: flex-end; }
.reply-form { margin-top: 16px; }
.forum-reply > .reply-form { margin-top: 12px; background: var(--panel-bg); }
.reply-form h2 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; }
.editor-footer { display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 12px; }
.editor-footer a { text-decoration: underline; }
.reply-context { padding: 6px 8px; border: 1px solid #86efac; border-radius: 4px; background: #f0fdf4; color: #166534; font-size: 12px; }
html[data-theme="dark"] .reply-context { border-color: #047857; background: rgba(6,78,59,.25); color: #a7f3d0; }
.reply-context [data-chat-reply-cancel] { margin-left: 6px; padding: 0; border: 0; background: transparent; text-decoration: underline; }
.prose { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; }
.prose blockquote { margin-left: 0; padding-left: 12px; border-left: 3px solid #789922; color: #789922; }
.prose pre { padding: 10px; overflow-x: auto; border-radius: 4px; background: #111827; color: #e5e7eb; }
.forum-preview { color: var(--muted); font-size: 14px; line-height: 24px; overflow-wrap: anywhere; }
.forum-preview h1,.forum-preview h2,.forum-preview h3,.forum-preview h4,.forum-preview h5,.forum-preview h6 { margin: .55rem 0 .4rem; line-height: 1.25; }
.forum-preview h1 { font-size: 1.4rem; }.forum-preview h2 { font-size: 1.2rem; }.forum-preview h3 { font-size: 1.05rem; }
.forum-preview p { margin: .45rem 0; }
.forum-preview ul,.forum-preview ol { margin: .45rem 0 .45rem 1.6rem; padding: 0; list-style-position: outside; }
.forum-preview li { margin: .2rem 0; padding-left: .15rem; }
.forum-preview blockquote { margin: .45rem 0; color: #789922; }
.forum-preview blockquote p::before { content: ">"; margin-right: .2rem; }
.forum-preview pre { margin: .6rem 0; padding: .65rem; overflow-x: auto; border-radius: 4px; background: #111827; color: #e5e7eb; }
.forum-preview code { padding: .1rem .3rem; border-radius: 3px; background: rgba(100,116,139,.25); }
.forum-preview pre code { padding: 0; background: transparent; }
.forum-preview a { text-decoration: underline; }
.forum-preview table { width: 100%; margin: .6rem 0; border-collapse: collapse; }
.forum-preview th,.forum-preview td { padding: .3rem .45rem; border: 1px solid rgba(100,116,139,.45); text-align: left; }
.post-image,.forum-preview img { width: auto; max-width: 100%; max-height: 32rem; margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; object-fit: contain; background: var(--input-bg); }
.pagination { margin: 12px 0; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.80); font-size: 14px; }
html[data-theme="dark"] .pagination { background: rgba(15,23,42,.50); }
.pagination a { text-decoration: underline; }

/* Forms and composer */
.stack,.compose-form { display: flex; flex-direction: column; gap: 12px; }
.stack label:not(.check),.compose-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
input,textarea,select { width: 100%; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-size: 14px; }
textarea { resize: vertical; }
input:focus,textarea:focus,select:focus { outline: 2px solid rgba(14,165,233,.35); outline-offset: 1px; }
.check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.check input,.admin-topic-bar input,.image-control input { width: auto; }
.form-actions { display: flex; align-items: center; gap: 12px; }
.file-label { display: flex; flex-direction: column; gap: 5px; }
.inline { display: inline; }
.inline-form { display: flex; align-items: center; gap: 8px; }
.inline-form input { flex: 1; }
.image-control { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--header-panel); font-size: 12px; font-weight: 600; cursor: pointer; }
.image-control input { display: none; }
.editor-shell { overflow: hidden; }
.editor-toolbar { padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.editor-toolbar button { padding: 4px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: transparent; font-size: 12px; }
.editor-toolbar button:hover,.editor-toolbar button.active { background: rgba(214,211,209,.55); }
html[data-theme="dark"] .editor-toolbar button:hover,html[data-theme="dark"] .editor-toolbar button.active { background: #1e293b; }
.editor-tabs { margin-left: auto; }
.editor-body { padding: 12px; }
.editor-body textarea { min-height: 336px; }
.markdown-help { display: inline-block; margin-top: 8px; color: var(--faint); font-size: 12px; text-decoration: underline; }
.editor-status { padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.auth-card,.form-card,.narrow { width: 100%; max-width: 680px; margin: 0 auto; padding: 20px; }
.auth-card { max-width: 440px; }
.auth-card h1,.form-card h1,.narrow h1 { margin-top: 0; font-size: 20px; }
.auth-card > p { font-size: 14px; }
.hint { color: var(--faint); font-size: 12px; font-weight: 400; }
.warning { margin-bottom: 12px; padding: 12px; border: 1px solid #fcd34d; border-radius: 4px; background: #fffbeb; color: #78350f; }
html[data-theme="dark"] .warning { border-color: #b45309; background: rgba(120,53,15,.30); color: #fef3c7; }

/* Account, directory, activity */
.account-page { display: flex; flex-direction: column; gap: 16px; }
.profile-header { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.profile-identity { display: flex; min-width: 0; flex: 1; align-items: center; gap: 16px; }
.profile-identity .avatar { width: 80px; height: 80px; flex-basis: 80px; border-radius: 4px; }
.profile-identity h1 { margin: 0; font-size: 20px; }
.profile-identity p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.account-section { padding: 16px; }
.account-section h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.account-section > p { color: var(--muted); font-size: 14px; }
.account-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; list-style: none; }
.account-list li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.80); font-size: 14px; }
html[data-theme="dark"] .account-list li { background: rgba(15,23,42,.50); }
.account-list li > a { font-weight: 600; text-decoration: underline; }
.account-list p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.view-all { display: inline-block; margin-top: 12px; font-size: 14px; text-decoration: underline; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compact-list { display: flex; flex-direction: column; }
.compact-list article { padding: 12px; border-top: 1px solid var(--line); }
.compact-list article:first-child { border-top: 0; }
.compact-list h2,.compact-list h3 { margin: 0 0 4px; font-size: 14px; }
.compact-list p { margin: 0; color: var(--muted); font-size: 12px; }
.compact-list time,.compact-list small { color: var(--faint); font-size: 11px; }
.filter-bar { padding: 12px 16px; display: grid; grid-template-columns: 1fr 180px auto; gap: 8px; border-bottom: 1px solid var(--line); }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; }
.member-card { padding: 16px; display: flex; gap: 12px; border-bottom: 1px solid var(--line); }
.member-card:nth-child(odd) { border-right: 1px solid var(--line); }
.member-card .avatar { width: 48px; height: 48px; flex-basis: 48px; }
.member-card h2 { margin: 0; font-size: 16px; }
.member-card p { margin: 3px 0; color: var(--muted); font-size: 12px; }
.member-card small { color: var(--faint); }
.online { color: #059669; font-size: 11px; font-weight: 700; }
.breadcrumbs { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 12px; }
.breadcrumbs a { text-decoration: underline; }

/* Mailbox and PM */
.mailbox-inner { overflow: hidden; }
.mailbox-inner > .pagination { margin: 12px; }
.mailbox-toolbar { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mailbox-search-form { display: flex; align-items: center; gap: 8px; }
.mailbox-search-form input[type="search"] { flex: 1; min-width: 0; }
.mailbox-search-form a { flex-shrink: 0; color: var(--faint); font-size: 13px; text-decoration: underline; }
.mailbox-list { display: flex; flex-direction: column; }
.mailbox-item { padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); }
.mailbox-item:first-child { border-top: 0; }
html[data-theme="dark"] .mailbox-item { background: transparent; }
.mailbox-item.unread { background: #fff7ed; }
html[data-theme="dark"] .mailbox-item.unread { background: rgba(124,45,18,.18); }
.mailbox-item h3 { margin: 0 0 3px; font-size: 14px; font-weight: 600; }
.mailbox-item h3 a { text-decoration: underline; }
.mailbox-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.grow { flex: 1; min-width: 0; }
.inbox-kind { display: inline-flex; align-items: center; padding: 3px 8px; flex-shrink: 0; margin-top: 1px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.inbox-kind-pm { border: 1px solid #a5b4fc; background: #eef2ff; color: #4338ca; }
.inbox-kind-forum { border: 1px solid #6ee7b7; background: #ecfdf5; color: #065f46; }
html[data-theme="dark"] .inbox-kind-pm { border-color: rgba(99,102,241,.45); background: rgba(99,102,241,.12); color: #c7d2fe; }
html[data-theme="dark"] .inbox-kind-forum { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.10); color: #6ee7b7; }
.inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.inbox-meta time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.unread-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #f97316; }
.inbox-actor { font-weight: 600; }
.inbox-preview-text { color: var(--faint); }
.pm-messages { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pm-message { max-width: 82%; padding: 8px 12px; align-self: flex-start; border: 1px solid var(--chat-in-border); border-radius: 16px; background: var(--chat-in); font-family: Inter,"SF Pro Text","Segoe UI",Arial,sans-serif; font-size: 13px; }
.pm-message.mine { align-self: flex-end; border-color: var(--chat-own-border); background: var(--chat-own); color: var(--chat-own-text); }
.pm-message header { margin-bottom: 4px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pm-message time { opacity: .75; font-weight: 400; text-transform: none; }
.add-participant { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12px; }
.pm-compose-form { padding: 16px; border-top: 1px solid var(--line); }

/* Chat */
.home-chat,.chat-shell { overflow: hidden; }
.chat-panel-header > div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-panel-header h2 { white-space: nowrap; }
.chat-lobbies { padding: 0; display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; border: 0; }
.chat-lobbies a { padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--input-bg); font-size: 12px; font-weight: 600; }
.chat-lobbies a.active { border-color: #818cf8; background: #e0e7ff; color: #312e81; }
html[data-theme="dark"] .chat-lobbies a.active { border-color: rgba(34,211,238,.50); background: rgba(6,182,212,.15); color: #cffafe; }
.chat-header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-shell > .chat-lobbies { padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chat-header h1 { margin: 0; font-size: 18px; }
.chat-header p { margin: 3px 0 0; color: var(--faint); font-size: 12px; }
.chat-messages { height: 520px; min-height: 220px; padding: 12px; overflow-y: auto; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.75); color: var(--muted); font-family: Inter,"SF Pro Text","Segoe UI","Helvetica Neue",Arial,sans-serif; font-size: 13px; letter-spacing: .01em; }
html[data-theme="dark"] .chat-messages { background: rgba(2,6,23,.40); color: #e2e8f0; }
.chat-message { margin-bottom: 8px; display: flex; align-items: flex-end; justify-content: flex-start; gap: 8px; }
.chat-message.mine { justify-content: flex-end; }
.chat-avatar { width: 28px; flex: 0 0 28px; }
.chat-message.mine .chat-avatar { display: none; }
.chat-message .avatar { width: 28px; height: 28px; flex-basis: 28px; }
.chat-bubble { position: relative; max-width: 92%; min-width: 0; padding: 8px 12px; border: 1px solid var(--chat-in-border); border-radius: 16px; background: var(--chat-in); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.chat-message.mine .chat-bubble { border-color: var(--chat-own-border); background: var(--chat-own); color: var(--chat-own-text); }
.chat-bubble header { margin-bottom: 4px; padding-right: 18px; opacity: .75; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.chat-content { color: inherit; font-size: 13px; line-height: 20px; }
.chat-content p { margin: 0; }
.chat-parent { margin-top: 5px; display: block; color: inherit; opacity: .72; font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
.chat-parent:hover { color: inherit; opacity: 1; }
.chat-content img { width: auto; max-width: 100%; max-height: 288px; margin-top: 8px; border: 1px solid var(--line); border-radius: 4px; object-fit: contain; }
.chat-actions { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11px; }
.chat-actions form { display: inline; }
.chat-actions button,.chat-actions summary { padding: 1px 4px; border: 0; background: transparent; color: inherit; opacity: .75; font-size: 11px; }
.chat-inline-edit { width: min(520px,70vw); display: grid; gap: 6px; }
.chat-inline-editor { width: 100%; min-height: 72px; padding: 6px 8px; resize: vertical; font-size: 13px; line-height: 20px; }
.chat-inline-edit-actions { display: flex; justify-content: flex-end; gap: 5px; }
.chat-actions .link-danger { color: var(--danger); opacity: 1; }
.chat-message.mine .chat-actions .link-danger { color: inherit; text-decoration: underline; }
.chat-compose { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chat-compose > input[name="content"],.chat-compose > textarea { min-width: 180px; flex: 1; }
.chat-compose > input[type="url"] { flex: 1; }
.chat-compose .reply-context { width: 100%; }
.chat-compose .image-control { flex: 0 0 auto; }
.action-button { flex: 0 0 auto; }
.file-button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.file-button input { display: none; }
.typing,.voice-status { color: var(--faint); font-size: 12px; }

/* Administration */
.admin-page > h1 { margin: 0 0 16px; font-size: 24px; }
.admin-layout { display: grid; grid-template-columns: minmax(300px,420px) minmax(0,1fr); align-items: start; gap: 24px; }
.admin-column { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.admin-section { padding: 16px; }
.admin-section h2 { margin: 0 0 12px; font-size: 16px; }
.admin-section h3 { margin: 12px 0 6px; font-size: 13px; }
.admin-section p { color: var(--muted); font-size: 13px; }
.admin-visibility > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-visibility p { margin: 0; }
.admin-visibility > small { display: block; margin-top: 8px; color: var(--faint); }
.toggle-switch { position: relative; width: 44px; height: 24px; flex: 0 0 44px; }
.toggle-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-switch span { position: absolute; inset: 0; border-radius: 999px; background: #a8a29e; cursor: pointer; transition: background .15s; }
.toggle-switch span::after { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); content: ""; transition: transform .15s; }
.toggle-switch input:checked + span { background: #4f46e5; }
.toggle-switch input:checked + span::after { transform: translateX(20px); }
.toggle-switch input:focus-visible + span { outline: 2px solid #38bdf8; outline-offset: 2px; }
html[data-theme="dark"] .toggle-switch input:checked + span { background: #0891b2; }
.admin-button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-button-row > * { flex: 1 1 150px; }
.admin-button-row form { display: flex; gap: 6px; }
.admin-button-row button { flex: 1; }
.admin-danger { border-color: #dc2626; background: #dc2626; color: #fff; }
.admin-warning { border-color: #f59e0b; background: #f59e0b; color: #451a03; }
.admin-success { border-color: #059669; background: #059669; color: #fff; }
.admin-violet { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.admin-board-list,.pending-list,.thread-admin-list { margin: 0; padding: 0; list-style: none; }
.admin-board-list li,.pending-list > li,.thread-admin-list > li { padding: 10px 0; border-top: 1px solid var(--line); }
.admin-board-list li:first-child,.pending-list > li:first-child,.thread-admin-list > li:first-child { border-top: 0; }
.admin-board-list li,.thread-admin-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-board-list small,.pending-list small,.thread-admin-list small { display: block; color: var(--faint); }
.pending-list dl { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 3px 8px; margin: 8px 0; font-size: 12px; }
.pending-list dt { color: var(--faint); }.pending-list dd { margin: 0; overflow-wrap: anywhere; }
.admin-search { display: flex; gap: 8px; margin-bottom: 12px; }.admin-search input { flex: 1; }
.thread-admin-list > li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.admin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.admin-grid .form-card { width: auto; margin: 0; }
.admin-list { margin: 12px 0 0; padding: 0; list-style: none; }
.admin-list li { padding: 7px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); font-size: 12px; }
.admin-users article { padding: 16px; border-top: 1px solid var(--line); }
.admin-users header { display: flex; flex-direction: column; }
.application { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-size: 12px; }
.application dt { color: var(--faint); }.application dd { margin: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th,td { padding: 9px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--faint); font-size: 11px; text-transform: uppercase; }
.admin-controls { display: flex; flex-direction: column; gap: 6px; }
.admin-controls form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.admin-controls input:not([type="checkbox"]) { width: 130px; padding: 4px 6px; }
.admin-controls button { padding: 4px 7px; }
.link-danger { padding: 0; border: 0; background: transparent; color: var(--danger); }

@media (max-width: 900px) {
  .main-content.home-main-grid { grid-template-columns: minmax(0,1fr); }
  .home-sidebar { grid-row: auto; }
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .two-column { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header-row { padding: 12px 16px; }
  .site-nav { order: 3; width: 100%; flex-basis: 100%; }
  .main-content { padding: 20px 16px; }
  .account-pill > span { display: none; }
  .account-dropdown { right: -4px; width: min(288px,calc(100vw - 24px)); }
  .board-row { grid-template-columns: minmax(0,1fr); }
  .board-row > p { display: none; }
  .thread-grid { grid-template-columns: 1fr; }
  .thread-thumb { width: 100%; height: 64px; }
  .member-grid,.admin-grid { grid-template-columns: 1fr; }
  .member-card:nth-child(odd) { border-right: 0; }
  .filter-bar { grid-template-columns: 1fr; }
  .editor-status { align-items: flex-start; flex-direction: column; }
  .chat-panel-header > div { align-items: flex-start; flex-direction: column; }
  .chat-messages { height: 480px; }
  .chat-compose { align-items: stretch; }
  .chat-compose > input[name="content"],.chat-compose > textarea { width: 100%; flex-basis: 100%; }
  .profile-header { align-items: flex-start; flex-direction: column; }
  .pm-message { max-width: 92%; }
}