/* ============================================================
   ★ 视觉重构 v3：明快童趣 · SUNNY KIDS
   浅色奶油底 + 亮绿/亮黄/亮红糖果色 · 大圆角 · 大字
   （覆盖 v2 星核暗色 HUD；仅视觉层，JS 逻辑不变）
   ============================================================ */
:root{
  --sun:#FFD93D; --sun-deep:#F5B301; --leaf:#2FBE5F; --leaf-deep:#149A48;
  --coral:#FF5A5F; --sky-blue:#3FA9F5;
  --ink:#3F3722; --ink-dim:#84755C; --paper:#FFFFFF; --cream:#FFF9E8;
  --line-green:rgba(31,168,91,.32); --line-yellow:rgba(245,179,1,.42);
  /* 覆盖 v2 星核变量 */
  --void:#FFF9E8; --space:#FFFFFF; --space-2:#FFFDF4;
  --glass:rgba(255,255,255,.86); --glass-line:rgba(31,168,91,.30);
  --cyan:#22B45E; --cyan-deep:#149A48; --violet:#FF9F43; --gold:#F5B301;
  --text:#3F3722; --text-dim:#84755C;
  --good:#149A48; --bad:#E5484D; --brand:#149A48; --label2:#84755C;
  --success:#149A48; --sky:#3FA9F5;
  --glow-cyan:0 6px 16px rgba(34,180,94,.22);
  --glow-violet:0 6px 16px rgba(255,159,67,.25);
  /* 覆盖 app.css 变量 */
  --x-cyan:#22B45E; --x-violet:#FF9F43; --x-gold:#F5B301;
  --x-green:#149A48; --x-red:#E5484D;
  --x-panel:#FFFFFF; --x-panel2:#FFFDF4;
  --x-line:rgba(31,168,91,.30); --x-dim:#84755C; --x-text:#3F3722;
}
/* —— 背景：奶油底 + 彩色圆点泡泡 —— */
body{background:var(--cream); color:var(--ink);}
.bg-stars{background:linear-gradient(180deg,#FFF9E8 0%,#F4FBE9 55%,#FFF4D6 100%);}
.bg-stars::before{opacity:1; animation:twinkle 6s ease-in-out infinite alternate;
  background-image:
    radial-gradient(9px 9px at 12% 18%, rgba(255,217,61,.55), transparent),
    radial-gradient(7px 7px at 86% 12%, rgba(47,190,95,.45), transparent),
    radial-gradient(8px 8px at 74% 82%, rgba(255,90,95,.35), transparent),
    radial-gradient(6px 6px at 28% 76%, rgba(63,169,245,.35), transparent),
    radial-gradient(7px 7px at 55% 8%, rgba(255,159,67,.40), transparent),
    radial-gradient(6px 6px at 8% 62%, rgba(47,190,95,.30), transparent),
    radial-gradient(8px 8px at 92% 55%, rgba(255,217,61,.45), transparent),
    radial-gradient(6px 6px at 40% 40%, rgba(255,90,95,.22), transparent),
    radial-gradient(7px 7px at 66% 62%, rgba(47,190,95,.28), transparent),
    radial-gradient(6px 6px at 20% 34%, rgba(255,159,67,.30), transparent);}
.bg-grid{background-image:linear-gradient(rgba(34,180,94,.07) 1px, transparent 1px),
  linear-gradient(90deg, rgba(34,180,94,.07) 1px, transparent 1px);}
.scan{display:none;}
.app::before,.app::after{border-color:var(--leaf); opacity:.5; box-shadow:none;}
/* —— 顶栏：亮黄到嫩绿的糖果渐变 —— */
header.appbar{
  background:linear-gradient(120deg,#FFE873 0%,#BDF3A9 60%,#8FECB1 100%);
  border:1.5px solid rgba(255,255,255,.8);
  box-shadow:0 6px 18px rgba(245,179,1,.28), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:none; -webkit-backdrop-filter:none;}
.logo{background:radial-gradient(circle at 30% 30%, #FFF6C9, #FFD93D);
  box-shadow:0 4px 12px rgba(245,179,1,.4);}
.title h1{color:#3B2E12; text-shadow:none; letter-spacing:.5px;}
.title p{color:#5C4E2E; opacity:1;}
.status{color:var(--leaf-deep); border-color:rgba(20,154,72,.5);
  background:rgba(255,255,255,.55); box-shadow:none;}
.ghost-btn{background:rgba(255,255,255,.75); color:var(--leaf-deep);
  border:1.5px solid rgba(20,154,72,.4); backdrop-filter:none;}
.ghost-btn:hover{background:#EAFBEF; box-shadow:0 3px 10px rgba(34,180,94,.2);}
.chip{background:rgba(255,255,255,.8); color:var(--leaf-deep);
  border:1.5px solid rgba(20,154,72,.35); box-shadow:none;}
/* —— 对话气泡：白纸感 —— */
.chat::-webkit-scrollbar-thumb,#chatScroll::-webkit-scrollbar-thumb{background:rgba(34,180,94,.35);}
.bubble .ava{background:radial-gradient(circle at 30% 30%, #FFF1B8, #FFD93D); box-shadow:0 3px 10px rgba(245,179,1,.35);}
.bubble .msg{background:#FFFFFF; border:1.5px solid rgba(31,168,91,.22);
  box-shadow:0 4px 14px rgba(120,100,40,.10); backdrop-filter:none;}
.bubble.me .msg{background:#E9F9EE; border-color:rgba(31,168,91,.4);}
.bubble.me .ava{background:radial-gradient(circle at 30% 30%, #CFF7DA, #7FE3A0);}
.say{color:var(--ink);}
.hint{color:var(--ink-dim);}
/* —— 选项按钮 —— */
.choice{background:#FFFFFF; border:2px solid rgba(31,168,91,.30); color:var(--ink);
  font-family:var(--font-body); letter-spacing:0; backdrop-filter:none;}
.choice:hover{border-color:var(--leaf); box-shadow:0 4px 12px rgba(34,180,94,.22); color:var(--leaf-deep);}
.choice.correct{background:#E4F9EB; border-color:var(--leaf-deep); color:var(--leaf-deep); box-shadow:0 0 0 3px rgba(34,180,94,.15);}
.choice.wrong{background:#FDECEC; border-color:var(--coral); color:var(--coral);}
/* —— 单词卡 —— */
.card{background:#FFFFFF; border:2px solid var(--line-yellow);
  box-shadow:0 8px 22px rgba(245,179,1,.16); backdrop-filter:none;}
.card::before{display:none;}
.card .emoji{filter:none;}
.card .word{color:var(--leaf-deep); text-shadow:none;}
.card .spell{color:#D98E00; text-shadow:none;}
.card .mean{color:var(--ink);}
.card .ex{color:var(--ink-dim);}
.card .tip{color:#8A6200; background:#FFF3C4; border:1.5px solid #F5D76E;}
/* —— 主按钮：亮绿糖果 —— */
.primary{background:linear-gradient(135deg,#3ED06F,#149A48); color:#fff;
  border-radius:999px; box-shadow:0 6px 16px rgba(20,154,72,.35), inset 0 2px 0 rgba(255,255,255,.35);
  font-family:var(--font-body); letter-spacing:.5px;}
.primary:hover{background:linear-gradient(135deg,#29BC5B,#118A3F);color:#fff;filter:none;box-shadow:0 5px 14px rgba(20,154,72,.25);transform:none;}
.pill{background:#FFFFFF; border:2px solid rgba(31,168,91,.3); color:var(--ink); backdrop-filter:none;}
.pill:hover{border-color:var(--leaf); box-shadow:0 3px 10px rgba(34,180,94,.2); color:var(--leaf-deep);}
.pill.active{background:linear-gradient(135deg,#3ED06F,#149A48); color:#fff; border-color:var(--leaf-deep);}
.mini{background:#FFFFFF; border:1.5px solid rgba(31,168,91,.3); color:var(--ink); backdrop-filter:none;}
.mini:hover{border-color:var(--leaf); background:#EFFBF2; color:var(--leaf-deep); box-shadow:none;}
.mini.rec{border-color:var(--coral); background:#FDECEC; color:var(--coral);}
/* —— 面板与容器 —— */
.story{background:#F0FBEF; border-left:5px solid var(--leaf); box-shadow:none;}
.summary{background:#FFFFFF; border:2px solid rgba(31,168,91,.22);
  box-shadow:0 6px 18px rgba(120,100,40,.10); backdrop-filter:none;}
.summary h2{color:var(--leaf-deep); text-shadow:none;}
.stars{color:var(--sun-deep); filter:none;}
.progress{background:#EDF5E4; border:1px solid rgba(31,168,91,.2);}
.progress > i{background:linear-gradient(90deg,#7FE3A0,#FFD93D); box-shadow:none;}
.score-box{background:#FFFFFF; border:2px solid var(--leaf);
  box-shadow:0 6px 18px rgba(20,154,72,.18); backdrop-filter:none;}
.score-box .pct{color:var(--leaf-deep); text-shadow:none;}
.score-box .heard{color:var(--ink-dim);}
.score-box .big-star{filter:none;}
.wave i{background:var(--coral); box-shadow:none;}
.note-sky{background:#EAF4FE; border-left:5px solid var(--sky-blue); color:#1E4E79;}
/* —— 弹窗 —— */
.modal-mask{background:rgba(255,240,200,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.modal{background:#FFFDF6; border:2px solid var(--line-yellow);
  box-shadow:0 20px 50px rgba(120,100,40,.25);}
.modal h2{color:var(--leaf-deep); text-shadow:none; font-family:var(--font-body); letter-spacing:0;}
.modal pre{background:#3F3722; color:#FFE9A8; border:1px solid rgba(245,179,1,.4); box-shadow:none;}
.modal label{color:var(--ink-dim);}
.modal input[type=range]{accent-color:var(--leaf);}
.modal select{background:#FFFFFF; color:var(--ink); border:1.5px solid rgba(31,168,91,.35);}
.modal input[type=checkbox]{accent-color:var(--leaf);}
.modal .note{color:var(--ink-dim);}
.switch{color:var(--ink);}
.close{color:var(--ink-dim);}
.close:hover{color:var(--coral);}
.warn{color:#8A6200; background:#FFF6DC; border:1.5px solid #F5D76E; box-shadow:none;}
.foot{color:var(--ink-dim); background:rgba(255,255,255,.7);
  border:1px solid rgba(31,168,91,.18); backdrop-filter:none;}
/* —— 小元素 —— */
.kbd{background:#EFFBF2; border:1px solid rgba(31,168,91,.3); color:var(--leaf-deep);}
.prog-wrap .txt{color:var(--ink-dim);}
.confetti span{filter:none;}
.diff .ok{color:var(--leaf-deep); text-shadow:none;}
.diff .bad{color:var(--coral); text-shadow:none;}
.badge-new{background:#FFF3C4; color:#8A6200; border:1px solid #F5D76E; font-family:var(--font-body);}
.stat-grid .st{background:#FFFFFF; border:1.5px solid rgba(31,168,91,.2); backdrop-filter:none;}
.stat-grid .st b{color:var(--leaf-deep); text-shadow:none; font-family:var(--font-body);}
.stat-grid .st span{color:var(--ink-dim);}
/* —— logo 呼吸改暖黄 —— */
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 12px rgba(245,179,1,.35);}
  50%{box-shadow:0 0 24px rgba(245,179,1,.6), 0 0 10px rgba(47,190,95,.4);}}
/* —— hero 卡 —— */
.hero{background:#FFFFFF; border:2px solid rgba(31,168,91,.22);
  box-shadow:0 6px 18px rgba(120,100,40,.10); backdrop-filter:none;}
.hero-title{color:var(--leaf-deep); text-shadow:none; font-family:var(--font-body); letter-spacing:.5px;}
.hero-step{background:#FFFDF4; border:1.5px solid rgba(31,168,91,.2);}
.hero-step .hs-ico{filter:none;}
.hero-step .hs-t{color:var(--leaf-deep); font-family:var(--font-body); letter-spacing:0;}
.hero-step .hs-d{color:var(--ink-dim);}
.hero-arrow{color:var(--sun-deep); text-shadow:none;}
.hero-note{color:#8A6200; background:#FFF6DC; border:1.5px solid #F5D76E;}
/* —— app.css 学习中心 —— */
.learning-mode-switch button{background:#FFFFFF; color:var(--ink-dim); border:1.5px solid rgba(31,168,91,.25);}
.learning-mode-switch button.active{border-color:var(--leaf); color:var(--leaf-deep); background:#EAFBEF; font-weight:700;}
.home-greeting h2{color:var(--ink);}
.home-greeting p{color:var(--ink-dim);}
.unit-card{background:#FFFFFF; border:2px solid rgba(31,168,91,.2); box-shadow:0 4px 12px rgba(120,100,40,.08);}
.unit-card:hover,.unit-card.selected{border-color:var(--leaf); box-shadow:0 6px 16px rgba(34,180,94,.22);}
.unit-number{color:var(--leaf-deep);}
.word-quiz-slot{background:#FFFDF4;}
.quiz-nudge{border-color:var(--sun-deep)!important; color:#B07C00!important; box-shadow:0 0 12px rgba(245,179,1,.25);}
.unit-meter{background:#EDF5E4;}
.x-input{background:#FFFFFF; color:var(--ink); border:1.5px solid rgba(31,168,91,.3);}
.x-btn{background:linear-gradient(135deg,rgba(62,208,111,.18),rgba(255,217,61,.22)); color:var(--leaf-deep);}
.chat-practice-row{background:#FFFDF4;}
.chat-practice-row:hover{border-color:rgba(34,180,94,.5);}
.prompt-history pre{background:#FFFDF4; border:1px solid rgba(31,168,91,.2); color:var(--ink);}
.example-option.active{color:var(--leaf-deep); border-color:var(--leaf); background:#EAFBEF;}
#wordExampleText:hover,#wordExampleText:focus-visible{color:var(--leaf-deep);}
.agent-trace summary{color:var(--leaf-deep);}
.agent-trace b{color:var(--ink);}
.settings-nav-button.active{color:var(--leaf-deep); background:#EAFBEF;}
.settings-panel input[type=checkbox]{accent-color:var(--leaf);}
.prompt-settings summary{color:var(--leaf-deep);}
/* —— 趣味探索 fun_practice —— */
.fun-practice{--fp-dim:#84755C;}
.fp-grade{color:var(--leaf-deep); background:#EAFBEF; border-color:rgba(31,168,91,.3);}
.fp-filters{background:#FFFFFF; border:1.5px solid rgba(31,168,91,.2);}
.fp-filter[aria-pressed=true]{color:var(--leaf-deep); background:#E4F9EB; border-color:rgba(34,180,94,.4);}
.fp-filter:hover{background:#F0FBEF;}
.fp-theme-card{background:#FFFFFF; border:2px solid rgba(31,168,91,.16); box-shadow:0 5px 14px rgba(120,100,40,.08);}
.fp-theme-card:hover{border-color:var(--leaf); box-shadow:0 10px 22px rgba(34,180,94,.2);}
.fp-theme-category{color:#0E7C3A; border-color:rgba(31,168,91,.3); background:rgba(255,255,255,.92);}
.fp-tone-life .fp-theme-category{color:#0E7C3A; border-color:rgba(31,168,91,.3); background:rgba(255,255,255,.92);}
.fp-theme-footer{color:var(--ink-dim); border-top-color:rgba(31,168,91,.15);}
.fp-theme-go{background:#EAFBEF; color:var(--leaf-deep);}
.fp-empty{background:#FFFDF4;}
.fp-loading-orbit{border-color:rgba(34,180,94,.2); border-top-color:var(--leaf); border-right-color:var(--sun-deep);}
.fp-back{background:#FFFFFF; color:var(--ink-dim); border:1.5px solid rgba(31,168,91,.25);}
.fp-back:hover{color:var(--leaf-deep); border-color:var(--leaf);}
.fp-preview-note{background:#FFF6DC; border:1.5px solid #F5D76E; color:#7A5B1E;}
.fp-word-card{background:#FFFFFF; border:2px solid rgba(31,168,91,.16);}
.fp-word-card:hover{border-color:var(--leaf); background:#FBFEFB;}
.fp-word-meaning{color:var(--ink-dim);}
.fp-word-source{color:#0E7C3A; background:#EAFBEF;}
.fp-source-interest{color:#B35300; background:#FFEFD6;}
.fp-word-speaker{background:#EAFBEF; color:var(--leaf-deep);}
.fp-word-card.is-speaking{border-color:var(--leaf); background:#F0FBEF; box-shadow:0 0 0 3px rgba(34,180,94,.12);}
.fp-example{border-top-color:rgba(31,168,91,.15);}
.fp-example p{color:var(--ink);}
.fp-sentence:hover{color:var(--leaf-deep); border-color:var(--leaf);}
.fp-secondary{color:var(--ink); background:#FFFFFF; border:1.5px solid rgba(31,168,91,.3);}
.fp-secondary:hover{border-color:var(--leaf); background:#F0FBEF;}
.fp-error{background:#FDECEC; border:1.5px solid rgba(229,72,77,.4); color:#B3202C;}
.fp-swap-message{color:var(--ink-dim);}
/* —— 小老师任务面板（含本次简化新增样式）—— */
.la-panel{--la-text:#3F3722; --la-muted:#84755C; --la-accent:#149A48;
  --la-line:rgba(31,168,91,.3); --la-surface:#FFFFFF;}
.la-generator,.la-plan{background:#FFFFFF; border:2px solid rgba(31,168,91,.2);
  box-shadow:0 5px 14px rgba(120,100,40,.08);}
.la-button:hover{background:#EAFBEF;}
.la-button:focus-visible,.la-panel summary:focus-visible{outline-color:var(--leaf);}
.la-primary{background:linear-gradient(135deg,#3ED06F,#149A48); color:#fff; border-color:var(--leaf-deep);
  box-shadow:0 5px 14px rgba(20,154,72,.3);}
.la-primary:hover{background:linear-gradient(135deg,#4BDB7D,#149A48); color:#fff;}
.la-input{background:#FFFDF4;}
.la-goal-hint{color:var(--ink-dim);}
.la-live{color:var(--leaf-deep);}
.la-error{color:#92610A; background:#FFF6DC;}
.la-status{color:var(--ink-dim); background:#F3EFE4;}
.la-status-active{color:var(--leaf-deep); background:#E4F9EB;}
.la-status-paused{color:#92610A; background:#FFF3C4;}
.la-status-completed{color:var(--leaf-deep); background:#E4F9EB;}
.la-plan-meta{color:var(--ink-dim);}
.la-plan-reason{color:var(--ink-dim);}
.la-strategy{color:#B07C00;}
.la-progress-meter{background:#EDF5E4; accent-color:var(--leaf);}
.la-progress-meter::-webkit-progress-bar{background:#EDF5E4;}
.la-progress-meter::-webkit-progress-value{background:linear-gradient(90deg,#7FE3A0,#FFD93D);}
.la-progress-meter::-moz-progress-bar{background:linear-gradient(90deg,#7FE3A0,#FFD93D);}
.la-word{background:#F6FBF2; border-color:rgba(31,168,91,.22);}
.la-word-name{color:var(--leaf-deep);}
.la-word-status{color:var(--ink-dim); background:#F3EFE4;}
.la-word-status-completed{color:var(--leaf-deep); background:#E4F9EB;}
.la-word-status-needs_check,.la-word-status-wrong{color:#92610A; background:#FFF3C4;}
.la-word-status-deferred{color:#B35300;}
.la-word-art{background:#FFFFFF;}
.la-guide-step{background:#F6FBF2; color:var(--ink-dim);}
.la-guide-step:not(:last-child)::after{color:var(--sun-deep);}
.la-story{border-top-color:rgba(31,168,91,.25);}
.la-story-translation{color:var(--ink-dim);}
.la-recent-meta{color:var(--ink-dim);}
.la-empty{color:var(--ink-dim);}
.la-button.la-selected{color:var(--leaf-deep); border-color:var(--leaf); background:#EAFBEF;}
@keyframes la-word-feedback{0%,35%{border-color:var(--leaf); background:#E4F9EB;}100%{border-color:rgba(31,168,91,.22);}}
/* —— 小老师任务 · 儿童简化样式 —— */
.la-extras{margin:2px 0 0;}
.la-extras>summary{cursor:pointer; color:var(--ink-dim); font-size:13px; padding:4px 0; list-style:none;}
.la-extras>summary::before{content:'▸ ';}
.la-extras[open]>summary::before{content:'▾ ';}
.la-extras .la-options{margin-top:10px;}
.la-generate-big{width:100%; min-height:56px; font-size:18px; border-radius:999px; letter-spacing:1px;}
.la-kid-goal{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0 4px;
  font-size:15px; color:var(--ink);}
.la-kid-goal .la-kid-chip{background:#FFF3C4; color:#8A6200; border-radius:999px;
  padding:3px 12px; font-size:13px;}
.la-task-actions .la-primary{min-width:118px; min-height:42px; padding:9px 20px; font-size:16px; border-radius:12px;}
/* —— 拼写块 —— */
.sp-tile{border:2px solid #F5D76E; background:#FFF3C4; color:#7A5B1E;}
.sp-tile:hover:not(:disabled){border-color:var(--sun-deep);}
.sp-slot{border:2px dashed rgba(31,168,91,.5); background:#FFFFFF; color:var(--leaf-deep);}
.sp-slot.done{border:2px solid var(--leaf); color:var(--leaf-deep); background:#E4F9EB;}