/* JLSource visual system. This sheet owns the shared layout; legacy sheets remain for older views. */
:root {
  color-scheme: dark;
  /* Aurora palette: indigo depth, electric cyan clarity and a warm coral accent. */
  --outer: #14213d;
  --page: #0b162b;
  --surface: #12233f;
  --surface-raised: #183252;
  --surface-hover: #214569;
  --line: #315474;
  --ink: #f4f8ff;
  --muted: #b2c7dc;
  --blue: #5be7ff;
  --blue-strong: #1688e8;
  --amber: #ffb86b;
  --danger: #ff8b92;
  --shadow: 0 12px 32px rgb(1 11 28 / 24%);
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="light"] {
  color-scheme: light;
  --page: #f6f8ff;
  --surface: #fff;
  --surface-raised: #eef3ff;
  --surface-hover: #e6f7ff;
  --line: #cdd9ed;
  --ink: #17233f;
  --muted: #536988;
  --blue: #087ea4;
  --amber: #b35c19;
  --danger: #b4324a;
  --shadow: 0 12px 32px rgb(31 52 91 / 10%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--outer);
  background-image: repeating-linear-gradient(135deg, #ffffff08 0 1px, transparent 1px 11px);
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.forum-frame { width: min(1600px, calc(100% - 64px)); min-height: 100vh; margin-inline: auto; background: var(--page); box-shadow: 0 0 50px #07152655; }
.shell { width: 100%; max-width: none; padding-inline: clamp(18px, 2vw, 30px); margin-inline: auto; }
.site-header, .site-footer, main { width: 100%; }
.site-header { background: #101e3b; color: #eef6ff; }
.community-banner, .community-banner picture { display: block; width: 100%; max-width: none; margin: 0; border-radius: 0; overflow: hidden; line-height: 0; }
.community-banner img { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 3 / 1; object-fit: contain; }
.nav-shell { width: 100%; min-height: 62px; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); padding: 4px clamp(18px, 2vw, 30px); border-bottom: 1px solid #294a70; }
.nav-shell .brand { position: relative; min-width: 0; flex: 0 0 auto; gap: 10px; padding-right: 14px; color: #f3f8ff; transition: color .18s ease, transform .18s ease; }
.nav-shell .brand::after { content: ""; position: absolute; right: 0; top: 20%; width: 1px; height: 60%; background: color-mix(in srgb, var(--blue) 28%, transparent); opacity: .72; transition: opacity .18s ease; }
.nav-shell .brand:hover { z-index: 1; color: var(--blue); transform: translateY(-1px); }
.nav-shell .brand:hover::after { opacity: 0; }
.nav-shell .brand-mark { width: 36px; height: 40px; font-size: 15px; background: linear-gradient(145deg, var(--blue-strong), #29b8e8); }
.nav-shell .brand-mark-image { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; border-radius: 50%; transition: transform .18s ease, filter .18s ease; }
.nav-shell .brand:hover .brand-mark-image { transform: scale(1.04); filter: drop-shadow(0 3px 8px rgb(91 231 255 / 24%)); }
.nav-shell .brand strong { font-size: 14px; letter-spacing: .01em; }
.nav-shell .brand small { font-size: 11px; margin: 0; color: #9bb3c9; }
.primary-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; min-width: 0; }
.primary-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 clamp(7px, 1vw, 15px); border-bottom: 3px solid transparent; border-radius: 7px 7px 0 0; color: #b9c9e7; white-space: nowrap; font-size: 13px; font-weight: 650; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.primary-nav a + a::before { content: ""; position: absolute; left: -3px; top: 25%; width: 1px; height: 50%; background: color-mix(in srgb, var(--blue) 28%, transparent); opacity: .72; transition: opacity .18s ease; }
.primary-nav a:hover { z-index: 1; transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 12px rgb(4 17 40 / 18%); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: #fff; background: #ffffff0c; border-bottom-color: var(--blue); }
.primary-nav a:hover::before, .primary-nav a[aria-current="page"]::before { opacity: 0; }
.primary-nav .vip-link { color: var(--amber); }
.primary-nav .vip-subscription-link { position: relative; align-self: center; min-height: 34px; margin-block: 9px; padding-inline: 13px; border: 1px solid #f8d27e; border-bottom-color: #9c5e18; border-radius: 8px; color: #3b2108 !important; background: linear-gradient(180deg, #ffe9a8 0%, #f6c862 42%, #c17a21 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 3px 0 #754718, 0 6px 14px rgb(183 118 32 / 24%); text-shadow: 0 1px 0 rgb(255 240 190 / 60%); transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.primary-nav .vip-subscription-link::after { content: ""; position: absolute; left: 12%; right: 12%; top: 4px; height: 1px; background: rgb(255 255 255 / 66%); opacity: .72; }
.primary-nav .vip-subscription-link:hover, .primary-nav .vip-subscription-link[aria-current="page"] { color: #2c1704 !important; background: linear-gradient(180deg, #fff1bd 0%, #ffd977 45%, #d89032 100%); border-color: #ffe9a8; border-bottom-color: #a9671d; box-shadow: inset 0 1px 0 rgb(255 255 255 / 86%), 0 4px 0 #754718, 0 9px 18px rgb(220 155 54 / 32%); filter: saturate(1.08); transform: translateY(-1px) scale(1.02); }
.primary-nav .mobile-nav-link { display: none; }
.nav-utilities { display: flex; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.theme-toggle { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #3c5f88; background: #1a3560; color: #fff; border-radius: 8px; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.theme-toggle:hover { z-index: 1; transform: translateY(-1px) scale(1.03); background: #234777; box-shadow: 0 4px 12px rgb(4 17 40 / 18%); }
.account-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.account-actions { position: relative; padding-left: 8px; }
.account-actions::before { content: ""; position: absolute; left: 0; top: 20%; width: 1px; height: 60%; background: color-mix(in srgb, var(--blue) 28%, transparent); opacity: .72; }
.account-actions > * { position: relative; }
.account-actions > * + *::before { content: ""; position: absolute; left: -3px; top: 25%; width: 1px; height: 50%; background: color-mix(in srgb, var(--blue) 28%, transparent); opacity: .72; transition: opacity .18s ease; }
.account-actions form { margin: 0; }
.account-link { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 9px; border: 0; background: none; color: #d8e6ff; font-size: 13px; font-weight: 650; white-space: nowrap; transition: transform .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.account-link:hover { z-index: 1; color: #fff; background: #ffffff0c; border-radius: 7px; transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 12px rgb(4 17 40 / 18%); }
.account-actions > *:hover::before { opacity: 0; }
.account-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.menu-toggle { display: none; width: 40px; height: 40px; padding: 9px; border: 1px solid #3c5f88; border-radius: 8px; background: #1a3560; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: #eaf3fd; }
main { min-height: 55vh; padding-top: 0; background: var(--page); }
.page { width: 100%; max-width: none; min-height: 55vh; margin: 0; padding: 32px clamp(18px, 2vw, 30px) 60px; background: var(--page); }
.page-narrow { width: min(100% - 36px, 700px); max-width: 700px; margin: 38px auto 60px; padding: 28px; }
.page.page-narrow { min-height: 0; }
.page-title, .page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 24px; }
.page-title h1, .page-heading h1, .page h1 { margin: 0 0 5px; color: var(--ink); font-size: clamp(27px, 2.3vw, 36px); font-weight: 740; letter-spacing: -.035em; line-height: 1.18; }
.page-title p, .page-heading p, .muted { color: var(--muted); margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-actions form { margin: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--muted); font-size: 13px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.thread-hero { position: relative; overflow: hidden; align-items: center; margin-bottom: 18px; padding: 24px 26px; border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line)); border-radius: 14px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 42%), linear-gradient(135deg, var(--surface) 0%, var(--surface-raised) 100%); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.thread-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--blue), #f59e0b); }
.thread-hero h1 { max-width: 820px; margin-top: 4px; }
.thread-hero .eyebrow { color: var(--blue); letter-spacing: .09em; }
.thread-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px !important; font-size: 13px; }
.thread-summary span { display: inline-flex; align-items: center; gap: 5px; }
.thread-summary span + span::before { content: "•"; color: var(--blue); margin-right: 5px; }
.thread-reply-cta { flex: 0 0 auto; box-shadow: 0 8px 18px rgba(21, 126, 232, .24); }
.thread-reply-cta span { margin-left: 6px; }
.thread-pagination-top { margin: 0 0 16px; padding: 10px 0; }
.button, .sign-in, button.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 9px 15px; border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--blue-strong)); border-radius: 8px; background: linear-gradient(135deg, var(--blue-strong), #20a9e6); box-shadow: none; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: normal; text-align: center; }
.button:hover, button.button:hover { color: #fff; background: linear-gradient(135deg, #0c73c9, var(--blue-strong)); border-color: var(--blue); }
.button-small { min-height: 34px; padding: 7px 11px; }
.button.ghost, .button.secondary { background: transparent; border-color: var(--line); color: var(--ink); }
.button.ghost:hover, .button.secondary:hover { background: var(--surface-hover); }
.button.danger { background: #753246; border-color: #a54c61; color: #fff; }
.button.danger:hover { background: #943b52; }
.welcome { width: 100%; margin: 0; padding: 46px 0 48px; background: radial-gradient(circle at 88% 15%, rgb(91 231 255 / 16%), transparent 30%), linear-gradient(115deg, #142a58, #10233f 65%, #1a3158); }
.welcome h1 { max-width: 720px; margin: 0 0 8px; color: #f5f9ff; font-size: clamp(28px, 3vw, 43px); line-height: 1.12; }
.welcome p { max-width: 690px; margin: 0 0 20px; color: #c3d6e9; font-size: 15px; }
.welcome .button span { margin: 0; font-size: inherit; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); gap: 22px; width: 100%; padding: 30px clamp(18px, 2vw, 30px) 54px; background: var(--page); }
.forum-index, .activity-rail { min-width: 0; }
.forum-index h2 { margin: 0 0 16px; color: var(--ink); font-size: clamp(24px, 2.2vw, 31px); }
.eyebrow { display: block; margin-bottom: 5px; color: var(--amber); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 14px; }
.section-heading h2 { margin: 0; }
.section-count { color: var(--muted); font-size: 12px; }
.activity-rail { padding-top: 47px; }
.forum-panel, .rail-panel, .thread-list, .post, .reply-box, .listing, .admin-stats, .admin-menu, .panel, .auth-card, .member-card, .admin-member, .notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.forum-panel, .rail-panel { margin: 0 0 20px; overflow: hidden; }
.forum-panel h3, .rail-panel h3 { margin: 0; padding: 15px 19px; background: var(--surface-raised); border-bottom: 1px solid var(--line); border-left: 3px solid var(--blue-strong); color: var(--ink); font-size: 15px; }
.rail-panel h3 span { color: var(--ink); margin-left: 4px; }
.forum-head { display: grid; grid-template-columns: minmax(0,1fr) 70px 70px minmax(100px,160px) 16px; gap: 12px; padding: 8px 18px; border-bottom: 1px solid #315474; background: linear-gradient(180deg, #183252 0%, #12233f 100%); color: #b2c7dc; font-size: 11px; }
.forum-panel .forum-head { background: linear-gradient(180deg, #183252 0%, #12233f 100%) !important; color: #b2c7dc !important; border-bottom-color: #315474 !important; }
.search-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.search-results-grid h2 { margin-top: 0; display: flex; justify-content: space-between; align-items: center; }
.result-count { color: var(--muted); font-size: 13px; font-weight: 500; }
.search-result { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
.search-result strong, .search-result small { display: block; }
.search-result small { color: var(--muted); margin-top: 4px; }
@media (max-width: 900px) { .search-results-grid { grid-template-columns: 1fr; } }
.forum-row, .forum-panel .forum-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 70px 70px minmax(100px,160px) 16px; gap: 12px; align-items: center; min-height: 82px; padding: 12px 18px; border-top: 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.forum-row:last-child { border-bottom: 0; }
.section-forum-panel .forum-head { grid-template-columns: minmax(0,1fr) 70px 70px 16px; }
.section-forum-panel .forum-row { grid-template-columns: 56px minmax(0,1fr) 70px 70px 16px; }
.forum-row:hover, .thread-row:hover, .recent-row:hover, .member-card:hover, .admin-menu a:hover { background: var(--surface-hover); }
.forum-panel .forum-icon, .forum-panel .forum-icon:has(.forum-image-icon), .forum-panel .forum-icon:has(.section-image-icon) { display: grid; place-items: center; width: 52px; height: 52px; min-width: 52px; min-height: 52px; overflow: hidden; border-radius: 10px; background: #1768ad !important; color: #fff; font-size: 25px; }
.forum-panel .forum-icon:has(.section-image-icon) { background: linear-gradient(145deg, #2189dc, #07549e) !important; border: 1px solid rgba(157, 220, 255, .8); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 12px rgba(0, 22, 58, .28); }
.forum-panel .forum-icon:has(img) { background: transparent !important; }
.forum-panel .forum-image-icon, .forum-panel .section-image-icon { display: block; width: 52px; height: 52px; min-width: 52px; min-height: 52px; object-fit: contain; border-radius: 10px; transform: none; mix-blend-mode: normal; }
/* The supplied section badges have a black matte around the artwork. Screen
   blending lets that matte inherit the forum surface while keeping the blue
   artwork and its highlights intact. */
.forum-panel .section-image-icon { width: 46px; height: 46px; border-radius: 9px; mix-blend-mode: screen; }
.forum-panel .forum-image-icon { border-radius: 50%; }
.forum-copy { min-width: 0; }
.forum-panel .forum-copy strong { display: block; color: var(--blue); font-size: 15px; font-weight: 680; white-space: normal; overflow-wrap: anywhere; }
.forum-panel .forum-copy small { display: block; color: var(--muted); font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.count, .latest, .chevron { color: var(--muted); }
.latest strong { color: var(--blue); }
.rail-panel dl { margin: 0; }
.rail-panel dl div { border-color: var(--line); }
.rail-panel dt { color: var(--muted); }
.rail-panel dd { margin: 0; color: var(--ink); }
.recent-row { border-color: var(--line); color: var(--ink); }
.recent-row strong { color: var(--blue); }
.contributor-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 15px; border-bottom: 1px solid var(--line); color: var(--ink); }
.contributor-row:last-child { border-bottom: 0; }
.contributor-row strong { color: var(--blue); font-size: 12px; white-space: nowrap; }
.empty, .empty-state { color: var(--muted); }
.empty-state { padding: 42px 24px; background: transparent; }
.empty-state strong { color: var(--ink); }
.avatar { flex: 0 0 auto; background: #265b87; }
.avatar.large { width: 62px; height: 62px; }
.page .panel { min-width: 0; padding: 22px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 14px; color: var(--ink); font-size: 19px; }
.panel p { display: block; padding: 0; border: 0; color: var(--ink); }
.panel small, small { color: var(--muted); }
.thread-list { overflow: hidden; }
.thread-list + .thread-list { margin-top: 18px; }
.thread-list-heading { padding: 9px 18px; border-bottom: 1px solid var(--line); background: var(--surface-raised); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.thread-list-sticky { border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }
.thread-list-sticky .thread-list-heading { border-left: 3px solid var(--amber); color: var(--amber); }
.thread-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 82px 74px minmax(100px,150px); gap: 12px; padding: 15px 18px; border-color: var(--line); color: var(--ink); }
.thread-row-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid var(--line); }
.thread-row-shell:last-child { border-bottom: 0; }
.thread-row-shell .thread-row { border-bottom: 0; }
.thread-row-delete { display: flex; align-items: center; padding: 0 14px 0 4px; background: var(--surface); }
.thread-row-delete button { white-space: nowrap; }
.thread-row > span:nth-child(2) { min-width: 0; }
.thread-row strong { color: var(--blue); overflow-wrap: anywhere; }
.thread-row small { color: var(--muted); }
.forum-tools, .filters, .page-heading form, .page-title form, .admin-inline-form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { max-width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { color: var(--ink); }
.forum-tools input { flex: 1 1 230px; }
.forum-tools select { flex: 0 1 170px; }
.stacked-form, .auth-card form { display: grid; gap: 16px; }
.stacked-form label, .form-grid label { display: grid; gap: 5px; font-weight: 650; }
.stacked-form label:has(input[type="checkbox"]), .form-grid label:has(input[type="checkbox"]), .auth-card label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 14px 0; }
.form-grid .wide { grid-column: 1 / -1; }
.auth-page { padding: 44px 0 72px; }
.auth-card { background: var(--surface); overflow: hidden; }
.auth-card-header { padding: 30px 32px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.auth-card-header .eyebrow { margin-bottom: 9px; }
.auth-card-header h1 { margin: 0 0 8px; color: var(--ink); font-size: clamp(28px, 4vw, 36px); letter-spacing: -.035em; }
.auth-card-header p { margin: 0; color: var(--muted); }
.auth-card form.auth-form { padding: 28px 32px 30px; }
.auth-card label { margin: 0; }
.auth-result-page { display: grid; place-items: center; min-height: 430px; }
.auth-result-card { width: min(100%, 620px); padding: 42px 38px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 48%), var(--surface); box-shadow: var(--shadow); }
.auth-result-card.success { border-color: color-mix(in srgb, #22c55e 48%, var(--line)); }
.auth-result-card.failure { border-color: color-mix(in srgb, #f59e0b 48%, var(--line)); }
.auth-result-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--blue); color: white; font-size: 32px; font-weight: 800; }
.auth-result-card.failure .auth-result-icon { background: #b7791f; }
.auth-result-card h1 { margin: 8px 0 10px; }
.auth-result-card p { max-width: 480px; margin: 0 auto; color: var(--muted); line-height: 1.65; }
.auth-result-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.access-result-page { display: grid; place-items: center; min-height: 430px; }
.access-result-card { border-top: 3px solid var(--amber); }
.vip-subscription-page { display: grid; place-items: center; min-height: 560px; }
.vip-subscription-hero { width: min(100%, 980px); padding: clamp(30px, 5vw, 58px); overflow: hidden; position: relative; border: 1px solid color-mix(in srgb, var(--amber) 42%, var(--line)); border-radius: 18px; background: radial-gradient(circle at 92% 4%, rgb(255 184 107 / 18%), transparent 34%), linear-gradient(135deg, var(--surface) 0%, var(--surface-raised) 100%); box-shadow: 0 18px 42px rgb(1 11 28 / 28%); }
.vip-subscription-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #ffe1a3, #b87924); }
.vip-subscription-hero h1 { max-width: 720px; margin: 6px 0 12px; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.vip-subscription-hero > p { max-width: 700px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.vip-benefit-title { margin: 30px 0 0; color: var(--ink); font-size: 18px; }
.vip-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 20px; }
.vip-benefit-grid article { display: grid; gap: 7px; padding: 18px; border: 1px solid color-mix(in srgb, var(--amber) 24%, var(--line)); border-radius: 12px; background: linear-gradient(90deg, rgb(255 184 107 / 13%), rgb(255 184 107 / 5%) 58%, transparent 100%); }
.vip-benefit-grid strong { color: var(--amber); }
.vip-benefit-grid span { color: var(--muted); font-size: 13px; }
.vip-subscription-note { display: grid; gap: 4px; padding: 14px 16px; border-left: 3px solid var(--amber); background: linear-gradient(90deg, rgb(255 184 107 / 20%), rgb(255 184 107 / 9%) 58%, transparent 100%); color: var(--muted); }
.vip-subscription-note strong { color: var(--amber); }
.vip-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.vip-price-card { position: relative; isolation: isolate; display: grid; gap: 5px; padding: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line)); border-radius: 12px; background: linear-gradient(90deg, rgb(255 184 107 / 14%), rgb(255 184 107 / 5%) 54%, transparent 100%); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.vip-price-card::before { content: ""; position: absolute; z-index: -1; inset: -65% -25% auto; height: 145%; background: linear-gradient(180deg, rgb(255 225 145 / 0%), rgb(255 196 76 / 18%), rgb(255 225 145 / 0%)); opacity: 0; transform: translateY(62%); transition: transform .3s ease, opacity .3s ease; pointer-events: none; }
.vip-price-card:hover { z-index: 1; transform: translateY(-3px) scale(1.02); border-color: #f2c36a; box-shadow: inset 0 1px 0 rgb(255 239 187 / 36%), 0 10px 24px rgb(190 126 35 / 22%); }
.vip-price-card:hover::before { opacity: 1; transform: translateY(-10%); }
.vip-price-card > * { position: relative; z-index: 1; }
.vip-price-card h2 { margin: 0; color: var(--ink); font-size: 20px; }
.vip-price-card > span:last-child { color: var(--muted); font-size: 13px; }
.vip-price { color: var(--amber); font-size: 25px; }
.vip-price small { color: var(--muted); font-size: 12px; font-weight: 600; }
.vip-price-card-featured { border-color: #e0a34d; box-shadow: inset 0 0 0 1px rgb(255 211 121 / 14%), 0 8px 18px rgb(183 118 32 / 12%); }
.vip-subscription-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vip-subscription-cta { border-color: #d59a3d; background: linear-gradient(135deg, #f4c86d, #b97620); color: #241708 !important; box-shadow: 0 7px 0 #754718, 0 12px 22px rgb(183 118 32 / 26%); }
.vip-subscription-cta:hover { background: linear-gradient(135deg, #ffe19b, #d69537); color: #241708 !important; transform: translateY(-1px); }
.auth-field { display: grid; gap: 7px; }
.auth-field label { color: var(--ink); font-weight: 700; }
.auth-field span:not(.field-validation-error) { min-height: 0; }
.auth-field .field-validation-error { display: block; }
.auth-remember { display: inline-flex !important; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; font-weight: 600; }
.auth-remember input { width: auto !important; accent-color: var(--blue); }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.auth-actions a, .auth-register a { color: var(--blue); font-weight: 650; }
.auth-actions a:hover, .auth-register a:hover { color: var(--blue-strong); text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 12px; padding: 0 32px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.external-login-form { padding: 18px 32px 0; }
.external-login-form .button { width: 100%; }
.auth-register { margin: 0; padding: 24px 32px 30px; text-align: center; font-size: 13px; }
.registration-privacy { margin-top: 18px; font-size: 12px; line-height: 1.55; }
.registration-privacy a { color: var(--blue); font-weight: 650; }
.legal-page { max-width: 1180px; margin-inline: auto; }
.legal-header { max-width: 820px; margin-bottom: 28px; }
.legal-header h1 { margin: 0 0 12px; }
.legal-lead { max-width: 760px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.legal-meta { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.notice-inline { color: var(--amber); font-weight: 700; }
.vip-access-notice { display: grid; gap: 4px; margin-bottom: 18px; padding: 13px 18px; border-left: 3px solid var(--amber); }
.vip-notice-heading { display: flex; align-items: center; gap: 9px; }
.vip-notice-heading img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; border-radius: 6px; }
.vip-access-notice strong { color: var(--amber); }
.vip-access-notice span { color: var(--muted); }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 30px; align-items: start; }
.legal-toc { position: sticky; top: 20px; display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.legal-toc strong { margin-bottom: 7px; color: var(--ink); font-size: 13px; }
.legal-toc a { padding: 5px 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.legal-toc a:hover { color: var(--blue); }
.legal-content { min-width: 0; padding: 28px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.legal-content section { scroll-margin-top: 22px; padding: 0 0 25px; margin: 0 0 25px; border-bottom: 1px solid var(--line); }
.legal-content section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.legal-content h2 { margin: 0 0 10px; color: var(--ink); font-size: 20px; }
.legal-content p { margin: 0 0 11px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content a { color: var(--blue); font-weight: 650; }
.legal-content .notice { margin-top: 14px; padding: 13px 15px; color: var(--muted); background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 7px; }
.thread-composer-dialog { width: min(720px, calc(100% - 28px)); max-height: min(790px, calc(100vh - 28px)); padding: 0; background: var(--surface); }
.thread-composer { gap: 18px !important; padding: 0 !important; color: var(--ink); }
.composer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 28px 30px 22px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.composer-header .eyebrow { margin-bottom: 7px; }
.composer-header h2 { margin: 0 0 6px; color: var(--ink); font-size: 25px; }
.composer-header p { margin: 0; color: var(--muted); font-size: 13px; }
.composer-close { border: 0; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; padding: 0 2px; }
.composer-close:hover { color: var(--ink); }
.composer-field { display: grid; gap: 7px; margin-inline: 30px; }
.composer-field label, .composer-label-row label { color: var(--ink); font-size: 13px; font-weight: 750; }
.field-hint { color: var(--muted); font-size: 11px; font-weight: 500; }
.composer-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.editor-shell { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); }
.editor-toolbar { display: flex; align-items: center; gap: 4px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--surface); }
.editor-toolbar button { min-width: 30px; height: 28px; padding: 3px 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; }
.editor-toolbar button:hover, .editor-toolbar button:focus-visible { border-color: var(--line); background: var(--surface-hover); color: var(--ink); }
.editor-shell textarea { display: block; width: 100%; min-height: 220px; border: 0; border-radius: 0; resize: vertical; background: var(--surface-raised); }
.editor-shell textarea:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.editor-footer { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.editor-footer output { white-space: nowrap; }
.composer-footer { display: flex; justify-content: flex-end; padding: 0 30px 28px; }
.composer-footer .button { min-width: 170px; }
.thread-create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.thread-create-main { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.thread-create-header { padding: 28px 30px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--surface), var(--surface-raised)); }
.thread-create-header h1 { margin: 0 0 7px; color: var(--ink); font-size: clamp(28px, 3vw, 36px); }
.thread-create-header p { margin: 0; color: var(--muted); }
.thread-create-main .thread-composer { padding: 28px 30px !important; }
.thread-create-help { position: sticky; top: 20px; padding: 20px; }
.thread-create-help h2 { margin: 0 0 12px; color: var(--ink); font-size: 17px; }
.thread-create-help ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-card input, .auth-card textarea { width: 100%; background: var(--surface-raised); color: var(--ink); }
.auth-card input[type="checkbox"] { width: auto; }
.validation-summary, .field-validation-error { color: var(--danger); }
.success-message { color: #a5edc3; background: #164631; }
.post { display: grid; grid-template-columns: 160px minmax(0,1fr); margin-bottom: 16px; overflow: hidden; }
.post > aside { background: var(--surface-raised); border-color: var(--line); color: var(--ink); text-align: center; }
.post > aside strong { overflow-wrap: anywhere; }
.post-author-meta { display: grid; justify-items: center; gap: 5px; min-width: 0; }
.post-author-meta strong { max-width: 100%; }
.post-avatar { display: block; width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.author-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.author-badges .badge { font-size: 10px; }
.post > div { min-width: 0; }
.post > div > header { border-color: var(--line); color: var(--muted); }
.post-body { padding: 22px; overflow-wrap: anywhere; color: var(--ink); }
.post-quote { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--blue-strong); border-radius: 7px; background: var(--surface-raised); color: var(--muted); }
.post-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 18px; border-top: 1px solid var(--line); }
.post-actions form { display: inline-flex; gap: 5px; }
.post-actions .reaction-form { flex: 0 1 auto; align-items: center; flex-wrap: wrap; }
.reaction-picker { position: relative; display: inline-flex; }
.reaction-trigger { min-width: 54px; }
.reaction-menu { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 7px); display: none; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.22); white-space: nowrap; }
.reaction-picker:hover .reaction-menu, .reaction-picker:focus-within .reaction-menu { display: inline-flex; }
.reaction-choice { display: inline-flex; align-items: center; gap: 4px; min-width: 38px; justify-content: center; font-size: 1rem; }
.reaction-choice span { font-size: .76rem; color: var(--muted); }
.reaction-choice.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-raised)); }
.post-actions button, .moderation-actions button, .report-thread-form button { border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; background: var(--surface-raised); color: var(--ink); }
.post-actions button:hover, .moderation-actions button:hover { background: var(--surface-hover); }
.post-actions input { max-width: 180px; }
.post-actions .inline-action { flex: 0 0 auto; }
.post-actions .inline-action[open] { flex-basis: 100%; }
.inline-action summary, .thread-tools summary { display: inline-block; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.inline-action form { display: flex; align-items: start; flex-wrap: wrap; width: 100%; margin-top: 9px; }
.inline-action textarea { flex: 1 1 280px; }
.thread-tools { margin: 18px 0; }
.thread-tools form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thread-tools input { flex: 1 1 240px; }
.moderation-panel { margin-top: 24px; }
.reply-box { display: grid; gap: 10px; padding: 20px; }
.reply-box textarea { width: 100%; background: var(--surface-raised); color: var(--ink); }
.report-thread-form, .moderation-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.report-thread-form input { flex: 1 1 220px; }
.moderation-actions form { margin: 0; }
dialog { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
dialog form { background: var(--surface); }
dialog header button { color: var(--ink); }
.listing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.listing { min-width: 0; padding: 0; overflow: hidden; }
.listing-media { aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg,#15375a,#244d70); color: #a9cce8; }
.listing-media img { width: 100%; height: 100%; object-fit: cover; }
.listing-content { display: grid; gap: 8px; padding: 18px; }
.listing-content h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.listing-content p { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.listing-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--surface-raised); color: var(--ink); font-size: 12px; font-weight: 700; }
.badge-vip { border-color: #a87c37; color: var(--amber); background: #63491d44; }
.listing-image { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 9px; background: #0a1624; }
.marketplace-filters input:first-of-type { flex: 1 1 280px; }
.marketplace-filters input:nth-of-type(2) { flex: 0 1 180px; }
.listing-detail { display: grid; gap: 18px; }
.listing-detail > p { white-space: pre-wrap; overflow-wrap: anywhere; }
.listing-author { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.member-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 14px; }
.member-card { background: var(--surface); color: var(--ink); min-width: 0; overflow: hidden; }
.member-card span { min-width: 0; }
.member-card strong, .member-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.members-page .page-heading form { flex-wrap: nowrap; }
.members-page .page-heading form input { width: 190px; flex: 1 1 auto; }
.member-card:hover { border-color: var(--blue); }
.member-card img { object-fit: cover; }
.member-card small { color: var(--muted); }
.member-profile { padding-top: 28px; }
.profile-cover { width: 100%; max-height: 270px; object-fit: cover; border-radius: 12px; }
.profile-cover-fallback { height: clamp(130px, 19vw, 240px); border-radius: 12px; background: linear-gradient(120deg,#113f71,#1d699c 50%,#123453); }
.profile-header { display: flex; align-items: center; gap: 18px; position: relative; margin: -66px 18px 24px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.profile-identity { min-width: 0; flex: 1; }
.profile-identity h1, .profile-identity p, .member-profile .breadcrumb { overflow-wrap: anywhere; }
.profile-avatar { border-color: var(--page); }
.profile-header h1 { margin: 0; }
.profile-header p { margin: 3px 0 8px; color: var(--muted); }
.profile-actions { margin-left: auto; }
.profile-actions form { margin: 0; }
.profile-stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 0 0 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.profile-stat-strip div { display: grid; gap: 3px; padding: 14px 16px; background: var(--surface); }
.profile-stat-strip strong { font-size: 20px; color: var(--ink); }
.profile-stat-strip span { color: var(--muted); font-size: 12px; }
.profile-columns { grid-template-columns: minmax(0,2fr) minmax(230px,1fr); }
.profile-history { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 18px; }
.profile-history .panel p { display: grid; gap: 2px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--line); }
.profile-history a { overflow-wrap: anywhere; }
.profile-history small { display: block; }
.stats-panel .stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.stats-panel .stat-row strong { color: var(--ink); }
.profile-social { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 20px; color: var(--muted); font-size: 13px; }
.profile-resources { margin-top: 18px; }
.message-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.message-row:last-child { border-bottom: 0; }
.message-row strong { color: var(--blue); }
.message-row strong { min-width: 0; overflow-wrap: anywhere; }
.message-row span { color: var(--muted); font-size: 12px; }
.message-row .message-direction { grid-column: 1 / -1; }
.message-row small { grid-column: 1/-1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-row.unread, .notification-item.unread { background: #2b5d8733; }
.message-detail .message-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px 0; }
.notification-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px; border-bottom: 1px solid var(--line); }
.notification-item > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.notification-item > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.notification-item form { margin: 0; }
.notification-item small { display: block; }
.notification-copy { display: grid; gap: 5px; }
.notification-copy time { color: var(--muted); font-size: 12px; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.badge-new { border-color: var(--blue); color: var(--blue); }
.admin-stats { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; }
.admin-nav { display: flex; gap: 5px; overflow-x: auto; margin: 0 clamp(18px, 2vw, 30px); padding: 18px 0 10px; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.admin-nav a { flex: 0 0 auto; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; }
.admin-nav a:hover { background: var(--surface-hover); color: var(--ink); }
.admin-stats div { border-color: var(--line); }
.admin-stats strong { color: var(--blue); }
.admin-menu { grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; margin-bottom: 18px; }
.admin-menu a { padding: 17px; border-color: var(--line); color: var(--blue); }
.admin-members { display: grid; gap: 10px; }
.admin-member { background: var(--surface); color: var(--ink); min-width: 0; }
.admin-member small { color: var(--muted); overflow-wrap: anywhere; }
.admin-member form, .admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-member input { width: auto; }
.admin-category { margin-top: 20px; }
.admin-category .page-title { align-items: center; margin-bottom: 12px; }
.admin-category details { padding: 12px 0; border-top: 1px solid var(--line); }
.admin-category summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.pagination { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }
.pagination a:hover, .pagination a.active, .pagination a[aria-current="page"] { background: var(--surface-hover); border-color: var(--blue); color: var(--blue); }
.pagination-status { display: inline-flex; align-items: center; padding: 5px 9px; color: var(--muted); font-size: 13px; }
.post-body img { display: block; max-width: 100%; height: auto; margin-block: 14px; border-radius: 8px; }
.post-body pre { max-width: 100%; overflow-x: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #091726; }
.post-body code { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.site-footer { padding-top: 28px; background: #101e3b; color: #c5d7e8; }
.footer-grid { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 25px; }
.footer-grid > div { display: block; max-width: 500px; }
.footer-grid strong { color: #f1f7ff; }
.footer-grid nav { display: flex; flex-wrap: wrap; align-items: start; gap: 18px; }
.footer-grid a { color: #c5d7e8; }
.footer-bottom { border-color: #294a70; }
@media (max-width: 1180px) {
  .nav-shell { flex-wrap: wrap; }
  .primary-nav { order: 3; flex: 1 0 100%; min-height: 40px; }
  .nav-utilities { margin-left: auto; }
  .content-grid { grid-template-columns: minmax(0,1fr) 250px; }
  .forum-head { grid-template-columns: minmax(0,1fr) 58px 58px minmax(90px,120px) 16px; }
  .forum-row, .forum-panel .forum-row { grid-template-columns: 52px minmax(0,1fr) 58px 58px minmax(90px,120px) 16px; }
}
@media (max-width: 860px) {
  .forum-frame { width: min(100% - 28px, 1600px); }
  .content-grid { grid-template-columns: 1fr; }
  .activity-rail { padding-top: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .activity-rail .rail-panel { margin: 0; }
  .forum-head, .forum-row .latest { display: none; }
  .forum-row, .forum-panel .forum-row { grid-template-columns: 52px minmax(0,1fr) 48px 48px 16px; }
  .section-forum-panel .forum-head { display: none; }
  .section-forum-panel .forum-row { grid-template-columns: 52px minmax(0,1fr) 48px 48px 16px; }
  .listing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-menu { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .forum-frame { width: 100%; }
  .nav-shell { gap: 8px; padding: 8px 14px; }
  .menu-toggle { display: block; order: 1; }
  .nav-utilities { order: 2; }
  .primary-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 0; padding: 6px 0; }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { min-height: 43px; padding: 10px 12px; border-bottom-width: 0; border-left: 3px solid transparent; border-radius: 0 7px 7px 0; }
  .primary-nav a + a::before { left: 12px; top: 0; width: calc(100% - 24px); height: 1px; }
  .primary-nav a:hover { transform: translateX(2px); box-shadow: none; }
  .primary-nav .vip-subscription-link { align-self: stretch; min-height: 43px; margin: 3px 0; border-radius: 8px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 3px 0 #754718; }
  .primary-nav .vip-subscription-link:hover, .primary-nav .vip-subscription-link[aria-current="page"] { transform: translateX(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 86%), 0 3px 0 #754718; }
  .primary-nav .vip-subscription-link::before, .primary-nav .vip-subscription-link::after { display: none; }
  .primary-nav a[aria-current="page"] { border-left-color: var(--blue); }
  .primary-nav .mobile-nav-link { display: flex; }
  .primary-nav form.mobile-nav-link { display: block; margin: 0; }
  .primary-nav form.mobile-nav-link button { width: 100%; min-height: 43px; padding: 10px 12px; border: 0; border-left: 3px solid transparent; background: none; color: #c1d3e4; text-align: left; font-weight: 650; }
  .account-actions .account-link:not(.account-name), .account-actions .button { display: none; }
  .account-actions .account-name { max-width: 110px; }
  .nav-shell .brand small { display: none; }
  .nav-shell .brand strong { font-size: 13px; }
  .theme-toggle { display: block; width: 34px; height: 34px; flex-basis: 34px; }
  .page, .content-grid { padding-inline: 16px; }
  .auth-page { width: 100%; margin: 0; padding: 24px 12px 48px; }
  .auth-card-header, .auth-card form.auth-form { padding-left: 20px; padding-right: 20px; }
  .auth-result-card { padding: 32px 20px; }
  .auth-divider { padding-inline: 20px; }
  .external-login-form, .auth-register { padding-left: 20px; padding-right: 20px; }
  .legal-page { padding-inline: 12px; }
  .legal-layout { grid-template-columns: 1fr; gap: 16px; }
  .legal-toc { position: static; }
  .legal-content { padding: 22px 20px; }
  .thread-composer-dialog { width: calc(100% - 20px); }
  .composer-header { padding: 22px 20px 18px; }
  .composer-field { margin-inline: 20px; }
  .composer-footer { padding: 0 20px 20px; }
  .composer-footer .button { width: 100%; }
  .editor-footer { flex-direction: column; gap: 3px; }
  .thread-create-layout { grid-template-columns: 1fr; }
  .thread-create-header { padding: 22px 20px 18px; }
  .thread-create-main .thread-composer { padding: 22px 20px !important; }
  .thread-create-help { position: static; }
  .vip-benefit-grid { grid-template-columns: 1fr; }
  .vip-pricing-grid { grid-template-columns: 1fr; }
  .vip-subscription-hero { padding: 28px 22px; }
  .page-title, .page-heading { flex-direction: column; }
  .welcome { padding: 30px 0 34px; }
  .welcome br { display: none; }
  .forum-row, .forum-panel .forum-row { grid-template-columns: 48px minmax(0,1fr) 14px; gap: 10px; padding: 11px 12px; }
  .section-forum-panel .forum-row { grid-template-columns: 48px minmax(0,1fr) 14px; }
  .forum-row .count { display: none; }
  .forum-panel .forum-icon, .forum-panel .forum-icon:has(.forum-image-icon), .forum-panel .forum-icon:has(.section-image-icon), .forum-panel .forum-image-icon, .forum-panel .section-image-icon { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
  .activity-rail { grid-template-columns: 1fr; }
  .thread-row { grid-template-columns: 36px minmax(0,1fr); }
  .thread-row > span:nth-child(n+3) { display: none; }
  .post { grid-template-columns: 1fr; }
  .post > aside { flex-direction: row; align-items: center; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .post-author-meta { flex: 1; justify-items: start; gap: 3px; }
  .post-author-meta .author-badges { justify-content: flex-start; }
  .post-avatar, .post > aside .avatar.large { width: 48px; height: 48px; flex: 0 0 48px; }
  .post-body { padding: 16px; }
  .listing-grid, .profile-columns, .profile-history, .form-grid, .admin-stats, .admin-menu { grid-template-columns: 1fr; }
  .profile-header { flex-wrap: wrap; }
  .profile-identity { flex: 1 1 calc(100% - 100px); }
  .profile-actions { margin-left: 90px; }
  .profile-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .profile-header > .button { margin-left: 90px; }
  .form-grid .wide { grid-column: auto; }
  .notification-item { align-items: flex-start; flex-direction: column; }
  .admin-nav { flex-wrap: wrap; overflow-x: visible; margin-inline: 16px; gap: 6px; }
  .admin-nav a { padding: 6px 9px; font-size: 12px; }
  .admin-member { display: grid; }
  .footer-grid { display: grid; gap: 10px; }
  .footer-bottom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }