/* ═══════════════════════════════════════════════
   D2 设计系统 — 兵哥·相变局  v2.0
   深度对标星芒AI进化岛排版风格
   暖白底 + 纯黑文字 + 酸柠黄点缀
═══════════════════════════════════════════════ */


/* ── 设计令牌 ── */
:root {
  /* 背景层 */
  --bg:         #fafaf8;   /* 页面底色：暖白 */
  --surface:    #ffffff;   /* 卡片/内容区：纯白 */
  --bg-card:    #f7f6f2;   /* 次级卡片：略暖 */
  --bg-hover:   #f2f1ed;   /* hover 背景 */

  /* 文字 */
  --ink:        #181a1e;   /* 主文字：近黑 */
  --ink-soft:   #6b6b6b;   /* 次文字：中灰 */
  --ink-faint:  #9a9a9a;   /* 弱文字：浅灰 */

  /* 边框 */
  --rule:       #e5e5e5;   /* 标准分割线 */
  --rule-soft:  #eeece8;   /* 柔和分割线 */

  /* 品牌主色：暖橙 */
  --primary:       #f09a1a;   /* 主橙色 */
  --primary-dark:  #d97706;   /* 深橙（hover） */
  --primary-light: #fff8f0;   /* 极浅橙（hover 背景） */
  --primary-pale:  #fef3c7;   /* 更浅橙（徽章背景） */

  /* 品牌点缀（保留兼容） */

  /* 按钮 */
  --btn-bg:     #181a1e;   /* 主按钮：黑 */
  --btn-text:   #ffffff;

  /* CTA */

  /* 功能色 */
  --green:      #16a34a;
  --green-bg:   #dcfce7;
  --red:        #dc2626;
  --red-bg:     #fee2e2;
  --blue:       #2845c4;
  --blue-bg:    rgba(40,69,196,.1);

  /* 圆角 */
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-pill:999px;

  /* 字体 */
  --sans:  "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ── 重置 ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

/* ══════════════════════════════════════════════
   顶部导航栏
══════════════════════════════════════════════ */
.d2-nav {
  position: sticky; top: 0; z-index: 100;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(250,250,248,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.d2-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.d2-logo svg circle:last-child { fill: var(--primary); }
.d2-logo-text {
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  letter-spacing: 0.08em; color: var(--ink);
}
.d2-nav-links {
  display: flex; align-items: center; gap: 28px;
}
.d2-nav-a {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); text-decoration: none;
  transition: color .15s; white-space: nowrap;
}
.d2-nav-a:hover { color: var(--ink); }
.d2-nav-a.active { color: var(--ink); font-weight: 600; }
.d2-nav-user {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.d2-nav-name {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); font-weight: 500;
}
.d2-nav-out {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint); background: none;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 5px 12px; cursor: pointer; transition: all .15s;
}
.d2-nav-out:hover { color: var(--ink); border-color: rgba(24,26,30,.4); }
.d2-nav-pill {
  background: var(--btn-bg); color: var(--btn-text);
  border: none; padding: 8px 18px; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; transition: opacity .15s;
  text-decoration: none; display: inline-block;
}
.d2-nav-pill:hover { opacity: .82; }

/* ══════════════════════════════════════════════
   页面容器
══════════════════════════════════════════════ */
.d2-page {
  max-width: 960px; margin: 0 auto;
  padding: 48px 32px 80px;
}
.d2-page-narrow {
  max-width: 760px; margin: 0 auto;
  padding: 48px 32px 80px;
}
.d2-heading {
  font-family: var(--sans); font-weight: 800; font-size: 28px;
  color: var(--ink); letter-spacing: -.01em; margin-bottom: 6px;
  line-height: 1.25;
}
.d2-subheading {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); margin-bottom: 32px; line-height: 1.6;
}
.d2-rule { height: 1px; background: var(--rule); margin: 32px 0; }

