/* ===== 知问 — unified stylesheet ===================================== */
:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1f2328;
  --text-soft: #6b7280;
  --text-faint: #9aa1ab;
  --border: #e6e8eb;
  --border-strong: #d4d7dc;
  --primary: #3457d5;
  --primary-dark: #2840a8;
  --primary-soft: #eef1fd;
  --pos: #1f9d57;
  --pos-soft: #e7f6ee;
  --neg: #d6453d;
  --neg-soft: #fbeae9;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

.container { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.page { padding-top: 26px; padding-bottom: 56px; }
.muted { color: var(--text-faint); }

/* ===== header ======================================================== */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
}
.brand { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: .5px; }
.brand:hover { color: var(--text); }
.nav { display: flex; align-items: center; gap: 18px; }
.nav-link { color: var(--text-soft); font-weight: 500; }
.nav-link:hover { color: var(--text); }

/* user menu (native <details>) */
.usermenu { position: relative; }
.usermenu summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; padding: 4px;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu-name { font-weight: 600; font-size: 14px; }
.usermenu-pop {
  position: absolute; right: 0; top: 110%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  min-width: 168px; padding: 6px; display: flex; flex-direction: column;
}
.usermenu-id { padding: 6px 10px; color: var(--text-faint); font-size: 12px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.usermenu-pop a, .usermenu-pop .linklike {
  padding: 8px 10px; border-radius: 6px; color: var(--text-soft);
  font-size: 14px; text-align: left;
}
.usermenu-pop a:hover, .usermenu-pop .linklike:hover {
  background: var(--bg); color: var(--text);
}
.linklike { background: none; border: none; cursor: pointer; font: inherit; width: 100%; }

/* ===== buttons ======================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--card);
  color: var(--text); cursor: pointer; transition: all .12s;
}
.btn:hover { border-color: var(--text-faint); color: var(--text); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== cards ========================================================= */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px;
}
.card + .card { margin-top: 18px; }
.section-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
}

/* ===== avatars / user chip =========================================== */
.avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar-default {
  background: var(--primary); color: #fff; font-weight: 700;
  text-transform: uppercase;
}
.avatar-sm { width: 30px; height: 30px; font-size: 13px; }
.avatar-md { width: 44px; height: 44px; font-size: 18px; }
.avatar-lg { width: 84px; height: 84px; font-size: 34px; }

.user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.user-chip:hover .chip-name b { color: var(--primary); }
.chip-name { font-size: 14px; }
.chip-name b { font-weight: 600; }
.chip-id { color: var(--text-faint); margin-left: 2px; font-size: 13px; }

/* "[官方]" badge that marks editorial / site-operated accounts. */
.official-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; margin: 0 5px; border-radius: 4px;
  background: var(--primary); color: #fff; letter-spacing: .5px;
  vertical-align: 1px; line-height: 1.4;
}
.pname .official-badge { font-size: 11.5px; padding: 2px 7px; vertical-align: 4px; }

