:root{
  --bg1:#eef2f8;
  --bg2:#e3eaf6;
  --card:#ffffff;
  --ink:#1c1c1e;
  --ink-2:#6b7280;
  --ink-3:#9aa1ac;
  --blue:#007aff;
  --blue-soft:#e8f1ff;
  --green:#34c759;
  --orange:#ff9500;
  --red:#ff3b30;
  --line:rgba(0,0,0,0.08);
  --shadow:0 8px 30px rgba(20,40,80,0.10);
  --radius:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font);
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  font-size:18px;
  line-height:1.5;
}
#app{
  max-width:760px;
  margin:0 auto;
  min-height:100%;
  padding:0 18px calc(40px + env(safe-area-inset-bottom));
}

/* ===== 通用 ===== */
.btn{
  appearance:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:18px;font-weight:600;
  padding:15px 22px;border-radius:16px;
  background:var(--blue);color:#fff;
  box-shadow:0 6px 16px rgba(0,122,255,0.30);
  transition:transform .08s ease, opacity .2s ease;
  min-height:52px;
}
.btn:active{transform:scale(0.97);}
.btn.ghost{background:var(--blue-soft);color:var(--blue);box-shadow:none;}
.btn.soft{background:#f1f3f7;color:var(--ink);box-shadow:none;}
.btn.green{background:var(--green);box-shadow:0 6px 16px rgba(52,199,89,0.30);}
.btn[disabled]{opacity:.45;box-shadow:none;cursor:default;}
.btn.big{font-size:20px;padding:18px;border-radius:18px;width:100%;}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}

