:root{--bg-deep: #0a0a1a;--bg-gradient: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #2a0a3a 100%);--gold: #ffd700;--magic-blue: #4facfe;--magic-purple: #9b4dff;--accent: #ff4d4d;--glass: rgba(255, 255, 255, .08);--glass-border: rgba(255, 255, 255, .15)}.app-container{min-height:100vh;background:var(--bg-gradient);color:#fff;font-family:PingFang SC,Microsoft YaHei,sans-serif;display:flex;flex-direction:column;overflow-x:hidden}.magic-header{padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;background:#0006;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-bottom:1px solid var(--glass-border);z-index:100}.cloud-sync{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#888ec8;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.stats-group{display:flex;gap:12px}.stat-item{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:30px;background:var(--glass);font-weight:600;border:1px solid transparent}.stat-item.gold{color:var(--gold);border-color:#ffd7004d}.stat-item.score{color:var(--magic-blue);border-color:#4facfe4d}.content{flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.view{width:100%;max-width:520px}.hero-section{margin-bottom:40px;text-align:center}.hero-section h1{font-size:2.5rem;margin:10px 0;background:linear-gradient(to right,#fff,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:#a0aec0;font-size:1rem}.grade-section{margin-bottom:30px;text-align:left}.grade-section h3{font-size:1rem;margin-bottom:15px;color:#cbd5e0;display:flex;align-items:center;gap:8px}.grade-section.junior h3{color:var(--magic-purple)}.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grade-card{background:var(--glass);border:1px solid var(--glass-border);padding:15px;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);color:#fff;font-weight:500}.grade-card:hover{background:#ffffff26;transform:translateY(-3px);border-color:var(--magic-blue);box-shadow:0 10px 20px #0003}.junior-card{border-color:#9b4dff4d;position:relative;overflow:hidden}.junior-card:hover{border-color:var(--magic-purple);box-shadow:0 0 15px #9b4dff66}.junior-badge{position:absolute;top:5px;right:5px;opacity:.5}.junior-badge img{width:20px;height:20px}.question-card{background:#14142899;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);padding:50px 30px;border-radius:40px;border:2px solid var(--glass-border);position:relative;box-shadow:0 30px 60px #00000080}.question-card.junior-mode{border-color:var(--magic-purple);box-shadow:0 0 40px #9b4dff33}.grade-tag{position:absolute;top:20px;left:50%;transform:translate(-50%);background:var(--glass);padding:4px 12px;border-radius:12px;font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.question-text{font-size:2.8rem;margin:40px 0;font-weight:700;text-shadow:0 0 20px rgba(255,255,255,.2)}.input-wrapper{display:flex;gap:15px;justify-content:center}input[type=text]{background:#0006;border:2px solid var(--glass-border);border-radius:18px;padding:15px 25px;font-size:1.8rem;color:#fff;width:180px;text-align:center;transition:border-color .3s}input:focus{outline:none;border-color:var(--magic-blue)}.submit-btn{background:var(--gold);color:var(--bg-deep);border:none;border-radius:18px;width:70px;cursor:pointer;transition:transform .2s}.submit-btn:active{transform:scale(.9)}.feedback-msg{margin-top:25px;font-weight:600;color:#48bb78}.feedback-msg.error{color:#f56565}.magic-hat-btn{background:var(--glass);border:1px solid var(--magic-blue);color:var(--magic-blue);padding:10px 20px;border-radius:25px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .3s}.magic-hat-btn.active{background:var(--magic-blue);color:#fff;box-shadow:0 0 20px var(--magic-blue);animation:shake .5s infinite}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}.skills-list::-webkit-scrollbar{width:6px}.skills-list::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}@media (max-width: 480px){.grade-grid{grid-template-columns:repeat(2,1fr)}.question-text{font-size:2rem}}