/* ══════════════════════════════════════════════
   按钮
══════════════════════════════════════════════ */
.d2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; border: none;
  transition: all .15s; text-decoration: none;
  border-radius: var(--r-md); padding: 10px 20px;
  white-space: nowrap;
}
.d2-btn-black {
  background: var(--btn-bg); color: var(--btn-text);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.d2-btn-black:hover { opacity: .85; }
.d2-btn-lime, .d2-btn-primary {
  background: var(--primary); color: #ffffff;
  box-shadow: 0 1px 2px rgba(240,154,26,.25);
}
.d2-btn-lime:hover, .d2-btn-primary:hover { background: var(--primary-dark); }
/* 兼容旧代码 cobalt→primary */
.d2-btn-cobalt {
  background: var(--primary); color: #ffffff;
  box-shadow: 0 2px 8px rgba(240,154,26,.25);
}
.d2-btn-cobalt:hover { background: var(--primary-dark); }
.d2-btn-outline {
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.d2-btn-outline:hover { border-color: rgba(24,26,30,.5); color: var(--ink); }
.d2-btn-danger { background: var(--red); color: #fff; }
.d2-btn-danger:hover { opacity: .85; }
.d2-btn-pill { border-radius: var(--r-pill); padding: 11px 28px; }
.d2-btn-sm { font-size: 12px; padding: 6px 14px; }
.d2-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   表单
══════════════════════════════════════════════ */
.d2-label {
  display: block; font-family: var(--sans); font-size: 11px;
  font-weight: 600; color: var(--ink-faint);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px;
}
.d2-input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 10px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.d2-input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(24,26,30,.08);
}
.d2-input::placeholder { color: var(--ink-faint); }
textarea.d2-input { resize: vertical; min-height: 100px; line-height: 1.7; }
select.d2-input { cursor: pointer; }
.d2-form-group, .d2-form-label + .d2-input { margin-bottom: 18px; }
.d2-form-label {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink); font-weight: 500; margin-bottom: 6px;
  display: block;
}
.d2-char-count {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint); text-align: right; margin-top: 5px;
}

/* ══════════════════════════════════════════════
   分类 Tab 图标动画
══════════════════════════════════════════════ */
@keyframes tabIcoFloat {
  0%,100% { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-3px) scale(1.12); }
  60%      { transform: translateY(-1px) scale(1.06); }
}
.tab-ico {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  margin-right: 5px;
  vertical-align: middle;
  animation: tabIcoFloat 2.8s ease-in-out infinite;
  will-change: transform;
}
/* 鼠标悬停时图标加速 */
.d2-tab:hover .tab-ico {
  animation-duration: 1.2s;
}
/* 激活 tab 的图标更有活力 */
.d2-tab.active .tab-ico {
  animation-duration: 1.8s;
}

/* ══════════════════════════════════════════════
   分类 Tab 条
══════════════════════════════════════════════ */
.d2-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 24px; padding-bottom: 0;
  border-bottom: none;
}
/* 胶囊型 tab（独立筛选场景） */
.d2-tabs .d2-tab {
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  margin-bottom: 0;
}
.d2-tabs .d2-tab:hover { background: var(--bg-card); }
.d2-tabs .d2-tab.active {
  background: var(--ink); color: #fff;
  border-color: var(--ink);
  border-bottom-color: var(--ink);
}
/* 带底线的 tab 容器 */
.d2-tabs-bar {
  border-bottom: 1.5px solid var(--rule);
  margin-bottom: 32px;
  display: flex; gap: 0; overflow-x: auto;
  scrollbar-width: none;
}
.d2-tabs-bar::-webkit-scrollbar { display: none; }
.d2-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 18px; margin-bottom: -1.5px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-soft); border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: all .15s; background: transparent;
  white-space: nowrap;
}
.d2-tab:hover {
  color: var(--ink); background: transparent;
}
.d2-tab.active {
  color: var(--ink); font-weight: 700;
  border-bottom-color: var(--ink);
  background: transparent;
}
.d2-tab-cnt {
  font-size: 11px; opacity: .55;
  padding: 1px 4px;
}
.d2-tab.active .d2-tab-cnt { opacity: .70; }