/* ===== messages ====================================================== */
.messages { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg {
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px;
  border: 1px solid var(--border);
}
.msg-success { background: var(--pos-soft); border-color: #bce3cc; color: #14663a; }
.msg-error { background: var(--neg-soft); border-color: #f0c4c1; color: #9b2620; }

/* ===== page heads / tabs ============================================= */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.page-head h1 { font-size: 20px; font-weight: 700; }
.tabs { display: flex; gap: 6px; }
.tabs a {
  padding: 6px 14px; border-radius: 999px; font-size: 14px;
  color: var(--text-soft); font-weight: 600;
}
.tabs a.active { background: var(--primary-soft); color: var(--primary); }

/* ===== post list ===================================================== */
.post-card { display: block; color: var(--text); }
.post-card + .post-card { margin-top: 14px; }
.post-card:hover { border-color: var(--border-strong); }
.post-card .ptitle { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.post-card:hover .ptitle { color: var(--primary); }
.post-excerpt { color: var(--text-soft); font-size: 14px; margin: 6px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.post-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  color: var(--text-faint); font-size: 13px;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.tag {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
}
.tag-muted { background: var(--bg); color: var(--text-faint); }

/* ===== detail layout ================================================= */
/* minmax(0, 1fr) instead of 1fr so a stubborn child (long code block,
   long URL, wide table) can't expand the column past the viewport. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 286px;
  gap: 18px; align-items: start; }
.detail-main, .detail-side { min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 80px; }

.reply-banner {
  background: var(--primary-soft); border: 1px solid #d3dbf8;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px; color: var(--primary-dark);
}

.post-full .ptitle-lg { font-size: 24px; font-weight: 800; line-height: 1.4; }
.post-byline { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px;
  flex-wrap: wrap; }
.post-byline .when { color: var(--text-faint); font-size: 13px; }
.post-body { font-size: 15.5px; line-height: 1.85; word-wrap: break-word; }
.post-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--border); }

/* ===== rating ======================================================== */
.rating-row { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.rating-dim { width: 70px; font-weight: 600; font-size: 13px; color: var(--text-soft);
  flex-shrink: 0; }
.seg { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  padding: 6px 16px; border: 1px solid var(--border-strong); border-radius: 999px;
  cursor: pointer; font-size: 13px; background: var(--card); transition: all .1s;
}
.seg label:hover { border-color: var(--text-faint); }
.seg input:checked + label.opt-yes,
.seg input:checked + label.opt-fluent,
.seg input:checked + label.opt-support {
  background: var(--pos); border-color: var(--pos); color: #fff;
}
.seg input:checked + label.opt-no,
.seg input:checked + label.opt-obscure,
.seg input:checked + label.opt-oppose {
  background: var(--neg); border-color: var(--neg); color: #fff;
}
.seg input:checked + label.opt-none {
  background: var(--text-soft); border-color: var(--text-soft); color: #fff;
}
.seg input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

/* rating summary */
.sum-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sum-label { width: 70px; font-size: 13px; color: var(--text-soft); font-weight: 600; }
.sum-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--bg);
  display: flex; overflow: hidden; }
.sum-pos { background: var(--pos); }
.sum-neg { background: var(--neg); }
.sum-nums { font-size: 13px; width: 78px; text-align: right; }
.sum-nums .pos { color: var(--pos); font-weight: 700; }
.sum-nums .neg { color: var(--neg); font-weight: 700; }
.sum-poles { display: flex; justify-content: space-between; font-size: 12.5px;
  margin: 3px 0 14px 82px; }
.sum-poles .pos { color: var(--pos); font-weight: 600; }
.sum-poles .neg { color: var(--neg); font-weight: 600; }

/* ===== side panel (replies) ========================================== */
.panel-toggle { display: flex; gap: 4px; }
.panel-toggle a {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  color: var(--text-faint); font-weight: 600;
}
.panel-toggle a.active { background: var(--primary-soft); color: var(--primary); }

.relnode {
  display: block; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-top: 8px; color: var(--text);
}
.relnode:hover { border-color: var(--primary); }
.relnode .rn-title { font-size: 13.5px; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.relnode:hover .rn-title { color: var(--primary); }
.relnode .rn-meta { font-size: 12px; color: var(--text-faint); margin-top: 4px;
  display: flex; gap: 8px; }
.panel-empty { color: var(--text-faint); font-size: 13px; padding: 8px 0; }
.panel-label { font-size: 12px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 2px; }
.panel-label:first-child { margin-top: 0; }

/* ===== comments ====================================================== */
.comments { margin-top: 18px; }
.comment { padding: 14px 0; border-top: 1px solid var(--border); }
.comment:first-child { border-top: none; }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-head .when { color: var(--text-faint); font-size: 12px; }
.comment-body { font-size: 14.5px; word-wrap: break-word; }
.comment-body.deleted { color: var(--text-faint); font-style: italic; }
.comment-tools { display: flex; gap: 12px; margin-top: 6px; }
.comment-tools button, .comment-tools summary {
  font-size: 12.5px; color: var(--text-faint); cursor: pointer;
  background: none; border: none; font-weight: 600; list-style: none;
}
.comment-tools summary::-webkit-details-marker { display: none; }
.comment-tools button:hover, .comment-tools summary:hover { color: var(--primary); }
.comment-children {
  margin-top: 8px; margin-left: 22px; padding-left: 14px;
  border-left: 2px solid var(--border);
}
.reply-box { margin-top: 10px; }

/* ===== forms ========================================================= */
.form-field { margin-bottom: 16px; }
.form-field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=email],
input[type=file], textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
}
textarea { resize: vertical; line-height: 1.7; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
input:disabled, textarea:disabled { background: var(--bg); color: var(--text-faint);
  cursor: not-allowed; }
.form-field .help { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }
.field-error { font-size: 12.5px; color: var(--neg); margin-top: 5px; }
.has-error input, .has-error textarea { border-color: var(--neg); }
.lock-note { font-size: 12.5px; color: var(--text-faint); margin-top: 5px; }

/* radio lists (visibility chooser) */
.form-field ul, .radio-list { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; }
.form-field div > label, .radio-list label { font-weight: 400; }
.form-field input[type=radio] { width: auto; margin-right: 6px; }

.form-narrow { max-width: 440px; margin: 0 auto; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }
.auth-card { max-width: 420px; margin: 30px auto; }
.auth-card h1 { font-size: 21px; margin-bottom: 4px; }
.auth-sub { color: var(--text-soft); font-size: 14px; margin-bottom: 20px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-soft); }

/* ===== profile ======================================================= */
.profile-head { display: flex; gap: 18px; align-items: center; }
.profile-head .pname { font-size: 21px; font-weight: 800; }
.profile-head .pid { color: var(--text-faint); font-size: 14px; }
.profile-head .pbio { color: var(--text-soft); font-size: 14px; margin-top: 4px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 4px; color: var(--text-faint); font-size: 13px; }
.profile-quota { display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; font-size: 13px; color: var(--text-faint); }

.timeline-item { display: flex; gap: 14px; }
.timeline-item + .timeline-item { margin-top: 2px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  flex-shrink: 0; }
.tl-line { width: 2px; flex: 1; background: var(--border); margin: 4px 0; min-height: 14px; }
.tl-body { flex: 1; padding-bottom: 16px; }

.mini-post { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mini-post .mp-title { font-weight: 600; color: var(--text); }
.mini-post:hover .mp-title { color: var(--primary); }
.mini-post .mp-meta { font-size: 12.5px; color: var(--text-faint); margin-top: 3px; }

/* ===== chain ========================================================= */
.chain-item { display: flex; gap: 14px; }
.chain-node {
  flex: 1; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card); margin-bottom: 4px;
}
.chain-node.current { border-color: var(--primary); background: var(--primary-soft); }
.chain-node.locked { background: var(--bg); color: var(--text-faint); }
.chain-rail { display: flex; flex-direction: column; align-items: center; width: 24px; }
.chain-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary);
  color: #fff; font-size: 12px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.chain-line { width: 2px; flex: 1; background: var(--border); min-height: 12px; }

/* ===== misc ========================================================== */
.empty-state { text-align: center; color: var(--text-faint); padding: 40px 20px; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px;
  align-items: center; font-size: 14px; color: var(--text-soft); }
.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* ===== search ======================================================== */
.search-form { flex: 1; max-width: 380px; margin: 0 24px; }
.search-form input {
  width: 100%; padding: 7px 14px; font-size: 13.5px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg);
}
.search-form input:focus { background: var(--card); }
.search-page { display: flex; gap: 10px; margin-bottom: 8px; }
.search-page input { flex: 1; }

/* ===== chain tree ==================================================== */
.chain-tree { padding: 20px 22px; }
.tnode { position: relative; }
.tnode-card {
  display: block; padding: 11px 14px; margin: 8px 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); transition: border-color .12s;
}
.tnode-card:hover { border-color: var(--primary); }
.tnode-card.current {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.tnode-title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.tnode-card:hover .tnode-title { color: var(--primary); }
.tnode-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px;
  color: var(--text-faint); margin-top: 5px; }
