*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f3f7fc;color:#12264d}button,input{font:inherit}button{cursor:pointer}header{height:78px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #dde7f4}.brand{display:flex;gap:12px;align-items:center;font-size:38px}.brand b{font-size:25px}.brand small{display:block;color:#60708c;font-size:14px}.layout{display:grid;grid-template-columns:245px minmax(420px,1fr) 280px;gap:18px;padding:18px;max-width:1500px;margin:auto}.card{background:#fff;border:1px solid #dfe8f4;border-radius:20px;box-shadow:0 8px 25px #18375b0c}.left{padding:15px;height:max-content}.left h3{background:#2583e8;color:#fff;padding:15px;border-radius:13px;margin:0 0 12px}.left button,.tools button{width:100%;border:0;background:transparent;text-align:left;padding:13px;border-radius:10px;color:#12264d}.left button:hover,.tools button:hover{background:#eef6ff}.quote{margin-top:24px;padding:24px 14px;background:#eef8ff;border-radius:16px;text-align:center;font-style:italic}.center{display:flex;flex-direction:column;gap:16px}.hero{padding:25px;display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,#dff2ff,#fff3df)}.avatar{font-size:92px}.hero h1{margin:0}.hero p{line-height:1.55}.chat{padding:22px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choices button{display:flex;gap:12px;align-items:center;border:0;border-radius:12px;padding:11px;background:#f0f6ff;color:#173a72}.choices b{background:#2f8bea;color:#fff;width:28px;height:28px;border-radius:8px;display:grid;place-items:center}.messages{min-height:150px;max-height:280px;overflow:auto;padding:15px 0}.bubble{padding:12px 15px;border-radius:15px;margin:8px 0;max-width:78%;line-height:1.45}.bot{background:#eef5ff}.user{background:#dff5e8;margin-left:auto}.composer{display:flex;gap:8px;border:1px solid #cad7e8;border-radius:28px;padding:5px}.composer input{flex:1;border:0;outline:0;padding:10px 15px}.composer button{border:0;background:#318ce7;color:#fff;border-radius:50%;width:42px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.actions button{border:1px solid #d6e1ef;background:#fff;border-radius:18px;padding:9px 12px}.right{display:flex;flex-direction:column;gap:16px}.right .card{padding:18px}.prog label{display:flex;justify-content:space-between;margin-top:18px}.prog progress{width:100%;height:13px;margin-top:7px}.tools button{border:1px solid #dce6f1;margin:5px 0}@media(max-width:1050px){.layout{grid-template-columns:210px 1fr}.right,nav{display:none}}@media(max-width:720px){header{height:auto;padding:14px}.layout{display:block;padding:10px}.left{display:none}.avatar{font-size:60px}.choices{grid-template-columns:1fr}.bubble{max-width:90%}}button:disabled{opacity:.55;cursor:not-allowed}.thinking{font-style:italic;color:#60708c}.demo{display:block;margin-top:16px;color:#7b879b}.messages{scroll-behavior:smooth}.bubble{white-space:pre-wrap}.hero{min-height:175px}


