/* 小苍梨英语屋 · 方案 C：与主页统一的现代编辑式学习界面
   配色：莫兰迪「混合推荐」——青绿主色 + 暖橘点缀（原 palette-demo 混合方案的正式版） */
:root {
  --bg: #f5f7f3;
  --bg2: #fffefa;
  --ink: #263733;
  --muted: #687671;
  --faint: #96a29e;
  --primary: #569688;
  --primary-600: #356f63;
  --primary-soft: #e8f1ed;
  --rule: #dce4dd;
  --rule-strong: #c8d4cb;
  --accent: #ec9876;
  --accent2: #d97e61;
  --tag-bg: #f4eac6;
  --tag-ink: #6d6349;
  --green-bg: #edf4ef;
  --green-ink: #356f63;
  --c-cream: #f4eac6;
  --c-gold: #ec9876;
  --c-red: #d97e61;
  --c-teal: #569688;
  --c-shadow: 0 20px 58px rgba(64, 102, 91, 0.11);
  --c-shadow-hover: 0 22px 48px rgba(64, 102, 91, 0.16);
  /* 混合推荐配色的页面级变量（原先仅由首页/登录页内联样式定义） */
  --paper: #f5f7f3;
  --surface: #fffefa;
  --line: #dce4dd;
  --indigo: #569688;
  --indigo-dark: #356f63;
  --indigo-soft: #e8f1ed;
  --sage: #8ab399;
  --sage-soft: #edf4ef;
  --gold: #ec9876;
}

html { scroll-padding-top: 82px; }

body {
  background:
    radial-gradient(circle at 84% 7%, rgba(86,150,136,.12), transparent 26rem),
    radial-gradient(circle at 6% 44%, rgba(244,234,198,.42), transparent 30rem),
    var(--paper, var(--bg));
  color: var(--ink);
}

body::before {
  top: 10%;
  right: -20rem;
  width: 42rem;
  height: 42rem;
  opacity: .65;
  background: radial-gradient(circle, rgba(236,152,118,.10), transparent 68%);
}

body::after {
  bottom: -20rem;
  left: -18rem;
  width: 42rem;
  height: 42rem;
  opacity: .7;
  background: radial-gradient(circle, rgba(192,206,179,.15), transparent 70%);
}

::selection { color: #fff; background: var(--primary); }

.page { max-width: 1120px; padding: 3rem 2rem 5rem; }

.site-nav {
  background: color-mix(in srgb, var(--surface, var(--bg2)) 91%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 86%, transparent);
  box-shadow: none;
}

.site-nav .nav-inner {
  max-width: 1180px;
  min-height: 72px;
  padding: .65rem 1.9rem;
  flex-wrap: nowrap;
  gap: 1.15rem;
}

.site-nav .nav-logo { width: 192px; height: 48px; }
.site-nav .nav-crumb { display: none; }
.site-nav .nav-links { gap: 1.1rem; flex-wrap: nowrap; }
.site-nav .nav-links a { padding: .32rem 0; color: #555e6b; font-size: .875rem; font-weight: 550; }
.site-nav .nav-links a, .site-nav .nav-btn, .site-nav .nav-account { white-space: nowrap; }
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active { color: var(--primary); background: transparent; }
.site-nav .nav-actions { display:flex; align-items:center; gap:.45rem; flex-shrink:0; }
.site-nav .nav-btn { background: rgba(255,254,250,.82); border-color: var(--rule); color:var(--ink); }
.site-nav .nav-btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}
.site-nav .nav-account { color:#7a6641; background:#fff9e4; border-color:#dfd29e; }
.site-nav .nav-admin { color:var(--primary-600); background:var(--primary-soft); }

.cover, .hero {
  position: relative;
  overflow: hidden;
  padding: 3.35rem 3rem 3rem;
  margin-bottom: 2rem;
  border: 1px solid var(--rule);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface, var(--bg2)) 93%, transparent);
  box-shadow: var(--c-shadow);
}

.cover::before, .hero::before {
  content: '';
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  top: -5.5rem;
  right: -3.5rem;
  border: 0;
  background: var(--primary-soft);
  z-index: 0;
  pointer-events: none;
}
.cover > *, .hero > * { position:relative; z-index:1; }