.tnode-children {
  margin-left: 13px; padding-left: 22px;
  border-left: 2px solid var(--border-strong);
}
.tnode-children > .tnode::before {
  content: ''; position: absolute; left: -22px; top: 25px;
  width: 22px; height: 2px; background: var(--border-strong);
}
.tnode-more {
  display: inline-block; margin: 2px 0 8px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  background: var(--bg); border-radius: 999px;
}
.tnode-more:hover { color: var(--primary); }

/* ===== profile actions / user list =================================== */
.profile-actions { display: flex; flex-direction: column; gap: 8px; min-width: 120px; }
.profile-actions form { margin: 0; }
.profile-stats a { color: var(--text-soft); }
.profile-stats a:hover { color: var(--primary); }
.profile-stats a b { color: var(--text); }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--border); }
.user-row:first-child { border-top: none; }
.user-row-bio { font-size: 13px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; }

/* ===== messages ====================================================== */
.msg-notice {
  background: #fff7e6; border: 1px solid #f0d9a8; color: #8a6320;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px;
  margin-bottom: 16px;
}
.conv-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
  border-top: 1px solid var(--border); color: var(--text);
}
.conv-row:first-child { border-top: none; }
.conv-row:hover { background: var(--bg); }
.conv-main { flex: 1; min-width: 0; }
.conv-name b { font-weight: 600; }
.conv-preview { font-size: 13px; color: var(--text-faint); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.conv-time { font-size: 12px; color: var(--text-faint); flex-shrink: 0; }
.dm-thread { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; }
.dm { display: flex; flex-direction: column; max-width: 76%; }
.dm-theirs { align-self: flex-start; align-items: flex-start; }
.dm-mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px;
  white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }
