/* ============================================================
   学点啥 · 视觉系统 v2 —— 科技 / 理性 / 时尚 / 简约 / 大气
   冷色靛蓝主调 · 发丝线 · 大留白 · 字重分层 · 微动效
   ============================================================ */

/* ---------- token 层 ---------- */
:root {
  /* 主色：深空靛蓝（饱和克制） */
  --c-accent: #3B5BDB;
  --c-accent-strong: #3251C4;
  --c-accent-soft: #EDF0FB;

  /* 功能色：低饱和三档 */
  --c-ok: #1F7A55;
  --c-ok-soft: #E6F4ED;
  --c-warn: #A8741E;
  --c-warn-soft: #F7F0E1;
  --c-danger: #C93A52;
  --c-danger-soft: #F9ECEF;

  /* 中性：冷灰阶（不发黄），背景与表面拉开一档 */
  --c-bg: #F5F6F9;
  --c-surface: #FFFFFF;
  --c-hairline: #E4E7EE;
  --c-hairline-strong: #CFD5E1;
  --c-text: #1B2233;
  --c-text-2: #59627A;
  --c-text-3: #5F6A85;
  --c-mute-soft: #EEF0F5;

  /* 玻璃与浮层 */
  --glass: rgba(255, 255, 255, 0.86);
  --scrim: rgba(20, 26, 43, 0.48);
  --toast-bg: rgba(27, 32, 48, 0.92);

  /* 字号档：17 大标题 / 14 正文 / 12 辅助 / 11 标签 */
  --fs-lg: 17px;
  --fs-md: 14px;
  --fs-sm: 12px;
  --fs-xs: 11px;

  /* 圆角档：克制（小档为主，卡片稍大） */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  /* 间距档（4 基） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* 卡片内水平基准边距（bar / 分组 / 正文 / 表单对齐） */
  --pad-h: 16px;

  /* 阴影：几乎不可见，层次交给边框 */
  --shadow-1: 0 1px 2px rgba(27, 34, 51, 0.04);

  /* 动效档：仅 hover/active 微反馈 */
  --tr: 160ms ease;
}

/* ---------- 基础与兜底 ---------- */
* { box-sizing: border-box; margin: 0; }

/* hidden 显隐机制全局兜底：覆盖所有被赋 display 的可隐藏元素（.screen/.modal/.toast/.empty 等） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--c-accent-soft); }

button { -webkit-tap-highlight-color: transparent; }

#app { max-width: 420px; margin: 0 auto; min-height: 100vh; padding-bottom: 76px; position: relative; }

/* ---------- 顶栏 ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px var(--pad-h);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--c-hairline);
}

.back {
  border: 0;
  background: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  margin: 0 -6px 0 -10px;
  font-size: 24px;
  line-height: 1;
  color: var(--c-accent);
  transition: opacity var(--tr);
}
.back:active { opacity: 0.55; }

/* ---------- 屏与留白 ---------- */
.screen { padding-bottom: var(--sp-5); }

/* ---------- 空态 ---------- */
.empty { text-align: center; padding: 88px 32px 64px; }
.empty-text {
  color: var(--c-text-3);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-6);
}

/* ---------- 按钮：三级层次（实心主 CTA / 描边 / 幽灵） ---------- */
.btn {
  min-height: 44px; /* 触控目标底线 */
  padding: 0 18px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--c-accent);
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background-color var(--tr), border-color var(--tr), color var(--tr), opacity var(--tr), transform var(--tr);
}
.btn:active { transform: translateY(1px); }

/* 主操作：实心，唯一存在感 */
.btn.primary {
  min-width: 120px; /* 防「摇取中」等文案切换时宽度跳动 */
  background: var(--c-accent);
  color: #FFFFFF;
}
.btn.primary:active { background: var(--c-accent-strong); }

.btn.big { width: 64%; padding: 13px 20px; font-size: 16px; }

/* 次级：幽灵，安静 */
.btn.plain { border-color: transparent; background: none; color: var(--c-text-2); }
.btn.plain:active { color: var(--c-accent); }

.btn.small { min-height: 44px; padding: 0 14px; font-size: 13px; }

.btn[disabled] { opacity: 0.42; pointer-events: none; }

/* 完成态：低饱和绿 */
.btn.ok { border-color: var(--c-ok); color: var(--c-ok); background: var(--c-ok-soft); }

/* ---------- 工具行 ---------- */
.toolbar { display: flex; justify-content: center; padding: 10px 8px 2px; }

/* ---------- 列表与卡片 ---------- */
.list { padding: var(--sp-3) var(--sp-3) 0; }