/* ===== 头部 ===== */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px;
  margin:0 -18px 6px;
  background:rgba(238,242,248,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.topbar .who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.topbar .who .nm{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar .acts{display:flex;gap:8px;}
.icon-btn{
  appearance:none;border:none;background:rgba(255,255,255,0.7);
  border-radius:14px;padding:10px 14px;font-size:15px;font-weight:600;
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow);
}
.icon-btn.blue{color:var(--blue);}
.icon-btn:active{transform:scale(0.96);}

.avatar{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:20px;flex:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

/* ===== 选择账户 ===== */
.select-screen{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:40px 18px;gap:22px;
}
.select-screen h1{font-size:30px;font-weight:800;text-align:center;margin:0 0 4px;letter-spacing:.5px;}
.select-screen .sub{text-align:center;color:var(--ink-2);font-size:17px;margin-bottom:10px;}
.kid-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.kid-card{
  background:var(--card);border-radius:26px;box-shadow:var(--shadow);
  padding:30px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;
  cursor:pointer;transition:transform .1s ease;
}
.kid-card:active{transform:scale(0.97);}
.kid-card .avatar{width:84px;height:84px;font-size:38px;}
.kid-card .nm{font-size:24px;font-weight:800;}
.kid-card .tip{font-size:14px;color:var(--ink-3);}

/* ===== 首页 ===== */
.greet{font-size:26px;font-weight:800;margin:14px 4px 4px;}
.greet .small{font-size:16px;font-weight:600;color:var(--ink-2);display:block;margin-top:2px;}
.continue{
  margin:14px 0 8px;cursor:pointer;
  background:linear-gradient(135deg,#eaf2ff,#f4ecff);
}
.continue .ttl{font-size:13px;color:var(--blue);font-weight:700;letter-spacing:.4px;}
.continue .name{font-size:24px;font-weight:800;margin-top:6px;}
.continue .meta{font-size:14px;color:var(--ink-2);margin-top:4px;}

.section-title{font-size:15px;font-weight:700;color:var(--ink-2);margin:22px 4px 8px;}

.lesson-list{display:flex;flex-direction:column;gap:12px;}
.lesson-row{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:16px 18px;
}
.lesson-row:active{transform:scale(0.99);}
.lr-no{
  width:42px;height:42px;border-radius:14px;flex:none;
  background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
}
.lr-main{flex:1;min-width:0;}
.lr-title{font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lr-steps{display:flex;gap:6px;margin-top:8px;}
.dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#eef0f4;color:var(--ink-3);}
.dot.on{background:var(--green);color:#fff;}
.dot.rev.on{background:var(--orange);color:#fff;}
.lr-done{color:var(--green);font-size:22px;flex:none;}

/* ===== 课程页 ===== */
.stepper{display:flex;gap:8px;margin:8px 0 16px;flex-wrap:wrap;}
.step-pill{
  font-size:14px;font-weight:700;padding:9px 14px;border-radius:14px;
  background:#eef0f4;color:var(--ink-3);
}
.step-pill.active{background:var(--blue);color:#fff;}
.step-pill.done{background:var(--green);color:#fff;}

.panel-title{font-size:22px;font-weight:800;margin:4px 2px 14px;}
.hint{font-size:15px;color:var(--ink-2);background:#f6f8fc;border-radius:14px;padding:12px 14px;margin-bottom:14px;}

/* 第一遍：单词（始终单栏：一句一行，可换行，下一句往下） */
.word-grid{display:block;}
.sentence-block{margin-bottom:16px;}
.sentence-block{}
.sentence-idx{font-size:13px;color:var(--ink-3);font-weight:700;margin:6px 2px;}
.word-chip{
  display:inline-flex;flex-direction:column;align-items:flex-start;
  background:#f6f8fc;border-radius:14px;padding:10px 12px;margin:0 8px 10px 0;
  cursor:pointer;vertical-align:top;
}
.word-chip:active{background:var(--blue-soft);}
.word-chip .w{font-size:22px;font-weight:700;}
.word-chip .i{font-size:13px;color:var(--ink-3);margin-top:2px;}
.word-chip .t{font-size:14px;color:var(--ink-2);margin-top:1px;}
.word-chip .speak{font-size:13px;color:var(--blue);margin-top:3px;}

/* 第二遍：通读 */
.read-text{font-size:26px;line-height:2.05;font-weight:500;letter-spacing:.2px;}
.read-text p{margin:0 0 18px;}
.tap-word{
  cursor:pointer;border-radius:7px;padding:0 1px;transition:background .12s;
}
.tap-word:active,.tap-word.hl{background:var(--blue-soft);}
.sentence-play{
  appearance:none;border:none;background:var(--blue-soft);color:var(--blue);
  border-radius:12px;width:38px;height:38px;font-size:18px;margin-right:10px;cursor:pointer;flex:none;vertical-align:middle;
}

/* 第三遍：问答 */
.confirm-box{background:#fff8ec;border-radius:16px;padding:16px 18px;margin-bottom:16px;}
.confirm-box .q{font-size:18px;font-weight:600;margin:8px 0;}
.confirm-box .a{font-size:15px;color:var(--ink-2);margin-left:14px;}
.qa-item{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-bottom:14px;}
.qa-q{font-size:19px;font-weight:700;display:flex;gap:8px;align-items:flex-start;}
.qa-a{width:100%;margin-top:12px;border:1.5px solid var(--line);border-radius:14px;padding:12px;font-size:18px;font-family:var(--font);resize:vertical;min-height:64px;}
.qa-acts{display:flex;gap:10px;margin-top:12px;}
.qa-acts .btn{flex:1;}
.qa-acts .btn.sel-right{background:var(--green);box-shadow:none;color:#fff;}
.qa-acts .btn.sel-wrong{background:var(--red);box-shadow:none;color:#fff;}
.qa-count{font-size:15px;color:var(--ink-2);text-align:center;margin:6px 0 14px;}

/* 复习 */
.review-text{font-size:24px;line-height:1.95;font-weight:500;}
.review-text p{margin:0 0 16px;}

/* 浮层 */
.word-pop{
  position:fixed;z-index:60;min-width:120px;max-width:80vw;
  background:rgba(28,28,30,0.96);color:#fff;border-radius:16px;
  padding:14px 16px;box-shadow:0 12px 30px rgba(0,0,0,0.3);
}
.word-pop .word-pop-word{font-size:22px;font-weight:800;}
.word-pop .word-pop-ipa{font-size:15px;color:#9ec5ff;margin-top:3px;}
.word-pop .word-pop-trans{font-size:16px;margin-top:4px;}
.word-pop:after{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);border:8px solid transparent;border-bottom-color:rgba(28,28,30,0.96);}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px);}
.modal-card{background:#fff;border-radius:24px;padding:24px;width:100%;max-width:420px;box-shadow:var(--shadow);}
.modal-title{font-size:21px;font-weight:800;margin-bottom:12px;}
.modal-body{font-size:16px;color:var(--ink-2);}
.modal-body input{width:100%;margin-top:12px;border:1.5px solid var(--line);border-radius:14px;padding:13px;font-size:19px;font-family:var(--font);}
.modal-body .rand{font-size:22px;font-weight:800;color:var(--blue);letter-spacing:3px;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.modal-actions .btn{flex:1;}

/* toast */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:90;background:rgba(28,28,30,0.92);color:#fff;padding:12px 20px;border-radius:14px;font-size:15px;box-shadow:var(--shadow);max-width:80vw;text-align:center;}

/* ===== iPad / 触屏大屏：文字放大 30%（发音按钮不放大） ===== */
@media (pointer:coarse) and (min-width:700px){
  body{font-size:23px;}
  .select-screen h1{font-size:38px;}
  .select-screen .sub{font-size:22px;}
  .kid-card .nm{font-size:31px;}
  .greet{font-size:34px;}
  .continue .name{font-size:31px;}
  .section-title{font-size:20px;}
  .lr-title{font-size:25px;}
  .lr-steps{margin-top:12px;}
  .panel-title{font-size:29px;}
  .hint{font-size:20px;}
  .word-chip .w{font-size:29px;}
  .word-chip .i{font-size:17px;}
  .word-chip .t{font-size:19px;}
  .word-chip{padding:13px 15px;margin:0 10px 12px 0;}
  .read-text{font-size:34px;line-height:1.9;}
  .review-text{font-size:31px;line-height:1.85;}
  .qa-q{font-size:25px;}
  .qa-a{font-size:23px;}
  .confirm-box .q{font-size:24px;}
  .confirm-box .a{font-size:20px;}
  .word-pop .word-pop-word{font-size:28px;}
  .word-pop .word-pop-ipa{font-size:19px;}
  .word-pop .word-pop-trans{font-size:20px;}
}

/* ===== 第二遍：逐句 + 整句中文对照 ===== */
.sentence-row{margin:0 0 14px;}
.sentence-line{display:block;margin:0 0 2px;}
.zh{
  display:block;
  font-size:0.58em;
  line-height:1.5;
  color:var(--ink-3);
  margin:1px 0 16px 48px;
  font-weight:400;
}

/* ===== 第三遍：语音输入按钮 ===== */
.qa-acts{flex-wrap:wrap;}
.btn.mic{
  flex:none;
  background:var(--blue-soft);color:var(--blue);box-shadow:none;
  min-width:56px;
}
.btn.mic:active{transform:scale(0.95);}
.btn.mic.recording{background:var(--red);color:#fff;animation:pulse 1s infinite;}
@keyframes pulse{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}

/* ===== 竖屏提示（仅触屏设备竖屏时显示） ===== */
.rotate-hint{display:none;}
@media (orientation:portrait) and (pointer:coarse){
  .rotate-hint{
    display:block;position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(0,122,255,0.92);color:#fff;text-align:center;
    padding:9px;font-size:14px;font-weight:600;letter-spacing:.3px;
  }
}

/* ===== 横屏布局（iPad 横放优先） ===== */
@media (orientation:landscape){
  #app{max-width:1200px;padding-left:28px;padding-right:28px;}
  /* 第二遍：英文在左、整句中文在右并排 */
  .sentence-row{display:flex;gap:34px;align-items:flex-start;margin:0 0 20px;}
  .sentence-row .sentence-line{flex:1 1 56%;margin:0;}
  .sentence-row .zh{
    flex:1 1 44%;margin:0;align-self:flex-start;
    font-size:0.6em;line-height:1.65;padding-top:6px;
    border-left:2px solid var(--line);padding-left:22px;
  }
  /* 首页课程列表两列 */
  .lesson-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  /* 选账户卡片间距加大 */
  .select-screen .kid-grid{gap:28px;}
  .select-screen{padding:32px 18px;}
  /* 第三遍问答两列（题目+作答并排） */
  .qa-item{display:flex;flex-direction:column;}
}