/* ============================================================
   幼升小 AI 学习智能体 · 原型样式
   低幼柔和原木风（暖米色 / 圆角大按钮 / 卡通 emoji）
   ============================================================ */

:root{
  --wood-bg:#FBF1DF;
  --wood-bg2:#F4E3C8;
  --wood-card:#FFFDF8;
  --wood-dark:#8A6D4B;
  --wood-mid:#B5895A;
  --wood-line:#E4D2B3;
  --text:#5A4632;
  --text-soft:#957C5C;
  --blue:#6FB1E0;     /* 拼音 */
  --green:#86C98A;    /* 识字 */
  --orange:#F2A65A;   /* 数学 */
  --purple:#B488D6;   /* 英语 */
  --pink:#EF9BB0;     /* 通用/奖励 */
  --red:#E06C75;      /* 预警 */
  --shadow:rgba(138,109,75,.18);
  --r:30px;
  --r-sm:20px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Comic Sans MS","Chalkboard SE","PingFang SC","Microsoft YaHei","微软雅黑",sans-serif;
  background:
    radial-gradient(circle at 12% 18%, #fde9c8 0, transparent 40%),
    radial-gradient(circle at 88% 82%, #f6e4c6 0, transparent 42%),
    var(--wood-bg);
  color:var(--text);
  font-size:18px;
  min-height:100vh;
}

/* ---------- 通用按钮 ---------- */
.btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;
  color:#fff;background:var(--wood-mid);
  border-radius:var(--r-sm);padding:16px 22px;font-size:19px;
  box-shadow:0 6px 0 rgba(0,0,0,.08), 0 8px 16px var(--shadow);
  transition:transform .08s ease, box-shadow .08s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.08);}
.btn.blue{background:var(--blue);}
.btn.green{background:var(--green);}
.btn.orange{background:var(--orange);}
.btn.purple{background:var(--purple);}
.btn.pink{background:var(--pink);}
.btn.ghost{background:#fff;color:var(--wood-dark);border:2px solid var(--wood-line);box-shadow:none;}
.btn.big{padding:22px 26px;font-size:22px;border-radius:var(--r);}
.btn:disabled{filter:grayscale(.7);opacity:.55;cursor:not-allowed;}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:#fff;color:var(--wood-dark);font-weight:700;font-size:15px;border:2px solid var(--wood-line);
}

/* ============================================================
   顶部全局工具栏
   ============================================================ */
#toolbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#fff8ec,#f7e8cd);
  border-bottom:3px solid var(--wood-line);
  box-shadow:0 4px 14px var(--shadow);
  padding:8px 14px;
}
.tb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1180px;margin:0 auto;}
.tb-group{display:flex;align-items:center;gap:8px;}

