:root {
  --ink: var(--tc-ink, #172033);
  --muted: var(--tc-muted, #667085);
  --line: var(--tc-line, #e2e8f0);
  --surface: var(--tc-surface, #fff);
  --canvas: var(--tc-canvas, #f5f7fb);
  --brand: var(--tc-brand, #2563eb);
  --brand-dark: var(--tc-brand-dark, #1e40af);
  --success: var(--tc-success, #14754f);
  --warning: var(--tc-warning, #9a5b00);
  --danger: var(--tc-danger, #b42318);
}
html { min-height: 100%; margin: 0 !important; overflow-x: hidden; overflow-x: clip; font-size: 15px; }
body { width: 100%; min-height: 100vh; margin: 0; overflow-x: hidden; overflow-x: clip; color: var(--ink); }
.app-body { background: var(--canvas); }
header { background: #183783; }
.app-navbar { width: 100%; background: #183783; box-shadow: 0 6px 22px rgba(24, 55, 131, .2); }
.app-nav-inner,
.app-shell {
  width: 100%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(.85rem, 2.4vw, 1.25rem);
  padding-left: clamp(.85rem, 2.4vw, 1.25rem);
}
.navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; }
.brand-mark { display: inline-grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .45rem; background: #fff; color: var(--brand-dark); font-weight: 850; }
.app-navbar .nav-link { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.78); border-radius: .45rem; }
.app-navbar .nav-link:hover, .app-navbar .nav-link:focus { color: #fff; background: rgba(255,255,255,.12); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-heading h1 { margin: 0; font-size: 1.45rem; font-weight: 760; }
.page-kicker { color: var(--brand); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; box-shadow: 0 8px 22px rgba(28,42,68,.045); }
.surface-header { padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.surface-body { padding: 1rem; }
.filter-panel summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-weight: 700; }
.filter-panel summary::-webkit-details-marker { display: none; }
.filter-panel summary::after { content: "⌄"; color: var(--muted); transition: transform .15s ease; }
.filter-panel[open] summary::after { transform: rotate(180deg); }
.forum-checkbox-list { max-height: 15rem; overflow-y: auto; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .45rem; background: #fff; }
.forum-checkbox-option { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .42rem .2rem; cursor: pointer; }
.forum-checkbox-option + .forum-checkbox-option { border-top: 1px solid #eef2f7; }
.forum-checkbox-option .form-check-input { flex: 0 0 auto; margin: 0; }
.multiselect { position: relative; }
.multiselect-toggle { display: flex; align-items: center; width: 100%; min-height: 2.45rem; text-align: left; color: var(--ink); }
.multiselect-toggle [data-multiselect-label] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiselect-menu { width: 100%; max-height: min(22rem, 70vh); padding: .35rem; overflow: hidden; border-color: var(--line); box-shadow: 0 18px 40px rgba(23,32,51,.14); }
.multiselect-options { max-height: 17rem; overflow-y: auto; }
.multiselect-option { display: flex; align-items: center; gap: .5rem; min-height: 2.1rem; margin: 0; padding: .42rem .45rem; border-radius: .35rem; cursor: pointer; }
.multiselect-option:hover, .multiselect-option:focus-within { background: #f3f6fb; }
.multiselect-option .form-check-input { flex: 0 0 auto; margin: 0; }
.multiselect-clear { width: 100%; margin-bottom: .25rem; padding: .45rem .55rem; border: 0; border-radius: .35rem; background: #f8fafc; color: var(--muted); font-weight: 700; text-align: left; }
.multiselect-clear:hover, .multiselect-clear:focus { background: #eef2f7; color: var(--ink); }
.result-grid { display: grid; gap: .85rem; }
.result-card { border-left: 4px solid var(--brand); overflow: hidden; }
.result-card-suspected-deleted { border-left-color: #98a2b3; }
.result-card-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.result-card-title-row h2, .result-card-title-row h3, .result-card-title-row h5 { flex: 1 1 9rem; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 760; line-height: 1.35; }
.result-title-link { color: inherit; text-decoration: none; word-break: normal; overflow-wrap: break-word; }
.result-title-link:hover, .result-title-link:focus { color: var(--brand); text-decoration: underline; }
.result-author-row { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.author-menu { display: inline-flex; }
.author-menu-toggle { padding: 0; border: 0; background: transparent; color: inherit; font-weight: 760; line-height: 1.45; }
.author-menu-toggle:hover, .author-menu-toggle:focus { color: var(--brand); text-decoration: underline; }
.author-inline-level { margin-left: .25rem; padding: .08rem .34rem; font-size: .68rem; vertical-align: .08rem; }
.content-text { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; line-height: 1.72; }
.content-summary { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.result-meta { color: var(--muted); font-size: .86rem; gap: .3rem .75rem !important; line-height: 1.35; }
.result-meta.mt-3 { margin-top: .65rem !important; }
.tag { display: inline-block; padding: .18rem .46rem; border-radius: 999px; background: #eef2ff; color: #344bb2; font-size: .74rem; font-weight: 700; line-height: 1.35; }
.tag-success { background: #eaf8f1; color: var(--success); }
.tag-warning { background: #fff7e6; color: var(--warning); }
.tag-danger { background: #fff0f0; color: var(--danger); }
.tag-muted { background: #f1f4f8; color: var(--muted); }
.tag-suspected-deleted { background: #e7eaf0; color: var(--muted); }
.content-image-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.content-image-link { color: var(--brand); font-weight: 700; text-decoration: none; }
.content-image-link:hover, .content-image-link:focus { color: var(--brand-dark); text-decoration: underline; }
.comment-preview-block { margin-top: .85rem; padding: .75rem .85rem; border-radius: .4rem; background: #f8fafc; }
.comment-preview-row + .comment-preview-row { margin-top: .55rem; }
.parent-reply-quote { margin-bottom: .65rem; padding: .55rem .7rem; border-left: 3px solid #b7bec8; border-radius: 0 .35rem .35rem 0; background: #f5f7fa; color: #667085; font-size: .9rem; }
.empty-state { padding: 2.4rem 1rem; color: var(--muted); text-align: center; }
.forum-picker { display: grid; gap: .7rem; }
.thread-hero { display: grid; gap: .65rem; }
.thread-body { font-size: 1rem; }
.toolbar-row { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
.browse-thread-list { overflow: hidden; }
.browse-thread-list .result-card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.browse-thread-list .result-card + .result-card { border-top: 1px solid var(--line); }
.browse-thread-list .surface-body { padding: 1rem; }
.thread-reading-summary { display: grid; gap: .35rem; }
.thread-reading-summary .result-author-row { margin-bottom: 0; }
.reading-action-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; }
.reading-context-card { display: grid; gap: .55rem; margin-bottom: .85rem; padding: 1rem; }
.reading-context-forum { color: var(--brand); font-size: .9rem; font-weight: 760; }
.reading-context-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.reading-context-head .result-author-row { margin-bottom: 0; }
.reading-context-title { margin: 0; font-size: 1.16rem; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; }
.reading-reply-list { overflow: hidden; }
.reading-reply-item { padding: 1rem; background: #fff; }
.reading-reply-item:nth-child(even) { background: #fff; }
.reading-reply-item + .reading-reply-item, .reading-empty-row { border-top: 1px solid var(--line); }
.reading-reply-item-suspected-deleted { color: #667085; }
.reading-reply-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.reading-reply-head .result-author-row { margin-bottom: 0; }
.reading-reply-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.reading-reply-body { font-size: 1rem; }
.comment-preview-all { color: var(--brand); font-weight: 700; text-decoration: none; }
.comment-preview-all:hover, .comment-preview-all:focus { color: var(--brand-dark); text-decoration: none; }
.reading-empty-row { padding: 1.2rem 1rem; background: #f8fafc; color: var(--muted); text-align: center; }
.refresh-fab { display: grid; position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1040; width: 3.25rem; height: 3.25rem; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 16px 32px rgba(37,99,235,.3); text-decoration: none; }
.refresh-fab svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.refresh-fab:hover, .refresh-fab:focus { color: #fff; background: var(--brand-dark); box-shadow: 0 18px 38px rgba(30,64,175,.34); }
.app-toast-portal { display: grid; position: fixed; top: 1rem; right: 1rem; z-index: 1080; width: min(24rem, calc(100vw - 2rem)); gap: .6rem; pointer-events: none; }
.app-toast { display: flex; justify-content: space-between; gap: .8rem; padding: .8rem .9rem; border: 1px solid var(--line); border-left: 4px solid var(--success); border-radius: .45rem; background: #fff; box-shadow: 0 16px 36px rgba(23,32,51,.16); pointer-events: auto; }
.app-toast-error { border-left-color: var(--danger); }
.app-toast-close { border: 0; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; }
.pager-bar { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-top: 1rem; }
.user-card { display: grid; gap: .7rem; }
.user-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.user-title { min-width: 0; }
.user-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.user-name-line { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: .35rem; }
.user-name { min-width: 0; font-size: 1.14rem; font-weight: 760; overflow-wrap: anywhere; }
.user-growth { flex: 0 0 auto; white-space: nowrap; }
.user-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; margin-top: .95rem; }
.user-info-cell { display: grid; min-width: 0; gap: .16rem; }
.user-info-cell-wide { grid-column: 1 / -1; }
.user-info-label { color: var(--muted); font-size: .82rem; font-weight: 750; }
.user-info-value { min-width: 0; font-size: 1.02rem; overflow-wrap: anywhere; line-height: 1.48; }
.nowrap { white-space: nowrap; }
.break-anywhere { overflow-wrap: anywhere; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #89a3f7; box-shadow: 0 0 0 .2rem rgba(37,99,235,.12); }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
@media (max-width: 767px) {
  .page-heading { align-items: flex-start; flex-direction: column; }
  .surface-body { padding: .85rem; }
  .toolbar-row > * { width: 100%; }
  .browse-thread-list .surface-body { padding: .85rem; }
  .reading-context-card { padding: .85rem; }
  .reading-reply-item { padding: .85rem; }
  .reading-reply-head { gap: .45rem; }
  .reading-reply-tags { max-width: 45%; }
  .reading-context-head, .user-card-head { gap: .45rem; }
  .refresh-fab { right: .85rem; bottom: .85rem; width: 3rem; height: 3rem; }
  .pager-bar { gap: .4rem; }
  .pager-bar .btn { flex: 1 1 0; }
}