:root{--bg:#F6EFE3;--card:#FFFDF6;--red:#C03A2B;--red-deep:#7E1510;--gold:#D9A441;--gold-light:#F2D8A0;--gold-soft:#F7E7C0;--ink:#3A2A1E;--ink-2:#6B5D4F;--muted:#9A8B78;--muted-2:#8C7B6B;--input-bg:#F7F1E6;--input-border:#E8DCC3;--tag-red-bg:#FBEDE7;--tag-gray-bg:#F3EEE5;--shadow:0 4px 12px rgba(58,42,30,0.06);--r:8px;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;background:#2A2520;color:var(--ink);-webkit-font-smoothing:antialiased;}
body{display:flex;justify-content:center;min-height:100vh;}
.page{width:100%;max-width:840px;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;}
.topic-hero{background:linear-gradient(to bottom,#BF3024,#7E1510);padding:24px 16px 28px;color:#F6EFE3;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;}
.topic-nav{width:100%;display:flex;justify-content:space-between;align-items:center;}
.topic-nav a{color:var(--gold-light);text-decoration:none;font-size:14px;font-weight:500;}
.topic-nav a:hover{text-decoration:underline;}
.topic-brand{font-size:20px;font-weight:700;color:var(--gold-light);}
.topic-hero h1{font-size:32px;font-weight:700;color:var(--gold-soft);}
.topic-hero p{font-size:14px;color:var(--gold-cream, #E8C887);line-height:1.7;max-width:560px;}
.topic-content{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px;}
.card{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;}
.card-title-row{display:flex;justify-content:space-between;align-items:center;}
.card-title-left{display:flex;align-items:center;gap:8px;}
.title-bar{width:4px;height:18px;border-radius:2px;background:var(--red);}
.card-title{font-size:17px;font-weight:700;color:var(--ink);margin:0;}
.card-title-tag{font-size:12px;color:var(--muted);}
.topic-item{display:block;text-decoration:none;color:inherit;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--r);padding:12px;transition:border-color .15s,background .15s,box-shadow .15s;}
.topic-item:hover{border-color:var(--red);background:var(--card);box-shadow:0 4px 12px rgba(192,58,43,0.12);}
.topic-item:active{opacity:0.85;}
.topic-item-top{display:flex;justify-content:space-between;align-items:center;}
.topic-item-date{font-size:16px;font-weight:700;color:var(--red);}
.topic-item-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap;}
.badge-ji{background:var(--tag-red-bg);color:var(--red);}
.badge-xiong{background:var(--tag-gray-bg);color:var(--muted-2);}
.topic-item-sub{font-size:12px;color:var(--muted);margin-top:6px;}
.topic-item-yi{font-size:12px;color:var(--ink-2);margin-top:6px;}
.topic-tips{display:flex;flex-direction:column;gap:8px;}
.topic-tip{font-size:13px;color:var(--ink-2);line-height:1.6;padding-left:16px;position:relative;}
.topic-tip::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold);}
.topic-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.topic-link{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:var(--r);background:var(--input-bg);border:1px solid var(--input-border);color:var(--ink-2);font-size:13px;text-decoration:none;white-space:nowrap;}
.topic-link:hover{border-color:var(--red);color:var(--red);}
.topic-link-active{background:linear-gradient(to right,#BF3024,#991F16);color:var(--card);border-color:transparent;font-weight:700;}
.topic-empty{font-size:13px;color:var(--muted);text-align:center;padding:10px;}
.topic-footer{text-align:center;padding:16px;color:var(--muted);font-size:12px;}
.month-nav{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;}
.month-nav-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:var(--r);border:1px solid rgba(242,216,160,0.7);background:rgba(255,255,255,0.12);color:#FFE9C4;font-size:13px;text-decoration:none;white-space:nowrap;}
.month-nav-btn:hover{background:rgba(255,255,255,0.2);}
.month-picker{display:flex;flex-wrap:wrap;gap:6px;width:100%;}
.month-pill{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:6px 10px;border-radius:6px;background:var(--input-bg);border:1px solid var(--input-border);color:var(--ink-2);font-size:13px;text-decoration:none;}
.month-pill:hover{border-color:var(--red);color:var(--red);}
.month-pill-active{background:linear-gradient(to right,#BF3024,#991F16);color:var(--card);border-color:transparent;font-weight:700;}
.period-label{font-size:12px;color:var(--muted);margin-top:2px;}
.day-item{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--r);padding:10px 12px;transition:border-color .15s,box-shadow .15s;}
.day-item-huang{border-color:var(--gold);background:var(--tag-red-bg);}
.day-item:hover{box-shadow:0 4px 12px rgba(192,58,43,0.12);}
.day-item:active{opacity:0.85;}
.day-top{display:flex;justify-content:space-between;align-items:center;}
.day-solar{font-size:15px;font-weight:700;color:var(--ink);}
.day-lunar{font-size:12px;color:var(--muted);}
.day-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;}
.day-sub{font-size:12px;color:var(--muted);}
.day-yiji{font-size:12px;color:var(--ink-2);}
.day-yiji .yi{color:var(--red);}
.day-yiji .ji{color:var(--muted-2);}
.year-month{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--red);margin:0 0 2px;}
.year-month .ym-count{font-size:12px;font-weight:500;color:var(--muted);}
.year-day{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--input-border);font-size:13px;text-decoration:none;color:inherit;border-radius:4px;transition:background .15s;}
.year-day:hover{background:var(--tag-red-bg);}
.year-day:active{opacity:0.85;}
.year-day:last-child{border-bottom:none;}
.year-day .yd-left{display:flex;align-items:baseline;gap:8px;min-width:0;}
.year-day .yd-date{color:var(--ink);font-weight:600;white-space:nowrap;}
.year-day .yd-lunar{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.year-day .yd-shen{font-size:12px;color:var(--red);white-space:nowrap;}
.year-nav{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;}
.year-nav a{display:inline-flex;align-items:center;padding:6px 16px;border-radius:var(--r);border:1px solid rgba(242,216,160,0.7);background:rgba(255,255,255,0.12);color:#FFE9C4;font-size:13px;text-decoration:none;white-space:nowrap;}
.year-nav a:hover{background:rgba(255,255,255,0.2);}
.year-nav .year-cur{font-size:15px;font-weight:700;color:var(--gold-soft);}
@media(min-width:768px){.topic-content{padding:24px;gap:14px;}.card{padding:18px;}.topic-hero{padding:32px 24px 36px;}.topic-links{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;}.topic-link{padding:8px 4px;font-size:12px;}}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 16px;font-size:13px;color:var(--muted-2);background:var(--card);border-bottom:1px solid var(--input-border);}
.breadcrumb a{color:var(--muted-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--red);text-decoration:underline;}
.breadcrumb .bc-sep{color:var(--placeholder);}
.breadcrumb .bc-current{color:var(--ink);font-weight:500;}
.faq-item{padding:10px 0;border-bottom:1px dashed var(--input-border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.5;}
.faq-q::before{content:"Q ";color:var(--red);font-weight:700;}
.faq-a{font-size:13px;color:var(--ink-2);line-height:1.7;}
.faq-a::before{content:"A ";color:var(--gold);font-weight:700;}