/* ══════════════════════════════════════════════
   文章列表
══════════════════════════════════════════════ */
.d2-article-list { display: flex; flex-direction: column; }
.d2-article-item {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 14px 18px 12px; margin: 0 -12px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  cursor: pointer; transition: all .15s;
  text-decoration: none; color: inherit;
}
.d2-article-item:last-child { border-bottom: none; }
.d2-article-item:hover {
  border-left-color: var(--primary);
  background: var(--primary-light);
  border-bottom-color: transparent;
  transform: translateX(2px);
}
.d2-art-num {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--ink-faint); min-width: 28px; padding-top: 2px;
  flex-shrink: 0;
}
.d2-art-body { flex: 1; min-width: 0; }
.d2-art-title {
  font-family: var(--sans); font-size: 16px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px; line-height: 1.4;
}
.d2-art-summary {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); line-height: 1.65; margin-bottom: 8px;
}
.d2-art-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; color: var(--ink-faint);
}
.d2-badge-free {
  color: var(--primary); font-weight: 700;
  font-size: 11px; letter-spacing: .03em;
}
.d2-badge-free::before { content: '● '; }
.d2-badge-vip {
  color: var(--ink-soft); font-weight: 600; font-size: 11px;
}
.d2-badge-vip::before { content: '✦ '; color: var(--primary); }
.d2-art-arrow {
  font-size: 18px; color: var(--ink-faint); padding-top: 2px; flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   回放卡片
══════════════════════════════════════════════ */
.d2-replay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 20px;
}
.d2-replay-card {
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--r-xl);
  overflow: hidden; transition: all .18s;
  background: var(--surface);
}
.d2-replay-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.09);
  border-color: transparent;
}
.d2-replay-thumb {
  aspect-ratio: 16/9; background: var(--bg-card);
  position: relative; overflow: hidden;
}
.d2-replay-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d2-replay-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--ink);
}
.d2-replay-info { padding: 16px 18px; }
.d2-replay-title {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px; line-height: 1.4;
}
.d2-replay-meta {
  font-family: var(--sans); font-size: 12px; color: var(--ink-faint);
}

/* ══════════════════════════════════════════════
   文章阅读页
══════════════════════════════════════════════ */
.d2-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
  text-decoration: none; margin-bottom: 32px; transition: color .15s;
}
.d2-back:hover { color: var(--ink); }

/* 文章大标题 */
.d2-art-heading {
  font-family: var(--sans); font-weight: 800; font-size: 34px;
  color: var(--ink); line-height: 1.25; letter-spacing: -.02em;
  margin-bottom: 16px;
}
.d2-art-info {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}

/* ── 正文排版 prose ── */
.d2-art-prose {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  color: #4a4a4a;
}

/* 文章内 h1 */
.d2-art-prose h1 {
  font-family: var(--sans); font-weight: 800; font-size: 28px;
  color: var(--ink); line-height: 1.25; letter-spacing: -.01em;
  margin: 56px 0 20px;
}

/* 章节标题 h2 */
.d2-art-prose h2 {
  font-family: var(--sans); font-weight: 800; font-size: 22px;
  color: var(--ink); line-height: 1.3;
  margin: 60px 0 0;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--rule);
}
.d2-art-prose h2 + p,
.d2-art-prose h2 + ul,
.d2-art-prose h2 + ol { margin-top: 20px; }

/* 子节标题 h3 */
.d2-art-prose h3 {
  font-family: var(--sans); font-weight: 700; font-size: 18px;
  color: var(--ink); line-height: 1.35;
  margin: 40px 0 12px;
}

/* 段落 */
.d2-art-prose p {
  margin-bottom: 22px; line-height: 1.9; color: #4a4a4a;
}

/* 加粗 */
.d2-art-prose strong { font-weight: 700; color: var(--ink); }

/* 斜体 */
.d2-art-prose em { font-style: italic; }

/* 列表 */
.d2-art-prose ul, .d2-art-prose ol {
  padding-left: 26px; margin-bottom: 22px;
}
.d2-art-prose li {
  margin-bottom: 10px; line-height: 1.85; color: #4a4a4a;
}
.d2-art-prose ol { list-style: decimal; }
.d2-art-prose ul { list-style: disc; }

/* 引用块 */
.d2-art-prose blockquote {
  border-left: 3px solid var(--ink);
  padding: 16px 22px;
  margin: 32px 0;
  background: var(--bg-card);
  color: var(--ink-soft);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-style: italic;
}

/* 行内代码 */
.d2-art-prose code {
  background: var(--bg-card); padding: 2px 7px;
  border-radius: var(--r-sm); font-family: monospace;
  font-size: 14px; color: #c0392b;
  border: 1px solid var(--rule-soft);
}

