:root{--primary: #3b82f6;--secondary: #8b5cf6;--dark: #0f172a;--glass: rgba(255, 255, 255, .05);--border: rgba(255, 255, 255, .1)}body{margin:0;font-family:Inter,sans-serif;background:#020617;color:#fff;overflow:hidden}.app-container{height:100vh;width:100vw}.home-view{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1e293b,#020617)}.particle-canvas{position:absolute;top:0;left:0;pointer-events:none;opacity:.6}.home-content{position:relative;z-index:10;text-align:center;max-width:800px;padding:20px}.hero-section h1{font-size:4rem;margin:0;font-weight:800;letter-spacing:-2px}.hero-section h1 span{background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-section p{font-size:1.2rem;color:#94a3b8;margin:24px 0;line-height:1.6}.badge{display:inline-block;padding:6px 12px;background:var(--glass);border:1px solid var(--border);border-radius:20px;font-size:.75rem;font-weight:700;color:var(--primary);margin-bottom:20px}.hero-btns{display:flex;align-items:center;justify-content:center;gap:24px}.primary-btn{background:var(--primary);color:#fff;border:none;padding:16px 32px;border-radius:16px;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:.3s}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px #3b82f666}.sync-status{display:flex;align-items:center;gap:8px;color:#64748b;font-size:.9rem}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:80px}.f-card{background:var(--glass);border:1px solid var(--border);padding:24px;border-radius:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.f-card svg{color:var(--primary);margin-bottom:16px}.f-card h3{margin:0 0 8px;font-size:1.1rem}.f-card p{margin:0;font-size:.85rem;color:#64748b}.dashboard-layout{display:flex;height:100vh;background:#f8fafc;color:#1e293b}.sidebar{width:260px;background:#0f172a;color:#fff;padding:32px 20px;display:flex;flex-direction:column}.logo{display:flex;align-items:center;gap:12px;font-size:1.2rem;font-weight:800;margin-bottom:48px;cursor:pointer}.logo span{background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sidebar nav{flex:1;display:flex;flex-direction:column;gap:8px}.sidebar nav button{background:transparent;border:none;color:#94a3b8;padding:14px 16px;border-radius:12px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:12px;font-weight:600;transition:.2s}.sidebar nav button.active{background:#1e293b;color:#fff}.sidebar nav button:hover:not(.active){background:#ffffff0d}.sync-tag{font-size:.75rem;color:#64748b;display:flex;align-items:center;gap:6px;padding:12px;background:#ffffff0d;border-radius:10px}.main-view{flex:1;overflow-y:auto;padding:40px}.list-container header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.add-student-btn{background:#0f172a;color:#fff;border:none;padding:10px 20px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:600}.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}.s-card{background:#fff;padding:24px;border-radius:20px;text-align:center;border:1px solid #e2e8f0;cursor:pointer;transition:.3s}.s-card img{width:70px;height:70px;border-radius:50%;background:#f1f5f9;margin-bottom:16px}.s-card h3{margin:0 0 8px;font-size:1rem}.s-score{font-size:.8rem;color:#64748b;margin-bottom:4px}.s-level{font-size:.7rem;font-weight:800;color:var(--primary);text-transform:uppercase}.roll-view{height:100%;display:flex;align-items:center;justify-content:center}.roll-card{background:#fff;padding:60px;border-radius:40px;text-align:center;box-shadow:0 20px 50px #0000000d;width:100%;max-width:400px}.roll-target img{width:120px;height:120px;border-radius:50%;border:4px solid var(--primary);margin-bottom:24px}.roll-btn{width:100%;margin-top:40px;padding:16px;border-radius:16px;border:none;background:var(--primary);color:#fff;font-weight:700;font-size:1.1rem;cursor:pointer}.roll-btn.disabled{background:#cbd5e1;cursor:not-allowed}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#fff;padding:32px;border-radius:32px;width:90%;max-width:400px;position:relative}.modal-header{text-align:center;margin-bottom:24px}.modal-header img{width:60px;height:60px;border-radius:50%;margin-bottom:12px}.eval-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.eval-btn{padding:16px;border:none;border-radius:16px;font-weight:700;cursor:pointer;transition:.2s}.eval-btn.积极{background:#dcfce7;color:#166534}.eval-btn.专注{background:#dbeafe;color:#1e40af}.eval-btn.沉默{background:#f1f5f9;color:#475569}.eval-btn.分心{background:#fee2e2;color:#991b1b}.eval-btn:hover{transform:scale(1.05)}.loading-screen{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#020617;color:#fff}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}