.cover .badge, .hero .badge {
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  padding:0;
  background: transparent;
  color: var(--primary);
  box-shadow: none;
  border: 0;
  border-radius:0;
  letter-spacing:.14em;
}
.cover .badge::before, .hero .badge::before { content:''; width:28px; height:2px; border-radius:99px; background:currentColor; }
.cover h1, .hero h1 { font-size:clamp(2.3rem,5vw,3.5rem); letter-spacing:-.035em; line-height:1.16; }

.cover h1, .hero h1, h2 { color: var(--ink); }
h2::after { background: linear-gradient(90deg, var(--c-gold), var(--primary)); }

.card, .chapter-card, .topic-card, .tool-card, .plan-card,
.exercise-card, .step-card, .word-card, .dict-card, .community-card,
.progress-card, .module-card, .article-card, .feature-card {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface, var(--bg2)) 93%, transparent);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(56,58,83,.055);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.card:hover, .chapter-card:hover, .topic-card:hover, .tool-card:hover,
.plan-card:hover, .exercise-card:hover, .step-card:hover, .word-card:hover,
.dict-card:hover, .module-card:hover, .article-card:hover, .feature-card:hover {
  transform: translateY(-3px);
  border-color: #bfd4ca;
  box-shadow: var(--c-shadow-hover);
}

.card::after, .chapter-card::after, .topic-card::after, .tool-card::after,
.module-card::after, .article-card::after, .feature-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -70%;
  width: 45%;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transition: left .62s ease;
}

.card:hover::after, .chapter-card:hover::after, .topic-card:hover::after,
.tool-card:hover::after, .module-card:hover::after,
.article-card:hover::after, .feature-card:hover::after { left: 130%; }