.card-box {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--tr);
}
.card-box:hover { border-color: var(--c-hairline-strong); }

.card-title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: var(--sp-1); }
.card-desc { color: var(--c-text-3); font-size: var(--fs-xs); letter-spacing: 0.06em; margin-bottom: 14px; }
.card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 概念库列表单元 */
.cell {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  padding: 14px var(--sp-4);
  margin-bottom: var(--sp-3);
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  transition: background-color var(--tr), border-color var(--tr);
}
.cell:active { background: var(--c-accent-soft); }
.cell .name { font-size: 15px; font-weight: 500; }
.cell .field { color: var(--c-text-3); font-size: var(--fs-xs); letter-spacing: 0.04em; margin-top: 2px; }

/* ---------- 标签 ---------- */
.tag {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: var(--r-s);
  background: var(--c-mute-soft);
  color: var(--c-text-2);
}
.tag.growing { background: var(--c-accent-soft); color: var(--c-accent); }
.tag.stable { background: var(--c-ok-soft); color: var(--c-ok); }

/* ---------- 分组卡 ---------- */
.group {
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  margin: 0 var(--sp-3) var(--sp-3);
  padding: var(--sp-2) 0;
}
.group h3 {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
  padding: 10px var(--pad-h) var(--sp-1);
}

.sec-body { padding: var(--sp-1) var(--pad-h) var(--sp-3); font-size: var(--fs-md); line-height: 1.75; white-space: pre-wrap; }
.sec-body.dim { color: var(--c-text-3); font-size: var(--fs-sm); }
.link-line { color: var(--c-accent); }

/* ---------- 表单 ---------- */
textarea,
input[type='text'],
input[type='password'] {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-s);
  padding: 10px var(--sp-3);
  font-size: var(--fs-md);
  font-family: inherit;
  line-height: 1.6;
  color: var(--c-text);
  margin: var(--sp-1) 0 var(--sp-2);
  transition: border-color var(--tr), box-shadow var(--tr);
}
textarea { min-height: 72px; resize: vertical; }

textarea:focus,
input[type='text']:focus,
input[type='password']:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

::placeholder { color: var(--c-text-3); }

input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--c-accent);
  flex-shrink: 0;
}

/* ---------- 设置行 ---------- */
.row-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: 13px var(--pad-h);
  font-size: var(--fs-md);
  cursor: pointer;
}
.col-line { display: block; padding: 13px var(--pad-h) var(--sp-1); font-size: var(--fs-md); }
.hint { display: block; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: 400; margin-top: 3px; letter-spacing: 0.01em; }

/* ---------- 受众切换 ---------- */
.aud-tabs { display: flex; gap: 6px; padding: var(--sp-2) var(--pad-h) 0; }
.aud-tabs button {
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--c-hairline);
  background: var(--c-surface);
  border-radius: var(--r-s);
  font-family: inherit;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--c-text-2);
  cursor: pointer;
  transition: border-color var(--tr), color var(--tr), background-color var(--tr);
}
.aud-tabs button.on {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-soft);
  font-weight: 500;
}

/* ---------- 操作行 ---------- */
.rowbtns { display: flex; gap: var(--sp-2); padding: 6px var(--pad-h) 10px; flex-wrap: wrap; }
.footer-btns { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; padding: var(--sp-1) var(--sp-3) var(--sp-4); }

/* ---------- 提示条 ---------- */
.notice {
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
  border-left: 2px solid var(--c-accent);
  font-size: var(--fs-sm);
  line-height: 1.7;
  padding: 10px var(--pad-h);
  margin: var(--sp-3) var(--sp-3) 0;
}

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  display: flex;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--c-hairline);
  z-index: 5;
}
.tabbar button {
  flex: 1;
  min-height: 52px;
  border: 0;
  background: none;
  padding: 16px 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--c-text-3);
  cursor: pointer;
  transition: color var(--tr);
}
.tabbar button.on { color: var(--c-accent); font-weight: 600; }

/* ---------- 弹层（底部抽屉） ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 9;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-box {
  background: var(--c-surface);
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  padding: 14px var(--pad-h);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--c-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body {
  padding: 14px var(--pad-h) var(--sp-6);
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}
.close {
  border: 0;
  background: none;
  min-width: 44px;
  min-height: 44px;
  margin-right: -10px;
  font-size: 22px;
  line-height: 1;
  color: var(--c-text-3);
  cursor: pointer;
  transition: color var(--tr);
}
.close:active { color: var(--c-text); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: var(--r-s);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  line-height: 1.5;
  z-index: 19;
  max-width: 80%;
  text-align: center;
}