.dm-theirs .dm-bubble { background: var(--bg); border-bottom-left-radius: 4px; }
.dm-mine .dm-bubble { background: var(--primary); color: #fff;
  border-bottom-right-radius: 4px; }
.dm-time { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.dm-form { display: flex; gap: 10px; margin-top: 14px;
  border-top: 1px solid var(--border); padding-top: 14px; }
.dm-form textarea { flex: 1; }

/* ===== subject picker ================================================ */
.subject-picker { display: flex; flex-direction: column; gap: 8px; }
.sp-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-select, .sp-input {
  padding: 8px 10px; font-size: 13.5px; min-width: 150px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
}
.sp-input { min-width: 220px; font-family: inherit; }
.sp-select:focus, .sp-input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft); }
.sp-new { display: flex; flex-direction: column; gap: 5px; }
.sp-new label { font-size: 12.5px; color: var(--text-soft); font-weight: 600; }
.sp-newname { max-width: 320px; }
.sp-summary { font-size: 12.5px; }
.sp-summary.ok { color: var(--pos); }
.sp-summary.warn { color: var(--neg); }

/* ===== plaza subject filter ========================================== */
.subject-filter { padding: 0; margin-bottom: 16px; }
.subject-filter > summary {
  padding: 13px 18px; cursor: pointer; font-weight: 600; font-size: 14px;
  list-style: none; color: var(--text-soft);
}
.subject-filter > summary::-webkit-details-marker { display: none; }
.subject-filter > summary:hover { color: var(--text); }
.subject-filter[open] > summary { border-bottom: 1px solid var(--border); }
.subject-filter-body { padding: 16px 18px; display: flex;
  flex-direction: column; gap: 12px; }
.filter-actions { display: flex; gap: 8px; }

/* ===== search block ================================================== */
.search-block {
  background: linear-gradient(135deg, #eef1fd, #f2f0fb);
  border: 1px solid #dfe3f8; border-radius: var(--radius); padding: 26px 24px;
}
.search-block-title { font-size: 19px; font-weight: 800; }
.search-block-sub { color: var(--text-soft); font-size: 13.5px; margin: 4px 0 16px; }
.search-block-row { display: flex; gap: 10px; }
.search-block-row input {
  flex: 1; padding: 11px 14px; font-size: 15px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--card);
}
.search-block-row input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(52, 87, 213, .15); }
.search-cat { margin-top: 12px; }
.search-cat > summary {
  cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 600;
  list-style: none;
}
.search-cat > summary::-webkit-details-marker { display: none; }
.search-cat .subject-picker { margin-top: 10px; }

