/* =========================================================
   产品组件 PRODUCT COMPONENTS —— 逐字沿用三批设计稿的 .ui- 与新增组件
   ========================================================= */

/* 标题字体（站酷快乐体作中文 display，Baloo 作拉丁/数字） */
.ui-display{font-family:"ZCOOL KuaiLe","Baloo 2",sans-serif;font-weight:400}

/* —— 按钮：玩具化"可按压"（实心底边） —— */
.ui-btn{
  font-family:"Baloo 2","Noto Sans SC",sans-serif;font-weight:700;font-size:18px;
  border:none;border-radius:var(--r-pill);padding:15px 30px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  color:#fff;background:var(--coral);box-shadow:0 5px 0 var(--coral-dark);
  transition:transform .08s ease, box-shadow .08s ease;line-height:1;
}
.ui-btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--coral-dark)}
.ui-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--coral-dark)}
.ui-btn--blue{background:var(--blue);box-shadow:0 5px 0 var(--blue-deep)}
.ui-btn--blue:active{box-shadow:0 1px 0 var(--blue-deep)}
.ui-btn--ghost{background:#fff;color:var(--coral);box-shadow:0 4px 0 var(--coral-soft);border:2px solid var(--coral-soft)}
.ui-btn--mint{background:var(--mint);box-shadow:0 5px 0 #3FA985}
.ui-btn--mint:active{box-shadow:0 1px 0 #3FA985}
.ui-btn--lg{font-size:21px;padding:18px 38px}
.ui-btn--sm{font-size:15px;padding:10px 20px;box-shadow:0 4px 0 var(--coral-dark)}
.ui-btn[disabled]{background:var(--lock);box-shadow:0 5px 0 #ADA99D;cursor:not-allowed;transform:none}
.ui-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* —— 卡片 —— */
.ui-card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:20px}

/* —— 徽章 / 星星 —— */
.ui-badge{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--yellow),#F5A623);color:#fff;font-size:30px;
  box-shadow:0 6px 16px rgba(245,166,35,.4), inset 0 -3px 0 rgba(0,0,0,.08);
}
.ui-badge--lock{background:#E7E2D6;color:var(--lock);box-shadow:none}
html[data-theme="dark"] .ui-badge--lock{background:#333A4D;color:#5A6178}
.ui-stars{display:inline-flex;gap:3px;color:var(--yellow);font-size:17px}
.ui-stars .off{color:#E7E2D6}
html[data-theme="dark"] .ui-stars .off{color:#3A4258}

/* —— 进度条 —— */
.ui-progress{height:14px;background:#EBE6DA;border-radius:var(--r-pill);overflow:hidden}
.ui-progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),#3FB389);border-radius:var(--r-pill);transition:width .4s ease}

/* —— 对话气泡 —— */
.ui-bubble{max-width:82%;padding:13px 16px;border-radius:20px;font-size:var(--fs-body);line-height:1.6;position:relative}
.ui-bubble--claude{background:var(--paper);border:2px solid var(--coral-soft);border-bottom-left-radius:6px;color:var(--ink)}
.ui-bubble--me{background:var(--blue);color:#fff;border-bottom-right-radius:6px;margin-left:auto}
.ui-bubble--claude::before{content:"";position:absolute;left:-9px;bottom:0;width:14px;height:14px;background:var(--paper);border-left:2px solid var(--coral-soft);border-bottom:2px solid var(--coral-soft);border-bottom-left-radius:8px}

/* —— 提示/安全条 —— */
.ui-tip{display:flex;gap:11px;background:var(--blue-soft);border-radius:var(--r-md);padding:13px 15px;font-size:var(--fs-small);color:var(--blue-deep);align-items:flex-start}
html[data-theme="dark"] .ui-tip{color:var(--blue)}
.ui-tip--safe{background:#FDE8EE;color:#B83A5A}
html[data-theme="dark"] .ui-tip--safe{background:#3A2630;color:#E78AA3}
.ui-tip .ic{flex:none;font-size:18px;line-height:1.4}

/* —— 输入框（试一试） —— */
.ui-input{display:flex;gap:8px;align-items:center;background:var(--paper);border:2px solid var(--coral-soft);border-radius:var(--r-pill);padding:6px 6px 6px 18px}
.ui-input input{flex:1;border:none;outline:none;font-size:var(--fs-body);font-family:inherit;background:transparent;color:var(--ink)}
.ui-input input::placeholder{color:var(--ink-faint)}
.ui-input .send{width:44px;height:44px;border-radius:50%;background:var(--coral);border:none;color:#fff;font-size:18px;cursor:pointer;flex:none;display:grid;place-items:center;box-shadow:0 3px 0 var(--coral-dark)}
.ui-input .send:active{transform:translateY(2px);box-shadow:0 1px 0 var(--coral-dark)}

/* —— 顶栏 —— */
.ui-appbar{display:flex;align-items:center;gap:12px;padding:6px 18px 14px}
.ui-appbar .back{width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-soft);display:grid;place-items:center;font-size:20px;color:var(--ink);cursor:pointer;flex:none}
.ui-appbar .ttl{font-family:"ZCOOL KuaiLe",sans-serif;font-size:19px;color:var(--ink)}
.ui-appbar .coins{margin-left:auto;display:flex;align-items:center;gap:5px;background:var(--paper);border-radius:var(--r-pill);padding:6px 13px;font-weight:700;color:#E0A52A;box-shadow:var(--sh-soft);font-family:"Baloo 2",sans-serif}

/* —— 底部 Tab —— */
.ui-tabbar{display:flex;background:var(--paper);border-top:1px solid var(--line);padding:8px 0 12px}
.ui-tabbar a{flex:1;text-align:center;font-size:11px;color:var(--ink-faint);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.ui-tabbar a .i{font-size:22px}
.ui-tabbar a.on{color:var(--coral);font-weight:700}

/* —— 蓝猫吉祥物 气泡 —— */
.ui-mascot{display:flex;gap:12px;align-items:flex-end}
.ui-mascot .cat{width:64px;height:64px;flex:none}
.ui-mascot .say{background:var(--paper);border:2px solid var(--blue-soft);border-radius:18px;border-bottom-left-radius:6px;padding:11px 14px;font-size:var(--fs-small);box-shadow:var(--sh-soft);position:relative;color:var(--ink)}

/* —— 课程节点（地图） —— */
.lesson-node{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;cursor:pointer;
  font-family:"Baloo 2",sans-serif;font-weight:800;font-size:26px;color:#fff;flex:none}
.lesson-node.done{background:var(--mint);box-shadow:0 6px 0 #3FA985}
.lesson-node.current{background:var(--coral);box-shadow:0 7px 0 var(--coral-dark);animation:bob 2s ease-in-out infinite}
.lesson-node.lock{background:#E7E2D6;box-shadow:0 6px 0 #CFC9BB;color:var(--lock);cursor:not-allowed}
html[data-theme="dark"] .lesson-node.lock{background:#333A4D;box-shadow:0 6px 0 #242A38;color:#5A6178}
.lesson-node .ring{position:absolute;inset:-8px;border-radius:50%;border:3px dashed var(--coral);opacity:.5}
.lesson-node .chk{font-size:30px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* —— 课内顶部步骤进度条 —— */
.lesson-top{display:flex;align-items:center;gap:10px;padding:4px 18px 12px}
.lesson-top .x{width:38px;height:38px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-soft);display:grid;place-items:center;font-size:17px;color:var(--ink-soft);flex:none;cursor:pointer}
.seg{flex:1;display:flex;gap:5px}
.seg i{flex:1;height:9px;border-radius:var(--r-pill);background:#EBE6DA}
.seg i.on{background:var(--coral)}.seg i.done{background:var(--mint)}

/* —— 漫画格 —— */
.comic{display:flex;flex-direction:column;gap:14px}
.comic .panel{background:var(--paper);border:3px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:var(--sh-soft)}
.comic .art{height:130px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-deep);font-weight:700;font-size:13px;border-bottom:3px solid var(--ink);text-align:center;padding:0 12px}
.comic .art.bad{background:#F3E1DC;color:#B5613F}
.comic .cap{padding:11px 14px;font-size:14.5px;color:var(--ink)}
.comic .num{display:inline-block;background:var(--ink);color:var(--paper);font-family:'Baloo 2';font-weight:800;border-radius:8px;padding:1px 9px;font-size:13px;margin-right:7px}
/* 手绘插画填满插画位 */
.art .illo{display:block;width:100%;height:100%}

/* —— 图解步骤点 + 三招卡 —— */
.step-dots{display:flex;justify-content:center;gap:8px;padding:6px 0 2px}
.step-dots b{width:10px;height:10px;border-radius:50%;background:#E0DACC}
.step-dots b.on{background:var(--coral);width:26px;border-radius:var(--r-pill)}
.trick{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-card);overflow:hidden}
.trick .art{height:150px;background:var(--blue-soft);display:grid;place-items:center;color:var(--blue-deep);font-weight:700;font-size:13px;text-align:center;padding:0 16px}
.trick .body{padding:16px 18px}
.trick .kicker{font-family:'Baloo 2';font-weight:800;color:var(--coral);font-size:14px}
.trick h3{font-family:'ZCOOL KuaiLe';font-size:23px;margin:2px 0 8px;color:var(--ink)}
.eg{background:var(--mint-soft);border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:10px;color:var(--ink)}
.eg .t{font-weight:700;color:#2E8B6B;font-size:12px;margin-bottom:2px}

/* —— 试一试 任务卡 + 对话 —— */
.mission{background:linear-gradient(150deg,var(--paper),#FFF1E8);border:2px solid var(--coral-soft);border-radius:var(--r-lg);padding:14px 16px;display:flex;gap:12px;align-items:flex-start}
html[data-theme="dark"] .mission{background:linear-gradient(150deg,var(--paper),#3A2C29)}
.mission .cat{width:46px;height:46px;flex:none}
.mission .t{font-family:'Baloo 2';font-weight:800;color:var(--coral);font-size:12px;letter-spacing:.06em}
.chat{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.typing{display:inline-flex;gap:5px;align-items:center;background:var(--paper);border:2px solid var(--coral-soft);border-radius:20px;border-bottom-left-radius:6px;padding:14px 16px;width:fit-content}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--coral);opacity:.5;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.nudge{background:#FFF6E6;border:1.5px dashed var(--yellow);border-radius:14px;padding:11px 13px;font-size:13.5px;color:#9A6B00;display:flex;gap:9px;align-items:flex-start}
.errbox{background:#FDE8EE;border-radius:14px;padding:12px 14px;font-size:13.5px;color:#B83A5A;display:flex;gap:9px;align-items:center}
.detail-chip{background:var(--paper);border:1.5px solid var(--coral-soft);border-radius:var(--r-pill);padding:6px 12px;font-size:12px;cursor:pointer;color:var(--ink)}

/* —— 小测选项 —— */
.q{font-family:'ZCOOL KuaiLe';font-size:21px;line-height:1.4;padding:4px 2px 12px;color:var(--ink)}
.opt{display:flex;align-items:center;gap:12px;background:var(--paper);border:2px solid var(--line);border-radius:var(--r-md);padding:14px 16px;font-size:16px;cursor:pointer;box-shadow:0 3px 0 #E7E1D4;transition:transform .08s;color:var(--ink)}
.opt+.opt{margin-top:11px}
.opt .key{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);font-family:'Baloo 2';font-weight:800;display:grid;place-items:center;flex:none;font-size:15px}
.opt.sel{border-color:var(--blue);box-shadow:0 3px 0 var(--blue-deep)}
.opt.correct{border-color:var(--mint);background:var(--mint-soft);box-shadow:0 3px 0 #3FA985}
.opt.correct .key{background:var(--mint);color:#fff}
.opt.wrong{border-color:var(--berry);background:#FDE8EE;box-shadow:0 3px 0 #C44A68;animation:shake .35s}
.opt.wrong .key{background:var(--berry);color:#fff}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* 连线 / 排序题 */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.match .chip{background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:10px;font-size:13px;text-align:center;box-shadow:0 3px 0 #E7E1D4;cursor:pointer;color:var(--ink)}
.match .chip.sel{border-color:var(--blue);box-shadow:0 3px 0 var(--blue-deep)}
.match .chip.done{border-color:var(--mint);background:var(--mint-soft)}
.match .chip.wrong{border-color:var(--berry);background:#FDE8EE;animation:shake .35s}
.order .item{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;box-shadow:0 3px 0 #E7E1D4;margin-bottom:8px;color:var(--ink)}
.order .item .h{cursor:grab;color:var(--ink-faint)}
.order .item .n{width:24px;height:24px;border-radius:7px;background:var(--coral);color:#fff;font-family:'Baloo 2';font-weight:800;display:grid;place-items:center;font-size:13px}

/* —— 反馈底部条 —— */
.feedback{padding:16px 18px;border-top-left-radius:24px;border-top-right-radius:24px;box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.feedback.ok{background:var(--mint-soft)}.feedback.no{background:#FDE8EE}
html[data-theme="dark"] .feedback.no{background:#3A2630}
.feedback .row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.feedback .big{font-family:'ZCOOL KuaiLe';font-size:22px}
.feedback.ok .big{color:#2E8B6B}.feedback.no .big{color:#B83A5A}

/* —— 完课庆祝 —— */
.celebrate{position:relative;text-align:center;padding:30px 22px;flex:1;min-width:0}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti span{position:absolute;width:10px;height:14px;border-radius:2px;opacity:.9;animation:fall 2.6s linear infinite}
@keyframes fall{0%{transform:translateY(-30px) rotate(0)}100%{transform:translateY(560px) rotate(360deg)}}
.badge-big{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;margin:6px auto 0;background:linear-gradient(150deg,var(--yellow),#F5A623);font-size:60px;color:#fff;box-shadow:0 12px 28px rgba(245,166,35,.45),inset 0 -4px 0 rgba(0,0,0,.08);animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.star-burst{display:flex;justify-content:center;gap:8px;font-size:38px;color:var(--yellow);margin:14px 0}
.star-burst .off{color:#E7E2D6}

/* —— 弹窗 / 抽屉 —— */
.modal-host{position:fixed;inset:0;background:rgba(28,30,41,.5);display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(2px);z-index:30}
.modal{background:var(--paper);border-radius:var(--r-xl);box-shadow:0 20px 50px rgba(0,0,0,.3);padding:24px 22px;width:100%;max-width:400px;text-align:center;position:relative}
.modal .cat{width:84px;height:84px;margin:-58px auto 6px;display:block}
.modal p{color:var(--ink-soft)}

/* —— 家长门 数字键 —— */
.gate-display{font-family:'Baloo 2';font-weight:800;font-size:30px;letter-spacing:.1em;background:var(--cream);border:2px solid var(--line);border-radius:14px;padding:12px;margin:8px 0 14px;color:var(--ink)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keypad b{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:14px;font-family:'Baloo 2';font-weight:800;font-size:22px;cursor:pointer;box-shadow:0 3px 0 #E7E1D4;color:var(--ink);user-select:none}
.keypad b:active{transform:translateY(2px);box-shadow:0 1px 0 #E7E1D4}

/* —— 开关 / 分段 / 设置行 —— */
.row-set{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line)}
.row-set .ic{width:40px;height:40px;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;font-size:20px;flex:none}
.row-set .lab{font-weight:700;font-size:15px;color:var(--ink)}
.row-set .sub{font-size:12px;color:var(--ink-faint)}
.toggle{width:54px;height:32px;border-radius:var(--r-pill);background:var(--mint);position:relative;flex:none;cursor:pointer}
.toggle.off{background:#D8D2C4}
html[data-theme="dark"] .toggle.off{background:#3A4258}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.toggle.off::after{left:25px}
.seg-ctrl{display:flex;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;flex:none}
.seg-ctrl b{padding:7px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-soft)}
.seg-ctrl b.on{background:var(--coral);color:#fff}

/* —— 成就墙 / 统计 —— */
.badge-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bw-item{text-align:center}
.bw-item .ui-badge{margin:0 auto 5px;width:66px;height:66px}
.bw-item .t{font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.stat{flex:1;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-soft);padding:14px;text-align:center}
.stat .v{font-family:'Baloo 2';font-weight:800;font-size:26px;color:var(--coral)}
.stat .l{font-size:11.5px;color:var(--ink-faint);font-weight:700}

/* —— 学习回顾 / 提问记录 —— */
.recap{display:flex;gap:12px;align-items:center;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-soft);padding:13px 14px;margin-bottom:10px}
.recap .ic{width:42px;height:42px;border-radius:12px;background:var(--mint-soft);display:grid;place-items:center;font-size:20px;flex:none}
.qlog{background:var(--blue-soft);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:7px;color:var(--ink)}

/* —— 骨架屏 —— */
.sk{background:linear-gradient(90deg,#EFE9DD 25%,#F6F1E7 50%,#EFE9DD 75%);background-size:200% 100%;animation:sh 1.3s infinite;border-radius:10px}
html[data-theme="dark"] .sk{background:linear-gradient(90deg,#2A3040 25%,#333B4D 50%,#2A3040 75%);background-size:200% 100%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* —— 流程总览 stepper（首页帮助用，可选） —— */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--paper);border-radius:18px;box-shadow:var(--sh-soft);padding:16px 18px}
.flow .b{display:flex;align-items:center;gap:8px;background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;font-size:13px;font-weight:700;color:var(--ink)}
.flow .b .n{width:20px;height:20px;border-radius:50%;background:var(--coral);color:#fff;font-family:'Baloo 2';font-weight:800;display:grid;place-items:center;font-size:11px}
.flow .arr{color:var(--ink-faint);font-weight:700}
.flow .b.end{background:var(--mint-soft);border-color:var(--mint)}
.flow .b.end .n{background:var(--mint)}

/* —— 减少动效 —— */
@media (prefers-reduced-motion:reduce){
  .lesson-node.current,.typing i,.confetti span,.badge-big,.opt.wrong,.sk{animation:none}
  html{scroll-behavior:auto}
}