/* ============ 基础 ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0f1419; --panel:#1a2029; --panel2:#222b36; --line:#2d3845;
  --txt:#e6edf3; --txt2:#9aa7b4; --txt3:#6b7785;
  --brand:#4f8cff; --brand2:#36cfc9; --gold:#fbbf24; --red:#f87171; --green:#34d399; --purple:#a78bfa;
  --shadow:0 4px 20px rgba(0,0,0,.35);
}
html,body{ background:var(--bg); color:var(--txt); font-family:"PingFang SC","Microsoft YaHei",-apple-system,Segoe UI,Roboto,sans-serif; font-size:15px; line-height:1.6; }
a{ color:var(--brand); text-decoration:none; }
.hidden{ display:none !important; }

/* ============ 顶部栏 ============ */
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; background:linear-gradient(135deg,#161d27,#1d2632); border-bottom:1px solid var(--line); box-shadow:var(--shadow); flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:14px; }
.logo{ font-size:30px; }
.brand h1{ font-size:19px; font-weight:700; letter-spacing:.5px; }
.sub{ font-size:12px; color:var(--txt2); margin-top:2px; }
.topbar-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.date-box{ text-align:right; }
.date-box #todayDate{ font-size:16px; font-weight:600; color:var(--gold); }
.week{ display:block; font-size:11px; color:var(--txt3); }

.btn{ cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--txt);
  padding:8px 14px; border-radius:8px; font-size:13px; transition:.15s; display:inline-flex; align-items:center; gap:6px; }