/* ===== subject tag / breadcrumb ====================================== */
.subject-tag {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
}
.subject-tag:hover { background: var(--primary); color: #fff; }
.subject-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; margin-bottom: 10px; }
.subject-crumb a { color: var(--text-soft); font-weight: 600; }
.subject-crumb a:hover { color: var(--primary); }
.crumb-sep { color: var(--text-faint); }

/* ===== tooltip (hover ?) ============================================ */
.quota-info { display: inline-flex; align-items: center; gap: 4px; }
.tooltip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--border-strong); color: #fff;
  font-size: 11px; font-weight: 700; cursor: help;
  margin-left: 2px; position: relative; vertical-align: middle;
}
.tooltip:hover, .tooltip:focus { background: var(--primary); outline: none; }
.tooltip-text {
  visibility: hidden; opacity: 0; transition: opacity .12s;
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: #fff; padding: 8px 12px;
  border-radius: 6px; font-size: 12.5px; font-weight: 400;
  width: max-content; max-width: 280px; line-height: 1.55;
  z-index: 100; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text {
  visibility: visible; opacity: 1;
}

/* ===== mode banner =================================================== */
.mode-banner {
  background: #fff7e6; color: #8a6320; text-align: center;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  border-bottom: 1px solid #f0d9a8;
}

/* ===== notifications ================================================= */
.noti-badge {
  background: var(--neg); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 0 6px; margin-left: 4px;
  min-width: 16px; display: inline-block; text-align: center; line-height: 16px;
}
.noti-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 10px;
  border-top: 1px solid var(--border); color: var(--text);
}
.noti-row:first-child { border-top: none; }
.noti-row:hover { background: var(--bg); }
.noti-dot {
  width: 8px; height: 8px; border-radius: 50%; background: transparent;
  margin-top: 6px; flex-shrink: 0;
}
.noti-row.unread { background: var(--primary-soft); }
.noti-row.unread:hover { background: #e4e9fc; }
.noti-row.unread .noti-dot { background: var(--primary); }
.noti-main { flex: 1; }
.noti-text { font-size: 14px; }
.noti-time { font-size: 12px; color: var(--text-faint); margin-top: 3px; }

/* ===== bookmark rows ================================================= */
.bookmark-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0; border-top: 1px solid var(--border);
}
.bookmark-row:first-child { border-top: none; }

/* ===== markdown content =============================================== */
/* Constrain so very long unbroken tokens (URLs, hashes) can break,
   and so block children inherit a 0 min-width context. */
