/* ================================================================
   v3：东方自然美学 + 轻科技（首页 / 词条分栏 / 练习即时判分 / 动效）
   ================================================================ */

/* 设计令牌补充 */
:root{
  --sage-50:#F4F9F1;
  --sage-100:#E9F2E4;
  --sage-200:#D8E9CF;
  --gold-soft:#FBF3DE;
  --gold-line:#E7D9B4;
  --card-ivory:#FFFDF7;
  --card-sage:#F5FAF2;
  --r-card:16px; --r-pill:999px;
  --t-fast:150ms; --t-base:200ms; --t-page:280ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

/* 页面容器与呼吸感 */
.workspace main{max-width:1120px;margin:0 auto;padding-bottom:118px}
.top{max-width:none}
.top-crumb{color:var(--muted);letter-spacing:.12em;font-size:12px}
.top-crumb i{margin:0 8px;font-style:normal;color:var(--line-strong)}
.top-slogan{flex:1;margin-left:18px;color:var(--ink-2);font-family:var(--serif);font-size:13.5px;letter-spacing:.08em}
@media (max-width:820px){.top-slogan{display:none}}

/* 页面进入动效 */
.view-enter{animation:viewIn var(--t-page) var(--ease-out) both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 首页首屏 */
.home-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:center;
  background:linear-gradient(102deg,#FFFDF7 0%,#F7FBF3 58%,#EFF7E9 100%);
  border:1px solid var(--line);border-radius:22px;padding:34px 36px;overflow:hidden;margin-top:6px}
.home-hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(168,212,182,.35),rgba(168,212,182,0) 70%);pointer-events:none}
.home-copy{position:relative;z-index:1}
.home-copy h1{font-size:clamp(24px,2.6vw,34px);line-height:1.42;margin-top:10px}
.home-copy p{margin-top:12px;color:var(--ink-2);line-height:1.9;max-width:520px}
.home-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.home-meta{display:flex;gap:18px;margin-top:18px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.home-meta span{position:relative;padding-left:12px}
.home-meta span::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--sage-200);transform:translateY(-50%)}
.home-ling{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end}
.home-ling picture{width:min(250px,100%);animation:lingBreathe 6.5s ease-in-out infinite}
.home-ling img{width:100%;height:auto;display:block}

/* 继续学习卡 */
.continue-card{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(100deg,var(--card-ivory),var(--card-sage))}
.continue-card h2{margin-top:8px}
.continue-card p{margin-top:6px;font-size:14px}
.continue-card .meta{margin-top:10px}
.cc-main{flex:1;min-width:240px}
.cc-act{flex:none}

/* 词条详情头部 */
.lesson-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:4px;flex-wrap:wrap}
.back-link{border:0;background:transparent;color:var(--muted);font-size:13px;padding:0 0 6px;cursor:pointer}
.back-link:hover{color:var(--green)}
.lh-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lh-title h1{font-size:clamp(26px,3vw,36px);letter-spacing:.06em}
.lh-py{font-size:14px;color:var(--muted);letter-spacing:.14em}
.lh-tags{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fav-btn{border:1px solid var(--line-strong);background:var(--card-ivory);color:var(--ink-2);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13.5px;min-height:38px;transition:all var(--t-fast) var(--ease-out)}
.fav-btn:hover{border-color:var(--gold);color:var(--gold)}
.fav-btn.on{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}

/* 词条分页 */
.lesson-tabs{display:flex;gap:6px;margin:18px 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lesson-tabs button{border:0;background:transparent;color:var(--muted);font-size:14px;padding:10px 16px;
  position:relative;min-height:42px;transition:color var(--t-fast) var(--ease-out)}
.lesson-tabs button:hover{color:var(--ink)}
.lesson-tabs button.active{color:var(--green-deep);font-weight:700}
.lesson-tabs button.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--green);border-radius:2px}

/* 释义表 */
.kv-block{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card-ivory)}
.kv-row{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:12px 16px;font-size:14px;color:var(--ink-2);line-height:1.8}
.kv-row+.kv-row{border-top:1px solid var(--line)}
.kv-k{color:var(--muted);font-size:12.5px;letter-spacing:.1em;padding-top:2px}