/* ===== Full-screen study mode ===== */
.study-shell{
  min-height:100vh;
  height:100vh;
  background:#f3f7fc;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.study-topbar{
  height:72px;
  flex:0 0 72px;
  background:#fff;
  border-bottom:1px solid #dfe8f4;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 24px;
  box-shadow:0 4px 18px #18375b0b;
  z-index:5;
}
.study-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:22px;
}
.study-title>span{font-size:28px}
.study-title div{display:flex;flex-direction:column;line-height:1.15}
.study-title small{font-size:12px;font-weight:normal;color:#71809a;margin-top:4px;text-align:center}
.study-nav-btn{
  width:max-content;
  border:1px solid #d7e2ef;
  background:#fff;
  color:#173a72;
  padding:10px 15px;
  border-radius:12px;
  font-weight:700;
}
.study-nav-btn:hover{background:#eef6ff}
.study-nav-btn.end{justify-self:end;color:#a63d3d}
.study-workspace{
  width:min(1200px,100%);
  margin:0 auto;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:0 0 32px #18375b0d;
}
.study-messages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:32px clamp(18px,5vw,70px);
  scroll-behavior:smooth;
}
.study-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:12px 0;
}
.study-row.user-row{justify-content:flex-end}
.study-row .bubble{
  margin:0;
  max-width:min(820px,82%);
  font-size:17px;
  line-height:1.65;
  padding:15px 18px;
}
.mini-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf4ff;
  font-size:22px;
}
.study-bottom{
  flex:0 0 auto;
  background:#fff;
  border-top:1px solid #e2eaf4;
  padding:12px clamp(14px,4vw,54px) 18px;
  box-shadow:0 -8px 24px #18375b08;
}
.study-actions{
  margin:0 0 10px;
  justify-content:center;
}
.study-actions button{
  padding:9px 14px;
  background:#f8fbff;
}
.study-composer{
  max-width:1000px;
  margin:0 auto;
  min-height:56px;
  border-radius:30px;
  background:#fff;
  box-shadow:0 4px 18px #18375b0d;
}
.study-composer input{
  font-size:17px;
}
.study-composer button{
  width:46px;
  height:46px;
  align-self:center;
  margin-right:1px;
}
@media(max-width:720px){
  .study-topbar{
    height:62px;
    flex-basis:62px;
    padding:0 10px;
  }
  .study-title{font-size:16px}
  .study-title>span{font-size:22px}
  .study-title small{display:none}
  .study-nav-btn{padding:9px 11px}
  .study-nav-btn span{display:none}
  .study-messages{padding:18px 12px}
  .study-row .bubble{max-width:88%;font-size:16px}
  .study-actions{
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:3px;
  }
  .study-actions button{white-space:nowrap}
  .study-bottom{padding:9px 10px 12px}
}


/* ===== Answer choice buttons ===== */
.study-message-wrap{
  max-width:min(900px,88%);
  min-width:0;
}
.study-message-wrap>.bubble{
  max-width:100%;
  white-space:pre-wrap;
}
.answer-options{
  display:grid;
  gap:10px;
  margin-top:12px;
  width:min(760px,100%);
}
.answer-options button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding:13px 16px;
  border:1px solid #cfddec;
  border-radius:14px;
  background:#fff;
  color:#173a72;
  font-size:16px;
  line-height:1.35;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.answer-options button:hover:not(:disabled){
  background:#f2f8ff;
  box-shadow:0 5px 14px #18375b12;
  transform:translateY(-1px);
}
.answer-options button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.answer-letter{
  flex:0 0 38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9f3ff;
  font-weight:800;
  font-size:17px;
}
@media(max-width:720px){
  .study-message-wrap{max-width:90%}
  .answer-options button{padding:11px 12px;font-size:15px}
  .answer-letter{flex-basis:34px;height:34px}
}

/* ===== Voice tutor ===== */
.voice-strip{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 24px;background:#f7fbff;border-bottom:1px solid #e2eaf4;color:#52627c;font-size:13px}.voice-strip b{color:#173a72}.voice-strip>span:nth-child(3){flex:1}.voice-strip label{display:flex;align-items:center;gap:6px;white-space:nowrap}.voice-dot{width:10px;height:10px;border-radius:50%;background:#aeb9c8;box-shadow:0 0 0 0 rgba(47,139,234,.25)}.voice-dot.active{background:#2f8bea;animation:voicePulse 1.25s infinite}@keyframes voicePulse{70%{box-shadow:0 0 0 9px rgba(47,139,234,0)}100%{box-shadow:0 0 0 0 rgba(47,139,234,0)}}.study-composer .mic-btn,.study-composer .send-btn{flex:0 0 46px;width:46px;height:46px;border:0;border-radius:50%;color:#fff;background:#318ce7;margin:0;align-self:center}.study-composer .mic-btn{background:#eef5ff;color:#174b84;font-size:20px}.study-composer .mic-btn.listening{background:#e54d4d;color:#fff;animation:voicePulse 1.1s infinite}.voice-hint{text-align:center;color:#7a879a;font-size:12px;margin-top:8px}.study-actions button{min-height:38px}@media(max-width:720px){.voice-strip{padding:7px 10px;flex-wrap:wrap}.voice-strip>span:nth-child(3){order:3;flex-basis:100%}.voice-strip label{margin-left:auto}.voice-hint{display:none}.study-composer{gap:4px}.study-composer .mic-btn,.study-composer .send-btn{flex-basis:42px;width:42px;height:42px}}