.md { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.md p { margin: 8px 0; }
.md p:first-child { margin-top: 0; }
.md p:last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 18px 0 8px; line-height: 1.4; font-weight: 700; }
.md h1 { font-size: 22px; }
.md h2 { font-size: 19px; }
.md h3 { font-size: 17px; }
.md h4 { font-size: 15px; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md a { color: var(--primary); text-decoration: underline; }
.md a:hover { color: var(--primary-dark); }
.md blockquote {
  margin: 10px 0; padding: 4px 14px;
  border-left: 3px solid var(--border-strong); color: var(--text-soft);
}
.md code {
  background: var(--bg); padding: 1px 5px; border-radius: 3px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.md pre {
  background: #f6f8fa; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  overflow-x: auto; max-width: 100%;
  margin: 12px 0; font-size: 13px; line-height: 1.55;
}
/* Within <pre>, opt OUT of the markdown-wide overflow-wrap so code
   columns stay aligned; the wrapper <pre> handles horizontal scroll. */
.md pre, .md pre code {
  overflow-wrap: normal; word-break: normal; white-space: pre;
}
.md pre code {
  background: transparent; padding: 0; border-radius: 0; font-size: inherit;
}
/* Wide tables also scroll within the markdown column rather than push
   the page wider on mobile. */
.md table { border-collapse: collapse; margin: 12px 0; font-size: 14px;
  display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 12px; }
.md th { background: var(--bg); font-weight: 600; }
.md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.mention { color: var(--primary); font-weight: 600; text-decoration: none; }
.mention:hover { text-decoration: underline; }

/* ===== link chip (rendered for standalone URL lines) ================= */
.md .lp-chip {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
  text-decoration: none; transition: border-color .12s, background .12s;
  max-width: 100%; min-width: 0;
}
.md .lp-chip:hover {
  border-color: var(--primary); background: var(--primary-soft);
  text-decoration: none;
}
.md .lp-favicon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 4px; background: var(--bg); object-fit: contain;
}
.md .lp-text {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.35;
}
.md .lp-host {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md .lp-path {
  font-size: 12px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== Pygments syntax highlight (friendly) ========================== */
.md .highlight {
  background: #f6f8fa; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin: 12px 0;
  overflow-x: auto; max-width: 100%;
  font-size: 13px; line-height: 1.55;
}
.md .highlight pre {
  background: transparent; border: none; border-radius: 0; margin: 0;
  padding: 12px 14px;
}
.highlight .hll { background-color: #ffffcc }
.highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf,
.highlight .c1 { color: #60A0B0; font-style: italic }
.highlight .err { border: 1px solid #F00 }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
.highlight .kr, .highlight .ow { color: #007020; font-weight: bold }
.highlight .kp, .highlight .nb, .highlight .bp, .highlight .ne,
.highlight .cp { color: #007020 }
.highlight .o { color: #666 }
.highlight .cs { color: #60A0B0; background-color: #FFF0F0 }
.highlight .gd { color: #A00000 }
.highlight .ge { font-style: italic }
.highlight .gr { color: #F00 }
.highlight .gh { color: #000080; font-weight: bold }
.highlight .gi { color: #00A000 }
.highlight .go { color: #888 }
.highlight .gp { color: #C65D09; font-weight: bold }
.highlight .gs { font-weight: bold }
.highlight .gu { color: #800080; font-weight: bold }
.highlight .gt { color: #04D }
.highlight .kt { color: #902000 }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il { color: #40A070 }
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc,
.highlight .dl, .highlight .s2, .highlight .sh, .highlight .s1,
.highlight .na { color: #4070A0 }
.highlight .sd { color: #4070A0; font-style: italic }
.highlight .se { color: #4070A0; font-weight: bold }
.highlight .si { color: #70A0D0; font-style: italic }
.highlight .sx { color: #C65D09 }
.highlight .sr { color: #235388 }
.highlight .ss { color: #517918 }
.highlight .nc, .highlight .nn { color: #0E84B5; font-weight: bold }
.highlight .no { color: #60ADD5 }
.highlight .nd { color: #555; font-weight: bold }
.highlight .ni { color: #D55537; font-weight: bold }
.highlight .nf, .highlight .fm { color: #06287E }
.highlight .nl { color: #002070; font-weight: bold }
.highlight .nt { color: #062873; font-weight: bold }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi,
.highlight .vm { color: #BB60D5 }

/* ===== trending widget =============================================== */
.trending-card { margin-bottom: 16px; }
.trending-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.trending-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 13px; font-weight: 600;
}
.trending-tag:hover { background: var(--primary); color: #fff; }
.trending-tag span { font-size: 11px; opacity: .75; }

/* ===== overview / stats ============================================== */
.overview-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px; text-align: center;
}
.stat-n {
  font-size: 28px; font-weight: 800; color: var(--primary); line-height: 1.2;
}
.stat-l { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; }
.rank-list { list-style: decimal; padding-left: 24px; margin-top: 12px; }
.rank-list li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.rank-list li:first-child { border-top: none; }

@media (max-width: 820px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; }
  .usermenu-name { display: none; }
  .search-form { display: none; }
  .profile-head { flex-wrap: wrap; }
  .profile-actions { flex-direction: row; width: 100%; min-width: 0; }
  .profile-actions form { flex: 1; }
}

/* ===== dark mode (auto, follows OS preference) ====================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --card: #161b22;
    --text: #e6edf3;
    --text-soft: #adbac7;
    --text-faint: #768390;
    --border: #30363d;
    --border-strong: #484f58;
    --primary: #58a6ff;
    --primary-dark: #79b8ff;
    --primary-soft: #1c2c4a;
    --pos: #3fb950;
    --pos-soft: #122a1a;
    --neg: #f85149;
    --neg-soft: #2d1416;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .45);
  }

  /* Lightly-tinted notice / banner backgrounds */
  .msg-success { background: #122a1a; border-color: #1f5530; color: #7ee787; }
  .msg-error { background: #2d1416; border-color: #6a1f1c; color: #ffa198; }
  .msg-notice,
  .mode-banner {
    background: #2b1f04; color: #f0c674; border-color: #4a3508;
  }
  .reply-banner { background: var(--primary-soft); border-color: #2c3a5c; color: #c5d4ff; }

  /* The search hero on the home page */
  .search-block {
    background: linear-gradient(135deg, #1c2c4a, #1a1f36);
    border-color: #2c3a5c;
  }
  .search-block-row input { background: var(--card); }

  /* Notification "unread" row */
  .noti-row.unread:hover { background: #243559; }

  /* Code blocks: GitHub-dark grays */
  .md pre,
  .md .highlight { background: #1a1f27; border-color: #30363d; }
  .md code { background: #1a1f27; }

  /* Pygments — dark-friendly token colors (overrides the light defaults) */
  .highlight .hll { background-color: #2a2a00 }
  .highlight .c, .highlight .ch, .highlight .cm, .highlight .cpf,
  .highlight .c1 { color: #8b949e; font-style: italic }
  .highlight .cs { color: #8b949e; background-color: #2d1f1f }
  .highlight .err { border-color: #f85149 }
  .highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
  .highlight .kr, .highlight .ow { color: #ff7b72; font-weight: bold }
  .highlight .kp, .highlight .nb, .highlight .bp, .highlight .ne,
  .highlight .cp { color: #ff7b72 }
  .highlight .o { color: #c9d1d9 }
  .highlight .kt { color: #ffa657 }
  .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
  .highlight .mi, .highlight .mo, .highlight .il { color: #79c0ff }
  .highlight .s, .highlight .sa, .highlight .sb, .highlight .sc,
  .highlight .dl, .highlight .s2, .highlight .sh, .highlight .s1,
  .highlight .na { color: #a5d6ff }
  .highlight .sd { color: #a5d6ff; font-style: italic }
  .highlight .se { color: #a5d6ff; font-weight: bold }
  .highlight .si { color: #a5d6ff; font-style: italic }
  .highlight .sx { color: #ffa657 }
  .highlight .sr { color: #a5d6ff }
  .highlight .ss { color: #a5d6ff }
  .highlight .nc, .highlight .nn { color: #f0883e; font-weight: bold }
  .highlight .no { color: #79c0ff }
  .highlight .nd { color: #d2a8ff; font-weight: bold }
  .highlight .ni { color: #ffa657; font-weight: bold }
  .highlight .nf, .highlight .fm { color: #d2a8ff }
  .highlight .nl { color: #ffa657; font-weight: bold }
  .highlight .nt { color: #7ee787; font-weight: bold }
  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi,
  .highlight .vm { color: #d2a8ff }
  .highlight .gd { color: #ffa198 }
  .highlight .gi { color: #7ee787 }
  .highlight .gh { color: #79c0ff; font-weight: bold }
  .highlight .gu { color: #d2a8ff; font-weight: bold }
  .highlight .gp { color: #ffa657; font-weight: bold }
  .highlight .gr { color: #ff7b72 }
  .highlight .gt { color: #79c0ff }
  .highlight .go { color: #768390 }

  /* The DM bubble for "their" messages reads a touch better with more lift */
  .dm-theirs .dm-bubble { background: #21262d; color: var(--text); }

  /* Link preview chip: keep the soft hover background within bounds */
  .md .lp-favicon { background: #21262d; }

  /* Form focus ring (was a fixed rgba of the light-mode primary) */
  input:focus, textarea:focus, select:focus,
  .search-block-row input:focus {
    box-shadow: 0 0 0 3px rgba(88, 166, 255, .25);
  }
}

/* ===== Post revisions =============================================== */
.rev-page .rev-card { padding: 16px; }
.rev-page .rev-head { font-size: .92rem; margin-bottom: 10px; }
.rev-page .rev-arrow {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.rev-page .rev-sep { color: var(--muted); margin: 0 6px; }
.rev-page .rev-section { margin-top: 10px; }
.rev-page .rev-section-title {
  font-size: .9rem; color: var(--muted); margin-bottom: 4px;
}
.rev-page .rev-diff {
  margin: 0; padding: 10px 12px; border-radius: 6px;
  background: #f6f8fa; border: 1px solid #e1e4e8;
  white-space: pre-wrap; word-break: break-word;
  font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace;
  min-width: 0;
}
.rev-page .rev-diff span { display: block; padding: 1px 4px; }
.rev-page .rev-add { background: #e6ffec; color: #03491f; }
.rev-page .rev-del { background: #ffebe9; color: #8b1414; }
.rev-page .rev-meta { color: #6e7781; font-style: italic; }
@media (prefers-color-scheme: dark) {
  .rev-page .rev-diff { background: #0d1117; border-color: #30363d; }
  .rev-page .rev-add { background: rgba(46,160,67,.15); color: #7ee787; }
  .rev-page .rev-del { background: rgba(248,81,73,.15); color: #ff9492; }
  .rev-page .rev-meta { color: #8b949e; }
}

/* ===== Reports ====================================================== */
.btn-muted {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
}
.btn-muted:hover { color: var(--text); border-color: var(--text); }
.report-link {
  font-size: .82rem; color: var(--muted); margin-left: auto;
}
.report-link:hover { color: #c8341c; }
.report-radio {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: .92rem;
}
.report-radio input { accent-color: var(--accent); }

/* ===== Admin dashboard ============================================== */
.dash { max-width: 1100px; margin: 0 auto; }
.dash-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-bottom: 12px;
}
.dash-tabs {
  display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap;
}
.dash-tab {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: .92rem; color: var(--text); text-decoration: none;
}
.dash-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dash-badge {
  background: #c8341c; color: #fff; border-radius: 10px;
  padding: 0 6px; font-size: .78rem; margin-left: 4px;
}
.dash-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 10px 0 6px;
}
.dash-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; min-width: 0;
}
.dash-num { font-size: 1.7rem; font-weight: 700; line-height: 1.15; }
.dash-lbl { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.dash-table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
}
.dash-table th, .dash-table td {
  text-align: left; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.dash-table th { background: rgba(0,0,0,.02); font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .dash-table th { background: rgba(255,255,255,.03); }
}

.dash-filter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-pill {
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--border); font-size: .9rem; text-decoration: none;
  color: var(--text);
}
.dash-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.report-row { padding: 14px 16px; margin-bottom: 12px; }
.report-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: .9rem; align-items: center; margin-bottom: 6px;
}
.report-target { margin: 6px 0 8px; }
.report-quote {
  margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--border);
  background: rgba(0,0,0,.025); color: var(--muted); font-size: .9rem;
  border-radius: 0 4px 4px 0;
}
@media (prefers-color-scheme: dark) {
  .report-quote { background: rgba(255,255,255,.04); }
}
.report-detail {
  background: rgba(0,0,0,.02); padding: 8px 10px; border-radius: 4px;
  font-size: .9rem; margin: 6px 0;
}
.report-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 10px;
}
.report-actions input[type=text] {
  flex: 1 1 200px; min-width: 0;
}
.report-checkbox {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .9rem; color: var(--muted);
}
.report-resolved { font-size: .9rem; margin-top: 8px; }

.tag-open { background: #fff5d6; color: #7a5b00; padding: 2px 8px; border-radius: 4px; font-size: .82rem; }
.tag-resolved { background: #d6f5dc; color: #196b30; padding: 2px 8px; border-radius: 4px; font-size: .82rem; }
.tag-dismissed { background: #e3e3e3; color: #555; padding: 2px 8px; border-radius: 4px; font-size: .82rem; }
@media (prefers-color-scheme: dark) {
  .tag-open { background: rgba(255,200,0,.15); color: #f1c40f; }
  .tag-resolved { background: rgba(46,160,67,.2); color: #7ee787; }
  .tag-dismissed { background: rgba(255,255,255,.08); color: #8b949e; }
}