:root {
  --a72: #1e3a8a;
  --m1: #fbbf24;
  --u55: #f0f9ff;
  --u83: #ffffff;
  --p7: #64748b;
  --w38: #e2e8f0;
  --p29: #ef4444;
  --j72: #22c55e;
  --b18: 4px;
  --x46: 8px;
  --m90: 12px;
  --u70: 4px;
  --w68: 8px;
  --q23: 16px;
  --n55: 24px;
  --x85: 32px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--u55);
  color: var(--a72);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--a72); text-decoration: none; transition: color .2s; }
a:hover { color: var(--m1); }

.wd-chip { max-width: 1200px; margin: 0 auto; padding: 0 var(--q23); }

/* Header */
.top-bar { background: var(--a72); color: #fff; padding: var(--w68) 0; font-size: 13px; }
.top-bar a { color: #93c5fd; }
.sl-item { background: var(--u83); border-bottom: 3px solid var(--m1); padding: var(--q23) 0; }
.sl-item h1 { font-size: 28px; color: var(--a72); }
.sl-item .a7s8g9 { font-size: 14px; color: var(--p7); margin-top: var(--u70); }

/* Navigation */
.vw-card { background: var(--u83); border-radius: var(--x46); padding: var(--q23); margin: var(--q23) 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.vw-card .y5l6g4 { display: flex; flex-wrap: wrap; gap: var(--w68); list-style: none; }
.vw-card .lq-box { padding: var(--w68) var(--q23); background: var(--u55); border-radius: var(--b18); font-size: 14px; border: 1px solid var(--w38); }
.vw-card .lq-box:hover { border-color: var(--m1); background: #fffbeb; }

/* Post list */
.xz-col { background: var(--u83); border-radius: var(--x46); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
._6btdm { display: flex; align-items: center; padding: var(--q23); border-bottom: 1px solid var(--w38); gap: var(--q23); }
._6btdm:last-child { border-bottom: none; }
._6btdm:hover { background: var(--u55); }
.r8u1m5 { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 12px; font-weight: 600; margin-right: var(--u70); }
.sl-col { background: var(--p29); color: #fff; }
.sl-flow { background: var(--m1); color: var(--a72); }
.pn-body { background: #dbeafe; color: var(--a72); }
.nf-cell { font-weight: 600; font-size: 15px; flex: 1; }
.xz-foot { font-size: 12px; color: var(--p7); display: flex; gap: var(--q23); align-items: center; }

/* Avatar */
._njff4 { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0; }

/* Sidebar */
.zt-area { display: grid; grid-template-columns: 1fr 320px; gap: var(--n55); margin: var(--q23) 0; }
.cy-foot { background: var(--u83); border-radius: var(--x46); padding: var(--q23); margin-bottom: var(--q23); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cy-foot .r7o2i8 { font-size: 16px; font-weight: 600; padding-bottom: var(--w68); border-bottom: 2px solid var(--m1); margin-bottom: var(--q23); }

/* User card */
.w1s5r2 { display: flex; align-items: center; gap: var(--w68); padding: var(--w68) 0; border-bottom: 1px solid var(--w38); }
.w1s5r2:last-child { border-bottom: none; }
.zt-body { flex: 1; }
.zt-body .bw-flow { font-weight: 600; font-size: 14px; }
.zt-body .cy-cell { font-size: 12px; color: var(--p7); }
.q6l6k9 { font-size: 12px; color: var(--m1); font-weight: 600; }

/* Topic tags */
._9kbdr { display: inline-block; padding: var(--u70) var(--w68); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 20px; font-size: 13px; margin: 3px; color: var(--a72); }
._9kbdr:hover { background: #dbeafe; }

/* Comments */
.sl-foot { background: var(--u83); border-radius: var(--x46); padding: var(--n55); margin: var(--q23) 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.sl-foot .j4g5f2 { font-size: 18px; font-weight: 600; margin-bottom: var(--q23); padding-bottom: var(--w68); border-bottom: 2px solid var(--m1); }
.bx-wrap { display: flex; gap: var(--q23); padding: var(--q23) 0; border-bottom: 1px solid var(--w38); }
.bx-wrap:last-child { border-bottom: none; }
._yiipm { flex: 1; }
._yiipm ._xd9mm { font-weight: 600; font-size: 14px; }
._yiipm .lq-item { font-size: 12px; color: var(--p7); margin-left: var(--w68); }
._yiipm .f6m7x7 { margin-top: var(--u70); font-size: 14px; line-height: 1.7; }
._yiipm .cy-pan { margin-top: var(--w68); font-size: 12px; color: var(--p7); display: flex; gap: var(--q23); }

/* Online indicator */
._nr9ny { display: inline-block; width: 8px; height: 8px; background: var(--j72); border-radius: 50%; margin-right: 6px; animation: pulse-dot 1.5s infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }

/* Marquee */
._q301g { background: var(--a72); color: #93c5fd; padding: 8px 0; overflow: hidden; position: relative; height: 32px; font-size: 13px; }
._q301g .i6n8m8 { position: absolute; white-space: nowrap; animation: scroll-left 30s linear infinite; }
@keyframes scroll-left { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* Stats bar */
.g7z2j7 { background: var(--u83); padding: var(--q23); border-radius: var(--x46); text-align: center; font-size: 14px; color: var(--p7); margin: var(--q23) 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.g7z2j7 span { margin: 0 var(--q23); }
.g7z2j7 strong { color: var(--a72); }

/* Post detail */
.m1l2z9 { background: var(--u83); border-radius: var(--x46); padding: var(--n55); margin: var(--q23) 0; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
._cvbin { display: flex; gap: var(--n55); padding: var(--n55) 0; border-bottom: 1px solid var(--w38); }
._cvbin:last-child { border-bottom: none; }
.jm-mark { width: 140px; text-align: center; flex-shrink: 0; }
.jm-mark ._njff4 { width: 56px; height: 56px; font-size: 20px; margin: 0 auto var(--w68); }
.jm-mark .r9r2g5 { font-weight: 600; font-size: 14px; }
.jm-mark ._r10xr { font-size: 12px; color: var(--p7); margin-top: 2px; }
.n3a6f3 { flex: 1; }
.n3a6f3 .f2q3o3 { font-size: 12px; color: var(--p7); margin-bottom: var(--w68); }
.n3a6f3 .p9f2s4 { font-size: 15px; line-height: 1.8; }
.n3a6f3 .j4p1u1 { margin-top: var(--q23); display: flex; gap: var(--q23); font-size: 13px; color: var(--p7); }
.n3a6f3 ._tdkyi { width: 100%; height: 200px; border-radius: var(--x46); margin: var(--q23) 0; }

/* Breadcrumb */
.nf-box { font-size: 13px; color: var(--p7); padding: var(--q23) 0; }
.nf-box a { color: var(--a72); }
.nf-box span { margin: 0 var(--u70); }

/* Pagination */
.wd-box { display: flex; gap: var(--u70); justify-content: center; padding: var(--q23) 0; }
.wd-box a, .wd-box span { padding: 6px 12px; border: 1px solid var(--w38); border-radius: var(--b18); font-size: 13px; }
.wd-box .p8q2c9 { background: var(--a72); color: #fff; border-color: var(--a72); }

/* New post button */
.gk-unit { display: inline-block; padding: var(--w68) var(--n55); background: var(--m1); color: var(--a72); font-weight: 600; border-radius: var(--x46); font-size: 15px; border: none; cursor: pointer; }
.gk-unit:hover { background: #f59e0b; color: #fff; }

/* Footer */
._kacgb { background: var(--a72); color: #93c5fd; padding: var(--x85) 0; margin-top: var(--x85); font-size: 13px; }
._kacgb a { color: #bfdbfe; }
._kacgb .bx-tag { display: flex; flex-wrap: wrap; gap: var(--q23); margin-bottom: var(--q23); }

/* Highlight badge */
.k5n7b4 { background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 3px; font-size: 11px; }

/* Responsive */
@media (max-width: 1024px) {
  .zt-area { grid-template-columns: 1fr 280px; }
}
@media (max-width: 768px) {
  .zt-area { grid-template-columns: 1fr; }
  ._cvbin { flex-direction: column; }
  .jm-mark { width: 100%; display: flex; align-items: center; gap: var(--w68); text-align: left; }
  .jm-mark ._njff4 { margin: 0; width: 40px; height: 40px; font-size: 16px; }
}
@media (max-width: 480px) {
  .wd-chip { padding: 0 var(--w68); }
  ._6btdm { flex-direction: column; align-items: flex-start; }
  .xz-foot { flex-wrap: wrap; }
}