:root {
  color-scheme: light;
  --canvas: #ecebe5;
  --paper: #f8f7f2;
  --paper-2: #f0efe9;
  --ink: #17201c;
  --muted: #68706b;
  --faint: #929892;
  --line: #d7d6cf;
  --forest: #174c38;
  --forest-2: #2d7057;
  --mint: #dbe8df;
  --amber: #b46e2c;
  --amber-soft: #f1dfca;
  --blue-soft: #dfe8ec;
  --shadow: 0 20px 55px rgba(35, 43, 38, .08);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(180,110,44,.12), transparent 28rem),
    radial-gradient(circle at 4% 65%, rgba(23,76,56,.09), transparent 32rem),
    var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  overflow: hidden;
}

button { font: inherit; }
.masthead {
  height: 76px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(181,181,173,.72);
  background: rgba(244,243,237,.84);
  backdrop-filter: blur(18px);
}
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.brand-mark { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--forest); color:white; font:700 21px Georgia,"Songti SC",serif; }
.brand b,.brand small { display:block; }
.brand b { font:600 19px Georgia,"Songti SC",serif; letter-spacing:.05em; }
.brand small { color:var(--muted); font-size:10px; margin-top:2px; letter-spacing:.18em; text-transform:uppercase; }
.global-stats { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:12px; }
.global-stats b { color:var(--ink); }
.live-dot { display:flex; gap:7px; align-items:center; padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.64); }
.live-dot i { width:7px; height:7px; border-radius:50%; background:#71a568; box-shadow:0 0 0 4px rgba(113,165,104,.14); }
.header-action { padding:8px 12px; border:1px solid var(--forest); border-radius:10px; background:var(--forest); color:white; cursor:pointer; font-size:11px; }
.header-action.quiet { border-color:var(--line); background:rgba(255,255,255,.64); color:var(--muted); }
.header-action:disabled { opacity:.55; cursor:wait; }
.header-action[hidden] { display:none; }

.app-shell {
  height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 255px 380px minmax(520px, 1fr);
  gap: 1px;
  background: var(--line);
}
.pane { min-width:0; background:rgba(248,247,242,.92); overflow:hidden; }
.people-pane,.topics-pane { display:flex; flex-direction:column; }
.pane-head { padding:24px 20px 18px; display:flex; align-items:flex-end; justify-content:space-between; }
.kicker { margin:0 0 6px; color:var(--forest-2); font:700 9px/1.25 ui-monospace,monospace; letter-spacing:.17em; }
.pane-head h1,.topic-toolbar h3 { margin:0; font:600 20px/1.2 Georgia,"Songti SC",serif; }
.count { min-width:28px; height:28px; padding:0 8px; display:grid; place-items:center; border-radius:9px; background:var(--mint); color:var(--forest); font:700 12px ui-monospace,monospace; }
.blogger-list { padding:4px 10px 16px; overflow:auto; }
.blogger-card { width:100%; border:0; border-radius:15px; padding:13px 11px; display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.blogger-card:hover,.blogger-card.active { background:#e5e7e0; }
.blogger-card.active { box-shadow:inset 3px 0 var(--forest); }
.blogger-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--forest); color:white; font:600 18px Georgia,"Songti SC",serif; }
.blogger-card:nth-child(3n+2) .blogger-avatar { background:#8b623a; }
.blogger-card:nth-child(3n+3) .blogger-avatar { background:#3f6470; }
.blogger-copy b,.blogger-copy small { display:block; }
.blogger-copy b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.blogger-copy small { margin-top:4px; color:var(--muted); font-size:10px; }
.blogger-card .topic-num { color:var(--faint); font:700 10px ui-monospace,monospace; }
.pane-foot { margin-top:auto; padding:16px 18px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.65; }
.pane-foot p { margin:0; }

.profile-head { padding:22px 22px 15px; display:flex; gap:13px; align-items:center; }
.profile-avatar { flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center; border-radius:17px; background:var(--forest); color:white; font:600 23px Georgia,"Songti SC",serif; }
.profile-copy { min-width:0; }
.profile-copy h2 { margin:0 0 4px; font:600 20px/1.2 Georgia,"Songti SC",serif; }
.profile-copy > p:last-child { margin:0; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-metrics { margin:0 18px 16px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.5); }
.mini-metrics div { padding:10px 5px; text-align:center; border-right:1px solid var(--line); }
.mini-metrics div:last-child { border-right:0; }
.mini-metrics strong,.mini-metrics span { display:block; }
.mini-metrics strong { font:600 18px Georgia,serif; }
.mini-metrics span { margin-top:3px; color:var(--muted); font-size:9px; }
.topic-toolbar { padding:16px 20px 12px; display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid var(--line); }
.topic-toolbar button { padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:white; color:var(--muted); cursor:pointer; font-size:11px; }
.topic-list { flex:1; padding:2px 10px 18px; overflow:auto; }
.topic-pagination { padding:11px 13px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; border-top:1px solid var(--line); background:rgba(248,247,242,.96); }
.topic-pagination[hidden] { display:none; }
.topic-pagination button { padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--ink); cursor:pointer; font-size:10px; }
.topic-pagination button:disabled { color:var(--faint); cursor:not-allowed; }
.topic-pagination span { text-align:center; color:var(--muted); font-size:9px; }
.topic-card { width:100%; margin-bottom:7px; padding:15px; border:1px solid transparent; border-radius:15px; background:transparent; text-align:left; color:inherit; cursor:pointer; }
.topic-card:hover { background:#eeeee8; }
.topic-card.active { border-color:#c7d5cc; background:#e8eee9; }
.topic-topline { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:9px; }
.topic-topline .grade { min-width:22px; padding:3px 6px; border-radius:6px; background:var(--amber-soft); color:#85501f; text-align:center; font-weight:700; }
.topic-topline .scope { margin-left:auto; padding:3px 7px; border-radius:999px; background:#e5eee7; color:var(--forest-2); font-weight:700; }
.topic-topline .scope.external_activity { background:#e7edf0; color:#355b66; }
.topic-card h4 { margin:9px 0 6px; font-size:14px; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.topic-card > p { margin:0; color:var(--muted); font-size:11px; line-height:1.58; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.topic-foot { margin-top:11px; display:flex; gap:10px; color:var(--faint); font-size:9px; }
.repost-notes { margin-top:16px; display:grid; gap:10px; }
.repost-note { padding:14px 16px; border:1px solid #b9d1c0; border-left:4px solid var(--forest-2); border-radius:12px; background:#edf5ef; }
.repost-note-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--forest-2); font-size:10px; }
.repost-note-head b { font-size:12px; }
.repost-note p { margin:9px 0 0; color:var(--ink); font-size:13px; line-height:1.75; white-space:pre-wrap; }

.thread-pane { overflow:auto; background:var(--paper); }
.thread-empty { min-height:100%; padding:40px; display:grid; place-content:center; text-align:center; }
.empty-mark { width:76px; height:76px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--forest); color:var(--forest); font:36px Georgia,"Songti SC",serif; }
.thread-empty h2 { margin:0 0 10px; font:600 26px Georgia,"Songti SC",serif; }
.thread-empty p { max-width:430px; margin:0; color:var(--muted); line-height:1.8; }
.thread-layout { max-width:900px; margin:0 auto; padding:34px 42px 80px; }
.thread-head { margin-bottom:22px; }
.breadcrumbs { display:flex; gap:7px; align-items:center; color:var(--forest-2); font-size:10px; }
.breadcrumbs i { color:var(--faint); font-style:normal; }
.thread-head h2 { margin:10px 0 12px; font:600 clamp(25px,3vw,38px)/1.3 Georgia,"Songti SC",serif; letter-spacing:-.025em; }
.thread-meta { display:flex; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:10px; }
.thread-meta span { padding:5px 8px; border-radius:7px; background:var(--paper-2); }
.restriction-note { margin:0 0 14px; padding:11px 13px; border:1px solid #ddc89d; border-radius:10px; background:#fff6df; color:#765521; font-size:11px; line-height:1.6; }
.restriction-note[hidden] { display:none; }
.content-card { padding:22px 24px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow); }
.card-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.card-label b { color:var(--forest); font-size:11px; }
.card-label span { color:var(--faint); font-size:9px; }
.content-body { white-space:pre-wrap; font-size:15px; line-height:1.9; }
.content-actions { margin-top:17px; display:flex; flex-wrap:wrap; gap:13px; color:var(--muted); font-size:10px; }
.media-grid { margin-top:16px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; }
.media-grid a { display:block; max-width:min(100%,520px); }
.media-grid img { display:block; width:auto; max-width:100%; max-height:420px; object-fit:contain; border-radius:12px; border:1px solid var(--line); background:var(--paper-2); }
.comment-node .media-grid img { max-height:300px; }
.section-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.section-label span,.section-label-text { font:600 15px Georgia,"Songti SC",serif; }
.section-label small,.conversation-head small { color:var(--muted); }
.conversation-section { margin-top:31px; }
.conversation-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:15px; }
.conversation-head > div:first-child { display:flex; gap:9px; align-items:baseline; }
.conversation-tree { display:grid; gap:10px; }
.comment-branch { position:relative; min-width:0; }
.comment-node { position:relative; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:white; }
.comment-children { position:relative; display:grid; gap:9px; margin:9px 0 0 28px; padding-left:17px; }
.comment-children:before { content:""; position:absolute; left:0; top:-9px; bottom:18px; width:1px; background:#bfc6c0; }
.comment-children > .comment-branch:before { content:""; position:absolute; left:-17px; top:25px; width:17px; height:1px; background:#bfc6c0; }
.comment-node.author { border-color:#9ebda7; border-left:3px solid var(--forest-2); background:#eef4ef; }
.comment-node.context { opacity:.78; }
.comment-head { display:flex; justify-content:space-between; gap:14px; margin-bottom:7px; color:var(--muted); font-size:9px; }
.comment-author { display:flex; align-items:center; gap:8px; min-width:0; }
.comment-author > span:nth-child(2) { display:grid; gap:1px; }
.comment-author small { color:var(--faint); font-size:8px; font-weight:400; }
.comment-avatar { flex:0 0 28px; width:28px; height:28px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--paper-2); color:var(--forest-2); font-size:11px; font-weight:700; }
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
.comment-head b { color:var(--ink); font-size:11px; }
.comment-head .author-badge { margin-left:6px; padding:2px 5px; border-radius:5px; background:var(--forest); color:white; font-size:8px; }
.comment-node p { margin:0; white-space:pre-wrap; font-size:12px; line-height:1.72; }
.comment-foot { margin-top:9px; display:flex; gap:10px; color:var(--faint); font-size:8px; }
.reply-level { color:var(--forest-2); font-weight:700; }
.relation-badge { padding:2px 6px; border-radius:999px; font-weight:700; }
.relation-badge.pending { color:#87531f; background:var(--amber-soft); }
.relation-badge.provisional { color:#355b66; background:var(--blue-soft); }
.relation-badge.confirmed { color:var(--forest); background:var(--mint); }
.comment-node.relation-pending { border-style:dashed; }
.empty { padding:38px 16px; text-align:center; color:var(--muted); font-size:11px; line-height:1.7; }

.link-dialog { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(15,25,20,.48); backdrop-filter:blur(8px); }
.link-dialog[hidden] { display:none; }
.link-dialog-card { width:min(560px,100%); padding:28px; border:1px solid rgba(255,255,255,.45); border-radius:20px; background:var(--paper); box-shadow:0 28px 90px rgba(20,32,25,.28); }
.link-dialog-card h2 { margin:0 0 9px; font:600 25px Georgia,"Songti SC",serif; }
.link-dialog-card > p:not(.kicker) { margin:0 0 18px; color:var(--muted); font-size:12px; line-height:1.65; }
.link-output { display:grid; grid-template-columns:1fr auto; gap:8px; }
.link-output input { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); }
.link-output button,.dialog-close { padding:10px 15px; border:0; border-radius:10px; background:var(--forest); color:white; cursor:pointer; }
.dialog-close { margin-top:12px; width:100%; border:1px solid var(--line); background:transparent; color:var(--muted); }

.auth-page { overflow:auto; background:var(--canvas); }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(360px,.9fr); }
.auth-intro { padding:clamp(48px,8vw,112px); display:flex; flex-direction:column; justify-content:center; color:white; background:linear-gradient(145deg,#11382a 0%,#1f6249 64%,#9a6335 150%); }
.auth-intro .brand-mark { margin-bottom:48px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); }
.auth-intro .kicker { color:#bcdac8; }
.auth-intro h1 { margin:8px 0 22px; font:600 clamp(40px,5vw,72px)/1.15 Georgia,"Songti SC",serif; letter-spacing:-.04em; }
.auth-intro > p:last-child { max-width:480px; margin:0; color:#d7e6dc; font-size:14px; line-height:1.85; }
.auth-card { align-self:center; width:min(430px,calc(100% - 48px)); margin:24px auto; padding:38px; border:1px solid var(--line); border-radius:22px; background:rgba(248,247,242,.96); box-shadow:var(--shadow); }
.auth-card h2 { margin:5px 0 28px; font:600 31px Georgia,"Songti SC",serif; }
.auth-card label { display:block; margin:15px 0 7px; color:var(--muted); font-size:11px; }
.auth-card input { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); font:inherit; outline:none; }
.auth-card input:focus { border-color:var(--forest-2); box-shadow:0 0 0 3px rgba(45,112,87,.12); }
.auth-card > button { width:100%; margin-top:22px; padding:13px; border:0; border-radius:11px; background:var(--forest); color:white; cursor:pointer; font-weight:600; }
.auth-card > button:disabled { opacity:.65; cursor:wait; }
.form-error { margin:12px 0 0; padding:9px 11px; border-radius:8px; background:#f7e3df; color:#8d3d31; font-size:11px; }
.form-error[hidden] { display:none; }
.auth-shell.single { display:grid; place-items:center; }
.invalid-link-card { text-align:center; }
.invalid-link-card .brand-mark { margin:0 auto 25px; }
.invalid-link-card h1 { margin:8px 0 12px; font:600 29px Georgia,"Songti SC",serif; }
.invalid-link-card > p:last-child { margin:0; color:var(--muted); line-height:1.7; }

@media (max-width: 1180px) {
  body { overflow:auto; }
  .app-shell { height:auto; min-height:calc(100vh - 76px); grid-template-columns:220px 340px minmax(480px,1fr); overflow:auto; }
}
@media (max-width: 900px) {
  .global-stats span:not(.live-dot) { display:none; }
  .app-shell { display:block; }
  .people-pane,.topics-pane,.thread-pane { min-height:auto; border-bottom:1px solid var(--line); }
  .people-pane { max-height:260px; }
  .pane-foot { display:none; }
  .blogger-list { display:flex; gap:7px; overflow:auto; }
  .blogger-card { min-width:220px; }
  .topic-list { max-height:360px; }
  .thread-pane { min-height:600px; }
  .auth-shell { grid-template-columns:1fr; }
  .auth-intro { min-height:42vh; padding:48px 28px; }
  .auth-intro .brand-mark { margin-bottom:25px; }
}
@media (max-width: 560px) {
  .masthead { padding:0 14px; }
  .global-stats { gap:8px; }
  .thread-layout { padding:27px 17px 60px; }
  .profile-head { padding-left:17px; padding-right:17px; }
  .conversation-head { align-items:flex-start; flex-direction:column; }
  .comment-children { margin-left:14px; padding-left:13px; }
  .comment-children > .comment-branch:before { left:-13px; width:13px; }
  .global-stats { gap:6px; }
  .header-action { padding:7px 8px; }
  .auth-card { width:calc(100% - 28px); padding:27px 22px; }
}