/* ============================================================
   中文写作工具箱 —— 样式
   颜色体系基于 dataviz 规范校验过的中性色 + 蓝色序列阶
   ============================================================ */

* { box-sizing: border-box; }

/* ---------- 主题令牌 ---------- */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f4f3ef;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-3: #898781;
  --hairline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --hover: rgba(11, 11, 11, 0.05);
  --active: rgba(11, 11, 11, 0.09);
  --accent: #2a78d6;
  --accent-wash: rgba(42, 120, 214, 0.12);
  --btn-bg: #1c5cab;      /* 主按钮：白字，对比度约 5:1 */
  --btn-ink: #ffffff;
  --btn-bg-hover: #184f95;
  /* 关键词条状图：蓝色序列阶 4 档（ordinal，已通过 dataviz 校验） */
  --bar-1: #86b6ef;
  --bar-2: #5598e7;
  --bar-3: #2a78d6;
  --bar-4: #1c5cab;
  /* 状态色（始终配图标 + 文字，不只靠颜色传达含义） */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --good-ink: #006300;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 16px rgba(11, 11, 11, 0.05);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232322;
  --ink-1: #ffffff;
  --ink-2: #c3c2b7;
  --ink-3: #898781;
  --hairline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --hover: rgba(255, 255, 255, 0.06);
  --active: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
  --accent-wash: rgba(57, 135, 229, 0.18);
  --btn-bg: #5598e7;      /* 暗色主按钮：深字配亮蓝 */
  --btn-ink: #0b0b0b;
  --btn-bg-hover: #6da7ec;
  /* 暗色序列阶 4 档（最深 step600，已通过 dataviz 校验） */
  --bar-1: #6da7ec;
  --bar-2: #3987e5;
  --bar-3: #256abf;
  --bar-4: #184f95;
  --good-ink: #0ca30c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --ink-1: #ffffff;
    --ink-2: #c3c2b7;
    --ink-3: #898781;
    --hairline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --hover: rgba(255, 255, 255, 0.06);
    --active: rgba(255, 255, 255, 0.10);
    --accent: #3987e5;
    --accent-wash: rgba(57, 135, 229, 0.18);
    --btn-bg: #5598e7;
    --btn-ink: #0b0b0b;
    --btn-bg-hover: #6da7ec;
    --bar-1: #6da7ec;
    --bar-2: #5598e7;
    --bar-3: #3987e5;
    --bar-4: #256abf;
    --bar-5: #1c5cab;
    --good-ink: #0ca30c;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- 基础 ---------- */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  background: var(--page);
  color: var(--ink-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-wash); }

kbd {
  font-family: inherit;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------- 按钮 ---------- */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { background: var(--hover); color: var(--ink-1); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn-primary {
  background: var(--btn-bg);
  border-color: transparent;
  color: var(--btn-ink);
  font-weight: 600;
}
.btn-primary:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }
.btn-ghost { border-color: var(--border); }

/* ---------- 头部 ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.app-title { display: flex; align-items: center; gap: 12px; }
.app-logo { font-size: 26px; }
.app-name-wrap { display: flex; flex-direction: column; }
.app-name-wrap h1 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: 0.01em; }
.app-sub { font-size: 12px; color: var(--ink-3); }

/* ---------- 主布局 ---------- */
.app-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 24px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  min-width: 0;
}

/* ---------- 输入区 ---------- */
.pane-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
}
.toolbar-spacer { flex: 1; }
.counter-hint {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

#input-text {
  flex: 1;
  min-height: 340px;
  resize: vertical;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink-1);
  font: inherit;
  font-size: 15px;
  line-height: 1.9;
  padding: 16px 18px;
}
#input-text::placeholder { color: var(--ink-3); }

.pane-actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

/* ---------- 结果区：标签页 ---------- */
.tabs {
  display: flex;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  gap: 4px;
}
.tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
}
.tab:hover { color: var(--ink-1); }
.tab.is-active { color: var(--ink-1); font-weight: 600; }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.tab-body { flex: 1; }
.tab-pane { display: none; padding: 18px; }
.tab-pane.is-active { display: block; }

/* ---------- 空态提示 ---------- */
.pane-hint {
  color: var(--ink-3);
  font-size: 13px;
  border: 1px dashed var(--baseline);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  margin-top: 14px;
}
.pane-hint[hidden] { display: none; }

/* ---------- 统计卡片 ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.stat-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--surface);
}
.stat-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-value--sm { font-size: 20px; }
.stat-label {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* ---------- 关键词条状图 ---------- */
.kw-list { display: flex; flex-direction: column; gap: 2px; }
.kw-row {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  align-items: center;
  gap: 12px;
  padding: 7px 6px;
  border-radius: 8px;
  transition: background 0.15s;
}
.kw-row:hover { background: var(--hover); }
.kw-word {
  font-size: 14px;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kw-track {
  height: 12px;
  background: var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.kw-bar {
  height: 100%;
  border-radius: 0 4px 4px 0;   /* 4px 圆角数据端 */
  min-width: 3px;
  transition: width 0.45s ease, filter 0.15s;
}
.kw-row:hover .kw-bar { filter: brightness(1.1); }
.kw-count {
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kw-bar.step-1 { background: var(--bar-1); }
.kw-bar.step-2 { background: var(--bar-2); }
.kw-bar.step-3 { background: var(--bar-3); }
.kw-bar.step-4 { background: var(--bar-4); }

/* ---------- 诊断 ---------- */
.diag-list { display: flex; flex-direction: column; gap: 10px; }
.diag-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--level);
  border-radius: 10px;
  background: var(--surface);
}
.diag-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--level);
  flex-shrink: 0;
  margin-top: 6px;
}
.diag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.diag-badge {
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0 8px;
  line-height: 1.7;
  flex-shrink: 0;
}
.diag-title { font-weight: 600; font-size: 14px; color: var(--ink-1); }
.diag-detail { font-size: 13px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 格式检查 ---------- */
.fmt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.fmt-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--level);
  border-radius: 10px;
  background: var(--surface);
}
.fmt-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.fmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.fmt-title { font-weight: 600; font-size: 14px; color: var(--ink-1); }
.fmt-count {
  font-size: 11px;
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0 8px;
  line-height: 1.7;
}
.fmt-detail { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.fmt-ok {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--good);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-1);
}
.fmt-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- 页脚 ---------- */
.app-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 24px 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .app-main { grid-template-columns: 1fr; padding: 14px 14px 20px; }
  #input-text { min-height: 220px; }
  .app-header { padding: 12px 14px; }
  .app-sub { display: none; }
  .app-footer { padding: 2px 14px 18px; }
}