/* 代码块 */
.d2-art-prose pre {
  background: #1e1e1e; padding: 20px 22px;
  border-radius: var(--r-lg); overflow-x: auto; margin: 28px 0;
}
.d2-art-prose pre code {
  background: none; padding: 0; font-size: 14px;
  color: #e5e5e5; border: none;
}

/* 链接 */
.d2-art-prose a {
  color: var(--blue); text-decoration: underline;
  text-underline-offset: 2px;
}

/* 分割线 */
.d2-art-prose hr {
  border: none; border-top: 1px solid var(--rule); margin: 48px 0;
}

/* ══════════════════════════════════════════════
   锁定提示
══════════════════════════════════════════════ */
.d2-lock {
  text-align: center; padding: 72px 24px;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r-xl);
}
.d2-lock-icon { font-size: 44px; margin-bottom: 16px; }
.d2-lock h2 {
  font-family: var(--sans); font-size: 22px; font-weight: 800;
  color: var(--ink); margin-bottom: 10px;
}
.d2-lock p {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); margin-bottom: 28px; line-height: 1.6;
}

/* ══════════════════════════════════════════════
   视频播放
══════════════════════════════════════════════ */
.d2-video {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg-card); border-radius: var(--r-xl);
  overflow: hidden; margin-bottom: 28px;
  border: 1px solid var(--rule);
}
.d2-video iframe,.d2-video video { width: 100%; height: 100%; border: none; }
.d2-video-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  color: var(--ink-faint); font-family: var(--sans); font-size: 14px;
}

/* ══════════════════════════════════════════════
   AI 工具
══════════════════════════════════════════════ */
.d2-steps {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.d2-step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
}
.d2-step-n {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; color: var(--ink-faint);
}
.d2-step.active { color: var(--ink); }
.d2-step.active .d2-step-n {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.d2-step.done .d2-step-n {
  background: var(--green); color: #fff; border-color: var(--green);
}
.d2-step-sep { color: var(--rule); font-size: 16px; }
.d2-info-card {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 16px;
}
.d2-info-card h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 8px;
}
.d2-info-card p {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); line-height: 1.7;
}
.d2-result-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 14px;
}
.d2-result-lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--ink-faint); letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 8px;
}
.d2-result-val {
  font-family: var(--sans); font-size: 18px; font-weight: 800;
  color: var(--ink); line-height: 1.3;
}
.d2-result-txt {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); line-height: 1.75; margin-top: 8px;
}
.d2-tags-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.d2-ip-tag {
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--bg-card); border: 1px solid var(--rule);
  color: var(--ink-soft); font-family: var(--sans); font-size: 12px;
  font-weight: 500;
}
.d2-copy-types {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0;
}
.d2-copy-type {
  background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: var(--r-lg); padding: 18px; cursor: pointer;
  text-align: center; transition: all .15s;
}
.d2-copy-type:hover { border-color: var(--ink); }
.d2-copy-type.selected {
  border-color: var(--ink); background: var(--bg-card);
}
.d2-copy-icon { font-size: 26px; margin-bottom: 8px; }
.d2-copy-name {
  font-family: var(--sans); font-size: 14px;
  font-weight: 700; color: var(--ink);
}
.d2-copy-sub {
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-faint); margin-top: 4px;
}
.d2-copy-output {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 22px; font-family: var(--sans);
  font-size: 15px; line-height: 1.9; color: var(--ink-soft);
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════
   模态框
══════════════════════════════════════════════ */
.d2-modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
}
.d2-modal-bg {
  position: absolute; inset: 0;
  background: rgba(24,26,30,.4); backdrop-filter: blur(6px);
}
.d2-modal-box {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: 32px;
  width: 90%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.d2-modal-box.wide { max-width: 820px; }
.d2-modal-title {
  font-family: var(--sans); font-size: 20px; font-weight: 800;
  color: var(--ink); margin-bottom: 24px;
}
.d2-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--ink-faint); line-height: 1; transition: color .15s;
}
.d2-modal-close:hover { color: var(--ink); }
.d2-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule);
}

