/* ==========================================================================
   base.css —— 设计令牌 / reset / 通用组件（按钮、卡片、toast、进度条、表单、表格）
   Emily 的秘密花园：樱花粉紫主题。移动端优先，系统字体，零外部依赖。
   语义色（记住=绿 / 没记住=珊瑚 / 错误警告=红橙）保持不变，可读性优先。
   ========================================================================== */
:root {
  /* ---- 品牌（樱花粉紫）---- */
  --c-brand: #EC4899;        /* 主按钮实底色 */
  --c-primary: #F472B6;      /* 品牌主色（强调 / 边框 / 进度）*/
  --c-primary-d: #BE185D;    /* 中色文字 */
  --c-primary-l: #FCE7F3;    /* 浅色底 */
  --c-title: #9D174D;        /* 标题深色文字 */
  --c-purple: #A78BFA;       /* 辅色（紫）*/
  --c-purple-d: #5B21B6;     /* 辅色文字 */
  --c-purple-l: #EDE9FE;     /* 辅色浅底 */
  --c-accent: #FBBF24;       /* 点缀（奶黄）*/
  --c-accent-d: #92400E;     /* 点缀文字 */
  --c-accent-l: #FEF3C7;     /* 点缀浅底 */

  /* ---- 中性 / 底色 ---- */
  --c-bg: #FFF9FC;           /* 页面底色 */
  --c-surface: #ffffff;
  --c-surface-2: #FDF2F8;
  --c-text: #4A3F55;
  --c-muted: #9A8AA3;
  --c-line: #F5E3EE;         /* 柔和粉线 */
  --c-disabled: #E7D8E0;

  /* ---- 语义色（保持不变，勿为好看牺牲可读性）---- */
  --c-success: #10B981;      /* 「记住了」→ 绿色系 */
  --c-success-d: #059669;
  --c-forget: #FB7185;       /* 「没记住」→ 柔和珊瑚色系 */
  --c-forget-d: #F43F5E;
  --c-warn: #FBBF24;         /* 警告/注意 → 奶黄 */
  --c-danger: #EF4444;       /* 错误 → 红 */

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 3px rgba(157, 23, 77, .06), 0 8px 22px rgba(157, 23, 77, .08);
  --shadow-sm: 0 1px 2px rgba(157, 23, 77, .08);

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: var(--fs-md);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primary-d); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- 布局通用 ---------- */
.container { max-width: 960px; margin: 0 auto; padding: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grow { flex: 1; }
.muted { color: var(--c-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }

/* ---------- 顶部栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-purple) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.topbar h1 { font-size: var(--fs-lg); font-weight: 700; }
.topbar .sub { font-size: var(--fs-xs); opacity: .92; }
.icon-btn {
  border: 0; background: rgba(255,255,255,.22); color: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: var(--fs-sm); cursor: pointer;
}
.icon-btn:active { background: rgba(255,255,255,.36); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: var(--fs-md); font-weight: 600;
  background: var(--c-primary-l); color: var(--c-primary-d);
  cursor: pointer; transition: transform .05s ease, filter .15s ease;
  min-height: 44px;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--c-brand); color: #fff; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-forget { background: var(--c-forget); color: #fff; }
.btn-warn { background: var(--c-warn); color: #7C2D12; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-ghost { background: transparent; color: var(--c-text); border: 1px solid var(--c-line); }
.btn-sm { padding: 8px 12px; font-size: var(--fs-sm); min-height: 36px; }
.btn-block { width: 100%; }
.btn-lg { padding: 16px; font-size: var(--fs-lg); min-height: 56px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); border: 1px solid #F8E4F0;
}
.card-title { font-size: var(--fs-md); font-weight: 700; margin-bottom: 8px; color: var(--c-title); }
.section-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-muted); margin: 20px 4px 8px; }

/* ---------- 三数字 / 统计 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: var(--c-surface); border-radius: var(--radius); padding: 14px 8px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid #F8E4F0;
}
.stat .num { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.1; }
.stat .num.primary { color: var(--c-brand); }
.stat .num.success { color: var(--c-success-d); }
.stat .num.warn { color: var(--c-accent-d); }
.stat .label { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 4px; }
.stat-4 { grid-template-columns: repeat(2, 1fr); }

/* ---------- 门户网格 ---------- */
.portal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.portal-card {
  position: relative; background: var(--c-surface); border-radius: var(--radius);
  padding: 18px 16px; box-shadow: var(--shadow); cursor: pointer; overflow: hidden;
  border: 2px solid transparent; transition: transform .06s ease, border-color .15s ease;
  min-height: 118px; display: flex; flex-direction: column; justify-content: space-between;
}
.portal-card:active { transform: scale(.985); }
.portal-card.active { border-color: #F9A8D4; }
.portal-card.tint-pink { background: linear-gradient(160deg, #FCE7F3 0%, #ffffff 80%); }
.portal-card.tint-purple { background: linear-gradient(160deg, #EDE9FE 0%, #ffffff 80%); }
.portal-card .emoji { font-size: 30px; }
.portal-card .name { font-size: var(--fs-md); font-weight: 700; margin-top: 8px; color: var(--c-title); }
.portal-card .hint { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; }
.portal-card.disabled { background: #F8F4F7; cursor: default; }
.portal-card.disabled .name { color: var(--c-muted); }
.portal-card.disabled .emoji { filter: grayscale(1); opacity: .55; }
.badge-build {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; color: var(--c-muted); background: #EFE4EC;
  border-radius: 999px; padding: 2px 8px;
}
.portal-card.active .tail {
  position: absolute; right: -14px; bottom: -14px; width: 64px; height: 64px;
  border-radius: 50%; background: #F9A8D4; opacity: .42;
}

/* ---------- 页签 ---------- */
.tabs {
  display: flex; gap: 4px; background: var(--c-surface);
  border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab {
  flex: 1 0 auto; text-align: center; padding: 9px 12px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.tab.active { background: var(--c-brand); color: #fff; }

/* ---------- 弹层 ---------- */
.toast-wrap {
  position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; width: max-content; max-width: 90vw;
}
.toast {
  background: rgba(74, 63, 85, .96); color: #fff; border-radius: 999px;
  padding: 10px 18px; font-size: var(--fs-sm); box-shadow: var(--shadow);
  animation: toastIn .18s ease;
}
.toast.success { background: var(--c-success-d); }
.toast.error { background: var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.modal-mask {
  position: fixed; inset: 0; background: rgba(74, 30, 60, .42); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--c-surface); border-radius: var(--radius); padding: 20px;
  width: 100%; max-width: 360px; box-shadow: var(--shadow);
}
.modal h3 { font-size: var(--fs-md); margin-bottom: 10px; color: var(--c-title); }
.modal .actions { display: flex; gap: 10px; margin-top: 18px; }
.modal .actions .btn { flex: 1; }

/* ---------- 进度条 ---------- */
.progress { height: 8px; background: #F6E3ED; border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary), var(--c-purple)); transition: width .18s ease; }
/* 新词模式：总数未知 → 不限进度的流动样式（避免误导性固定分母）*/
.progress.indeterminate > i { width: 38% !important; animation: progIndeterminate 1.2s ease-in-out infinite; }
@keyframes progIndeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: var(--fs-sm); color: var(--c-muted); }
.input, textarea.input, select.input {
  width: 100%; padding: 12px; border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); background: var(--c-surface); outline: none;
}
.input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-l); }
textarea.input { resize: vertical; min-height: 120px; font-size: var(--fs-sm); line-height: 1.5; }

.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.switch-row:last-child { border-bottom: 0; }
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--c-disabled); border-radius: 999px; transition: .2s; }
.switch .slider::before { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--c-primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* ---------- 表格 / 列表 ---------- */
.list { background: var(--c-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid #F8E4F0; }
.list-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
.list-item:last-child { border-bottom: 0; }
.list-item .main { flex: 1; min-width: 0; }
.list-item .term { font-weight: 600; }
.list-item .meta { font-size: var(--fs-xs); color: var(--c-muted); margin-top: 2px; word-break: break-all; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--c-line); color: var(--c-muted); }
.chip.waiting { background: var(--c-purple-l); color: var(--c-purple-d); }
.chip.learning { background: var(--c-accent-l); color: var(--c-accent-d); }
.chip.mastered { background: #D1FAE5; color: #047857; }

.empty { text-align: center; color: var(--c-muted); padding: 36px 16px; font-size: var(--fs-sm); }

/* ---------- 全屏卡片页 ---------- */
.card-screen { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background: var(--c-bg); }
.card-top { padding: calc(10px + var(--safe-top)) 16px 8px; }
.card-top .line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.card-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 16px; min-height: 0; }
.card-face {
  width: 100%; max-width: 520px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--c-surface); border-radius: 28px; box-shadow: var(--shadow);
  border: 1px solid #F6D9E7;
  padding: 24px; text-align: center; position: relative; overflow: hidden;
}
.card-term { font-size: 46px; font-weight: 800; line-height: 1.15; word-break: break-word; color: var(--c-title); }
.card-phonetic { font-size: var(--fs-lg); color: var(--c-muted); margin-top: 10px; }
.card-pos { display: inline-block; font-size: var(--fs-sm); color: var(--c-purple-d); background: var(--c-purple-l); border-radius: 999px; padding: 2px 12px; margin-top: 12px; }
.card-meaning { font-size: var(--fs-xl); font-weight: 700; margin-top: 18px; color: var(--c-title); }
.card-phrase { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 10px; }
/* 改造 4：卡片上的「对了几次 / 错了几次」 */
.card-rw { font-size: var(--fs-sm); color: var(--c-muted); margin-top: 12px; }
.card-actions { padding: 10px 16px calc(16px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 10px; }
.card-actions .big { display: flex; gap: 12px; }
.card-actions .big .btn { flex: 1; }
.tap-hint { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.speak-btn { border: 0; background: var(--c-primary-l); color: var(--c-primary-d); border-radius: 999px; padding: 10px 16px; font-size: var(--fs-md); cursor: pointer; margin-top: 16px; }
.done-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; text-align: center; }
.done-emoji { font-size: 64px; }