.btn, button, .primary-btn, .cta-btn {
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover, button:hover, .primary-btn:hover, .cta-btn:hover { transform: translateY(-2px); }

input, textarea, select {
  border-color: rgba(24,52,47,.14) !important;
  background: rgba(255,253,248,.9) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(86,150,136,.55) !important;
  box-shadow: 0 0 0 4px rgba(86,150,136,.10) !important;
  outline: none;
}

.footer, footer { color: #70807a; }

/* 课程分支页：沿用主页的轻量卡片、青绿主操作与绿色学习反馈 */
.teacher-note {
  margin: 1.25rem 0;
  padding: 1rem 1.2rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-teal);
  border-radius: 14px;
  background: rgba(255,254,250,.74);
}
.teacher-note strong { color:var(--ink); }
.speaking-tool-links { gap: .85rem; margin: 1.25rem 0 1.5rem; }
.speaking-tool-link {
  min-height: 158px;
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface, var(--bg2)) 93%, transparent);
  box-shadow: 0 8px 24px rgba(56,58,83,.045);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.speaking-tool-link:hover { transform:translateY(-3px); border-color:#bfd4ca; box-shadow:0 15px 32px rgba(56,64,90,.09); }
.speaking-tool-link .tool-link-badge {
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:0;
  color:var(--primary);
  border-radius:0;
  background:transparent;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.speaking-tool-link .tool-link-badge::before { content:''; width:16px; height:2px; border-radius:99px; background:currentColor; }
.speaking-tool-link strong { font-size:1rem; }
.speaking-tool-link p { margin-top:.28rem; font-size:.78rem; line-height:1.65; }
.speaking-tool-link em { color:var(--primary); }
.topic-tools { padding:1rem; border-radius:16px; background:rgba(255,254,250,.78); }
.topic-card { border-radius:18px; background:color-mix(in srgb, var(--surface, var(--bg2)) 93%, transparent); }
.topic-card:hover { border-color:#bfd4ca; box-shadow:0 12px 28px rgba(56,64,90,.08); }
.topic-card.is-done { border-color:#c9ddd4; background:#f3f8f5; }

/* 混合推荐配色 · 页面覆盖（会员/订阅页的固定靛蓝装饰改为青绿+暖橘主题面） */
.member-panel, .plan-card, .sub-plan-card {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--surface, var(--bg2)) 94%, transparent);
}
.member-mod.is-on:hover, .plan-card:hover, .sub-plan-card:hover {
  border-color: color-mix(in srgb, var(--primary) 56%, var(--rule));
  box-shadow: 0 20px 44px color-mix(in srgb, var(--primary) 15%, transparent);
}
.member-hero, .member-hero.plan-free, .member-hero.plan-plus {
  background: linear-gradient(135deg, #294b43 0%, #3d7468 58%, #569688 100%);
  box-shadow: 0 24px 60px rgba(53,111,99,.22);
}
.member-hero::before {
  background: radial-gradient(circle, rgba(244,234,198,.24), rgba(244,234,198,0) 68%);
}
.member-hero::after {
  background: radial-gradient(circle, rgba(236,152,118,.28), rgba(236,152,118,0) 68%);
}
.member-perk.is-pro {
  border-color: #dfd29e;
  background: linear-gradient(145deg, #fffaf0 0%, #f4eac6 48%, #e8f1ed 100%);
}

/* 首页：方案 C 正式版 */
.page.c-home { max-width: 1180px; padding-top: 2rem; }
.c-home-hero {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(300px,.7fr);
  gap: 1.4rem;
  align-items: stretch;
  margin-bottom: 1.4rem;
}

.c-hero-main {
  position: relative;
  min-height: 420px;
  padding: clamp(2.2rem,5vw,4.7rem);
  overflow: hidden;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 20%, rgba(242,190,103,.28), transparent 12rem),
    linear-gradient(135deg, #123f37, #176651 58%, #1f8068);
  box-shadow: 0 25px 70px rgba(22,91,75,.25);
}

.c-hero-main::before, .c-hero-main::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.c-hero-main::before {
  width: 25rem;
  height: 25rem;
  right: -11rem;
  bottom: -14rem;
  border: 4rem solid rgba(255,255,255,.055);
}

.c-hero-main::after {
  width: 8rem;
  height: 8rem;
  right: 9%;
  top: 16%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 2rem rgba(255,255,255,.025), 0 0 0 4rem rgba(255,255,255,.018);
  animation: c-float 7s ease-in-out infinite;
}

.c-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .48rem .82rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #d9f4eb;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.c-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f0bd68; box-shadow: 0 0 0 5px rgba(240,189,104,.12); }
.c-hero-main h1 { max-width: 680px; margin: 1.35rem 0 .9rem; color: #fff; font-size: clamp(2.55rem,5.5vw,5rem); line-height: 1.02; letter-spacing: -.055em; }
.c-hero-main h1 em { display: block; color: #f1c278; font-style: normal; }
.c-hero-main p { max-width: 600px; color: rgba(239,249,245,.76); font-size: 1.04rem; line-height: 1.8; }
.c-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.c-hero-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .75rem 1.2rem; border-radius: 12px; font-weight: 800; text-decoration: none; }
.c-hero-actions .c-primary { color: #173d35; background: #f1c278; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.c-hero-actions .c-secondary { color: #fff; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.08); }
.c-hero-actions a:hover { transform: translateY(-3px); text-decoration: none; }
.c-hero-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; color: rgba(239,249,245,.64); font-size: .84rem; }
.c-hero-meta span::before { content: '✓'; margin-right: .4rem; color: #f1c278; }

.c-study-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 30px;
  background: rgba(255,253,248,.94);
  border: 1px solid rgba(24,52,47,.08);
  box-shadow: var(--c-shadow);
}
.c-study-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.c-study-head strong { font-size: 1rem; }
.c-study-head span { color: var(--muted); font-size: .8rem; }
.c-ring-wrap { display: grid; place-items: center; margin: .6rem 0 1.15rem; }
.c-ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.c-ring circle { fill: none; stroke-width: 10; }
.c-ring .track { stroke: #e8e5db; }
.c-ring .value { stroke: var(--primary); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; animation: c-ring 1.4s .35s ease forwards; }
.c-ring-text { position: absolute; text-align: center; }
.c-ring-text b { display: block; color: var(--primary-600); font-size: 2rem; line-height: 1.1; }
.c-ring-text small { color: var(--muted); }
.c-tasks { display: grid; gap: .62rem; }
.c-task { display: flex; align-items: center; gap: .72rem; padding: .72rem .78rem; border-radius: 14px; background: #f5f2e8; color: var(--ink); text-decoration: none; transition: transform .2s, background .2s; }
.c-task:hover { transform: translateX(4px); background: var(--primary-soft); text-decoration: none; }
.c-task i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--primary); font-style: normal; font-weight: 900; }
.c-task:nth-child(2) i { background: var(--c-gold); }
.c-task:nth-child(3) i { background: var(--c-red); }
.c-task small { display: block; color: var(--muted); font-size: .74rem; }
.c-study-foot { margin-top: auto; padding-top: 1rem; color: var(--muted); font-size: .78rem; text-align: center; }

.c-overview {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: center;
  margin: 1.4rem 0;
  padding: 1.25rem 1.4rem;
  border-radius: 20px;
  background: rgba(255,253,248,.84);
  border: 1px solid rgba(24,52,47,.08);
}
.c-overview h2 { margin: 0; padding: 0; font-family: var(--sans); font-size: 1rem; }
.c-overview h2::after { display: none; }
.c-overview strong { color: var(--primary-600); font-size: 1.3rem; }
.c-overview .progress-bar { grid-column: 1 / -1; }

.c-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.4rem 0 1rem; }
.c-section-head h2 { margin: 0; padding: 0; }
.c-section-head h2::after { display: none; }
.c-section-head p { margin: 0; color: var(--muted); }
.c-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.c-module {
  min-height: 218px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
}
.c-module:hover { text-decoration: none; }
.c-module.c-community { grid-column: span 2; color: #fff; background: linear-gradient(135deg, #a54640, #cf665b); border-color: transparent; }
.c-module.c-community .c-module-copy p, .c-module.c-community .m-count { color: rgba(255,255,255,.75); }
.c-module.c-community .c-module-icon { color: #fff; background: rgba(255,255,255,.14); }
.c-module-top { display: flex; align-items: start; justify-content: space-between; gap: .6rem; }
.c-module-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--primary-600); background: var(--primary-soft); transition: transform .3s ease; }
.c-module:hover .c-module-icon { transform: rotate(-7deg) scale(1.08); }
.c-module-icon svg { width: 25px; height: 25px; }
.c-module-arrow { color: var(--faint); font-size: 1.25rem; }
.c-module-copy { margin-top: 1.2rem; }
.c-module-copy h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.c-module-copy p { color: var(--muted); font-size: .84rem; line-height: 1.55; }
.c-module-bottom { margin-top: auto; padding-top: 1rem; }
.c-module .progress-bar { height: 5px; }
.c-module .m-count { display: block; margin-top: .42rem; color: var(--faint); font-size: .72rem; }
.c-home-note { display: flex; gap: 1rem; align-items: center; margin-top: 1.2rem; padding: 1.05rem 1.25rem; border: 1px dashed rgba(29,124,102,.25); border-radius: 18px; color: var(--muted); background: rgba(232,244,238,.42); }
.c-home-note strong { color: var(--primary-600); }

.c-motion { opacity: 0; transform: translateY(20px); }
.c-motion.c-visible { animation: c-rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
.c-module:nth-child(2) { animation-delay: .05s; }
.c-module:nth-child(3) { animation-delay: .10s; }
.c-module:nth-child(4) { animation-delay: .15s; }
.c-module:nth-child(5) { animation-delay: .20s; }
.c-module:nth-child(6) { animation-delay: .25s; }
.c-module:nth-child(7) { animation-delay: .30s; }

@keyframes c-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes c-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(10px) rotate(8deg); } }
@keyframes c-ring { to { stroke-dashoffset: 108; } }

@media (max-width: 1040px) {
  .site-nav .nav-inner { flex-wrap: nowrap; }
  .site-nav .nav-links { gap:.75rem; }
  .c-module-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .page, .page.c-home { padding: 1.4rem 1rem 3.5rem; }
  .c-home-hero { grid-template-columns: 1fr; }
  .c-study-card { min-height: 420px; }
  .c-module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .site-nav .nav-logo { width: 164px; height: 42px; }
  .site-nav .nav-links { display:none; }
  .site-nav .nav-actions { margin-left:auto; }
}

@media (max-width: 560px) {
  .site-nav .nav-inner { min-height:64px; padding: .5rem .9rem; gap:.55rem; }
  .site-nav .nav-logo { width: 142px; height: 36px; }
  .site-nav .nav-actions { gap:.3rem; }
  .site-nav .nav-btn, .site-nav .nav-account, .site-nav .nav-admin { padding:.3rem .62rem; font-size:.75rem; }
  .c-hero-main { min-height: auto; padding: 2.2rem 1.35rem; border-radius: 25px; }
  .c-hero-main h1 { font-size: 2.55rem; }
  .c-module-grid { grid-template-columns: 1fr; }
  .c-module.c-community { grid-column: span 1; }
  .c-overview { grid-template-columns: 1fr; }
  .c-overview .progress-bar { grid-column: auto; }
  .cover, .hero { padding: 2.5rem 1.25rem 2.1rem; border-radius: 22px; }
  .cover h1, .hero h1 { font-size:2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .c-motion { opacity: 1; transform: none; }
}