body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1d2b45;min-height:100vh;background:radial-gradient(circle at top left, rgba(255,255,255,.08), transparent 22%),radial-gradient(circle at bottom right, rgba(212,175,55,.10), transparent 20%),linear-gradient(145deg,#071b52 0%, #0b2d7a 45%, #123f9c 100%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);background-size:40px 40px;opacity:.35}
*{box-sizing:border-box}.app-shell{max-width:1100px;margin:0 auto;padding:18px}.screen{display:none}.screen.active{display:block}
.glass{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:0 22px 60px rgba(3,15,49,.28);backdrop-filter:blur(10px)}
.hero-card{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:24px}
.brand-header{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px}
.verico-logo{width:220px;max-width:82%;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.18)) brightness(1.04);opacity:.96}
.brand-pill{display:inline-block;padding:10px 18px;border-radius:999px;background:linear-gradient(90deg,#082471,#123f9c);color:#fff;font-size:12px;font-weight:700;letter-spacing:.09em}
h1{font-size:42px;margin:16px 0 12px}.lead{font-size:18px;line-height:1.65;color:#64748b}.small-lead{font-size:16px}
.feature-row,.student-form,.nav-row{display:flex;gap:12px;flex-wrap:wrap}.feature-row{margin:20px 0}
.feature-chip,.mode-card,.mascot-card,.result-panel,.insight-panel{background:#fff;border:1px solid #dde7f5;border-radius:18px;box-shadow:0 12px 30px rgba(8,36,113,.08)}.feature-chip{padding:14px 16px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.mode-card{border:none;padding:18px;text-align:left;cursor:pointer}.mode-card.active{outline:2px solid #082471}
.mode-icon{display:block;font-size:30px;margin-bottom:10px}.mode-title{display:block;font-size:18px;font-weight:700}.mode-desc{display:block;margin-top:4px;color:#64748b;font-size:13px}
.text-input{flex:1 1 220px;padding:14px 16px;border-radius:16px;border:1px solid #dbe5f4;font-size:16px}
.primary-btn,.secondary-btn{border:none;cursor:pointer;font-weight:700;font-size:16px}.primary-btn{padding:15px 22px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#082471,#123f9c);box-shadow:0 16px 34px rgba(8,36,113,.24)}.primary-btn:disabled{opacity:.45}.secondary-btn{padding:15px 20px;border-radius:16px;background:#fff;color:#082471;border:1px solid #dbe5f4}
.hero-right{display:flex}.mascot-card{text-align:center;width:100%;padding:20px}.mascot-face{width:128px;height:128px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:58px;margin:0 auto 14px}.mascot-badge{font-size:22px;font-weight:700}
.top-status{padding:18px 22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:14px}.status-center{text-align:center}.mini-label{font-size:12px;letter-spacing:.08em;color:#64748b;text-transform:uppercase}.progress-title{font-size:21px;font-weight:700;margin-top:6px}.star-count{font-size:28px;font-weight:700;margin-top:4px}
.journey-track{height:20px;border-radius:999px;overflow:hidden;margin-bottom:14px;background:#edf2fa}.journey-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd75e,#ffbe4b,#ff98bc);transition:width .35s ease}
.question-card{padding:26px}.question-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.question-type{padding:9px 14px;border-radius:999px;background:#eef4ff;color:#082471;font-size:12px;font-weight:700}.question-aspect{font-size:20px;font-weight:700}.question-illustration{text-align:center}.question-emoji{font-size:82px}.question-text{font-size:34px;line-height:1.22;margin:16px 0 20px;text-align:center}
.answers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.answer-btn{border:none;border-radius:18px;padding:18px 16px;min-height:140px;text-align:center;cursor:pointer;transition:all .18s ease}.answer-btn:hover{transform:translateY(-2px)}.answer-btn.selected{outline:2px solid #082471}.answer-btn.done{background:linear-gradient(180deg,#eef6ff,#dfeaff)}.answer-btn.partial{background:linear-gradient(180deg,#f7f8fb,#eceff5)}.answer-btn.notyet{background:linear-gradient(180deg,#fff4f4,#ffe2e2)}.answer-btn .emoji{display:block;font-size:34px;margin-bottom:10px}.answer-btn .title{display:block;font-size:20px;font-weight:700}
.nav-row{justify-content:space-between;margin-top:20px}.nav-row.center{justify-content:center}.result-card{padding:28px}.result-top{text-align:center}.result-badge{display:inline-block;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,#ffd65f,#ffb7d4);font-weight:700}.result-stars{text-align:center;margin:18px 0}.final-stars{font-size:40px;font-weight:700}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.result-panel,.insight-panel{padding:14px 16px}.aspect-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #dbe5f4}.aspect-row:last-child{border-bottom:none}.aspect-name{font-weight:700}.aspect-note{font-size:13px;color:#64748b;margin-top:4px}
.badge{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}.badge.high{background:#daf5e5;color:#10653c}.badge.mid{background:#ffefc6;color:#8a5b00}.badge.low{background:#ffdede;color:#a92b2b}
.emotional-box{padding:24px;border-radius:18px;text-align:center;color:#fff;font-weight:700;margin:18px 0 24px;box-shadow:0 12px 28px rgba(0,0,0,.12)}.emotional-box.green{background:linear-gradient(135deg,#218c5a,#2ecc71)}.emotional-box.yellow{background:linear-gradient(135deg,#d9a514,#f1c40f);color:#2d2d2d}.emotional-box.red{background:linear-gradient(135deg,#b02a2a,#e74c3c)}.signal-title{font-size:15px;letter-spacing:.08em;text-transform:uppercase;opacity:.95}.signal-label{font-size:30px;font-weight:800;margin-top:8px}
.music-toggle{position:fixed;top:16px;right:16px;z-index:999;background:#fff;border:1px solid #dbe5f4;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.12)}
@media (max-width:980px){.hero-card,.result-grid{grid-template-columns:1fr}h1{font-size:38px}}
@media (max-width:760px){.mode-grid,.answers-grid,.top-status{grid-template-columns:1fr}.question-text{font-size:28px}.top-status{text-align:center}}