/* Portrait design system — based on the approved vertical AgenTech child-doctor mockup */
:root{--portrait-width:1024px}
body{background:linear-gradient(135deg,#d8ecf8,#edf7fd 45%,#d2e8f6);}
.brandType span{display:none!important}
.childShell{width:min(100%,var(--portrait-width));min-height:100vh;aspect-ratio:2/3;margin:0 auto;background:#eaf6fd;box-shadow:0 24px 80px #0b37682b;overflow:hidden;position:relative}
.childTop{height:94px;grid-template-columns:240px minmax(0,1fr) 125px 58px;gap:12px;padding:0 22px;background:#fff;border-bottom:1px solid #cfe3f0}
.childTop .brandType b{font-size:25px}.childTop .brandMark{transform:scale(.9);transform-origin:left center}
.phase{gap:14px}.phase>b{padding:10px 22px;font-size:18px}.dots i{width:20px;height:20px;border-width:4px;margin-right:18px}.dots i:not(:last-child):after{width:23px;height:4px;left:16px;top:4px}.questionCount{font-size:20px}.questionCount b{font-size:36px}.questionCount span{font-size:20px}.hamb{width:48px;height:48px;font-size:22px}
.doctorStage{height:calc(100% - 94px);min-height:0;display:grid;grid-template-columns:42% 58%;background:radial-gradient(circle at 15% 25%,#ffffffd9 0 6%,transparent 20%),radial-gradient(circle at 84% 12%,#ffffffaa 0 5%,transparent 18%),linear-gradient(135deg,#d6effc,#edf8fe 52%,#c9e8f8);position:relative}
.doctorStage:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 41.8%,#ffffff7a 42%,transparent 42.2%);pointer-events:none}
.mascotPane{align-items:flex-end;justify-content:center;padding:20px 4px 0;overflow:hidden}.mascotPane .agenMascot{height:88%;max-height:none;width:auto;filter:drop-shadow(0 24px 26px #144c822e)}
.labIcons span{border-color:#ffffffa6;background:#ffffff14;box-shadow:0 7px 22px #2a78b91a}.labIcons span:nth-child(1){left:5%;top:8%;font-size:36px}.labIcons span:nth-child(2){left:4%;top:29%}.labIcons span:nth-child(3){left:5%;top:50%;font-size:25px}.labIcons span:nth-child(4){right:4%;top:54%;font-size:34px}
.dialogPane{padding:52px 30px 44px 12px;justify-content:flex-start;gap:22px}
.speech{border-radius:44px 44px 44px 8px;border:2px solid #2c89da;padding:28px 34px;font-size:30px;line-height:1.5;box-shadow:0 14px 34px #1f609b17}.speech small{font-size:19px;line-height:1.6;margin-top:12px}.speech em{text-decoration-thickness:8px;text-underline-offset:-3px}
.questionCard{border-radius:34px;border:2px solid #2985d4;box-shadow:0 12px 28px #1b5e9d12}.qhead{min-height:84px;grid-template-columns:78px 1fr}.qhead span{font-size:48px}.qhead b{padding:16px 20px;font-size:23px;line-height:1.45}
.voiceBox{margin:0 14px 14px;border-radius:26px;padding:20px;grid-template-columns:116px 1fr;gap:14px}.mic{width:96px;height:96px;border-width:13px;font-size:40px}.voiceBox b{font-size:19px}.voiceBox small{font-size:13px;line-height:1.5}.voiceBox textarea{min-height:76px;font-size:17px;border-radius:14px}
.finishBtn{padding:17px 58px;font-size:25px;box-shadow:0 8px 22px #0a5fac24,inset 0 -4px 0 #0751a1}.finishBtn span{font-size:28px}
.reviewStage{min-height:calc(100% - 94px);grid-template-columns:40% 60%;background:linear-gradient(135deg,#d9f1fd,#f9fdff)}.reviewMascot .agenMascot{height:78%;align-self:end}.reviewCard{margin:38px 30px 38px 0;border-radius:34px;padding:32px}.reviewCard h1{font-size:38px}
.childJoin{background:linear-gradient(135deg,#d9f2ff,#f8fcff)}.joinPanel{width:min(86vw,720px);border-radius:34px}.joinMascot{height:390px}.joinMascot .agenMascot{height:470px}
@media(max-width:820px){
  .childShell{width:100%;aspect-ratio:3/4;min-height:100svh;box-shadow:none}
  .childTop{height:82px;grid-template-columns:190px 1fr 95px 46px;padding:0 14px;gap:8px}.childTop .brandType b{font-size:21px}.childTop .brandMark{transform:scale(.75)}
  .phase>b{font-size:14px;padding:8px 14px}.dots i{width:14px;height:14px;border-width:3px;margin-right:10px}.dots i:not(:last-child):after{width:14px;height:3px;left:10px;top:2px}.questionCount{font-size:15px}.questionCount b{font-size:28px}.questionCount span{font-size:15px}.hamb{width:40px;height:40px;font-size:18px}
  .doctorStage{height:calc(100% - 82px);grid-template-columns:40% 60%}.mascotPane .agenMascot{height:78%}.dialogPane{padding:35px 18px 28px 6px;gap:14px}.speech{font-size:23px;padding:22px 24px;border-radius:34px 34px 34px 7px}.speech small{font-size:15px}.questionCard{border-radius:27px}.qhead{min-height:70px;grid-template-columns:64px 1fr}.qhead span{font-size:40px}.qhead b{font-size:18px;padding:13px 15px}.voiceBox{grid-template-columns:86px 1fr;padding:14px;margin:0 10px 10px}.mic{width:72px;height:72px;border-width:10px;font-size:30px}.voiceBox b{font-size:16px}.voiceBox small{font-size:11px}.voiceBox textarea{min-height:60px;font-size:15px}.finishBtn{font-size:20px;padding:14px 38px}
}
@media(max-width:560px){
  .childShell{aspect-ratio:auto;min-height:100svh;overflow:auto}.childTop{position:sticky;top:0;z-index:5;grid-template-columns:1fr 75px 42px}.childTop .phase{display:none}.doctorStage{height:auto;min-height:calc(100svh - 82px);grid-template-columns:1fr;grid-template-rows:43svh auto}.doctorStage:before{display:none}.mascotPane{padding-top:8px}.mascotPane .agenMascot{height:105%;transform:translateY(8%)}.dialogPane{padding:14px 16px 26px;gap:14px}.speech{font-size:21px;padding:20px 22px}.speech small{font-size:14px}.questionCard{border-radius:24px}.qhead b{font-size:17px}.finishBtn{width:100%;font-size:20px}.labIcons span:nth-child(4){right:9%;top:40%}.reviewStage{grid-template-columns:1fr}.reviewMascot{height:34svh}.reviewMascot .agenMascot{height:118%}.reviewCard{margin:0 14px 24px;padding:22px}.reviewCard h1{font-size:30px}
}