:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#0f172a}html{margin:0;padding:0;background-color:#0f172a}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}.page-transition{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-container{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.page-container.loading{opacity:.7;transform:translateY(10px)}.component-fade-in{animation:componentFadeIn .4s ease-out}@keyframes componentFadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.card-hover{transition:all .2s ease}.card-hover:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.page-loader{position:fixed;top:0;left:0;width:100%;height:100%;background:#fffffff2;display:flex;justify-content:center;align-items:center;z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.loader-content{text-align:center;animation:loaderFadeIn .3s ease-out}.loader-spinner{width:40px;height:40px;border:3px solid #e2e8f0;border-top:3px solid #0ea5e9;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}.loader-message{color:#64748b;font-size:16px;font-weight:500;margin:0}@keyframes loaderFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.route-transition-enter{opacity:0;transform:translateY(20px)}.route-transition-enter-active{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}.route-transition-exit{opacity:1;transform:translateY(0)}.route-transition-exit-active{opacity:0;transform:translateY(-20px);transition:opacity .3s ease,transform .3s ease}html{scroll-behavior:smooth}.page-transition,.component-fade-in,.card-hover{will-change:transform,opacity}*{backface-visibility:hidden;-webkit-backface-visibility:hidden}body{text-rendering:optimizeLegibility;-webkit-font-feature-settings:"kern" 1;font-feature-settings:"kern" 1}html,body{width:100%;overflow-x:hidden}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--primary-gradient-hover: linear-gradient(135deg, #5568d3 0%, #6a3d8f 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--text-inverse: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-glow: 0 0 20px rgba(102, 126, 234, .3);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-gradient);color:var(--text-primary);line-height:1.6}:fullscreen .stable-header-container,:-webkit-full-screen .stable-header-container,:-moz-full-screen .stable-header-container,:-ms-fullscreen .stable-header-container{display:none!important}:fullscreen,:-webkit-full-screen,:-moz-full-screen,:-ms-fullscreen{background:#0f172a!important}:fullscreen body,:-webkit-full-screen body,:-moz-full-screen body,:-ms-fullscreen body{background:#0f172a!important;margin:0!important;padding:0!important}:fullscreen .app,:-webkit-full-screen .app,:-moz-full-screen .app,:-ms-fullscreen .app{background:#0f172a!important;margin:0!important;padding:0!important}:fullscreen .main-content,:-webkit-full-screen .main-content,:-moz-full-screen .main-content,:-ms-fullscreen .main-content{margin:0!important;padding:0!important;max-width:100%!important;background:#0f172a!important}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:32px;width:100%;max-width:1400px;margin:0 auto}.main-content.exam-page-active{padding:0!important;max-width:100%!important;margin:0!important;width:100vw!important;height:100vh!important;overflow:hidden!important}.header{background:#fffffff2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-md);width:100%;position:sticky;top:0;z-index:1000;transition:all var(--transition-base);animation:headerFadeIn .4s ease-out;will-change:transform,opacity;border-bottom:1px solid rgba(226,232,240,.8)}.header.loading{opacity:.8;transform:translateY(-2px)}.header-skeleton{display:flex;align-items:center;gap:16px;animation:skeletonPulse 1.5s ease-in-out infinite}.header-skeleton-logo{width:120px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:4px}.header-skeleton-user{width:80px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:4px}@keyframes skeletonPulse{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes headerFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.top-bar{background:var(--primary-gradient);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;width:100%;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.logo span{font-weight:700;color:var(--text-inverse);font-size:18px;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.1)}.logo{display:flex;align-items:center;gap:16px;transition:all .3s ease}.institution-logo{width:32px;height:32px;border-radius:4px;object-fit:cover;border:1px solid #e2e8f0}.user-info{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-inverse);font-weight:600;transition:all var(--transition-base);padding:6px 12px;border-radius:var(--radius-md);background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-menu{display:flex;gap:12px;align-items:center;transition:all .3s ease}.nav-item{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-inverse);font-size:14px;font-weight:500;transition:all var(--transition-fast);padding:10px 16px;border-radius:var(--radius-md);position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff3;transition:left var(--transition-base)}.nav-item:hover:before{left:0}.nav-item:hover{color:var(--text-inverse);background:#ffffff26;transform:translateY(-2px)}.nav-item.active{color:var(--text-inverse);background:#ffffff40;font-weight:600;box-shadow:0 2px 8px #0000001a}.logout-btn{background:none;border:none;cursor:pointer;padding:0;font-family:inherit}.logout-btn:hover{color:#dc2626}.main-tabs{display:flex;background:var(--primary-gradient);width:100%;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.tab{flex:1;padding:18px 24px;border:none;background:transparent;color:var(--text-inverse);font-size:16px;font-weight:600;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden;letter-spacing:.3px}.tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.tab:hover:before{left:100%}.tab.active{background:var(--bg-primary);color:#667eea;border-bottom:4px solid #667eea;z-index:1;transform:translateY(-2px);box-shadow:var(--shadow-lg);font-weight:700}.tab:hover:not(.active){background:#ffffff26;transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.tab{position:relative;overflow:hidden;transform:translateZ(0);backface-visibility:hidden}.tab:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:3px;background:#0ea5e9;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translate(-50%);will-change:width}.tab.active:after{width:100%}.main-tabs{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;position:relative;z-index:10}.tab{will-change:transform,background-color;transform:translateZ(0);position:relative;z-index:1}.header{position:sticky;top:0;z-index:1000;background:#fff;transform:translateZ(0);backface-visibility:hidden;will-change:transform;contain:layout style paint}.top-bar{transform:translateZ(0);backface-visibility:hidden;will-change:transform}.app,.main-content{transform:translateZ(0);backface-visibility:hidden;will-change:transform;contain:layout style paint}.stable-header-container{position:relative;z-index:1000;background:#fff;transform:translateZ(0);backface-visibility:hidden;will-change:transform;contain:layout style paint}.page-transition{transform:translateZ(0);backface-visibility:hidden;will-change:transform;contain:layout style paint}button,a{transform:translateZ(0);backface-visibility:hidden;will-change:transform}.user-info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:40px}.info-card{background:var(--bg-primary);padding:24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;align-items:center;gap:20px;transition:all var(--transition-base);border:1px solid var(--border-color);position:relative;overflow:hidden}.info-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary-gradient);transform:scaleY(0);transition:transform var(--transition-base)}.info-card:hover:before{transform:scaleY(1)}.info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:#667eea4d}.card-icon{color:#667eea;flex-shrink:0;padding:12px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:var(--radius-md);transition:all var(--transition-base)}.info-card:hover .card-icon{transform:scale(1.1) rotate(5deg);background:var(--primary-gradient);color:var(--text-inverse)}.card-content{flex:1}.card-label{font-size:13px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.card-value{font-size:24px;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.practice-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;margin-bottom:40px}.module-card{background:var(--bg-primary);padding:32px;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center;border:1px solid var(--border-color);transition:all var(--transition-base);position:relative;overflow:hidden}.module-card:after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--primary-gradient);transform:scaleX(0);transition:transform var(--transition-base)}.module-card:hover:after{transform:scaleX(1)}.module-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl),var(--shadow-glow);border-color:#667eea4d}.module-header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px}.module-icon{color:#667eea;padding:16px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:var(--radius-md);transition:all var(--transition-base)}.module-card:hover .module-icon{background:var(--primary-gradient);color:var(--text-inverse);transform:scale(1.1) rotate(5deg)}.module-title{font-size:22px;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.3px}.module-description{color:var(--text-secondary);margin-bottom:28px;line-height:1.7;font-size:15px}.start-practice-btn{background:var(--primary-gradient);color:var(--text-inverse);border:none;padding:16px 32px;border-radius:var(--radius-md);font-weight:700;font-size:16px;cursor:pointer;transition:all var(--transition-base);width:100%;position:relative;overflow:hidden;box-shadow:var(--shadow-md);letter-spacing:.5px}.start-practice-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.start-practice-btn:hover:before{width:300px;height:300px}.start-practice-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.start-practice-btn:active{transform:translateY(0)}.practice-history{background:var(--bg-primary);padding:32px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:40px;border:1px solid var(--border-color)}.section-title-with-mode{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;gap:24px;flex-wrap:wrap}.section-title{font-size:28px;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;position:relative;padding-bottom:12px;margin:0;flex:1;min-width:0}.section-title:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:var(--primary-gradient);border-radius:var(--radius-full)}.mode-switcher{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary);flex-shrink:0}.mode-option{border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;padding:4px 2px;transition:color .15s ease,font-weight .15s ease;position:relative;line-height:1.4}.mode-option:hover{color:var(--text-primary)}.mode-option.active{color:var(--text-primary);font-weight:600}.mode-option.active:after{content:"";position:absolute;bottom:2px;left:2px;right:2px;height:1.5px;background:var(--primary-gradient);border-radius:var(--radius-full);opacity:.6}.mode-divider{color:var(--text-tertiary);font-weight:300;-webkit-user-select:none;user-select:none;opacity:.5}@media (max-width: 768px){.section-title-with-mode{flex-direction:column;align-items:flex-start;gap:12px}.mode-switcher{align-self:flex-end}}.table-container{overflow-x:auto}.history-table{width:100%;border-collapse:collapse}.history-table th,.history-table td{padding:16px;text-align:left;border-bottom:1px solid var(--border-color);transition:all var(--transition-fast)}.history-table th{background:linear-gradient(135deg,#667eea0d,#764ba20d);font-weight:700;color:var(--text-primary);text-transform:uppercase;font-size:12px;letter-spacing:.5px}.history-table tbody tr{transition:all var(--transition-fast)}.history-table tbody tr:hover{background:linear-gradient(135deg,#667eea08,#764ba208);transform:scale(1.01)}.play-btn{background:var(--primary-gradient);color:var(--text-inverse);border:none;width:40px;height:40px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md)}.play-btn:hover{transform:scale(1.1) rotate(5deg);box-shadow:var(--shadow-lg),var(--shadow-glow)}.pagination-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:16px 0;border-top:1px solid #e2e8f0}.pagination-info{font-size:14px;color:#64748b;font-weight:500}.pagination-controls{display:flex;gap:8px;align-items:center}.pagination-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:6px;cursor:pointer;transition:all .2s;font-size:14px;font-weight:500}.pagination-btn:hover:not(.disabled){background:#f3f4f6;border-color:#9ca3af}.pagination-btn.active{background:var(--primary-gradient);color:var(--text-inverse);border-color:transparent;box-shadow:var(--shadow-md)}.pagination-btn.active:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.pagination-btn.disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed;border-color:#e5e7eb}.pagination-btn svg{width:16px;height:16px;display:block}.pagination-btn:disabled svg{opacity:.5}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#64748b}.loading-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top:3px solid #0ea5e9;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:12px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.no-data{text-align:center;color:#64748b;font-style:italic;padding:40px 20px}.skeleton-row{animation:skeleton-loading 1.5s ease-in-out infinite}.skeleton-text{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:4px;margin:4px 0}.skeleton-button{width:32px;height:32px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;border-radius:50%;margin:0 auto}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.history-row{opacity:1;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}tbody.loading .history-row{opacity:.7;transform:translateY(2px)}.pagination-btn{transition:all .2s ease}.pagination-btn:hover:not(.disabled){transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.pagination-btn:active:not(.disabled){transform:translateY(0)}.speaking-skills-analysis{background:var(--bg-primary);padding:32px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:40px;border:1px solid var(--border-color)}.analysis-container{display:grid;grid-template-columns:1fr 1fr;gap:30px}.radar-chart-section h3,.performance-assessment h3{font-size:16px;font-weight:600;color:#1e293b;margin-bottom:16px}.chart-container{position:relative;height:300px}.overall-score{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.score-number{font-size:48px;font-weight:700;color:#0ea5e9}.skills-bars{display:flex;flex-direction:column;gap:16px}.skill-bar-item{display:flex;align-items:center;gap:12px}.skill-label{min-width:200px;font-size:14px;color:#475569}.skill-bar-container{flex:1;position:relative;height:32px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;box-shadow:inset 0 2px 4px #0000000d}.skill-bar{height:100%;background:var(--primary-gradient);border-radius:var(--radius-full);transition:width var(--transition-slow);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.skill-bar:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skill-score{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:#1e293b}.band-descriptors{background:var(--bg-primary);padding:32px;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);margin-bottom:40px;border:1px solid var(--border-color)}.descriptors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.band-card{border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;transition:all var(--transition-base);background:var(--bg-primary)}.band-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#667eea4d;background:linear-gradient(135deg,#667eea05,#764ba205)}.band-title{font-size:18px;font-weight:700;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;letter-spacing:.3px}.band-criteria{display:flex;flex-direction:column;gap:8px}.criterion strong{color:#475569;font-size:14px}.criterion p{color:#64748b;font-size:13px;line-height:1.4;margin-top:2px}.footer{background:#0c4a6e;color:#fff;padding:40px 20px;margin-top:auto}.footer-content{max-width:100%;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;padding:0 20px}.footer-logo{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px}.logo-icon{background:#fff;color:#0c4a6e;width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;margin-bottom:4px}.logo-text{font-size:12px;font-weight:600;letter-spacing:1px}.footer-section h4{font-size:16px;font-weight:600;margin-bottom:12px}.footer-section p{color:#cbd5e1;line-height:1.5;margin-bottom:16px}.footer-section ul{list-style:none}.footer-section li{margin-bottom:8px}.footer-section a{color:#cbd5e1;text-decoration:none;transition:color .2s}.footer-section a:hover{color:#fff}.practice-page{min-height:100vh;display:flex;flex-direction:column}.back-button-container{margin-bottom:20px;padding:0 20px}.back-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;color:#475569;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.back-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#1e293b;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.back-btn:active{transform:translateY(0)}.back-btn svg{width:20px;height:20px}.practice-container{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:30px;width:100%;padding:20px}.left-panel,.right-panel{background:#fff;padding:24px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.practice-header h2{font-size:24px;font-weight:600;color:#1e293b;margin-bottom:8px}.practice-header p{color:#64748b;line-height:1.5;margin-bottom:24px}.practice-actions{display:flex;gap:12px;margin-bottom:24px}.action-btn{flex:1;padding:12px 16px;border:2px solid #0ea5e9;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s}.action-btn.primary{background:#0ea5e9;color:#fff}.action-btn.secondary{background:#fff;color:#0ea5e9}.action-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.action-btn:disabled{opacity:.5;cursor:not-allowed}.start-practice-btn.large{width:100%;padding:16px 24px;font-size:18px;margin-bottom:24px;cursor:pointer;transition:all .3s ease}.start-practice-btn.large:disabled{opacity:.5;cursor:not-allowed;background:#94a3b8}.start-practice-btn.large:not(:disabled):hover{background:#0284c7;transform:translateY(-1px)}.practice-tips{background:#f8fafc;padding:16px;border-radius:6px}.practice-tips h3{font-size:16px;font-weight:600;color:#1e293b;margin-bottom:12px}.practice-tips ul{list-style:none}.practice-tips li{color:#475569;font-size:14px;line-height:1.5;margin-bottom:8px;padding-left:16px;position:relative}.practice-tips li:before{content:"•";color:#0ea5e9;font-weight:700;position:absolute;left:0}.writing-placeholder{text-align:center;padding:60px 20px;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.writing-placeholder h2{font-size:24px;color:#1e293b;margin-bottom:12px}.writing-placeholder p{color:#64748b}.login-page{min-height:100vh;background:var(--primary-gradient);display:flex;flex-direction:column;position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 20s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login-background{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}.login-container{display:flex;background:#fffffffa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl),0 0 60px #667eea4d;overflow:hidden;max-width:1100px;width:100%;min-height:650px;animation:slideInUp .6s ease-out;border:1px solid rgba(255,255,255,.3)}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.login-logo{flex:1;background:var(--primary-gradient);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;color:var(--text-inverse);position:relative;overflow:hidden}.login-logo:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:rotate 15s linear infinite}.logo-icon{width:100px;height:100px;background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:32px;box-shadow:0 8px 32px #0003;transition:all var(--transition-base);position:relative;z-index:1;overflow:hidden}.logo-icon:hover{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 40px #0000004d}.logo-image{width:100%;height:100%;object-fit:contain;padding:8px}.cube-icon{width:50px;height:50px;background:var(--text-inverse);border-radius:var(--radius-md);position:relative;box-shadow:0 4px 12px #0003}.cube-icon:before{content:"";position:absolute;top:-10px;left:-10px;width:70px;height:70px;border:3px solid var(--text-inverse);border-radius:var(--radius-md);opacity:.4;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.1);opacity:.2}}.logo-text{text-align:center;position:relative;z-index:1}.logo-main{font-size:3.5em;font-weight:800;margin-bottom:8px;letter-spacing:2px;text-shadow:0 4px 12px rgba(0,0,0,.2);background:linear-gradient(135deg,#fff,#ffffffe6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-sub{font-size:1.1em;opacity:.95;letter-spacing:4px;font-weight:600;text-transform:uppercase}.login-form-container{flex:1;padding:60px 50px;display:flex;align-items:center;background:var(--bg-primary);position:relative}.login-form{width:100%;max-width:420px;animation:fadeIn .8s ease-out .2s both}@keyframes fadeIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.login-title{font-size:2.5em;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;text-align:center;letter-spacing:-1px}.login-subtitle{color:var(--text-secondary);text-align:center;margin-bottom:48px;font-size:15px;line-height:1.6}.input-group{margin-bottom:28px}.input-group label{display:block;margin-bottom:10px;color:var(--text-primary);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.input-wrapper{position:relative;display:flex;align-items:center;padding:0}.input-icon{position:absolute;left:18px;color:#667eea;z-index:1;transition:all var(--transition-fast)}.input-wrapper:focus-within .input-icon{color:#764ba2;transform:scale(1.1)}.input-wrapper input{width:100%;padding:16px 16px 16px 52px;border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:15px;transition:all var(--transition-fast);background:var(--bg-primary);color:var(--text-primary)}.input-wrapper input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 4px #667eea1a;transform:translateY(-1px)}.input-wrapper input::placeholder{color:var(--text-tertiary)}.password-toggle{position:absolute;right:18px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:#667eea;background:#667eea1a;transform:scale(1.1)}.login-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.checkbox-label{display:flex;align-items:center;gap:10px;color:var(--text-primary);cursor:pointer;font-weight:500;font-size:14px;transition:all var(--transition-fast)}.checkbox-label:hover{color:#667eea}.checkbox-label input[type=checkbox]{width:20px;height:20px;accent-color:#667eea;cursor:pointer;border-radius:4px}.forgot-password{color:#667eea;text-decoration:none;font-size:14px;font-weight:600;transition:all var(--transition-fast);position:relative}.forgot-password:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--primary-gradient);transition:width var(--transition-base)}.forgot-password:hover:after{width:100%}.forgot-password:hover{color:#764ba2}.login-button{width:100%;padding:18px;background:var(--primary-gradient);color:var(--text-inverse);border:none;border-radius:var(--radius-md);font-size:16px;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);letter-spacing:.5px;position:relative;overflow:hidden}.login-button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.login-button:hover:not(:disabled):before{width:400px;height:400px}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-xl),var(--shadow-glow)}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{background:linear-gradient(135deg,#9ca3af,#6b7280);cursor:not-allowed;opacity:.6;box-shadow:none}.login-footer{padding:24px;display:flex;align-items:center;justify-content:center;gap:12px;color:#ffffffe6;position:relative;z-index:1;font-size:14px;font-weight:500}.footer-logo{display:flex;align-items:center;gap:8px}.footer-logo-icon{width:32px;height:32px;background:#ffffff40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:var(--text-inverse);box-shadow:0 2px 8px #0000001a;transition:all var(--transition-fast)}.footer-logo:hover .footer-logo-icon{transform:scale(1.1) rotate(5deg);background:#ffffff59}.exam-completed-card{background:#fff;border-radius:15px;padding:60px 40px;box-shadow:0 10px 30px #0000001a;text-align:center;max-width:500px;margin:0 auto}.exam-completed-container{display:flex;justify-content:center;align-items:center;min-height:60vh}.completed-icon{font-size:4em;color:#22c55e;margin-bottom:20px}.completed-title{font-size:2em;color:#1e293b;margin-bottom:30px;font-weight:600}.completed-actions{display:flex;gap:15px;justify-content:center}.btn{padding:12px 25px;border-radius:8px;font-size:1em;font-weight:600;cursor:pointer;transition:all .3s ease;border:none}.btn-primary{background:#0ea5e9;color:#fff}.btn-primary:hover{background:#0284c7}.btn-secondary{background:#fff;color:#0ea5e9;border:2px solid #0ea5e9}.btn-secondary:hover{background:#e0f2fe}.writing-content{display:flex;flex-direction:column}.writing-section{background:#fff;border-radius:15px;padding:25px;box-shadow:0 4px 12px #0000000d;width:100%}.writing-performance{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.performance-card{text-align:center;padding:20px;background:#f8fafc;border-radius:10px}.performance-card h3{font-size:.9em;color:#64748b;margin-bottom:10px}.score-display{font-size:2em;font-weight:700;color:#0ea5e9}.writing-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.tool-card{background:#f8fafc;border-radius:10px;padding:20px;text-align:center}.tool-card h3{color:#1e293b;margin-bottom:10px}.tool-card p{color:#64748b;margin-bottom:15px;font-size:.9em}.tool-button{background:#0ea5e9;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .3s ease}.tool-button:hover{background:#0284c7}.add-new-student-page{padding:20px;max-width:1400px;margin:0 auto;min-height:100vh;background:#f8fafc}.form-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000000d;padding:40px;max-width:600px;margin:0 auto}.form-header{display:flex;align-items:center;gap:20px;margin-bottom:30px}.back-button{display:flex;align-items:center;gap:8px;background:none;border:none;color:#64748b;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s}.back-button:hover{background:#f1f5f9;color:#0ea5e9}.form-title{font-size:24px;font-weight:600;color:#1e293b;margin:0}.account-type-selector{display:flex;gap:12px;margin-bottom:30px}.type-button{flex:1;padding:12px 20px;border:2px solid #e2e8f0;background:#fff;color:#64748b;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.type-button.active{border-color:#0ea5e9;background:#0ea5e9;color:#fff}.type-button:hover:not(.active){border-color:#0ea5e9;color:#0ea5e9}.student-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-label{font-size:14px;font-weight:500;color:#374151}.required{color:#ef4444}.form-input{padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;transition:border-color .2s;background:#fff}.form-input:focus{outline:none;border-color:#0ea5e9}.form-input::placeholder{color:#9ca3af}.password-input-wrapper{position:relative;width:100%}.password-input-wrapper .form-input{width:100%;padding-right:45px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;padding:4px;transition:color .2s;z-index:1}.password-toggle:hover{color:#64748b}.password-toggle:focus{outline:none}.input-with-icon{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;color:#9ca3af;z-index:1}.input-with-icon .form-input{padding-left:40px}.verification-code-container{display:flex;gap:12px}.verification-code-container .input-with-icon{flex:1}.send-code-button{padding:12px 20px;background:#0ea5e9;color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap}.send-code-button:hover{background:#0284c7}.submit-button{padding:16px 24px;background:#0ea5e9;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-top:12px}.submit-button:hover{background:#0284c7}.add-new-teacher-page{padding:20px;max-width:1400px;margin:0 auto;min-height:100vh;background:#f8fafc}.add-new-teacher-page .form-container{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000000d;padding:40px;max-width:600px;margin:0 auto}.add-new-teacher-page .form-header{display:flex;align-items:center;gap:20px;margin-bottom:30px}.add-new-teacher-page .back-button{display:flex;align-items:center;gap:8px;background:none;border:none;color:#64748b;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:all .2s}.add-new-teacher-page .back-button:hover{background:#f1f5f9;color:#0ea5e9}.add-new-teacher-page .form-title{font-size:24px;font-weight:600;color:#1e293b;margin:0}.add-new-teacher-page .account-type-selector{display:flex;gap:12px;margin-bottom:30px}.add-new-teacher-page .type-button{flex:1;padding:12px 20px;border:2px solid #e2e8f0;background:#fff;color:#64748b;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.add-new-teacher-page .type-button.active{border-color:#0ea5e9;background:#0ea5e9;color:#fff}.add-new-teacher-page .type-button:hover:not(.active){border-color:#0ea5e9;color:#0ea5e9}.add-new-teacher-page .teacher-form{display:flex;flex-direction:column;gap:24px}.add-new-teacher-page .form-group{display:flex;flex-direction:column;gap:8px}.add-new-teacher-page .form-label{font-size:14px;font-weight:500;color:#374151}.add-new-teacher-page .required{color:#ef4444}.add-new-teacher-page .form-input{padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:14px;transition:border-color .2s;background:#fff}.add-new-teacher-page .form-input:focus{outline:none;border-color:#0ea5e9}.add-new-teacher-page .form-input::placeholder{color:#9ca3af}.add-new-teacher-page .input-with-icon{position:relative;display:flex;align-items:center}.add-new-teacher-page .input-icon{position:absolute;left:12px;color:#9ca3af;z-index:1}.add-new-teacher-page .input-with-icon .form-input{padding-left:40px}.add-new-teacher-page .submit-button{padding:16px 24px;background:#0ea5e9;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s;margin-top:12px}.add-new-teacher-page .submit-button:hover{background:#0284c7}.radio-group{display:flex;gap:20px;margin-top:8px}.radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:#374151}.radio-input{width:16px;height:16px;accent-color:#0ea5e9;cursor:pointer}.radio-text{font-weight:500}.form-input.error{border-color:#ef4444;background-color:#fef2f2}.form-input.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.error-message{color:#ef4444;font-size:12px;margin-top:4px;display:block}.submit-button.disabled{background:#9ca3af;cursor:not-allowed;opacity:.6}.submit-button.disabled:hover{background:#9ca3af}@media (max-width: 768px){.main-content{padding:10px}.user-info-cards{grid-template-columns:repeat(2,1fr)}.practice-modules,.analysis-container,.descriptors-grid,.practice-container{grid-template-columns:1fr}.nav-menu{gap:12px}.nav-item span{display:none}.login-container{flex-direction:column;min-height:auto}.login-logo{padding:30px}.login-form-container{padding:40px 20px}.writing-content{flex-direction:column}.writing-performance,.writing-tools{grid-template-columns:1fr}.form-container{padding:24px;margin:0 16px}.account-type-selector,.verification-code-container{flex-direction:column}.send-code-button{width:100%}.add-new-teacher-page .form-container{padding:24px;margin:0 16px}.add-new-teacher-page .account-type-selector{flex-direction:column}}.modal-provider{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}