/* ══════════════════════════════════════════════
   管理后台布局
══════════════════════════════════════════════ */
.d2-layout { display: flex; min-height: calc(100vh - 56px); }
.d2-sidebar {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--rule); padding: 20px 0;
  background: var(--surface);
}
.d2-sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); text-decoration: none; transition: all .12s;
  border-radius: 0;
}
.d2-sidebar-item:hover { color: var(--ink); background: var(--bg-card); }
.d2-sidebar-item.active {
  color: var(--ink); font-weight: 700;
  background: var(--bg-hover);
  border-right: 2.5px solid var(--ink);
}
.d2-main { flex: 1; padding: 36px 40px; overflow-x: auto; }
.d2-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.d2-page-h1 {
  font-family: var(--sans); font-size: 24px; font-weight: 800;
  color: var(--ink); letter-spacing: -.01em;
}

/* 统计格 */
.d2-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 16px; margin-bottom: 32px;
}
.d2-stat {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: 20px 24px;
  transition: box-shadow .15s;
}
.d2-stat:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.d2-stat-n {
  font-family: var(--sans); font-size: 32px; font-weight: 800;
  color: var(--ink); line-height: 1;
}
.d2-stat-n.cobalt { color: var(--blue); }
.d2-stat-l {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint); margin-top: 8px; letter-spacing: .03em;
}

