:root{font-family:Inter,"SF Pro Display","Microsoft YaHei",system-ui,sans-serif;color:#17365d;background:#f9fcff}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse 48% 34% at 88% 7%,#dceeff 0,transparent 78%),radial-gradient(ellipse 45% 32% at 8% 65%,#e9f7ff 0,transparent 75%),#f9fcff;min-height:100vh}
.topbar{background:#ffffffdb;backdrop-filter:blur(18px);border-color:#dceafa;box-shadow:0 4px 28px #4d9ed40d;min-height:80px;padding-left:max(24px,calc((100vw - 1200px)/2));padding-right:max(24px,calc((100vw - 1200px)/2))}
.brand-logo{width:44px;height:44px;border-radius:12px;box-shadow:0 7px 22px #3f9ee92e}.brand strong{font-size:19px;color:#14345d;letter-spacing:0}
.nav{color:#6d8baa;border-radius:12px;font-size:14px;font-weight:650;padding:11px 14px}.nav:hover,.nav.active{background:#eaf5ff;color:#1675cc}
main{max-width:1200px;padding-top:35px}.view.active{animation:pageIn .38s both}@keyframes pageIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.home-hero{text-align:center;padding:47px 0 23px}.eyebrow{color:#368cda;letter-spacing:.18em;font-weight:800}.home-hero .eyebrow{font-size:12px;letter-spacing:.2em}.home-hero h1{font-size:clamp(38px,5.7vw,69px);line-height:1.17;letter-spacing:-.045em;font-weight:800;margin:18px 0 18px;color:#102e54}.home-hero h1 span{background:linear-gradient(110deg,#2289e8,#35afd1);background-clip:text;-webkit-text-fill-color:transparent}.home-hero p{font-size:15px;color:#6a86a4;line-height:1.8;margin:0}
.home-account{width:min(800px,100%);margin:22px auto 24px;background:#ffffffeb;border:1px solid #dbeaf9;border-radius:18px;box-shadow:0 12px 35px #4d9ed419;padding:15px 19px;display:flex;align-items:center;gap:22px}.home-account[hidden]{display:none}.home-account>div:first-child{min-width:172px}.home-account b,.home-account small{display:block}.home-account b{color:#1c5083;font-size:15px}.home-account small{color:#8aa4bd;font-size:12px;margin-top:3px}.home-account #studentLoginForm{display:flex;align-items:center;gap:8px;flex:1}.home-account input{border:1px solid #d7e6f4;background:#fbfdff;border-radius:10px;padding:10px 12px;min-width:0;width:100%;font-size:13px}.home-account form button{white-space:nowrap}.home-account.welcome{max-width:520px;justify-content:center;gap:12px}.welcome-dot{width:9px;height:9px;border-radius:50%;background:#47cfa9;box-shadow:0 0 0 5px #e2faf3}.home-account.welcome strong{font-size:14px;color:#23669d}
.journey{position:relative;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.journey:before{content:"";position:absolute;left:15%;right:15%;height:2px;top:112px;background:linear-gradient(90deg,#87bffc,#b5d9f8,#87bffc);z-index:0}.path-stage{position:relative;z-index:1;min-height:314px;text-align:center;border:1px solid #dfecfa;background:#fffffff2;border-radius:25px;padding:31px 26px 25px;box-shadow:0 15px 45px #3481c014;transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .36s,border-color .36s;overflow:hidden;color:#17365d}.path-stage:hover,.path-stage:focus-visible{transform:translateY(-8px);box-shadow:0 26px 55px #3481c02b;border-color:#a3d1f8;outline:none}.path-stage.active{border-color:#63b5f5;box-shadow:0 24px 60px #3481c02b}.stage-number{display:inline-flex;align-items:center;gap:8px;color:#498cca;font-weight:800;font-size:12px;letter-spacing:.11em}.stage-number:before{content:"";width:7px;height:7px;border-radius:50%;background:#5daeea}.illustration{width:158px;height:158px;display:grid;place-items:center;margin:13px auto 15px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff,#e7f4ff 63%,#cfe8ff);box-shadow:inset 0 1px 0 #fff,0 13px 27px #9acbf337;position:relative;transition:transform .4s}.path-stage:hover .illustration,.path-stage.active .illustration{transform:scale(1.055)}.path-stage>strong{display:block;color:#173c68;font-size:23px}.path-stage>small{display:block;font-size:13px;color:#8aa4be;margin:10px 0 0}.stage-arrow{position:absolute;right:22px;bottom:18px;color:#65a7e5;font-size:22px;transition:transform .3s}.path-stage:hover .stage-arrow,.path-stage.active .stage-arrow{transform:translateX(4px)}
.book{width:92px;height:68px;position:relative;filter:drop-shadow(0 8px 8px #519fd441)}.book i{position:absolute;top:6px;width:45px;height:58px;background:#fff;border:4px solid #2588da}.book i:first-child{left:2px;border-radius:5px 4px 3px 13px;transform:skewY(-7deg);transform-origin:right bottom}.book i:nth-child(2){right:2px;border-radius:4px 5px 13px 3px;transform:skewY(7deg);transform-origin:left bottom}.book:after{content:"";position:absolute;left:45px;top:8px;width:3px;height:58px;background:#2588da}.book b{position:absolute;left:14px;top:21px;width:24px;height:3px;background:#9bd0f3;box-shadow:0 11px #9bd0f3,0 22px #9bd0f3}.path-stage.active .book i:first-child{animation:openBook .75s ease}.path-stage.active .book i:nth-child(2){animation:openBookRight .75s ease}@keyframes openBook{50%{transform:skewY(-7deg) rotateY(26deg)}100%{transform:skewY(-7deg)}}@keyframes openBookRight{50%{transform:skewY(7deg) rotateY(-26deg)}100%{transform:skewY(7deg)}}
.papers{position:relative;width:95px;height:92px}.papers i{position:absolute;width:65px;height:82px;border-radius:9px;background:#fff;border:3px solid #4c9dde;box-shadow:0 8px 17px #5babe43c;left:15px;top:5px}.papers i:first-child{transform:rotate(-14deg);background:#cbeafe}.papers i:nth-child(2){transform:rotate(10deg);background:#ebf7ff}.papers i:nth-child(3){display:flex;align-items:center;justify-content:center;font-style:normal;font-size:34px;font-weight:800;color:#2889d8}.path-stage.active .papers i:first-child{animation:fanLeft .65s ease}.path-stage.active .papers i:nth-child(2){animation:fanRight .65s ease}@keyframes fanLeft{50%{transform:rotate(-28deg) translateX(-12px)}}@keyframes fanRight{50%{transform:rotate(25deg) translateX(10px)}}
.chart-icon{width:104px;height:90px;display:flex;align-items:end;justify-content:center;gap:8px;border-bottom:3px solid #5da6df;position:relative}.chart-icon i{width:17px;border-radius:5px 5px 0 0;background:linear-gradient(#6fc8f0,#348fe0);height:35px;transform-origin:bottom}.chart-icon i:nth-child(2){height:58px}.chart-icon i:nth-child(3){height:76px}.chart-icon b{position:absolute;right:-4px;top:-2px;width:19px;height:19px;border-radius:50%;background:#1267bd;border:4px solid white;box-shadow:0 3px 8px #4c9ddd77}.path-stage.active .chart-icon i{animation:rise .75s both}.path-stage.active .chart-icon i:nth-child(2){animation-delay:.08s}.path-stage.active .chart-icon i:nth-child(3){animation-delay:.16s}.path-stage.active .chart-icon b{animation:pop .7s .3s both}@keyframes rise{from{transform:scaleY(.2)}to{transform:scaleY(1)}}@keyframes pop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.path-detail{margin:24px auto 0;max-width:990px;min-height:150px;border:1px solid #cfe6f9;border-radius:22px;background:linear-gradient(115deg,#fff,#eff8ff);padding:26px 34px;display:flex;align-items:center;gap:28px;box-shadow:0 12px 34px #4e9bce17;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}.path-detail.show{opacity:1;transform:translateY(0)}.path-detail-number{width:65px;height:65px;flex:none;border-radius:17px;background:#d9efff;color:#227fd1;display:grid;place-items:center;font-size:28px;font-weight:800}.path-detail-copy{flex:1}.path-detail-copy>span{font-size:11px;letter-spacing:.17em;font-weight:800;color:#6da3d1}.path-detail h2{font-size:22px;margin:6px 0;color:#163c69}.path-detail p{color:#6e89a4;font-size:14px;line-height:1.65;margin:0}.path-detail button{flex:none;white-space:nowrap}
.home-overview{max-width:990px;margin:20px auto 50px;padding:0 6px}.home-overview>summary{color:#7d9bb7;text-align:center;cursor:pointer;font-size:13px;list-style:none;padding:14px}.home-overview>summary:after{content:"⌄";margin-left:8px}.home-overview[open]>summary:after{content:"⌃"}.home-overview .card,.home-overview .metric{background:#ffffffd9}.home-overview .metrics{margin-top:8px}
.primary{background:linear-gradient(115deg,#2388e8,#36a8e0);box-shadow:0 7px 18px #278bdb27;color:#fff;border-radius:11px}.primary:hover{background:linear-gradient(115deg,#1477d8,#259ad2)}.secondary{border-color:#cde4f7;border-radius:11px;color:#1f72bc}.secondary:hover{background:#edf7ff}.card,.metric,.question,.exam-toolbar{border-color:#dceaf8;box-shadow:0 11px 34px #488fc515;border-radius:19px}.card{padding:28px}.section-head{margin-bottom:27px}.section-head h1{color:#153b66;font-size:34px}.section-head p,.card p{color:#718da8}.module-item{border-color:#dcebf7;background:#f6fbff;border-radius:12px}.module-item strong{color:#227bc4}.option{border-color:#dce9f6}.option:hover{border-color:#91c9f3;background:#f6fbff}.text-button{color:#1779d1}.admin-tab{border-color:#cde2f5;color:#447dac;border-radius:12px}.admin-tab.active{background:#2285dc;border-color:#2285dc}.focus-area iframe{border-color:#dceaf8;border-radius:18px}.exam-progress span{background:#3d9be7}.result-track{box-shadow:inset 0 1px 3px #0001}#toast{background:#15436d}
footer{color:#9bb0c4}
@media(max-width:850px){.topbar{padding:13px 18px;display:block}.brand{justify-content:center}nav{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}.nav{flex:none}.home-hero{padding-top:25px}.journey{grid-template-columns:1fr;gap:14px}.journey:before{display:none}.path-stage{min-height:178px;display:grid;grid-template-columns:115px 1fr;grid-template-rows:33px 48px 32px;text-align:left;padding:18px 24px}.stage-number{grid-column:2;grid-row:1}.path-stage .illustration{grid-column:1;grid-row:1/4;width:100px;height:100px;margin:7px 8px 0 0;transform:scale(.7);transform-origin:left center}.path-stage:hover .illustration,.path-stage.active .illustration{transform:scale(.74)}.path-stage>strong{grid-column:2;grid-row:2;align-self:center}.path-stage>small{grid-column:2;grid-row:3;margin:0}.stage-arrow{bottom:17px}.home-account{display:block}.home-account>div:first-child{margin-bottom:12px}.path-detail{padding:24px;flex-wrap:wrap}.path-detail-number{display:none}.path-detail button{width:100%}}
@media(max-width:560px){.home-hero h1{font-size:42px}.home-account #studentLoginForm{display:grid;grid-template-columns:1fr 1fr}.home-account form button{grid-column:1/3}.path-stage{grid-template-columns:95px 1fr;padding:15px}.path-stage>strong{font-size:20px}.path-stage .illustration{margin-left:-8px}.path-detail h2{font-size:19px}.section-head h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.admin-password-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:14px}.admin-password-form label{display:grid;gap:7px;color:#577491;font-size:13px;font-weight:650}.admin-password-form input{width:100%;min-width:0;padding:11px 12px;border:1px solid #d5e5f3;border-radius:10px;background:#fbfdff}.admin-password-form button{white-space:nowrap}
@media(max-width:850px){.admin-password-form{grid-template-columns:1fr 1fr}.admin-password-form button{grid-column:1/3}}
@media(max-width:560px){.admin-password-form{grid-template-columns:1fr}.admin-password-form button{grid-column:1}}

/* Keep each page inside a narrow phone viewport while rich source documents scroll locally. */
main,.view,.card,.question,.exam-shell,.exam-result,.path-detail,.path-detail-copy,.section-head>div{min-width:0;max-width:100%}
.q-stem,.explanation,.option,.path-detail-copy,.result-module-title,.history-row{overflow-wrap:anywhere}
.q-stem,.explanation,.option{min-width:0;overflow-x:auto}
.q-stem img,.explanation img,.option img,.q-stem svg,.explanation svg,.option svg{max-width:100%;height:auto}
.q-stem table,.explanation table,.option table{max-width:none}
.upload-row input[type=file],.upload-row select,.stack-form input,.stack-form select,.inline-form input{min-width:0;max-width:100%}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.home-account.welcome{flex-wrap:wrap;text-align:center}
@media(max-width:750px){
  .topbar{max-width:100%;overflow:hidden}
  .topbar nav{max-width:100%;padding-bottom:3px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .section-head{flex-wrap:wrap;align-items:flex-start}
  .section-head select{max-width:100%;min-width:170px}
  .exam-start{align-items:stretch}
  .exam-start>span{width:100%}
  .history-row{flex-wrap:wrap}
  .history-row button{max-width:100%}
  .focus-area iframe{height:calc(100dvh - 180px);min-height:420px}
}
@media(max-width:560px){
  .topbar{padding:10px 12px}
  .topbar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:9px;overflow:visible;padding:0}
  .topbar .nav{min-width:0;padding:9px 3px;font-size:13px;white-space:normal;text-align:center}
  main{padding:20px 14px 55px}
  .card,.question{padding:18px}
  .home-hero h1{font-size:clamp(31px,9vw,42px)}
  .home-hero p{font-size:14px}
  .home-account{padding:16px}
  .home-account #studentLoginForm{grid-template-columns:minmax(0,1fr)}
  .home-account form button{grid-column:1}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .section-head select{width:100%;min-height:44px}
  .pagination{gap:8px;flex-wrap:wrap}
  .pagination button{min-height:42px}
  .exam-start button{width:100%}
  .exam-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .exam-toolbar strong,.exam-toolbar span{grid-column:1/-1}
  .exam-toolbar button{min-width:0;white-space:nowrap}
  .exam-question-head{gap:12px}
  .exam-navigation button{min-width:0;flex:1}
  .exam-grid-panel{padding:17px}
  .exam-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .result-module-title{font-size:14px}
  .student-list-head select{max-width:100%}
  .upload-row>*{width:100%}
  .login input{min-width:0;width:100%}
  .login form button{width:100%}
  input,select,textarea{font-size:16px}
}
@media(max-width:360px){
  .path-stage{grid-template-columns:78px minmax(0,1fr);padding:12px}
  .path-stage .illustration{transform:scale(.58);margin-left:-9px}
  .path-stage:hover .illustration,.path-stage.active .illustration{transform:scale(.61)}
  .path-stage>strong{font-size:18px}
  .exam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Reading widths: preserve generous side space on desktop and wide tablets. */
main{width:100%;max-width:1200px}
#home{max-width:1100px;margin-inline:auto}
#home .journey{max-width:1000px;margin-inline:auto}
#practice{max-width:920px;margin-inline:auto}
#focus{max-width:1080px;margin-inline:auto}
#exam{max-width:900px;margin-inline:auto}
#admin{max-width:1120px;margin-inline:auto}
.exam-shell{max-width:850px}
.exam-result{max-width:800px}
.exam-result .result-modules{max-width:680px;margin:24px auto}
.exam-start{max-width:800px;margin-inline:auto}
@media(max-width:850px){
  #home .journey{max-width:680px}
  #home .path-detail{max-width:680px}
  #home .home-overview{max-width:680px}
}
.home-account:not(.welcome){width:min(960px,100%)}
.home-account #studentLoginForm{min-width:0}
.home-account #studentLoginForm input{flex:1 1 165px}
.home-account #studentLoginForm button{padding-inline:15px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:850px){.home-account #studentLoginForm{flex-wrap:wrap}}
@media(max-width:560px){.home-account #studentLoginForm button{width:100%}}