/* 德美AI — 白色主体 + 红色 #ab372f 点缀 */
:root {
  --accent: #ab372f;
  --accent-dark: #8f2a23;
  --accent-light: #c75a50;
  --accent-soft: rgba(171,55,47,.08);
  --accent-border: rgba(171,55,47,.25);
  --text-main: #333333;
  --text-dim: #666666;
  --text-faint: #999999;
  --border: #e8e2de;
  --bg-soft: #faf7f5;
  --white: #ffffff;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, sans-serif;
  background: var(--white);
  color: var(--text-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 页面进入淡入过渡 */
  animation: pageFadeIn .3s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 极淡红渐变背景 → 纯白底 */
.bg {
  position: fixed; inset: 0; z-index: -2;
  background: #ffffff;
}
/* 磨砂噪点纹理（极淡） */
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 89px 20px 60px; }

/* ===== 全屏左右分栏布局：左侧 AI动态栏（独立，整屏高） + 右侧主内容 ===== */
.app { display:flex; min-height:100vh; }
.app-sidebar {
  width:300px; flex-shrink:0;
  background:linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  padding:43px 20px 24px 24px;
  position:sticky; top:0; height:100vh;
  z-index:101; /* 盖住固定全宽 topbar 的左侧区域，保持 AI动态标题与导航线对齐 */
  overflow-y:hidden; /* 侧边栏自身不滚动，仅新闻列表滚动 */
  display:flex; flex-direction:column;
  /* 隐藏滚动条（保留滚动能力） */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.app-sidebar::-webkit-scrollbar { display:none; width:0; height:0; }
/* v73.2：默认收起状态下首屏就隐藏侧栏，避免加载中露出 300px 空白栏（等接口回来才收起的突巫） */
html.sb-collapsed .app-sidebar,
html.sb-off .app-sidebar { display:none; }
/* v73.3：侧栏展开时，数据回来前先给骨架，避免整列空白显得突兀 */
.app-sidebar:empty::before {
  content:"AI 动态"; display:block; font-size:16px; font-weight:700;
  color:var(--accent); padding-bottom:10px; border-bottom:1px solid var(--border);
  margin-bottom:16px;
}
.app-sidebar:empty::after {
  content:""; display:block; height:220px; border-radius:10px; opacity:.55;
  background:repeating-linear-gradient(to bottom, var(--border) 0 10px, transparent 10px 28px);
}

.app-main { flex:1; min-width:0; padding:89px 34px 60px; }
@media (max-width: 900px) {
  .app { flex-direction:column; }
  .app-sidebar { width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid var(--border); max-height:260px; }
  .app-main { padding:89px 16px 40px; }
  .container { padding:89px 12px 40px; }
}

/* 内容区宽度适配：宽屏下内容铺开，不挤中间 */
.content-width { max-width:1500px; margin:0 auto; }
.hero { padding: 18px 0 14px; }

.news-title { font-size:16px; font-weight:700; color:var(--accent); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.news-empty { color:var(--text-faint); font-size:13px; padding:10px 0; }
.news-timeline {
  position:relative; padding-left:0;
  flex:1; min-height:0; overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.news-timeline::-webkit-scrollbar { display:none; width:0; height:0; }
.news-item { position:relative; padding:0 0 18px 22px; border-left:1px solid rgba(171,55,47,.15); margin-left:6px; }
.news-item:last-child { border-left-color:transparent; padding-bottom:4px; }
.news-dot {
  position:absolute; left:-5px; top:3px;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent); border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--accent-border);
}
.news-body { cursor:pointer; }
.news-body:hover .news-text { color:var(--accent); }
.news-date { font-size:11.5px; color:var(--text-faint); }
.news-text { font-size:13.5px; font-weight:600; color:var(--text-main); margin-top:3px; line-height:1.5; }
.news-summary { font-size:12px; color:var(--text-dim); margin-top:4px; line-height:1.6; }
.news-more { display:inline-block; margin-top:10px; font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:600; flex-shrink:0; }
.news-more:hover { text-decoration:underline; }

/* 顶栏（无站点名）—— 固定全宽 + 导航全局居中 */
.topbar {
  display:flex; align-items:center; justify-content:center;
  padding: 12px 0 14px;
  flex-wrap:wrap; gap:10px;
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  margin-bottom:18px;
}
.topbar-right {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:14px; font-size:14px;
  z-index:2;
}
.topbar-left {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:10px; z-index:102;
}
@media (max-width: 900px) {
  .topbar { justify-content:space-between; }
  .topbar-right { position:static; transform:none; }
  .topbar-left { position:static; transform:none; margin-right:auto; }
}

/* 主导航 */
.main-nav { display:flex; align-items:center; gap:4px; background:var(--bg-soft); border:1px solid var(--border); padding:5px; border-radius:24px; margin:0 10px; }
.main-nav a { color:var(--text-dim); text-decoration:none; font-size:14px; padding:8px 16px; border-radius:18px; transition:.2s; white-space:nowrap; }
.main-nav a:hover { color:var(--accent); background:var(--accent-soft); }
.main-nav a.active { background:var(--accent); color:#fff; font-weight:600; }
.main-nav a.admin-link { color:var(--accent); }
.main-nav a.admin-link:hover { background:var(--accent-soft); color:var(--accent-dark); }

.topbar-right { display:flex; align-items:center; gap:14px; font-size:14px; }

/* 用户名：框起来突出显示（无人像图标） */
.user-chip {
  border:1.5px solid var(--accent-border);
  background:var(--accent-soft);
  color:var(--accent-dark);
  padding:7px 16px;
  border-radius:20px;
  font-size:13.5px;
  font-weight:600;
}
.user-chip a { color:inherit; text-decoration:none; }
.user-chip a:hover { text-decoration:underline; }

.link-btn { background:none; border:1px solid var(--border); color:var(--text-dim); padding:7px 16px; border-radius:20px; font-size:13px; cursor:pointer; transition:.25s; }
.link-btn:hover { border-color:var(--accent); color:var(--accent); }

/* 正文顶部返回（v18：顶栏不再放返回按钮，详情/表单页统一放这里，做得很轻） */
.dm-crumb { display:flex; align-items:center; margin:0 0 10px; }
.dm-crumb a { display:inline-flex; align-items:center; gap:5px; color:var(--text-faint); font-size:12.5px; text-decoration:none; padding:3px 0; transition:color .2s; }
.dm-crumb a:hover { color:var(--accent); }
.dm-crumb-arrow { font-size:13px; line-height:1; }

/* 标题区 */
.hero { padding: 18px 0 14px; }
/* 标题行：标题在左，页面对应操作（上传技能 / 分享案例 / 新增文章）紧挨在标题右边，
   不再单独占一行；窄屏时自动换到下一行 */
.hero-head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* 术语角标（v19）：标题右上角一个可点的小问号，点开是「技能是什么」的解释文章。
   用绝对定位挂在标题右外侧，不占字距、不拆词（试过插在「技能」和「库」之间，会把标题拆成两个词） */
.hero h1.with-badge { position:relative; margin-right:16px; }   /* 给角标让出宽度，别被右边的按钮压住 */
.hero h1 .term-badge {
  position:absolute; left:100%; top:3px; margin-left:6px;
  width:16px; height:16px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1; font-family:system-ui,-apple-system,sans-serif;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-border); border-radius:5px;
  text-decoration:none; transition:.2s;
}
.hero h1 .term-badge:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.hero h1 { font-size:28px; font-weight:700; color:var(--text-main); letter-spacing:.5px; }
.hero p { color:var(--text-dim); font-size:14.5px; margin-top:8px; line-height:1.7; }

/* 筛选行 */
.filters { display:flex; gap:10px; align-items:center; margin:20px 0 14px; flex-wrap:wrap; }
.filter-tag { background:none; border:1px solid var(--border); color:var(--text-dim); padding:6px 14px; border-radius:18px; font-size:13px; cursor:pointer; transition:.2s; }
.filter-tag.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.filter-tag:hover { border-color:var(--accent); color:var(--accent); }

/* AI 动态搜索 + 分类（2026-08-11） */
.news-toolbar { margin-bottom:16px; }

/* 技能卡片 — 圆角卡片 + 红色点缀（2026-08-11 排版优化） */
.skill-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.skill-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px 20px 16px;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
}
.skill-card:hover { border-color:var(--accent-border); box-shadow:0 6px 18px rgba(171,55,47,.12); transform:translateY(-3px); }
.skill-card-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.skill-icon { font-size:26px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); border-radius:12px; flex-shrink:0; }
.skill-name { font-size:17px; font-weight:700; color:var(--text-main); line-height:1.35; }
.skill-meta { font-size:11.5px; color:var(--text-faint); margin-top:4px; }
.skill-summary { font-size:13.5px; color:var(--text-dim); line-height:1.6; min-height:44px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* .skill-stats（赞/下载数）已移除（v22：不展示点赞与下载数据） */
.skill-tags { margin-top:12px; display:flex; gap:6px; flex-wrap:wrap; }
.skill-install-hint { margin-top:14px; font-size:12px; color:var(--accent); display:flex; align-items:center; gap:6px; opacity:.9; }
.skill-install-hint::before { content:'→'; font-weight:700; }

/* WorkBuddy 横幅通知（2026-08-11） */
.wb-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--accent-soft); border:1px solid var(--accent-border); border-left:4px solid var(--accent); border-radius:10px; padding:11px 16px; margin:16px 0 6px; font-size:13.5px; color:var(--text-main); }
.wb-banner-text { flex:1; line-height:1.8; }
.wb-banner-text b { color:var(--accent-dark); }
.wb-banner a { color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.wb-banner a:hover { text-decoration:underline; }
.wb-banner-close { background:none; border:none; color:var(--text-faint); font-size:16px; cursor:pointer; line-height:1; padding:2px 4px; flex-shrink:0; }
.wb-banner-close:hover { color:var(--accent); }

/* WorkBuddy 悬浮通知 */
.wb-notice { position:fixed; right:24px; bottom:24px; width:310px; background:#fff; border:1px solid #eee; border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.16); padding:18px 20px; z-index:900; }
.wb-notice-close { position:absolute; top:10px; right:14px; font-size:18px; color:#aaa; cursor:pointer; line-height:1; }
.wb-notice-close:hover { color:#c0392b; }
.wb-notice-title { font-size:15px; font-weight:700; color:var(--text-main); margin-bottom:8px; }
.wb-notice-text { font-size:12.5px; color:var(--text-dim); line-height:1.7; margin-bottom:14px; }
.wb-notice-btn { display:inline-block; background:var(--accent); color:#fff; font-size:13px; padding:9px 16px; border-radius:18px; text-decoration:none; transition:.2s; }
.wb-notice-btn:hover { opacity:.9; }
.stag { font-size:11px; color:var(--accent); border:1px solid var(--accent-border); padding:2px 10px; border-radius:12px; }

/* 详情页 */
.detail-head { display:flex; align-items:flex-start; gap:20px; padding:18px 0 8px; flex-wrap:wrap; }
.detail-icon { font-size:42px; width:84px; height:84px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); border-radius:18px; flex-shrink:0; }
.detail-title h1 { font-size:28px; color:var(--text-main); }
.detail-title .meta { color:var(--text-faint); font-size:13px; margin-top:6px; }
.meta-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.meta-chip { background:var(--bg-soft); border:1px solid var(--border); color:var(--text-dim); font-size:11.5px; padding:3px 11px; border-radius:12px; }
.detail-summary { margin-top:14px; color:var(--text-dim); font-size:14.5px; line-height:1.75; max-width:680px; }

.section { margin-top:30px; }
.section h2 { font-size:17px; font-weight:700; color:var(--accent); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }

/* 指令模板框（2026-08-11 圆角化） */
.cmd-box {
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:10px;
  padding:18px 20px 16px 20px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-main);
  position:relative;
  word-break:break-all;
  padding-right:120px;
}
.copy-btn {
  position:absolute; top:12px; right:12px;
  background:var(--accent); border:none; color:#fff;
  padding:6px 16px; border-radius:14px; font-size:12px; cursor:pointer; transition:.2s;
}
.copy-btn:hover { background:var(--accent-dark); }
.copy-btn:active { transform:scale(.96); }

/* 步骤列表 */
.steps { list-style:none; counter-reset:step; }
.steps li {
  counter-increment:step; position:relative;
  padding:10px 0 10px 44px;
  color:var(--text-dim); font-size:14.5px; line-height:1.7;
  border-bottom:1px dashed var(--border);
}
.steps li::before {
  content:counter(step);
  position:absolute; left:6px; top:12px;
  width:26px; height:26px; border-radius:50%;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  color:var(--accent); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* 下载按钮 */
.download-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent);
  color:#fff; font-weight:700;
  padding:13px 30px; border:none; border-radius:0;
  font-size:15px; cursor:pointer; transition:.25s;
  box-shadow:0 4px 14px rgba(171,55,47,.25);
  text-decoration:none;
}
.download-btn:hover { background:var(--accent-dark); transform:translateY(-2px); }

/* 能力/空态卡片（2026-08-11 圆角化）—— 详情页的能力清单 v24 起改用两列列表，
   这里只剩列表页空态在用（.caps 网格已随 v24 删除） */
.cap {
  background:var(--bg-soft);
  padding:14px 16px;
  font-size:13.5px; color:var(--text-dim);
  line-height:1.6;
  border-left:2px solid var(--accent);
  border-radius:10px;
}
.cap b { color:var(--text-main); display:block; margin-bottom:4px; font-size:14px; }

/* 登录页 */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-box { width:380px; max-width:92vw; padding:10px 0; }
.login-title { text-align:center; font-size:26px; font-weight:700; margin-bottom:6px; color:var(--text-main); }
.login-sub { text-align:center; color:var(--text-dim); font-size:13px; margin-bottom:34px; letter-spacing:1px; }
.field { margin-bottom:16px; }
.field input {
  width:100%; padding:13px 16px;
  background:var(--white); border:1px solid var(--border);
  color:var(--text-main); font-size:14.5px; border-radius:0;
  outline:none; transition:.2s;
}
.field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(171,55,47,.08); }
.field input::placeholder { color:var(--text-faint); }
.login-btn {
  width:100%; padding:14px; margin-top:8px;
  background:var(--accent);
  border:none; color:#fff; font-size:15px; font-weight:700;
  cursor:pointer; border-radius:0; transition:.25s;
}
.login-btn:hover { background:var(--accent-dark); }
.login-err { color:var(--accent-dark); background:rgba(171,55,47,.08); border:1px solid rgba(171,55,47,.25); padding:10px 14px; font-size:13px; margin-bottom:14px; display:none; }
.login-foot { text-align:center; color:var(--text-faint); font-size:12px; margin-top:24px; }

/* 管理页 */
.admin-section { margin-top:30px; }
table { width:100%; border-collapse:collapse; margin-top:10px; }
th, td { text-align:left; padding:10px 12px; font-size:13.5px; border-bottom:1px solid var(--border); color:var(--text-dim); }
th { color:var(--accent); font-weight:600; }
.input-row { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.input-row input { flex:1; min-width:160px; padding:10px 14px; background:var(--white); border:1px solid var(--border); color:var(--text-main); font-size:14px; border-radius:0; outline:none; }
.input-row input:focus { border-color:var(--accent); }
.mini-btn { background:var(--accent); border:none; color:#fff; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; border-radius:0; transition:.2s; }
.mini-btn:hover { background:var(--accent-dark); }
.mini-btn.ghost { background:none; border:1px solid var(--border); color:var(--text-dim); }
.mini-btn.ghost:hover { border-color:var(--accent); color:var(--accent); }

/* 文本域（批量开通） */
.batch-area {
  width:100%; min-height:120px;
  background:var(--white); border:1px solid var(--border);
  color:var(--text-main); font-size:13.5px; padding:12px 14px;
  border-radius:0; outline:none; resize:vertical;
  font-family:"PingFang SC",-apple-system,sans-serif;
  line-height:1.7;
}
.batch-area:focus { border-color:var(--accent); }
.batch-hint { color:var(--text-faint); font-size:12px; margin:6px 0 8px; }

/* 管理入口卡片 */
.admin-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.admin-card {
  background:var(--white);
  border:1px solid var(--border);
  border-top:3px solid var(--accent);
  padding:22px 20px;
  cursor:pointer;
  transition:.25s;
  text-decoration:none;
  display:block;
}
.admin-card:hover { border-color:var(--accent-border); box-shadow:0 4px 14px rgba(171,55,47,.10); transform:translateY(-2px); }
.admin-card .ac-icon { font-size:28px; margin-bottom:10px; }
.admin-card .ac-name { font-size:16px; font-weight:700; color:var(--text-main); }
.admin-card .ac-desc { font-size:12.5px; color:var(--text-faint); margin-top:6px; line-height:1.6; }

/* 开关行 → 列表式控制（每行一项，点击整行切换） */
.ctrl-list { list-style:none; margin-top:6px; }
.ctrl-item {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white);
  border:1px solid var(--border);
  padding:14px 18px;
  font-size:14.5px;
  cursor:pointer;
  transition:.2s;
  margin-bottom:8px;
}
.ctrl-item:hover { border-color:var(--accent-border); box-shadow:0 2px 10px rgba(171,55,47,.06); }
.ctrl-item .ci-left { display:flex; align-items:center; gap:10px; }
.ctrl-item .ci-name { color:var(--text-main); font-weight:600; }
.ctrl-item .ci-desc { color:var(--text-faint); font-size:12px; margin-top:2px; }
.ctrl-item .ci-state { font-size:12.5px; font-weight:600; padding:4px 12px; border-radius:14px; white-space:nowrap; }
.ctrl-item .ci-state.on { color:#2e8b57; background:rgba(46,139,87,.10); border:1px solid rgba(46,139,87,.25); }
.ctrl-item .ci-state.off { color:var(--text-faint); background:var(--bg-soft); border:1px solid var(--border); }

/* 后台管理子导航 */
.admin-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.admin-nav a {
  text-decoration:none; font-size:13px;
  color:var(--text-dim);
  border:1px solid var(--border);
  padding:7px 16px;
  border-radius:18px;
  transition:.2s;
  background:var(--white);
}
.admin-nav a:hover { border-color:var(--accent); color:var(--accent); }
.admin-nav a.back { border-color:var(--accent-border); color:var(--accent); font-weight:600; }
.admin-nav a.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* 保存设置栏 */
.save-bar {
  display:flex; align-items:center; gap:14px;
  background:var(--white);
  border:1px solid var(--accent-border);
  border-left:3px solid var(--accent);
  padding:14px 18px;
  margin:16px 0 8px;
}
.save-bar .sb-hint { color:var(--text-dim); font-size:13px; flex:1; }
.save-bar .sb-hint.changed { color:var(--accent); font-weight:600; }
.save-btn {
  background:var(--accent); border:none; color:#fff;
  padding:10px 26px; font-size:14px; font-weight:700;
  cursor:pointer; border-radius:0; transition:.2s;
}
.save-btn:hover { background:var(--accent-dark); }
.save-btn:disabled { background:#ccc; cursor:not-allowed; }
.save-msg { color:#2e8b57; font-size:13px; font-weight:600; }

.footer { text-align:center; padding:0; }

/* 技能库四步流程图 / 底部说明已删除（v20），只留通用 .hero-desc */
.hero-desc { font-size: 14px; color: var(--text-main); margin-top: 14px; line-height: 1.7; text-align: left; }


/* ===== AI 动态栏：三类固定分组 + 动态在后 + 默认收起（2026-10-19） ===== */
.news-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border); flex-shrink:0; }
.news-head .news-title { margin:0; padding:0; border:0; flex:1; }

.news-hide {
  width:22px; height:22px; padding:0 0 2px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:6px; background:#fff;
  color:var(--text-dim); font-size:13px; line-height:1; cursor:pointer;
  transition:color .18s, border-color .18s, background .18s;
}
.news-hide:hover { color:var(--accent); border-color:var(--accent-border); background:var(--accent-soft); }

/* 四类混排，不分组：靠标签与圆点颜色区分，条目之间沿用原时间线的竖线 */

.news-tag { flex-shrink:0; padding:0 5px; border-radius:4px; font-size:10px; line-height:1.75; font-weight:600; letter-spacing:.2px; }
.t-dyn   { background:rgba(171,55,47,.10); color:#ab372f; }
.t-case  { background:rgba(47,125,79,.12); color:#2f7d4f; }
.t-tool  { background:rgba(63,107,143,.13); color:#3f6b8f; }
.t-skill { background:rgba(138,106,58,.14); color:#8a6a3a; }

.news-meta { display:flex; align-items:center; gap:6px; min-height:16px; }
.news-meta .news-date { font-size:11.5px; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.news-item[data-type="case"]  .news-dot { background:#2f7d4f; box-shadow:0 0 0 2px rgba(47,125,79,.22); }
.news-item[data-type="tool"]  .news-dot { background:#3f6b8f; box-shadow:0 0 0 2px rgba(63,107,143,.22); }
.news-item[data-type="skill"] .news-dot { background:#8a6a3a; box-shadow:0 0 0 2px rgba(138,106,58,.22); }

/* 摘要最多两行，条数多也不至于把侧栏撑太长 */
.news-summary {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* 收起后主内容让出把手的位置，避免压住卡片左边缘 */
html.sb-collapsed .app-main { padding-left:48px; }

/* 收起后的竖排恢复把手（默认就是收起状态） */
.side-unhide {
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:120;
  display:flex; align-items:center; gap:3px; padding:16px 10px;
  background:#fff; border:1px solid var(--border); border-left:none;
  border-radius:0 10px 10px 0; color:var(--accent);
  font-size:12px; font-weight:600; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
}
.side-unhide span { writing-mode:vertical-rl; letter-spacing:2px; line-height:1.3; }
.side-unhide i { font-style:normal; font-size:11px; opacity:.7; }
.side-unhide:hover { background:var(--accent-soft); }

@media (max-width: 900px) {
  .side-unhide {
    left:12px; bottom:16px; top:auto; transform:none;
    border:1px solid var(--border); border-radius:22px; padding:9px 14px; gap:6px;
    box-shadow:0 4px 14px rgba(0,0,0,.10);
  }
  .side-unhide span { writing-mode:horizontal-tb; letter-spacing:0; }

  /* 手机端：整栏不再死限 260px，条目紧凑，时间线自己内部滚动 */
  .app-sidebar { max-height:none; padding:20px 16px 10px; }
  .news-timeline { max-height:280px; }
  .news-item { padding-bottom:12px; }
  .news-summary { display:none; }
  .news-more { margin-top:6px; }
  html.sb-collapsed .app-main { padding-left:16px; }
}