/* ============================================================
   知猫新媒体台 · 视觉皮肤（磨砂玻璃 / 淡雅浅色 / 汇文明朝体）
   覆盖层：在 app.css 之后加载。回退旧皮肤 = 移除 base.html 引入。
   规范：卡片圆角12 / 按钮圆角10 / 弹窗圆角16；外>中>内三层递进。
   ============================================================ */

@font-face {
  font-family: "Huiwen-mincho";
  src: url("/static/fonts/HuiwenMincho.woff2") format("woff2"),
       url("/static/fonts/HuiwenMincho.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 淡雅浅色 · 取色自黄昏山谷背景 */
  --ink: #2c3444;
  --muted: #5e6b80;
  --subtle: #8b96a8;
  --line: rgba(91, 110, 140, 0.18);
  --surface: rgba(255, 255, 255, 0.48);
  --canvas: #f4f5f8;
  --primary: #5b6e8c;        /* 黄昏山影蓝 */
  --primary-dark: #46587a;
  --primary-soft: rgba(91, 110, 140, 0.12);
  --amber: #c07b4a;          /* 晚霞淡橙 */
  --amber-soft: rgba(232, 168, 124, 0.16);
  --shadow: 0 10px 34px rgba(44, 52, 68, 0.10);
  /* 三档圆角 */
  --r-card: 12px;
  --r-btn: 10px;
  --r-modal: 16px;
  /* 玻璃参数 */
  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-border: rgba(255, 255, 255, 0.56);
  --glass-blur: blur(18px) saturate(1.15);
}

/* ---- 背景：底图 + 浅色蒙层 + 细纹理 ---- */
body {
  font-family: "Huiwen-mincho", "Noto Serif SC", "Source Han Serif SC",
    "SimSun", serif;
  background:
    /* 细网格纹理 */
    repeating-linear-gradient(0deg, rgba(91, 110, 140, 0.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(91, 110, 140, 0.028) 0 1px, transparent 1px 28px),
    /* 淡雅浅色蒙层 */
    linear-gradient(rgba(226, 229, 236, 0.70), rgba(220, 225, 231, 0.76)),
    /* 底图 */
    url("/static/bg/02.jpg") center / cover no-repeat fixed;
}

/* ---- 侧边栏：深色 → 磨砂玻璃浅色 ---- */
.sidebar {
  background: rgba(252, 253, 255, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  color: var(--ink);
}
.brand-mark { background: var(--primary); color: #fff; border-radius: var(--r-btn); }
.brand strong { color: var(--ink); }
.brand small { color: var(--muted); }
.main-nav a { color: var(--muted); border-radius: var(--r-btn); }
.main-nav a:hover { color: var(--ink); background: rgba(91, 110, 140, 0.10); }
.main-nav a.active { color: #fff; background: var(--primary); }
.sidebar-user { border-top: 1px solid var(--line); }
.user-copy strong { color: var(--ink); }
.user-copy small, .sidebar .icon-button { color: var(--muted); }
.avatar { background: var(--primary-soft); color: var(--primary-dark); }

/* ---- 卡片容器统一毛玻璃 + 圆角 12 ---- */
.form-section, .variant-card, .source-summary, .stat-card, .draft-row,
.panel, .failure-panel, .empty-state, .login-card, .filter-bar,
.members-table, .table-card, .review-panel, .persona-lock {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.review-panel { background: rgba(255, 255, 255, 0.45); }

/* ---- 按钮圆角 10 ---- */
.button, .icon-button, .filter-bar select, .field input, .field select,
.field textarea, .topic-tab {
  border-radius: var(--r-btn);
}
.button.primary { background: var(--primary); border-color: var(--primary); }
.button.primary:hover { background: var(--primary-dark); }
.eyebrow { color: var(--primary-dark); letter-spacing: 0.12em; }

/* ---- 弹窗/浮层圆角 16 ---- */
.modal, .dialog, [role="dialog"] { border-radius: var(--r-modal); }

/* ---- 输入控件玻璃感 ---- */
.field input, .field select, .field textarea {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;
}

/* ---- 口播稿模块新组件 ---- */
.persona-lock {
  display: grid;
  gap: 6px;
  padding: 18px 22px;
  margin-bottom: 26px;
  border-left: 3px solid var(--amber);
}
.persona-lock .lock-label {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--amber); font-size: 12px; font-weight: 700;
}
.persona-lock strong { font-size: 17px; color: var(--ink); }
.persona-lock small { color: var(--muted); }

.focus-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.focus-icon { font-size: 24px; }

.topic-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.topic-tab {
  padding: 8px 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: all 160ms ease;
}
.topic-tab:hover { color: var(--ink); border-color: var(--primary); }
.topic-tab.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 700;
}

.topic-group { display: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.topic-group.active { display: grid; }
.topic-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: all 160ms ease;
}
.topic-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.topic-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.topic-card input {
  width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 2px 0 0;
  flex: 0 0 16px; accent-color: var(--primary); box-shadow: none;
}
.topic-card span { min-width: 0; display: grid; gap: 3px; }
.topic-card strong { font-size: 13.5px; line-height: 1.4; }
.topic-card small { color: var(--muted); font-size: 12px; }
.custom-topic { margin-top: 16px; }

/* 口播稿类型徽标 */
.track-badge.kind-script { background: var(--amber-soft); color: var(--amber); }

/* ---- 正文展示区（衬线明朝体的阅读感） ---- */
.moment-copy {
  font-size: 15px;
  line-height: 2;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--r-card);
  white-space: pre-wrap;
}

/* 选择态卡片 */
.choice-card { border-radius: var(--r-card); background: rgba(255,255,255,.55); }
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* 状态与告警的淡雅化 */
.alert { border-radius: var(--r-card); backdrop-filter: var(--glass-blur); }

/* 移动端顶栏玻璃 */
.mobile-header {
  background: rgba(252, 253, 255, 0.7);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
}