/* 表格 */
.d2-table-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); overflow: hidden;
}
.d2-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--rule);
}
.d2-table-ttl {
  font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink);
}
.d2-search {
  padding: 8px 14px; background: var(--bg);
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  outline: none; width: 220px; transition: border-color .15s;
}
.d2-search:focus { border-color: var(--ink); }
.d2-search::placeholder { color: var(--ink-faint); }
.d2-tbl-wrap { overflow-x: auto; }
.d2-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
/* 旧版本兼容 */
.d2-tbl { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
.d2-tbl thead tr,.d2-table thead tr { border-bottom: 1px solid var(--rule); }
.d2-tbl th,.d2-table th {
  padding: 12px 16px; text-align: left;
  font-size: 11px; font-weight: 700; color: var(--ink-faint);
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg);
}
.d2-tbl td,.d2-table td {
  padding: 14px 16px; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.d2-tbl tr:last-child td,.d2-table tr:last-child td { border-bottom: none; }
.d2-tbl tr:hover td,.d2-table tr:hover td { background: var(--bg-card); }
.d2-tbl-actions,.d2-table-actions { display: flex; gap: 8px; }

/* 徽章 */
.d2-b {
  display: inline-block; padding: 3px 9px;
  border-radius: var(--r-sm); font-size: 11px;
  font-weight: 700; letter-spacing: .03em;
}
.d2-b-free    { background: var(--green-bg); color: var(--green); }
.d2-b-vip     { background: var(--bg-card); color: var(--ink-soft); }
.d2-b-active  { background: var(--green-bg); color: var(--green); }
.d2-b-expired { background: var(--bg-card); color: var(--ink-faint); }
.d2-b-admin   { background: #ede9fe; color: #7c3aed; }

/* 确认框 */
.d2-confirm {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.d2-confirm-box {
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: 32px;
  width: 90%; max-width: 400px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.d2-confirm-box h3 {
  font-family: var(--sans); font-size: 18px; font-weight: 800;
  color: var(--ink); margin-bottom: 10px;
}
.d2-confirm-box p {
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft); margin-bottom: 24px; line-height: 1.6;
}
.d2-confirm-acts { display: flex; justify-content: center; gap: 12px; }

/* Toast */
.d2-toasts {
  position: fixed; top: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.d2-toast {
  padding: 12px 18px; border-radius: var(--r-lg);
  font-family: var(--sans); font-size: 14px;
  border: 1px solid var(--rule);
  background: var(--surface); color: var(--ink);
  min-width: 200px; animation: toastIn .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.d2-toast.success { background: var(--green-bg); border-color: #86efac; color: #15803d; }
.d2-toast.error   { background: var(--red-bg);   border-color: #fca5a5; color: var(--red); }
@keyframes toastIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 加载 & 空状态 */
.d2-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--rule);
  border-top-color: var(--ink);
  animation: spin .75s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.d2-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 20px; gap: 14px;
}
.d2-loading p {
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
}
.d2-empty {
  text-align: center; padding: 72px 20px;
  font-family: var(--sans); font-size: 14px; color: var(--ink-faint);
}

/* ══════════════════════════════════════════════
   登录页
══════════════════════════════════════════════ */
.d2-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.d2-login-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-xl); padding: 44px 40px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.d2-login-logo { text-align: center; margin-bottom: 32px; }
.d2-login-title {
  font-family: var(--sans); font-size: 26px; font-weight: 800;
  color: var(--ink); margin-bottom: 6px; letter-spacing: -.01em;
}
.d2-login-sub {
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-soft); line-height: 1.5;
}
.d2-login-tabs {
  display: flex; gap: 0; border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px;
}
.d2-login-tab {
  flex: 1; padding: 10px; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  background: transparent; color: var(--ink-faint); transition: all .2s;
}
.d2-login-tab.active { background: var(--ink); color: #fff; }
.d2-login-footer {
  text-align: center; margin-top: 20px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
}
.d2-login-footer a { color: var(--blue); text-decoration: none; font-weight: 600; }

/* ══════════════════════════════════════════════
   手机底部导航
══════════════════════════════════════════════ */
.d2-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
  background: rgba(250,250,248,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.d2-bottom-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 6px;
  text-decoration: none; color: var(--ink-faint);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent; transition: color .15s;
}
.d2-bottom-nav-item.active { color: var(--ink); }
.d2-bottom-nav-icon { font-size: 20px; line-height: 1; }
.d2-bottom-nav-label { font-size: 10px; letter-spacing: .04em; }

/* ══════════════════════════════════════════════
   移动端适配
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .d2-bottom-nav { display: flex; }

  .d2-nav { padding: 0 16px; height: 52px; }
  .d2-logo-text { font-size: 14px; }
  .d2-nav-links { gap: 0; }
  .d2-nav-links .d2-nav-a { display: none; }
  .d2-nav-user { gap: 8px; margin-left: auto; }
  .d2-nav-name { font-size: 12px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .d2-page, .d2-page-narrow {
    padding: 20px 16px calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .d2-heading { font-size: 22px; }

  .d2-btn { font-size: 13px; padding: 10px 16px; }
  .d2-btn-pill { padding: 12px 22px; }

  .d2-tabs { gap: 5px; }
  .d2-tabs-bar { gap: 0; }
  .d2-tabs-bar .d2-tab { padding: 8px 12px; font-size: 12px; }
  .d2-tabs .d2-tab { padding: 6px 12px; font-size: 12px; }

  .d2-article-item { gap: 12px; padding: 16px 8px; margin: 0 -8px; }
  .d2-art-title { font-size: 15px; }
  .d2-art-summary { font-size: 13px; }
  .d2-art-num { font-size: 12px; min-width: 24px; }

  .d2-replay-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  .d2-art-heading { font-size: 24px; }
  .d2-art-prose { font-size: 15px; line-height: 1.85; }
  .d2-art-prose h2 { font-size: 19px; margin-top: 44px; }
  .d2-art-prose h3 { font-size: 16px; }

  .d2-copy-types { grid-template-columns: 1fr; gap: 10px; }

  .d2-layout { flex-direction: column; }
  .d2-sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--rule);
    display: flex; flex-direction: row; overflow-x: auto;
    padding: 0; white-space: nowrap;
  }
  .d2-sidebar-item { padding: 12px 16px; flex-shrink: 0; border-right: none !important; }
  .d2-main { padding: 20px 16px; }
  .d2-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }

  .d2-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .d2-stat-n { font-size: 26px; }

  .d2-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .d2-tbl, .d2-table { min-width: 480px; }
  .d2-tbl th, .d2-table th,
  .d2-tbl td, .d2-table td { padding: 10px 12px; }

  .d2-modal-box { padding: 24px 20px; }
  .d2-modal-box.wide { max-width: 96vw; }
  .d2-modal-footer { flex-direction: column; }
  .d2-modal-footer .d2-btn { width: 100%; justify-content: center; }

  .d2-login-card { padding: 28px 20px; }
  .d2-login-title { font-size: 22px; }

  .d2-lock { padding: 48px 16px; }
  .d2-lock h2 { font-size: 20px; }

  .d2-toasts { right: 10px; left: 10px; top: 10px; }
  .d2-toast { min-width: 0; font-size: 13px; }
}

@media (max-width: 480px) {
  .d2-replay-grid { grid-template-columns: 1fr; }
}
/* 480px */
@media (max-width: 480px) {
  .d2-art-prose h1 { font-size: 1.5rem; }
  .d2-steps { flex-direction: column; gap: 12px; }
}