/* 模式切换 */
.mode-btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  background:#fff;color:var(--wood-dark);border:2px solid var(--wood-line);
  border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:62px;line-height:1.1;box-shadow:0 3px 0 rgba(0,0,0,.05);
}
.mode-btn .ic{font-size:22px;}
.mode-btn.active{background:linear-gradient(180deg,#ffd98a,#f6b94e);color:#5a3d12;border-color:#e9a93c;box-shadow:0 4px 0 #d9952f;}

/* 工具箱按钮 */
.toolbox-btn{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:16px;
  background:var(--wood-mid);color:#fff;border-radius:16px;padding:10px 16px;
  display:flex;align-items:center;gap:8px;box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.toolbox-btn:active{transform:translateY(2px);}

/* 积分打卡 */
.stat-box{background:#fff;border:2px solid var(--wood-line);border-radius:16px;padding:6px 12px;display:flex;flex-direction:column;gap:2px;min-width:150px;}
.stat-box .lab{font-size:12px;color:var(--text-soft);font-weight:700;}
.stat-box .val{font-size:15px;font-weight:800;color:var(--wood-dark);display:flex;align-items:center;gap:6px;}
.progress-wrap{height:10px;background:#efe1c8;border-radius:999px;overflow:hidden;width:140px;}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#8fd19e,#f6c95a);border-radius:999px;transition:width .4s;}

/* 时长护眼 */
.timer-box{background:#fff;border:2px solid var(--wood-line);border-radius:16px;padding:6px 12px;display:flex;flex-direction:column;gap:2px;min-width:170px;}
.timer-box .val{font-size:15px;font-weight:800;color:var(--wood-dark);}
.timer-box.warn .val{color:var(--red);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* 设置 */
.gear-btn{border:none;cursor:pointer;font-size:24px;background:#fff;border:2px solid var(--wood-line);border-radius:14px;padding:8px 12px;}

/* ---------- 工具箱抽屉 ---------- */
#toolbox-drawer{
  max-width:1180px;margin:8px auto 0;display:none;
  background:var(--wood-card);border:3px solid var(--wood-line);border-radius:var(--r);
  padding:16px;box-shadow:0 10px 24px var(--shadow);
}
#toolbox-drawer.open{display:block;animation:drop .2s ease;}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
@media(max-width:900px){.tb-grid{grid-template-columns:repeat(2,1fr);}}
.tb-group-card{border-radius:var(--r-sm);padding:12px;background:#fbf3e3;border:2px solid var(--wood-line);}
.tb-group-card h4{margin:0 0 10px;font-size:16px;display:flex;align-items:center;gap:6px;}
.tb-group-card.english{background:#f6eefb;border-color:#e0c8f2;}
.tb-tools{display:flex;flex-direction:column;gap:8px;}
.tb-tool{
  border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;text-align:left;
  background:#fff;color:var(--wood-dark);border:2px solid var(--wood-line);border-radius:14px;
  padding:10px 12px;display:flex;align-items:center;gap:8px;
}
.tb-tool:active{transform:translateY(2px);}
.tb-tool:disabled{filter:grayscale(.7);opacity:.5;cursor:not-allowed;}

/* ============================================================
   页面主体
   ============================================================ */
main{max-width:1000px;margin:18px auto 60px;padding:0 16px;}
.view-title{display:flex;align-items:center;gap:12px;margin:6px 0 18px;}
.view-title h1{font-size:30px;margin:0;color:var(--wood-dark);}
.view-title .sub{font-size:15px;color:var(--text-soft);font-weight:700;}

/* 卡片 */
.card{
  background:var(--wood-card);border:3px solid var(--wood-line);border-radius:var(--r);
  padding:22px;box-shadow:0 8px 18px var(--shadow);margin-bottom:18px;
}
.card.blue{border-color:#bfe0f4;}
.card.green{border-color:#cdeccf;}
.card.orange{border-color:#f7d6b0;}
.card.purple{border-color:#e3cff2;}
.card.pink{border-color:#f6cdd8;}

/* 首页任务卡 */
.task-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:720px){.task-grid{grid-template-columns:1fr;}}
.task-card{
  border-radius:var(--r);padding:20px;color:#fff;cursor:pointer;
  box-shadow:0 8px 0 rgba(0,0,0,.08),0 10px 18px var(--shadow);border:none;font-family:inherit;text-align:left;
  display:flex;flex-direction:column;gap:10px;min-height:140px;transition:transform .1s;
}
.task-card:active{transform:translateY(3px);}
.task-card .tc-ic{font-size:42px;}
.task-card .tc-title{font-size:22px;font-weight:800;}
.task-card .tc-sub{font-size:14px;opacity:.95;font-weight:700;}
.task-card .tc-meta{font-size:13px;opacity:.9;margin-top:auto;background:rgba(255,255,255,.22);border-radius:999px;padding:5px 12px;align-self:flex-start;}
.task-card.blue{background:linear-gradient(160deg,#7fbde8,#5b9fd4);}
.task-card.green{background:linear-gradient(160deg,#93d29a,#6cba76);}
.task-card.orange{background:linear-gradient(160deg,#f6b06a,#ec8f3f);}
.task-card.purple{background:linear-gradient(160deg,#c09ae0,#a06fd0);}

/* 打卡墙 */
.checkin-wall{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.checkin-dot{width:34px;height:34px;border-radius:50%;background:#f0e2c8;display:flex;align-items:center;justify-content:center;font-size:18px;border:2px solid var(--wood-line);}
.checkin-dot.done{background:linear-gradient(160deg,#ffe08a,#f6c34e);border-color:#e9a93c;}

/* 分配条 */
.alloc-bar{display:flex;height:26px;border-radius:999px;overflow:hidden;border:2px solid var(--wood-line);margin:6px 0;}
.alloc-bar span{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;}
.alloc-bar .a-blue{background:var(--blue);}
.alloc-bar .a-green{background:var(--green);}
.alloc-bar .a-orange{background:var(--orange);}
.alloc-bar .a-purple{background:var(--purple);}

/* 字母 / 单词网格 */
.grid{display:grid;gap:12px;}
.grid.letters{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
.grid.words{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
.tile{
  background:#fff;border:3px solid var(--wood-line);border-radius:var(--r-sm);
  padding:14px 10px;text-align:center;cursor:pointer;font-family:inherit;font-weight:800;color:var(--wood-dark);
  box-shadow:0 5px 0 rgba(0,0,0,.05);transition:transform .1s;
}
.tile:active{transform:translateY(3px);}
.tile .big{font-size:34px;line-height:1;}
.tile .en{font-size:16px;margin-top:6px;}
.tile .cn{font-size:13px;color:var(--text-soft);font-weight:700;}
.tile .emoji{font-size:26px;display:block;margin-top:4px;}
.tile.purple{border-color:#e0c8f2;background:#faf4fd;}

/* 模块切换 */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.tab{border:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:16px;background:#fff;color:var(--wood-dark);border:2px solid var(--wood-line);border-radius:16px;padding:12px 16px;}
.tab.active{background:var(--purple);color:#fff;border-color:#a06fd0;}

/* 算式 / 答题 */
.quiz{display:flex;align-items:center;justify-content:center;gap:14px;font-size:40px;font-weight:800;color:var(--wood-dark);margin:14px 0;}
.quiz input{
  width:120px;height:64px;font-size:36px;text-align:center;font-family:inherit;font-weight:800;
  border:3px solid var(--wood-line);border-radius:18px;color:var(--wood-dark);background:#fff;
}
.quiz input:focus{outline:none;border-color:var(--orange);}
.feedback{text-align:center;font-size:20px;font-weight:800;min-height:28px;margin-top:6px;}
.feedback.ok{color:#5aa86a;}
.feedback.no{color:var(--red);}

/* 看图说话 */
.pic-card{display:flex;gap:16px;align-items:center;background:#fff;border:3px solid var(--wood-line);border-radius:var(--r-sm);padding:16px;}
.pic-card .pic{font-size:64px;background:#fbf3e3;border-radius:18px;width:110px;height:110px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pic-card .q{font-size:18px;font-weight:700;color:var(--text);}

/* 儿歌 */
.song{background:#fff;border:3px solid var(--wood-line);border-radius:var(--r-sm);padding:16px;margin-bottom:12px;}
.song h3{margin:0 0 8px;color:var(--purple);font-size:20px;display:flex;align-items:center;gap:8px;}
.song pre{white-space:pre-wrap;font-family:inherit;font-size:16px;line-height:1.7;margin:0;color:var(--text);}

/* 家长看板 */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.kpi{background:#fff;border:3px solid var(--wood-line);border-radius:var(--r-sm);padding:16px;text-align:center;}
.kpi .num{font-size:30px;font-weight:800;color:var(--wood-dark);}
.kpi .lab{font-size:14px;color:var(--text-soft);font-weight:700;margin-top:4px;}
.subject-blocks{display:flex;flex-direction:column;gap:10px;}
.sb-row{display:flex;align-items:center;gap:12px;}
.sb-name{width:64px;font-weight:800;color:var(--wood-dark);}
.sb-track{flex:1;height:24px;background:#efe1c8;border-radius:999px;overflow:hidden;}
.sb-fill{height:100%;border-radius:999px;}
.sb-val{width:70px;text-align:right;font-weight:800;color:var(--wood-dark);}

/* 周报 */
.report{background:#fff;border:3px solid var(--wood-line);border-radius:var(--r);padding:24px;line-height:1.9;}
.report h2{color:var(--wood-dark);border-bottom:3px dashed var(--wood-line);padding-bottom:8px;}
.report .tag{display:inline-block;background:#fbf3e3;border:2px solid var(--wood-line);border-radius:999px;padding:4px 12px;font-weight:800;font-size:14px;margin:4px 6px 4px 0;color:var(--wood-dark);}
.report ul{margin:8px 0;padding-left:22px;}
.report li{margin:6px 0;}

/* 设置 */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:2px dashed var(--wood-line);}
.set-row:last-child{border-bottom:none;}
.set-row .lab{font-weight:800;color:var(--wood-dark);}
.set-row .hint{font-size:13px;color:var(--text-soft);font-weight:700;}

/* 开关 */
.switch{position:relative;width:60px;height:34px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#e0cdb0;border-radius:999px;cursor:pointer;transition:.2s;}
.slider:before{content:"";position:absolute;width:26px;height:26px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 4px rgba(0,0,0,.2);}
.switch input:checked + .slider{background:var(--green);}
.switch input:checked + .slider:before{transform:translateX(26px);}

/* 模拟面试 */
.interview{border-radius:var(--r);padding:22px;background:linear-gradient(160deg,#fff6e6,#fdeccb);border:3px solid var(--wood-line);}
.bubble{background:#fff;border:3px solid var(--wood-line);border-radius:18px;padding:14px 16px;margin:10px 0;font-size:17px;font-weight:700;color:var(--text);}
.bubble.agent{background:#f3f7ff;border-color:#cfe0ff;}
.bubble.me{background:#f0fbe9;border-color:#cdeccf;text-align:right;}

/* ============================================================
   弹层 / 模态
   ============================================================ */
.overlay{position:fixed;inset:0;background:rgba(90,70,50,.45);z-index:100;display:none;align-items:center;justify-content:center;padding:18px;}
.overlay.open{display:flex;animation:fade .2s;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--wood-card);border:3px solid var(--wood-line);border-radius:var(--r);max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:22px;box-shadow:0 20px 40px rgba(0,0,0,.3);}
.modal h2{margin:0 0 14px;color:var(--wood-dark);display:flex;align-items:center;gap:8px;}
.modal .close{float:right;cursor:pointer;border:none;background:#f0e2c8;border-radius:12px;font-size:20px;padding:4px 12px;font-weight:800;color:var(--wood-dark);}

.reward{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--wood-line);border-radius:16px;padding:12px;margin:8px 0;}
.reward .emoji{font-size:32px;}
.reward .info{flex:1;}
.reward .info .t{font-weight:800;color:var(--wood-dark);}
.reward .info .c{font-size:13px;color:var(--text-soft);font-weight:700;}

/* 全局锁层 */
#lock-banner{display:none;background:linear-gradient(90deg,#ffd1d6,#ffb3bd);color:#7a2e36;font-weight:800;text-align:center;padding:8px;font-size:15px;border-bottom:2px solid #f1a6af;}
#lock-banner.show{display:block;}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--wood-dark);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;z-index:200;opacity:0;transition:.25s;box-shadow:0 8px 20px rgba(0,0,0,.3);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.locked-note{text-align:center;color:var(--text-soft);font-weight:800;padding:30px;font-size:18px;}

.section-h{font-size:20px;font-weight:800;color:var(--wood-dark);margin:18px 0 10px;display:flex;align-items:center;gap:8px;}
.mini{font-size:13px;color:var(--text-soft);font-weight:700;}
.star{color:#f6b94e;}
.eng-tag{display:inline-block;background:#f6eefb;border:2px solid #e0c8f2;color:#8a5bb0;border-radius:999px;font-size:13px;font-weight:800;padding:3px 10px;margin-left:8px;}