:root{--bg:#1a0f12;--panel:#2a1419;--line:#7a5a2b;--gold:#f2c66d;--text:#fff3dd;--muted:#e6cfa3;--card:#34181f;--cyan:#6fe7df;--red:#b9373f}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 20% 0%,#3a1218 0%,#1a0f12 48%,#111823 100%);color:var(--text);font-family:'Songti SC','STSong','Kaiti SC','STKaiti','PingFang SC',serif}
.bg-pattern{position:fixed;inset:0;background-image:url('./assets/brocade.svg');background-size:420px 420px;pointer-events:none;opacity:.18}
.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh;position:relative}
.timeline-panel{border-right:1px solid var(--line);padding:18px;background:rgba(35,18,23,.86);backdrop-filter:blur(4px)}
.brand{font-size:22px;color:var(--gold);font-weight:700;letter-spacing:.5px}.sub{color:var(--cyan);font-size:12px;margin:4px 0 16px}
.timeline{display:flex;flex-direction:column;gap:8px;max-height:80vh;overflow:auto;padding-right:4px}
.t-item{border:1px solid #6b4d2a;border-radius:10px;padding:8px 10px;cursor:pointer;background:#2a161c;color:#f2dfbc}
.t-item:hover{transform:translateX(3px);transition:.2s;background:#331b22}.t-item.active{border-color:var(--gold);box-shadow:0 0 0 1px rgba(242,198,109,.35) inset;background:#3b2028}
.content{padding:20px}.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:18px 18px 110px;min-height:260px;background:linear-gradient(135deg,#3a151c,#231319)}
.hero .glow-frame{position:absolute;inset:0;border-radius:16px;pointer-events:none}
.hero .glow-frame::before,.hero .glow-frame::after{content:'';position:absolute;inset:0;border-radius:16px}
.hero .glow-frame::before{border:1px solid rgba(111,231,223,.45);filter:drop-shadow(0 0 8px rgba(111,231,223,.25));opacity:.55;animation:cyanFlow 4.8s linear infinite}
.hero .glow-frame::after{inset:2px;border:1px solid rgba(242,198,109,.45);filter:drop-shadow(0 0 10px rgba(242,198,109,.28));opacity:.6;animation:goldFlow 5.6s linear infinite reverse}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:110px;background:url('./assets/qingming-scroll.jpg') center center/contain no-repeat;opacity:.92;mix-blend-mode:normal}
.hero h1{margin:0;color:var(--gold);position:relative;z-index:3;text-shadow:0 0 18px rgba(242,198,109,.22)}.updated{margin:8px 0 0;color:var(--muted);font-size:13px;position:relative;z-index:3}
.edict-paper{position:absolute;right:12px;top:8px;width:300px;max-width:46%;height:auto;opacity:.95;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.38));animation:sealPulse 4s ease-in-out infinite}
.hero-orbit{position:absolute;right:38px;top:26px;width:118px;height:118px;z-index:3;opacity:.8}
.hero-orbit circle{fill:none;stroke-width:2.2}
.hero-orbit .o1{stroke:#6fe7df;stroke-dasharray:10 14;animation:orbitA 8s linear infinite}
.hero-orbit .o2{stroke:#f2c66d;stroke-dasharray:8 11;animation:orbitB 6.5s linear infinite reverse}
.hero-orbit .o3{stroke:#b9373f;stroke-dasharray:6 9;animation:orbitC 5.2s ease-in-out infinite}
.boards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.board{border:1px solid var(--line);border-radius:14px;padding:12px;background:rgba(38,19,24,.85)}
.board h3{margin:4px 0 10px;color:#ffd48a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.card{position:relative;background:var(--card);border:1px solid #7a5a2b;border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:.22s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.35),0 0 0 1px rgba(111,231,223,.28) inset}
.badge{position:absolute;right:10px;top:10px;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid #7a5a2b;background:#3f2714;color:#ffe6b5}
.badge.urgent{background:#5d1f25;border-color:#c4555d;color:#ffd7d9}
.badge.read{background:#12323a;border-color:#43b7b0;color:#d4fffb}
.card .t{margin:0;font-size:16px;line-height:1.35;padding-right:58px}.card .m{margin:0;font-size:12px;color:#d7c6a6}.card .s{margin:0;font-size:13px;line-height:1.5;color:#f8ecd5}
.card .l{color:#7ce8e0;text-decoration:none;font-size:13px}
@keyframes sealPulse{0%,100%{transform:scale(1) rotate(-2deg);opacity:.72}50%{transform:scale(1.045) rotate(0deg);opacity:.94}}
@keyframes cyanFlow{0%,100%{opacity:.42}50%{opacity:.76}}
@keyframes goldFlow{0%,100%{opacity:.4}50%{opacity:.78}}
@keyframes orbitA{to{transform:rotate(360deg)}}
@keyframes orbitB{to{transform:rotate(360deg)}}
@keyframes orbitC{0%,100%{opacity:.35}50%{opacity:.95}}
@media (max-width:900px){.layout{grid-template-columns:1fr}.timeline-panel{border-right:none;border-bottom:1px solid var(--line)}}