/* =========================================================
   回忆主题 - 粉色复古 / Memory Pink
   ---------------------------------------------------------
   灵感：复古杂志、樱花粉、蜜桃粉、暖灰、奶白
   主色：樱花粉 #d88fa3
   辅色：蜜桃粉 #f5b5a8
   强调：玫瑰金 #c9876a
   背景：奶白 #fdf6f3
   ========================================================= */

/* ── Token覆盖（仅回忆主题相关）── */
body.theme-memory{
  /* 品牌色 */
  --color-brand: #d88fa3;
  --color-brand-hover: #c57792;
  --color-brand-active: #b15d7e;
  --color-brand-soft: #fbe4ea;
  --color-brand-ring: rgba(216,143,163,.18);
  --color-brand-gradient: linear-gradient(135deg,#d88fa3,#c57792);

  /* 金色辅助（玫瑰金） */
  --color-gold: #c9876a;
  --color-gold-hover: #a87052;
  --color-gold-soft: #f0d2c2;

  /* 钢灰（暖灰） */
  --color-steel: #b5a39a;
  --color-steel-soft: #e8dcd6;

  /* 画布与表面 */
  --color-canvas: #fdf6f3;
  --color-surface: #ffffff;
  --color-surface-2: #faece8;
  --color-surface-3: #f5dde0;

  /* 文字 */
  --color-ink: #3a2628;
  --color-body: #5d4347;
  --color-muted: #8a6d72;
  --color-subtle: #b3a0a4;
  --color-on-brand: #ffffff;

  /* 边框 */
  --color-line: #f0d8d6;
  --color-line-strong: #e0bdb8;

  /* 语义色（柔化处理） */
  --color-success: #7a9070;
  --color-success-dark: #4d6448;
  --color-success-soft: #e8ede5;
  --color-warning: #c19a5e;
  --color-warning-dark: #8a6932;
  --color-warning-soft: #f5e9d4;
  --color-error: #c47a82;
  --color-error-dark: #8e4d54;
  --color-error-soft: #f5dde0;
  --color-info: #8a92a3;
  --color-info-dark: #5e6573;
  --color-info-soft: #e8eaee;
}

/* =========================================================
   1. 基础排版
   ========================================================= */
body.theme-memory{
  background:var(--color-canvas);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0%,rgba(216,143,163,.10),transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%,rgba(245,181,168,.08),transparent 60%);
  background-attachment:fixed;
  color:var(--color-ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* =========================================================
   2. 顶部导航
   ========================================================= */
body.theme-memory .topbar{
  background:rgba(253,246,243,.85);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--color-line);
  box-shadow:0 1px 0 rgba(216,143,163,.04);
}
body.theme-memory .topbar.scrolled{
  background:rgba(253,246,243,.95);
  box-shadow:0 2px 12px rgba(216,143,163,.08);
}
body.theme-memory .topbar:after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--color-brand) 30%,var(--color-gold) 70%,transparent);
  opacity:.6;
}
body.theme-memory .brand b{
  background:linear-gradient(135deg,var(--color-brand),var(--color-gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}
body.theme-memory .brand small{ color:var(--color-muted); }

body.theme-memory .nav-tab{
  color:var(--color-ink);
  font-weight:var(--weight-medium);
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .nav-tab:hover{
  color:var(--color-brand);
  background:var(--color-brand-soft);
}
body.theme-memory .nav-tab.active{
  color:var(--color-on-brand);
  background:var(--color-brand-gradient);
  font-weight:var(--weight-bold);
  box-shadow:0 2px 8px rgba(216,143,163,.3);
}
body.theme-memory .nav-tab.active:after{ display:none; }

/* =========================================================
   3. 按钮
   ========================================================= */
body.theme-memory .btn{
  border-radius:var(--radius-pill);
  font-weight:var(--weight-medium);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  border:1px solid transparent;
}
body.theme-memory .btn:active{transform:scale(.97);}
body.theme-memory .btn-primary{
  background:var(--color-brand-gradient);
  color:var(--color-on-brand);
  box-shadow:0 2px 8px rgba(216,143,163,.25);
}
body.theme-memory .btn-primary:hover{
  background:var(--color-brand-hover);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(216,143,163,.35);
}
body.theme-memory .btn-ghost{
  background:transparent;
  color:var(--color-brand);
  border-color:var(--color-line-strong);
}
body.theme-memory .btn-ghost:hover{
  background:var(--color-brand-soft);
  border-color:var(--color-brand);
}
body.theme-memory .btn-secondary{
  background:var(--color-surface);
  color:var(--color-ink);
  border:1px solid var(--color-line);
}
body.theme-memory .btn-secondary:hover{
  background:var(--color-surface-2);
  border-color:var(--color-brand);
}

/* =========================================================
   4. 卡片与表面
   ========================================================= */
body.theme-memory .card,
body.theme-memory .surface,
body.theme-memory [class*="-card"]{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  box-shadow:0 2px 12px rgba(58,38,40,.04);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .card:hover,
body.theme-memory .surface:hover{
  box-shadow:0 6px 24px rgba(216,143,163,.10);
  transform:translateY(-2px);
}

/* 玻璃感特殊卡片 */
body.theme-memory .glass-card{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 4px 24px rgba(216,143,163,.10);
}

/* =========================================================
   5. 标题与装饰
   ========================================================= */
body.theme-memory h1,
body.theme-memory h2,
body.theme-memory h3{
  color:var(--color-ink);
  letter-spacing:-.01em;
}
body.theme-memory h1 b,
body.theme-memory h2 b,
body.theme-memory h3 b{
  background:linear-gradient(135deg,var(--color-brand),var(--color-gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* 章节标题装饰线（虚线粉色） */
body.theme-memory .section-title::before,
body.theme-memory .module-title::before{
  content:"";
  display:inline-block;
  width:24px;
  height:2px;
  background:linear-gradient(90deg,var(--color-brand),var(--color-gold));
  vertical-align:middle;
  margin-right:var(--space-3);
  border-radius:var(--radius-pill);
}

/* =========================================================
   6. 工具计算器 / 表格
   ========================================================= */
body.theme-memory .tool-panel,
body.theme-memory .grade-table-wrap{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  box-shadow:0 2px 16px rgba(216,143,163,.06);
}
body.theme-memory table{
  border-collapse:separate;
  border-spacing:0;
  background:var(--color-surface);
}
body.theme-memory th{
  background:var(--color-surface-2);
  color:var(--color-ink);
  font-weight:var(--weight-bold);
  border-bottom:1px solid var(--color-line);
  padding:var(--space-3) var(--space-4);
  text-align:left;
}
body.theme-memory th:first-child{ border-top-left-radius:var(--radius-md); }
body.theme-memory th:last-child{ border-top-right-radius:var(--radius-md); }
body.theme-memory td{
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--color-line);
  color:var(--color-body);
}
body.theme-memory tr:last-child td{ border-bottom:0; }
body.theme-memory tr:hover td{
  background:var(--color-brand-soft);
  transition:background-color var(--transition-fast);
}

/* 工具结果卡 */
body.theme-memory .result-item{
  background:linear-gradient(135deg,var(--color-surface),var(--color-surface-2));
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .result-item:hover{
  border-color:var(--color-brand);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(216,143,163,.15);
}
body.theme-memory .result-item.active{
  background:linear-gradient(135deg,var(--color-brand-soft),var(--color-surface));
  border-color:var(--color-brand);
}
body.theme-memory .result-item b{
  color:var(--color-brand);
  font-weight:var(--weight-bold);
}

/* =========================================================
   7. 输入控件
   ========================================================= */
body.theme-memory input,
body.theme-memory select,
body.theme-memory textarea{
  background:var(--color-surface);
  border:1.5px solid var(--color-line);
  border-radius:var(--radius-input);
  color:var(--color-ink);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory input:focus,
body.theme-memory select:focus,
body.theme-memory textarea:focus{
  border-color:var(--color-brand);
  box-shadow:0 0 0 3px var(--color-brand-ring);
  outline:0;
}
body.theme-memory input::placeholder{ color:var(--color-subtle); }

/* =========================================================
   8. 学习页 / 课程卡片
   ========================================================= */
body.theme-memory .course-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .course-card:hover{
  border-color:var(--color-brand);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(216,143,163,.15);
}
body.theme-memory .course-card .cover{
  background:linear-gradient(135deg,var(--color-brand-soft),var(--color-surface-2));
  position:relative;
}
body.theme-memory .course-card .cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at top right,rgba(245,181,168,.4),transparent 60%);
  pointer-events:none;
}
body.theme-memory .course-progress-bar{
  background:var(--color-brand-soft);
  border-radius:var(--radius-pill);
  overflow:hidden;
}
body.theme-memory .course-progress-bar i{
  background:var(--color-brand-gradient);
  border-radius:var(--radius-pill);
}

/* 进度圆环 */
body.theme-memory .progress-ring .ring-bg{ stroke:var(--color-brand-soft); }
body.theme-memory .progress-ring .ring-fg{ stroke:url(#memoryRingGradient); }

/* SVG ring渐变定义 */
body.theme-memory svg defs linearGradient#memoryRingGradient{
  --g-start:var(--color-brand);
  --g-end:var(--color-gold);
}

/* =========================================================
   9. 徽章 / 标签 / 标签栏
   ========================================================= */
body.theme-memory .tag,
body.theme-memory .badge,
body.theme-memory .chip{
  background:var(--color-brand-soft);
  color:var(--color-brand-active);
  border-radius:var(--radius-pill);
  font-weight:var(--weight-medium);
  border:1px solid transparent;
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .tag:hover,
body.theme-memory .badge:hover{
  background:var(--color-brand);
  color:var(--color-on-brand);
}
body.theme-memory .tag.gold,
body.theme-memory .badge.gold{
  background:linear-gradient(135deg,#f0d2c2,#ddc99f);
  color:#8a6932;
}
body.theme-memory .tag.outline,
body.theme-memory .badge.outline{
  background:transparent;
  border-color:var(--color-line-strong);
  color:var(--color-muted);
}

/* 步骤条 */
/* =========================================================
   9b. 成果展示条（outcome-strip）暗色面板
   ========================================================= */
body.theme-memory .outcome-strip{
  background:linear-gradient(135deg,#3a2628,#5d4347,#3a2628);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-xl);
  padding:32px 36px;
  position:relative;
  overflow:hidden;
}
body.theme-memory .outcome-strip::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#c9876a 30%,#d88fa3 70%,transparent);
  opacity:.4;
}

/* 成果展示条内的文字 */
body.theme-memory .outcome-strip h2,
body.theme-memory .outcome-strip h3,
body.theme-memory .outcome-strip h4,
body.theme-memory .outcome-strip p,
body.theme-memory .outcome-strip span,
body.theme-memory .outcome-strip li{
  color:#fff !important;
}
body.theme-memory .outcome-copy > span{
  color:#ddc99f !important;
  font-size:var(--font-sm);
  letter-spacing:2px;
  text-transform:uppercase;
}
body.theme-memory .outcome-copy h2{
  font-size:var(--font-2xl) !important;
  line-height:1.4;
  margin:8px 0 6px;
}
body.theme-memory .outcome-copy p{
  color:rgba(255,255,255,.8) !important;
  font-size:var(--font-base);
}

/* 五步流程 */
body.theme-memory .step-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  color:#fff;
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  min-width:0;
  overflow:hidden;
}
body.theme-memory .step-item b{
  color:#fff !important;
  font-size:var(--font-xl);
  font-weight:700;
}
body.theme-memory .step-item span{
  color:rgba(255,255,255,.9) !important;
  font-size:var(--font-sm);
}
body.theme-memory .step-item.active{
  background:var(--color-brand-gradient);
  border-color:transparent;
  box-shadow:0 4px 12px rgba(216,143,163,.30);
}
body.theme-memory .step-item.active b,
body.theme-memory .step-item.active span{
  color:#fff !important;
}
body.theme-memory .step-item.done{
  background:rgba(122,144,112,.25);
  border-color:rgba(122,144,112,.4);
}
body.theme-memory .step-item.done b,
body.theme-memory .step-item.done span{
  color:#e8ede5 !important;
}

/* =========================================================
   9c. 记忆口诀标签
   ========================================================= */
/* 在浅色面板中，记忆口诀需要足够对比度 */
body.theme-memory .family-mnemonic{
  background:#5a3a3a;
  border:1px solid rgba(201,135,106,.45);
}
body.theme-memory .mnemonic-label{
  background:var(--color-gold);
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}
body.theme-memory .mnemonic-item{
  color:#fff8f0;
}
body.theme-memory .mnemonic-item::before{
  background:#f5b5a8;
}

/* =========================================================
   10. 排行榜 / 积分
   ========================================================= */
body.theme-memory .ranking-row{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .ranking-row:hover{
  border-color:var(--color-brand);
  background:var(--color-brand-soft);
}
body.theme-memory .ranking-row.head{
  background:transparent;
  border:0;
  border-bottom:2px solid var(--color-line-strong);
  color:var(--color-muted);
  font-weight:var(--weight-bold);
}
body.theme-memory .ranking-row.current-rank{
  background:linear-gradient(135deg,var(--color-brand-soft),var(--color-surface-2));
  border-color:var(--color-brand);
  box-shadow:0 4px 16px rgba(216,143,163,.18);
}
body.theme-memory .rank-medal{
  background:linear-gradient(135deg,var(--color-gold),var(--color-gold-hover));
  color:#fff;
  border-radius:var(--radius-round);
  width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);
  font-size:var(--font-md);
}
body.theme-memory .rank-medal.rank-1{ background:linear-gradient(135deg,#f5b5a8,#c9876a); }
body.theme-memory .rank-medal.rank-2{ background:linear-gradient(135deg,#e8dcd6,#b5a39a); }
body.theme-memory .rank-medal.rank-3{ background:linear-gradient(135deg,#d8b89a,#a87d4f); }

/* =========================================================
   11. 证书 / 成就
   ========================================================= */
body.theme-memory .cert-card{
  background:linear-gradient(135deg,#fdf6f3,#fbe4ea 60%,#f5b5a8);
  border:1px solid var(--color-gold-soft);
  border-radius:var(--radius-card-lg);
  position:relative;
  overflow:hidden;
}
body.theme-memory .cert-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right,rgba(201,135,106,.12),transparent 50%);
  pointer-events:none;
}
body.theme-memory .cert-stamp{
  background:linear-gradient(135deg,var(--color-brand),var(--color-gold));
  color:#fff;
  border-radius:var(--radius-round);
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--weight-bold);
  box-shadow:0 4px 12px rgba(216,143,163,.3);
}

/* =========================================================
   12. Toast / 提示
   ========================================================= */
body.theme-memory .toast{
  background:var(--color-surface);
  color:var(--color-ink);
  border:1px solid var(--color-line);
  border-left:4px solid var(--color-brand);
  border-radius:var(--radius-md);
  box-shadow:0 4px 20px rgba(58,38,40,.12);
}
body.theme-memory .toast.success{ border-left-color:var(--color-success); }
body.theme-memory .toast.warning{ border-left-color:var(--color-warning); }
body.theme-memory .toast.error{ border-left-color:var(--color-error); }

/* =========================================================
   13. 弹窗 / 抽屉
   ========================================================= */
body.theme-memory .modal,
body.theme-memory .drawer{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-card-lg);
  box-shadow:0 16px 64px rgba(58,38,40,.20);
}
body.theme-memory .modal-backdrop{
  background:rgba(58,38,40,.35);
  backdrop-filter:blur(4px);
}

/* =========================================================
   14. 主题切换器
   ========================================================= */
body.theme-memory .theme-stepper{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  box-shadow:0 2px 8px rgba(216,143,163,.12);
}
body.theme-memory .theme-stepper .step-btn{
  color:var(--color-muted);
  border-radius:var(--radius-pill);
  transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
}
body.theme-memory .theme-stepper .step-btn:hover{
  background:var(--color-brand-soft);
  color:var(--color-brand);
}
body.theme-memory .theme-stepper .step-label{
  color:var(--color-ink);
  font-weight:var(--weight-bold);
}

/* =========================================================
   15. 装饰元素
   ========================================================= */
/* 复古分隔线（樱花粉虚线） */
body.theme-memory hr,
body.theme-memory .divider{
  border:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--color-brand-soft),transparent);
}

/* 装饰小爱心点（点缀） */
body.theme-memory .deco-dot::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  background:var(--color-brand);
  border-radius:var(--radius-round);
  margin-right:var(--space-2);
  vertical-align:middle;
}

/* 引用块 */
body.theme-memory blockquote{
  border-left:3px solid var(--color-brand);
  background:var(--color-brand-soft);
  padding:var(--space-3) var(--space-4);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--color-body);
  font-style:normal;
}

/* =========================================================
   16. 特殊页面 / Hero区
   ========================================================= */
body.theme-memory .hero{
  background:linear-gradient(135deg,#fbe4ea 0%,#fdf6f3 50%,#faece8 100%);
  position:relative;
  overflow:hidden;
}
body.theme-memory .hero::before{
  content:"";
  position:absolute;
  top:-50%;right:-20%;
  width:80%;height:200%;
  background:radial-gradient(ellipse,rgba(245,181,168,.25),transparent 60%);
  pointer-events:none;
  z-index:0;
}
body.theme-memory .hero-title b{
  background:linear-gradient(135deg,var(--color-brand),var(--color-gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* =========================================================
   17. 备案号Footer
   ========================================================= */
body.theme-memory .site-footer{
  background:linear-gradient(135deg,#3a2628,#5d4347);
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
}
body.theme-memory .site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--color-brand) 30%,var(--color-gold) 70%,transparent);
  opacity:.5;
}
body.theme-memory .footer-brand b{ color:#fdf6f3; }
body.theme-memory .footer-brand small{ color:rgba(253,246,243,.6); }
body.theme-memory .footer-links{ color:rgba(253,246,243,.6); }
body.theme-memory .footer-links a{ color:rgba(253,246,243,.7); }
body.theme-memory .footer-links a:hover{ color:#f5b5a8; }
body.theme-memory .footer-copy{ color:rgba(253,246,243,.5); }
body.theme-memory .footer-copy a{ color:rgba(253,246,243,.6); }
body.theme-memory .footer-copy a:hover{ color:#f5b5a8; }
body.theme-memory .beian-row{ color:rgba(253,246,243,.55); }
body.theme-memory .beian-row .beian-link{ color:rgba(253,246,243,.6); }
body.theme-memory .beian-row .beian-link:hover{ color:#f5b5a8; }
body.theme-memory .beian-row .beian-police-icon{ color:rgba(253,246,243,.55); }
body.theme-memory .beian-row .beian-link:hover .beian-police-icon{ color:#f5b5a8; }

/* =========================================================
   18. 移动端适配
   ========================================================= */
@media(max-width:768px){
  body.theme-memory .hero::before{
    width:120%;height:120%;
  }
  body.theme-memory .nav-tab{
    padding:var(--space-1) var(--space-3);
    font-size:var(--font-md);
  }
}