:root{--blue:#3d57df;--ink:#202b3c;--muted:#7f90a9;--border:#dfe6f0;--pale:#edf1ff;--green:#10b985}*{box-sizing:border-box}body{margin:0;background:#f4f6fb;color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,input{font:inherit}button,a{cursor:pointer}button{border:0;background:none;color:inherit}a{color:var(--blue);text-decoration:none;font-weight:600}button:focus-visible,a:focus-visible{outline:3px solid #99aaf7;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:32px;line-height:1.4}h2{font-size:25px}h3{font-size:17px}p{color:#718199}small{font-size:14px}.brand{display:flex;align-items:center;gap:18px;font-size:24px;font-weight:750}.mark{display:grid;place-items:center;width:64px;height:64px;border-radius:17px;background:var(--blue);color:white;font-size:37px;line-height:1}.brand small{display:block;font-size:14px;font-weight:500;color:#b4c3f8}.auth{display:grid;grid-template-columns:44.6% 55.4%;max-width:1340px;margin:24px auto 0;background:white;border-radius:34px;overflow:hidden;min-height:940px;box-shadow:0 15px 40px #273b7210}.auth aside{padding:72px;background:var(--blue);color:white;display:flex;flex-direction:column}.auth aside .mark{background:white;color:var(--blue);width:72px;height:72px}.pitch{margin-top:84px}.pitch h2{font-size:30px;line-height:1.9}.pitch p{color:#d8e0ff;line-height:1.55;margin-top:18px}.features{display:grid;gap:26px;margin-top:86px}.feature{display:flex;align-items:center;gap:18px;font-weight:600}.feature i{font-style:normal;background:#ffffff16;padding:12px;border-radius:13px;font-size:23px;min-width:52px;text-align:center}.secure{margin-top:auto;padding-top:72px;color:#b8c8ff;font-size:14px}.auth main{padding:80px 82px}.subtitle{margin-top:12px}.tabs{display:flex;background:#f0f3f8;border-radius:15px;padding:6px;margin:36px 0}.tabs button{flex:1;padding:13px;border-radius:11px;font-weight:650;color:#758396}.tabs .active{color:var(--blue);background:white;box-shadow:0 4px 9px #334b7710}label.field{display:block;font-weight:600;margin:24px 0}.input{display:flex;align-items:center;border:1px solid var(--border);border-radius:15px;height:70px;margin-top:10px;padding:0 24px;gap:18px;color:#93a3b9;background:white}.input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #3d57df10}.input input{border:0;outline:0;width:100%;min-width:0;color:var(--ink);background:transparent}.input input::placeholder{color:#97a6bb}.input button{padding:0;color:#93a3b9}.row{display:flex;align-items:center;justify-content:space-between;gap:18px}.check{display:flex;align-items:center;gap:10px;font-weight:400;font-size:15px}.check input{accent-color:var(--blue);width:23px;height:23px}.primary,.secondary{padding:18px 30px;border-radius:14px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:14px}.primary{background:var(--blue);color:white}.primary:hover{background:#3049cb}.secondary{background:white;border:1px solid var(--border);color:#718199}.wide{width:100%;margin-top:25px}.divider{display:flex;gap:18px;align-items:center;color:#9aa8ba;font-size:14px;margin:27px 0}.divider:before,.divider:after{content:"";height:1px;flex:1;background:var(--border)}.alternates{display:flex;gap:20px}.alternates button{flex:1;padding:20px 12px;color:#4c5b6e}.bottom{text-align:center;margin-top:24px;color:#8190a5}.foot{max-width:1340px;margin:38px auto;display:flex;justify-content:space-between;color:#92a1b7;font-size:14px}.foot button{color:inherit}.register{max-width:1420px;margin:0 auto;border-radius:0;grid-template-columns:39.5% 60.5%;min-height:1060px;box-shadow:none}.register aside{background:#202c63;padding:72px 30px 45px}.register aside .mark{background:var(--blue);color:white}.register main{padding:75px 80px 50px}.register h1{font-size:36px}.register .steps-list{margin-top:auto;display:grid;gap:26px;padding-bottom:180px}.steps-list div{display:flex;align-items:center;gap:20px;font-weight:650;color:#bcc9ef}.steps-list b{display:grid;place-items:center;background:#3c4a82;width:44px;height:44px;border-radius:50%}.steps-list .active{color:white}.steps-list .active b{background:var(--blue)}.register .secure{padding-top:0;margin-top:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}.grid2 .field{margin-bottom:0}.strength{display:flex;gap:18px;align-items:center;margin-top:-9px;color:var(--green);font-size:14px}.strength i{height:9px;flex:1;border-radius:8px;background:#e0e6ef}.strength i.on{background:var(--green)}.code{display:grid;grid-template-columns:1fr auto;gap:22px}.code .secondary{margin-top:10px;color:var(--blue);border-color:var(--blue);background:var(--pale)}header{height:110px;background:white;padding:0 max(5%,calc((100% - 1320px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px}header .brand{font-size:20px}header .mark{width:55px;height:55px;border-radius:14px;font-size:32px}.stepper{display:flex;align-items:center;gap:17px;font-size:14px;font-weight:650;color:#94a3ba}.stepper .step{display:flex;align-items:center;gap:11px}.stepper b{width:38px;height:38px;border-radius:50%;background:#e2e8f1;display:grid;place-items:center}.stepper .active{color:var(--blue)}.stepper .active b{background:var(--blue);color:white}.stepper .done{color:var(--green)}.stepper .done b{background:var(--green);color:white}.stepper hr{width:66px;border:0;background:var(--border);height:2px}.exit{color:#94a3ba;font-size:14px}.workspace{max-width:1320px;margin:52px auto;padding:0 25px}.workspace>p{margin-top:10px}.columns{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:30px;margin-top:42px}.card{background:white;border-radius:24px;padding:40px;box-shadow:0 8px 22px #25396304}.section+.section{margin-top:36px}.section h3{display:flex;align-items:center;gap:12px;margin-bottom:20px}.iconbox{display:inline-grid;place-items:center;width:34px;height:34px;color:var(--blue);background:var(--pale);border-radius:10px}.choices{display:flex;gap:16px;flex-wrap:wrap}.choice{border:1px solid var(--border);padding:18px 25px;border-radius:14px;font-weight:600;background:white;color:#536177}.choice.active{border-color:#5369ff;background:var(--pale);color:var(--blue)}.gender .choice{min-width:180px;display:flex;gap:22px;align-items:center}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grades .choice{padding:16px 8px;font-size:14px}.score{display:flex;gap:20px;align-items:center}.score .input{max-width:210px;margin:0}.score input{font-size:25px;font-weight:700}.note{background:#f7f9fc;border:1px solid var(--border);padding:22px;border-radius:14px;color:#76859b;font-size:14px}.warning{padding:17px 20px;background:#fff6eb;border:1px solid #ffe0b6;border-radius:13px;color:#be6415;font-size:14px;margin-top:16px}.goals{gap:12px}.goals .choice{border-radius:40px;padding:14px 19px;font-size:14px}.aside-card{padding:32px}.aside-card ul{padding:0;list-style:none;color:#708099;font-size:14px}.aside-card li{position:relative;padding-left:26px;margin-top:28px;line-height:1.5}.aside-card li:before{content:'✓';color:var(--green);position:absolute;left:0}.privacy{margin-top:25px;background:var(--pale);color:#2d3f87;box-shadow:none}.privacy p{color:#5969a3;font-size:14px;margin-top:24px}.actions{display:flex;justify-content:space-between;margin-top:40px}.survey{max-width:930px}.survey .card{margin-top:24px;padding:32px}.progress-card{display:flex;align-items:center;gap:25px}.progress-card strong{display:block;color:var(--blue);font-size:22px}.progress-track{height:13px;background:var(--pale);flex:1;border-radius:20px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--blue);width:37.5%;border-radius:20px}.time{color:#92a1b9;font-size:14px}.tag{padding:7px 12px;color:var(--blue);background:var(--pale);border-radius:8px;font-size:14px;font-weight:650;margin-right:12px;display:inline-block}.question-title{font-size:16px;margin:23px 0 18px}.answers{display:grid;gap:12px}.answer{text-align:left;display:flex;align-items:center;gap:14px;padding:17px 20px}.radio{width:22px;height:22px;border:1px solid #cad5e5;border-radius:50%;flex:none}.active .radio{border:7px solid var(--blue)}.emotions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.emotion{display:grid;gap:8px;text-align:center;font-size:14px}.emotion span{font-size:24px}.slider{width:100%;accent-color:var(--blue)}.range-labels{display:flex;justify-content:space-between;color:#97a5bb;font-size:12px;margin-top:10px}.range-labels .active{color:var(--blue);font-weight:600}.intro .columns{margin-top:0}.intro-main{padding:45px}.intro-title{display:flex;align-items:center;gap:20px;margin-bottom:28px}.intro-title .iconbox{width:72px;height:72px;font-size:35px;border-radius:20px}.intro-title p{font-size:14px}.intro-feature{display:flex;align-items:center;gap:20px;background:#f7f9fb;padding:24px;border-radius:17px;margin-top:18px}.intro-feature .iconbox{background:white;width:48px;height:48px;font-size:25px;flex:none}.intro-feature h3{font-size:15px}.intro-feature p{font-size:14px;margin-top:5px}.intro-main .warning{margin-top:34px}.intro-main .buttons{display:flex;gap:18px;margin-top:34px}.modules{display:grid;gap:17px;margin-top:28px;font-size:14px}.modules div{display:flex;align-items:center;gap:10px}.modules b{margin-left:auto}.dot{width:13px;height:13px;border-radius:50%}.intro aside h3{font-size:16px}#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#23304c;color:white;padding:14px 24px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:10;max-width:90%;box-shadow:0 8px 30px #17264230}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:0;border-radius:22px;padding:32px;max-width:450px;box-shadow:0 20px 80px #15204430}dialog::backdrop{background:#15204466}dialog p{margin:18px 0}.demo-link{font-size:13px;font-weight:400}.error{color:#d34141;font-size:14px;margin-top:12px}
@media(min-width:1500px){.auth{margin-top:30px}}@media(max-width:1100px){.auth{margin:20px;min-height:850px}.auth aside{padding:45px}.auth main{padding:50px 40px}.register{margin:0}.register aside{padding:50px 28px}.columns{grid-template-columns:minmax(0,1fr) 280px}.card{padding:28px}.grades{grid-template-columns:repeat(4,1fr)}.stepper hr{width:30px}.foot{margin:30px}.goals .choice{padding:12px}}@media(max-width:760px){body{font-size:15px}.auth{display:block;margin:15px;border-radius:22px;min-height:0}.auth aside{padding:25px}.auth .pitch,.auth .features,.auth .secure,.steps-list{display:none!important}.auth aside .mark{width:48px;height:48px;font-size:28px}.auth .brand{font-size:21px}.auth main,.register main{padding:30px 23px}.auth h1,.register h1{font-size:28px}.input{height:60px;padding:0 17px}.grid2{gap:16px}.register{margin:0;border-radius:0}.register aside{padding:20px}.foot{display:block;font-size:12px}.foot>div{margin-top:12px}header{height:auto;padding:18px 20px;gap:15px;flex-wrap:wrap}header .brand{font-size:17px}header .mark{width:40px;height:40px;font-size:25px}.stepper{order:3;width:100%;justify-content:center;gap:8px;font-size:12px}.stepper b{width:28px;height:28px}.stepper .step{gap:6px}.stepper hr{width:25px}.workspace{padding:0 18px;margin:30px auto}.workspace h1{font-size:26px}.columns{display:block;margin-top:25px}.columns aside{margin-top:22px}.card{padding:24px;border-radius:19px}.aside-card{padding:24px}.gender .choice{min-width:0;flex:1}.choices{gap:10px}.choice{padding:15px 18px}.score{gap:12px}.score .input{max-width:150px}.note{padding:13px;font-size:12px}.actions{gap:12px;margin-top:26px}.primary,.secondary{padding:15px 18px;font-size:14px}.survey .card{padding:23px}.progress-card{gap:15px}.time{display:none}.emotions{gap:8px}.emotion{padding:13px 8px}.intro-main{padding:24px}.intro-feature{padding:20px 16px;gap:14px}.intro-title h1{font-size:25px}.intro-title .iconbox{width:55px;height:55px;flex:none}.code{gap:12px}.code .secondary{padding:12px}.check{font-size:13px}.alternates{gap:12px}.section+.section{margin-top:28px}}

/* Psychological Assessment 18-Question 6-Dimension Styles */
.dim-pills-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.dim-pill-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dim-pill-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.dim-pill-btn.active {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}
.dim-pill-name {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dim-pill-sub {
  font-size: 11px;
  color: #64748b;
}
.dim-pill-btn.active .dim-pill-sub {
  color: #2563eb;
}
.dim-pill-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 9999px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 600;
}
.dim-pill-badge.complete {
  background: #dcfce7;
  color: #15803d;
}
.dim-hero-card {
  margin-top: 20px;
  background: linear-gradient(135deg, #f0f7ff, #ffffff);
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dhc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dhc-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.1);
}
.dhc-text strong {
  font-size: 15px;
  color: #1e3a8a;
  display: block;
}
.dhc-text p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #64748b;
}
@media (max-width: 900px) {
  .dim-pills-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .dim-pills-row {
    grid-template-columns: repeat(2, 1fr);
  }
}