html,body{width:100%;height:100%}button,input{font-family:inherit;border:none;background:none;outline:none}body{font-family:Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary)}:root{--color-primary: #3498DB;--color-primary-hover: #2980B9;--color-primary-light: rgba(52, 152, 219, .1);--color-success: #27AE60;--color-warning: #F39C12;--color-error: #E74C3C;--color-info: #3498DB;--color-text-primary: #2C3E50;--color-text-secondary: #7F8C8D;--color-text-muted: #95A5A6;--color-border: #E5E5E5;--color-border-light: #EEEEEE;--color-background: #F8F9FA;--color-surface: #FFFFFF;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 8px 24px rgba(0, 0, 0, .15);--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-size-3xl: 24px;--font-size-4xl: 28px;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.6;--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .4s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 10000}a{text-decoration:none}.page-breadcrumb{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.breadcrumb-item{margin-right:5px;text-decoration:none!important;color:var(--color-text-secondary);display:inline-block}.breadcrumb-item:hover,.breadcrumb-item:active,.breadcrumb-item:focus{text-decoration:none!important;color:var(--color-text-primary)}span{text-decoration:none!important}.breadcrumb-arrow{margin-right:var(--spacing-sm)}.breadcrumb-item.active{color:var(--color-text-primary);font-weight:500}.page-header{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;width:100%;text-align:left;align-items:flex-start}.page-header.row{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:12px}.page-header.row h1{line-height:28px}.page-header h1{font-size:24px;font-weight:700;color:var(--color-text-primary);margin:0;text-align:left!important;line-height:28px;width:100%;align-self:flex-start}.page-header .date-welcome,.page-header .page-description{font-size:13px;color:var(--color-text-secondary);margin:0;line-height:20px;text-align:left!important;align-self:flex-start}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.btn svg{width:18px;height:18px}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:#f5f5f5;border-color:var(--color-primary)}.btn-success{background:var(--color-success);color:#fff}.btn-success:hover{background:#219a52}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover{background:#c0392b}.btn-icon{padding:8px;border-radius:var(--radius-md)}.btn-icon svg{width:20px;height:20px}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:1440px;margin:0 auto;padding:60px 0 0;background-color:var(--color-background)}.main-content{padding:var(--spacing-md);flex:1;flex-direction:column;gap:8px;width:100%;max-width:1440px;margin:0 auto}.header{min-height:60px;background-color:var(--color-text-primary);color:#fff;display:flex;align-items:center;padding:0 var(--spacing-lg);box-shadow:var(--shadow-md);overflow-x:auto;white-space:nowrap;position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed)}@media(min-width:651px){.header{overflow-x:visible}}.header-brand{display:flex;align-items:center;gap:12px;margin-right:40px;flex-shrink:0}.header-logo{width:40px;height:40px;object-fit:contain}.header-title-group{display:flex;flex-direction:column;gap:2px}.header-title{display:flex;align-items:baseline;gap:8px;font-size:20px;font-weight:700}.header-title-en{font-size:20px;font-weight:700;color:#fff;letter-spacing:.5px}.header-title-cn{font-size:16px;font-weight:600;color:#ffffffe6}.header-subtitle{font-size:12px;color:#ffffffb3;font-weight:400}.header-nav{display:flex;gap:20px;margin-left:auto;margin-right:80px;z-index:999;position:relative}.nav-item{color:#fff;text-decoration:none;padding:var(--spacing-sm) 12px;border-radius:var(--radius-sm);transition:background-color var(--transition-normal);flex-shrink:0}.nav-item:hover{background-color:#ffffff1a}.nav-item.active{background-color:#fff3}.feedback-button{position:absolute;right:80px;top:50%;transform:translateY(-50%);background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);padding:var(--spacing-sm) var(--spacing-md);border-radius:20px;font-size:var(--font-size-base);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;gap:5px;z-index:999}.feedback-button:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-50%) scale(1.05)}.feedback-button:active{transform:translateY(-50%) scale(.95)}.user-profile-container{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:1001;cursor:pointer;padding:0 5px}.user-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;cursor:pointer;transition:transform var(--transition-normal);border:2px solid rgba(255,255,255,.3);z-index:1002;position:relative;display:flex;align-items:center;justify-content:center}.user-avatar:hover{transform:scale(1.05)}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-dropdown-menu{position:absolute;top:50px;right:0;width:320px;background-color:var(--color-text-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-popover);overflow:visible;animation:dropdownFadeIn .3s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-info-card{padding:20px}.user-info-header{display:flex;align-items:center;margin-bottom:16px}.user-card-avatar{width:60px;height:60px;border-radius:50%;margin-right:16px;border:2px solid rgba(255,255,255,.3);flex-shrink:0}.user-card-info{display:flex;flex-direction:column}.user-card-name{font-size:18px;font-weight:700;margin-bottom:4px}.user-card-email{font-size:14px;color:#ffffffb3;margin-bottom:4px}.user-card-id{font-size:14px;color:#ffffffb3}.user-membership-info{background-color:#ffffff0d;padding:var(--spacing-md);border-radius:6px;margin-bottom:var(--spacing-md);border-left:4px solid var(--color-warning)}.membership-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.membership-badge{background-color:var(--color-warning);color:var(--color-text-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:700}.membership-expiry{font-size:var(--font-size-xs);color:#ffffffb3}.membership-benefits{font-size:var(--font-size-sm);color:#ffffffe6}.user-card-actions{display:flex;flex-direction:column;gap:8px}.user-action-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px 16px;background-color:#ffffff0d;color:#fff;border:none;border-radius:6px;font-size:var(--font-size-base);cursor:pointer;transition:background-color var(--transition-normal);text-decoration:none}.user-action-btn:hover{background-color:#ffffff1a}.user-action-btn.settings-btn{border-left:3px solid var(--color-primary)}.user-action-btn.membership-btn{border-left:3px solid var(--color-warning)}.user-action-btn.feedback-btn{border-left:3px solid #06f416}.user-action-btn.logout-btn{border-left:3px solid var(--color-error)}.action-icon{width:18px;height:18px;display:inline-block;background-size:cover;background-repeat:no-repeat}.settings-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E")}.membership-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM10 4h4v3h-4V4zm2 13l-4-2.5V17l4-2.5L16 17v-2.5L12 17z'/%3E%3C/svg%3E")}.feedback-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E")}.logout-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E")}@media(max-width:768px){.header{padding:0 15px}.header-brand{gap:8px;margin-right:15px}.header-logo{width:32px;height:32px}.header-title-en{font-size:16px}.header-title-cn{font-size:14px}.header-subtitle{font-size:10px}.header-nav{gap:8px;margin-right:80px}.nav-item{font-size:13px;padding:6px 8px}}@media(max-width:650px){.header{flex-direction:column;justify-content:center;min-height:80px;align-items:stretch;position:fixed}.app-container{padding-top:80px}.header-brand{margin-right:0;margin-bottom:10px;justify-content:center;width:100%;order:1}.user-profile-container{order:2;margin:0;position:fixed;right:10px;top:10px;transform:none;z-index:9998}.header-nav{gap:8px;margin-right:0;margin-left:0;justify-content:center;order:2}.nav-item{font-size:12px;padding:5px 8px}.user-avatar{width:40px;height:40px;box-shadow:0 2px 8px #0000004d}.user-dropdown-menu{width:280px;right:10px;transform:none;top:calc(100% + 10px);z-index:9999}}@media(max-width:480px){.header{padding:0 10px}.header-brand{gap:6px}.header-logo{width:28px;height:28px}.header-title-en{font-size:14px}.header-title-cn{font-size:12px}.header-subtitle{font-size:9px}.header-nav{gap:4px;margin-right:8px}.nav-item{font-size:11px;padding:4px 5px}.user-avatar{width:30px;height:30px}}.notifications-container{position:fixed;top:80px;right:20px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:350px}.toast-notification{display:flex;align-items:center;justify-content:space-between;padding:12px var(--spacing-md);color:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);font-size:var(--font-size-base);opacity:0;transform:translate(100%);transition:all var(--transition-normal);max-width:100%}.toast-notification.visible{opacity:1;transform:translate(0)}.toast-message{flex:1;margin-right:12px;word-break:break-word}.toast-close-btn{background:transparent;border:none;color:#fff;font-size:20px;line-height:1;padding:0;width:20px;height:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color var(--transition-fast)}.toast-close-btn:hover{background-color:#fff3}@media(max-width:768px){.notifications-container{top:90px;right:15px;left:15px;max-width:none}.toast-notification{font-size:13px;padding:10px 14px}}.pagination{display:flex;align-items:center;background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-md);width:100%}.pagination-info{font-size:var(--font-size-base);color:#666;display:flex;align-items:center;gap:var(--spacing-md)}.pagination-controls{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto}.pagination-btn{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;color:#374151;font-size:var(--font-size-base);padding:6px 16px;cursor:pointer;transition:all var(--transition-fast);outline:none}.pagination-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#d1d5db}.pagination-btn:disabled{color:#d1d5db;cursor:not-allowed}.page-numbers{display:flex;align-items:center;gap:var(--spacing-xs)}.page-btn{width:32px;height:32px;border:1px solid var(--color-border);border-radius:6px;background-color:var(--color-surface);color:#666;font-size:var(--font-size-base);font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);padding:var(--spacing-sm) 12px}.page-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:#f3f4f6}.page-btn:hover:not(.active){background-color:#f3f4f6;border-color:#d1d5db}.page-btn.active{background-color:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}.page-btn.disabled{opacity:.5;cursor:not-allowed;border-color:var(--color-border);color:#d1d5db}.page-btn.enabled{color:var(--color-primary);border-color:var(--color-primary)}@media(max-width:768px){.pagination{flex-direction:column;gap:16px;align-items:center;padding:12px}.pagination-controls{justify-content:center;margin-left:0;gap:12px}.pagination{gap:6px;flex-direction:column;align-items:center}.page-btn{padding:6px 12px;font-size:13px}}@media(max-width:640px){.pagination{align-items:stretch}.pagination-info{justify-content:center}}.user-avatar-component{display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:600;text-transform:uppercase;user-select:none;flex-shrink:0;transition:transform .2s ease}.user-avatar-component:hover{transform:scale(1.05)}.user-avatar-component img{display:none}.modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in}.feedback-modal{background:#fff;border-radius:12px;width:90%;max-width:800px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #fafafa4d;animation:slideUp .3s ease-out;position:relative;z-index:1001}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.modal-header h2{margin:0;font-size:20px;font-weight:600;color:#1f2937}.close-btn{background:none;border:none;font-size:28px;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s}.close-btn:hover{background:#f3f4f6;color:#1f2937}.modal-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column}.feedback-history{flex-shrink:0}.feedback-history h3{margin:0 0 16px;font-size:16px;font-weight:600;color:#374151}.loading{text-align:center;padding:40px;color:#6b7280}.empty-state{text-align:center;padding:60px 20px;color:#9ca3af;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.empty-state p{margin:8px 0}.empty-state .hint{font-size:14px;color:#d1d5db}.messages-container{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto;padding:16px;background:#f5f5f5;border-radius:8px}.feedback-thread{display:flex;flex-direction:column;gap:8px}.message{padding:10px 14px;border-radius:8px;max-width:70%;animation:messageSlide .3s ease-out;position:relative}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-message{align-self:flex-end;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:8px 8px 2px}.admin-message{align-self:flex-start;background:#fff;border:1px solid #e5e7eb;color:#1f2937;border-radius:8px 8px 8px 2px}.message-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11px;flex-wrap:wrap}.user-message .message-header{color:#ffffffd9}.admin-message .message-header{color:#6b7280}.user-message .sender{display:none}.admin-message .sender{font-weight:600;color:#10b981}.sender{font-weight:600}.time{opacity:.8}.status-badge{padding:2px 6px;border-radius:10px;font-size:10px;font-weight:500;margin-left:auto}.user-message .status-pending{background:#ffffff40;color:#fff}.user-message .status-replied{background:#10b9814d;color:#d1fae5}.user-message .status-closed{background:#fff3;color:#fffc}.admin-message .status-badge{background:#f3f4f6;color:#6b7280}.message-content{line-height:1.5;word-wrap:break-word;white-space:pre-wrap;font-size:14px}.message-meta{margin-top:6px;font-size:11px;opacity:.75}.user-message .category{padding:2px 6px;background:#fff3;border-radius:3px;font-size:10px}.admin-message .category{padding:2px 6px;background:#f3f4f6;color:#6b7280;border-radius:3px;font-size:10px}.new-feedback-form{border-top:2px solid #e5e7eb;padding-top:24px;flex-shrink:0}.new-feedback-form h3{margin:0 0 16px;font-size:16px;font-weight:600;color:#374151}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:14px;font-weight:500;color:#374151}.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-family:inherit;transition:all .2s;box-sizing:border-box}.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:100px}.char-count{text-align:right;font-size:12px;color:#9ca3af;margin-top:4px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.submit-btn{width:100%;padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px}.submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.feedback-modal{width:95%;max-height:90vh}.modal-header{padding:16px 20px}.modal-body{padding:20px}.form-row{grid-template-columns:1fr}.message{max-width:90%}}.login-container{display:flex;width:100vw;height:100vh;overflow:hidden;background-color:var(--color-surface);align-items:stretch}.login-left{width:50%;max-width:864px;background:linear-gradient(135deg,#1b365d 15%,#2c5282 85%);display:flex;flex-direction:column;align-items:stretch;overflow:hidden}.login-left-header{display:flex;justify-content:center;align-items:center;margin-top:40px;position:relative}.login-blur-circle{width:128px;height:128px;background-color:#ffffff0d;filter:blur(64px);border-radius:9999px;position:absolute;left:40px;top:0}.login-logo-container{display:flex;width:80px;height:80px;justify-content:center;align-items:center;padding:16px;background:#fff3;backdrop-filter:blur(4px);border-radius:16px;margin-top:53.5px}.login-logo{width:48px;height:48px;object-fit:contain}.login-title{display:flex;justify-content:center;align-items:center;gap:12px;height:42px;margin-top:16px;margin-left:auto;margin-right:auto;font-size:28px;font-weight:700;line-height:42px;color:#fff;text-align:center}.login-title-en{font-size:32px;font-weight:700;letter-spacing:1px}.login-title-cn{font-size:28px;font-weight:600}.login-left-content{display:flex;flex-direction:column;align-items:center;gap:48px;margin-bottom:80px;padding:0 20px;min-height:572.5px}.login-subtitle{display:flex;justify-content:center;align-items:center;width:100%;min-height:24px;font-size:16px;line-height:24px;color:#fffc;text-align:center;padding:0 20px}.login-image-container{display:flex;justify-content:center;align-items:center;width:480px;height:280px;background:#fff6;backdrop-filter:blur(4px);border-radius:16px;overflow:hidden;position:relative}.login-image{width:100%;height:100%;background-image:url(/assets/images/login_bg.jpeg);background-size:cover;background-position:center;opacity:.9;border-radius:16px}.login-image-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#1b365de6;opacity:.3;border-radius:16px;z-index:1}.login-image-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;gap:20px;z-index:2}.login-image-microphone{width:64px;height:64px;background-image:url(/assets/svg/login_logo.svg);background-size:cover;border-radius:50%;padding:8px}.login-image-volume{height:60px;display:flex;width:60px;padding:0;gap:4px;align-items:flex-start;flex-shrink:0;background-image:url(/assets/svg/login_xxx.svg);background-size:cover}.login-features{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;flex-wrap:nowrap}@media(max-width:1000px){.login-container{flex-direction:column;overflow-y:auto}.login-left-header{display:flex;justify-content:center;align-items:center;margin-top:0;position:relative}.login-left{width:100%;min-height:30vh;max-width:none}.login-right{width:100%;padding:10px}.login-right-content{width:100%;max-width:350px;box-sizing:border-box}.login-form{width:100%;padding:0}.login-input-container,.login-button{width:100%;box-sizing:border-box}}@media(max-width:370px){.login-right{padding:5px}.login-right-content{max-width:300px;padding:0 5px}.login-welcome{font-size:24px;width:100%;margin:0}.login-form{padding:0 5px}.login-input-container,.login-button{width:100%;max-width:280px;margin:0 auto}.login-remember-container{max-width:280px;margin:0 auto}.login-third-party{max-width:280px;margin:16px auto}}.login-feature-card{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:184px;padding:20px 19.5px 19.75px;background:#ffffff26;backdrop-filter:blur(12px);border-radius:16px;margin-bottom:13.5px}.login-feature-icon{width:40px;height:40px;margin-left:52.5px;margin-right:52.51px;background-image:url(/assets/svg/login_xxx.svg);background-size:cover}.login-feature-card:nth-child(2) .login-feature-icon{background-image:url(/assets/svg/login_yyy.svg)}.login-feature-card:nth-child(3) .login-feature-icon{background-image:url(/assets/svg/login_zzz.svg)}.login-feature-title{display:flex;justify-content:center;align-items:center;width:84px;height:20px;margin-top:5px;margin-left:30.5px;margin-right:30.51px;font-weight:700;line-height:20px;color:#fff;text-align:center}.login-feature-card:nth-child(1) .login-feature-title{width:84px;margin-left:30.5px;margin-right:30.51px}.login-feature-card:nth-child(2) .login-feature-title{width:84px;margin-left:30.5px;margin-right:30.51px}.login-feature-card:nth-child(3) .login-feature-title{width:104px;margin-left:20.5px;margin-right:20.51px}.login-feature-description{display:flex;flex-direction:column;align-items:flex-start;gap:0px;width:155px;height:40px;font-size:14px;line-height:20px;color:#fffc;text-align:center}.login-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;flex:1}.login-welcome{display:flex;justify-content:center;align-items:center;width:112px;height:42px;margin-left:154px;margin-right:154px;font-size:28px;font-weight:700;line-height:42px;color:#2c3e50;text-align:center}.login-right-content{display:flex;flex-direction:column;align-items:center;gap:24px;width:360px}.login-identity{display:flex;justify-content:center;align-items:center;width:154px;height:20px;margin-left:133px;margin-right:133px;line-height:20px;color:#7f8c8d;text-align:center}.login-identity-buttons{display:flex;flex-direction:row;align-items:stretch;gap:12px}.login-student-btn{display:flex;justify-content:center;align-items:center;width:114px;height:36px;padding:8px 24px;background:var(--color-surface);border:1px solid #DCDFE6;border-radius:var(--radius-sm);font-weight:500;line-height:20px;color:#606266;text-align:center;cursor:pointer;transition:all var(--transition-normal)}.login-student-btn.active{background:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}.login-teacher-btn{display:flex;justify-content:center;align-items:center;width:114px;height:36px;padding:8px 24px;background:var(--color-surface);border:1px solid #DCDFE6;border-radius:var(--radius-sm);font-weight:500;line-height:20px;color:#606266;text-align:center;cursor:pointer;transition:all var(--transition-normal)}.login-teacher-btn.active{background:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}.login-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%}.login-form-item{display:flex;flex-direction:column;align-items:stretch;gap:8px}.login-form-label{display:flex;align-items:center;width:76px;height:20px;font-weight:500;line-height:20px;color:#2c3e50}.login-form-input-container{display:flex;flex-direction:row;align-items:stretch;gap:12px;width:100%;height:44px;padding:0 14px;background:var(--color-surface);border:1px solid #DCDFE6;border-radius:var(--radius-sm)}.login-form-icon{width:20px;height:20px;margin-top:14px;margin-bottom:14px;background-size:cover}.login-form-item:nth-child(1) .login-form-icon{background-image:url(/assets/svg/login_aaa.svg)}.login-form-item:nth-child(2) .login-form-icon{background-image:url(/assets/svg/login_bbb.svg)}.login-form-input{flex:1;height:40px;padding:4px 0;border:none;outline:none;font-size:14px;line-height:20px;color:#303133;background-color:transparent}.login-form-options{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:20px;margin-top:12px}.login-remember{display:flex;flex-direction:row;align-items:stretch;gap:8px}.login-checkbox{width:16px;height:16px;margin-top:2px;margin-bottom:2px;background:#fff;border:1px solid #DCDFE6;border-radius:2px}.login-remember-label{display:flex;align-items:center;width:42px;height:20px;line-height:20px;color:#7f8c8d}.login-forgot{display:flex;align-items:center;width:70px;height:20px;line-height:20px;color:var(--color-primary);cursor:pointer}.login-submit-btn{display:flex;justify-content:center;align-items:center;width:100%;height:44px;padding:12px 0;margin-top:var(--spacing-md);background:var(--color-primary);border-radius:var(--radius-sm);font-weight:500;line-height:20px;color:var(--color-surface);text-align:center;border:none;cursor:pointer;transition:all var(--transition-normal)}.login-submit-btn:hover{background:var(--color-primary-hover)}.login-register{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:3px;margin-top:19px}.login-register-text{display:flex;justify-content:center;align-items:center;height:20px;line-height:20px;color:#7f8c8d;text-align:center}.login-register-link{display:flex;justify-content:center;align-items:center;height:20px;font-weight:500;line-height:20px;color:var(--color-primary);text-align:center;cursor:pointer}.login-third-party{display:flex;flex-direction:row;align-items:center;gap:16px;margin-top:24px;width:100%}.login-third-party-line{flex:1;height:1px;background-color:#dcdfe6}.login-third-party-text{display:flex;align-items:center;width:96px;height:16px;font-size:12px;line-height:16px;color:#7f8c8d}.login-third-party-buttons{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:16px;margin-top:16px}.login-wechat-btn{display:flex;justify-content:center;align-items:center;width:36px;height:36px;padding:9px 8.5px 9px 8px;background:#09bb07;border-radius:9999px;background-image:url(/assets/svg/login_ccc.svg);background-size:50%;background-repeat:no-repeat;background-position:center;cursor:pointer}.login-qq-btn{display:flex;justify-content:center;align-items:center;width:36px;height:36px;padding:8px;background:#12b7f5;border-radius:9999px;background-image:url(/assets/svg/login_ddd.svg);background-size:50%;background-repeat:no-repeat;background-position:center;cursor:pointer}.dashboard-container{display:flex;flex-direction:column;gap:8px}.stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}.stats-section.teacher-stats{grid-template-columns:repeat(3,1fr)}.stats-section.student-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}@media(max-width:768px){.stats-section.teacher-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.stats-section.teacher-stats,.stats-section.student-stats{grid-template-columns:1fr}}.loading-stats,.error-stats{flex:1;text-align:center;padding:40px;color:var(--color-text-secondary);background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.error-stats{color:var(--color-error)}.stat-card{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);display:flex;gap:var(--spacing-md);align-items:center;flex:1;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card-clickable{cursor:pointer;position:relative}.stat-card-clickable:after{content:"→";position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);font-size:20px;color:var(--color-text-secondary);opacity:0;transition:opacity var(--transition-fast),right var(--transition-fast)}.stat-card-clickable:hover:after{opacity:1;right:12px}.stat-card-clickable:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.stat-card.clickable{cursor:pointer;user-select:none}.stat-card.clickable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.stat-card.clickable:active{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card.class-theme .stat-icon-container{background-color:var(--color-primary-light)}.stat-card.students-theme .stat-icon-container{background-color:#27ae601a}.stat-card.homework-theme .stat-icon-container{background-color:#f39c121a}.stat-card.completed-theme .stat-icon-container{background-color:#9b59b61a}.stat-card.score-theme .stat-icon-container{background-color:#e74c3c1a}.stat-card.rate-theme .stat-icon-container{background-color:#9b59b61a}.stat-card.pending-theme .stat-icon-container{background-color:#f39c121a}.stat-icon-container{background-color:var(--color-primary-light);border-radius:9999px;padding:12px;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.stat-icon{width:24px;height:24px;background-size:cover}.stat-content{display:flex;flex-direction:column}.stat-title{color:#7f8c8d;line-height:20px;margin-bottom:4px}.stat-number{display:flex;align-items:baseline}.stat-number .count{color:#2c3e50;font-size:30px;font-weight:700;line-height:36px}.stat-number .unit{color:#2c3e50;font-size:16px;font-weight:400;line-height:36px;margin-left:4px}.dashboard-section{display:flex;gap:var(--spacing-md);padding:var(--spacing-sm) 0}.task-list-container{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px;flex:1;display:flex;flex-direction:column;gap:12px}.task-list-title{color:#2c3e50;font-size:18px;font-weight:700;line-height:28px}.task-list{display:flex;flex-direction:column;gap:12px;margin-top:4px}.task-item{background-color:#fff3e0;border-radius:8px;padding:12px;display:flex;gap:12px;align-items:center;transition:background-color .2s ease}.task-item:hover{background-color:#ffe0b2}.task-item.urgent{background-color:#ffebee;border-left:4px solid #e74c3c}.task-item.warning{background-color:#fff8e1;border-left:4px solid #f39c12}.task-item.info{background-color:#e3f2fd;border-left:4px solid #3498db}.task-item.success{background-color:#e8f5e8;border-left:4px solid #27ae60}.task-item.new{background-color:#f3e5f5;border-left:4px solid #9b59b6}.task-item.error{background-color:#ffebee;border-left:4px solid #e74c3c}.task-item.loading{background-color:#f5f5f5;opacity:.7}.task-icon{width:20px;height:20px;background-size:cover}.task-text{color:#2c3e50;line-height:20px}.chart-container{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px;flex:1;display:flex;flex-direction:column;gap:16px}.chart-title{color:#2c3e50;font-size:18px;font-weight:700;line-height:28px}.chart-content{flex:1;display:flex;flex-direction:column}.chart-loading{display:flex;justify-content:center;align-items:center;height:200px;color:#7f8c8d}.chart-error,.chart-no-data{display:flex;flex-direction:column;justify-content:center;align-items:center;height:200px;color:#7f8c8d;text-align:center}.chart-data{display:flex;flex-direction:column;gap:16px}.chart-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;padding:16px;background-color:#f8f9fa;border-radius:8px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-item .label{font-size:12px;color:#7f8c8d}.stat-item .value{font-size:16px;font-weight:600;color:#2c3e50}.chart-bars{display:flex;align-items:end;justify-content:space-around;height:120px;padding:16px;background-color:#fff;border:1px solid #e9ecef;border-radius:8px}.bar-container{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:40px}.bar{width:20px;min-height:4px;border-radius:2px;transition:all .3s ease;cursor:pointer}.bar:hover{opacity:.8;transform:scaleX(1.2)}.bar-label{font-size:12px;color:#7f8c8d}.chart-line-container{width:100%;height:220px;padding:16px;background-color:#fff;border:1px solid #e9ecef;border-radius:8px;display:flex;justify-content:center;align-items:center}.chart-echarts-container{width:100%;height:240px}.chart-placeholder{display:flex;justify-content:center;align-items:center;height:200px}.chart-image{width:100%;height:240px;display:flex;justify-content:center;align-items:center}.chart-svg{width:100%;height:100%;background-size:cover}.actions-section{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px;display:flex;flex-direction:column;gap:12px}.action-buttons-title{color:#2c3e50;font-size:18px;font-weight:700;line-height:28px}.action-buttons{display:flex;gap:16px}.action-button{background-color:var(--color-primary);border:none;border-radius:6px;padding:10px 20px;display:inline-flex;gap:6px;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:#fff;font-weight:500;font-size:14px;white-space:nowrap}.action-button:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-md)}.action-icon{width:20px;height:20px;background-size:cover}.action-text{color:#fff;font-weight:500;line-height:20px;text-align:center}@media(max-width:650px){.stats-section{flex-direction:column;gap:12px}.dashboard-section{flex-direction:column;gap:16px;padding:16px 0}.action-buttons{flex-wrap:wrap;gap:12px}.action-button{flex:1;min-width:140px;padding:10px 16px;margin-top:8px}.page-header{padding:0 8px}.page-header h1{font-size:20px}.date-welcome{font-size:14px;color:#7f8c8d}.stat-card,.task-list-container,.chart-container,.actions-section{padding:16px}.chart-image{height:200px}.chart-stats{grid-template-columns:repeat(2,1fr)}.chart-bars{height:100px}}.class-management-container{display:flex;flex-direction:column;gap:8px}.class-controls{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-md);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.search-box{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:448px;display:flex;align-items:center;gap:var(--spacing-sm);padding:8px 16px 8px 12px;transition:border-color var(--transition-normal)}.search-icon{width:20px;height:20px}.search-input{border:none;outline:none;flex:1;font-size:var(--font-size-base);line-height:20px;color:#9ca3af;width:392px;background-color:transparent}.create-class-btn{background-color:var(--color-primary);border:none;border-radius:6px;color:#fff;font-weight:500;font-size:14px;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all .3s ease;white-space:nowrap}.create-class-btn:hover{background-color:var(--color-primary-hover);box-shadow:var(--shadow-md)}.date-welcome{font-size:var(--font-size-base);color:var(--color-text-secondary)}.class-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.class-item{background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);display:flex;align-items:center;justify-content:space-between}.class-info{display:flex;align-items:center;flex:1}.class-icon{background-color:var(--color-primary-light);border-radius:9999px;padding:16px;width:64px;height:64px;display:flex;justify-content:center;align-items:center}.class-details{display:flex;flex-direction:column;gap:4px;flex:1}.class-name-container{display:flex;flex-direction:column;margin-bottom:8px}.class-description{font-size:12px;color:#7f8c8d;margin:4px 0 0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:70%;word-wrap:break-word}.class-name{color:#2c3e50;font-size:18px;font-weight:700;line-height:28px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.join-type-tag{font-size:12px;font-weight:500;line-height:16px;padding:4px 8px;border-radius:4px}.join-type-tag.public{background-color:#2ecc711a;color:#27ae60}.join-type-tag.private{background-color:#e74c3c1a;color:#e74c3c}.class-students{display:flex;align-items:center;gap:8px;color:#7f8c8d;line-height:20px}.class-meta{display:flex;align-items:center;gap:16px;color:#7f8c8d;line-height:20px}.class-date,.class-score{display:flex;align-items:center;gap:8px}.score-value{font-weight:700;line-height:20px}.class-actions{display:flex;gap:12px;margin-left:auto}.manage-btn{background-color:#3498db;border:none;border-radius:8px;color:#fff;font-weight:500;line-height:20px;padding:8px 20px;display:flex;align-items:center;cursor:pointer;transition:background-color .3s ease;width:100px}.manage-btn:hover{background-color:#2980b9}.homework-btn{background-color:#fff;border:1px solid #3498DB;border-radius:8px;color:#3498db;font-weight:500;line-height:20px;padding:8px 21px;display:flex;align-items:center;cursor:pointer;transition:all .3s ease;width:100px}.homework-btn:hover{background-color:#3498db1a}@media(max-width:870px){.class-management-container{gap:8px}.class-controls{flex-direction:column;gap:12px;padding:12px}.search-box,.create-class-btn,.search-input{width:100%}.class-item{flex-direction:column;align-items:flex-start;gap:16px;padding:16px}.class-info{width:100%}.class-meta{flex-direction:column;align-items:flex-start;gap:8px;margin-left:0}.class-actions{margin-left:0;width:100%;justify-content:space-between}.manage-btn,.homework-btn{flex:1;width:auto;justify-content:center}.page-header h1{font-size:20px}.date-welcome{font-size:14px;color:#7f8c8d}.class-name{font-size:16px}}.new-class-container{background-color:#fff;border-radius:8px;box-shadow:0 25px 50px -12px #00000040;margin:0 auto;overflow:hidden;width:50vw;max-width:calc(100vw - 32px)}.form-layout{display:flex;gap:32px;align-items:flex-start}.form-column{flex:1;display:flex;flex-direction:column;gap:16px}.left-column{width:50%}.right-column{width:50%;background-color:#f8f9fa;border:1px solid #E5E7EB;border-radius:8px;padding:10px}.new-class-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid #E5E5E5}.new-class-header h1{font-size:24px;font-weight:700;color:#2c3e50;margin:0;line-height:32px}.close-btn{background:none;border:none;font-size:24px;color:#7f8c8d;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.new-class-form{padding:16px 32px 32px}.form-section{margin-bottom:12px}.form-row{display:flex;justify-content:space-between;gap:32px}.class-form-group,.form-group{flex:1;display:flex;flex-direction:column;gap:8px}.horizontal-form-group{display:flex;align-items:center;gap:24px;margin-bottom:24px}.tag-input-container{margin-top:8px}.tags-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border:1px solid #E5E5E5;border-radius:8px;min-height:40px}.tag-item{display:flex;align-items:center;background-color:#ecf0f1;color:#2c3e50;border-radius:4px;padding:4px 8px;gap:4px}.tag-text{font-size:14px;line-height:20px}.tag-remove-btn{background:none;border:none;color:#7f8c8d;font-size:16px;line-height:1;cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.tag-remove-btn:hover{color:#c0392b}.tag-input{flex:1;border:none;outline:none;font-size:14px;line-height:20px;padding:4px 0;min-width:100px}.tag-input::placeholder{color:#9ca3af}.horizontal-form-group .form-label{min-width:80px}.horizontal-form-group .form-input{flex:1}.form-label{font-size:14px;font-weight:500;color:#2c3e50;line-height:20px}.required{color:#e74c3c}.form-input{background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px 12px;font-size:14px;line-height:20px;color:#2c3e50;outline:none;transition:border-color .3s ease}.form-input:focus{border-color:#3498db}.form-input::placeholder{color:#9ca3af}.datetime-picker-container{position:relative;display:flex;align-items:center;border:1px solid #E5E5E5;border-radius:6px;overflow:hidden;transition:border-color .3s ease}.datetime-picker-container:focus-within{border-color:#3498db}.datetime-input{background-color:#fff;border:none;border-radius:6px;padding:10px 36px 10px 12px;font-size:14px;line-height:20px;color:#2c3e50;outline:none;flex:1;cursor:pointer;width:100%;z-index:1}.datetime-input::placeholder{color:#9ca3af}.datetime-input::-webkit-calendar-picker-indicator{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;cursor:pointer;opacity:0;z-index:2}.datetime-input::-moz-calendar-picker-indicator{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;cursor:pointer;opacity:0;z-index:2}.datetime-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;pointer-events:none;z-index:1}.datetime-icon img{width:100%;height:100%;object-fit:contain}.form-textarea{background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:10px 12px;font-size:14px;line-height:20px;color:#2c3e50;outline:none;resize:vertical;min-height:40px;height:60px;transition:border-color .3s ease}.form-textarea:focus{border-color:#3498db}.form-textarea::placeholder{color:#9ca3af}.input-counter{font-size:12px;color:#9ca3af;text-align:right;margin-top:4px}.error-message{font-size:12px;color:#e74c3c;margin-top:4px}.tag-input:disabled{background-color:#f8f9fa;cursor:not-allowed}.avatar-selector{display:flex;flex-direction:column;gap:16px;width:100%}.avatar-options-container{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:0 8px 0 0;overflow-y:auto;max-height:200px;scrollbar-width:thin;scrollbar-color:#BDC3C7 #F1F2F6}.avatar-option{aspect-ratio:1;max-width:120px;justify-self:center}.avatar-options-container::-webkit-scrollbar{width:6px}.avatar-options-container::-webkit-scrollbar-track{background:#f1f2f6;border-radius:3px}.avatar-options-container::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:3px}.avatar-options-container::-webkit-scrollbar-thumb:hover{background:#95a5a6}.avatar-loading{grid-column:1 / -1;text-align:center;color:#6b7280;font-size:14px;padding:40px 0}.avatar-option{background-color:#fff;border:2px solid transparent;border-radius:8px;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 1px 2px #0000000d;aspect-ratio:1}.avatar-option:hover{border-color:#3498db}.avatar-option.selected{border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.avatar-icon{width:100%;height:100%;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:32px;transition:transform .2s ease}.avatar-option:hover .avatar-icon,.avatar-option.selected .avatar-icon{transform:scale(1.05)}.invitation-section,.advanced-section{background-color:#f8f9fa;border:1px solid #E5E5E5;border-radius:8px;padding:25px}.section-title{font-size:16px;font-weight:700;color:#2c3e50;line-height:24px;margin-bottom:16px}.form-group-title{display:flex;flex-direction:column;gap:4px}.form-hint{font-size:12px;color:#7f8c8d;line-height:16px}.toggle-switch{display:flex;align-items:center;justify-content:flex-end;margin-top:16px}.toggle-input{display:none}.toggle-label{position:relative;display:inline-block;width:44px;height:24px;background-color:#e5e5e5;border-radius:9999px;cursor:pointer;transition:background-color .3s ease}.toggle-label:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .3s ease}.toggle-input:checked+.toggle-label{background-color:#3498db}.toggle-input:checked+.toggle-label:after{transform:translate(20px)}.form-actions{display:flex;justify-content:flex-end;gap:16px;margin-top:32px}.cancel-btn{background-color:#fff;border:1px solid #E5E5E5;border-radius:8px;color:#2c3e50;font-size:14px;font-weight:500;line-height:20px;padding:10px 24px;cursor:pointer;transition:all .3s ease}.cancel-btn:hover{background-color:#f8f9fa}.submit-btn{background-color:#3498db;border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:500;line-height:20px;padding:10px 24px;cursor:pointer;transition:background-color .3s ease}.submit-btn:hover{background-color:#2980b9}@media(max-width:1000px){.new-class-container{margin:16px auto;border-radius:8px;max-width:calc(100vw - 32px);width:95%}.new-class-header{padding:16px 24px}.new-class-header h1{font-size:20px}.new-class-form{padding:16px 24px 24px}.form-layout{flex-direction:column;gap:16px}.form-column{width:100%!important}.right-column{background-color:transparent;border:none;padding:0}.form-row{gap:16px}.avatar-options-container{grid-template-columns:repeat(5,1fr);gap:10px}.avatar-option{max-width:80px}.avatar-icon{font-size:20px}.invitation-section,.advanced-section{padding:16px}.form-actions{flex-direction:column}.cancel-btn,.submit-btn{width:100%}}*{box-sizing:border-box;margin:0;padding:0}@media(max-width:768px){.class-info-section,.invite-students-section,.student-search-section,.students-list-section{box-shadow:0 1px 4px #0000000d}.class-detail-container{max-width:100%}.class-info-section{padding:16px}.class-basic-info{flex-direction:column;align-items:flex-start;gap:16px}.class-name h1{font-size:24px}.class-detail-meta{flex-wrap:wrap;gap:16px}.invite-students-section{padding:16px}.invite-content{flex-direction:column;align-items:flex-start;gap:16px}.invite-code-container{width:100%;flex-direction:column;align-items:flex-start}.invite-actions{justify-content:flex-start;gap:12px}.students-list-section{padding:0;overflow-x:visible}.students-list-header{display:none!important}.student-item{display:flex!important;grid-template-columns:none;padding:8px 12px;white-space:nowrap;font-size:11px}.student-item-cell{padding:0 8px!important}.student-item-cell.score-status{flex-direction:column;align-items:flex-end;gap:2px}.student-item-cell:nth-child(3),.student-item-cell:nth-child(4),.student-item-cell:nth-child(5){display:none}.student-item-cell.score-status{gap:2px}.status{font-size:11px;padding:2px 6px}.student-info{gap:2px}.student-name,.average-score{font-size:11px!important}.student-item-cell:nth-child(1){width:30px!important;padding-right:5px!important}.student-item-cell:nth-child(2){width:100px!important}.student-item-cell:nth-child(3){width:100px!important}.student-item-cell:nth-child(4){width:120px!important}.student-item-cell:nth-child(5){width:100px!important}.student-item-cell:nth-child(6){width:80px!important}.student-item-cell:nth-child(7){width:60px!important}.student-item-cell:nth-child(8){width:180px!important}.student-avatar{width:32px;height:32px}.student-avatar .avatar-initial{font-size:14px}.view-details-btn,.remove-student-btn{padding:4px 8px!important;gap:4px!important}.view-details-btn img,.remove-student-btn img{width:14px!important;height:14px!important}.view-details-btn span,.remove-student-btn span{font-size:11px!important}.student-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.student-avatar .avatar-initial{color:#fff;font-size:18px;font-weight:600;user-select:none}.student-name,.average-score{font-size:13px;font-weight:500}.status{padding:2px 8px;font-size:11px;text-align:center}.student-item-cell.status{font-size:11px;padding:2px 6px}.actions{display:flex;gap:6px}.students-list-footer{padding:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.total-students{font-size:13px;color:#666}.student-id-email{flex-direction:column;gap:4px}.student-id,.student-email{font-size:14px;color:#666}@media(max-width:480px){.students-list-header{grid-template-columns:30px 1fr 70px 50px 90px;font-size:12px}.student-item{grid-template-columns:30px 1fr 70px 50px 90px;font-size:11px}.student-avatar{width:28px;height:28px}.student-avatar .avatar-initial{font-size:14px}.student-name,.student-score{font-size:12px}.view-details-btn,.remove-student-btn{font-size:12px;padding:3px 6px}}.view-details-btn,.remove-student-btn{font-size:13px;padding:4px 8px}.edit-class-btn,.generate-link-btn,.copy-code-btn,.import-students-btn,.add-student-btn{font-size:13px;padding:8px 16px}.class-name h1{font-size:22px}.invite-students-section h2,.students-list-section h2{font-size:18px}.class-detail-meta,.invite-code-label,.search-input-container input::placeholder{font-size:13px}.student-search-section{padding:16px}.search-content{flex-direction:column;align-items:stretch;gap:12px}.search-input-container,.filter-dropdown,.search-input-container input{width:100%}.class-info-section,.invite-students-section,.students-list-section{margin-bottom:16px}}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f7fa;color:#333;line-height:1.6}.class-detail-container{margin:0 auto;overflow-x:auto}.class-info-section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #00000014;max-width:100%;width:100%}.class-basic-info{display:flex;align-items:center;justify-content:space-between;gap:24px}.class-icon{margin-right:20px}.class-details{flex:1}.class-name{display:flex;gap:8px}.class-name h1{font-size:28px;font-weight:600;color:#1a1a1a;margin:0}.edit-icon{background:none;border:none;cursor:pointer;padding:4px}.class-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.class-tag{background-color:#ecf0f1;color:#2c3e50;font-size:12px;font-weight:500;line-height:16px;padding:4px 8px;border-radius:4px}.class-tag.public{background-color:#d5f5e3;color:#239b56}.class-tag.private{background-color:#fadbd8;color:#c0392b}.class-detail-meta{display:flex;gap:32px;font-size:14px;color:#666}.meta-item{display:flex;align-items:center;gap:8px}.average-score-value{color:#1b365d;font-weight:500}.edit-class-btn{background-color:#3498db;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.invite-students-section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 2px 8px #00000014;max-width:100%;width:100%}.invite-students-section h2{font-size:20px;font-weight:600;color:#1a1a1a;margin-bottom:16px}.invite-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.invite-actions{flex:1;display:flex;justify-content:flex-end}.invite-code-container{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.invite-code-label{font-size:14px;color:#666;white-space:nowrap}.invite-code{background:#f8f9fa;padding:12px 16px;border-radius:8px;font-weight:500;font-size:16px;color:#1b365d;border:1px solid #e9ecef;font-family:Courier New,Courier,monospace;white-space:nowrap}.invite-link-container{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.invite-link-label{font-size:14px;color:#666;white-space:nowrap}.invite-link{background:#f8f9fa;padding:12px 16px;border-radius:8px;font-weight:500;font-size:14px;color:#007bff;overflow-wrap:break-word;max-width:500px}.copy-link-btn{font-size:13px;padding:8px 16px;background-color:#f8f9fa;color:#333;border:1px solid #ddd;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.copy-link-btn:hover{background-color:#e9ecef;border-color:#c6c8ca}.generate-link-btn,.copy-code-btn{background-color:#f0f4f8;color:#3498db;border:1px solid #3498DB;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.import-students-btn{background-color:#3498db;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.student-search-section{background:#fff;padding:24px;box-shadow:0 2px 8px #00000014;max-width:100%;width:100%}.search-content{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-input-container{position:relative;min-width:200px}.search-input-container img{position:absolute;left:16px;top:50%;transform:translateY(-50%)}.search-input-container input{padding:12px 16px 12px 48px;border:1px solid #e9ecef;border-radius:8px;font-size:14px;color:#333;background-color:#fff}.search-input-container input:focus{outline:none;border-color:#1b365d;background-color:#fff}.filter-dropdown{position:relative;display:flex;align-items:center;gap:8px;padding:12px 16px;background-color:#fff;border:1px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;min-width:140px;flex:1;justify-content:space-between}.filter-dropdown:hover{border-color:#1b365d}.filter-dropdown span{color:#333;line-height:20px}.dropdown-menu{position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:100;min-width:100%;margin-top:4px}.dropdown-item{padding:10px 16px;font-size:14px;color:#333;cursor:pointer;transition:background-color .3s ease}.add-student-btn{background-color:#3498db;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;white-space:nowrap}.students-list-section{background:#fff;border-radius:8px;margin-bottom:24px;box-shadow:0 1px 2px #0000000d;max-width:100%;width:100%;overflow-y:hidden}.students-list-scroll-container{overflow-x:scroll;width:100%;max-width:100%;min-width:max-content;padding-bottom:10px}.students-list-header{display:flex;flex-direction:row;align-items:center;padding:12px 24px;background-color:#f8f9fa;border-bottom:1px solid #E5E5E5;font-size:14px;font-weight:500;color:#7f8c8d;height:48px;min-width:max-content}.student-item{display:flex;flex-direction:row;align-items:center;padding:16px 24px;border-bottom:1px solid #E5E5E5;font-size:14px;height:72px;min-width:max-content;position:relative}.header-item{line-height:20px;min-height:20px;display:flex;align-items:center}.header-item:nth-child(1){width:80px}.header-item:nth-child(2){width:150px}.header-item:nth-child(3){width:200px}.header-item:nth-child(4){width:140px}.header-item:nth-child(5){width:110px}.header-item:nth-child(6){width:120px}.header-item:nth-child(7){width:120px}.header-item:nth-child(8){width:200px}.student-item-cell{display:flex;align-items:center;line-height:20px;color:#2c3e50}.student-item-cell:nth-child(1){width:60px}.student-item-cell:nth-child(2){width:15%}.student-item-cell:nth-child(3){width:200px}.student-item-cell:nth-child(4){width:150px}.student-item-cell:nth-child(5){width:100px}.student-item-cell:nth-child(6){width:100px}.student-item-cell:nth-child(7){width:100px}.student-item-cell:nth-child(8){width:200px}.student-item:last-child{border-bottom:1px solid #E5E5E5}.student-info{gap:8px;display:flex;align-items:center;flex-wrap:nowrap}.student-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.student-avatar .avatar-initial{color:#fff;font-size:18px;font-weight:600;user-select:none}.student-name{font-weight:500}.student-id-email{flex-direction:column;align-items:flex-start;gap:2px}.student-id{color:#2c3e50;font-weight:400;line-height:20px}.student-email{color:#7f8c8d;font-size:14px;font-weight:400;line-height:16px}.average-score{font-weight:700;line-height:20px}.status{padding:4.5px 12px;font-size:14px;font-weight:500;white-space:nowrap;align-items:center;justify-content:center}.status.active{background-color:#27ae601a;color:#27ae60;width:60px}.status.inactive{background-color:#95a5a61a;color:#95a5a6;width:60px}.status.general{background-color:#f1c40f1a;color:#f1c40f;width:60px}.status.not-started{background-color:#e74c3c1a;color:#e74c3c;width:60px}.status.unknown{background-color:#95a5a61a;color:#95a5a6;width:60px}.actions{gap:24px;display:flex;align-items:center;justify-content:flex-start;position:relative;z-index:5}.view-details-btn,.remove-student-btn{display:flex;align-items:center;gap:4px;padding:0;background:none;border:none;cursor:pointer;font-size:14px;font-weight:500;position:relative;z-index:10;pointer-events:auto}.view-details-btn img,.remove-student-btn img{width:16px;height:16px}.view-details-btn{color:#3498db}.view-details-btn img{margin-right:4px;margin-bottom:0}.remove-student-btn{color:#e74c3c}.remove-student-btn img{margin-right:4px;margin-bottom:0}.students-list-footer{display:flex;justify-content:space-between;align-items:center;padding:8px;font-size:14px;color:#666;height:auto;flex-wrap:wrap;gap:16px}.total-students{font-weight:500}.dangerous-operations-section{background:#fff;border-radius:8px;padding:26px;box-shadow:0 1px 2px #0000000d;border:2px solid rgba(231,76,60,.3);display:flex;justify-content:space-between;align-items:center}.danger-content{display:flex;flex-direction:column;gap:8px}.danger-title{display:flex;align-items:center;gap:16px}.danger-icon{margin-top:4px}.danger-title-text{font-size:18px;font-weight:700;color:#2c3e50;line-height:28px}.danger-description{font-size:14px;color:#7f8c8d;line-height:20px;width:100%;margin-bottom:0;word-wrap:break-word;overflow-wrap:break-word}.delete-class-btn{background-color:#e74c3c;color:#fff;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;width:120px;height:36px}@media(max-width:768px){.dangerous-operations-section{flex-direction:column;align-items:flex-start;gap:20px;padding:20px}.danger-description{width:100%;font-size:13px;line-height:18px}.delete-class-btn{align-self:center;width:auto;min-width:120px}.class-basic-info{flex-direction:column;align-items:flex-start;gap:20px}.class-detail-meta{flex-direction:column;gap:12px}.invite-content{flex-direction:column;align-items:flex-start;gap:16px}.invite-code-container{flex-direction:column;align-items:flex-start;gap:12px;width:100%}.invite-actions{flex:1;justify-content:flex-end}.search-content{flex-direction:column;align-items:flex-start;gap:12px;width:100%}.search-input-container{width:100%;min-width:auto}.students-list-header,.student-item{grid-template-columns:1fr;gap:12px}.students-list-header{display:none}.student-item{padding:20px;border:1px solid #e9ecef;margin-bottom:12px;border-radius:8px}.student-item-cell{border-bottom:1px dashed #f0f0f0}.student-item-cell:last-child{border-bottom:none}.student-item-cell:before{content:attr(data-label);font-weight:500;color:#666}.students-list-footer{flex-direction:column;align-items:flex-start;gap:16px}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;width:100%;max-width:500px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #E5E7EB}.modal-header h3{font-size:18px;font-weight:600;color:#1f2937;margin:0}.close-btn{background:none;border:none;font-size:24px;color:#9ca3af;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.close-btn:hover:not(:disabled){background-color:#f3f4f6;color:#6b7280}.close-btn:disabled{cursor:not-allowed;opacity:.5}.modal-body{padding:24px;max-height:calc(80vh - 160px);overflow-y:auto}.confirm-warning{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.confirm-warning img{margin-top:2px}.confirm-warning p{font-size:16px;font-weight:500;color:#1f2937;margin:0}.confirm-description{font-size:14px;color:#6b7280;line-height:20px;margin:0}.modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #E5E7EB;background-color:#f9fafb}.modal-footer button{padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.cancel-btn{background-color:#fff;border-color:#d1d5db;color:#374151}.cancel-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#9ca3af}.confirm-delete-btn{background-color:#ef4444;border-color:#ef4444;color:#fff}.confirm-delete-btn:hover:not(:disabled){background-color:#dc2626;border-color:#dc2626}.modal-footer button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:640px){.modal-container{margin:16px;max-width:calc(100% - 32px)}.modal-header,.modal-body,.modal-footer{padding:16px}.modal-header h3{font-size:16px}.confirm-warning p{font-size:14px}.modal-footer{flex-direction:column-reverse}.modal-footer button{width:100%}}.loading-container,.error-container{display:flex;justify-content:center;align-items:center;height:400px;font-size:16px;color:#666}.error-container{color:#e74c3c}.class-description{font-size:14px;color:#666;margin:8px 0;line-height:1.5}.edit-name-container{display:flex;align-items:center}.edit-name-input{font-size:28px;font-weight:600;padding:8px 12px;border:2px solid #007bff;border-radius:6px;outline:none;min-width:300px;transition:border-color .3s ease}.edit-name-input:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff1a}.char-count{font-size:14px;color:#666;margin-left:12px;align-self:center;min-width:45px;text-align:right}.copy-code-btn{display:inline-flex;align-items:center;gap:6px;transition:all .3s ease}.copy-code-btn:hover{background-color:#e8f0fe}.form-group{margin-bottom:12px}.form-group label{display:block;font-size:14px;font-weight:500;color:#333}.form-input,.form-textarea{width:100%;padding:10px 12px;border:1px solid #e9ecef;border-radius:6px;font-size:14px;color:#333;background-color:#fff;transition:border-color .2s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.form-textarea{resize:vertical;min-height:40px}.form-hint{font-size:12px;color:#888;margin-top:4px}.checkbox-container{display:flex;align-items:center;gap:8px;margin-bottom:6px}.form-checkbox{width:16px;height:16px;cursor:pointer}.checkbox-label{font-size:14px;color:#333;cursor:pointer;user-select:none}.confirm-save-btn{background-color:#4caf50;color:#fff;border:none;border-radius:4px;padding:10px 20px;cursor:pointer;font-size:14px;transition:background-color .3s;margin-right:10px}.add-student-modal{max-width:600px}.search-student-container{margin-bottom:20px}.search-input-wrapper{position:relative;display:flex;align-items:center;width:100%}.search-student-input{width:100%;padding:12px 16px 12px 48px;border:1px solid #e9ecef;border-radius:8px;font-size:14px;color:#333;background-color:#fff}.search-student-input:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none}.search-results-container{max-height:300px;overflow-y:auto;margin-bottom:20px;border:1px solid #e9ecef;border-radius:8px;background-color:#fff}.search-loading{padding:20px;text-align:center;color:#666;font-size:14px}.search-results-list{padding:8px 0}.search-result-item{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:background-color .2s ease}.search-result-item:hover{background-color:#f8f9fa}.search-result-item.selected{background-color:#e8f4fd;border-left:3px solid #3498DB}.search-result-item .student-avatar{margin-right:12px}.search-result-item .student-avatar .avatar-initial{font-size:16px}.search-result-item .student-info{flex:1;display:flex;flex-direction:column;gap:4px}.search-result-item .student-name{font-size:14px;font-weight:500;color:#333}.search-result-item .student-id-email{font-size:12px;color:#666}.search-result-item .student-role{font-size:12px;color:#999;padding:2px 8px;background-color:#f0f0f0;border-radius:10px}.no-results,.empty-search{padding:20px;text-align:center;color:#666;font-size:14px}.selected-student-info{display:flex;align-items:center;padding:12px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;gap:12px}.selected-student-label{font-size:14px;font-weight:500;color:#333;min-width:70px}.selected-student-details{display:flex;align-items:center;gap:12px;flex:1}.selected-student-details .student-avatar{width:32px;height:32px}.selected-student-details .student-avatar .avatar-initial{font-size:14px}.selected-student-details .student-info{display:flex;flex-direction:column;gap:2px}.selected-student-details .student-name{font-size:14px;font-weight:500;color:#333}.selected-student-details .student-id-email{font-size:12px;color:#666}.import-students-modal{max-width:600px}.import-method-tabs{display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.import-method-tabs .tab-btn{flex:1;padding:12px 20px;background:none;border:none;border-bottom:3px solid transparent;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative;bottom:-2px}.import-method-tabs .tab-btn:hover:not(:disabled){color:#3498db;background-color:#f8f9fa}.import-method-tabs .tab-btn.active{color:#3498db;border-bottom-color:#3498db;font-weight:600}.import-method-tabs .tab-btn:disabled{cursor:not-allowed;opacity:.6}.import-instructions{background-color:#f8f9fa;padding:16px;border-radius:8px;margin-bottom:20px}.import-instructions h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#2c3e50}.import-instructions ul{margin:0;padding-left:20px}.import-instructions li{margin-bottom:8px;color:#666;font-size:14px}.file-upload-container{margin:20px 0;text-align:center}.file-upload-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background-color:#3498db;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .3s ease}.file-upload-btn:hover{background-color:#2980b9}.text-paste-container{margin:20px 0}.paste-textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:Courier New,monospace;line-height:1.6;resize:vertical;transition:border-color .3s ease;box-sizing:border-box}.paste-textarea:focus{outline:none;border-color:#3498db}.paste-textarea:disabled{background-color:#f5f5f5;cursor:not-allowed}.paste-textarea::placeholder{color:#999;font-size:13px}.import-results{margin-top:20px;padding:16px;background-color:#f8f9fa;border-radius:8px}.import-results h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#2c3e50}.result-summary{margin-bottom:16px}.result-summary p{margin:8px 0;font-size:14px;color:#666}.success-count{color:#27ae60;font-weight:600;font-size:16px}.failed-count{color:#e74c3c;font-weight:600;font-size:16px}.failed-details{margin-top:16px;padding-top:16px;border-top:1px solid #dee2e6}.failed-details h5{margin:0 0 12px;font-size:14px;font-weight:600;color:#e74c3c}.failed-details ul{margin:0;padding-left:20px;max-height:200px;overflow-y:auto}.failed-details li{margin-bottom:8px;font-size:13px;color:#666}.failed-userid{font-weight:600;color:#2c3e50}.homework-center-container{display:flex;flex-direction:column;gap:8px}.new-homework-btn{background:var(--color-primary);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border:none;cursor:pointer;transition:all .3s ease;color:#fff;font-size:14px;font-weight:500;white-space:nowrap}.new-homework-btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}.new-homework-btn span{font-weight:500}.homework-filter-section{background:var(--color-surface);box-shadow:var(--shadow-sm);border-radius:var(--radius-md);padding:12px;display:flex;gap:var(--spacing-md);flex-direction:row;align-items:stretch}.search-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;display:flex;width:480px;gap:var(--spacing-sm);align-items:center;padding:14px 17px;height:48px;transition:border-color var(--transition-normal)}.search-box:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.search-box input{border:none;outline:none;width:100%;color:#9ca3af;line-height:20px;background:transparent}.filter-select{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex;width:160px;height:36px;justify-content:space-between;align-items:center;padding:0 32px 0 12px;position:relative;overflow:hidden;cursor:pointer;box-sizing:border-box}.filter-select select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;background:transparent;width:100%;color:var(--color-text-primary);font-size:var(--font-size-base);cursor:pointer;height:100%}.filter-select svg{position:absolute;right:10px;pointer-events:none;z-index:1;width:12px;height:12px}.filter-select span:first-child{color:var(--color-text-primary);font-size:var(--font-size-base)}.filter-select span:last-child{color:#7f8c8d;line-height:20px}.filter-dropdown{position:relative;display:flex;align-items:center;gap:8px;padding:14px 17px;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px;min-width:180px;height:48px;justify-content:space-between}.filter-dropdown span{color:#2c3e50;line-height:20px}.filter-dropdown svg{flex-shrink:0}.dropdown-menu{position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;box-shadow:0 4px 12px #0000001a;z-index:100;min-width:100%;margin-top:4px}.dropdown-item{padding:10px 16px;font-size:14px;color:#2c3e50;cursor:pointer;transition:background-color .3s ease}.homework-list{display:flex;flex-direction:column;gap:8px;width:100%;align-items:stretch}.homework-item{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;display:flex;flex-direction:row;align-items:center;padding:16px 24px;gap:24px;min-height:80px;justify-content:flex-start}.homework-item>div{text-align:left!important;justify-content:flex-start!important;margin-left:0!important;margin-right:auto!important}.homework-info{gap:8px;display:flex;flex-direction:column;align-items:flex-start;min-width:350px;flex-grow:1;position:relative}.homework-info .homework-status{display:flex;position:absolute;top:0;right:0;align-self:flex-start;margin-right:16px;margin-top:4px}@media(min-width:651px)and (max-width:870px){.homework-info .homework-status{display:flex;position:absolute;top:0;right:0;align-self:flex-start}}.homework-status-large{display:none}@media(min-width:871px){.homework-info .homework-status{display:none}.homework-status-large{display:flex;margin-right:16px}@media(min-width:1261px){.homework-item{flex-direction:row;align-items:center;justify-content:flex-start}.homework-right-info{margin-left:auto}}}.homework-item-title{font-size:16px;font-weight:700;line-height:24px;color:#2c3e50;margin:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px}.homework-meta-info{display:flex;flex-direction:row;align-items:center;gap:24px}.homework-class{gap:8px;display:flex;flex-direction:row;align-items:center}.homework-class .label{color:#7f8c8d;line-height:20px}.homework-class .value{color:#2c3e50;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.homework-publish-time{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:0;margin-right:0}.homework-publish-time .value{color:#2c3e50;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.homework-deadline{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:0;margin-bottom:0;margin-left:0;min-width:140px;max-width:180px}.homework-deadline .label{color:#7f8c8d;font-size:12px;line-height:16px}.homework-deadline .value{color:#2c3e50;font-weight:500;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.homework-completion{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:0;margin-bottom:0;margin-left:0;min-width:100px;max-width:140px}.homework-completion .label{color:#7f8c8d;font-size:12px;line-height:16px}.homework-completion .value{color:#2c3e50;font-weight:500;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.homework-score{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:0;margin-bottom:0;margin-left:0;min-width:80px;max-width:120px}.homework-score .label{color:#7f8c8d;font-size:12px;line-height:16px}.homework-score .value{color:#3498db;font-weight:700;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.tooltip{position:relative;display:inline-block}.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:#2c3e50;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-100px;opacity:0;transition:opacity .3s;font-size:12px;line-height:16px;white-space:normal}.tooltip .tooltiptext:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#2C3E50 transparent transparent transparent}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.homework-right-info{display:flex;align-items:center;gap:16px;margin-left:auto}.homework-status{display:flex;align-items:center;margin-top:0;margin-bottom:0;margin-left:0}.status-tag{background:#27ae60;border-radius:9999px;padding:4px 16px;color:#fff;font-size:12px;font-weight:500;line-height:16px;white-space:nowrap}.status-tag.draft{background:#95a5a6}.status-tag.completed{background:#27ae60}.status-tag.in-progress{background:#3498db}.status-tag.expired{background:#e74c3c}.status-tag.closed{background:#f27f04}.status-tag.draft{background:#4b4b4a}.homework-actions{display:flex;gap:0;margin-top:10px;margin-bottom:10px;margin-left:0}.action-btn{background:#fff;border-radius:6px;padding:8px;display:flex;width:36px;height:36px;justify-content:center;align-items:center;border:1px solid #E5E5E5;cursor:pointer}@media(max-width:1260px){.homework-item{flex-direction:column;align-items:flex-start;padding:16px;gap:16px}.homework-info{width:100%}.homework-right-info{display:flex;flex-direction:row;gap:16px;margin-left:0;width:100%;flex-wrap:wrap;align-items:flex-start}.homework-deadline,.homework-completion,.homework-score{flex:1;min-width:120px}.homework-status{align-self:center}}.action-btn:not(:last-child){margin-right:8px}.view-btn{border-color:#3498db}.edit-btn{border-color:#f39c12}.copy-btn{border-color:#95a5a6}.homework-publish-time{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:150px}.homework-publish-time .label{color:#7f8c8d;line-height:20px}.homework-publish-time .value{color:#2c3e50;line-height:20px}.homework-deadline,.homework-completion,.homework-score{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-left:40px}.homework-deadline .label,.homework-completion .label,.homework-score .label{font-size:12px;line-height:16px;color:#7f8c8d}.homework-deadline .value,.homework-completion .value{font-weight:500;line-height:20px;color:#2c3e50}.homework-score .value{font-weight:700;line-height:20px;color:#3498db}.homework-status{margin-left:24px}.homework-actions{display:flex;flex-direction:row;margin-left:8px}.action-btn{background:#f8f9fa;border-radius:6px;padding:8px;display:flex;width:36px;height:36px;justify-content:center;align-items:center;border:none;cursor:pointer}@media(max-width:870px)and (min-width:651px){.homework-item{flex-direction:column;align-items:stretch;gap:16px}.homework-info{width:100%;min-width:auto}.homework-right-info{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px;margin-left:0;width:100%}.homework-deadline,.homework-completion,.homework-score{flex:1;min-width:150px;margin-left:0}.homework-status{margin-left:auto}.homework-actions{margin-left:0;margin-top:0;margin-bottom:0}.homework-info{position:relative}.homework-info .homework-status{display:block;position:absolute;top:0;right:0;align-self:flex-start}.homework-right-info .homework-status{display:none}}@media(max-width:650px){.homework-center-container{gap:12px}.homework-header{flex-direction:column;align-items:stretch;gap:12px}.homework-main-title{font-size:22px;line-height:32px}.homework-date{font-size:13px}.new-homework-btn{width:100%;margin-top:0;margin-bottom:0}.homework-filter-section{flex-direction:column;padding:16px;gap:12px}.search-box,.filter-dropdown{width:100%}.homework-item{flex-direction:column;align-items:stretch;padding:16px;gap:16px}.homework-info{min-width:auto}.homework-item-title{width:100%;max-width:100%}.homework-meta-info{flex-direction:column;align-items:flex-start;gap:8px}.homework-right-info{flex-direction:column;align-items:stretch;gap:12px;margin-left:0}.homework-deadline,.homework-completion,.homework-score{display:flex;flex-direction:row;align-items:center;gap:4px;margin-left:0;min-width:auto;max-width:100%}.homework-deadline .label:after,.homework-completion .label:after,.homework-score .label:after{content:":"}.homework-deadline .value,.homework-completion .value,.homework-score .value{max-width:100%}.homework-status{justify-content:flex-start}.homework-actions{margin-left:0;margin-top:0;margin-bottom:0;justify-content:flex-start}.homework-info{position:relative}.homework-info .homework-status{display:block;position:absolute;top:0;right:0;align-self:flex-start}.homework-right-info .homework-status{display:none}}.confirmation-dialog-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1400;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirmation-dialog{background-color:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:100%;max-width:420px;overflow:hidden;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.confirmation-dialog-header{padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:12px}.confirmation-dialog-title{font-size:18px;font-weight:600;line-height:26px;color:#2c3e50;margin:0;flex:1}.confirmation-dialog-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.confirmation-dialog-icon.warning{background-color:#fff3e0;color:#f57c00}.confirmation-dialog-icon.danger{background-color:#ffe5e5;color:#e74c3c}.confirmation-dialog-icon.info{background-color:#e3f2fd;color:#2196f3}.confirmation-dialog-content{padding:24px}.confirmation-dialog-content p{font-size:15px;line-height:24px;color:#555;margin:0;font-weight:400}.confirmation-dialog-actions{padding:16px 24px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end;gap:12px;background-color:#fafafa}.confirmation-dialog-cancel-btn,.confirmation-dialog-confirm-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .2s ease;border:none;min-width:80px}.confirmation-dialog-cancel-btn{background-color:#f3f4f6;color:#374151}.confirmation-dialog-cancel-btn:hover{background-color:#e5e7eb}.confirmation-dialog-confirm-btn{background-color:#e74c3c;color:#fff;box-shadow:0 2px 4px #e74c3c4d}.confirmation-dialog-confirm-btn:hover{background-color:#d32f2f;box-shadow:0 4px 8px #d32f2f66;transform:translateY(-1px)}.confirmation-dialog-confirm-btn:active{transform:translateY(0)}.confirmation-dialog-actions.delete .confirmation-dialog-confirm-btn{background-color:#e74c3c;box-shadow:0 2px 4px #e74c3c4d}.confirmation-dialog-actions.delete .confirmation-dialog-confirm-btn:hover{background-color:#c0392b;box-shadow:0 4px 8px #c0392b66}.confirmation-dialog-actions.submit .confirmation-dialog-confirm-btn{background-color:#3498db;box-shadow:0 2px 4px #3498db4d}.confirmation-dialog-actions.submit .confirmation-dialog-confirm-btn:hover{background-color:#2980b9;box-shadow:0 4px 8px #2980b966}.new-homework-container{width:100%;min-height:100vh;background-color:var(--color-background);box-sizing:border-box;font-family:Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.new-homework-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px}.header-left{display:flex;flex-direction:column}.page-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--color-text-primary);margin:0 0 8px;line-height:42px}.page-date{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0;line-height:20px}.form-section{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md)}.form-group:last-child{margin-bottom:0}.group-title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-text-primary);margin:0 0 6px;padding-bottom:4px;line-height:24px}.two-column{display:flex;gap:var(--spacing-md);margin-bottom:2px}.two-column>div{flex:1}.form-field{margin-bottom:var(--spacing-lg)}.field-label{display:block;font-size:var(--font-size-base);font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-sm);line-height:20px}.homework-field-input{width:100%;height:24px;padding:12px 16px;font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:6px;box-sizing:border-box;transition:border-color var(--transition-normal)}.homework-field-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.select-wrapper{position:relative}.field-select{width:100%;padding:14px 17px;font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:6px;background-color:var(--color-surface);appearance:none;cursor:pointer;transition:border-color var(--transition-normal);height:48px;line-height:20px}.field-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.select-arrow{position:absolute;top:50%;right:var(--spacing-md);transform:translateY(-50%);color:#9ca3af;font-size:var(--font-size-xs);pointer-events:none}.date-time-wrapper{position:relative}.datetime-input{padding-right:40px;cursor:pointer}.calendar-icon{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:20px;height:20px;background-image:url(https://miaoduo.fbcontent.cn/private/resource/image/19b110cddef8a66-fcead7dd-d3a5-4250-abd8-9c7531443319.svg);background-size:cover;background-repeat:no-repeat;pointer-events:none}.radio-option{margin-bottom:12px;padding:0;border:none;display:flex;align-items:center;transition:all var(--transition-normal)}.radio-option.selected{border-color:var(--color-primary)}.radio-option input[type=radio]{margin-right:12px;transform:scale(1.2);vertical-align:middle;accent-color:var(--color-primary)}.radio-option .radio-custom{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;margin-right:12px;cursor:pointer}.radio-option.selected .radio-custom{border-color:var(--color-primary);background-color:var(--color-primary)}.radio-option .radio-custom:after{content:"";width:12px;height:12px;border-radius:50%;background-color:#fff;opacity:0;transition:opacity .3s ease}.radio-option.selected .radio-custom:after{opacity:1}.radio-option .radio-content{display:flex;flex-direction:column}.radio-option label{font-size:14px;font-weight:500;color:#2c3e50;display:block;cursor:pointer}.option-description{font-size:12px;color:#7f8c8d;margin:12px;line-height:16px}.sentence-hint{background-color:#ebf5ff;border:1px solid #3498DB;border-radius:6px;padding:13px 17px;display:flex;align-items:center;gap:8px}.hint-icon{width:20px;height:20px;background-image:url(https://miaoduo.fbcontent.cn/private/resource/image/19b110cddefaaa5-18a8aaf0-9701-4492-bc1e-1a548d1cb9af.svg);background-size:cover;background-color:transparent;color:transparent;margin-right:0;flex-shrink:0}.sentence-hint p{font-size:14px;color:#3498db;margin:0;line-height:20px}.checkbox-option{margin-bottom:15px;display:flex;align-items:center}.checkbox-option input[type=checkbox]{margin-right:12px;transform:scale(1.2);accent-color:#3498DB}.checkbox-option .checkbox-custom{width:20px;height:20px;border-radius:4px;border:2px solid #3498DB;display:flex;align-items:center;justify-content:center;margin-right:12px;cursor:pointer;background-color:#3498db}.checkbox-option .checkbox-custom:after{content:"";width:12px;height:12px;background-image:url(https://miaoduo.fbcontent.cn/private/resource/image/19b110cddef8409-e4209e89-192e-4ba2-b694-57b45d788443.svg);background-size:cover}.checkbox-option label{font-size:14px;color:#2c3e50;margin:0;cursor:pointer}.left-settings,.right-settings{flex:1}.threshold-input,.retry-input{position:relative;display:inline-block;width:100px}.small-input{padding:8px 12px;height:36px}.content-input-area{margin-top:12px;padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d}.text-input-section{margin-bottom:20px}.text-content-input{width:100%;padding:12px;border:1px solid #E0E0E0;border-radius:8px;font-size:16px;line-height:1.5;resize:vertical;font-family:inherit;transition:border-color .2s ease}.text-content-input:focus{outline:none;border-color:#1677ff;box-shadow:0 0 0 2px #1677ff1a}.listening-sentences-hint{margin-top:12px;padding:12px 16px;background-color:#f0f7ff;border:1px solid #D6E4FF;border-radius:8px;display:flex;gap:12px}.hint-icon{font-size:20px;line-height:1;flex-shrink:0}.hint-text{flex:1;font-size:14px;color:#595959;line-height:1.6}.hint-text strong{color:#1677ff;display:block;margin-bottom:8px}.hint-text ul{margin:0;padding-left:20px;list-style-type:disc}.hint-text li{margin-bottom:4px}.audio-input-section{margin-bottom:20px}.audio-tabs{display:flex;border-bottom:1px solid #E0E0E0;margin-bottom:20px}.audio-tab{padding:10px 20px;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.audio-tab:hover{color:#1677ff}.audio-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}.audio-upload-section{padding:20px 0}.upload-area{text-align:center}.upload-label{display:inline-block;padding:40px 60px;border:2px dashed #D9D9D9;border-radius:8px;cursor:pointer;transition:all .2s ease;background-color:#f8f9fa}.upload-label:hover{border-color:#1677ff;background-color:#1677ff0d}.upload-icon{font-size:48px;margin-bottom:16px}.upload-text{font-size:16px;color:#666}.upload-hint{font-size:12px;color:#999;margin-top:8px}.file-info{display:flex;justify-content:center;align-items:center;margin-top:20px;padding:12px;background-color:#f8f9fa;border-radius:8px;width:fit-content;margin-left:auto;margin-right:auto}.file-name{margin-right:16px;color:#333;font-size:14px}.remove-file-btn{padding:6px 12px;background-color:#fff;border:1px solid #E0E0E0;border-radius:4px;color:#666;cursor:pointer;font-size:12px;transition:all .2s ease}.remove-file-btn:hover{border-color:#ff4d4f;color:#ff4d4f}.audio-record-section{padding:20px 0;text-align:center}.recording-timer{font-size:18px;color:#333;margin-bottom:20px;font-weight:500}.recording-controls{display:flex;justify-content:center;gap:16px;margin-bottom:20px}.start-record-btn,.stop-record-btn,.reset-record-btn{padding:10px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.start-record-btn{background-color:#52c41a;color:#fff}.start-record-btn:hover{background-color:#73d13d}.stop-record-btn{background-color:#ff4d4f;color:#fff}.stop-record-btn:hover{background-color:#ff7875}.reset-record-btn{background-color:#fff;color:#666;border:1px solid #E0E0E0}.reset-record-btn:hover{border-color:#1677ff;color:#1677ff}.recording-info{margin-top:20px}.recording-status{font-size:14px;color:#52c41a;margin-bottom:16px}.recorded-audio{width:100%;max-width:400px}@media(max-width:768px){.content-input-area{padding:8px}.upload-label{padding:30px 40px}.recording-controls{flex-direction:column;align-items:center}}.retry-settings{background-color:#f8f9fa;padding:16px;border-radius:8px;border-left:3px solid #3498DB}.retry-setting-item{display:flex;align-items:center;margin-bottom:12px}.retry-setting-item:last-child{margin-bottom:0}.retry-setting-label{display:inline-block;font-size:14px;color:#2c3e50;margin-right:16px;width:80px;white-space:nowrap}.percentage,.times{position:absolute;top:50%;right:12px;transform:translateY(-50%);font-size:14px;color:#2c3e50;pointer-events:none}.form-footer{display:flex;justify-content:flex-end;gap:12px;padding:0;background-color:transparent;box-shadow:none}.save-draft-btn{font-size:14px;font-weight:500;color:#3498db;background-color:#fff;border:1px solid #3498DB;border-radius:6px;cursor:pointer;transition:all .3s ease;width:104px;height:40px;line-height:20px}.save-draft-btn:hover{background-color:#ebf5ff}.save-draft-btn:disabled{opacity:.6;cursor:not-allowed}.publish-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#fff;background-color:#3498db;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;width:104px;height:40px;line-height:20px}.publish-btn:hover{background-color:#2980b9}.publish-btn:disabled{opacity:.6;cursor:not-allowed}.integrated-audio-player{display:flex;flex-direction:column;background-color:#f8f9fa;border-radius:8px;padding:12px;margin-top:12px;box-shadow:0 1px 3px #0000001a}.player-main{width:100%;margin-bottom:12px}.recorded-audio{width:100%;height:40px;border-radius:6px;background-color:#fff}.player-controls{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-wrap:wrap}.playback-speed-control{display:flex;align-items:center;gap:8px}.speed-label{font-size:14px;color:#2c3e50;font-weight:500}.speed-select{padding:6px 12px;font-size:14px;border:1px solid #E5E5E5;border-radius:4px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.speed-select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db1a}.download-btn{padding:6px 16px;font-size:14px;font-weight:500;color:#3498db;background-color:#fff;border:1px solid #3498DB;border-radius:4px;cursor:pointer;transition:all .3s ease}.download-btn:hover{background-color:#ebf5ff}.class-tags-container{background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;padding:8px 12px;box-shadow:0 1px 3px #0000000d;min-height:48px;box-sizing:border-box;display:flex;flex-direction:column;position:relative}.selected-classes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;align-items:center;flex:1}.class-tag{display:inline-flex;align-items:center;background-color:#ebf5ff;color:#3498db;border-radius:16px;padding:6px 12px;font-size:14px;gap:8px;transition:all .3s ease}.class-tag:hover{background-color:#d6eaf8}.tag-remove{background:none;border:none;color:#3498db;font-size:16px;cursor:pointer;padding:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.tag-remove:hover{background-color:#3498db;color:#fff}.tag-remove:disabled{opacity:.5;cursor:not-allowed}.no-selection{color:#9ca3af;font-size:14px;font-style:italic}.class-options{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;border-top:1px solid #F0F0F0;padding-top:8px;margin-top:2px;position:absolute;top:calc(100% + 1px);left:0;right:0;background-color:#fff;border:1px solid #E5E5E5;border-top:none;border-radius:0 0 6px 6px;box-shadow:0 4px 12px #0000001a;z-index:10}.class-option{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;cursor:pointer;transition:all .3s ease;font-size:14px}.class-option:hover{background-color:#f8f9fa}.class-option.selected{background-color:#ebf5ff;border-left:3px solid #3498DB}.class-option input[type=checkbox]{transform:scale(1.2);accent-color:#3498DB}.class-option:disabled{opacity:.6;cursor:not-allowed}.option-text{flex:1;color:#2c3e50}@media(max-width:768px){.two-column{flex-direction:column;gap:20px}.form-section{padding:20px}.new-homework-header{flex-direction:column;align-items:flex-start;gap:15px}.threshold-input,.retry-input{width:100%;max-width:150px}.player-controls{justify-content:space-between}.class-options{max-height:150px}}.scheduled-publish-section{background-color:#f8f9fa;border:1px solid #E9ECEF;border-radius:8px;padding:16px;margin-top:16px}.scheduled-publish-header{display:flex;align-items:center;gap:12px}.scheduled-publish-label{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#2c3e50;cursor:pointer;margin:0}.scheduled-publish-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin:0}.scheduled-publish-label .label-text{user-select:none}.scheduled-publish-hint{font-size:13px;color:#7f8c8d;margin-left:auto}.scheduled-publish-content{padding-top:12px;border-top:1px solid #E9ECEF;animation:slideDown .3s ease-out}.scheduled-publish-content .form-field{margin-bottom:0}.scheduled-publish-content .form-text{margin-top:6px;font-size:12px;color:#6c757d;line-height:1.4}.content-source-selector{display:flex;gap:20px;margin-bottom:24px}.source-option{position:relative;flex:1;padding:20px;border:2px solid #E8E8E8;border-radius:12px;cursor:pointer;transition:all .3s ease;background-color:#fff}.source-option:hover{border-color:#b0d4f9;background-color:#f9fbfd}.source-option.selected{border-color:#3498db;background:#f0f7ff}.source-option input[type=radio]{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}.source-option input[type=radio]:disabled{cursor:not-allowed}.source-option>label{display:block;cursor:pointer;width:100%;height:100%}.source-option>label{display:flex;align-items:flex-start;gap:12px;width:100%;flex-wrap:nowrap}.source-option>label>div{display:flex;align-items:center;gap:10px;margin-bottom:0;flex-shrink:0}.source-option .option-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#64748b;transition:all .3s ease;flex-shrink:0}.source-option:hover .option-icon{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#3b82f6;transform:translateY(-1px);box-shadow:0 2px 8px #3b82f626}.source-option.selected .option-icon{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 2px 8px #3b82f640}.source-option .option-icon svg{width:20px;height:20px}.source-option .option-title{font-size:15px;font-weight:600;color:#2c3e50;line-height:1.3;display:block;margin:0 0 4px}.source-option .option-description{font-size:12px;color:#7f8c8d;margin:0;line-height:1.4}.source-option .option-text-group{display:flex;flex-direction:column;flex:1;min-width:0}@media(max-width:768px){.content-source-selector{flex-direction:column}}.filter-dropdown{position:relative;min-width:130px;height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:linear-gradient(135deg,#fff,#f8fafc);border:1.5px solid #E2E8F0;border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:14px;color:#334155;box-sizing:border-box;box-shadow:0 1px 2px #0000000a}.filter-dropdown:hover{border-color:#cbd5e1;background:linear-gradient(135deg,#fff,#f1f5f9);box-shadow:0 2px 4px #0000000f}.filter-dropdown.open{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a,0 2px 8px #00000014}.filter-dropdown svg{flex-shrink:0;transition:transform .25s cubic-bezier(.4,0,.2,1);color:#94a3b8;width:16px;height:16px}.filter-dropdown:hover svg{color:#64748b}.filter-dropdown.open svg{transform:rotate(180deg);color:#3b82f6}.filter-dropdown .dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background-color:#fff;border:1px solid #E2E8F0;border-radius:10px;box-shadow:0 10px 40px #0000001f,0 0 0 1px #00000005;z-index:100;overflow:hidden;display:none;padding:6px}.filter-dropdown.open .dropdown-menu{display:block;animation:dropdownSlideIn .25s cubic-bezier(.4,0,.2,1)}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;color:#475569;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);border-radius:6px;margin:0 2px}.dropdown-item:hover{background-color:#f1f5f9;color:#1e293b}.dropdown-item.selected{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1d4ed8;font-weight:600}.dropdown-item.selected:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background-color:#3b82f6;flex-shrink:0}.dropdown-item:not(.selected):before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background-color:transparent;flex-shrink:0}.dropdown-item:first-child{border-radius:6px}.dropdown-item:last-child{border-radius:6px}.question-bank-selector-panel{padding:28px;background:linear-gradient(135deg,#fafbfc,#f8fafc);border:1px solid #E2E8F0;border-radius:14px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000000a}.question-bank-selector-panel:hover{border-color:#cbd5e1;box-shadow:0 4px 20px #94a3b814;transform:translateY(-1px)}.question-bank-type-selector{display:flex;align-items:center;gap:20px;margin-bottom:24px}.question-bank-type-selector .field-label{font-size:14px;font-weight:600;color:#475569;margin:0;white-space:nowrap}.dropdown-selected-text{font-size:14px;font-weight:600;color:#1e293b;white-space:nowrap;letter-spacing:-.01em}.question-bank-select-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 22px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:10px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #3b82f640,0 1px 2px #3b82f626;position:relative;overflow:hidden}.question-bank-select-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.question-bank-select-btn:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 14px #3b82f659,0 2px 4px #3b82f633;transform:translateY(-2px)}.question-bank-select-btn:hover:before{left:100%}.question-bank-select-btn:active{transform:translateY(0);box-shadow:0 1px 3px #3b82f633}.question-bank-select-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;background:linear-gradient(135deg,#cbd5e1,#94a3b8)}.question-bank-select-btn svg{width:18px;height:18px;flex-shrink:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}.question-bank-select-btn:hover svg{transform:scale(1.05)}.selected-question-card{margin-top:24px;padding:22px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1.5px solid #3B82F6;border-radius:14px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #3b82f614}.selected-question-card:hover{border-color:#2563eb;box-shadow:0 4px 16px #3b82f626;transform:translateY(-1px)}.selected-question-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.selected-question-info{flex:1}.selected-question-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}.selected-question-label span:first-child{font-size:13px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.5px}.question-type-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1)}.question-type-tag.listening{background:linear-gradient(135deg,#ddd6fe,#c4b5fd);color:#5b21b6;box-shadow:0 1px 2px #a855f726}.question-type-tag.speaking{background:linear-gradient(135deg,#fed7aa,#fdba74);color:#c2410c;box-shadow:0 1px 2px #fb923c26}.question-type-tag.reading{background:linear-gradient(135deg,#bbf7d0,#86efac);color:#166534;box-shadow:0 1px 2px #22c55e26}.question-type-tag svg{width:14px;height:14px;flex-shrink:0}.question-type-tag:hover{transform:translateY(-1px);box-shadow:0 3px 8px #0000001f}.question-difficulty-tag{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1)}.question-difficulty-tag.easy{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#166534;box-shadow:0 1px 2px #22c55e26}.question-difficulty-tag.medium{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;box-shadow:0 1px 2px #f59e0b26}.question-difficulty-tag.hard{background:linear-gradient(135deg,#fecaca,#fca5a5);color:#991b1b;box-shadow:0 1px 2px #ef444426}.question-difficulty-tag:hover{transform:translateY(-1px);box-shadow:0 3px 8px #0000001f}.selected-question-title{margin:0;font-size:16px;font-weight:600;color:#1e293b;line-height:1.5}.clear-question-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:#fff;border:1.5px solid #E2E8F0;border-radius:8px;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);flex-shrink:0;box-shadow:0 1px 2px #0000000a}.clear-question-btn:hover{background:linear-gradient(135deg,#fef2f2,#ffe5e5);border-color:#f87171;color:#dc2626;transform:scale(1.02);box-shadow:0 2px 6px #dc262626}.clear-question-btn:active{transform:scale(.98)}.clear-question-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.clear-question-btn svg{width:16px;height:16px;flex-shrink:0;transition:transform .2s ease}.clear-question-btn:hover svg{transform:scale(1.1)}.selected-question-preview{margin:12px 0 0;padding:14px;background:#ffffffb3;border-radius:8px;font-size:14px;color:#475569;line-height:1.7;max-height:100px;overflow-y:auto}.selected-question-tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.question-tag-item{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:#fffc;border:1px solid rgba(148,163,184,.2);border-radius:6px;font-size:12px;font-weight:500;color:#64748b;transition:all .2s ease}.question-tag-item:hover{background:#fff;border-color:#94a3b8;color:#334155}@keyframes pulse-subtle{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.9}}.question-bank-select-btn svg{animation:pulse-subtle 2.5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media(max-width:768px){.question-bank-selector-panel{padding:16px}.question-bank-type-selector{flex-direction:column;align-items:stretch;gap:12px}.filter-dropdown{width:100%}.question-bank-select-btn{width:100%;justify-content:center}.selected-question-header{flex-direction:column;gap:12px}.clear-question-btn{width:100%}.selected-question-label{flex-wrap:wrap}}.homework-type-selector{margin-bottom:24px}.homework-type-label{display:block;font-size:14px;font-weight:500;color:#2c3e50;margin-bottom:12px}.homework-type-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.homework-type-option{display:flex;flex-direction:column;align-items:center;padding:24px 20px;background:#fff;border:2px solid #E8E8E8;border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.homework-type-option:hover:not(:disabled){border-color:#3498db;background:#f8fbff;transform:translateY(-2px);box-shadow:0 4px 12px #3498db26}.homework-type-option.active{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-surface);box-shadow:var(--shadow-lg)}.homework-type-option.active:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.homework-type-option:disabled{opacity:.6;cursor:not-allowed}.homework-type-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#3498db;transition:all .3s ease}.homework-type-option:not(.active) .homework-type-icon{background:#f0f3f7}.homework-type-option.active .homework-type-icon{background:#fff3;color:#fff}.homework-type-icon svg{width:24px;height:24px}.homework-type-name{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:4px;transition:color .3s ease}.homework-type-option.active .homework-type-name{color:#fff}.homework-type-desc{font-size:13px;color:#7f8c8d;transition:color .3s ease}.homework-type-option.active .homework-type-desc{color:#fffc}@media(max-width:768px){.homework-type-options{grid-template-columns:1fr}.homework-type-option{flex-direction:row;padding:16px 20px;gap:16px}.homework-type-icon{width:40px;height:40px;margin-bottom:0}.homework-type-icon svg{width:20px;height:20px}.homework-type-name{font-size:15px;margin-bottom:2px}.homework-type-desc{font-size:12px}}.listening-config-form{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.config-section-title{font-size:18px;font-weight:600;color:#2c3e50;margin:0 0 24px;padding-bottom:16px;border-bottom:2px solid #F0F3F7}.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:24px}.config-item{display:flex;flex-direction:column;gap:8px}.config-label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500;color:#2c3e50}.config-hint{font-size:12px;color:#7f8c8d;font-weight:400}.config-input-wrapper,.config-select-wrapper{display:flex;align-items:center;gap:8px;position:relative}.config-input,.config-select{flex:1;padding:12px 16px;font-size:14px;color:#2c3e50;background:#f8f9fa;border:2px solid #E8E8E8;border-radius:8px;transition:all .3s ease;outline:none}.config-input:focus,.config-select:focus{border-color:#3498db;background:#fff;box-shadow:0 0 0 3px #3498db1a}.config-input:disabled,.config-select:disabled{opacity:.6;cursor:not-allowed;background:#f0f3f7}.config-unit{font-size:14px;color:#7f8c8d;font-weight:500;min-width:24px}.config-toggle-wrapper{display:flex;align-items:center}.config-toggle{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#f8f9fa;border:2px solid #E8E8E8;border-radius:8px;cursor:pointer;transition:all .3s ease;outline:none;font-size:14px;font-weight:500;color:#2c3e50}.config-toggle:hover:not(:disabled){border-color:#3498db;background:#f8fbff}.config-toggle.active{background:#3498db;border-color:#3498db;color:#fff}.toggle-slider{width:36px;height:20px;background:#d5d8dc;border-radius:10px;position:relative;transition:all .3s ease}.config-toggle.active .toggle-slider{background:#fff}.toggle-slider:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.config-toggle.active .toggle-slider:after{left:18px;background:#3498db}.config-tips{display:flex;gap:12px;padding:16px;background:#f8fbff;border:1px solid #D6EAF8;border-radius:8px;margin-top:16px}.tip-icon{flex-shrink:0;width:20px;height:20px;color:#3498db}.tip-content strong{display:block;font-size:14px;font-weight:600;color:#2c3e50;margin-bottom:8px}.tip-content ul{margin:0;padding-left:20px;list-style:none}.tip-content li{position:relative;padding-left:16px;margin-bottom:6px;font-size:13px;color:#5d6d7e;line-height:1.6}.tip-content li:before{content:"•";position:absolute;left:0;color:#3498db;font-weight:700}.tip-content li:last-child{margin-bottom:0}@media(max-width:768px){.config-grid{grid-template-columns:1fr;gap:16px}.config-section-title{font-size:16px}.config-tips{flex-direction:column;gap:8px}}.speaking-config-form{margin-bottom:24px;padding:24px;background:#fff;border-radius:12px;border:1px solid #E8E8E8}.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.config-item.full-width{grid-column:1 / -1}.checkbox-label-inline{display:flex;align-items:center;gap:8px;margin-bottom:0}.config-hint-inline{font-size:12px;color:#7f8c8d;font-weight:400}.config-input-wrapper{position:relative;display:flex;align-items:center}.config-input{width:100%;padding:12px 50px 12px 16px;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;transition:all .3s ease}.evaluation-mode-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.mode-option{display:flex;flex-direction:column;align-items:center;padding:24px 20px;background:#fff;border:2px solid #E8E8E8;border-radius:12px;cursor:pointer;transition:all .3s ease}.mode-option:hover:not(:disabled){border-color:#3498db;background:#f8fbff;transform:translateY(-2px);box-shadow:0 4px 12px #3498db26}.mode-option.active{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-surface);box-shadow:var(--shadow-lg)}.mode-option:disabled{opacity:.6;cursor:not-allowed}.mode-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:#3498db;transition:all .3s ease}.mode-option:not(.active) .mode-icon{background:#f0f3f7}.mode-option.active .mode-icon{background:#fff3;color:#fff}.mode-info{text-align:center}.mode-name{font-size:15px;font-weight:600;color:#2c3e50;margin-bottom:4px;transition:color .3s ease}.mode-option.active .mode-name{color:#fff}.mode-desc{font-size:12px;color:#7f8c8d;transition:color .3s ease}.mode-option.active .mode-desc{color:#fffc}.manual-mode-tip{background:#fffbf0;border-left-color:#f39c12}.manual-mode-tip .tip-content strong{color:#d68910}.manual-mode-tip .tip-content li{color:#7d6642}@media(max-width:768px){.config-grid,.evaluation-mode-selector{grid-template-columns:1fr}.mode-option{flex-direction:row;padding:16px 20px;gap:16px}.mode-icon{width:40px;height:40px;margin-bottom:0}.mode-info{text-align:left}}.reading-config-form{margin-bottom:24px;padding:24px;background:#fff;border-radius:12px;border:1px solid #E8E8E8}.config-section-title{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #3498DB}.config-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.config-item{display:flex;flex-direction:column}.config-label{display:block;font-size:14px;font-weight:500;color:#2c3e50;margin-bottom:8px}.config-hint{display:block;font-size:12px;color:#7f8c8d;margin-top:4px;font-weight:400}.config-input-wrapper{position:relative;display:flex;align-items:center;box-sizing:border-box}.config-input{width:100%;padding:10px 50px 10px 16px;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;line-height:1.4;transition:all .3s ease;box-sizing:border-box}.config-input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db1a}.config-input:disabled{background:#f5f5f5;cursor:not-allowed}.config-unit{position:absolute;right:12px;font-size:13px;color:#7f8c8d}.config-dropdown-wrapper{position:relative}.config-dropdown-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;line-height:1.4;color:#2c3e50;cursor:pointer;transition:all .3s ease;box-sizing:border-box}.config-dropdown-trigger:hover:not(.disabled){border-color:#3498db}.config-dropdown-trigger.open{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.config-dropdown-trigger.disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.dropdown-arrow{display:flex;align-items:center;color:#7f8c8d;transition:transform .2s ease}.config-dropdown-trigger.open .dropdown-arrow{transform:rotate(180deg)}.config-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #E8E8E8;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:100;overflow:hidden;animation:dropdownFadeIn .2s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-option{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:none;border:none;font-size:14px;color:#2c3e50;cursor:pointer;transition:background .2s ease;text-align:left}.dropdown-option:hover{background:#f8f9fa}.dropdown-option.selected{color:#3498db;font-weight:500}.dropdown-check{display:flex;align-items:center;color:#3498db}.config-toggle{width:44px;height:24px;background:#e8e8e8;border:none;border-radius:12px;cursor:pointer;transition:background .3s ease;padding:0;align-self:flex-start;position:relative}.config-toggle:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform .3s ease}.config-toggle:disabled{opacity:.6;cursor:not-allowed}.config-toggle.active{background:#27ae60}.config-toggle.active:before{transform:translate(20px)}.config-tips{display:flex;gap:12px;padding:16px;margin-top:20px;background:#f8fbff;border-radius:8px;border-left:4px solid #3498DB}.tip-icon{flex-shrink:0;width:20px;height:20px}.tip-content{flex:1}.tip-content strong{font-size:14px;color:#2c3e50;display:block;margin-bottom:8px}.tip-content ul{margin:0;padding-left:20px}.tip-content li{font-size:13px;color:#5d6d7e;margin-bottom:6px;line-height:1.5}@media(max-width:768px){.config-grid{grid-template-columns:1fr}}.reading-publish-dialog-overlay{position:fixed;inset:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;padding:24px;z-index:1200}.reading-publish-dialog{width:min(1120px,100%);max-height:calc(100vh - 48px);background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 24px 80px #0f172a40;display:flex;flex-direction:column}.reading-publish-dialog-header{display:flex;justify-content:space-between;gap:16px;padding:24px 28px 18px;border-bottom:1px solid #e2e8f0}.reading-publish-dialog-header h3{margin:0 0 8px;font-size:24px;color:#0f172a}.reading-publish-dialog-header p{margin:0;color:#64748b;line-height:1.6}.reading-publish-dialog-close{width:36px;height:36px;border:none;border-radius:999px;background:#f8fafc;color:#475569;font-size:24px;cursor:pointer}.reading-publish-dialog-body{padding:24px 28px;overflow:auto;display:flex;flex-direction:column;gap:20px}.reading-publish-passage-card{border:1px solid #e2e8f0;border-radius:18px;padding:20px;background:#fcfdff}.reading-publish-passage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.reading-publish-passage-head h4{margin:0;font-size:18px;color:#0f172a}.reading-publish-passage-head span{color:#2563eb;font-size:14px;font-weight:600}.reading-publish-passage-content{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,.9fr);gap:20px}.reading-publish-source{padding:18px;border-radius:16px;background:#fff;border:1px solid #e2e8f0;line-height:2.1;color:#1e293b}.reading-publish-text-token{white-space:pre-wrap}.reading-publish-word-token{display:inline;border:none;background:transparent;padding:0;margin:0;color:inherit;font:inherit;line-height:inherit;cursor:pointer;border-radius:8px;transition:background-color .2s ease,color .2s ease}.reading-publish-word-token:hover{background:#2563eb14}.reading-publish-word-token.selected{background:#2563eb24;color:#1d4ed8;font-weight:700}.reading-publish-answer-panel{padding:18px;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0}.reading-publish-answer-title{font-size:14px;font-weight:700;color:#334155;margin-bottom:12px}.reading-publish-answer-list{display:flex;flex-direction:column;gap:10px}.reading-publish-answer-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;cursor:pointer;text-align:left}.reading-publish-answer-remove{color:#dc2626;font-size:12px;font-weight:600}.reading-publish-answer-empty{color:#94a3b8;line-height:1.7;font-size:14px}.reading-publish-dialog-actions{display:flex;justify-content:flex-end;gap:12px;padding:18px 28px 24px;border-top:1px solid #e2e8f0}.reading-publish-dialog-cancel,.reading-publish-dialog-confirm{border:none;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer}.reading-publish-dialog-cancel{background:#e2e8f0;color:#334155}.reading-publish-dialog-confirm{background:#2563eb;color:#fff}@media(max-width:900px){.reading-publish-passage-content{grid-template-columns:1fr}}@media(max-width:640px){.reading-publish-dialog-overlay{padding:12px}.reading-publish-dialog-header,.reading-publish-dialog-body,.reading-publish-dialog-actions{padding-left:16px;padding-right:16px}}.question-selector{display:inline-block}.select-question-button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#f0f3f7;border:1px solid #E8E8E8;border-radius:8px;color:#5d6d7e;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.select-question-button:hover{background:#e8ecef;border-color:#3498db;color:#3498db}.select-question-button svg{width:20px;height:20px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:800px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #E8E8E8;flex-shrink:0}.modal-header h2{font-size:20px;font-weight:600;color:#2c3e50;margin:0}.filter-section{display:flex;gap:16px;padding:16px 24px;border-bottom:1px solid #E8E8E8;background:#f8f9fa;flex-shrink:0}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-group.search-group{flex:1}.filter-label{font-size:13px;font-weight:600;color:#5d6d7e}.filter-dropdown{position:relative;min-width:120px;height:38px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background-color:#fff;border:2px solid #E8E8E8;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;color:#2c3e50;box-sizing:border-box}.filter-dropdown svg{flex-shrink:0;transition:transform .2s ease;color:#9ca3af;width:16px;height:16px}.filter-dropdown.open{border-color:#3498db}.filter-dropdown .dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #E8E8E8;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:100;overflow:hidden;display:none}.filter-dropdown.open .dropdown-menu{display:block;animation:dropdownSlideIn .2s ease-out}.dropdown-item{padding:10px 14px;font-size:14px;color:#2c3e50;cursor:pointer;transition:background-color .2s ease}.dropdown-item.selected{background-color:#ebf5ff;color:#3498db;font-weight:600}.dropdown-item:first-child{border-radius:8px 8px 0 0}.dropdown-item:last-child{border-radius:0 0 8px 8px}.dropdown-selected-text{font-size:14px;font-weight:500;color:#2c3e50;white-space:nowrap}.filter-select{padding:8px 14px;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;color:#2c3e50;background:#fff;cursor:pointer;transition:all .3s ease;min-width:120px}.filter-select:hover{border-color:#3498db}.filter-select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.filter-search{padding:8px 14px;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;color:#2c3e50;background:#fff;transition:all .3s ease;width:100%}.filter-search:hover{border-color:#3498db}.filter-search:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.questions-list{flex:1;overflow-y:auto;padding:16px 24px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:4px solid #E8E8E8;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:12px;font-size:14px;color:#7f8c8d}.empty-state{text-align:center;padding:60px 20px}.empty-state svg{margin-bottom:16px}.empty-state h3{font-size:18px;color:#2c3e50;margin-bottom:8px}.empty-state p{font-size:14px;color:#7f8c8d}.question-item{background:#fff;border:2px solid #E8E8E8;border-radius:12px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all .3s ease;position:relative}.question-item:hover{border-color:#3498db;box-shadow:0 2px 8px #3498db26;transform:translateY(-1px)}.question-item.selected{border-color:var(--color-primary);background:var(--color-primary-light)}.question-item.selected:hover{transform:none}.question-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.category-badge{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;background:#f0f3f7;color:#5d6d7e}.category-badge svg{width:16px;height:16px}.difficulty-badge{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.question-title{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 8px;line-height:1.4}.question-content{font-size:14px;color:#7f8c8d;line-height:1.6;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tags-list{display:flex;flex-wrap:wrap;gap:6px}.tag-item{padding:4px 10px;background:#f5f5f5;border-radius:12px;font-size:12px;color:#5d6d7e}.selected-badge{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:4px;padding:6px 12px;background:var(--color-primary);border-radius:20px;font-size:12px;font-weight:600;color:var(--color-surface)}.selected-badge svg{width:16px;height:16px}@media(max-width:768px){.modal-content{max-height:95vh}.filter-section{flex-direction:column;gap:12px;padding:16px}.filter-group,.filter-select{width:100%}.questions-list{padding:16px}.question-item{padding:14px}}.homework-detail-container{background-color:#f8f9fa;min-height:calc(100vh - 64px);font-family:Source Han Sans SC,sans-serif}.homework-detail-content{max-width:1440px;margin:0 auto}.homework-detail-header{margin-bottom:24px}.header-title-section{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:20px}.view-statistics-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #667eea4d;white-space:nowrap}.view-statistics-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #667eea66}.view-statistics-btn:active{transform:translateY(0)}.back-button{background-color:#fff;border:1px solid #E9ECEF;border-radius:4px;color:#495057;font-size:14px;font-weight:500;padding:8px 16px;cursor:pointer;margin-bottom:16px;display:inline-flex;align-items:center;gap:4px;transition:all .2s ease}.back-button:hover{background-color:#f8f9fa;border-color:#dee2e6}.homework-title{font-size:28px;font-weight:700;color:#2c3e50;line-height:42px;margin:0 0 8px}.homework-date{font-size:14px;color:#7f8c8d;line-height:20px;margin:0}.stats-container{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}.homework-stat-card{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:24px;flex:1;min-width:300px;display:flex;flex-direction:column;gap:8px;text-align:left}.stat-label{font-size:14px;color:#7f8c8d;line-height:20px;margin:0}.homework-stat-value{display:flex;align-items:center;gap:8px}.stat-number{font-size:24px;font-weight:700;color:#2c3e50;line-height:32px}.stat-percentage{font-size:24px;font-weight:700;color:#27ae60;line-height:32px}.stat-score{font-size:24px;font-weight:700;color:#3498db;line-height:32px}.stat-date{font-size:24px;font-weight:700;color:#2c3e50;line-height:32px;flex-shrink:0}.stat-description{font-size:12px;color:#7f8c8d;line-height:16px;margin:0}.homework-detail-student-table-container{background-color:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;overflow:hidden}.homework-detail-table{width:100%;border-collapse:collapse;table-layout:fixed}.homework-detail-table-head{background-color:#f8f9fa}.homework-detail-table-header-row{border-bottom:1px solid #E9ECEF}.homework-detail-table-header{padding:14px 16px;font-size:14px;font-weight:700;color:#2c3e50;text-align:left;border-bottom:1px solid #E9ECEF}.homework-detail-name-col{width:25%}.homework-detail-status-col,.homework-detail-score-col{width:15%}.homework-detail-time-col{width:30%}.homework-detail-action-col{width:15%;text-align:center}.homework-detail-table-body{background-color:#fff}.homework-detail-table-row{border-bottom:1px solid #F1F3F4;transition:background-color .2s ease}.homework-detail-table-row:hover{background-color:#f8f9fa}.homework-detail-table-row:last-child{border-bottom:none}.homework-detail-even-row{background-color:#fafbfc}.homework-detail-even-row:hover{background-color:#f5f6f7}.homework-detail-table-cell{padding:14px 16px;font-size:14px;color:#2c3e50;vertical-align:middle}.homework-detail-student-name{font-weight:600;color:#2c3e50}.homework-detail-student-status{align-items:center;gap:8px}.homework-detail-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.homework-detail-status-dot.homework-detail-completed{background-color:#27ae60}.homework-detail-status-dot.homework-detail-pending{background-color:#bdbdbd}.homework-detail-status-text{font-size:14px;line-height:20px;white-space:nowrap}.homework-detail-status-text.homework-detail-completed{color:#27ae60}.homework-detail-status-text.homework-detail-pending{color:#bdbdbd}.homework-detail-student-score{font-weight:600}.homework-detail-student-score.homework-detail-completed{color:#27ae60}.homework-detail-student-score.homework-detail-pending{color:#bdbdbd}.homework-detail-student-time{font-size:13px;color:#666}.homework-detail-student-actions{text-align:center}.homework-detail-view-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center}.homework-detail-view-btn:hover{background-color:#f0f7ff}.homework-detail-action-icon{width:16px;height:16px;opacity:.7;transition:opacity .2s ease}.homework-detail-view-btn:hover .homework-detail-action-icon{opacity:1}.homework-detail-no-action{color:#bdbdbd;font-size:14px}.homework-detail-loading-cell,.homework-detail-error-cell,.homework-detail-empty-cell{text-align:center;color:#7f8c8d;font-weight:400;padding:24px}@media(max-width:1024px){.homework-detail-table-header,.homework-detail-table-cell{padding:12px 14px;font-size:13px}.homework-detail-name-col{width:25%}.homework-detail-status-col,.homework-detail-score-col{width:15%}.homework-detail-time-col{width:30%}.homework-detail-action-col{width:15%}}@media(max-width:768px){.homework-detail-table-header,.homework-detail-table-cell{padding:10px 12px;font-size:13px}.homework-detail-name-col{width:25%}.homework-detail-status-col,.homework-detail-score-col{width:15%}.homework-detail-time-col{width:30%}.homework-detail-action-col{width:15%}.homework-detail-student-time{font-size:12px}}@media(max-width:600px){.homework-detail-table-header,.homework-detail-table-cell{padding:8px 10px;font-size:12px}.homework-detail-name-col{width:30%}.homework-detail-status-col{width:20%}.homework-detail-score-col{width:15%}.homework-detail-time-col{width:25%}.homework-detail-action-col{width:10%}.homework-detail-action-icon{width:14px;height:14px}}@media(max-width:412px){.homework-detail-table-header,.homework-detail-table-cell{padding:8px 6px;font-size:11px}.homework-detail-name-col{width:40%}.homework-detail-status-col{width:25%}.homework-detail-score-col{width:20%}.homework-detail-time-col{display:none}.homework-detail-action-col{width:15%}.homework-detail-student-time{display:none}.homework-detail-action-icon{width:12px;height:12px}.homework-detail-view-btn{padding:4px}}@media(max-width:1024px){.stats-container{gap:12px}.homework-stat-card{min-width:280px}}@media(max-width:768px){.header-title-section{flex-direction:column;align-items:stretch;gap:12px}.view-statistics-btn{align-self:flex-start}.stats-container{flex-direction:column}.homework-stat-card{min-width:100%}.homework-title{font-size:24px;line-height:32px}}@media(max-width:600px){.homework-title{font-size:20px;line-height:28px}}@media(max-width:412px){.homework-detail-content{max-width:100%}.header-title-section{flex-direction:column;align-items:stretch;gap:12px}.view-statistics-btn{align-self:flex-start;padding:10px 20px;font-size:13px}.stats-container{flex-direction:column;align-items:center}.homework-stat-card{min-width:100%;max-width:320px;padding:16px}.homework-title{font-size:18px;line-height:24px}.stat-number,.stat-percentage,.stat-score,.stat-date{font-size:20px;line-height:28px}.back-button{font-size:13px;padding:6px 12px}}.data-analysis-container{position:relative}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.loading-spinner{width:40px;height:40px;border:4px solid #E5E5E5;border-top:4px solid #3498DB;border-radius:50%;animation:spin 1s linear infinite}.loading-container p{color:#7f8c8d;font-size:16px;margin:0}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.error-container p{color:#e74c3c;font-size:16px;margin:0}.error-container button{background:#3498db;color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color .3s ease}.error-container button:hover{background:#2980b9}.export-report-btn{background:#3498db;border-radius:6px;display:flex;align-items:center;gap:8px;padding:14px 24px;border:none;color:#fff;font-weight:500;line-height:20px;cursor:pointer;transition:background-color .3s ease}.export-report-btn:hover{background:#2980b9}.filter-section{background:var(--color-surface);box-shadow:var(--shadow-sm);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:8px;align-items:flex-end}.filter-dropdown{display:flex;align-items:center;gap:8px;padding:10px 14px;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px;position:relative;width:100%;justify-content:space-between}.filter-item{display:flex;flex-direction:column;gap:8px;min-width:0;flex:0 0 auto}.filter-item label{color:#2c3e50;font-size:14px;font-weight:500;white-space:nowrap}.filter-item input,.filter-item select{min-width:160px;padding:8px 32px 8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-base);transition:border-color .3s ease;background-color:var(--color-surface);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237F8C8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;height:36px;box-sizing:border-box;color:var(--color-text-primary);cursor:pointer}.filter-item input:focus,.filter-item select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.filter-actions{display:flex;gap:12px;align-items:flex-end;flex:0 0 auto}.filter-actions button{padding:10px 20px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s ease;border:none;font-weight:500;white-space:nowrap}.filter-actions button:first-child{background:#3498db;color:#fff}.filter-actions button:first-child:hover{background:#2980b9}.filter-actions button:last-child{background:#fff;color:#7f8c8d;border:1px solid #E5E5E5}.filter-actions button:last-child:hover{background:#f8f9fa;border-color:#bdc3c7}.filter-dropdown svg{width:12px;height:12px}.filter-item span:first-child{color:#2c3e50;line-height:20px}.filter-arrow{color:#7f8c8d;line-height:20px}.stats-cards{display:flex;flex-direction:row;gap:12px;margin-bottom:12px}.stat-card{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;flex-grow:1;display:flex;flex-direction:row;align-items:center;gap:16px;min-height:100px}.stat-icon-wrapper{width:48px;height:48px;min-width:48px;border-radius:12px;display:flex;justify-content:center;align-items:center}.stat-icon-wrapper:nth-child(1){background:#3498db1a}.stat-icon-wrapper:nth-child(2){background:#27ae601a}.stat-icon-wrapper:nth-child(3){background:#9b59b61a}.stat-icon-wrapper:nth-child(4){background:#f39c121a}.stat-content{display:flex;flex-direction:column;flex:1}.stat-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.stat-title{color:#7f8c8d;font-size:14px;line-height:20px}.stat-value{color:#2c3e50;font-size:28px;font-weight:700;line-height:36px}.stat-change{color:#1abc9c;font-size:12px;font-weight:500;line-height:16px}.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.chart-container{background:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d;padding:20px;display:flex;flex-direction:column;gap:16px;min-height:320px;overflow:hidden}.chart-title{color:#2c3e50;font-size:16px;font-weight:700;line-height:24px;margin:0 0 12px;flex-shrink:0}.chart-placeholder{width:100%;height:280px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;border-radius:8px;flex:1;min-height:200px;margin-top:8px}.word-frequency-scroll{scrollbar-width:thin;scrollbar-color:#BDC3C7 #F8F9FA}.word-frequency-scroll::-webkit-scrollbar{width:6px}.word-frequency-scroll::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.word-frequency-scroll::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:3px}.word-frequency-scroll::-webkit-scrollbar-thumb:hover{background:#95a5a6}.phoneme-analysis-scroll{scrollbar-width:thin;scrollbar-color:#BDC3C7 #F8F9FA}.phoneme-analysis-scroll::-webkit-scrollbar{width:6px}.phoneme-analysis-scroll::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.phoneme-analysis-scroll::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:3px}.phoneme-analysis-scroll::-webkit-scrollbar-thumb:hover{background:#95a5a6}@media(max-width:650px){.word-frequency-scroll{maxHeight:"360px"!important;gap:"10px"!important}}@media(max-width:480px){.word-frequency-scroll{maxHeight:"320px"!important;gap:"8px"!important;paddingRight:"4px"!important}}@media(min-width:651px)and (max-width:1060px){.chart-container{padding:16px;min-height:280px}.chart-placeholder{height:240px;min-height:180px;margin-top:8px}.chart-title{font-size:15px;margin:0 0 10px}.chart-container:last-child>div>div:first-child,.chart-container:last-child>div>div:last-child>div{flex-wrap:nowrap!important;overflow-x:auto}.chart-container:last-child>div>div:first-child>div{min-width:80px!important;margin-right:40px!important}.chart-container:last-child>div>div:last-child>div>div{min-width:60px!important;margin-right:40px!important}}.teacher-analysis-overview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:12px}.teacher-overview-card{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px #0f172a0f;border:1px solid #e2e8f0}.teacher-overview-card.tone-blue{border-top:3px solid #2563eb}.teacher-overview-card.tone-teal{border-top:3px solid #0f766e}.teacher-overview-card.tone-amber{border-top:3px solid #d97706}.teacher-overview-card.tone-green{border-top:3px solid #16a34a}.teacher-overview-card.tone-slate{border-top:3px solid #475569}.teacher-overview-card.tone-rose{border-top:3px solid #e11d48}.teacher-overview-label{color:#64748b;font-size:13px;margin-bottom:10px}.teacher-overview-value{color:#0f172a;font-size:30px;font-weight:700;line-height:1.1}.teacher-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}.teacher-type-card{background:#fff;border-radius:16px;padding:20px;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0f172a0f}.teacher-type-card.type-speaking{background:linear-gradient(180deg,#f8fbff,#fff)}.teacher-type-card.type-listening{background:linear-gradient(180deg,#f7fffc,#fff)}.teacher-type-card.type-reading{background:linear-gradient(180deg,#fffaf5,#fff)}.teacher-type-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.teacher-type-header h2{margin:0;color:#0f172a;font-size:18px}.teacher-type-header span{font-size:13px;color:#64748b}.teacher-type-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.teacher-type-metrics span{display:block;color:#64748b;font-size:12px;margin-bottom:6px}.teacher-type-metrics strong{color:#0f172a;font-size:20px}.teacher-type-summary{margin-top:16px;padding:10px 12px;border-radius:12px;background:#94a3b81a;color:#334155;font-size:13px}.teacher-dashboard-grid,.teacher-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.teacher-panel{background:#fff;border-radius:16px;box-shadow:0 1px 2px #0f172a0f;padding:20px;border:1px solid #e2e8f0;min-height:320px}.teacher-panel.teacher-table-panel{min-height:0}.teacher-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.teacher-panel-head span{color:#64748b;font-size:13px;line-height:1.6}.teacher-table-list,.teacher-word-list{display:flex;flex-direction:column;gap:10px}.teacher-table-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(88px,.5fr)) minmax(0,1fr);gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:#f8fafc}.teacher-table-row.risk{background:#fff7f7}.teacher-table-main{min-width:0}.teacher-table-title{color:#0f172a;font-size:15px;font-weight:600;margin-bottom:4px}.teacher-table-subtitle{color:#64748b;font-size:12px;line-height:1.5}.teacher-table-metric span{display:block;color:#64748b;font-size:12px;margin-bottom:4px}.teacher-table-metric strong{color:#0f172a;font-size:18px}.teacher-table-tags{display:flex;flex-wrap:wrap;gap:6px}.teacher-table-tags span{background:#fff;color:#475569;border-radius:999px;padding:6px 10px;font-size:12px;border:1px solid #dbe4ee}.teacher-word-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#f8fafc}.teacher-word-copy{display:flex;flex-direction:column;gap:4px}.teacher-word-copy strong{color:#0f172a;font-size:15px}.teacher-word-copy span{color:#64748b;font-size:12px}.teacher-word-rate{color:#b45309;font-size:18px;font-weight:700}.teacher-empty-state{width:100%;height:100%;min-height:200px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;background:#f8fafc;border-radius:12px}.teacher-empty-state.compact{min-height:120px}.student-analysis-hero,.student-analysis-overview-card,.student-analysis-type-card,.student-analysis-panel{background:#fffffff0;border:1px solid rgba(226,232,240,.95);box-shadow:0 14px 36px #0f172a0f}.student-analysis-hero{border-radius:24px;padding:24px 26px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);gap:20px;margin-bottom:12px;background:radial-gradient(circle at top right,rgba(14,165,233,.08),transparent 26%),radial-gradient(circle at bottom left,rgba(245,158,11,.08),transparent 28%),#fffffff5}.student-analysis-hero>:first-child{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:4px 12px 4px 2px}.student-analysis-kicker{color:#b45309;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0}.student-analysis-hero h2{margin:0;color:#0f172a;font-size:24px;line-height:1.18;max-width:16em}.student-analysis-hero p{margin:0;color:#475569;font-size:14px;line-height:1.6;max-width:34em}.student-analysis-hero-meta{display:grid;gap:10px;align-content:start}.student-analysis-hero-meta>div{border-radius:16px;padding:14px 16px;background:#f8fafceb}.student-analysis-hero-meta span{display:block;color:#64748b;font-size:12px;margin-bottom:8px}.student-analysis-hero-meta strong{color:#0f172a;font-size:22px}.student-analysis-overview-grid,.student-analysis-type-grid,.student-analysis-main-grid,.student-analysis-focus-grid{display:grid;gap:12px;margin-bottom:12px}.student-analysis-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.student-analysis-type-grid,.student-analysis-focus-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.student-analysis-main-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.student-analysis-overview-card,.student-analysis-type-card,.student-analysis-panel{border-radius:20px;padding:20px}.student-analysis-panel{align-self:start}.student-analysis-overview-icon{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff,#fff7ed);color:#0f766e;margin-bottom:14px}.student-analysis-overview-label{color:#64748b;font-size:13px;margin-bottom:8px}.student-analysis-overview-value{color:#0f172a;font-size:30px;font-weight:700;line-height:1.05;margin-bottom:8px}.student-analysis-overview-hint{color:#475569;font-size:13px;line-height:1.6}.student-analysis-type-card.type-speaking{background:linear-gradient(180deg,#f8fbff,#fff)}.student-analysis-type-card.type-listening{background:linear-gradient(180deg,#f7fffc,#fff)}.student-analysis-type-card.type-reading{background:linear-gradient(180deg,#fffaf5,#fff)}.student-analysis-type-head,.student-analysis-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.student-analysis-type-head h3,.student-analysis-panel-head h3{margin:0;color:#0f172a;font-size:18px}.student-analysis-type-head span,.student-analysis-panel-head p{color:#64748b}.student-analysis-panel-head p{margin:8px 0 0;font-size:13px;line-height:1.6}.student-analysis-type-metrics,.student-analysis-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.student-analysis-type-metrics{margin-top:18px}.student-analysis-type-metrics span,.student-analysis-progress-card span{display:block;color:#64748b;font-size:12px;margin-bottom:6px}.student-analysis-type-metrics strong,.student-analysis-progress-card strong{color:#0f172a;font-size:22px}.student-analysis-chart-body,.student-analysis-phoneme-detail{margin-top:14px}.student-analysis-progress-grid,.student-analysis-recommendation-list,.student-analysis-focus-list{margin-top:16px}.student-analysis-progress-card,.student-analysis-focus-item,.student-analysis-recommendation-item{border-radius:16px;padding:14px 16px;background:#f8fafc}.student-analysis-progress-card.positive strong{color:#047857}.student-analysis-progress-card.negative strong{color:#b91c1c}.student-analysis-recommendation-list,.student-analysis-focus-list{display:flex;flex-direction:column;gap:10px}.student-analysis-recommendation-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:flex-start}.student-analysis-recommendation-item span{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#0f172a;color:#fff;font-size:12px;font-weight:700}.student-analysis-recommendation-item p{margin:2px 0 0;color:#334155;line-height:1.6}.student-analysis-focus-label{color:#0f172a;font-weight:600;margin-bottom:6px}.student-analysis-focus-detail{color:#64748b;font-size:13px;line-height:1.6}.student-analysis-empty{min-height:180px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:14px;background:#f8fafc;border-radius:14px}.student-analysis-empty.compact{min-height:120px}@media(max-width:650px){.student-analysis-overview-grid,.student-analysis-type-grid,.student-analysis-main-grid,.student-analysis-focus-grid,.teacher-analysis-overview-grid,.teacher-type-grid,.teacher-dashboard-grid,.teacher-detail-grid,.student-analysis-hero{grid-template-columns:1fr}.student-analysis-hero>:first-child{padding-right:0}.teacher-table-row{grid-template-columns:1fr}.data-analysis-container .page-header{flex-direction:column;align-items:stretch}.export-report-btn{width:100%;justify-content:center}.filter-section{flex-direction:column;padding:16px;gap:12px}.filter-item{width:100%}.filter-item input,.filter-item select{width:100%;min-width:0}.filter-actions{width:100%;flex-direction:row}.filter-actions button{flex:1}.stats-cards{flex-direction:column}.charts-grid{grid-template-columns:1fr}.chart-container{padding:12px;min-height:240px}.chart-placeholder{height:200px;min-height:160px;margin-top:8px}.chart-title{font-size:14px;line-height:20px;margin:0 0 8px}.chart-container:last-child .chart-title{padding:0 16px}.chart-container:last-child>div>div:first-child{padding:12px 8px;gap:12px}.chart-container:last-child>div>div:first-child>div{min-width:auto;margin-right:0;margin-bottom:8px}.chart-container:last-child>div>div:last-child>div{gap:12px}.chart-container:last-child>div>div:last-child>div>div{min-width:auto;margin-right:0}}@media(max-width:480px){.chart-container{padding:8px;min-height:200px}.chart-placeholder{height:160px;min-height:120px;margin-top:6px}.chart-title{font-size:13px;line-height:18px;margin:0 0 6px}}.system-settings-container{display:flex;flex-direction:column;background:#f8f9fa;min-height:calc(100vh - 76px);padding:0}.settings-content{display:flex;flex-direction:row;gap:0;height:100%}.settings-sidebar{background:#fff;border-right:1px solid #E5E5E5;width:240px;display:flex;flex-direction:column;gap:0;padding:0;flex-shrink:0;transition:transform .3s ease}.sidebar-item{cursor:pointer;transition:background-color .2s ease}.sidebar-item:hover{background-color:#f0f8ff}@media(max-width:1024px){.settings-content{gap:24px}.settings-sidebar{width:200px}.parameter-input{max-width:170px}.page-header h1{font-size:24px;line-height:36px}}@media(max-width:768px){.settings-content{flex-direction:column;gap:16px}.settings-sidebar{display:none}.sidebar-item{white-space:nowrap;padding:8px 16px}.info-fields{flex-direction:column;gap:16px}.field-input{width:100%}.parameter-row{flex-direction:column;gap:16px}.parameter-input{width:100%}.class-preference-row{flex-direction:column;gap:16px}.backup-frequency{flex-direction:column;align-items:flex-start}.frequency-label{width:auto}.frequency-select{width:100%}.last-backup{flex-direction:column;align-items:flex-start}.last-backup-label{width:auto}.settings-footer{flex-direction:column;gap:12px}.reset-btn,.save-btn{width:100%}.page-header h1{font-size:20px;line-height:30px}.section-title{font-size:16px;line-height:24px}.avatar-container{width:80px;height:80px}}@media(max-width:480px){.settings-section{padding:16px}.sidebar-item{padding:6px 12px;font-size:14px}.avatar-section{flex-direction:column;align-items:flex-start}.settings-footer{padding:16px}.edit-btn{width:100%}}.sidebar-item{display:flex;flex-direction:row;align-items:center;gap:12px;padding:16px 24px;color:#7f8c8d;font-size:14px;line-height:20px;cursor:pointer;transition:all .2s;border-left:3px solid transparent}.sidebar-item:hover{background:#f0f8ff;color:#3498db}.sidebar-item.active{background:#ebf5ff;color:#3498db;font-weight:500;border-left:3px solid #3498DB}.sidebar-icon{width:20px;height:20px;background-size:contain;background-position:center;background-repeat:no-repeat;flex-shrink:0}.user-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath6110234065'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath6110234065)'%3e%3cpath%20d='M7.50931%203.79621Q7.44514%204.66159%207.09907%205.45665Q6.76475%206.22472%206.2142%206.82277Q5.6561%207.42902%204.96268%207.76647Q4.22595%208.125%203.44852%208.125Q2.6711%208.125%201.93413%207.7666Q1.24027%207.42918%200.681939%206.82306Q0.130867%206.22481%20-0.203255%205.45667Q-0.549302%204.66111%20-0.612333%203.79538Q-0.679029%202.8783%20-0.40089%202.05717Q-0.128954%201.25437%200.436454%200.644439Q0.999122%200.0374661%201.7712%20-0.29124Q2.55515%20-0.625%203.44852%20-0.625Q4.34203%20-0.625%205.12927%20-0.284274Q5.89903%200.0488898%206.46212%200.660752Q7.02565%201.27309%207.29768%202.07292Q7.57628%202.89208%207.50931%203.79617L7.50931%203.79621ZM6.26272%203.70383Q6.31089%203.05359%206.11425%202.47542Q5.92718%201.9254%205.54234%201.50722Q5.15896%201.09064%204.63276%200.862887Q4.08313%200.625%203.44852%200.625Q2.81016%200.625%202.26085%200.858866Q1.73436%201.08301%201.35316%201.49423Q0.969296%201.90832%200.783033%202.45821Q0.58602%203.03983%200.634368%203.70462Q0.681929%204.35787%200.943002%204.95808Q1.19305%205.53294%201.60133%205.97616Q1.9995%206.40843%202.48079%206.64248Q2.95893%206.875%203.44852%206.875Q3.93794%206.875%204.4157%206.6425Q4.89656%206.40849%205.29455%205.97616Q5.70259%205.53292%205.95294%204.95777Q6.21427%204.35741%206.26273%203.70379L6.26272%203.70383Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%206.55148%201.875)'%20fill='rgb(52,%20152,%20219)'/%3e%3cpath%20d='M7.50009%200.625Q6.29639%200.625%205.15768%200.949357Q4.00015%201.27907%203.06872%201.89994Q2.10345%202.54336%201.48908%203.43082Q0.837059%204.37267%200.629234%205.52499Q0.615017%205.6038%200.639099%205.63898Q0.629528%205.625%200.625095%205.625L14.3751%205.625Q14.371%205.625%2014.3615%205.63887Q14.3856%205.60375%2014.3714%205.52502Q14.1634%204.37271%2013.5113%203.43085Q12.8968%202.54337%2011.9315%201.89994Q11.0001%201.27908%209.84252%200.949357Q8.7038%200.625%207.5001%200.625L7.50009%200.625ZM7.5001%20-0.625Q8.87835%20-0.625%2010.185%20-0.252824Q11.5306%200.130475%2012.6248%200.859823Q13.7887%201.63561%2014.539%202.7193Q15.3454%203.88399%2015.6015%205.3031Q15.7068%205.8867%2015.3929%206.34511Q15.2238%206.59201%2014.9646%206.73057Q14.6944%206.875%2014.3751%206.875L0.625095%206.875Q0.305862%206.875%200.035681%206.73049Q-0.223437%206.5919%20-0.392424%206.345Q-0.706178%205.88659%20-0.600919%205.30313Q-0.344983%203.88405%200.461327%202.71933Q1.21155%201.63563%202.37541%200.859828Q3.4696%200.130478%204.81524%20-0.252824Q6.12183%20-0.625%207.50009%20-0.625L7.5001%20-0.625Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%202.49991%2011.875)'%20fill='rgb(52,%20152,%20219)'/%3e%3c/g%3e%3c/svg%3e")}.notification-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath5569020582'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath5569020582)'%3e%3cpath%20d='M14.0717%2011.4575Q14.3433%2011.7902%2014.3811%2012.2089Q14.4167%2012.6035%2014.2354%2012.9613Q14.0546%2013.318%2013.7125%2013.5292Q13.3548%2013.75%2012.9161%2013.75L10.0063%2013.75Q10.0063%2015.0444%209.09101%2015.9597Q8.17571%2016.875%206.8813%2016.875Q5.58688%2016.875%204.67159%2015.9597Q3.7563%2015.0444%203.7563%2013.75L0.850437%2013.75Q0.411376%2013.75%200.0533348%2013.5307Q-0.290432%2013.3201%20-0.472372%2012.9638Q-0.655283%2012.6055%20-0.619447%2012.2097Q-0.58152%2011.7908%20-0.308944%2011.4573Q-0.243642%2011.3774%20-0.118018%2011.2256Q0.296425%2010.7248%200.464731%2010.4765Q0.723983%2010.094%200.877886%209.6809Q1.26215%208.64953%201.26333%206.61523Q1.26333%204.31838%202.34553%202.90333Q3.13174%201.87531%204.53637%201.29689Q4.54817%201.29204%204.56347%201.27618Q4.5658%201.27376%204.56751%201.27178Q4.7976%200.496156%205.36655%20-0.0220356Q6.02859%20-0.625%206.8813%20-0.625Q7.73357%20-0.625%208.39586%20-0.0225326Q8.96507%200.495267%209.19673%201.27008Q9.19904%201.27293%209.2024%201.27643Q9.218%201.29271%209.22861%201.29706Q10.6312%201.87449%2011.4185%202.90428Q12.5012%204.32048%2012.5012%206.61523Q12.5012%208.64991%2012.8851%209.68117Q13.0388%2010.0942%2013.298%2010.4766Q13.4663%2010.725%2013.8807%2011.2257Q14.0063%2011.3775%2014.0715%2011.4573L14.0717%2011.4575ZM5.0063%2013.75Q5.0063%2014.5267%205.55547%2015.0758Q6.10465%2015.625%206.8813%2015.625Q7.65795%2015.625%208.20712%2015.0758Q8.7563%2014.5266%208.7563%2013.75L5.0063%2013.75ZM9.3813%2012.5L0.850437%2012.5Q0.694331%2012.5%200.640923%2012.3954Q0.601629%2012.3184%200.659037%2012.2482Q0.721888%2012.1713%200.844941%2012.0226Q1.29758%2011.4757%201.49948%2011.1778Q1.84293%2010.671%202.04923%2010.1173Q2.51202%208.87517%202.51333%206.61523Q2.51333%204.74158%203.33845%203.66269Q3.91969%202.90267%205.01138%202.45311Q5.26581%202.34859%205.46319%202.14394Q5.68034%201.91879%205.76271%201.63812Q5.89325%201.18901%206.20825%200.902114Q6.51251%200.625%206.8813%200.625Q7.25008%200.625%207.55472%200.902122Q7.87011%201.18903%208.00282%201.64067Q8.08477%201.91687%208.30003%202.14144Q8.49852%202.3485%208.75274%202.45294Q9.84316%202.90186%2010.4255%203.66349Q11.2512%204.74357%2011.2512%206.61523Q11.2512%208.87501%2011.7136%2010.1172Q11.9198%2010.671%2012.2632%2011.1778Q12.4651%2011.4758%2012.9178%2012.0227Q13.0406%2012.1711%2013.1034%2012.248L13.1036%2012.2482Q13.1602%2012.3177%2013.1205%2012.3961Q13.0678%2012.5%2012.9161%2012.5L9.3813%2012.5Z'%20fill-rule='evenodd'%20transform='matrix(1%200%200%201%203.1187%201.875)'%20fill='rgb(127,%20140,%20141)'/%3e%3c/g%3e%3c/svg%3e")}.assessment-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath2341134071'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath2341134071)'%3e%3crect%20width='1.875'%20height='6.25'%20rx='0.3125'%20ry='0.3125'%20stroke-width='1.25'%20stroke-linejoin='round'%20transform='matrix(1%200%200%201%202.5%2012.5)'%20stroke='rgb(127,%20140,%20141)'%20fill='transparent'/%3e%3crect%20width='1.875'%20height='10'%20rx='0.3125'%20ry='0.3125'%20stroke-width='1.25'%20stroke-linejoin='round'%20transform='matrix(1%200%200%201%2011.25%208.75)'%20stroke='rgb(127,%20140,%20141)'%20fill='transparent'/%3e%3crect%20width='1.875'%20height='14.375'%20rx='0.3125'%20ry='0.3125'%20stroke-width='1.25'%20stroke-linejoin='round'%20transform='matrix(1%200%200%201%2015.625%204.375)'%20stroke='rgb(127,%20140,%20141)'%20fill='transparent'/%3e%3crect%20width='1.875'%20height='17.5'%20rx='0.3125'%20ry='0.3125'%20stroke-width='1.25'%20stroke-linejoin='round'%20transform='matrix(1%200%200%201%206.875%201.25)'%20stroke='rgb(127,%20140,%20141)'%20fill='transparent'/%3e%3c/g%3e%3c/svg%3e")}.system-class-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath9290869666'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath9290869666)'%3e%3cpath%20d='M5.78787%202.85741Q5.73821%203.54668%205.46748%204.17087Q5.20584%204.77411%204.77194%205.24031Q4.33332%205.71159%203.78403%205.97322Q3.20293%206.25%202.58636%206.25Q1.96983%206.25%201.38857%205.97335Q0.838958%205.71176%200.400173%205.2406Q-0.0341398%204.77423%20-0.295649%204.17089Q-0.566382%203.54627%20-0.615206%202.85664Q-0.667164%202.12385%20-0.448182%201.47574Q-0.232906%200.838596%200.216952%200.358927Q0.661748%20-0.115345%201.27389%20-0.370016Q1.88679%20-0.625%202.58636%20-0.625Q3.28648%20-0.625%203.90238%20-0.364292Q4.51248%20-0.106042%204.95737%200.371924Q5.4054%200.853262%205.62065%201.48768Q5.84008%202.13444%205.78786%202.85752L5.78787%202.85741ZM4.54111%202.76748Q4.60867%201.83195%204.0424%201.22358Q3.48524%200.625%202.58636%200.625Q1.68113%200.625%201.12871%201.21402Q0.564146%201.816%200.631673%202.76836Q0.699611%203.72798%201.31493%204.3887Q1.88422%205%202.58636%205Q3.28798%205%203.85693%204.3887Q4.47191%203.72792%204.5411%202.76759L4.54111%202.76748Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%2010.5386%203.75)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M5.62485%200.625Q4.73942%200.625%203.91998%200.840495Q3.09285%201.05801%202.42588%201.47131Q1.00428%202.35222%200.624288%203.87799Q0.630089%203.85474%200.606974%203.82087Q0.558618%203.75%200.475627%203.75L10.7745%203.75Q10.6909%203.75%2010.6424%203.82129Q10.6199%203.85422%2010.6253%203.87614Q10.2466%202.33092%208.82605%201.45769Q8.16195%201.04944%207.33288%200.835712Q6.51551%200.625%205.62485%200.625L5.62485%200.625ZM5.62485%20-0.625Q6.67404%20-0.625%207.64492%20-0.374714Q8.65624%20-0.114001%209.48067%200.392803Q10.3612%200.934108%2010.9526%201.71035Q11.5849%202.54036%2011.8392%203.57777Q11.9669%204.0972%2011.6755%204.525Q11.5265%204.74378%2011.2972%204.86852Q11.0557%205%2010.7745%205L0.475627%205Q0.194601%205%20-0.046998%204.8687Q-0.276359%204.74405%20-0.425546%204.52542Q-0.718424%204.09621%20-0.588661%203.57591Q-0.333728%202.55228%200.29821%201.72605Q0.889727%200.952667%201.76746%200.408769Q2.59372%20-0.103226%203.60206%20-0.368401Q4.5778%20-0.625%205.62485%20-0.625L5.62485%20-0.625Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%207.50015%2011.875)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M4.77049%202.30819Q4.72928%202.88015%204.50268%203.40189Q4.28386%203.90571%203.92141%204.29749Q3.55306%204.69563%203.09226%204.91813Q2.59908%205.15625%202.07679%205.15625Q1.55455%205.15625%201.06128%204.91826Q0.600202%204.69582%200.231722%204.29778Q-0.131097%203.90586%20-0.349822%203.40191Q-0.576446%202.87976%20-0.616963%202.30742Q-0.660173%201.69651%20-0.475123%201.15177Q-0.292995%200.615631%200.0862567%200.209886Q0.461679%20-0.191761%200.97616%20-0.408109Q1.49193%20-0.625%202.07679%20-0.625Q2.66251%20-0.625%203.18098%20-0.403194Q3.6936%20-0.183888%204.06892%200.220685Q4.44641%200.627598%204.62845%201.16124Q4.81395%201.70504%204.77049%202.3082L4.77049%202.30819ZM3.52372%202.21836Q3.57369%201.5248%203.15253%201.07082Q2.73894%200.625%202.07679%200.625Q1.40928%200.625%200.99945%201.06345Q0.57992%201.51229%200.629917%202.21915Q0.681177%202.94325%201.14901%203.44861Q1.57266%203.90625%202.07679%203.90625Q2.58046%203.90625%203.00385%203.44861Q3.4715%202.94312%203.52372%202.21837L3.52372%202.21836Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%203.6654%205)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M4.49257%200.625Q5.6847%200.625%206.53692%201.01547C6.85073%201.15924%207.22168%201.0214%207.36546%200.707599C7.50923%200.393793%207.3714%200.0228424%207.05759%20-0.120934Q5.95742%20-0.625%204.49257%20-0.625Q2.70953%20-0.625%201.34631%200.219406Q0.625403%200.665956%200.138686%201.30186Q-0.382304%201.98255%20-0.592391%202.8254Q-0.709084%203.29641%20-0.44342%203.6854Q-0.307128%203.88496%20-0.0973984%203.99897Q0.123674%204.11914%200.38007%204.11914L4.76601%204.11914C5.11118%204.11914%205.39101%203.83932%205.39101%203.49414C5.39101%203.14897%205.11118%202.86914%204.76601%202.86914L0.696818%202.86914Q1.03566%201.88221%202.00455%201.28206Q3.06531%200.625%204.49257%200.625Z'%20fill-rule='evenodd'%20transform='matrix(1%200%200%201%201.24962%2011.5059)'%20fill='rgb(127,%20140,%20141)'/%3e%3c/g%3e%3c/svg%3e")}.security-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath3843740608'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath3843740608)'%3e%3cpath%20d='M6.65905%20-0.472549C6.39807%20-0.69846%206.00336%20-0.67003%205.77745%20-0.40905L1.8844%204.08834L0.437381%202.67073C0.190813%202.42917%20-0.204899%202.43324%20-0.446456%202.67981C-0.688013%202.92637%20-0.68395%203.32209%20-0.437381%203.56364L1.48449%205.44646Q1.49826%205.45994%201.51282%205.47255Q1.55937%205.51284%201.61287%205.54327Q1.66638%205.5737%201.7248%205.59311Q1.78321%205.61252%201.8443%205.62017Q1.90538%205.62781%201.96678%205.62338Q2.02817%205.61896%202.08753%205.60265Q2.14688%205.58633%202.20192%205.55875Q2.25695%205.53117%202.30554%205.49338Q2.35414%205.45559%202.39442%205.40905L6.72255%200.40905C6.94846%200.148071%206.92003%20-0.246639%206.65905%20-0.472549Z'%20fill-rule='evenodd'%20transform='matrix(1%200%200%201%206.875%206.875)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M16.1045%203.12963Q13.4704%202.65714%2011.8559%202.15277Q10.2901%201.66357%207.86772%200.569606L8.12497%200L8.38221%200.569606Q5.95988%201.66357%204.39401%202.15277Q2.77956%202.65714%200.145472%203.12963L0.0351222%202.51445L0.658882%202.55381Q0.449351%205.87474%201.52937%208.62968Q2.39972%2010.8498%204.07168%2012.6237Q5.29963%2013.9266%206.84584%2014.8799Q7.69312%2015.4023%208.35845%2015.6702L8.12497%2016.25L7.89149%2015.6702Q8.55681%2015.4023%209.40409%2014.8799Q10.9503%2013.9266%2012.1783%2012.6237Q13.8502%2010.8498%2014.7206%208.62968Q15.8006%205.87474%2015.5911%202.55381L16.2148%202.51445L16.1045%203.12963ZM16.3252%201.89927Q16.3764%201.90847%2016.4255%201.92602Q16.4745%201.94358%2016.52%201.96901Q16.5654%201.99444%2016.606%202.02704Q16.6467%202.05964%2016.6813%202.09852Q16.716%202.13739%2016.7437%202.18147Q16.7715%202.22555%2016.7915%202.27361Q16.8116%202.32167%2016.8235%202.37239Q16.8353%202.42311%2016.8386%202.47509Q17.0656%206.07279%2015.8843%209.08591Q14.9257%2011.5312%2013.0879%2013.4811Q11.7468%2014.904%2010.0601%2015.9439Q9.12237%2016.5221%208.35845%2016.8298Q8.24609%2016.875%208.12497%2016.875Q8.00384%2016.875%207.89149%2016.8298Q7.12757%2016.5221%206.18981%2015.9439Q4.50316%2014.904%203.16204%2013.4811Q1.32422%2011.5312%200.365605%209.08591Q-0.81563%206.07279%20-0.588637%202.4751Q-0.585358%202.42312%20-0.573519%202.37239Q-0.561681%202.32167%20-0.54161%202.27361Q-0.521539%202.22555%20-0.49379%202.18147Q-0.466041%202.13739%20-0.431379%202.09852Q-0.396717%202.05964%20-0.356098%202.02704Q-0.315479%201.99444%20-0.270024%201.96901Q-0.224569%201.94358%20-0.175532%201.92602Q-0.126495%201.90847%20-0.0752282%201.89927Q2.48167%201.44062%204.02126%200.959636Q5.51462%200.493093%207.86772%20-0.569606Q7.99038%20-0.625%208.12496%20-0.625Q8.25955%20-0.625%208.38221%20-0.569606Q10.7353%200.493093%2012.2287%200.959636Q13.7683%201.44062%2016.3252%201.89927Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%201.87503%201.875)'%20fill='rgb(127,%20140,%20141)'/%3e%3c/g%3e%3c/svg%3e")}.about-icon{background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'%20?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3e%3cdefs%3e%3cclipPath%20id='clipPath1446238949'%3e%3cpath%20d='M0%200L20%200L20%2020L0%2020L0%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%200%200)'/%3e%3c/clipPath%3e%3c/defs%3e%3cg%20clip-path='url(%23clipPath1446238949)'%3e%3cpath%20d='M7.1875%200.625Q5.85212%200.625%204.63346%201.1405Q3.4559%201.63863%202.54726%202.54726Q1.63863%203.4559%201.14051%204.63346Q0.625001%205.85212%200.625001%207.1875Q0.625%208.52288%201.1405%209.74154Q1.63863%2010.9191%202.54726%2011.8277Q3.4559%2012.7364%204.63346%2013.2345Q5.85212%2013.75%207.1875%2013.75Q8.52288%2013.75%209.74153%2013.2345Q10.9191%2012.7364%2011.8277%2011.8277Q12.7364%2010.9191%2013.2345%209.74153Q13.75%208.52287%2013.75%207.1875Q13.75%205.85212%2013.2345%204.63346Q12.7364%203.4559%2011.8277%202.54726Q10.9191%201.63863%209.74153%201.14051Q8.52287%200.625%207.1875%200.625L7.1875%200.625ZM7.1875%20-0.625Q8.77638%20-0.625%2010.2285%20-0.0107312Q11.6306%200.582363%2012.7116%201.66338Q13.7926%202.74439%2014.3857%204.14648Q15%205.59861%2015%207.1875Q15%208.77638%2014.3857%2010.2285Q13.7926%2011.6306%2012.7116%2012.7116Q11.6306%2013.7926%2010.2285%2014.3857Q8.77639%2015%207.1875%2015Q5.59861%2015%204.14648%2014.3857Q2.74439%2013.7926%201.66338%2012.7116Q0.582365%2011.6306%20-0.0107317%2010.2285Q-0.625%208.77639%20-0.624999%207.1875Q-0.624999%205.59861%20-0.0107312%204.14648Q0.582364%202.7444%201.66338%201.66338Q2.7444%200.582364%204.14648%20-0.0107317Q5.59861%20-0.625%207.1875%20-0.625L7.1875%20-0.625Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%202.5%202.5)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M-0.625%200C-0.625%200.345175%20-0.345175%200.625%200%200.625L0.625%200.625L0.625%204.53125C0.625%204.87642%200.904825%205.15625%201.25%205.15625C1.59518%205.15625%201.875%204.87642%201.875%204.53125L1.875%200Q1.875%20-0.0615571%201.86299%20-0.121931Q1.85098%20-0.182306%201.82742%20-0.239177Q1.80387%20-0.296048%201.76967%20-0.347231Q1.73547%20-0.398414%201.69194%20-0.441942Q1.64841%20-0.485469%201.59723%20-0.519668Q1.54605%20-0.553868%201.48918%20-0.577425Q1.43231%20-0.600982%201.37193%20-0.612991Q1.31156%20-0.625%201.25%20-0.625L0%20-0.625C-0.345175%20-0.625%20-0.625%20-0.345175%20-0.625%200Z'%20fill-rule='evenodd'%20transform='matrix(1%200%200%201%208.59375%208.59375)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M-0.625%200C-0.625%200.345175%20-0.345175%200.625%200%200.625L3.4375%200.625C3.78268%200.625%204.0625%200.345175%204.0625%200C4.0625%20-0.345175%203.78268%20-0.625%203.4375%20-0.625L0%20-0.625C-0.345175%20-0.625%20-0.625%20-0.345175%20-0.625%200Z'%20fill-rule='evenodd'%20transform='matrix(1%200%200%201%208.125%2013.2812)'%20fill='rgb(127,%20140,%20141)'/%3e%3cpath%20d='M1.01562%200C0.735168%200%200.495782%200.0991563%200.297469%200.297469C0.0991565%200.495782%200%200.735168%200%201.01562C0%201.29608%200.0991563%201.53547%200.297469%201.73378C0.495782%201.93209%200.735168%202.03125%201.01562%202.03125C1.29608%202.03125%201.53547%201.93209%201.73378%201.73378C1.93209%201.53547%202.03125%201.29608%202.03125%201.01562C2.03125%200.735168%201.93209%200.495782%201.73378%200.297469C1.53547%200.0991563%201.29608%200%201.01562%200Z'%20fill-rule='nonzero'%20transform='matrix(1%200%200%201%208.67188%205.07812)'%20fill='rgb(127,%20140,%20141)'/%3e%3c/g%3e%3c/svg%3e")}.settings-main{flex:1;display:flex;flex-direction:column;gap:24px;max-width:1136px;padding:32px 40px;overflow-y:auto}.settings-section{background:#fff;border-radius:8px;box-shadow:0 1px 3px #00000014;padding:24px;display:flex;flex-direction:column;gap:20px}.section-title{color:#2c3e50;font-size:16px;font-weight:600;line-height:24px;margin:0;padding-bottom:16px;border-bottom:1px solid #F0F0F0}.info-content{display:flex;flex-direction:column;gap:16px}.avatar-section{display:flex;flex-direction:row;align-items:center;gap:12px}.avatar-container{position:relative;width:80px;height:80px;border-radius:50%;overflow:visible;border:2px solid #E5E5E5;background:#f8f9fa;display:flex;align-items:center;justify-content:center}.avatar{width:100%;height:100%;object-fit:cover}.avatar-edit{position:absolute;bottom:2px;right:2px;width:24px;height:24px;background-image:url(./assets/svg/systemsettings_xxx.svg);background-size:cover;background-position:center}.change-avatar{color:#3498db;font-size:14px;font-weight:400;line-height:20px;cursor:pointer;transition:opacity .2s}.change-avatar:hover{opacity:.8}.info-fields{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap}.field-group{display:flex;flex-direction:column;gap:8px;flex:1;min-width:200px}.field-label{color:#2c3e50;font-size:14px;font-weight:500;line-height:20px}.field-input{width:100%;height:40px;border:1px solid #E5E5E5;border-radius:6px;padding:0 12px;display:flex;align-items:center;color:#2c3e50;font-size:14px;line-height:20px;background:#f8f9fa}.field-input.with-icon{padding-left:40px;background-position:12px center;background-repeat:no-repeat;background-size:16px 16px}.email-icon{background-image:url(./assets/svg/systemsettings_yyy.svg)}.phone-icon{background-image:url(./assets/svg/systemsettings_zzz.svg)}.edit-btn{width:104px;height:36px;background:#3498db;color:#fff;font-size:14px;font-weight:500;line-height:20px;border:none;border-radius:6px;cursor:pointer;align-self:flex-start;margin-top:8px;transition:background-color .2s}.edit-btn:hover{background:#2980b9}.notification-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #F8F9FA}.notification-info{display:flex;flex-direction:column;gap:4px}.notification-title{color:#2c3e50;font-size:14px;font-weight:500;line-height:20px}.notification-desc{color:#95a5a6;font-size:12px;line-height:18px}.toggle-switch{width:44px;height:24px;border-radius:12px;background:#bdc3c7;cursor:pointer;transition:background-color .3s;position:relative}.toggle-switch:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .3s}.toggle-switch.active{background:#3498db}.toggle-switch.active:after{transform:translate(20px)}.parameter-row{display:flex;flex-direction:row;gap:16px}.parameter-item{display:flex;flex-direction:column;gap:8px}.parameter-label{color:#2c3e50;font-size:14px;font-weight:500;line-height:20px}.parameter-input{width:100%;max-width:232px;height:40px;border:1px solid #E5E5E5;border-radius:6px;padding:0 12px;display:flex;align-items:center;color:#2c3e50;font-size:14px;line-height:20px;background:#f8f9fa}.scoring-section{display:flex;flex-direction:column;gap:12px}.scoring-title{color:#2c3e50;font-size:14px;font-weight:500;line-height:20px;margin-bottom:4px}.scoring-item{display:flex;flex-direction:row;align-items:center;gap:16px}.scoring-label{width:100px;color:#2c3e50;font-size:14px;line-height:20px}.scoring-bar-container{flex:1;height:6px;background:#ecf0f1;border-radius:3px;overflow:hidden}.scoring-bar{height:100%;background:#3498db;border-radius:3px;transition:width .3s}.scoring-value{width:50px;color:#2c3e50;font-size:14px;line-height:20px;text-align:right;font-weight:500}.class-preference-row{display:flex;flex-direction:row;gap:16px}.backup-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #F8F9FA}.backup-info{display:flex;flex-direction:column;gap:4px}.backup-title{color:#2c3e50;font-weight:500;line-height:20px}.backup-desc{color:#7f8c8d;font-size:12px;line-height:16px}.backup-frequency{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 0}.frequency-label{color:#2c3e50;font-weight:500;line-height:20px;width:80px}.frequency-select{width:232px;height:40px;border:1px solid #E5E5E5;border-radius:6px;padding:0 12px;display:flex;align-items:center;color:#2c3e50;line-height:20px;background:#fff;cursor:pointer}.last-backup{display:flex;flex-direction:row;align-items:center;gap:12px;padding:12px 0}.last-backup-label{color:#2c3e50;font-weight:500;line-height:20px;width:80px}.last-backup-time{color:#7f8c8d;line-height:20px}.settings-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:12px;padding:20px 24px;background:#fff;border-radius:8px;box-shadow:0 1px 3px #00000014}.reset-btn{width:120px;height:36px;border:1px solid #E5E5E5;border-radius:6px;background:#fff;color:#7f8c8d;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:all .2s}.reset-btn:hover{border-color:#3498db;color:#3498db}.save-btn{width:120px;height:36px;border:none;border-radius:6px;background:#3498db;color:#fff;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:background-color .2s}.save-btn:hover{background:#2980b9}.edit-actions{display:flex;gap:12px;margin-top:24px}.edit-btn,.save-btn,.cancel-btn{padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;border:none}.edit-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.edit-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.save-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.save-btn:disabled{opacity:.6;cursor:not-allowed}.cancel-btn{background:#f5f5f5;color:#666}.cancel-btn:hover:not(:disabled){background:#e0e0e0}.field-input-editable{width:100%;padding:12px 16px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;color:#333;transition:all .3s ease;background:#fff}.field-input-editable:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.field-input-editable::placeholder{color:#999}.message-box{padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.message-box.success{background:#e8f5e9;color:#2e7d32;border-left:4px solid #4caf50}.message-box.error{background:#ffebee;color:#c62828;border-left:4px solid #f44336}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Microsoft YaHei,Arial,sans-serif;background-color:#f5f7fa;color:#2c3e50}.class-homework-list{width:100%;gap:12px}.top-nav{display:flex;justify-content:space-between;align-items:center;background-color:#0a1b36;padding:16px 32px;height:80px;box-shadow:0 2px 8px #0000001a}.nav-left .system-title{color:#fff;font-size:20px;font-weight:600}.nav-right{display:flex;gap:40px}.nav-item:hover,.nav-item.active{color:#fff;border-bottom-color:#3498db}.class-homework-list-breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.breadcrumb-item{cursor:pointer;transition:color .3s ease}.breadcrumb-item:hover{color:#3498db}.breadcrumb-item.active{color:#3498db;font-weight:500}.breadcrumb-separator{color:#999}.class-info-card{display:flex;justify-content:space-between;align-items:center;background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 2px 8px #00000014}.class-info-left{display:flex;align-items:center;gap:16px}.class-icon{width:32px;height:32px}.class-details{display:flex;flex-direction:column}.class-name{font-size:24px;font-weight:600;color:#2c3e50}.class-meta{display:flex;gap:32px}.meta-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#666}.meta-icon{width:16px;height:16px}.edit-class-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease}.edit-class-btn:hover{background-color:#2980b9}.btn-icon{width:16px;height:16px}.filter-area{display:flex;justify-content:space-between;align-items:center}.filter-left{display:flex;gap:16px;align-items:center}.search-box{position:relative;width:320px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#999}.search-input{width:100%;padding:12px 12px 12px 40px;border:1px solid #E5E5E5;border-radius:6px;font-size:14px;color:#2c3e50;outline:none;transition:border-color .3s ease}.search-input:focus{border-color:#3498db;box-shadow:0 0 0 2px #3498db33}.filter-dropdown{display:flex;align-items:center;gap:8px;padding:12px 16px;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px}.filter-dropdown:hover{border-color:#3498db}.dropdown-icon{width:12px;height:12px}.filter-dropdown{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;box-shadow:0 4px 12px #0000001a;z-index:100;min-width:120px;margin-top:4px}.dropdown-item{padding:4px 6px;font-size:14px;color:#2c3e50;cursor:pointer;transition:background-color .3s ease}.add-homework-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease}.add-homework-btn:hover{background-color:#2980b9}.class-homework-list{display:flex;flex-direction:column;gap:16px}.class-homework-item{background-color:#fff;box-shadow:0 2px 8px #00000014;overflow:hidden;transition:box-shadow .3s ease;padding:24px;gap:24px;background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;display:flex;flex-direction:row;align-items:center;min-height:80px;justify-content:flex-start}.homework-item:hover{box-shadow:0 4px 16px #0000001f}.homework-left{display:flex;align-items:flex-start;gap:16px;flex:1}.homework-icon-container{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.homework-icon.blue{background-color:#eaf2f8}.homework-icon.green{background-color:#e8f8f5}.homework-icon.red{background-color:#fadbd8}.homework-icon.orange{background-color:#fff5e6}.homework-icon-img{width:24px;height:24px}.homework-details{display:flex;flex-direction:column;flex:1}.homework-header-row{display:flex;gap:12px;align-items:center}.homework-title{font-size:14px;font-weight:600;color:#2c3e50}.homework-tags{display:flex;gap:8px}.tag{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:center}.type-tag.blue{background-color:#eaf2f8;color:#3498db}.type-tag.green{background-color:#e8f8f5;color:#2ecc71}.type-tag.red{background-color:#fadbd8;color:#e74c3c}.type-tag.orange{background-color:#fff5e6;color:#e67e22}.status-tag.blue{background-color:#3498db;color:#fff}.status-tag.green{background-color:#2ecc71;color:#fff}.status-tag.red{background-color:#e74c3c;color:#fff}.status-tag.orange{background-color:#e67e22;color:#fff}.class-homework-meta{display:flex;flex-direction:row;gap:32px}.class-homework-meta .meta-item{display:flex;align-items:center;gap:6px;font-size:14px;color:#666}.class-homework-meta .meta-icon{width:14px;height:14px}.homework-progress-section{margin-top:8px}.progress-row{display:flex;align-items:center;gap:16px;margin-bottom:8px}.progress-label{font-size:12px;color:#999;white-space:nowrap;flex-shrink:0}.classhomeworklist-progress-content{display:flex;align-items:center;gap:16px;flex:1}.progress-bar-container{width:100%;max-width:500px;flex:1}.progress-bar{width:100%;height:6px;background-color:#f0f0f0;border-radius:3px;overflow:hidden}.progress-fill{height:100%;border-radius:3px;transition:width .3s ease}.progress-fill.blue{background-color:#3498db}.progress-fill.green{background-color:#2ecc71}.progress-fill.red{background-color:#e74c3c}.progress-fill.orange{background-color:#e67e22}.progress-stats{display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0}.completion-text{font-size:14px;color:#2c3e50}.average-score{font-size:14px;color:#2c3e50;margin-top:4px}.score-value{font-weight:600;margin-left:4px}.score-value.blue{color:#3498db}.score-value.green{color:#2ecc71}.score-value.red{color:#e74c3c}.score-value.orange{color:#e67e22}.homework-actions{display:flex;align-items:flex-start;margin-top:8px}.action-btn{padding:9px 17px;border:1px solid #E5E5E5;border-radius:8px;background-color:#fff;color:#7f8c8d;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:4px;font-family:Source Han Sans SC,sans-serif}.action-btn.icon-btn{align-items:stretch}.action-icon{width:16px;height:16px;margin:2px 0;flex-shrink:0}.action-btn.primary{background-color:#fff;border-color:#3498db;color:#3498db}.action-btn.primary:hover{background-color:#2980b9;border-color:#2980b9}.action-btn:hover{border-color:#3498db;color:#3498db;background-color:#f5f9fc}.action-btn.delete:hover{border-color:#e74c3c;color:#e74c3c}.action-btn.delete{color:#e74c3c}.action-btn.grade-btn{position:relative;padding:9px 12px;background-color:#fff;border-color:#27ae60;color:#27ae60;font-size:13px}.action-btn.grade-btn:hover{background-color:#27ae60;border-color:#27ae60;color:#fff}.grade-badge{position:absolute;top:-6px;right:-6px;background-color:#e74c3c;color:#fff;font-size:11px;font-weight:600;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 2px 4px #e74c3c4d}@media(max-width:860px){.top-nav{padding:16px}.nav-right{gap:20px}.class-homework-item{flex-direction:column;align-items:stretch;gap:16px}.class-info-card{flex-direction:column;align-items:flex-start;gap:16px}.class-meta{flex-direction:column;gap:8px}.filter-area{flex-direction:column;align-items:flex-start;gap:16px}.filter-left{width:100%;flex-wrap:wrap}.search-box{width:100%}.homework-header,.homework-stats{flex-direction:column;gap:16px}.homework-actions{flex-wrap:wrap;justify-content:flex-start}.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.progress-label{font-size:12px;color:#999;white-space:nowrap;flex-shrink:0;margin-bottom:0}.classhomeworklist-progress-content{display:flex;align-items:center;gap:12px;flex:1}.progress-bar-container{width:120px;max-width:120px;flex-shrink:0}.progress-stats{display:flex;gap:8px;align-items:center;white-space:nowrap;flex-shrink:0}.completion-text{font-size:13px;color:#2c3e50}}@media(max-width:480px){.progress-row{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.progress-label{margin-bottom:0!important}.classhomeworklist-progress-content{width:100%!important;flex-direction:column!important;gap:8px!important}.progress-bar-container{width:100%!important;max-width:none!important}.progress-stats{justify-content:flex-start!important;width:100%!important}.completion-text{font-size:14px!important}}.teacher-grading-panel-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.teacher-grading-panel{background:#fff;border-radius:16px;width:100%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #E8E8E8}.panel-header h2{font-size:20px;font-weight:600;color:#2c3e50;margin:0}.close-button{background:none;border:none;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .3s ease}.close-button svg{width:24px;height:24px;color:#7f8c8d}.panel-content{flex:1;overflow-y:auto;padding:24px}.assignment-info{background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:24px}.info-row{display:flex;margin-bottom:12px}.info-row:last-child{margin-bottom:0}.info-label{font-size:14px;color:#7f8c8d;min-width:80px}.info-value{font-size:14px;color:#2c3e50;font-weight:500}.section-title{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 16px}.audio-section{margin-bottom:24px}.audio-player{display:flex;align-items:center;gap:12px;padding:16px;background:#f0f3f7;border-radius:12px}.play-button{width:48px;height:48px;border-radius:50%;background:var(--color-primary);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-normal),box-shadow var(--transition-normal);flex-shrink:0}.play-button:hover{transform:scale(1.05);box-shadow:0 4px 16px #667eea66}.play-button.playing{animation:pulse 1.5s infinite}@keyframes pulse{0%,to{box-shadow:0 4px 16px #667eea66}50%{box-shadow:0 4px 24px #667eea99}}.play-button svg{width:24px;height:24px;color:#fff}.play-text{font-size:14px;color:#5d6d7e}.sentences-section{margin-bottom:24px}.sentences-list{max-height:200px;overflow-y:auto;border:1px solid #E8E8E8;border-radius:12px}.sentence-item{padding:12px 16px;border-bottom:1px solid #E8E8E8}.sentence-item:last-child{border-bottom:none}.sentence-text{font-size:14px;color:#2c3e50;line-height:1.6}.grade-section{margin-bottom:0}.score-input-wrapper{margin-bottom:16px}.score-label{display:block;font-size:14px;color:#5d6d7e;margin-bottom:8px}.score-input{width:100%;padding:12px 16px;border:2px solid #E8E8E8;border-radius:8px;font-size:16px;transition:all .3s ease}.score-input:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db1a}.comment-label{display:block;font-size:14px;color:#5d6d7e;margin-bottom:8px}.comment-textarea{width:100%;padding:12px 16px;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;transition:all .3s ease}.comment-textarea:focus{border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db1a}.panel-footer{display:flex;gap:12px;padding:20px 24px;border-top:1px solid #E8E8E8}.cancel-button,.submit-button{flex:1;padding:14px 24px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.cancel-button:disabled{opacity:.5;cursor:not-allowed}.submit-button{background:var(--color-primary);border:none;color:var(--color-surface)}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--color-primary-hover)}@media(max-width:768px){.teacher-grading-panel-overlay{padding:10px}.panel-header{padding:16px 20px}.panel-content{padding:16px}.panel-footer{padding:16px 20px}}.student-dashboard-page{min-height:100vh;padding:24px;background:radial-gradient(circle at top left,rgba(245,158,11,.08),transparent 26%),radial-gradient(circle at top right,rgba(14,165,233,.1),transparent 28%),#f7f8fc}.student-dashboard-state{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#475569}.student-dashboard-spinner{width:36px;height:36px;border-radius:999px;border:3px solid rgba(148,163,184,.3);border-top-color:#0f766e;animation:student-dashboard-spin .9s linear infinite}@keyframes student-dashboard-spin{to{transform:rotate(360deg)}}.student-dashboard-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#64748b;font-size:13px}.student-dashboard-breadcrumb button{border:none;background:none;color:#0f766e;padding:0;cursor:pointer;font-size:13px}.student-dashboard-breadcrumb span:last-child{color:#0f172a;font-weight:600}.student-dashboard-hero,.student-dashboard-overview-card,.student-dashboard-type-card,.student-dashboard-panel{background:#ffffffeb;border:1px solid rgba(226,232,240,.95);box-shadow:0 18px 40px #0f172a0f;backdrop-filter:blur(12px)}.student-dashboard-hero{border-radius:24px;padding:28px;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);gap:20px;margin-bottom:16px}.student-dashboard-hero-main{display:flex;align-items:center;gap:18px}.student-dashboard-avatar{width:84px;height:84px;border-radius:28px;padding:6px;background:linear-gradient(135deg,#fff7ed,#eff6ff)}.student-dashboard-hero-copy{min-width:0}.student-dashboard-kicker{color:#b45309;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.student-dashboard-hero-copy h1{margin:0;color:#0f172a;font-size:34px;line-height:1.1}.student-dashboard-hero-copy p{margin:10px 0 0;color:#475569;line-height:1.7;max-width:720px}.student-dashboard-meta-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.student-dashboard-meta-list span{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 12px;background:#f8fafc;color:#334155;font-size:13px}.student-dashboard-hero-side{display:flex;flex-direction:column;gap:12px}.student-risk-pill,.student-dashboard-status-card{border-radius:20px;padding:18px 20px}.student-risk-pill{display:flex;flex-direction:column;gap:6px}.student-risk-pill span,.student-dashboard-status-card span{display:block;color:#64748b;font-size:13px}.student-risk-pill strong,.student-dashboard-status-card strong{display:block;color:#0f172a;font-size:22px;font-weight:700}.student-risk-pill small,.student-dashboard-status-card small{display:block;color:#64748b;font-size:12px;line-height:1.5;word-break:break-all}.student-risk-pill.risk-good{background:linear-gradient(135deg,#ecfdf5,#f8fafc)}.student-risk-pill.risk-steady{background:linear-gradient(135deg,#eff6ff,#f8fafc)}.student-risk-pill.risk-alert{background:linear-gradient(135deg,#fff7ed,#fff1f2)}.student-dashboard-status-card{display:flex;flex-direction:column;gap:6px;background:linear-gradient(135deg,#f8fafc,#fff)}.student-dashboard-back-btn{margin-top:auto;border:none;border-radius:14px;background:#0f172a;color:#fff;padding:12px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-weight:600}.student-dashboard-banner{margin-bottom:16px;padding:12px 16px;border-radius:14px;font-size:14px}.student-dashboard-banner.warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.student-dashboard-banner.error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}.student-dashboard-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.student-dashboard-overview-card{border-radius:20px;padding:18px}.student-dashboard-overview-icon{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eff6ff,#fff7ed);color:#0f766e;margin-bottom:14px}.student-dashboard-overview-label{color:#64748b;font-size:13px;margin-bottom:8px}.student-dashboard-overview-value{color:#0f172a;font-size:30px;line-height:1.05;font-weight:700;margin-bottom:8px}.student-dashboard-overview-hint{color:#475569;font-size:13px;line-height:1.6}.student-dashboard-type-grid,.student-dashboard-main-grid,.student-dashboard-issue-grid{display:grid;gap:12px;margin-bottom:12px}.student-dashboard-type-grid,.student-dashboard-issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.student-dashboard-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-dashboard-type-card,.student-dashboard-panel{border-radius:20px;padding:20px}.student-dashboard-type-card.tone-speaking{background:linear-gradient(180deg,#f8fbff,#fff)}.student-dashboard-type-card.tone-listening{background:linear-gradient(180deg,#f7fffc,#fff)}.student-dashboard-type-card.tone-reading{background:linear-gradient(180deg,#fffaf5,#fff)}.student-dashboard-type-head,.student-dashboard-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.student-dashboard-type-head h2,.student-dashboard-panel-head h2{margin:0;color:#0f172a;font-size:18px}.student-dashboard-type-head span,.student-dashboard-panel-head span{color:#64748b;font-size:13px}.student-dashboard-panel-head p{color:#64748b;line-height:1.6;margin:8px 0 0;font-size:13px}.student-dashboard-type-tag{border-radius:999px;padding:7px 10px;background:#94a3b81f}.student-dashboard-type-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.student-dashboard-type-metrics span{display:block;color:#64748b;font-size:12px;margin-bottom:6px}.student-dashboard-type-metrics strong{color:#0f172a;font-size:22px}.student-dashboard-type-summary{margin-top:18px;border-radius:14px;padding:12px 14px;background:#94a3b81a;color:#334155;font-size:13px;line-height:1.6}.student-dashboard-chart-wrap{margin-top:12px}.student-dashboard-progress-strip,.student-dashboard-compare-grid{display:grid;gap:12px}.student-dashboard-progress-strip{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.student-dashboard-progress-strip>div,.student-dashboard-compare-card{border-radius:16px;padding:16px;background:#f8fafc}.student-dashboard-progress-strip span,.student-dashboard-compare-card span{display:block;color:#64748b;font-size:12px;margin-bottom:8px}.student-dashboard-progress-strip strong,.student-dashboard-compare-card strong{color:#0f172a;font-size:20px;line-height:1.3}.student-dashboard-progress-strip .positive strong{color:#047857}.student-dashboard-progress-strip .negative strong{color:#b91c1c}.student-dashboard-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}.student-dashboard-issue-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}.student-dashboard-issue-item{border-radius:14px;padding:14px;background:#f8fafc}.student-dashboard-issue-label{color:#0f172a;font-weight:600;margin-bottom:6px}.student-dashboard-issue-detail{color:#64748b;font-size:13px;line-height:1.6}.student-dashboard-record-panel{min-height:0}.student-dashboard-record-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}.student-dashboard-record-row{display:grid;grid-template-columns:minmax(0,1.8fr) auto auto auto;gap:12px;align-items:center;border-radius:16px;padding:16px;background:#f8fafc}.student-dashboard-record-title{color:#0f172a;font-weight:600;margin-bottom:8px}.student-dashboard-record-meta{display:flex;flex-wrap:wrap;gap:10px;color:#64748b;font-size:12px}.type-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600}.type-badge.type-speaking{background:#eff6ff;color:#1d4ed8}.type-badge.type-listening{background:#ecfdf5;color:#047857}.type-badge.type-reading{background:#fff7ed;color:#c2410c}.student-dashboard-record-score{color:#0f172a;font-size:20px;font-weight:700}.student-dashboard-record-status{padding:7px 10px;border-radius:999px;font-size:12px;font-weight:600}.student-dashboard-record-status.done{background:#ecfdf5;color:#047857}.student-dashboard-record-status.todo{background:#fff7ed;color:#c2410c}.student-dashboard-record-action{border:none;border-radius:12px;background:#0f172a;color:#fff;padding:10px 14px;display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}.student-dashboard-empty{min-height:180px;display:flex;align-items:center;justify-content:center;color:#64748b;font-size:14px}@media(max-width:1200px){.student-dashboard-overview-grid,.student-dashboard-type-grid,.student-dashboard-issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.student-dashboard-main-grid,.student-dashboard-hero{grid-template-columns:1fr}}@media(max-width:768px){.student-dashboard-page{padding:16px}.student-dashboard-overview-grid,.student-dashboard-type-grid,.student-dashboard-main-grid,.student-dashboard-issue-grid,.student-dashboard-progress-strip,.student-dashboard-compare-grid{grid-template-columns:1fr}.student-dashboard-hero{padding:20px}.student-dashboard-hero-main{flex-direction:column;align-items:flex-start}.student-dashboard-hero-copy h1{font-size:28px}.student-dashboard-record-row{grid-template-columns:1fr;align-items:flex-start}}.homework-practice-container{display:flex;gap:24px;background-color:#f5f7fa;max-width:100%;box-sizing:border-box}.practice-layout{display:flex;gap:12px;width:100%;height:100%;max-width:100%;box-sizing:border-box}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px}.loading-spinner{border:4px solid rgba(52,152,219,.3);border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}.loading-text{font-size:16px;color:#666}.practice-content{flex-grow:1;flex-basis:0;display:flex;flex-direction:column;gap:24px;max-width:calc(100% - 366px);box-sizing:border-box;overflow:auto}.sentence-progress{font-size:18px;font-weight:500;color:#7f8c8d;height:28px;display:flex;align-items:center}.sentence-content{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;display:flex;justify-content:center;align-items:center;max-width:100%;box-sizing:border-box;position:relative}.sentence-text{font-size:24px;font-weight:700;color:#2c3e50;text-align:center;line-height:39px;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;max-width:100%;width:100%;box-sizing:border-box;overflow:hidden;padding:12px}.sentence-text span{display:inline-block;max-width:100%;word-wrap:break-word;overflow-wrap:break-word;padding:12px}.demo-audio{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;display:flex;gap:12px;align-items:center;flex-wrap:nowrap;min-width:0}.progress-fill{height:100%;background-color:#3498db;border-radius:9999px;transition:width .1s ease}.time-display{display:flex;gap:10px;font-size:12px;color:#7f8c8d;white-space:nowrap;flex-shrink:0}.recording-section{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.recording-instruction{font-size:16px;font-weight:500;color:#2c3e50;margin-bottom:20px}.record-button{background:#3498db;border:none;border-radius:9999px;width:128px;height:128px;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:24px;transition:all .3s ease;box-shadow:0 4px 6px -4px #0000001a,0 10px 15px -3px #0000001a;margin:32px 0}.record-button:hover{background:#2980b9;transform:scale(1.05)}.record-button.recording{background:#e74c3c;animation:pulse 1s infinite}.record-button:disabled{background:#bdc3c7;cursor:not-allowed;opacity:.6}.record-button:disabled:hover{background:#bdc3c7;transform:none}@keyframes pulse{0%{box-shadow:0 0 #e74c3c66}70%{box-shadow:0 0 0 10px #e74c3c00}to{box-shadow:0 0 #e74c3c00}}.record-button svg,.record-button img{fill:#fff;width:48px;height:48px}.record-hint{font-size:14px;color:#2c3e50;margin-bottom:32px}.audio-waveform{display:flex;justify-content:center;align-items:center;height:80px;margin-top:20px}.waveform-container{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;max-width:634.39px}.waveform-icon{width:8px;height:100%;display:flex;align-items:center;background-size:cover}.waveform-icon.start{margin-top:23px;height:12px}.waveform-icon.end{margin-top:20px;height:18px}.waveform-bars{display:flex;flex-direction:row;align-items:center;gap:4px;flex:1}.waveform-bar{background:#3498db;border-radius:9999px;width:8px;flex-shrink:0;transition:height .05s ease}.waveform-bar.playing{background:#2980b9;transition:height .03s ease,background-color .3s ease;animation:pulse-light .5s infinite ease-in-out}@keyframes pulse-light{0%{opacity:1}50%{opacity:.8}to{opacity:1}}.audio-player{display:flex;align-items:center;gap:12px;background:#f5f5f5;padding:6px 12px;border-radius:20px;box-shadow:none;flex-wrap:nowrap;min-width:0}.play-button{background:none;border:none;color:#333;cursor:pointer;display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;transition:background-color .2s ease;flex-shrink:0}.play-button:hover{background-color:#f5f5f5}.play-button:disabled{color:#bdc3c7;cursor:not-allowed;opacity:.6}.play-button:disabled:hover{background-color:transparent}.time-display{color:#666;font-size:12px;min-width:45px;text-align:center;flex-shrink:0}.progress-bar-container{flex:1;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden;cursor:pointer;position:relative;min-width:50px}.progress-bar{background-color:#27ae60;border-radius:2px;transition:width .1s linear}.volume-control{color:#666;cursor:pointer;display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;transition:background-color .2s ease;flex-shrink:0}.volume-control:hover{background-color:#f5f5f5}.playback-button svg{fill:#fff;width:20px;height:20px}.playback-time{font-size:14px;color:#7f8c8d;font-weight:500}.evaluation-panel{flex-shrink:0;width:342px;display:flex;flex-direction:column;gap:12px}.evaluation-panel h3{font-size:18px;font-weight:700;color:#2c3e50;margin:0;padding-bottom:8px;border-bottom:1px solid #E5E5E5}.evaluation-item{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:2px}.evaluation-label{display:flex;justify-content:space-between;align-items:center}.evaluation-label span:first-child{font-weight:500;color:#2c3e50;margin-top:2px}.evaluation-label .score{font-size:18px;font-weight:700;color:#27ae60}.evaluation-level{font-size:14px;color:#27ae60;margin-top:4px}.total-score{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:8px}.score-label{font-size:14px;color:#f3f6f6;text-align:center}.practice-score-value{font-size:48px;font-weight:700;color:#3498db;line-height:48px}.score-max{font-size:16px;color:#2c3e50;margin-top:4px}.pass-requirement{background:#fff;display:flex;justify-content:center;align-items:center;border-top:1px solid #E5E5E5}.pass-requirement span{font-size:14px;color:#7f8c8d;text-align:center}.action-buttons{display:flex;gap:12px;margin-top:20px}.prev-button{flex:1;min-height:44px;max-height:56px;background:#95a5a6;border:none;border-radius:8px;padding:12px 24px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease;display:flex;justify-content:center;align-items:center}.prev-button:hover:not(:disabled){background:#7f8c8d}.prev-button:disabled{background:#bdc3c7;cursor:not-allowed}.next-button{flex:1;min-height:44px;max-height:56px;background:#27ae60;border:none;border-radius:8px;padding:12px 24px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease;display:flex;justify-content:center;align-items:center}.next-button:hover:not(:disabled){background:#229954}.next-button:disabled{background:#bdc3c7;cursor:not-allowed}.retry-button{flex:1;min-height:44px;max-height:56px;background:#3498db;border:none;border-radius:8px;padding:12px 24px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease;display:flex;justify-content:center;align-items:center}.retry-button:hover:not(:disabled){background:#2980b9}.retry-button:disabled{background:#bdc3c7;cursor:not-allowed}.retry-count-label{flex:1;min-height:44px;max-height:56px;background:#ecf0f1;border:2px solid #BDC3C7;border-radius:8px;padding:12px 24px;color:#2c3e50;font-size:16px;font-weight:500;display:flex;justify-content:center;align-items:center;text-align:center}@media(max-width:1024px){.homework-practice-container{flex-direction:column;padding:16px;gap:16px}.practice-layout{flex-direction:column;min-height:100vh}.practice-content{max-width:100%;width:100%;overflow:visible;display:flex;flex-direction:column;gap:16px}.evaluation-panel{width:100%;margin-top:0}}@media(max-width:768px){.sentence-text{font-size:20px;line-height:32px;padding:12px}.demo-audio{gap:8px;padding:12px}.demo-audio .play-button{width:40px;height:40px}.demo-audio .play-button svg{width:24px;height:24px}.demo-audio .time-display{font-size:11px;gap:6px}.demo-audio .progress-bar{min-width:40px}.time-display{justify-content:space-between;gap:0}.record-button{width:100px;height:100px}.action-buttons{flex-direction:column}.audio-player{gap:8px;padding:6px 10px}.time-display{font-size:11px;min-width:40px}.progress-bar-container{min-width:40px}}.homework-view-container{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f7fa;gap:16px}.view-overall-stats{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:20px}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #E5E5E5}.stats-header h2{font-size:20px;font-weight:600;color:#2c3e50;margin:0}.completion-status{font-size:13px;color:#7f8c8d;background:#f8f9fa;padding:6px 12px;border-radius:16px}.stats-grid{display:flex;gap:20px;align-items:flex-start}.main-score-card{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;padding:15px;border-radius:12px;text-align:center;min-width:140px;box-shadow:0 4px 12px #3498db4d}.main-score-card .score-label{font-size:14px;opacity:.9;margin-bottom:8px}.main-score-card .score-value{font-size:32px;font-weight:700;line-height:1}.dimensions-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.dimension-card{background:#f8f9fa;padding:16px;border-radius:8px;text-align:center;border:1px solid #E9ECEF;transition:all .2s ease}.dimension-card:hover{background:#e9ecef;transform:translateY(-1px)}.dimension-card .dimension-label{font-size:13px;color:#7f8c8d;margin-bottom:6px}.dimension-card .dimension-value{font-size:20px;font-weight:600;color:#2c3e50}.lowest-words-section{margin-top:20px;padding-top:20px;border-top:1px solid #E5E5E5}.lowest-words-section h4{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 16px}.words-grid{display:flex;flex-wrap:wrap;gap:8px}.word-card{display:flex;flex-direction:column;align-items:center;padding:12px 16px;background:#fff;border-radius:8px;border:1px solid #E9ECEF;min-width:80px;box-shadow:0 1px 3px #0000001a}.word-card .word-score{font-size:11px;color:#7f8c8d}.view-sentence-area{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;flex:1}.sentence-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sentence-header h3{font-size:18px;font-weight:600;color:#2c3e50;margin:0}.sentence-controls{display:flex;gap:12px;align-items:center}.control-btn{padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.play-btn{background:#3498db;color:#fff}.play-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-1px)}.play-btn:disabled{background:#bdc3c7;cursor:not-allowed}.toggle-legend-btn{background:#f8f9fa;border:1px solid #E5E5E5;border-radius:6px;padding:8px 12px;font-size:12px;color:#7f8c8d;cursor:pointer;transition:all .2s ease}.toggle-legend-btn:hover{background:#e9ecef}.color-legend{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:20px;padding:16px;background:#f8f9fa;border-radius:8px;border:1px solid #E9ECEF}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#2c3e50}.legend-color{width:14px;height:14px;border-radius:3px}.playback-progress{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px;background:#f8f9fa;border-radius:8px}.current-sentence-results{margin-top:24px;padding-top:20px;border-top:1px solid #E5E5E5}.current-sentence-results h4{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 16px}.sentence-results-grid{display:flex;gap:20px;align-items:flex-start}.sentence-total-score{background:linear-gradient(135deg,#27ae60,#229954);color:#fff;padding:20px;border-radius:12px;text-align:center;min-width:120px;box-shadow:0 4px 12px #27ae604d}.sentence-total-score .score-label{font-size:14px;opacity:.9;margin-bottom:8px}.sentence-total-score .score-value{font-size:28px;font-weight:700;line-height:1}.sentence-dimensions{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.sentence-dimensions .dimension-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa;border-radius:8px;border:1px solid #E9ECEF}.dimension-label{font-size:13px;color:#7f8c8d}.dimension-value{font-size:16px;font-weight:600;color:#2c3e50}.no-result-message{text-align:center;padding:40px;color:#7f8c8d;background:#f8f9fa;border-radius:8px;border:1px dashed #BDC3C7}.no-result-message p{font-size:16px;margin:0}.view-navigation{display:flex;gap:12px;justify-content:center;padding:16px 0}.navigation-buttons{display:flex;gap:12px;justify-content:center;margin-top:20px}.nav-btn{padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.prev-btn{background:#95a5a6;color:#fff}.prev-btn:hover:not(:disabled){background:#7f8c8d}.next-btn{background:#27ae60;color:#fff}.next-btn:hover:not(:disabled){background:#229954}.nav-btn:disabled{background:#bdc3c7;cursor:not-allowed}.loading-message{display:flex;justify-content:center;align-items:center;height:400px;background:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d}.loading-message p{font-size:16px;color:#7f8c8d}@media(max-width:1024px){.homework-view-container{gap:12px}.stats-grid{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:start}.main-score-card{width:100%;min-width:unset}.dimensions-grid,.sentence-dimensions{grid-template-columns:1fr 1fr}.sentence-results-grid{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:start}.sentence-total-score{width:100%;min-width:unset}}@media(max-width:768px){.homework-view-container{gap:8px}.view-overall-stats,.view-sentence-area{padding:16px}.stats-header{flex-direction:column;align-items:flex-start;gap:8px}.stats-header h2{font-size:18px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.main-score-card{width:100%;min-width:unset;padding:16px 12px}.dimensions-grid{grid-template-columns:1fr;gap:8px}.dimension-card{padding:12px 8px;text-align:center}.words-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.word-card{min-width:unset;width:100%;padding:10px 8px}.sentence-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.sentence-total-score{width:100%;min-width:unset;padding:16px 12px}.sentence-dimensions{grid-template-columns:1fr;gap:8px}.sentence-header{flex-direction:column;align-items:flex-start;gap:12px}.sentence-controls{width:100%;justify-content:space-between}.view-navigation{flex-direction:column;gap:8px;padding:12px 0}.nav-btn{width:100%;padding:14px;font-size:16px}.color-legend{flex-direction:column;gap:8px}.main-score-card .score-value{font-size:28px}.sentence-total-score .score-value{font-size:24px}}@media(max-width:480px){.view-overall-stats,.view-sentence-area{padding:12px}.sentence-text{font-size:18px;line-height:1.5;padding:12px}.stats-grid{grid-template-columns:1fr;gap:12px}.main-score-card,.sentence-total-score{width:100%;min-width:unset;padding:16px}.dimensions-grid{grid-template-columns:1fr;gap:8px}.dimension-card{padding:12px}.words-grid{grid-template-columns:1fr;gap:8px}.word-card{min-width:unset;width:100%;padding:12px}.sentence-results-grid{grid-template-columns:1fr;gap:12px}.sentence-total-score{width:100%;min-width:unset}.sentence-dimensions{grid-template-columns:1fr;gap:8px}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.submit-confirm-overlay{backdrop-filter:blur(4px)}.submit-confirm-dialog{animation:fadeInScale .3s ease-out}.submit-confirm-actions button{transition:all .2s cubic-bezier(.4,0,.2,1)}.submit-confirm-actions button:active{transform:translateY(1px)}@media(max-width:640px){.submit-confirm-dialog{margin:16px;padding:24px;width:calc(100% - 32px)}.submit-confirm-actions{flex-direction:column}.submit-confirm-actions button{width:100%}}.low-score-words{padding:16px}.low-score-words .section-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:14px;font-weight:600;color:#374151}.low-score-words .words-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;line-height:2.5;margin-bottom:16px}.low-score-words .word-item{position:relative;display:inline-block;padding:8px 12px;margin:6px 6px 16px;background-color:#fff;border-radius:8px;font-weight:600;font-size:16px;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;cursor:pointer;border:2px solid}.low-score-words .word-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.low-score-words .word-score{position:absolute;top:-6px;right:-6px;color:#fff;font-size:10px;font-weight:700;padding:2px 4px;border-radius:10px;min-width:20px;text-align:center;line-height:1.2;box-shadow:0 1px 3px #0000004d;z-index:1}.low-score-words .excellent-message{padding:16px;background-color:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;text-align:center;color:#0369a1;font-size:14px}.homework-view-container .sentence-text{line-height:2.2;padding:12px}.homework-view-container .sentence-text span{position:relative;margin-right:8px;margin-bottom:12px;display:inline-block;padding:4px 8px;border-radius:4px;border:1px solid}@media(max-width:768px){.low-score-words .words-grid{gap:10px;line-height:2.2}.low-score-words .word-item{padding:6px 10px;margin:4px 4px 12px;font-size:14px}.low-score-words .word-score{font-size:9px;padding:1px 3px;top:-4px;right:-4px}.homework-view-container .sentence-text{line-height:2;padding:12px}.homework-view-container .sentence-text span{margin-bottom:10px;padding:3px 6px}}@media(max-width:480px){.low-score-words .section-title{flex-direction:column;align-items:flex-start;gap:4px}.low-score-words .words-grid{gap:8px;line-height:2}.low-score-words .word-item{padding:4px 8px;margin:3px 3px 10px;font-size:13px}.homework-view-container .sentence-text{line-height:1.8;padding:12px}.homework-view-container .sentence-text span{margin-bottom:8px;padding:2px 4px}.demo-audio{gap:6px;padding:10px}.demo-audio .play-button{width:36px;height:36px}.demo-audio .play-button svg{width:20px;height:20px}.demo-audio .time-display{font-size:10px;gap:4px}.demo-audio .progress-bar{min-width:30px}.audio-player{gap:6px;padding:4px 8px}.audio-player .play-button{width:28px;height:28px}.audio-player .play-button svg{width:18px;height:18px}.audio-player .time-display{font-size:10px;min-width:35px}.audio-player .volume-control{width:28px;height:28px}.audio-player .volume-control svg{width:14px;height:14px}.progress-bar-container{min-width:30px}}.phoneme-analysis-section{padding:20px;background-color:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}.phoneme-analysis-section h4{margin:0 0 16px;font-size:16px;font-weight:600;color:#374151;display:flex;align-items:center;gap:8px}.phoneme-analysis-section h4:before{content:"🔍";font-size:18px}.phoneme-analysis-content{display:flex;flex-direction:column;gap:20px}.phoneme-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;padding:16px;background-color:#fff;border-radius:8px;border:1px solid #e5e7eb}.phoneme-stat{display:flex;flex-direction:column;align-items:center;text-align:center}.phoneme-stat .stat-label{font-size:12px;color:#6b7280;margin-bottom:4px}.phoneme-stat .stat-value{font-size:18px;font-weight:700;color:#374151}.phoneme-section{display:flex;flex-direction:column;gap:12px}.phoneme-section-header{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.phoneme-section-header .section-icon{font-size:16px}.phoneme-section-header .section-title{color:#374151}.phoneme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}.phoneme-card{padding:12px;border-radius:8px;cursor:help;transition:all .2s ease;display:flex;flex-direction:column;gap:6px}.phoneme-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.phoneme-card.problem-phoneme{background-color:#fef2f2;border-color:#fecaca}.phoneme-card.good-phoneme{background-color:#f0fdf4;border-color:#bbf7d0}.phoneme-symbol{font-family:Georgia,serif;font-size:18px;font-weight:700;text-align:center}.problem-phoneme .phoneme-symbol{color:#dc2626}.good-phoneme .phoneme-symbol{color:#059669}.phoneme-score{font-size:14px;font-weight:600;text-align:center;padding:2px 6px;border-radius:4px;align-self:center}.problem-phoneme .phoneme-score{color:#dc2626;background-color:#fee2e2}.good-phoneme .phoneme-score{color:#059669;background-color:#dcfce7}.phoneme-examples{font-size:11px;font-style:italic;text-align:center;padding:4px 6px;border-radius:3px;border:1px solid}.problem-phoneme .phoneme-examples{color:#991b1b;background-color:#fef7f7;border-color:#f3e8e8}.good-phoneme .phoneme-examples{color:#065f46;background-color:#f7fef8;border-color:#e8f5e8}.phoneme-count{font-size:12px;text-align:center;color:#6b7280}.phoneme-explanation{font-size:11px;color:#6b7280;line-height:1.4;padding:12px;background-color:#f9fafb;border-radius:6px;border:1px solid #e5e7eb;text-align:center}.homework-view-container{padding:20px;max-width:1200px;margin:0 auto;background-color:#fff;min-height:100vh}.view-overall-stats{margin-bottom:24px;padding:24px;background-color:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.stats-header h2{margin:0;font-size:20px;font-weight:600;color:#374151}.completion-status{font-size:14px;color:#6b7280;background-color:#fff;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb}.stats-grid{display:flex;gap:20px;align-items:stretch}.main-score-card{flex:0 0 200px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background-color:#fff;border-radius:12px;border:2px solid #3b82f6;box-shadow:0 4px 6px #0000000d}.main-score-card .score-label{font-size:14px;color:#6b7280;margin-bottom:8px}.main-score-card .score-value{font-size:36px;font-weight:700;color:#3b82f6}.dimensions-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.dimension-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;background-color:#fff;border-radius:8px;border:1px solid #e5e7eb}.dimension-card .dimension-label{font-size:12px;color:#6b7280;margin-bottom:4px}.dimension-card .dimension-value{font-size:20px;font-weight:600;color:#374151}.lowest-words-section{margin-top:20px}.lowest-words-section h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#374151}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.word-card{display:flex;flex-direction:column;align-items:center;padding:8px;background-color:#fff;border-radius:6px;border:1px solid #e5e7eb}.word-card .word-text{font-size:14px;font-weight:500;margin-bottom:4px}.word-card .word-score{font-size:12px;color:#6b7280}.view-sentence-area{margin-bottom:24px;padding:24px;background-color:#fff;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 2px 4px #0000000d}.sentence-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.sentence-header h3{margin:0;font-size:18px;font-weight:600;color:#374151}.sentence-controls{display:flex;gap:12px}.control-btn{padding:8px 16px;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;color:#374151;font-size:14px;cursor:pointer;transition:all .2s ease}.control-btn:hover:not(.disabled){background-color:#f3f4f6;border-color:#9ca3af}.control-btn.disabled{opacity:.5;cursor:not-allowed}.play-btn:not(.disabled){background-color:#3b82f6;color:#fff;border-color:#3b82f6}.play-btn:hover:not(.disabled){background-color:#2563eb}.toggle-legend-btn{background-color:#f59e0b;color:#fff;border-color:#f59e0b}.toggle-legend-btn:hover{background-color:#d97706}.color-legend{display:flex;gap:16px;padding:12px;background-color:#f9fafb;border-radius:6px;border:1px solid #e5e7eb;margin-bottom:16px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#374151}.legend-color{width:12px;height:12px;border-radius:2px}.sentence-text{font-size:18px;line-height:1.6;color:#374151;padding:16px;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;min-height:60px;display:flex;align-items:center}.playback-progress{margin-top:12px}.progress-bar{width:100%;height:6px;background-color:#e5e7eb;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background-color:#3b82f6;transition:width .1s ease}.time-display{font-size:12px;color:#6b7280;text-align:center}.current-sentence-results{margin-top:20px;padding:16px;background-color:#f0f9ff;border-radius:8px;border:1px solid #bae6fd}.current-sentence-results h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#0369a1}.sentence-results-grid{display:flex;gap:16px;align-items:center}.sentence-total-score{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;padding:12px;background-color:#fff;border-radius:6px;border:1px solid #bae6fd}.sentence-total-score .score-label{font-size:12px;color:#6b7280;margin-bottom:4px}.sentence-total-score .score-value{font-size:24px;font-weight:700;color:#0369a1}.sentence-dimensions{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.dimension-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#fff;border-radius:4px;border:1px solid #e0f2fe}.dimension-item .dimension-label{font-size:12px;color:#6b7280}.dimension-item .dimension-value{font-size:14px;font-weight:600;color:#0369a1}.no-result-message{text-align:center;padding:40px;color:#6b7280}.view-navigation{display:flex;justify-content:center;gap:16px;padding:20px}.nav-btn{padding:12px 24px;border:1px solid #d1d5db;border-radius:8px;background-color:#fff;color:#374151;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:100px}.nav-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#9ca3af}.nav-btn:disabled{opacity:.5;cursor:not-allowed}.prev-btn:not(:disabled){background-color:#6b7280;color:#fff;border-color:#6b7280}.prev-btn:hover:not(:disabled){background-color:#4b5563}.next-btn:not(:disabled){background-color:#3b82f6;color:#fff;border-color:#3b82f6}.next-btn:hover:not(:disabled){background-color:#2563eb}@media(max-width:768px){.homework-view-container{padding:12px}.stats-grid{flex-direction:column;gap:12px}.main-score-card{flex:none}.dimensions-grid{grid-template-columns:1fr}.sentence-header{flex-direction:column;gap:12px;align-items:stretch}.sentence-controls{justify-content:center}.sentence-results-grid{flex-direction:column;gap:12px}.sentence-total-score{flex:none}.sentence-dimensions,.phoneme-grid{grid-template-columns:1fr}.phoneme-overview{grid-template-columns:repeat(2,1fr)}}.homework-practice-progress-header{display:flex;justify-content:space-between;align-items:center;width:100%}.homework-practice-retry-info{margin-left:20px;font-size:12px;color:#666}.homework-practice-learning-stats{display:flex;gap:15px;font-size:12px;color:#666}.homework-practice-paused-indicator{color:#f59e0b}.homework-practice-low-score-section{margin-bottom:20px}.homework-practice-section-title{font-size:14px;font-weight:600;color:#374151;margin-bottom:12px;display:flex;align-items:center;gap:8px;padding:12px}.homework-practice-section-subtitle{font-size:12px;color:#6b7280;font-weight:400}.homework-practice-no-errors-message{padding:16px;background-color:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;text-align:center;color:#0369a1}.homework-practice-success-icon{font-size:20px;margin-right:8px}.homework-practice-words-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;padding-left:24px}.homework-practice-word-item{position:relative;display:inline-block;padding:8px 12px;background-color:#fff;border-radius:8px;font-weight:600;font-size:16px;box-shadow:0 2px 4px #0000001a;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.homework-practice-word-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.homework-practice-word-score{position:absolute;top:-6px;right:-6px;color:#fff;font-size:10px;font-weight:700;padding:2px 4px;border-radius:10px;min-width:20px;text-align:center;line-height:1.2;box-shadow:0 1px 3px #0000004d}.homework-practice-word-excellent{border:2px solid #00E000;color:#00e000}.homework-practice-word-excellent .homework-practice-word-score{background-color:#00e000}.homework-practice-word-good{border:2px solid #00E3EE;color:#00e3ee}.homework-practice-word-good .homework-practice-word-score{background-color:#00e3ee}.homework-practice-word-fair{border:2px solid #5B5B5B;color:#5b5b5b}.homework-practice-word-fair .homework-practice-word-score{background-color:#5b5b5b}.homework-practice-word-poor{border:2px solid #FF5151;color:#ff5151}.homework-practice-word-poor .homework-practice-word-score{background-color:#ff5151}.homework-practice-color-legend-container{position:relative;display:inline-block;margin-left:10px}.homework-practice-color-legend-question{cursor:pointer;display:inline-block;width:20px;height:20px;border-radius:50%;background-color:#e5e5e5;color:#333;text-align:center;line-height:20px;font-size:14px;font-weight:700;transition:background-color .2s ease}.homework-practice-color-legend-question:hover{background-color:#d0d0d0}.homework-practice-color-legend-tooltip{position:absolute;top:calc(100% + 4px);right:0;background-color:#fff;border:1px solid #E5E5E5;border-radius:8px;padding:12px;box-shadow:0 4px 12px #00000026;z-index:1000;width:200px}.homework-practice-legend-title{margin-bottom:8px;font-weight:700;font-size:14px}.homework-practice-legend-item{display:flex;align-items:center;margin-bottom:6px}.homework-practice-legend-item:last-child{margin-bottom:0}.homework-practice-legend-color-box{width:16px;height:16px;margin-right:8px;display:inline-block}.homework-practice-legend-color-excellent{background-color:#00e000}.homework-practice-legend-color-good{background-color:#00e3ee}.homework-practice-legend-color-fair{background-color:#5b5b5b}.homework-practice-legend-color-poor{background-color:#ff5151}.homework-practice-legend-text{font-size:13px}.comparison-result{background:#fff;border-radius:12px;padding:24px;margin-top:24px;box-shadow:0 2px 8px #0000000a;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.comparison-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #F0F3F7}.comparison-title{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;color:#2c3e50}.status-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:500}.status-badge.correct{background:#d5edda;color:#155724}.status-badge.incorrect{background:#f8d7da;color:#721c24}.accuracy-score{display:flex;align-items:baseline;gap:4px;font-size:28px;font-weight:700}.accuracy-value{font-size:32px}.accuracy-label{font-size:16px;font-weight:600;opacity:.8}.comparison-content{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.comparison-section{display:flex;flex-direction:column;gap:8px}.section-label{font-size:13px;font-weight:500;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px}.section-content{padding:16px;background:#f8f9fa;border-radius:8px;font-size:15px;line-height:1.8;word-break:break-word}.section-content.user-input{background:#f8fbff}.section-content.correct-answer{background:#d5edda;color:#155724;font-weight:500;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.comparison-text{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.word-tag{display:inline-block;padding:4px 8px;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s ease}.word-tag.correct-word{background:#d5edda;color:#155724}.word-tag.incorrect-word{background:#f8d7da;color:#721c24;text-decoration:line-through}.word-tag.missing-word{background:#fff3cd;color:#856404;font-style:italic}.word-tag.extra-word{background:#f8d7da;color:#721c24;text-decoration:underline}.error-details{margin-top:8px;padding:16px;background:#f8f9fa;border-radius:8px}.error-details-title{font-size:14px;font-weight:600;color:#2c3e50;margin-bottom:12px}.error-group{margin-bottom:16px}.error-group:last-child{margin-bottom:0}.error-group-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.error-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;color:#fff}.error-icon.incorrect{background:#e74c3c}.error-icon.missing{background:#f39c12}.error-icon.extra{background:#9b59b6}.error-group-label{font-size:13px;font-weight:500;color:#2c3e50}.error-group-content{display:flex;flex-wrap:wrap;gap:8px;padding-left:28px}.error-item{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-radius:4px;font-size:14px}.error-word{color:#e74c3c;font-weight:500}.error-arrow{color:#7f8c8d;font-size:12px}.error-correct{color:#2ecc71;font-weight:500}.missing-word-tag,.extra-word-tag{display:inline-block;padding:4px 10px;border-radius:4px;font-size:13px;font-weight:500}.missing-word-tag{background:#fff3cd;color:#856404}.extra-word-tag{background:#e8daef;color:#6c3483}.comparison-actions{display:flex;gap:12px;padding-top:16px;border-top:2px solid #F0F3F7}.action-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.action-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.action-button:active{transform:translateY(0)}.retry-button{background:#f8f9fa;color:#2c3e50;border:2px solid #E8E8E8}.retry-button:hover{background:#fff;border-color:#3498db;color:#3498db}.next-button{background:var(--color-primary);color:var(--color-surface);margin-left:auto}.next-button:hover{box-shadow:var(--shadow-lg);background:var(--color-primary-hover)}.submit-button{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;margin-left:auto}.submit-button:hover{box-shadow:0 4px 16px #2ecc714d}.action-button svg{width:18px;height:18px}@media(max-width:768px){.comparison-result{padding:16px}.comparison-header{flex-direction:column;align-items:flex-start;gap:12px}.comparison-title{font-size:16px}.accuracy-score{font-size:24px}.accuracy-value{font-size:28px}.section-content{font-size:14px;padding:12px}.word-tag{font-size:13px;padding:3px 6px}.comparison-actions{flex-direction:column}.action-button{width:100%}.next-button{margin-left:0}}.listening-practice-mode{display:flex;flex-direction:column;gap:24px;background:#f8f9fa;border-radius:12px;max-width:100%;box-sizing:border-box}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px}.practice-header{background:#fff;padding:20px 24px;border-radius:12px;box-shadow:0 2px 8px #0000000a}.progress-info{display:flex;flex-direction:column;gap:12px}.progress-bar{width:100%;height:8px;background:#e8e8e8;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--color-primary);transition:width var(--transition-normal);border-radius:var(--radius-sm)}.progress-text{font-size:14px;color:#7f8c8d;font-weight:500;text-align:center}.listening-practice-content{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000a;flex:1}.sentence-display{display:flex;flex-direction:column;border-bottom:2px solid #F0F3F7}.sentence-number{font-size:16px;font-weight:600;color:#2c3e50}.completion-info{font-size:14px;color:#7f8c8d;text-align:right}.completion-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;background:linear-gradient(135deg,#d5edda,#c3e6cb);border-radius:12px;margin-bottom:24px;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.completion-icon{width:80px;height:80px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:#2ecc71;margin-bottom:20px;box-shadow:0 4px 12px #2ecc7133;animation:scaleIn .5s ease-out .2s both}.completion-text{text-align:center;color:#155724}.completion-text h3{font-size:24px;font-weight:700;margin:0 0 8px;animation:slideUp .5s ease-out .3s both}.completion-text p{font-size:16px;margin:0;opacity:.9;animation:slideUp .5s ease-out .4s both}.submit-homework-section{display:flex;justify-content:center;animation:slideUp .5s ease-out .5s both}.submit-homework-button{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 48px;background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #2ecc714d;outline:none}.submit-homework-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #2ecc7166}.submit-homework-button:active{transform:translateY(-1px);box-shadow:0 4px 12px #2ecc714d}.submit-homework-button svg{width:24px;height:24px;fill:#fff}.audio-player-section{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;display:flex;gap:12px;align-items:center;flex-wrap:nowrap;min-width:0}.play-button{background:#3498db;border:none;border-radius:9999px;width:48px;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:8px;transition:background-color .2s ease;flex-shrink:0}.play-button:disabled{background:#bdc3c7;cursor:not-allowed;opacity:.6}.play-button svg{fill:#fff;width:32px;height:32px}.progress-bar{flex-grow:1;height:6px;background-color:#e5e5e5;border-radius:9999px;overflow:hidden;position:relative;min-width:50px}.progress-fill{height:100%;background:linear-gradient(90deg,#3498db,#2980b9);transition:width .1s linear}.time-display{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:80px;flex-shrink:0}.time-display span:first-child{font-size:14px;font-weight:600;color:#2c3e50;font-variant-numeric:tabular-nums}.time-display span:last-child{font-size:12px;color:#7f8c8d}.input-section{display:flex;flex-direction:column;gap:12px}.input-label{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;color:#2c3e50}.attempt-info{font-size:13px;color:#7f8c8d;font-weight:400}.answer-input{width:100%;padding:16px;font-size:15px;color:#2c3e50;background:#f8f9fa;border:2px solid #E8E8E8;border-radius:8px;resize:none;outline:none;transition:all .3s ease;font-family:inherit;line-height:1.6}.answer-input:focus{border-color:#3498db;background:#fff;box-shadow:0 0 0 3px #3498db1a}.answer-input:disabled{opacity:.6;cursor:not-allowed}.answer-input::placeholder{color:#bdc3c7}.input-actions{display:flex;gap:12px}.navigation-actions{display:flex;gap:12px;justify-content:space-between;margin-top:8px}.navigation-actions .nav-button{flex:1;justify-content:center}.submit-button{flex:1;padding:14px 24px;background:var(--color-primary);color:var(--color-surface);border:none;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal);outline:none}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.submit-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.skip-button{padding:14px 24px;background:#f8f9fa;color:#7f8c8d;border:2px solid #E8E8E8;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.skip-button:hover:not(:disabled){background:#fff;border-color:#3498db;color:#3498db}.nav-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f8f9fa;color:#2c3e50;border:2px solid #E8E8E8;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.nav-button:hover:not(:disabled){background:#fff;border-color:#3498db;color:#3498db}.nav-button:disabled{opacity:.4;cursor:not-allowed}.nav-button svg{width:20px;height:20px}@media(max-width:768px){.listening-practice-mode{gap:16px}.practice-content{padding:16px}.sentence-display{gap:12px;margin-bottom:20px;padding-bottom:20px}.audio-player-section{padding:16px;gap:8px;flex-wrap:nowrap}.play-button{width:40px;height:40px;flex-shrink:0}.play-button svg{width:24px;height:24px}.progress-bar{min-width:30px}.time-display{min-width:60px}.time-display span:first-child{font-size:12px}.time-display span:last-child{font-size:10px}.answer-input{padding:12px;font-size:14px}.input-actions{flex-direction:column}.submit-button,.skip-button{width:100%}.navigation-actions{flex-direction:column;gap:8px}.navigation-actions .nav-button{width:100%}}.listening-practice-page{display:flex;flex-direction:column;gap:24px;background-color:#f5f7fa;min-height:100vh;padding:24px;box-sizing:border-box}.homework-practice-container{display:flex;flex-direction:column;gap:24px;background-color:#f5f7fa;min-height:100vh;box-sizing:border-box;max-width:1200px;margin:0 auto}.practice-header{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000a}.homework-title{font-size:24px;font-weight:700;color:#2c3e50;margin:0 0 16px}.listen-homework-info{display:flex;gap:32px;flex-wrap:wrap}.info-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#7f8c8d}.info-label{font-weight:500;color:#5a6c7d}.info-value{font-weight:600;color:#2c3e50}.info-item.learning-time{color:#f39c12}.info-item.learning-time .info-label{color:#e67e22}.info-item.learning-time .info-value{color:#f39c12;font-family:Courier New,monospace;font-size:16px}.paused-indicator{display:inline-block;padding:2px 8px;background:#e74c3c;color:#fff;border-radius:4px;font-size:12px;font-weight:600;margin-left:8px;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.loading-spinner{width:40px;height:40px;border:3px solid #E8E8E8;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}.loading-text{font-size:16px;color:#7f8c8d}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.error-message{font-size:16px;color:#e74c3c;font-weight:500}.retry-button{padding:12px 24px;background:#3498db;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.retry-button:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #2980b94d}.submission-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-icon{width:100px;height:100px;background:linear-gradient(135deg,#2ecc71,#27ae60);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;color:#fff;margin-bottom:24px;box-shadow:0 8px 24px #2ecc714d;animation:scaleIn .5s ease-out .2s both}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.success-title{font-size:32px;font-weight:700;color:#2c3e50;margin:0 0 12px;animation:slideUp .5s ease-out .3s both}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.success-message{font-size:16px;color:#7f8c8d;text-align:center;margin:0 0 32px;animation:slideUp .5s ease-out .4s both}.success-stats{display:flex;gap:40px;margin-bottom:32px;animation:slideUp .5s ease-out .5s both}.stat-item{display:flex;flex-direction:column;align-items:center;gap:8px}.stat-label{font-size:14px;color:#7f8c8d;font-weight:500}.stat-value{font-size:36px;font-weight:700;color:#2ecc71}.return-button{padding:16px 48px;background:var(--color-primary);color:var(--color-surface);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-lg);outline:none}animation: slideUp .5s ease-out .6s both; } .return-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #667eea66}.return-button:active{transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}@media(max-width:768px){.listening-practice-page,.homework-practice-container{padding:16px;gap:16px}.practice-header{padding:16px}.homework-title{font-size:20px;margin:0 0 12px}.listen-homework-info{gap:16px}.info-item{font-size:13px}}@media(min-width:1400px){.homework-practice-container{max-width:1400px}}.homework-todo-container{width:100%;max-width:none;margin:0;font-family:Source Han Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;font-weight:500;min-height:calc(100vh - 48px);box-sizing:border-box}.homework-todo-header{margin-bottom:24px}.homework-todo-title{font-size:28px;font-weight:700;color:#2c3e50;margin:0 0 8px;line-height:1.2}.homework-todo-subtitle{font-size:14px;font-weight:400;color:#7f8c8d;margin:0;line-height:1.4}.homework-todo-loading{text-align:center;padding:60px 0;color:#7f8c8d}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.homework-todo-error{text-align:center;padding:60px 0;color:#e74c3c}.retry-btn{background:#3498db;color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin-top:16px}.retry-btn:hover{background:#2980b9}.status-section{display:flex;align-items:center;gap:8px;margin-bottom:16px}.status-icon{width:12px;height:12px;border-radius:50%}.status-icon.pending{background-color:#e74c3c}.status-icon.completed{background-color:#27ae60;width:20px;height:20px}.status-title{color:#e74c3c;font-size:18px;font-weight:700;line-height:28px;min-height:28px;display:flex;align-items:center}.completed-section .status-title{color:#27ae60}.homework-content-area{display:flex;gap:16px;align-items:flex-start}.homework-section.pending-section{flex:0 0 auto;width:320px;min-width:320px}.homework-cards-grid{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 200px);overflow-y:auto}.homework-cards-grid::-webkit-scrollbar{width:6px}.homework-cards-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.homework-cards-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.homework-cards-grid::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.homework-card.pending-card{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;transition:box-shadow .2s ease,transform .2s ease}.homework-card.pending-card:hover{box-shadow:0 4px 8px #0000001f;transform:translateY(-1px)}.card-content{display:flex;flex-direction:column;gap:8px}.homework-title{color:#2c3e50;font-size:18px;line-height:28px;margin:0;min-height:28px;display:flex;align-items:center;gap:8px}.homework-type-tag{font-size:12px;font-weight:500;padding:2px 8px;border-radius:4px;line-height:16px;white-space:nowrap}.homework-type-tag.speaking{background:#e3f2fd;color:#1976d2}.homework-type-tag.listening{background:#e8f5e9;color:#388e3c}.homework-type-tag.writing{background:#fff3e0;color:#f57c00}.homework-type-tag.reading{background:#f3e5f5;color:#7b1fa2}.homework-meta{display:flex;flex-direction:column;gap:0}.meta-item{display:flex;align-items:center;gap:8px;margin-top:4px}.teacher-icon{width:16px;height:16px;background-color:#7f8c8d;border-radius:2px;margin-top:2px;flex-shrink:0;position:relative}.teacher-icon:before{content:"";position:absolute;top:2px;left:5px;width:6px;height:6px;border-radius:50%;background-color:#fff}.teacher-icon:after{content:"";position:absolute;bottom:2px;left:3px;width:10px;height:6px;border-radius:0 0 5px 5px;background-color:#fff}.todo-class-icon{width:16px;height:16px;background-color:#7f8c8d;border-radius:2px;margin-top:2px;flex-shrink:0;position:relative}.todo-class-icon:before{content:"";position:absolute;top:3px;left:3px;width:10px;height:7px;border:1.5px solid white;border-radius:1px;box-sizing:border-box}.todo-class-icon:after{content:"";position:absolute;bottom:2px;left:5px;width:6px;height:2px;background-color:#fff}.time-icon{width:16px;height:16px;background-color:#7f8c8d;border-radius:50%;margin-top:2px;flex-shrink:0;position:relative}.time-icon:before{content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;border:2px solid white;border-radius:50%;box-sizing:border-box}.time-icon:after{content:"";position:absolute;top:4px;left:8px;width:1px;height:5px;background-color:#fff;transform-origin:bottom}.meta-text{color:#7f8c8d;font-size:14px;font-weight:400;line-height:20px;min-height:20px;display:flex;align-items:center}.card-actions{display:flex;justify-content:flex-end;margin-top:4px;min-height:36px;align-items:flex-start}.start-btn{background:#3498db;border-radius:6px;color:#fff;font-size:14px;line-height:20px;text-align:center;text-decoration:none;padding:8px 24px;min-width:104px;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease}.start-btn:hover{background:#2980b9;color:#fff}.homework-section.completed-section{flex:1;margin-left:24px;min-width:0}.completed-homework-list{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 240px);overflow-y:auto}.completed-homework-list::-webkit-scrollbar{width:6px}.completed-homework-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.completed-homework-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.completed-homework-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.completed-homework-item{background:#fff;box-shadow:0 1px 2px #0000000d;border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .2s ease}.completed-homework-item.overdue-item{border-left:4px solid #e74c3c;background:#fdf2f2}.completed-homework-item:hover{box-shadow:0 2px 4px #00000014}.completed-content{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.completed-info{flex:1;min-width:0}.completed-title{color:#2c3e50;line-height:24px;margin:0 0 4px;min-height:24px;display:flex;align-items:center;font-size:16px;font-weight:500}.completed-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}.completed-date,.completed-teacher,.completed-class,.completed-published{color:#7f8c8d;font-size:13px;font-weight:400;line-height:18px;display:flex;align-items:center}.overdue-item .completed-date{color:#e74c3c;font-weight:500}.completed-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}.completed-score{color:#27ae60;font-weight:700;line-height:24px;min-height:24px;display:flex;align-items:center;font-size:16px}.overdue-item .completed-score{color:#e74c3c}.view-details-btn{background:#f8f9fa;color:#6c757d;border:1px solid #dee2e6;border-radius:4px;padding:4px 12px;font-size:12px;text-decoration:none;transition:all .2s ease;white-space:nowrap}.view-details-btn:hover{background:#e9ecef;color:#495057;border-color:#adb5bd}.empty-state{text-align:center;padding:60px 20px;color:#7f8c8d}.empty-icon{width:48px;height:48px;background-color:#ecf0f1;border-radius:50%;margin:0 auto 16px}@media(max-width:768px){.homework-todo-title{font-size:24px}.homework-todo-subtitle{font-size:13px}.homework-content-area{flex-direction:column;gap:24px}.homework-section.pending-section{width:100%;min-width:auto}.homework-section.completed-section{margin-left:0;width:100%}.homework-cards-grid{max-height:360px;overflow-y:auto}.completed-homework-list{max-height:500px;overflow-y:auto}.completed-content{flex-direction:row;gap:16px;align-items:center}.completed-actions{flex-direction:column;align-items:flex-end;gap:8px}}@media(max-width:480px){.homework-todo-container{padding:12px}.homework-todo-title{font-size:20px}.homework-todo-subtitle{font-size:12px}.status-title{font-size:16px}.homework-card.pending-card{padding:16px}.homework-title{font-size:16px;line-height:24px}.homework-cards-grid{max-height:280px}.completed-homework-item{padding:12px}.completed-title,.completed-score{font-size:14px}.completed-homework-list{max-height:450px}.start-btn{padding:6px 20px;font-size:13px;min-width:90px}.view-details-btn{font-size:11px;padding:3px 8px}.completed-content{flex-direction:column;gap:8px;align-items:flex-start}.completed-actions{flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;width:100%}}@media(min-width:1200px){.homework-section.pending-section{width:380px;min-width:380px}.homework-content-area{gap:32px}.homework-section.completed-section{margin-left:32px}}@media(min-width:1600px){.homework-section.pending-section{width:420px;min-width:420px}.homework-content-area{gap:40px}.homework-section.completed-section{margin-left:40px}}.homework-view-container{display:flex;flex-direction:column;background-color:#f5f7fa;gap:16px;padding:20px;max-width:1200px;margin:0 auto;background-color:#fff;min-height:100vh}.homework-view-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px}.homework-view-loading-spinner{border:4px solid rgba(52,152,219,.3);border-top:4px solid #3498db;border-radius:50%;width:40px;height:40px;animation:homework-view-spin 1s linear infinite;margin-bottom:15px}@keyframes homework-view-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.homework-view-loading-text{font-size:16px;color:#666}.homework-view-loading-message{display:flex;justify-content:center;align-items:center;height:400px;background:#fff;border-radius:8px;box-shadow:0 1px 2px #0000000d}.homework-view-loading-message p{font-size:16px;color:#7f8c8d}.homework-view-two-column-layout{display:flex;flex-direction:column;gap:16px}.homework-view-left-column,.homework-view-right-column{width:100%}.homework-view-phoneme-analysis{background:#fff;border-radius:8px;border:1px solid #e2e8f0;padding:16px}.homework-view-phoneme-title{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:14px;font-weight:600;color:#374151}.homework-view-phoneme-icon{font-size:16px}.homework-view-phoneme-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 10px;color:#6b7280}.homework-view-phoneme-loading .homework-view-loading-spinner{width:20px;height:20px;margin-bottom:8px}.homework-view-phoneme-content{display:grid;grid-template-columns:300px 1fr 1fr;gap:16px;align-items:start}.homework-view-phoneme-overview{display:flex;flex-direction:column;gap:10px;padding:12px;background-color:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.homework-view-phoneme-stat{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px;background-color:#fff;border-radius:4px}.homework-view-phoneme-stat .homework-view-stat-value{font-size:20px;font-weight:700;color:#374151;margin-bottom:2px}.homework-view-phoneme-stat .homework-view-stat-label{font-size:11px;color:#6b7280}.homework-view-weak-phonemes h5,.homework-view-category-stats h5{margin:0 0 10px;font-size:13px;font-weight:600;color:#374151}.homework-view-phoneme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.homework-view-phoneme-card{padding:10px;border-radius:6px;border:1px solid;cursor:help;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.homework-view-phoneme-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.homework-view-phoneme-symbol{font-family:Georgia,serif;font-size:16px;font-weight:700}.homework-view-phoneme-score{font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px}.homework-view-phoneme-examples{font-size:9px;font-style:italic;color:#6b7280;line-height:1.2}.homework-view-category-grid{display:grid;grid-template-columns:1fr;gap:10px}.homework-view-category-item{padding:10px;background-color:#fff;border-radius:5px;border:1px solid #e5e7eb;text-align:center}.homework-view-category-name{font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}.homework-view-category-score{font-size:16px;font-weight:700;color:#3b82f6;margin-bottom:2px}.homework-view-category-weak{font-size:10px;color:#6b7280}.homework-view-phoneme-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;grid-column:1 / -1}.homework-view-empty-icon{font-size:24px;margin-bottom:8px}.homework-view-empty-text{font-size:12px;color:#6b7280;line-height:1.3}.homework-view-view-overall-stats{background:#fff;box-shadow:0 2px 8px #00000014;padding:24px;background-color:#f8fafc;border-radius:12px;border:1px solid #e2e8f0}.homework-view-stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #E5E5E5}.homework-view-stats-header h2{color:#2c3e50;margin:0;font-size:20px;font-weight:600;color:#374151}.homework-view-completion-status{font-size:13px;color:#7f8c8d;background:#f8f9fa;font-size:14px;color:#6b7280;background-color:#fff;padding:8px 12px;border-radius:6px;border:1px solid #e5e7eb}.homework-view-stats-grid{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:stretch}.homework-view-main-score-card{flex:0 0 200px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background-color:#fff;border-radius:12px;border:2px solid #3b82f6;box-shadow:0 4px 6px #0000000d}.homework-view-main-score-card .homework-view-score-label{font-size:14px;margin-bottom:8px;color:#6b7280}.homework-view-main-score-card .homework-view-score-value{font-size:36px;font-weight:700;color:#3b82f6}.homework-view-dimensions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.homework-view-dimension-card{background:#f8f9fa;padding:16px;border-radius:8px;text-align:center;border:1px solid #E9ECEF;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#fff;border:1px solid #e5e7eb}.homework-view-dimension-card:hover{background:#e9ecef;transform:translateY(-1px)}.homework-view-dimension-card .homework-view-dimension-label{font-size:13px;color:#7f8c8d;font-size:12px;color:#6b7280;margin-bottom:4px}.homework-view-dimension-card .homework-view-dimension-value{font-size:20px;font-weight:600;color:#2c3e50;color:#374151}.homework-view-lowest-words-section{margin-top:20px;padding-top:20px;border-top:1px solid #E5E5E5}.homework-view-lowest-words-section h4{font-size:16px;font-weight:600;color:#2c3e50;margin:0 0 12px;color:#374151}.homework-view-words-grid{display:flex;flex-wrap:wrap;gap:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.homework-view-word-card{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:8px;border:1px solid #E9ECEF;min-width:80px;box-shadow:0 1px 3px #0000001a;padding:8px;border:1px solid #e5e7eb}.homework-view-word-card .homework-view-word-text{font-size:14px;font-weight:500;margin-bottom:4px}.homework-view-word-card .homework-view-word-score{font-size:11px;color:#7f8c8d;font-size:12px;color:#6b7280}.homework-view-view-sentence-area{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;flex:1;border:1px solid #e2e8f0;box-shadow:0 2px 4px #0000000d}.homework-view-sentence-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-direction:column;align-items:stretch;gap:12px}.homework-view-sentence-title-row{display:flex;align-items:center;gap:8px}.homework-view-sentence-header h3{font-size:18px;font-weight:600;color:#2c3e50;margin:0;color:#374151}.homework-view-toggle-legend-icon-btn{padding:4px 8px;border:none;background:transparent;font-size:16px;cursor:pointer;transition:all .2s ease;border-radius:4px}.homework-view-toggle-legend-icon-btn:hover{background-color:#f3f4f6}.homework-view-toggle-details-btn{padding:8px 16px;border:1px solid #3b82f6;border-radius:8px;background-color:#fff;color:#3b82f6;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.homework-view-toggle-details-btn:hover{background-color:#3b82f6;color:#fff}.homework-view-sentence-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.homework-view-control-btn{padding:8px 16px;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;border:1px solid #d1d5db;background-color:#fff;color:#374151;font-size:14px}.homework-view-control-btn:hover:not(.homework-view-disabled){background-color:#f3f4f6;border-color:#9ca3af}.homework-view-control-btn.homework-view-disabled{opacity:.5;cursor:not-allowed}.homework-view-play-btn{background:#3498db;color:#fff}.homework-view-play-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-1px)}.homework-view-play-btn:disabled{background:#bdc3c7;cursor:not-allowed}.homework-view-play-btn:not(.homework-view-disabled){background-color:#3b82f6;color:#fff;border-color:#3b82f6}.homework-view-play-btn:hover:not(.homework-view-disabled){background-color:#2563eb}.homework-view-color-legend{display:flex;gap:16px;padding:16px;background:#f8f9fa;border:1px solid #E9ECEF;background-color:#f9fafb;border-radius:6px;border:1px solid #e5e7eb;margin-bottom:16px;flex-wrap:wrap}.homework-view-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#2c3e50;gap:6px;font-size:12px;color:#374151}.homework-view-legend-color{width:14px;height:14px;width:12px;height:12px;border-radius:2px}.homework-view-sentence-content{margin-bottom:16px}.homework-view-phoneme-details{margin-top:16px;padding:16px;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.homework-view-phoneme-details h5{margin:0 0 12px;font-size:13px;font-weight:600;color:#374151}.homework-view-sentence-text{font-weight:700;text-align:center;overflow-wrap:break-word;white-space:pre-wrap;max-width:100%;width:100%;box-sizing:border-box;overflow:hidden;font-size:18px;line-height:1.6;color:#374151;background-color:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;min-height:60px;align-items:center;line-height:2.2;padding:12px}.homework-view-sentence-text span{word-wrap:break-word;overflow-wrap:break-word;position:relative;margin-right:8px;margin-bottom:12px;display:inline-block;padding:4px 8px;border-radius:4px;border:1px solid}.homework-view-playback-progress{display:flex;align-items:center;gap:12px;padding:12px;background:#f8f9fa;border-radius:8px;margin-top:12px}.homework-view-progress-bar{flex-grow:1;height:6px;background-color:#e5e5e5;position:relative;width:100%;background-color:#e5e7eb;border-radius:3px;overflow:hidden;margin-bottom:8px}.homework-view-progress-fill{height:100%;background-color:#3498db;border-radius:9999px;background-color:#3b82f6;transition:width .1s ease}.homework-view-time-display{display:flex;gap:10px;font-size:12px;color:#7f8c8d;white-space:nowrap;color:#6b7280;text-align:center}.homework-view-current-sentence-results{border-top:1px solid #E5E5E5;margin-top:20px;padding:16px;background-color:#f0f9ff;border-radius:8px;border:1px solid #bae6fd}.homework-view-current-sentence-results h4{font-size:16px;color:#2c3e50;margin:0 0 12px;font-size:14px;font-weight:600;color:#0369a1}.homework-view-sentence-results-grid{display:flex;gap:20px;align-items:flex-start;gap:16px;align-items:center;margin-top:12px}.homework-view-phoneme-details{margin-top:16px;padding-top:16px;border-top:1px solid #bae6fd}.homework-view-phoneme-details h5{margin:0 0 12px;font-size:13px;font-weight:600;color:#0369a1}.homework-view-phoneme-details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}.homework-view-phoneme-detail-card{padding:8px;border-radius:6px;border:1px solid;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;transition:all .2s ease;cursor:help}.homework-view-phoneme-detail-card:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.homework-view-phoneme-detail-symbol{font-family:Georgia,serif;font-size:14px;font-weight:700}.homework-view-phoneme-detail-score{font-size:10px;font-weight:600;padding:2px 5px;border-radius:3px}.homework-view-phoneme-detail-count{font-size:9px;color:#6b7280;font-style:italic}.homework-view-sentence-total-score{background:linear-gradient(135deg,#27ae60,#229954);color:#fff;text-align:center;min-width:120px;box-shadow:0 4px 12px #27ae604d;flex:0 0 120px;display:flex;flex-direction:column;align-items:center;padding:12px;background-color:#fff;border-radius:6px;border:1px solid #bae6fd}.homework-view-sentence-total-score .homework-view-score-label{font-size:14px;opacity:.9;font-size:12px;color:#f8f9fa;margin-bottom:4px}.homework-view-sentence-total-score .homework-view-score-value{font-size:28px;line-height:1;font-size:24px;font-weight:700;color:#f7f8f8}.homework-view-sentence-dimensions{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-template-columns:repeat(2,1fr);gap:8px}.homework-view-sentence-dimensions .homework-view-dimension-item{display:flex;justify-content:space-between;align-items:center;background:#f8f9fa;border:1px solid #E9ECEF;padding:8px 12px;background-color:#fff;border-radius:4px;border:1px solid #e0f2fe}.homework-view-dimension-item .homework-view-dimension-label{font-size:13px;color:#7f8c8d;font-size:12px;color:#6b7280}.homework-view-dimension-item .homework-view-dimension-value{font-size:16px;color:#2c3e50;font-size:14px;font-weight:600;color:#0369a1}.homework-view-no-result-message{text-align:center;padding:40px;color:#7f8c8d;background:#f8f9fa;border-radius:8px;border:1px dashed #BDC3C7;color:#6b7280}.homework-view-no-result-message p{font-size:16px;margin:0}.homework-view-nav-btn{padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;background-color:#fff;color:#374151;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s ease}.homework-view-nav-btn:hover:not(:disabled){background-color:#f3f4f6;border-color:#9ca3af}.homework-view-nav-btn:disabled{opacity:.5;cursor:not-allowed}.homework-view-prev-btn:not(:disabled){background-color:#6b7280;color:#fff;border-color:#6b7280}.homework-view-prev-btn:hover:not(:disabled){background-color:#4b5563}.homework-view-next-btn:not(:disabled){background-color:#3b82f6;color:#fff;border-color:#3b82f6}.homework-view-next-btn:hover:not(:disabled){background-color:#2563eb}@media(max-width:1024px){.homework-view-homework-view-container{gap:12px}.homework-view-two-column-layout{flex-direction:column;gap:16px}.homework-view-stats-grid{grid-template-columns:180px 1fr;gap:12px}.homework-view-main-score-card{padding:20px}.homework-view-main-score-card .homework-view-score-value{font-size:32px}.homework-view-dimensions-grid{grid-template-columns:1fr 1fr}.homework-view-phoneme-content{grid-template-columns:1fr;gap:12px}.homework-view-phoneme-overview{flex-direction:row;justify-content:space-around}.homework-view-phoneme-grid{grid-template-columns:repeat(3,1fr);gap:8px}.homework-view-category-grid{grid-template-columns:repeat(2,1fr)}.homework-view-sentence-dimensions{grid-template-columns:1fr 1fr}.homework-view-sentence-results-grid{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:start}.homework-view-phoneme-details-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.homework-view-sentence-total-score{width:100%;min-width:unset}}@media(max-width:768px){.homework-view-homework-view-container{gap:8px;padding:12px}.homework-view-two-column-layout{flex-direction:column;gap:12px}.homework-view-view-overall-stats,.homework-view-view-sentence-area{padding:16px}.homework-view-stats-header{flex-direction:column;align-items:flex-start;gap:8px}.homework-view-stats-header h2{font-size:18px}.homework-view-stats-grid{grid-template-columns:1fr;gap:12px}.homework-view-main-score-card{width:100%;padding:20px}.homework-view-phoneme-content{grid-template-columns:1fr;gap:12px}.homework-view-phoneme-overview{flex-direction:row;justify-content:space-around}.homework-view-phoneme-grid,.homework-view-category-grid{grid-template-columns:repeat(2,1fr);gap:8px}.homework-view-dimensions-grid{grid-template-columns:1fr;gap:8px}.homework-view-dimension-card{padding:12px 8px;text-align:center}.homework-view-words-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.homework-view-word-card{min-width:unset;width:100%;padding:10px 8px}.homework-view-sentence-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;flex-direction:column}.homework-view-phoneme-details-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.homework-view-sentence-total-score{width:100%;min-width:unset;padding:16px 12px;flex:none}.homework-view-sentence-dimensions{grid-template-columns:1fr;gap:8px}.homework-view-sentence-header{flex-direction:column;align-items:flex-start;gap:12px;align-items:stretch}.homework-view-sentence-controls{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px}.homework-view-nav-btn,.homework-view-control-btn,.homework-view-toggle-details-btn{flex:1;min-width:calc(50% - 4px)}.homework-view-color-legend{flex-direction:column;gap:8px}.homework-view-main-score-card .homework-view-score-value{font-size:28px}.homework-view-sentence-total-score .homework-view-score-value{font-size:24px}.homework-view-sentence-text{line-height:2;padding:12px}.homework-view-sentence-text span{margin-bottom:10px;padding:3px 6px}}@media(max-width:480px){.homework-view-view-overall-stats,.homework-view-view-sentence-area{padding:12px}.homework-view-sentence-text{font-size:18px;line-height:1.5;padding:12px;line-height:1.8}.homework-view-stats-grid{grid-template-columns:1fr;gap:12px}.homework-view-main-score-card,.homework-view-sentence-total-score{width:100%;min-width:unset;padding:16px}.homework-view-dimensions-grid{grid-template-columns:1fr;gap:8px}.homework-view-dimension-card{padding:12px}.homework-view-phoneme-content{grid-template-columns:1fr}.homework-view-phoneme-overview{flex-direction:column;gap:8px}.homework-view-phoneme-grid,.homework-view-category-grid,.homework-view-words-grid{grid-template-columns:1fr;gap:8px}.homework-view-word-card{min-width:unset;width:100%;padding:12px}.homework-view-sentence-results-grid{grid-template-columns:1fr;gap:12px}.homework-view-phoneme-details-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.homework-view-sentence-total-score{width:100%;min-width:unset}.homework-view-sentence-dimensions{grid-template-columns:1fr;gap:8px}.homework-view-sentence-text span{margin-bottom:8px;padding:2px 4px}}.listening-view-container{display:flex;flex-direction:column;gap:24px;background-color:#f5f7fa;min-height:100vh;padding:24px;box-sizing:border-box}.listening-view-header{display:flex;align-items:center;gap:16px;background:#fff;padding:20px 24px;border-radius:12px;box-shadow:0 2px 8px #0000000a}.listening-view-back-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f8f9fa;color:#2c3e50;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.listening-view-back-button:hover{background:#e9ecef;transform:translate(-2px)}.listening-view-back-button:active{transform:translate(0)}.listening-view-title{font-size:24px;font-weight:700;color:#2c3e50;margin:0;flex:1}.listening-view-content{display:flex;flex-direction:column;gap:24px;max-width:1200px;margin:0 auto;width:100%}.listening-view-loading,.listening-view-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.listening-view-loading-spinner{width:40px;height:40px;border:3px solid #E8E8E8;border-top-color:#3498db;border-radius:50%;animation:listeningViewSpin 1s linear infinite}@keyframes listeningViewSpin{to{transform:rotate(360deg)}}.listening-view-retry-button{padding:12px 24px;background:#3498db;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;outline:none}.listening-view-retry-button:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #2980b94d}.listening-view-overall-stats{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000a}.listening-view-stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #F0F3F7}.listening-view-stats-header h2{font-size:20px;font-weight:700;color:#2c3e50;margin:0}.listening-view-submission-info{font-size:14px;color:#7f8c8d}.listening-view-submission-time{display:inline-block;padding:6px 12px;background:#d5edda;color:#155724;border-radius:20px;font-weight:500}.listening-view-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.listening-view-stat-card{background:#f8f9fa;padding:20px;border-radius:12px;border:2px solid #E8E8E8;transition:all .3s ease}.listening-view-stat-card:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db26;transform:translateY(-2px)}.listening-view-stat-label{font-size:13px;font-weight:500;color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.listening-view-stat-value{font-size:32px;font-weight:700;color:#2c3e50;margin-bottom:8px}.listening-view-stat-level{font-size:14px;font-weight:600;padding:4px 12px;border-radius:20px;display:inline-block}.listening-view-sentences-section{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000a}.listening-view-section-title{font-size:18px;font-weight:700;color:#2c3e50;margin:0 0 20px}.listening-view-sentences-list{display:flex;flex-direction:column;gap:16px}.listening-view-sentence-card{background:#f8f9fa;border-radius:12px;overflow:hidden;border:2px solid #E8E8E8;transition:all .3s ease}.listening-view-sentence-card:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db26}.listening-view-sentence-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;cursor:pointer;transition:all .3s ease}.listening-view-sentence-header:hover{background:#f8f9fa}.listening-view-sentence-number{font-size:16px;font-weight:600;color:#2c3e50;min-width:100px}.listening-view-sentence-summary{display:flex;gap:24px;align-items:center;flex:1}.listening-view-sentence-accuracy{font-size:14px;font-weight:600}.listening-view-sentence-attempts{font-size:14px;color:#7f8c8d}.listening-view-sentence-status{display:flex;align-items:center;gap:8px}.listening-view-status-badge{padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600}.listening-view-status-badge.completed{background:#d5edda;color:#155724}.listening-view-status-badge.incomplete{background:#f8d7da;color:#721c24}.listening-view-expand-icon{font-size:12px;color:#7f8c8d;transition:transform .3s ease}.listening-view-sentence-details{padding:20px;border-top:2px solid #E8E8E8;animation:listeningViewSlideDown .3s ease-out}@keyframes listeningViewSlideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.listening-view-detail-section{margin-bottom:20px}.listening-view-detail-section:last-child{margin-bottom:0}.listening-view-detail-title{font-size:14px;font-weight:600;color:#5a6c7d;margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.listening-view-correct-answer{padding:16px;background:#d5edda;color:#155724;border-radius:8px;font-size:15px;line-height:1.8;font-weight:500}.listening-view-user-input{padding:16px;background:#f8f9fa;color:#2c3e50;border-radius:8px;font-size:15px;line-height:1.8;border:2px solid #E8E8E8}.listening-view-comparison-details{display:flex;flex-direction:column;gap:16px}.listening-view-comparison-text{display:flex;flex-wrap:wrap;gap:8px;padding:16px;background:#f8fbff;border-radius:8px;line-height:1.8}.listening-view-word-tag{display:inline-block;padding:4px 8px;border-radius:4px;font-size:14px;font-weight:500;transition:all .2s ease}.listening-view-word-tag:hover{transform:scale(1.05)}.listening-view-error-details{display:flex;flex-direction:column;gap:12px;padding:16px;background:#f8f9fa;border-radius:8px}.listening-view-error-group{display:flex;flex-direction:column;gap:8px}.listening-view-error-group:last-child{margin-bottom:0}.listening-view-error-group-header{display:flex;align-items:center;gap:8px}.listening-view-error-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:700;color:#fff}.listening-view-error-icon.incorrect{background:#e74c3c}.listening-view-error-icon.missing{background:#f39c12}.listening-view-error-icon.extra{background:#9b59b6}.listening-view-error-group-label{font-size:13px;font-weight:500;color:#2c3e50}.listening-view-error-group-content{display:flex;flex-wrap:wrap;gap:8px;padding-left:28px}.listening-view-error-item{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border-radius:4px;font-size:14px}.listening-view-error-word{color:#e74c3c;font-weight:500}.listening-view-error-arrow{color:#7f8c8d;font-size:12px}.listening-view-error-correct{color:#2ecc71;font-weight:500}.listening-view-missing-word-tag,.listening-view-extra-word-tag{display:inline-block;padding:4px 10px;border-radius:4px;font-size:13px;font-weight:500}.listening-view-missing-word-tag{background:#fff3cd;color:#856404}.listening-view-extra-word-tag{background:#e8daef;color:#6c3483}.listening-view-time-info{display:flex;flex-direction:column;gap:8px}.listening-view-time-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#7f8c8d}.listening-view-time-label{font-weight:500;color:#5a6c7d}.listening-view-time-value{color:#2c3e50;font-weight:600}.listening-view-attempts-list{display:flex;flex-direction:column;gap:16px}.listening-view-attempt-card{background:#fff;border:2px solid #E8E8E8;border-radius:12px;overflow:hidden;transition:all .3s ease}.listening-view-attempt-card:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db26}.listening-view-attempt-header{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#f8f9fa;border-bottom:2px solid #E8E8E8}.listening-view-attempt-number{font-size:14px;font-weight:600;color:#2c3e50;min-width:100px}.listening-view-attempt-accuracy{font-size:14px;font-weight:600;padding:6px 12px;border-radius:20px}.listening-view-attempt-time{font-size:13px;color:#7f8c8d;flex:1;text-align:right}.listening-view-attempt-badge{padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600}.listening-view-attempt-badge.success{background:#d5edda;color:#155724}.listening-view-attempt-content{display:flex;flex-direction:column;gap:16px;padding:20px}.listening-view-attempt-input{display:flex;flex-direction:column;gap:8px}.listening-view-attempt-input-label{font-size:13px;font-weight:600;color:#5a6c7d;text-transform:uppercase;letter-spacing:.5px}.listening-view-attempt-input-text{padding:12px;background:#f8f9fa;color:#2c3e50;border-radius:8px;font-size:14px;line-height:1.6;border:2px solid #E8E8E8}.listening-view-attempt-comparison{display:flex;flex-direction:column;gap:12px}.listening-view-attempt-comparison-label{font-size:13px;font-weight:600;color:#5a6c7d;text-transform:uppercase;letter-spacing:.5px}.listening-view-no-attempts{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 20px;background:#f8f9fa;border-radius:8px;border:2px dashed #E8E8E8}.listening-view-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.listening-view-empty-icon{font-size:48px;margin-bottom:8px}.listening-view-empty p{font-size:16px;color:#7f8c8d;margin:0}@media(max-width:768px){.listening-view-container{padding:16px;gap:16px}.listening-view-header{padding:16px}.listening-view-title{font-size:20px}.listening-view-stats-grid{grid-template-columns:1fr}.listening-view-sentence-header{flex-direction:column;align-items:flex-start;gap:12px}.listening-view-sentence-summary{flex-direction:column;align-items:flex-start;gap:8px;width:100%}.listening-view-expand-icon{align-self:flex-end}.listening-view-error-group-content{flex-direction:column;padding-left:0}}@media(min-width:1400px){.listening-view-content{max-width:1400px}}.statistics-container{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.loading-message,.error-message{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message h3{color:#dc3545;margin-bottom:10px}.retry-btn{background-color:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;margin-top:15px}.retry-btn:hover{background-color:#0056b3}.statistics-content{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.statistics-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:30px;text-align:center}.statistics-header h1{margin:0 0 15px;font-size:2.2em;font-weight:600}.header-info{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:1.1em;opacity:.9}.header-info span{background:#fff3;padding:5px 15px;border-radius:20px}.stats-section{border-bottom:1px solid #eee}.stats-section:last-child{border-bottom:none}.stats-section h2{margin:0 0 25px;color:#333;font-size:1.6em;font-weight:600;border-left:4px solid #007bff;padding-left:15px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.dimensions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.word-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}.score-card{background:#fff;border:2px solid #e9ecef;border-radius:12px;padding:20px;text-align:center;transition:all .3s ease;box-shadow:0 2px 8px #0000000d}.score-card:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.score-card.primary{border-color:#007bff;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff}.score-card.highlight{border-color:#28a745;background:linear-gradient(135deg,#28a745,#1e7e34);color:#fff}.score-label{font-size:.9em;color:#666;margin-bottom:8px;font-weight:500}.score-card.primary .score-label,.score-card.highlight .score-label{color:#ffffffe6}.score-value{font-size:2.2em;font-weight:700;color:#333}.score-card.primary .score-value,.score-card.highlight .score-value{color:#fff}.score-distribution{background:#f8f9fa;border-radius:8px;padding:20px}.distribution-bar{height:40px;border-radius:20px;overflow:hidden;display:flex;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.bar-segment{height:100%;transition:all .3s ease;cursor:pointer}.bar-segment:hover{opacity:.8}.bar-segment.excellent{background:linear-gradient(45deg,#28a745,#20c997)}.bar-segment.good{background:linear-gradient(45deg,#17a2b8,#007bff)}.bar-segment.fair{background:linear-gradient(45deg,#ffc107,#fd7e14)}.bar-segment.poor{background:linear-gradient(45deg,#dc3545,#e83e8c)}.distribution-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.legend-item{display:flex;align-items:center;gap:10px;font-size:.9em}.legend-color{width:16px;height:16px;border-radius:3px}.legend-color.excellent{background:linear-gradient(45deg,#28a745,#20c997)}.legend-color.good{background:linear-gradient(45deg,#17a2b8,#007bff)}.legend-color.fair{background:linear-gradient(45deg,#ffc107,#fd7e14)}.legend-color.poor{background:linear-gradient(45deg,#dc3545,#e83e8c)}.ranking-table,.submissions-table{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.table-header{display:grid;grid-template-columns:60px 1fr 100px 100px 80px 80px;background:#f8f9fa;padding:15px;font-weight:600;color:#495057;border-bottom:2px solid #dee2e6}.submissions-table .table-header{grid-template-columns:60px 1fr 100px 100px 80px 150px}.table-row{display:grid;grid-template-columns:60px 1fr 100px 100px 80px 80px;padding:15px;border-bottom:1px solid #eee;transition:background-color .2s ease}.submissions-table .table-row{grid-template-columns:60px 1fr 100px 100px 80px 150px}.table-row:hover{background-color:#f8f9fa}.table-row:last-child{border-bottom:none}.rank{font-weight:600;color:#007bff;text-align:center}.student-name{font-weight:500;color:#333}.status.submitted{background:#d4edda;color:#155724}.status.graded{background:#cce5ff;color:#004085}.status.in_progress{background:#fff3cd;color:#856404}.homework-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.homework-card,.assignment-card,.sentence-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:20px;box-shadow:0 2px 8px #0000000d;transition:all .3s ease}.homework-card:hover,.assignment-card:hover,.sentence-card:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.homework-card h3,.assignment-card h3,.sentence-card h4{margin:0 0 15px;color:#333;font-size:1.2em}.homework-metrics,.assignment-info,.sentence-metrics,.sentence-dimensions{display:flex;flex-wrap:wrap;gap:15px;font-size:.9em;color:#666}.assignment-info span,.sentence-metrics span,.sentence-dimensions span{background:#f8f9fa;padding:4px 8px;border-radius:4px}.weakness-analysis{background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;padding:20px}.weakness-info h3{color:#856404;margin:0 0 10px}.weakness-info p{color:#856404;margin:0 0 20px;font-size:1.1em}.improvement-suggestions h4{color:#856404;margin:0 0 10px}.improvement-suggestions ul{margin:0;padding-left:20px}.improvement-suggestions li{color:#856404;margin-bottom:5px}.learning-trend{background:#f8f9fa;border-radius:8px;padding:20px}.trend-chart{display:flex;align-items:end;justify-content:space-between;height:200px;margin-bottom:20px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d}.trend-point{display:flex;flex-direction:column;align-items:center;flex:1;max-width:60px}.point{width:20px;background:linear-gradient(to top,#007bff,#17a2b8);border-radius:10px 10px 0 0;margin-bottom:10px;min-height:10px;transition:all .3s ease;cursor:pointer}.point:hover{background:linear-gradient(to top,#0056b3,#138496);transform:scaleX(1.2)}.point-label{font-size:.8em;color:#666;font-weight:500}.trend-details{display:grid;gap:10px}.trend-item{display:grid;grid-template-columns:30px 1fr 80px 100px;align-items:center;padding:10px;background:#fff;border-radius:6px;font-size:.9em}.assignment-index{font-weight:600;color:#007bff}.assignment-title{color:#333}.assignment-score{font-weight:600;color:#28a745;text-align:center}.assignment-date{color:#666;text-align:right}.sentence-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.assignment-details{display:grid;gap:15px}.submit-time{margin-top:10px;font-size:.8em;color:#666;font-style:italic}@media(max-width:768px){.statistics-container{padding:10px}.statistics-header{padding:20px}.statistics-header h1{font-size:1.8em}.header-info{flex-direction:column;gap:10px}.stats-grid,.dimensions-grid,.word-stats-grid{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:40px 1fr 80px 80px;font-size:.8em}.table-header>div:nth-child(5),.table-header>div:nth-child(6),.table-row>div:nth-child(5),.table-row>div:nth-child(6){display:none}.homework-stats,.sentence-stats{grid-template-columns:1fr}.trend-item{grid-template-columns:20px 1fr 60px;font-size:.8em}.trend-item>div:nth-child(4){display:none}}.reading-report-shell{background:linear-gradient(180deg,#f4fbff,#eef6fb 52%,#f8fafc);min-height:100%;padding:24px}.reading-report-page{max-width:1320px;margin:0 auto}.reading-report-panel{background:#fff;border-radius:22px;padding:24px;box-shadow:0 14px 38px #0f172a14;border:1px solid rgba(148,163,184,.14)}.reading-report-hero{position:relative;overflow:hidden;margin-bottom:22px;background:#fff;color:#0f172a;border-color:#0f172a14;box-shadow:0 20px 48px #0f172a12}.reading-report-hero-glow{position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(14,165,233,.08),transparent 30%)}.reading-report-hero-copy,.reading-report-back-btn{position:relative;z-index:1}.reading-report-hero-copy{flex:1;min-width:0;padding-right:148px}.reading-report-title{margin:0;font-size:34px;font-weight:700;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}.reading-report-hero-meta{margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px;color:#64748b;line-height:1.7;font-size:13px;letter-spacing:.01em}.reading-report-meta-item{display:inline-flex;align-items:center;min-height:32px;padding:4px 10px;border-radius:999px;background:#f8fafceb;border:1px solid rgba(148,163,184,.18)}.reading-report-summary{margin:14px 0 0;max-width:760px;display:flex;flex-wrap:wrap;gap:10px}.reading-report-summary-chip{display:inline-flex;align-items:center;min-height:38px;padding:6px 12px;border-radius:12px;background:#ffffffb8;border:1px solid rgba(148,163,184,.16);color:#0f172a;font-size:14px;font-weight:700;line-height:1.35}.reading-report-summary-chip-muted{color:#475569;font-weight:600}.reading-report-back-btn{position:absolute;top:24px;right:24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid rgba(148,163,184,.22);border-radius:999px;background:#ffffffd6;color:#334155;padding:10px 16px;font-size:13px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 8px 20px #0f172a0f;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}.reading-report-back-btn:hover{background:#fff;border-color:#3b82f633;transform:translateY(-1px)}.reading-report-back-btn-icon{font-size:14px;line-height:1;color:#0f766e}.reading-report-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:22px;align-items:stretch}.reading-stat-card{display:flex;align-items:stretch;justify-content:space-between;gap:18px;min-height:124px;padding:18px 20px;border-radius:18px;box-shadow:none;background:#fff;position:relative;overflow:hidden}.reading-stat-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:18px 0 0 18px;background:#94a3b8}.reading-stat-card-teal{background:linear-gradient(180deg,#fff,#f7fffd);border-color:#14b8a624}.reading-stat-card-teal:before{background:#14b8a6}.reading-stat-card-blue{background:linear-gradient(180deg,#fff,#f7fbff);border-color:#3b82f624}.reading-stat-card-blue:before{background:#3b82f6}.reading-stat-card-amber{background:linear-gradient(180deg,#fff,#fffdf6);border-color:#f59e0b24}.reading-stat-card-amber:before{background:#f59e0b}.reading-stat-card-rose{background:linear-gradient(180deg,#fff,#fff8f8);border-color:#f43f5e24}.reading-stat-card-rose:before{background:#f43f5e}.reading-stat-card-copy{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}.reading-stat-card-metric{display:flex;align-items:center;justify-content:flex-end;min-width:110px}.reading-stat-card-head{min-height:18px;align-items:flex-start}.reading-stat-card-title{color:#64748b;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}.reading-stat-card-value{display:flex;align-items:center;justify-content:flex-end;min-height:0;margin-top:0;font-size:36px;font-weight:800;line-height:1;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}.reading-stat-card-meta{min-height:20px;margin-top:6px;color:#475569;line-height:1.4;font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reading-stat-card-support{min-height:18px;margin-top:6px;color:#64748b;font-size:12px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.reading-report-analysis-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:18px;margin-bottom:22px;align-items:stretch}.reading-analysis-card{display:flex;flex-direction:column}.reading-report-analysis-grid>.reading-analysis-card:first-child{box-shadow:0 18px 44px #0f172a1a}.reading-report-analysis-grid>.reading-analysis-card:last-child{background:linear-gradient(180deg,#fff,#f8fbff)}.reading-analysis-card-header{min-height:60px;margin-bottom:14px}.reading-analysis-card-title{margin:0;font-size:18px;color:#0f172a;line-height:1.25;text-wrap:balance}.reading-analysis-card-subtitle{margin:6px 0 0;color:#64748b;font-size:13px;line-height:1.55}.reading-analysis-list{display:flex;flex-direction:column;gap:10px}.reading-analysis-list-compact{gap:12px}.reading-analysis-item{background:#f8fafc;border-radius:16px;padding:12px 14px}.reading-analysis-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.reading-analysis-item-copy{min-width:0}.reading-analysis-item-label{font-size:16px;font-weight:800;color:#0f172a;line-height:1.25}.reading-analysis-item-detail{margin-top:3px;color:#64748b;font-size:12px;line-height:1.45}.reading-analysis-item-score{color:#0f766e;font-weight:800;font-size:19px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.reading-analysis-progress{margin-top:10px;height:8px;border-radius:999px;background:#dbeafe;overflow:hidden}.reading-analysis-progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#0ea5e9 45%,#2563eb)}.reading-tag-list{display:flex;flex-wrap:wrap;gap:8px}.reading-chip{padding:5px 9px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:11px;font-weight:700;line-height:1.2}.reading-empty-chip{color:#94a3b8;font-size:13px}.reading-blank-item{display:grid;grid-template-columns:76px minmax(0,1fr) 82px;gap:12px;align-items:center;padding:12px;border-radius:16px;background:#f8fafc}.reading-blank-item-alert{background:#fff1f2}.reading-blank-index{width:68px;height:68px;border-radius:18px;background:linear-gradient(180deg,#eff6ff,#dbeafe);color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-weight:800;text-align:center;font-size:13px;line-height:1.3}.reading-blank-copy{min-width:0}.reading-blank-label{font-weight:800;color:#0f172a;line-height:1.4}.reading-blank-answer{margin-top:3px;color:#475569;font-size:13px;line-height:1.45}.reading-blank-detail{margin-top:4px;color:#64748b;font-size:12px;line-height:1.45}.reading-blank-rate{text-align:right;color:#dc2626;font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.reading-student-list{display:flex;flex-direction:column;gap:12px}.reading-student-row{display:grid;grid-template-columns:1.3fr 110px 120px 120px 1fr 170px;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:#f8fafc;border:1px solid rgba(148,163,184,.14)}.reading-student-row-warm{background:#fff7ed}.reading-student-name{font-weight:800;color:#0f172a;line-height:1.35}.reading-student-status{margin-top:6px;color:#64748b;font-size:13px;line-height:1.4}.reading-student-metric-label{color:#64748b;font-size:12px;line-height:1.4;min-height:18px}.reading-student-metric-value{color:#0f172a;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}.reading-student-correctness{color:#16a34a;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}.reading-student-divider{color:#94a3b8;margin:0 6px}.reading-student-wrong{color:#dc2626}.reading-student-metric-secondary{color:#0f172a;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}.reading-student-time{text-align:right;color:#64748b;font-size:13px;line-height:1.5}@media(max-width:1100px){.reading-report-analysis-grid{grid-template-columns:1fr}.reading-student-row{grid-template-columns:repeat(2,minmax(0,1fr))}.reading-student-time{text-align:left}}@media(max-width:768px){.reading-report-shell{padding:16px}.reading-report-title{font-size:28px}.reading-report-hero-copy{padding-right:0}.reading-report-back-btn{top:16px;right:16px}.reading-stat-card{min-height:116px;padding:16px 18px;gap:14px}.reading-stat-card-metric{min-width:92px}.reading-stat-card-value{font-size:32px}.reading-analysis-card-header{min-height:auto}.reading-blank-item,.reading-student-row{grid-template-columns:1fr}.reading-blank-index{width:64px;height:64px}}.join-class-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.join-class-card{background:#fff;border-radius:16px;box-shadow:0 10px 40px #0000001a;padding:40px;max-width:500px;width:100%}.class-invite-header{text-align:center;margin-bottom:30px}.class-invite-header h1{font-size:28px;font-weight:600;color:#2c3e50;margin:0 0 10px}.class-invite-header p{font-size:16px;color:#7f8c8d;margin:0}.class-info-display{padding:30px 0;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;margin-bottom:30px}.class-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 20px;box-shadow:0 2px 8px #0000001a}.join-class-name{font-size:24px;font-weight:600;color:#2c3e50;margin:0 0 25px;text-align:center;word-break:break-word}.join-class-meta{background-color:#f8f9fa;padding:25px;border-radius:12px;display:flex;flex-direction:column;gap:18px;align-items:center}.meta-row{display:flex;flex-direction:column;gap:8px;text-align:center}.meta-label{color:#6c757d;font-size:13px;font-weight:500}.meta-value{color:#2c3e50;font-size:16px;font-weight:600;word-break:break-word}.class-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.class-tag{display:inline-block;padding:6px 14px;background-color:#e8f4f8;color:#3498db;border-radius:16px;font-size:13px;font-weight:500}.join-actions{display:flex;flex-direction:column;gap:12px}.join-btn,.register-btn,.cancel-btn{width:100%;padding:14px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.join-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.join-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.join-btn:disabled{opacity:.6;cursor:not-allowed}.register-btn{background-color:#3498db;color:#fff}.register-btn:hover{background-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}.cancel-btn{background-color:#ecf0f1;color:#7f8c8d}.cancel-btn:hover:not(:disabled){background-color:#bdc3c7}.cancel-btn:disabled{opacity:.6;cursor:not-allowed}.loading{text-align:center;padding:40px;color:#7f8c8d;font-size:16px}.error-message{text-align:center;padding:40px 20px}.error-message h2{font-size:48px;margin:0 0 20px}.error-message p{font-size:16px;color:#e74c3c;margin:0 0 30px}.back-link{display:inline-block;padding:12px 24px;background-color:#3498db;color:#fff;text-decoration:none;border-radius:8px;font-weight:500;transition:all .3s ease}.back-link:hover{background-color:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}@media(max-width:768px){.join-class-card{padding:30px 20px}.class-invite-header h1{font-size:24px}.join-class-name{font-size:20px}.join-class-meta{padding:15px}.meta-item{font-size:13px}}.question-bank-container{width:100%;margin:0;padding:0}.create-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:var(--color-primary);border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;white-space:nowrap}.create-button:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}.create-button svg{width:18px;height:18px}.filter-section{display:flex;gap:var(--spacing-md);margin-bottom:8px;padding:16px;background:var(--color-surface);border-radius:8px;border:1px solid #E5E5E5;align-items:center}.filter-group{display:flex;flex-direction:column;gap:6px;min-width:140px}.filter-group.search-group{flex:1;min-width:200px}.filter-label{display:none}.filter-search{padding:10px 16px;border:1px solid #E5E5E5;border-radius:6px;font-size:14px;color:var(--color-text-primary);background:var(--color-surface);transition:all .3s ease;height:42px;box-sizing:border-box;width:100%}.filter-search:hover{border-color:var(--color-primary)}.filter-search:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.filter-dropdown{position:relative;min-width:140px;height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px;color:#2c3e50;box-sizing:border-box}.filter-dropdown:hover{border-color:var(--color-primary)}.filter-dropdown svg{flex-shrink:0;transition:transform .2s ease}.filter-dropdown.open svg{transform:rotate(180deg)}.filter-dropdown .dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:#fff;border:1px solid #E5E5E5;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:100;overflow:hidden;animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{padding:10px 16px;font-size:14px;color:#2c3e50;cursor:pointer;transition:background-color .2s ease}.dropdown-item:hover{background-color:#f5f5f5}.dropdown-item:first-child{border-radius:6px 6px 0 0}.dropdown-item:last-child{border-radius:0 0 6px 6px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg)}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:var(--spacing-md);font-size:var(--font-size-base);color:var(--color-text-secondary)}.empty-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg)}.empty-state svg{margin-bottom:var(--spacing-lg)}.empty-state h3{font-size:var(--font-size-2xl);color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.empty-state p{font-size:var(--font-size-base);color:var(--color-text-secondary)}.questions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.question-card{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);padding:16px;transition:all var(--transition-normal);display:flex;flex-direction:column}.question-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-tags-bottom{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;justify-content:flex-end}.tag-simple{font-size:12px;color:var(--color-text-secondary);font-weight:500}.category-badge{display:flex;align-items:center;gap:var(--spacing-sm);padding:6px 12px;border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:600;background:#f0f3f7;color:#5d6d7e}.category-badge svg{width:18px;height:18px}.difficulty-badge{padding:4px 12px;border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600}.difficulty-easy{background:#d4edda;color:#155724}.difficulty-medium{background:#fff3cd;color:#856404}.difficulty-hard{background:#f8d7da;color:#721c24}.public-badge{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;background:#e8f5e9;color:#2e7d32}.public-badge svg{width:14px;height:14px}.private-badge{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;background:#e3f2fd;color:#1976d2}.private-badge svg{width:14px;height:14px}.question-title{font-size:15px;font-weight:600;color:var(--color-text-primary);margin:0 0 10px;line-height:var(--line-height-tight)}.question-content{font-size:13px;color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.question-audio-text{font-size:var(--font-size-base);color:var(--color-primary);background:#f0f7ff;padding:var(--spacing-sm) 12px;border-radius:var(--radius-md);margin:0 0 12px}.card-footer{display:flex;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--color-border-light)}.edit-button,.delete-button{flex:1;padding:8px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);border:none}.edit-button{background:#f0f3f7;border:none;color:#5d6d7e}.edit-button:hover{background:#e8ecef}.delete-button{background:var(--color-surface);border:1px solid var(--color-border-light);color:var(--color-error)}.delete-button:hover{background:#fef5f5;border-color:var(--color-error)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--spacing-lg)}.modal-content{background:var(--color-surface);border-radius:var(--radius-xl);width:100%;max-width:700px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xl)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-border-light)}.modal-header h2{font-size:var(--font-size-2xl);font-weight:600;color:var(--color-text-primary);margin:0}.close-button{background:none;border:none;cursor:pointer;padding:var(--spacing-sm);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:background var(--transition-normal)}.close-button:hover{background:#f5f5f5}.close-button svg{width:24px;height:24px;color:var(--color-text-secondary)}.question-form{padding:var(--spacing-lg);overflow-y:auto}.form-group{margin-bottom:var(--spacing-lg)}.form-helper-text{margin-top:6px;font-size:12px;line-height:1.5;color:var(--color-text-secondary)}.form-label{display:block;font-size:var(--font-size-base);font-weight:600;color:#5d6d7e;margin-bottom:var(--spacing-sm)}.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-surface);transition:all var(--transition-normal);box-sizing:border-box}.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--color-primary)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.form-textarea{resize:vertical;font-family:inherit}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg)}.content-mode-selector{display:flex;gap:16px;margin-bottom:8px}.mode-option{display:flex;align-items:center;gap:12px;padding:16px 20px;border:2px solid var(--color-border-light);border-radius:var(--radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:var(--color-surface);font-size:var(--font-size-base);color:#5d6d7e;flex:1;justify-content:center;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000000d}.mode-option:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#3498db0d,#3498db00);opacity:0;transition:opacity .3s ease}.mode-option:hover:not(.active){border-color:var(--color-primary);background:#f8fbff;box-shadow:0 4px 12px #3498db26;transform:translateY(-2px)}.mode-option:hover:not(.active):before{opacity:1}.mode-option input[type=radio]{display:none}.mode-option .option-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-md);background:#f0f3f7;color:#5d6d7e;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;position:relative;z-index:1}.mode-option:hover .option-icon{background:#e3f2fd;color:var(--color-primary);transform:scale(1.1)}.mode-option.active{border-color:var(--color-primary);background:linear-gradient(135deg,var(--color-primary) 0%,#2980B9 100%);color:#fff;box-shadow:0 4px 16px #3498db4d;transform:translateY(-2px)}.mode-option.active:hover{box-shadow:0 6px 20px #3498db66;transform:translateY(-3px);background:linear-gradient(135deg,#2980b9,#2471a3)}.mode-option.active .option-icon{background:#fff3;color:#fff;box-shadow:0 2px 8px #0000001a}.mode-option.active .option-icon svg{filter:brightness(0) invert(1)}.mode-option.active span{font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.1)}.mode-option span{font-weight:500;transition:all .3s ease;position:relative;z-index:1}.file-upload-area{border:2px dashed var(--color-border-light);border-radius:var(--radius-lg);padding:var(--spacing-lg);text-align:center;background:#fafafa;transition:all var(--transition-normal)}.file-upload-area:hover{border-color:var(--color-primary);background:#f0f7ff}.file-upload-input{display:none}.file-upload-label{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);cursor:pointer;color:#5d6d7e;font-size:var(--font-size-base);transition:all var(--transition-normal)}.file-upload-label:hover{color:var(--color-primary)}.file-upload-label svg{width:48px;height:48px;color:var(--color-primary)}.file-upload-label span{font-weight:600}.file-upload-hint{margin-top:12px;font-size:var(--font-size-sm);color:var(--color-text-muted)}.file-preview{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md);margin-top:12px}.file-preview-info{display:flex;align-items:center;gap:12px}.file-preview-info svg{color:var(--color-primary)}.file-preview-info span:first-child{font-weight:500;color:var(--color-text-primary);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-preview-info .file-size{font-size:var(--font-size-sm);color:var(--color-text-muted);font-weight:400}.file-remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:#fff5f5;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.file-remove-btn:hover{background:#fee}.file-remove-btn svg{width:18px;height:18px;color:var(--color-error)}.modal-footer{display:flex;gap:12px;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-light)}.cancel-button,.submit-button{flex:1;padding:14px 24px;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.cancel-button{background:#f5f5f5;border:none;color:#5d6d7e}.cancel-button:hover{background:#e8e8e8}.submit-button{background:var(--color-primary);border:none;color:#fff}.submit-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:var(--color-primary-hover)}@media(max-width:768px){.create-button{width:100%;justify-content:center}.filter-section{flex-direction:column;gap:var(--spacing-md)}.filter-group,.filter-dropdown{width:100%}.questions-grid,.form-row{grid-template-columns:1fr}.modal-content{max-height:95vh}.modal-header,.question-form,.modal-footer{padding:var(--spacing-md)}}.pending-grading-container{max-width:1200px;margin:0 auto;padding:var(--spacing-md)}.back-button{padding:10px 20px;background:#f5f5f5;border:none;border-radius:8px;font-size:14px;color:#5d6d7e;cursor:pointer;transition:all .3s ease}.filter-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid #E8E8E8;padding-bottom:0}.filter-tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;font-size:15px;font-weight:500;color:#7f8c8d;cursor:pointer;transition:all .3s ease}.filter-tab:hover{color:#3498db}.filter-tab.active{color:#3498db;border-bottom-color:#3498db}.empty-state svg{margin-bottom:24px}.empty-state p{font-size:15px;color:#7f8c8d}.assignments-list{display:grid;gap:16px}.assignment-card{background:#fff;border-radius:12px;border:1px solid #E8E8E8;padding:20px;transition:all .3s ease;cursor:pointer}.assignment-card:hover{border-color:#3498db;box-shadow:0 4px 16px #3498db26;transform:translateY(-2px)}.assignment-card:not(:has(.status-pending)){cursor:default}.assignment-card:not(:has(.status-pending)):hover{transform:none;box-shadow:none}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.student-info{display:flex;align-items:center;gap:12px}.student-avatar{width:48px;height:48px;border-radius:50%;background:var(--color-primary);display:flex;align-items:center;justify-content:center;color:var(--color-surface);font-size:18px;font-weight:600}.student-details{display:flex;flex-direction:column;gap:4px}.student-name{font-size:16px;font-weight:600;color:#2c3e50}.homework-title{font-size:14px;color:#7f8c8d}.status-badge{padding:6px 12px;border-radius:20px;font-size:13px;font-weight:500}.status-pending{background:#fff3cd;color:#856404}.status-graded{background:#d4edda;color:#155724}.status-viewed{background:#cce5ff;color:#004085}.card-body{display:flex;flex-direction:column;gap:12px}.submission-time{display:flex;align-items:center;gap:8px;font-size:14px;color:#7f8c8d}.submission-time svg{width:16px;height:16px}.score-display{display:flex;align-items:center;gap:8px;font-size:14px}.score-label{color:#7f8c8d}.score-value{font-size:18px;font-weight:700;color:#27ae60}.comment-preview{color:#7f8c8d;font-style:italic}.card-footer{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid #E8E8E8}.grade-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--color-primary);border:none;border-radius:var(--radius-md);color:var(--color-surface);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.grade-button:hover{background:var(--color-primary-hover)}.grade-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea66}.grade-button svg{width:16px;height:16px}@media(max-width:768px){.pending-grading-container{padding:16px}.page-header h1{font-size:22px}.filter-tabs{overflow-x:auto}.filter-tab{padding:10px 16px;white-space:nowrap}.student-avatar{width:40px;height:40px;font-size:16px}.student-name{font-size:15px}}.reading-practice-container{max-width:800px;margin:0 auto;padding:24px}.practice-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.homework-info h1{font-size:24px;font-weight:700;color:#2c3e50;margin:0 0 8px}.homework-description{font-size:14px;color:#7f8c8d;margin:0;line-height:1.6}.back-button{padding:10px 20px;background:#f5f5f5;border:none;border-radius:8px;font-size:14px;color:#5d6d7e;cursor:pointer;transition:all .3s ease;flex-shrink:0}.back-button:hover{background:#e8e8e8}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px}.empty-state{text-align:center;padding:80px 20px}.empty-state h3{font-size:20px;color:#2c3e50;margin-bottom:8px}.empty-state p{font-size:15px;color:#7f8c8d;margin-bottom:20px}.empty-state .back-button{padding:12px 24px;background:var(--color-primary);color:var(--color-surface);border:none;transition:all var(--transition-normal)}.empty-state .back-button:hover{background:var(--color-primary-hover)}.passage-progress{margin-bottom:24px}.progress-info{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;color:#5d6d7e}.progress-bar{height:8px;background:#e8e8e8;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#3498db,#2ecc71);transition:width .3s ease}.passage-content{background:#fff;border-radius:12px;border:1px solid #E8E8E8;padding:32px;margin-bottom:24px;box-shadow:0 2px 8px #0000000a}.passage-text{font-size:18px;line-height:2.2;color:#2c3e50;text-align:justify;word-break:break-word}.passage-text-segment{white-space:pre-wrap}.inline-blank-wrap{display:inline-flex;align-items:center;margin:0 6px 0 4px;vertical-align:baseline}.inline-blank-prefix{font-size:17px;font-weight:700;line-height:1.4;color:#1e293b;margin-right:2px}.inline-blank-input{min-width:6ch;padding:3px 6px 4px;border:none;border-bottom:2px solid #94A3B8;border-radius:0;font-size:17px;font-weight:600;line-height:1.4;color:#2c3e50;background:transparent;transition:all .3s ease;box-sizing:border-box;text-align:left}.inline-blank-input:hover{border-bottom-color:#3498db;background:#fff}.inline-blank-input:focus{outline:none;border-bottom-color:#3498db;background:#fff;box-shadow:inset 0 -1px #3498db}.inline-blank-input.filled{border-bottom-color:#2ecc71;background:#f3fcf7}.inline-blank-input:disabled{background:#f5f5f5;cursor:not-allowed}.inline-blank-input::placeholder{color:#a0aec0;font-weight:500}.passage-navigation{display:flex;justify-content:space-between;gap:16px;margin-bottom:24px}.nav-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;background:#f5f5f5;border:none;border-radius:10px;font-size:15px;font-weight:600;color:#5d6d7e;cursor:pointer;transition:all .3s ease;flex:1;max-width:200px}.nav-button:hover:not(:disabled){background:#e8e8e8;transform:translateY(-1px)}.nav-button:disabled{opacity:.5;cursor:not-allowed}.nav-button svg{width:18px;height:18px}.nav-button.primary{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;box-shadow:0 4px 12px #3498db4d}.nav-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #3498db66}.answer-tips{background:#f8fbff;border-radius:12px;padding:20px 24px;border-left:4px solid #3498DB}.answer-tips h4{font-size:15px;font-weight:600;color:#2c3e50;margin:0 0 12px}.answer-tips ul{margin:0;padding-left:20px}.answer-tips li{font-size:14px;color:#5d6d7e;line-height:1.8}.result-container{display:flex;align-items:center;justify-content:center;padding:60px 20px}.result-card{background:#fff;border-radius:16px;padding:40px;text-align:center;box-shadow:0 4px 20px #0000001a;max-width:400px;width:100%}.result-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.result-icon.success{background:linear-gradient(135deg,#27ae60,#2ecc71);color:#fff}.result-title{font-size:24px;font-weight:700;color:#2c3e50;margin:0 0 24px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:24px}.score-value{font-size:64px;font-weight:800;color:#3498db;line-height:1}.score-unit{font-size:20px;color:#7f8c8d}.result-details{display:flex;justify-content:center;gap:40px;padding:20px 0;border-top:1px solid #E8E8E8;border-bottom:1px solid #E8E8E8;margin-bottom:24px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-label{font-size:13px;color:#7f8c8d}.detail-value{font-size:18px;font-weight:600;color:#2c3e50}.result-button{width:100%;padding:14px 24px;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.result-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}@media(max-width:768px){.reading-practice-container{padding:16px}.practice-header{flex-direction:column;gap:12px}.homework-info h1{font-size:20px}.passage-content,.answer-tips,.result-card{padding:20px}.passage-text{font-size:16px;line-height:2}.inline-blank-wrap{margin:4px 4px 4px 2px}.inline-blank-input{min-width:9ch;font-size:16px;padding:4px 8px 5px}.passage-navigation{flex-direction:column}.nav-button{max-width:100%;width:100%}.progress-info,.result-details{flex-direction:column;gap:10px}}.reading-homework-view{max-width:900px;margin:0 auto;padding:24px;background:#f5f7fa;min-height:100vh}.view-header{display:flex;align-items:center;gap:20px;margin-bottom:24px}.back-btn{display:flex;align-items:center;gap:4px;padding:10px 16px;background:#fff;border:1px solid #E8E8E8;border-radius:8px;font-size:14px;color:#5d6d7e;cursor:pointer;transition:all .3s ease}.back-btn:hover{background:#f5f5f5;border-color:#3498db;color:#3498db}.header-info h1{font-size:22px;font-weight:600;color:#2c3e50;margin:0 0 4px}.student-name{font-size:14px;color:#7f8c8d;margin:0}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px}.loading-spinner{width:48px;height:48px;border:4px solid #E8E8E8;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:16px;font-size:15px;color:#7f8c8d}.empty-state{text-align:center;padding:100px 20px}.empty-state h3{font-size:20px;color:#2c3e50;margin-bottom:16px}.empty-state button{padding:12px 24px;background:#3498db;color:#fff;border:none;border-radius:8px;cursor:pointer}.score-overview{display:flex;gap:24px;background:#fff;border-radius:16px;padding:32px;margin-bottom:24px;box-shadow:0 2px 8px #0000000f}.score-card{display:flex;flex-direction:column;align-items:center}.score-circle{position:relative;width:136px;height:136px;border-radius:50%;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.38),transparent 34%),linear-gradient(145deg,#4cb7f3,#2e86de 52%,#1f5fa8);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 20px 40px #2e86de3d,inset 0 1px #ffffff47,inset 0 -10px 18px #124a8433;overflow:hidden}.score-circle:before{content:"";position:absolute;inset:12px;border-radius:50%;background:linear-gradient(180deg,#fffffff0,#f1f8fffa);box-shadow:inset 0 2px 8px #ffffffbf,0 8px 18px #1f5fa824}.score-circle:after{content:"";position:absolute;top:14px;left:24px;width:72px;height:34px;border-radius:999px;background:#ffffff24;filter:blur(1px);transform:rotate(-18deg)}.score-value{position:relative;z-index:1;font-size:46px;font-weight:800;line-height:.95;letter-spacing:-.04em;color:#1f4f82;text-shadow:0 1px 0 rgba(255,255,255,.55)}.score-unit{position:relative;z-index:1;margin-top:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;color:#2e86de;background:#4cb7f31f;box-shadow:inset 0 0 0 1px #4cb7f32e}.score-label{font-size:14px;color:#7f8c8d;margin-top:12px}.score-stats{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding-left:24px;border-left:1px solid #E8E8E8}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:24px;font-weight:600;color:#2c3e50}.stat-value.correct{color:#27ae60}.stat-value.wrong{color:#e74c3c}.stat-label{font-size:13px;color:#7f8c8d}.passage-tabs{display:flex;gap:12px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px}.passage-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#fff;border:2px solid #E8E8E8;border-radius:10px;font-size:14px;font-weight:500;color:#5d6d7e;cursor:pointer;transition:all .3s ease;white-space:nowrap}.passage-tab:hover{border-color:#3498db}.passage-tab.active{background:#3498db;border-color:#3498db;color:#fff}.tab-score{font-size:12px;padding:2px 8px;border-radius:4px;background:#0000001a}.passage-tab.active .tab-score{background:#fff3}.tab-score.pass{color:#27ae60}.tab-score.fail{color:#e74c3c}.passage-tab.active .tab-score{color:#fff}.passage-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 8px #0000000f}.passage-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #F0F0F0}.passage-header h3{font-size:18px;font-weight:600;color:#2c3e50;margin:0}.passage-score{font-size:16px;font-weight:600;color:#3498db}.passage-content{margin-bottom:24px}.passage-content h4{font-size:14px;font-weight:600;color:#7f8c8d;margin:0 0 12px}.original-text{font-size:16px;line-height:1.8;color:#2c3e50;padding:20px;background:#f8f9fa;border-radius:12px;border-left:4px solid #3498DB}.highlighted-blank-word{display:inline-block;margin:0 1px;padding:1px 8px;border-radius:8px;background:linear-gradient(180deg,#4cb7f333,#2e86de47);color:#14507d;font-weight:700;box-shadow:inset 0 0 0 1px #2e86de29}.blanks-section h4{font-size:14px;font-weight:600;color:#7f8c8d;margin:0 0 16px}.blanks-list{display:flex;flex-direction:column;gap:16px}.blank-item{border-radius:12px;border:2px solid #E8E8E8;overflow:hidden;transition:all .3s ease}.blank-item.correct{border-color:#27ae60;background:linear-gradient(to right,rgba(39,174,96,.05),transparent)}.blank-item.wrong{border-color:#e74c3c;background:linear-gradient(to right,rgba(231,76,60,.05),transparent)}.blank-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa}.blank-number{font-size:14px;font-weight:600;color:#2c3e50}.blank-status{font-size:13px;font-weight:600;padding:4px 12px;border-radius:4px}.blank-status.correct{background:#27ae6026;color:#27ae60}.blank-status.wrong{background:#e74c3c26;color:#e74c3c}.blank-content{padding:16px}.answer-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.answer-row:last-child{margin-bottom:0}.answer-row.alternatives{padding-top:8px;border-top:1px dashed #E8E8E8}.answer-label{font-size:13px;color:#7f8c8d;white-space:nowrap}.answer-value{font-size:15px;color:#2c3e50;font-weight:500}.answer-value.correct{color:#27ae60}.answer-value.wrong{color:#e74c3c}.answer-value em{font-style:italic;color:#bdc3c7}.similarity-bar{margin-top:12px;padding-top:12px;border-top:1px dashed #E8E8E8}.similarity-label{font-size:12px;color:#7f8c8d;margin-bottom:6px;display:block}.similarity-progress{height:6px;background:#e8e8e8;border-radius:3px;overflow:hidden}.similarity-fill{height:100%;background:linear-gradient(90deg,#f39c12,#e74c3c);border-radius:3px;transition:width .3s ease}@media(max-width:768px){.reading-homework-view{padding:16px}.score-overview{flex-direction:column;align-items:center;text-align:center}.score-stats{border-left:none;border-top:1px solid #E8E8E8;padding-left:0;padding-top:24px;width:100%}.passage-tabs{flex-wrap:nowrap}}