.btn:hover{ border-color:var(--brand); }
.btn.primary{ background:linear-gradient(135deg,var(--brand),#2f6fe0); border-color:transparent; font-weight:600; }
.btn.ghost{ background:transparent; }
.btn.danger{ color:var(--red); border-color:#5a2f33; }
.btn.gold{ background:linear-gradient(135deg,#fbbf24,#f59e0b); border-color:transparent; color:#1a1206; font-weight:700; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.5); } 50%{ box-shadow:0 0 0 8px rgba(251,191,36,0); } }
.badge{ background:var(--red); color:#fff; border-radius:10px; padding:0 7px; font-size:11px; min-width:18px; text-align:center; }

/* ============ 状态条 ============ */
.statusbar{ padding:9px 24px; font-size:13px; color:var(--txt2); background:#11171f; border-bottom:1px solid var(--line); }
.statusbar.err{ color:var(--red); }
.statusbar.ok{ color:var(--green); }
.statusbar.loading::before{ content:""; display:inline-block; width:13px; height:13px; border:2px solid var(--txt3); border-top-color:var(--brand); border-radius:50%; margin-right:8px; vertical-align:-2px; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ 简报 ============ */
.briefing{ max-width:1100px; margin:0 auto; padding:20px 16px 60px; display:flex; flex-direction:column; gap:16px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.section-head h2{ font-size:17px; font-weight:700; }
.hint{ font-size:12px; color:var(--txt3); }

/* ============ 资讯条目 ============ */
.news-list{ display:flex; flex-direction:column; gap:10px; }
.news-item{ background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--txt3); border-radius:9px; padding:12px 14px; transition:.15s; }
.news-item:hover{ border-color:var(--brand); }
.news-item.lv-high{ border-left-color:var(--red); }
.news-item.lv-mid{ border-left-color:var(--gold); }
.news-item.lv-low{ border-left-color:var(--txt3); }
.news-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.tag{ font-size:11px; padding:2px 8px; border-radius:10px; background:#2a3441; color:var(--txt2); }
.tag.cat-科技{ background:#1e3a5f; color:#7cc4ff; }
.tag.cat-财经{ background:#3a2f1a; color:var(--gold); }
.tag.cat-政策{ background:#3a1f2a; color:#ff9ec4; }
.tag.cat-国际{ background:#1f3a2e; color:var(--green); }
.tag.cat-社会{ background:#2a2a34; color:var(--txt2); }
.lvl{ font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; }
.lvl.lv-high{ background:#3a1f22; color:var(--red); }
.lvl.lv-mid{ background:#3a2f1a; color:var(--gold); }
.lvl.lv-low{ background:#262d36; color:var(--txt3); }
.src{ font-size:11px; color:var(--txt3); }
.news-title{ font-size:15px; font-weight:600; cursor:pointer; line-height:1.5; }
.news-title:hover{ color:var(--brand); }
.news-summary{ font-size:13px; color:var(--txt2); margin-top:5px; }
.news-foot{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:var(--txt3); flex-wrap:wrap; }
.news-foot .more{ color:var(--brand); cursor:pointer; }
.news-foot .save{ color:var(--purple); cursor:pointer; }
.empty{ color:var(--txt3); font-size:13px; text-align:center; padding:20px; }

/* ============ 分类筛选 ============ */
.filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{ cursor:pointer; font-size:12px; padding:5px 12px; border-radius:14px; border:1px solid var(--line); background:var(--panel2); color:var(--txt2); }
.chip.active{ background:var(--brand); color:#fff; border-color:transparent; }

/* ============ 趋势 / 思考 / 明日 ============ */
.trend-list{ display:flex; flex-direction:column; gap:10px; }
.trend-item{ display:flex; gap:12px; align-items:flex-start; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:12px 14px; }
.trend-num{ flex:none; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.trend-txt strong{ display:block; font-size:14px; margin-bottom:3px; }
.trend-txt span{ font-size:12px; color:var(--txt2); }

.reflect-box{ background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--purple); border-radius:9px; padding:14px 16px; font-size:14px; color:var(--txt); white-space:pre-wrap; }

.tomorrow-list{ display:flex; flex-direction:column; gap:8px; }
.tomorrow-item{ display:flex; gap:10px; align-items:center; padding:9px 12px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; font-size:13px; }
.tomorrow-item .t{ color:var(--gold); font-weight:600; min-width:64px; }

/* ============ 知识归档 ============ */
.archive{ max-width:1200px; margin:0 auto; padding:24px 16px 60px; }
.archive-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.archive-head h2{ font-size:20px; }
.archive-toolbar{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.input{ flex:1; min-width:200px; background:var(--panel2); border:1px solid var(--line); color:var(--txt); padding:9px 12px; border-radius:8px; font-size:13px; }
.input:focus{ outline:none; border-color:var(--brand); }
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.kcard{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.kcard-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.kcard-head h3{ font-size:15px; line-height:1.4; }
.kcard-del{ cursor:pointer; color:var(--txt3); font-size:16px; border:none; background:none; }
.kcard-del:hover{ color:var(--red); }
.kcard-meta{ font-size:11px; color:var(--txt3); }
.kcard-meta .tag{ margin-right:4px; }
.kcard-points{ list-style:none; display:flex; flex-direction:column; gap:5px; }
.kcard-points li{ font-size:13px; color:var(--txt); padding-left:16px; position:relative; }
.kcard-points li::before{ content:"▸"; position:absolute; left:0; color:var(--brand2); }
.kcard-table{ width:100%; border-collapse:collapse; font-size:12px; }
.kcard-table th,.kcard-table td{ border:1px solid var(--line); padding:5px 8px; text-align:left; }
.kcard-table th{ background:var(--panel2); color:var(--txt2); }
.kcard-think{ font-size:12px; color:var(--txt2); background:var(--panel2); border-radius:7px; padding:9px 11px; border-left:2px solid var(--purple); }
.kcard-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.kcard-tags .tag{ background:#2a3441; }

/* ============ 弹层 ============ */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:760px; width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.modal-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:16px; line-height:1.5; }
.modal-meta{ padding:8px 20px; font-size:12px; color:var(--txt3); }
.modal-body{ padding:0 20px 16px; overflow-y:auto; font-size:14px; color:var(--txt); line-height:1.8; white-space:pre-wrap; flex:1; }
.modal-body img{ max-width:100%; border-radius:8px; }
.modal .btn.primary{ margin:0 20px 16px; align-self:flex-start; }

/* ============ 页脚 ============ */
.footer{ text-align:center; font-size:12px; color:var(--txt3); padding:24px 16px; border-top:1px solid var(--line); }

/* ============ 响应式 ============ */
@media(max-width:640px){
  html,body{ -webkit-tap-highlight-color:transparent; }
  .topbar{ padding:10px 12px; gap:10px; }
  .brand{ gap:10px; }
  .logo{ font-size:24px; }
  .brand h1{ font-size:16px; }
  .sub{ display:none; }
  .topbar-right{ gap:7px; }
  .date-box #todayDate{ font-size:14px; }
  .btn{ padding:10px 14px; font-size:13px; }       /* 更大触控区 */
  .statusbar{ padding:8px 12px; font-size:12px; }
  .briefing{ padding:12px 10px 40px; gap:12px; }
  .card{ padding:14px 13px; border-radius:10px; }
  .section-head h2{ font-size:16px; }
  .news-item{ padding:12px 12px; }
  .news-title{ font-size:15px; }
  .news-foot{ gap:14px; }
  .news-foot .more,.news-foot .save{ padding:4px 0; }  /* 易点 */
  .chip{ padding:7px 13px; font-size:12px; }
  .filter-bar{ gap:6px; }
  .archive-grid{ grid-template-columns:1fr; }
  /* 弹层全屏 */
  .modal{ padding:0; }
  .modal-card{ max-width:100%; width:100%; max-height:100vh; height:100vh; border-radius:0; }
  .modal-body{ padding:0 16px 16px; }
  .modal .btn.primary{ margin:0 16px 16px; }
  /* 顶部留出刘海 */
  .topbar{ padding-top:max(10px,env(safe-area-inset-top)); }
  .footer{ padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}
@media(max-width:380px){
  .brand h1{ font-size:14px; }
  .date-box{ display:none; }
}