/* 一句话解析 */
.one-line{display:flex;gap:12px;margin-top:14px;background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:12px;padding:14px 16px}
.one-line .ol-icon{color:var(--gold);font-size:15px;line-height:1.6}
.one-line p{margin:0;font-size:14px;line-height:1.85;color:#6B5726}
.one-line strong{color:#54431A;margin-right:8px;letter-spacing:.06em}

/* 小义侧卡 */
.side-note{background:var(--card-sage);border-color:var(--sage-200)}
.side-note-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.side-note-head picture{width:40px}
.side-note-head strong{display:block;font-family:var(--serif);letter-spacing:.08em}
.side-note-head span{display:block;font-size:12px;color:var(--muted)}
.note-text{font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.note-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* 练习：选项与即时反馈 */
.quiz-wrap{max-width:860px;margin:0 auto}
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.quiz-count{font-family:var(--serif);font-size:14px;color:var(--ink-2);letter-spacing:.1em;margin-left:10px}
.quiz-bar{margin-bottom:16px}
.quiz-bar progress{width:100%}
.quiz-card{border-radius:18px}
.quiz-tags{display:flex;gap:8px}
.quiz-q{font-size:clamp(20px,2.2vw,26px);line-height:1.6;margin:14px 0 18px;font-family:var(--serif);letter-spacing:.03em}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--card-ivory);
  border-radius:12px;padding:14px 16px;text-align:left;min-height:56px;transition:all var(--t-fast) var(--ease-out)}
.opt:hover:not(:disabled){border-color:var(--sage-200);background:var(--sage-50);transform:translateX(2px)}
.opt .letter{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sage-50);color:var(--green-deep);font-size:13px;font-weight:700;border:1px solid var(--sage-200)}
.opt-text{flex:1;font-size:15px;color:var(--ink)}
.opt.selected{border-color:var(--green);background:var(--sage-50)}
.opt.selected .letter{background:var(--green);color:#fff;border-color:var(--green)}
.opt.correct{border-color:var(--green);background:#EDF7E8}
.opt.correct .letter{background:var(--green);color:#fff;border-color:var(--green)}
.opt.wrong{border-color:#D9A79A;background:#FBF0EC}
.opt.wrong .letter{background:#B4553F;color:#fff;border-color:#B4553F}
.opt-mark{color:var(--green);font-weight:700}
.opt-mark.bad{color:#B4553F}
.opt:disabled{cursor:default}

.ans-feedback{margin-top:16px;border-radius:14px;padding:16px;border:1px solid var(--line);background:var(--card-ivory)}
.ans-feedback.ok{background:linear-gradient(100deg,#F4FBEF,#FFFDF7);border-color:var(--sage-200)}
.ans-feedback.no{background:linear-gradient(100deg,#FDF3EE,#FFFDF7);border-color:#EBD5CC}
.fb-head{display:flex;gap:12px;align-items:center}
.fb-avatar{width:56px;flex:none}
.fb-head strong{display:block;font-family:var(--serif);font-size:17px;letter-spacing:.06em}
.fb-head p{margin:2px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.fb-why{margin-top:12px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.fb-why b{color:var(--green-deep);margin-right:8px;letter-spacing:.06em}
.ans-feedback .btn{margin-top:14px}
.quiz-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:12px}

/* 小义五情绪微动效 */
.ling-emo-calm img{animation:lingBreathe 6.5s ease-in-out infinite}
.ling-emo-curious img{animation:lingTilt 5.4s ease-in-out infinite}
.ling-emo-thinking img{animation:lingSway 4.6s ease-in-out infinite}
.ling-emo-encouraging img{animation:lingNod 4.2s ease-in-out infinite}
.ling-emo-joyful img{animation:lingHop 2.6s ease-in-out infinite}
@keyframes lingBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.008)}}
@keyframes lingTilt{0%,100%{transform:rotate(0) translateY(0)}45%{transform:rotate(-1.4deg) translateY(-2px)}70%{transform:rotate(.8deg)}}
@keyframes lingSway{0%,100%{transform:translateX(0) rotate(0)}35%{transform:translateX(-1.5px) rotate(-.7deg)}70%{transform:translateX(1.5px) rotate(.7deg)}}
@keyframes lingNod{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes lingHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}60%{transform:translateY(-1px)}}

/* 卡片层次：功能块用浅绿，装饰性用金 */
.card{background:var(--card-ivory)}
.s-hero{background:linear-gradient(160deg,var(--card-ivory),var(--sage-50) 140%)}
.test-level{background:var(--card-ivory)}
.test-level:nth-child(even){background:var(--card-sage)}
.quick .q:hover{background:var(--sage-50)}

@media (max-width:980px){
  .home-hero{grid-template-columns:1fr;padding:26px 22px}
  .home-ling{order:-1;justify-content:flex-end}
  .home-ling picture{width:min(180px,52%)}
  .continue-card{gap:14px}
}
@media (max-width:640px){
  .workspace main{padding-left:0;padding-right:0}
  .home-copy h1{font-size:23px}
  .lesson-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .lesson-tabs::-webkit-scrollbar{display:none}
  .lh-title h1{font-size:26px}
  .quiz-q{font-size:19px}
  .opt{padding:12px 14px;min-height:52px}
  .fb-avatar{width:44px}
  .quiz-bottom{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  .view-enter{animation:none}
  .ling-emo-calm img,.ling-emo-curious img,.ling-emo-thinking img,.ling-emo-encouraging img,.ling-emo-joyful img,
  .home-ling picture,.ling-fab img{animation:none !important}
  .opt:hover:not(:disabled){transform:none}
}

/* 悬浮入口贴近右下角，给正文让出空间 */
.ling-fab{right:12px;bottom:12px;width:74px}
@media (max-width:900px){.ling-fab{right:10px;bottom:74px;width:62px}}

/* 侧卡头像尺寸约束（picture 内 img 默认原始尺寸，必须显式限宽） */
.side-note-head picture,.note-avatar{width:40px;flex:none;display:block}
.side-note-head img,.note-avatar img{width:100%;height:auto;display:block}
.side-note{overflow:hidden}

/* 答题反馈头像约束 */
.fb-avatar{width:56px;flex:none;display:block}
.fb-avatar img{width:100%;height:auto;display:block}
@media (max-width:640px){.fb-avatar{width:42px}}