*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;width:100%}html{height:100%;width:100%}button{border-radius:6px;border:1px solid transparent;font-family:inherit;cursor:pointer;transition:all .2s ease}button:focus,button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.language-selector{position:relative;display:inline-block}.language-button{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:500;color:var(--text-secondary);min-width:85px;justify-content:space-between;height:40px;box-shadow:var(--shadow-sm)}.language-button:hover{background:var(--accent-color);border-color:var(--accent-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.language-button:hover .language-icon,.language-button:hover .language-arrow,.language-button:hover .language-current{color:#fff}.language-button:active{transform:translateY(0)}.language-icon{color:var(--text-secondary);transition:color .3s ease;flex-shrink:0;width:16px;height:16px}.language-current{font-weight:600;font-size:13px;color:var(--text-primary);flex:1;text-align:center;letter-spacing:.5px;transition:color .3s ease}.language-arrow{color:var(--text-secondary);transition:all .3s ease;flex-shrink:0;width:12px;height:12px}.language-button[aria-expanded=true] .language-arrow{transform:rotate(180deg)}.language-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 20px #0000001a;z-index:1000;overflow:hidden;animation:dropdownSlideIn .2s ease-out}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.language-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;transition:all .2s ease;font-size:13px;color:var(--text-secondary);text-align:left}.language-option:hover{background:var(--bg-secondary);color:var(--text-primary)}.language-option.active{background:var(--accent-color);color:#fff}.language-option.active:hover{background:var(--accent-hover)}.language-flag{font-size:16px;flex-shrink:0}.language-name{flex:1;font-weight:500}[data-theme=dark] .language-button{background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-secondary)}[data-theme=dark] .language-button:hover{background:var(--accent-color);border-color:var(--accent-color);color:#fff}[data-theme=dark] .language-current{color:var(--text-primary)}[data-theme=dark] .language-dropdown{background:var(--bg-card);border-color:var(--border-color);box-shadow:0 4px 20px #0000004d}[data-theme=dark] .language-option{color:var(--text-secondary)}[data-theme=dark] .language-option:hover{background:var(--bg-secondary);color:var(--text-primary)}[data-theme=dark] .language-option.active{background:var(--accent-color);color:#fff}[data-theme=dark] .language-option.active:hover{background:var(--accent-hover);color:#fff}@media (max-width: 768px){.language-button{padding:6px 10px;min-width:70px;height:36px;font-size:13px}.language-icon{width:14px;height:14px}.language-current{font-size:12px}.language-arrow{width:10px;height:10px}}@media (max-width: 480px){.language-button{padding:6px 8px;min-width:60px;height:32px;font-size:12px}.language-current{font-size:11px}.language-dropdown{left:50%;transform:translate(-50%);right:auto;width:120px}}.header-nav .language-selector .language-dropdown{top:calc(100% + 8px);box-shadow:var(--shadow-lg);border:2px solid var(--border-color)}@media (prefers-contrast: high){.language-button,.language-button:hover,.language-dropdown{border-width:2px}}.theme-toggle{background:var(--bg-card);border:2px solid var(--border-color);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);z-index:1000}.theme-toggle-fixed{position:fixed;top:20px;right:20px}.theme-toggle-header{position:relative}.theme-toggle-sm{width:40px;height:40px;font-size:16px}.theme-toggle-lg{width:60px;height:60px;font-size:24px}.main-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .3s ease;position:sticky;top:0;z-index:100}.header-content{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.logo-section{display:flex;align-items:center;gap:16px}.logo-title{font-size:24px;font-weight:700;margin:0;color:var(--text-primary);background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-subtitle{font-size:12px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.header-nav{display:flex;gap:12px;align-items:center}.nav-button{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;padding:8px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .3s ease;color:var(--text-secondary);font-weight:500;box-shadow:var(--shadow-sm)}.nav-button:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.header-theme-toggle{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;padding:8px 12px;cursor:pointer;transition:all .3s ease;color:var(--text-secondary);font-weight:500;box-shadow:var(--shadow-sm);font-size:16px;display:flex;align-items:center;justify-content:center;min-width:44px;height:40px}.header-theme-toggle:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.user-email-display{display:flex;align-items:center;padding:8px 12px;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:10px;font-size:14px;color:var(--text-primary);font-weight:500}.nav-icon{font-size:16px}.nav-text{font-size:14px}.back-to-home-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:all .3s ease;font-size:14px;box-shadow:var(--shadow-sm);text-decoration:none}.back-to-home-button:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.back-to-home-button svg{transition:stroke .3s ease}.back-to-home-button:hover svg{stroke:#fff}.logo-content{display:flex;flex-direction:column;gap:4px}@media (max-width: 768px){.header-content{padding:12px 16px}.logo-section{gap:12px}.back-to-home-button{padding:6px 12px;font-size:13px}.back-to-home-button span{display:none}.logo-title{font-size:20px}.header-nav{gap:8px}.nav-button{padding:6px 12px}.header-theme-toggle{padding:6px 10px;min-width:40px;height:36px;font-size:14px}.user-email-display{padding:6px 10px;font-size:13px}.nav-text{display:none}.nav-icon{font-size:18px}}@media (max-width: 480px){.header-content{flex-direction:column;gap:16px}.logo-section{text-align:center;justify-content:center}.header-nav{justify-content:center;gap:6px;flex-wrap:wrap}.nav-button{padding:6px 10px;min-width:48px}.header-theme-toggle{padding:6px 10px;min-width:36px;height:32px;font-size:12px}}.home-page{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;transition:all .3s ease}.hero-section{text-align:center;margin-bottom:48px}.hero-title{font-size:36px;font-weight:700;color:var(--text-primary);margin-bottom:16px;line-height:1.2;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:18px;color:var(--text-secondary);max-width:700px;margin:0 auto;line-height:1.6}.main-content{flex:1;max-width:1200px;margin:0 auto;padding:48px 24px;width:100%}.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:48px;max-width:900px;margin-left:auto;margin-right:auto}.skill-card{background:#ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:32px 28px;text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;height:380px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 8px 32px #0000001a,inset 0 1px #fff3}.skill-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .6s ease;z-index:1}.skill-card:hover:before{left:100%}.skill-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #0003,inset 0 1px #ffffff4d;border-color:#ffffff4d}.skill-card--disabled{background:#0000000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);cursor:not-allowed;position:relative}[data-theme=dark] .skill-card--disabled{background:#ffffff08;border:1px solid rgba(255,255,255,.08)}.skill-card--disabled:before{display:none}.skill-card--disabled:hover{transform:none;box-shadow:0 4px 20px #0000001a}[data-theme=dark] .skill-card--disabled:hover{box-shadow:0 4px 20px #0000004d}.skill-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 20px;transition:all .4s ease;position:relative;z-index:2;box-shadow:0 8px 25px #00000026}.skill-card:hover .skill-icon{transform:scale(1.1) translateY(-2px);box-shadow:0 12px 35px #0003}.skill-icon--listening{background:linear-gradient(135deg,#8b5cf6,#a78bfa);color:#fff}.skill-icon--reading{background:linear-gradient(135deg,#3b82f6,#60a5fa);color:#fff}.skill-icon--writing{background:linear-gradient(135deg,#10b981,#4ade80);color:#fff}.skill-icon--speaking{background:linear-gradient(135deg,#f59e0b,#fbbf24);color:#fff}.skill-icon--disabled{background:linear-gradient(135deg,#9ca3af,#d1d5db)!important;color:#fffc!important;box-shadow:0 4px 15px #0000001a!important}.skill-card--disabled:hover .skill-icon{transform:none!important;box-shadow:0 4px 15px #0000001a!important}.skill-title{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:12px;z-index:2;position:relative}.skill-description{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:20px;z-index:2;position:relative}.skill-card--disabled .skill-title{color:var(--text-muted)}.skill-card--disabled .skill-description{color:var(--text-muted);opacity:.7}.skill-status{margin-top:auto;z-index:2;position:relative}.status-badge{display:inline-flex!important;align-items:center!important;padding:10px 20px!important;border-radius:25px!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.5px!important;transition:all .3s ease!important;border:none!important;position:relative;overflow:hidden;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 15px #3b82f64d}.status-badge: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}.skill-card:hover .status-badge:before{left:100%}.status-badge--coming-soon{background:linear-gradient(135deg,#6b7280,#4b5563)!important;color:#ffffffe6!important;box-shadow:0 4px 15px #6b728033!important}.status-badge--coming-soon:after{content:"✨";margin-left:6px;font-size:10px}@media (max-width: 768px){.skills-grid{grid-template-columns:1fr;gap:20px;max-width:350px}.skill-card{padding:28px 20px;height:320px}.skill-icon{width:70px;height:70px;font-size:32px;margin-bottom:16px}.skill-title{font-size:20px}.skill-description{font-size:13px;margin-bottom:16px}}.start-section{text-align:center;padding:2rem 0}.info-card{background:var(--bg-card);padding:2rem;border-radius:12px;border:2px solid var(--border-color);box-shadow:var(--shadow-sm);max-width:600px;margin:0 auto}.info-card h3{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.info-card p{font-size:16px;color:var(--text-secondary);line-height:1.6;margin:0}@media (max-width: 768px){.skills-grid{grid-template-columns:1fr;gap:24px;max-width:400px}.skill-card{padding:32px 24px}.skill-icon{width:80px;height:80px;font-size:36px}.skill-title{font-size:24px}.skill-description{font-size:14px}.main-content{padding:32px 16px}.hero-title{font-size:28px}.hero-description{font-size:16px}}.question-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}:root .question-modal-overlay,[data-theme=light] .question-modal-overlay{background:#00000080!important}[data-theme=dark] .question-modal-overlay{background:#000000b3!important}.question-modal{background:var(--bg-card);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--border-color);border-radius:16px;width:90%;max-width:700px;max-height:90vh;box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}html[data-theme=light] .question-modal,html:not([data-theme=dark]) .question-modal,:root .question-modal,[data-theme=light] .question-modal{background:#fff!important;color:#1a202c!important}html[data-theme=dark] .question-modal,[data-theme=dark] .question-modal{background:#2d3748!important;color:#f7fafc!important}.question-modal-header{padding:8px 12px;display:flex;justify-content:flex-end;align-items:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);min-height:40px}.question-modal-close{background:none;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.question-modal-close:hover{color:var(--text-primary)}.question-modal-body{padding:20px;overflow-y:auto;flex:1}.question-modal-description{color:var(--text-secondary);margin-bottom:20px;font-size:14px;line-height:1.4}.parts-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.parts-section h3{margin:0 0 12px;color:var(--text-primary);font-size:16px;font-weight:600}.parts-list{display:flex;gap:8px}.part-btn{padding:12px 20px;background:var(--bg-primary);border:2px solid var(--border-color);border-radius:8px;cursor:pointer;color:var(--text-primary);font-weight:600;transition:all .3s ease}html[data-theme=light] .part-btn,html:not([data-theme=dark]) .part-btn,:root .part-btn,[data-theme=light] .part-btn{background:#fff!important;color:#1a202c!important}html[data-theme=dark] .part-btn,[data-theme=dark] .part-btn{background:#1a202c!important;color:#f7fafc!important}.part-btn:hover{border-color:var(--accent-color);background:var(--bg-secondary);transform:translateY(-1px)}.part-btn.selected{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:var(--shadow-md)}.types-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;grid-auto-flow:row}.types-section{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin-bottom:0!important}.type-item{padding:10px;background:var(--bg-primary);border:2px solid var(--border-color);border-radius:10px;cursor:pointer;display:flex;align-items:flex-start;gap:8px;transition:all .3s ease;min-height:60px;height:auto;width:100%;box-sizing:border-box;grid-column:span 1}html[data-theme=light] .type-item,html:not([data-theme=dark]) .type-item,:root .type-item,[data-theme=light] .type-item{background:#fff!important;color:#1a202c!important}html[data-theme=dark] .type-item,[data-theme=dark] .type-item{background:#1a202c!important;color:#f7fafc!important}.type-item:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.type-item.selected{border-color:var(--accent-color);background:var(--bg-secondary);box-shadow:var(--shadow-md)}html[data-theme=light] .type-item.selected,html:not([data-theme=dark]) .type-item.selected,:root .type-item.selected,[data-theme=light] .type-item.selected{background:#f8fafc!important;color:#1a202c!important}html[data-theme=dark] .type-item.selected,[data-theme=dark] .type-item.selected{background:#2d3748!important;color:#f7fafc!important}.type-content{flex:1;overflow:hidden}.type-content h4{margin:0 0 6px;color:var(--text-primary);font-size:14px;font-weight:600;line-height:1.2;word-break:break-word}.type-content p{margin:0;color:var(--text-muted);font-size:12px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}.type-checkbox{width:24px;height:24px;border:2px solid var(--border-color);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--accent-color);font-weight:700;font-size:14px;transition:all .3s ease;flex-shrink:0;margin-top:2px}.type-item.selected .type-checkbox{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:var(--shadow-sm)}.question-modal-footer{padding:24px;border-top:1px solid var(--border-color);display:flex;gap:16px;background:var(--bg-secondary)}.btn-skip,.btn-start{flex:1;padding:14px 24px;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}.btn-skip{background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-color)}.btn-skip:hover{background:var(--bg-secondary);border-color:var(--accent-color);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-start{background:var(--accent-color);color:#fff;border:2px solid var(--accent-color)}.btn-start:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-skip:disabled,.btn-start:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.question-modal{width:95%;margin:20px}.types-list{grid-template-columns:1fr}.parts-list,.question-modal-footer{flex-direction:column}}.page-type-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.page-type-modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:32px;box-shadow:var(--shadow-lg);max-width:500px;width:90%;position:relative}.page-type-modal-header{text-align:center;margin-bottom:24px}.page-type-modal-title{margin:0 0 8px;font-size:24px;font-weight:600;color:var(--text-primary)}.page-type-modal-description{margin:0;font-size:16px;color:var(--text-secondary)}.page-type-options{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.page-type-option{padding:20px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-primary);cursor:pointer;text-align:left;transition:all .2s ease;display:flex;align-items:center;gap:12px}.page-type-option:hover:not(:disabled){border-color:var(--accent-color);background:var(--bg-secondary)}.page-type-option:disabled{cursor:not-allowed;opacity:.5;background:var(--bg-secondary)}.page-type-option.loading{opacity:.6;cursor:not-allowed}.page-type-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.page-type-icon.actual-test{background:var(--accent-color)}.page-type-icon.cambridge{background:var(--text-muted)}.page-type-content h4{margin:0 0 4px;font-size:18px;font-weight:600;color:var(--text-primary)}.page-type-content p{margin:0;font-size:14px;color:var(--text-secondary)}.page-type-option:disabled .page-type-content h4,.page-type-option:disabled .page-type-content p{color:var(--text-muted)}.page-type-modal-footer{display:flex;justify-content:flex-end}.page-type-cancel-btn{padding:10px 20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:16px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .2s ease}.page-type-cancel-btn:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--accent-color)}.page-type-cancel-btn:disabled{opacity:.6;cursor:not-allowed}.page-type-loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-md)}.page-type-loading-spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top:2px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}.page-type-loading-text{font-size:14px;color:var(--text-primary)}@media (max-width: 768px){.page-type-modal{padding:24px;margin:20px}.page-type-modal-title{font-size:20px}.page-type-modal-description{font-size:14px}.page-type-option{padding:16px}.page-type-content h4{font-size:16px}.page-type-content p{font-size:13px}}.notification-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1001;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.notification-modal{background:var(--bg-card);border-radius:16px;box-shadow:var(--shadow-lg);max-width:500px;width:100%;max-height:80vh;overflow:hidden;border:1px solid var(--border-color);animation:slideUp .25s ease-out}.notification-modal-content{padding:32px 24px 24px;display:flex;align-items:flex-start;gap:16px}.notification-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:4px}.notification-modal.info .notification-icon{background:#3b82f61a;color:#3b82f6}.notification-modal.warning .notification-icon{background:#f59e0b1a;color:#f59e0b}.notification-modal.error .notification-icon{background:#ef44441a;color:#ef4444}.notification-modal.success .notification-icon{background:#22c55e1a;color:#22c55e}.notification-text{flex:1;min-width:0}.notification-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px;line-height:1.4}.notification-message{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.5}.notification-actions{padding:20px 24px 24px;display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid var(--border-color);margin-top:20px}.notification-button{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;min-width:80px;height:36px;display:flex;align-items:center;justify-content:center}.notification-button.secondary{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color)}.notification-button.secondary:hover{background:var(--bg-hover);color:var(--text-primary)}.notification-button.primary{background:var(--primary-color, #3b82f6);color:#fff}.notification-button.primary:hover{background:var(--primary-hover, #2563eb);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.notification-button:active{transform:translateY(0)}@media (prefers-color-scheme: dark){.notification-modal.info .notification-icon{background:#3b82f626;color:#60a5fa}.notification-modal.warning .notification-icon{background:#f59e0b26;color:#fbbf24}.notification-modal.error .notification-icon{background:#ef444426;color:#f87171}.notification-modal.success .notification-icon{background:#22c55e26;color:#4ade80}}@media (max-width: 640px){.notification-modal{margin:16px;max-width:calc(100vw - 32px)}.notification-modal-content{padding:24px 20px 20px;gap:12px}.notification-icon{width:40px;height:40px}.notification-title{font-size:16px}.notification-actions{padding:0 20px 20px;flex-direction:column-reverse;gap:8px}.notification-button{width:100%;min-width:auto}}.reading-panel-container::-webkit-scrollbar{width:21px!important;display:block!important}.reading-panel-container::-webkit-scrollbar-track{background:#f1f1f1!important;border-radius:0!important}.reading-panel-container::-webkit-scrollbar-thumb{background:#999!important;border-radius:0!important;border:2px solid #f1f1f1!important}.reading-panel-container::-webkit-scrollbar-thumb:hover{background:#777!important}.reading-panel-container.dark-theme::-webkit-scrollbar-track{background:#1a1a1a!important}.reading-panel-container.dark-theme::-webkit-scrollbar-thumb{background:#666!important;border:2px solid #1a1a1a!important}.reading-panel-container.dark-theme::-webkit-scrollbar-thumb:hover{background:#777!important}#question-scroll-container::-webkit-scrollbar{width:21px!important;display:block!important}#question-scroll-container::-webkit-scrollbar-track{background:#f1f1f1!important;border-radius:0!important}#question-scroll-container::-webkit-scrollbar-thumb{background:#999!important;border-radius:0!important;border:2px solid #f1f1f1!important}#question-scroll-container::-webkit-scrollbar-thumb:hover{background:#777!important}#question-scroll-container.dark-theme::-webkit-scrollbar-track{background:#1a1a1a!important}#question-scroll-container.dark-theme::-webkit-scrollbar-thumb{background:#666!important;border:2px solid #1a1a1a!important}#question-scroll-container.dark-theme::-webkit-scrollbar-thumb:hover{background:#777!important}.reading-page{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;transition:all .3s ease}.reading-container{max-width:1200px;margin:0 auto;padding:0}.reading-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);width:100%;position:relative;padding-top:8px;padding-bottom:8px}.reading-header-content{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:12px 24px;max-width:1200px;margin:0 auto;position:relative;min-height:48px}.reading-header-left,.reading-header-right{flex:0 0 auto}.back-button{display:flex;align-items:center;gap:8px;background:var(--bg-secondary);border:2px solid var(--border-color);color:var(--text-secondary);padding:8px 16px;border-radius:10px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:14px;box-shadow:var(--shadow-sm)}.reading-title{display:none}.reading-user-info{text-align:right;min-width:150px}.welcome-text,.guest-text{color:var(--text-secondary);font-weight:500;font-size:14px}.reading-main{padding:48px 24px}.reading-hero-section{text-align:center;margin-bottom:48px}.reading-hero-title{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 16px;line-height:1.2;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.reading-hero-description{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto 32px;line-height:1.6}.reading-welcome{text-align:center;margin-bottom:48px}.reading-welcome-content h2{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 16px;line-height:1.2}.reading-welcome-content p{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto 32px;line-height:1.6}.reading-stats{display:flex;justify-content:center;gap:48px;margin-top:32px;background:var(--bg-card);padding:24px;border-radius:12px;box-shadow:var(--shadow-sm);border:2px solid var(--border-color)}.reading-actions{margin-bottom:48px}.reading-features{text-align:center}.reading-features h3{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 32px}@media (max-width: 768px){.reading-header-content{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding:16px}.reading-header-left{display:flex;justify-content:flex-start}.reading-header-right{display:flex;justify-content:flex-end}.back-button{padding:6px 12px;font-size:13px}.reading-user-email{margin-left:0;padding:6px 12px;max-width:160px}.reading-user-email-text{font-size:12px;max-width:140px}.reading-hero-title{font-size:24px}.reading-hero-description{font-size:16px}.reading-stats{flex-direction:column;gap:24px}.action-cards,.features-grid{grid-template-columns:1fr}.reading-welcome-content h2{font-size:24px}.reading-welcome-content p{font-size:16px}.reading-main{padding:24px 16px}.action-card{padding:24px}}@media (max-width: 480px){.reading-header-content{padding:14px 16px}.reading-main{padding:16px}.action-card,.feature-item{padding:20px}.back-button{padding:6px 12px;font-size:12px}}[data-theme=dark] .reading-header{background:var(--bg-card-dark, #2d3748)}.reading-user-email{display:flex;align-items:center;padding:8px 16px;background:#3182ce1a;border:1px solid rgba(49,130,206,.2);border-radius:10px;box-shadow:var(--shadow-sm)}.reading-user-email-text{font-size:14px;font-weight:500;color:var(--accent-color);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.reading-user-email{max-width:160px;padding:6px 12px;margin-left:0}.reading-user-email-text{font-size:12px;max-width:140px}}@media (max-width: 480px){.reading-user-email{max-width:120px;padding:6px 12px;margin-left:0}.reading-user-email-text{font-size:11px;max-width:100px}}.writing-page{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;transition:all .3s ease}.writing-container{max-width:1200px;margin:0 auto;padding:0}.writing-main{padding:48px 24px}.writing-hero-section{text-align:center;margin-bottom:48px}.writing-hero-title{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 16px;line-height:1.2;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.writing-hero-description{font-size:18px;color:var(--text-secondary);max-width:600px;margin:0 auto 32px;line-height:1.6}.writing-welcome{text-align:center;margin-bottom:48px}.writing-stats{display:flex;justify-content:center;gap:48px;margin-top:32px;background:var(--bg-card);padding:24px;border-radius:12px;box-shadow:var(--shadow-sm);border:2px solid var(--border-color)}.stat-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.stat-number{display:block;font-size:32px;margin-bottom:4px}.stat-label{font-size:14px;color:var(--text-secondary);font-weight:500}.writing-actions{margin-bottom:48px}.action-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;margin-top:24px}.action-card{background:var(--bg-card);border-radius:12px;padding:32px;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .3s ease;border:2px solid var(--border-color);position:relative;overflow:hidden;display:flex;flex-direction:column}.action-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--success-color));transform:scaleX(0);transition:transform .3s ease}.action-card:hover:before{transform:scaleX(1)}.action-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.primary-card{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff}.primary-card .card-content h3,.primary-card .card-content p,.primary-card .card-features span,.primary-card .card-action span{color:#fff}.secondary-card{background:var(--bg-card);color:var(--text-primary)}.card-icon{margin-bottom:20px;align-self:flex-start}.card-icon svg{color:inherit}.card-content{flex:1}.card-content h3{font-size:20px;font-weight:700;margin:0 0 12px;line-height:1.3}.card-content p{font-size:16px;line-height:1.6;margin:0 0 20px;opacity:.9}.card-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.card-features span{font-size:14px;opacity:.9;font-weight:500}.card-action{display:flex;align-items:center;justify-content:space-between;font-weight:600;margin-top:auto}.card-action svg{transition:transform .3s ease}.action-card:hover .card-action svg{transform:translate(4px)}.writing-features{text-align:center}.writing-features h3{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 32px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.feature-item{text-align:center;padding:24px;background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow-sm);transition:all .3s ease;border:2px solid var(--border-color)}.feature-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-color)}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));border-radius:50%;margin-bottom:16px;font-size:24px;color:#fff}.feature-item h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.feature-item p{font-size:14px;color:var(--text-secondary);line-height:1.5;margin:0}.disabled-card{opacity:.6;cursor:not-allowed;background:var(--bg-card)!important;border-color:var(--border-color)!important}.disabled-card:hover{transform:none!important;box-shadow:var(--shadow-sm)!important;border-color:var(--border-color)!important}.disabled-card:before{display:none!important}.disabled-card .card-content h3,.disabled-card .card-content p,.disabled-card .card-features span,.disabled-card .card-action{color:var(--text-secondary)!important}.disabled-card .card-action.disabled span{opacity:.7}.disabled-card:hover .card-action svg{transform:none!important}@media (max-width: 768px){.writing-hero-title{font-size:24px}.writing-hero-description{font-size:16px}.writing-stats{flex-direction:column;gap:24px}.action-cards,.features-grid{grid-template-columns:1fr}.writing-main{padding:24px 16px}.action-card{padding:24px}}@media (max-width: 480px){.writing-main{padding:16px}.action-card,.feature-item{padding:20px}}[data-theme=dark] .action-card{background:var(--bg-card-dark, #2d3748)}[data-theme=dark] .feature-item{background:transparent;border-color:transparent}[data-theme=dark] .card-content h3{color:var(--text-primary-dark, #e2e8f0)}[data-theme=dark] .card-content p{color:var(--text-secondary-dark, #a0aec0)}[data-theme=dark] .feature-item h4{color:var(--text-primary-dark, #e2e8f0)}[data-theme=dark] .feature-item p{color:var(--text-secondary-dark, #a0aec0)}[data-theme=dark] .disabled-card{background:var(--bg-card-dark, #2d3748)!important}[data-theme=dark] .disabled-card .card-content h3,[data-theme=dark] .disabled-card .card-content p,[data-theme=dark] .disabled-card .card-features span,[data-theme=dark] .disabled-card .card-action{color:var(--text-secondary-dark, #a0aec0)!important}.writing-practice-list-page{min-height:100vh;background:var(--background-color);color:var(--text-color)}.writing-practice-container{max-width:1200px;margin:0 auto;padding:20px}.writing-practice-main{margin-top:80px}.writing-practice-hero-section{margin-bottom:2rem;background:linear-gradient(135deg,#3b82f60d,#10b9810d);border-radius:16px;padding:3rem 2rem;border:1px solid var(--border-color)}.hero-content{display:flex;justify-content:space-between;align-items:center;gap:3rem;max-width:1000px;margin:0 auto}.hero-text{flex:1}.writing-practice-hero-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin:0 0 1rem;line-height:1.2;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.writing-practice-hero-description{font-size:1.2rem;color:var(--text-secondary);line-height:1.6;margin:0}.hero-stats{display:flex;gap:2rem;flex-shrink:0}.hero-stats .stat-item{text-align:center;background:var(--bg-card);padding:1.5rem 1rem;border-radius:12px;border:1px solid var(--border-color);min-width:100px}.hero-stats .stat-number{display:block;font-size:1.8rem;font-weight:700;color:var(--accent-color);margin-bottom:.5rem}.hero-stats .stat-label{font-size:.85rem;color:var(--text-secondary);font-weight:500}.writing-practice-controls{margin-bottom:2rem}.controls-container{background:var(--bg-card);border-radius:12px;padding:1.5rem 2rem;border:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem}.filter-section{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.filter-group-inline{display:flex;align-items:center;gap:.75rem}.filter-label{font-size:.9rem;font-weight:600;color:var(--text-primary);white-space:nowrap}.part-buttons-inline,.theme-buttons-inline{display:flex;gap:.5rem;flex-wrap:wrap}.part-btn-inline,.theme-btn-inline{padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.part-btn-inline:hover,.theme-btn-inline:hover{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.part-btn-inline.active,.theme-btn-inline.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.results-info{display:flex;align-items:center;gap:1rem;flex-shrink:0}.results-count{font-size:.9rem;color:var(--text-secondary);font-weight:500}.writing-practice-practices{margin-bottom:3rem}.practices-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.practices-header h3{font-size:1.5rem;font-weight:600;color:var(--text-color)}.refresh-btn{padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .2s ease}.refresh-btn:hover{opacity:.8}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.loading-state{display:flex;flex-direction:column;align-items:center;padding:3rem;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.empty-icon{font-size:3rem;margin-bottom:1rem}.empty-state h4{font-size:1.2rem;margin-bottom:.5rem;color:var(--text-color)}.practices-list{display:flex;flex-direction:column;gap:1rem}.practice-item{background:var(--bg-card);border-radius:12px;padding:1.5rem;box-shadow:var(--shadow-sm);border:2px solid var(--border-color);transition:all .3s ease;display:flex;flex-direction:column;gap:.75rem}.practice-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-color)}.practice-main-row{display:flex;align-items:center;gap:1rem}.practice-part-badge{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;flex-shrink:0}.practice-date-header{font-size:.85rem;color:var(--text-secondary);font-weight:500;background:var(--bg-secondary);padding:.25rem .75rem;border-radius:4px;border:1px solid var(--border-color);flex-shrink:0}.practice-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:0;line-height:1.3;flex:1}.practice-themes{display:flex;flex-wrap:wrap;gap:.5rem}.theme-tag{background:var(--bg-secondary);color:var(--text-primary);padding:.2rem .6rem;border-radius:16px;font-size:.75rem;font-weight:500;border:1px solid var(--border-color)}.practice-actions{flex-shrink:0;margin-left:auto}.practice-btn-view{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;background:var(--accent-color);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.practice-btn-view:hover{background:var(--success-color);transform:translateY(-1px)}.practice-btn-view svg{transition:transform .2s ease}.practice-btn-view:hover svg{transform:translate(2px)}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2rem;padding:1rem}.page-btn{padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .2s ease}.page-btn:hover{opacity:.8}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{font-size:.9rem;color:var(--text-muted)}.filter-group-expandable{margin-top:1rem}.expand-filter-button{display:flex;align-items:center;gap:8px;background:none;border:none;padding:8px 0;cursor:pointer;width:100%;text-align:left;transition:all .2s ease;border-radius:6px;color:var(--text-primary)}.expand-filter-button:hover{background:var(--surface-hover);padding-left:8px}.expand-filter-button .expand-icon{font-size:12px;color:var(--accent-color);transition:transform .2s ease;min-width:10px}.expand-filter-button.expanded .expand-icon{transform:rotate(0)}.expand-filter-button .filter-label{font-weight:500;font-size:.9rem}.expandable-content{margin-top:8px;padding-top:8px;border-top:1px solid var(--border-color);animation:slideDown .3s ease-out}.themes-filter-section{margin-top:1rem}.filter-group-block{margin-bottom:.8rem}.filter-label-block{font-weight:500;font-size:.9rem;color:var(--text-primary);margin-bottom:8px}.theme-buttons-block{display:flex;flex-wrap:wrap;gap:8px}.filter-group-expandable-compact{margin-top:.5rem}.expandable-content-clean{margin-top:8px;padding-top:8px;animation:slideDown .3s ease-out}.theme-btn-part1{padding:8px 16px;border:1px solid var(--border-color);border-radius:20px;background:var(--surface-color);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.theme-btn-part1:hover{border-color:var(--accent-color);color:var(--accent-color);background:#3b82f60d}.theme-btn-part1.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:0 2px 4px #3b82f633}.theme-btn-part2{padding:8px 16px;border:1px solid var(--border-color);border-radius:20px;background:var(--surface-color);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.theme-btn-part2:hover{border-color:var(--accent-color);color:var(--accent-color);background:#3b82f60d}.theme-btn-part2.active{border-color:var(--accent-color);color:var(--accent-color);background:#3b82f61a;font-weight:600}.expand-filter-button:focus{outline:none;box-shadow:none}.expand-filter-button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}@media (max-width: 768px){.writing-practice-container{padding:15px}.writing-practice-main{margin-top:70px}.hero-content{flex-direction:column;text-align:center;gap:2rem}.hero-stats{justify-content:center}.writing-practice-hero-title{font-size:2rem}.writing-practice-hero-description{font-size:1rem}.controls-container{flex-direction:column;align-items:stretch;gap:1rem}.filter-section,.results-info{justify-content:center}.practice-main-row{flex-wrap:wrap;gap:.75rem}.practice-title{flex-basis:100%;order:3}.practice-actions{margin-left:0;order:4}}@media (max-width: 480px){.writing-practice-hero-section{padding:2rem 1rem}.hero-stats{flex-direction:column;gap:1rem;width:100%}.controls-container{padding:1rem}.filter-section{flex-direction:column;gap:1rem}.theme-buttons-block{gap:6px}.filter-label-block,.expand-filter-button .filter-label{font-size:.85rem}.theme-btn-part1,.theme-btn-part2{padding:6px 12px;font-size:.8rem}.practice-item{padding:1rem}.practice-main-row{flex-direction:column;align-items:flex-start;gap:.5rem}.practice-actions{align-self:stretch}.practice-btn-view{width:100%;justify-content:center}.pagination{flex-direction:column;gap:.5rem}}.practice-records-page{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}.records-title-section{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);padding:32px 0}.records-title-container{max-width:1200px;margin:0 auto;padding:0 24px;text-align:center}.records-main-title{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 32px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overall-stats{display:flex;justify-content:center;gap:24px;flex-wrap:nowrap;overflow-x:auto}.stat-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:16px;padding:20px;min-width:120px;flex:1;text-align:center;transition:all .3s ease;flex-shrink:0}.stat-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-number{display:block;font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.stat-label{display:block;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.stat-detail{display:block;font-size:10px;color:var(--text-secondary);margin-top:2px;font-weight:400;opacity:.8}.records-filters{max-width:1200px;margin:0 auto;padding:24px}.filters-container{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-box{flex:1;min-width:280px}.search-input{width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:12px;background:var(--bg-card);font-size:14px;color:var(--text-primary);transition:all .3s ease}.search-input::placeholder{color:var(--text-secondary)}.filter-group{display:flex;gap:12px}.filter-select{padding:12px 16px;border:2px solid var(--border-color);border-radius:12px;background:var(--bg-card);font-size:14px;color:var(--text-primary);cursor:pointer;transition:all .3s ease;min-width:160px}.filter-select:focus{outline:none;border-color:var(--accent-color)}.active-filters{display:flex;justify-content:space-between;align-items:center;margin-top:16px;margin-bottom:8px;padding:12px 16px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}.results-count{font-size:14px;color:var(--text-secondary);font-weight:500}.clear-filters{background:none;border:none;color:var(--accent-color);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.clear-filters:hover{color:var(--accent-color-dark, #2563eb);text-decoration:underline}.practice-records-page{scrollbar-width:none;-ms-overflow-style:none}.practice-records-page::-webkit-scrollbar{display:none}.records-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);padding:24px 80px 24px 40px;display:flex;align-items:center;justify-content:center;position:relative}.back-button{display:flex;align-items:center;gap:8px;background:transparent;border:2px solid var(--accent-color);color:var(--accent-color);padding:12px 20px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:14px;position:absolute;left:40px}.records-header h1{font-size:28px;font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.records-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:absolute;right:80px}.records-count{color:var(--text-secondary);font-weight:500;font-size:14px;white-space:nowrap}.records-container{max-width:1200px;margin:0 auto;padding:16px 24px 32px}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.loading-spinner.small{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff}.error-container,.auth-required,.no-records{text-align:center;padding:80px 20px;color:var(--text-secondary)}.error-icon,.auth-icon,.no-records-icon{font-size:48px;margin-bottom:16px}.error-container h3,.auth-required h3,.no-records h3{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.error-container p,.auth-required p,.no-records p{font-size:16px;max-width:400px;margin:0 auto 24px}.retry-button,.auth-button,.start-practice-button{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-button:hover,.auth-button:hover,.start-practice-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.practices-grid{display:flex;flex-direction:column;gap:20px}.practice-card-modern{background:var(--bg-card);border:2px solid var(--border-color);border-radius:16px;padding:24px;transition:all .3s ease;position:relative;overflow:hidden}.practice-card-modern:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--success-color));transform:scaleX(0);transition:transform .3s ease}.practice-card-modern:hover:before{transform:scaleX(1)}.practice-card-modern:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.practice-card-modern.excellent{border-color:#22c55e;background:linear-gradient(135deg,#22c55e08,#22c55e03)}.practice-card-modern.good{border-color:#3b82f6;background:linear-gradient(135deg,#3b82f608,#3b82f603)}.practice-card-modern.average{border-color:#f59e0b;background:linear-gradient(135deg,#f59e0b08,#f59e0b03)}.practice-card-modern.poor{border-color:#ef4444;background:linear-gradient(135deg,#ef444408,#ef444403)}.practice-card-modern.excellent:hover{border-color:#16a34a;box-shadow:0 8px 24px #22c55e40}.practice-card-modern.good:hover{border-color:#2563eb;box-shadow:0 8px 24px #3b82f640}.practice-card-modern.average:hover{border-color:#d97706;box-shadow:0 8px 24px #f59e0b40}.practice-card-modern.poor:hover{border-color:#dc2626;box-shadow:0 8px 24px #ef444440}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}.card-title-section{flex:1;display:flex;align-items:flex-start;gap:12px}.test-type-badge{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}.card-title h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px;line-height:1.3}.card-meta{display:flex;gap:16px;align-items:center}.test-date,.test-duration{font-size:13px;color:var(--text-secondary);font-weight:500}.test-duration:before{content:"⏱️";margin-right:4px}.card-score-section{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:120px}.score-main{display:flex;align-items:center;gap:8px}.score-fraction{font-size:18px;font-weight:700;color:var(--text-primary)}.accuracy-badge{font-size:12px;font-weight:700;padding:4px 8px;border-radius:12px;color:#fff}.accuracy-badge.excellent{background:linear-gradient(135deg,#22c55e,#16a34a)}.accuracy-badge.good{background:linear-gradient(135deg,#3b82f6,#2563eb)}.accuracy-badge.average{background:linear-gradient(135deg,#f59e0b,#d97706)}.accuracy-badge.poor{background:linear-gradient(135deg,#ef4444,#dc2626)}.band-score{font-size:14px;font-weight:700;padding:4px 10px;border-radius:12px;background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff}.performance-indicator{width:120px}.performance-bar{width:100%;height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden;position:relative}.performance-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),var(--success-color));border-radius:3px;transition:width .6s ease}.performance-bar.excellent .performance-fill{background:linear-gradient(90deg,#22c55e,#16a34a)}.performance-bar.good .performance-fill{background:linear-gradient(90deg,#3b82f6,#2563eb)}.performance-bar.average .performance-fill{background:linear-gradient(90deg,#f59e0b,#d97706)}.performance-bar.poor .performance-fill{background:linear-gradient(90deg,#ef4444,#dc2626)}.card-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:16px;border-top:1px solid var(--border-color)}.primary-actions{display:flex;gap:8px}.secondary-actions{display:flex;align-items:center;gap:8px}.action-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff}.action-btn.primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.action-btn.secondary{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-color)}.action-btn.secondary:hover{background:var(--border-color);color:var(--text-primary)}.action-btn.text-only{background:none;color:var(--accent-color);font-size:12px;padding:4px 8px}.action-btn.text-only:hover{color:var(--accent-color-dark, #2563eb);text-decoration:underline}.expand-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;padding:4px 8px;transition:all .2s ease}.expand-btn:hover{color:var(--text-primary)}.expand-btn svg{transition:transform .3s ease}.expand-btn svg.rotated{transform:rotate(180deg)}.expanded-details{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.details-title{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 16px}.passage-breakdown{display:flex;flex-direction:column;gap:12px}.passage-summary{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}.passage-info{display:flex;align-items:center;gap:8px;flex:1}.passage-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--accent-color);color:#fff;border-radius:50%;font-size:11px;font-weight:700;flex-shrink:0}.passage-title{font-size:13px;color:var(--text-primary);font-weight:500}.passage-score{display:flex;align-items:center;gap:8px}.passage-result{font-size:13px;font-weight:600;color:var(--text-primary)}.passage-accuracy{font-size:11px;font-weight:600;padding:2px 6px;border-radius:8px;color:#fff}.passage-accuracy.excellent{background:#22c55e}.passage-accuracy.good{background:#3b82f6}.passage-accuracy.average{background:#f59e0b}.passage-accuracy.poor{background:#ef4444}.practice-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;padding:12px 16px;transition:all .3s ease;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr auto auto auto;gap:16px;align-items:center;min-height:60px}.practice-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--success-color));transform:scaleX(0);transition:transform .3s ease}.practice-card:hover:before{transform:scaleX(1)}.practice-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.practice-card.excellent{border-color:#22c55e;background:linear-gradient(135deg,#22c55e0d,#22c55e05)}.practice-card.good{border-color:#3b82f6;background:linear-gradient(135deg,#3b82f60d,#3b82f605)}.practice-card.average{border-color:#f59e0b;background:linear-gradient(135deg,#f59e0b0d,#f59e0b05)}.practice-card.poor{border-color:#ef4444;background:linear-gradient(135deg,#ef44440d,#ef444405)}.practice-card.excellent:hover{border-color:#16a34a;box-shadow:0 4px 12px #22c55e4d}.practice-card.good:hover{border-color:#2563eb;box-shadow:0 4px 12px #3b82f64d}.practice-card.average:hover{border-color:#d97706;box-shadow:0 4px 12px #f59e0b4d}.practice-card.poor:hover{border-color:#dc2626;box-shadow:0 4px 12px #ef44444d}.practice-info-section{display:flex;align-items:center;gap:10px;min-width:0}.test-type-badge{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}.test-type-badge.complete{background:linear-gradient(135deg,var(--success-color),#38a169);color:#fff}.test-type-badge.single{background:linear-gradient(135deg,var(--accent-color),#3182ce);color:#fff}.practice-title h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0 0 2px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.practice-date{font-size:12px;color:var(--text-secondary);font-weight:600}.performance-score{display:flex;align-items:center;gap:6px}.score-display{font-size:14px;font-weight:700;color:var(--text-primary)}.accuracy-display{font-size:12px;font-weight:600;padding:2px 6px;border-radius:10px;color:#fff}.accuracy-display.excellent{background:#22c55e}.accuracy-display.good{background:#3b82f6}.accuracy-display.average{background:#f59e0b}.accuracy-display.poor{background:#ef4444}.band-display{font-size:13px;font-weight:700;padding:2px 8px;border-radius:10px;background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff}.time-stat{font-size:11px;color:var(--text-secondary);font-weight:500;white-space:nowrap}.practice-actions{display:flex;gap:6px}.action-button{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:11px;white-space:nowrap}.view-answers-button{background:#6366f1;color:#fff;border:none}.view-answers-button:hover{background:#5b5fc7}.retry-button{background:transparent;color:#6b7280;border:1px solid #d1d5db}.retry-button:hover{background:#f3f4f6;border-color:#9ca3af}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--bg-card);border-radius:12px;box-shadow:var(--shadow-lg);width:100%;max-width:700px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;border:2px solid var(--border-color)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff}.modal-header h2{font-size:20px;font-weight:700;margin:0}.modal-close-button{background:none;border:none;color:#fff;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.modal-close-button:hover{background:#fff3;transform:scale(1.1)}.modal-body{flex:1;overflow-y:auto;padding:24px}.practice-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.practice-section:last-child{border-bottom:none;margin-bottom:0}.practice-section-title{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.practice-section-stats{font-size:14px;color:var(--text-secondary);margin-bottom:16px;font-weight:500}.answers-grid{display:grid;gap:12px}.answer-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;background:var(--bg-secondary);border-radius:6px;border:2px solid var(--border-color)}.answer-item.correct{border-color:var(--success-color);background:#48bb781a}.answer-item.incorrect{border-color:var(--error-color);background:#f565651a}.question-number{font-weight:700;color:var(--text-primary);font-size:14px;padding:4px 8px;background:var(--bg-card);border-radius:4px;min-width:32px;text-align:center}.answer-comparison{display:flex;gap:16px;flex:1}.user-answer,.standard-answer{flex:1}.answer-label{display:block;font-size:10px;color:var(--text-secondary);text-transform:uppercase;font-weight:600;margin-bottom:2px;letter-spacing:.5px}.answer-value{display:block;font-weight:600;color:var(--text-primary);font-size:14px}.answer-status{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}.answer-item.correct .answer-status{background:var(--success-color);color:#fff}.answer-item.incorrect .answer-status{background:var(--error-color);color:#fff}.retry-modal-content{text-align:center;padding:20px}.retry-modal-content h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.retry-modal-content p{font-size:14px;color:var(--text-secondary);margin:0 0 24px;line-height:1.5}.retry-modal-actions{display:flex;gap:12px;justify-content:center}.retry-cancel-button{background:transparent;color:var(--text-secondary);border:2px solid var(--border-color);padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-cancel-button:hover{border-color:var(--text-secondary);color:var(--text-primary)}.retry-confirm-button{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-confirm-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.passage-selection-content{text-align:center;padding:20px}.passage-selection-content h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 24px}.passage-list{display:flex;flex-direction:column;gap:12px}.passage-item{width:100%}.passage-button{width:100%;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .3s ease;text-align:left}.passage-button:hover{background:var(--bg-card);border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.passage-info{flex:1;display:flex;flex-direction:column;gap:8px}.passage-info h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.passage-title{font-size:14px;color:var(--text-secondary);margin:0;font-weight:500}.passage-stats{display:flex;gap:12px;font-size:13px;color:var(--text-secondary)}.passage-accuracy{font-weight:600;color:var(--accent-color)}.passage-arrow{color:var(--text-secondary);transition:transform .3s ease}.passage-button:hover .passage-arrow{transform:translate(4px);color:var(--accent-color)}.load-more-container{text-align:center;margin-top:24px;padding-top:24px;border-top:2px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:12px}.load-more-info{display:flex;justify-content:center;align-items:center}.load-more-stats{font-size:14px;color:var(--text-secondary);font-weight:500}.load-more-button{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:14px 28px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;flex-direction:column}.load-more-remaining{font-size:12px;opacity:.8;font-weight:400}.load-more-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.load-more-button:disabled{opacity:.7;cursor:not-allowed}@media (max-width: 768px){.records-title-section{padding:24px 0}.records-title-container{padding:0 16px}.records-main-title{font-size:24px;margin-bottom:24px}.overall-stats{gap:16px;flex-wrap:nowrap}.stat-card{min-width:100px;padding:16px;flex:1}.stat-number{font-size:20px}.records-filters{padding:16px}.filters-container{flex-direction:column;align-items:stretch;gap:12px}.search-box{min-width:auto}.filter-group{justify-content:stretch}.filter-select{flex:1;min-width:auto}.practices-grid{gap:16px}.practice-card-modern{padding:20px}.card-header{flex-direction:column;align-items:stretch;gap:16px}.card-title-section{align-items:center}.card-score-section{align-items:center;min-width:auto}.score-main{justify-content:center}.performance-indicator{width:100%}.card-actions{flex-direction:column;gap:12px}.primary-actions,.secondary-actions{width:100%;justify-content:center}.passage-breakdown{gap:8px}.passage-summary{padding:10px}.answer-comparison{flex-direction:column;gap:8px}.modal-content{max-width:95%;margin:10px}.modal-header{padding:16px 20px}.modal-body{padding:20px}}@media (max-width: 480px){.records-title-container{padding:0 12px}.records-main-title{font-size:20px;margin-bottom:20px}.overall-stats{gap:8px;flex-wrap:nowrap}.stat-card{min-width:70px;padding:10px;flex:1}.stat-number{font-size:16px}.stat-label{font-size:10px}.records-filters{padding:12px}.practices-grid{gap:12px}.practice-card-modern{padding:16px}.card-title h3{font-size:16px}.card-meta{flex-direction:column;align-items:flex-start;gap:4px}.test-date,.test-duration{font-size:12px}.score-fraction{font-size:16px}.action-btn{padding:6px 12px;font-size:12px}.passage-summary{flex-direction:column;align-items:flex-start;gap:8px}.passage-info{width:100%}.passage-score{width:100%;justify-content:space-between}.answer-item{grid-template-columns:1fr;gap:8px;text-align:center}.answer-comparison{justify-content:space-around}.modal-content{max-width:100%;max-height:100vh;margin:0;border-radius:0}.modal-header{padding:14px 16px}.modal-header h2{font-size:18px}.modal-body{padding:16px}.retry-modal-actions{flex-direction:column;gap:8px}.retry-cancel-button,.retry-confirm-button{width:100%}}[data-theme=dark] .practice-records-page{background:linear-gradient(135deg,var(--bg-primary-dark, #1a202c) 0%,var(--bg-secondary-dark, #2d3748) 100%)}[data-theme=dark] .records-header,[data-theme=dark] .practice-card,[data-theme=dark] .answers-details,[data-theme=dark] .answer-item{background:var(--bg-card-dark, #2d3748);border-color:var(--border-color-dark, #4a5568)}[data-theme=dark] .stat-item,[data-theme=dark] .toggle-answers-btn{background:var(--bg-secondary-dark, #1a202c);border-color:var(--border-color-dark, #4a5568)}[data-theme=dark] .practice-title h3,[data-theme=dark] .stat-value,[data-theme=dark] .answer-value,[data-theme=dark] .question-number,[data-theme=dark] .toggle-answers-btn{color:var(--text-primary-dark, #e2e8f0)}[data-theme=dark] .stat-label,[data-theme=dark] .answer-label,[data-theme=dark] .practice-date,[data-theme=dark] .time-info,[data-theme=dark] .records-stats{color:var(--text-secondary-dark, #a0aec0)}[data-theme=dark] .answer-item.correct{background:#48bb7833}[data-theme=dark] .answer-item.incorrect{background:#f5656533}[data-theme=dark] .practice-section{border-color:var(--border-color-dark, #4a5568)}[data-theme=dark] .practice-section-title{color:var(--text-primary-dark, #e2e8f0)}[data-theme=dark] .practice-section-stats{color:var(--text-secondary-dark, #a0aec0)}.records-user-email{display:flex;align-items:center;padding:6px 12px;background:#3182ce1a;border:1px solid rgba(49,130,206,.2);border-radius:6px;flex-shrink:0}.records-user-email-text{font-size:13px;font-weight:500;color:var(--accent-color);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.records-header{padding:20px;flex-direction:column;gap:16px;position:static}.back-button{position:static;align-self:flex-start}.records-stats{position:static;align-self:center;gap:12px}.records-user-email{max-width:180px;padding:4px 8px}.records-user-email-text{font-size:12px;max-width:160px}}@media (max-width: 480px){.records-stats{gap:8px;justify-content:center}.records-user-email{max-width:130px;padding:3px 6px}.records-user-email-text{font-size:11px;max-width:115px}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding:0 8px;min-height:60px;flex-wrap:wrap;gap:12px}.search-button{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.search-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.search-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.search-dialog{background:var(--bg-card);border-radius:16px;border:2px solid var(--border-color);box-shadow:var(--shadow-lg);width:90%;max-width:500px;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.search-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color)}.search-dialog-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.close-dialog{background:none;border:none;cursor:pointer;padding:8px;border-radius:8px;color:var(--text-muted);transition:all .2s ease}.close-dialog:hover{background:var(--bg-secondary);color:var(--text-primary)}.search-dialog-content{padding:20px}.search-input-group{margin-bottom:20px}.search-input-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-secondary)}.search-input-group input{width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;font-size:16px;background:var(--bg-card);color:var(--text-primary);transition:border-color .3s ease}.search-input-group input:focus{outline:none;border-color:var(--accent-color)}.search-input-group input::placeholder{color:var(--text-muted)}.search-dialog-actions{display:flex;gap:12px;justify-content:flex-end}.cancel-button{background:var(--bg-secondary);color:var(--text-secondary);border:2px solid var(--border-color);padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.cancel-button:hover{background:var(--border-color);color:var(--text-primary)}.search-confirm-button{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.search-confirm-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.delete-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.delete-dialog{background:var(--bg-card);border-radius:16px;border:2px solid var(--border-color);box-shadow:var(--shadow-lg);width:90%;max-width:450px;animation:slideIn .3s ease}.delete-dialog-header{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--border-color)}.delete-warning-icon{color:#e53e3e;flex-shrink:0}.delete-dialog-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.delete-dialog-content{padding:20px}.delete-dialog-content p{margin:0 0 16px;color:var(--text-secondary);line-height:1.5}.delete-target-info{background:var(--bg-secondary);padding:12px 16px;border-radius:8px;margin:16px 0;border-left:4px solid #e53e3e}.delete-target-info strong{color:var(--text-primary);font-weight:600}.delete-warning{color:#e53e3e!important;font-weight:500;font-size:14px}.delete-dialog-actions{display:flex;gap:12px;justify-content:flex-end;padding:20px;border-top:1px solid var(--border-color)}.delete-confirm-button{background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;min-width:120px;justify-content:center}.delete-confirm-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#c53030,#9c2626)}.delete-confirm-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.delete-confirm-button .loading-spinner.small{width:16px;height:16px;border-width:2px}.test-list{display:flex;flex-direction:column;gap:20px;margin-bottom:40px;margin-top:2rem;max-width:1200px;margin-left:auto;margin-right:auto}.test-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow-sm);transition:all .3s ease;animation:slideInUp .5s ease forwards;opacity:0;transform:translateY(20px);position:relative}@media (min-width: 768px){.test-card{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:24px}}.test-card-part1{border-color:#10b9814d!important;background:linear-gradient(135deg,#10b98108,#0596690f)!important;box-shadow:0 4px 14px #10b9811a!important}.test-card-part1:hover{border-color:#10b98199!important;box-shadow:0 8px 25px #10b98133!important}.test-card-part2{border-color:#3b82f64d!important;background:linear-gradient(135deg,#3b82f608,#1d4ed80f)!important;box-shadow:0 4px 14px #3b82f61a!important}.test-card-part2:hover{border-color:#3b82f699!important;box-shadow:0 8px 25px #3b82f633!important}.test-card-part3{border-color:#f59e0b4d!important;background:linear-gradient(135deg,#f59e0b08,#d977060f)!important;box-shadow:0 4px 14px #f59e0b1a!important}.test-card-part3:hover{border-color:#f59e0b99!important;box-shadow:0 8px 25px #f59e0b33!important}.test-card-untagged{border-color:#6b72804d!important;background:linear-gradient(135deg,#6b728008,#4b55630f)!important;box-shadow:0 4px 14px #6b72801a!important}.test-card-untagged:hover{border-color:#6b728099!important;box-shadow:0 8px 25px #6b728033!important}.test-card-deleted{border-color:#dc2626!important;background:linear-gradient(135deg,#dc26260d,#991b1b14)!important;box-shadow:0 4px 14px #dc262633!important}.test-card-deleted:hover{border-color:#991b1b!important;box-shadow:0 8px 25px #dc26264d!important}.test-content{flex:1;min-width:0;overflow-wrap:break-word;display:flex;flex-direction:column;align-items:flex-start;width:100%}.test-header{margin-bottom:16px}.title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.test-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0;line-height:1.4;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.test-title[data-length=long]{font-size:1.25rem}.test-title[data-length=very-long]{font-size:1.1rem}.test-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}.delete-x-button{position:absolute;top:4px;right:4px;width:24px;height:24px;border:none;background:#ff000026;color:red;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;opacity:.8;z-index:1}.delete-x-button:hover{background:#ff000040;color:red;opacity:1;transform:scale(1.05)}.delete-x-button svg{width:12px;height:12px}.level-badge{display:flex;align-items:center;gap:4px;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.level-badge.level-part1{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px #10b98163}.level-badge.level-part2{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 14px #3b82f663}.level-badge.level-part3{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 4px 14px #f59e0b63}.level-badge.level-warning{background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff}.level-badge.level-deleted{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;box-shadow:0 4px 14px #dc262680;animation:pulse-red 2s infinite}@keyframes pulse-red{0%,to{box-shadow:0 4px 14px #dc262680}50%{box-shadow:0 4px 20px #dc2626cc}}.level-badge svg{width:12px;height:12px}.test-meta{margin-top:8px;width:100%;display:flex;flex-direction:column;align-items:flex-start}.question-types{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;align-items:flex-start!important;justify-content:flex-start!important;width:100%!important;margin:0!important;padding:0!important}.type-tag{background:var(--bg-secondary);color:var(--text-secondary);padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;border:1px solid var(--border-color);display:inline-block;white-space:nowrap;flex-shrink:0}.test-actions{display:flex;flex-direction:column;gap:12px;width:100%}@media (min-width: 480px){.test-actions{flex-direction:row;align-items:center;width:auto}}@media (max-width: 479px){.edit-button,.delete-button,.start-test-button{width:100%;justify-content:center;padding:14px 20px}.start-test-button{order:-1}}.edit-button{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:var(--shadow-sm);min-width:100px;justify-content:center}.edit-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.edit-button svg{width:16px;height:16px}.delete-button{background:linear-gradient(135deg,#e53e3e,#c53030);color:#fff;border:none;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:var(--shadow-sm)}.delete-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#c53030,#9c2626)}.delete-button svg{width:16px;height:16px}.filters-section{margin-bottom:3rem;background:var(--bg-card);border-radius:16px;border:2px solid var(--border-color);box-shadow:var(--shadow-sm);overflow:hidden;transition:all .3s ease}.filters-section:hover{box-shadow:var(--shadow-md)}.filters-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;background:var(--bg-card);border-bottom:1px solid var(--border-color)}.filters-title{display:flex;align-items:center;gap:1rem}.filters-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));border-radius:12px;color:#fff}.filters-title h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.active-count{background:var(--error-color);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:12px;min-width:20px;text-align:center}.filters-actions{display:flex;align-items:center;gap:.75rem}.clear-filters-button{display:flex;align-items:center;gap:.5rem;background:var(--error-color);color:#fff;border:none;padding:.75rem 1rem;border-radius:10px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.clear-filters-button:hover{background:#dc2626;transform:translateY(-2px);box-shadow:var(--shadow-md)}.toggle-filters-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.toggle-filters-button:hover,.toggle-filters-button.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.toggle-filters-button .chevron{transition:transform .3s ease}.toggle-filters-button .chevron.rotated{transform:rotate(180deg)}.filters-content{overflow:hidden;transition:all .3s ease}.filters-content.collapsed{max-height:0;opacity:0}.filters-content.expanded{max-height:800px;opacity:1}.filters-grid{padding:2rem;background:var(--bg-secondary)}.filter-group{margin-bottom:2rem}.filter-group:last-child{margin-bottom:0}.filter-group-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.filter-group-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--accent-color);border-radius:8px;color:#fff}.filter-group h4{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.selected-count{background:var(--success-color);color:#fff;font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:10px}.filter-options{display:flex;flex-wrap:wrap;gap:.75rem}.question-types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.filter-pill{position:relative;display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;cursor:pointer;transition:all .3s ease;min-height:48px}.filter-pill:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.filter-pill.selected{background:linear-gradient(135deg,var(--accent-color),var(--success-color));border-color:var(--accent-color);color:#fff;box-shadow:var(--shadow-md)}.filter-pill input{position:absolute;opacity:0;pointer-events:none}.filter-pill-text{font-size:.9rem;font-weight:500;flex:1}.filter-pill-check{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#fff3;border-radius:50%;margin-left:.5rem}.active-filters{margin-bottom:3rem;background:var(--bg-card);border-radius:16px;border:2px solid var(--border-color);padding:1.5rem;box-shadow:var(--shadow-sm)}.active-filters-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--text-secondary);font-weight:600;font-size:.9rem}.active-filters-list{display:flex;flex-wrap:wrap;gap:.75rem}.active-filter-tag{display:flex;align-items:center;gap:.5rem;border-radius:12px;padding:.5rem .75rem;font-size:.85rem;font-weight:500;box-shadow:var(--shadow-sm);transition:all .3s ease}.active-filter-tag.type-filter{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.active-filter-tag.question-filter{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff}.active-filter-tag.level-filter{background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff}.active-filter-tag.level-filter.deleted{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;animation:pulse-red 2s infinite}.active-filter-tag:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.tag-label{opacity:.8;font-size:.8rem}.tag-value{font-weight:600}.tag-remove{display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;color:#fff;transition:all .2s ease}.tag-remove:hover{background:#ffffff4d;transform:scale(1.1)}.no-results{text-align:center;padding:4rem 2rem;background:var(--bg-card);border-radius:16px;border:2px dashed var(--border-color)}.no-results-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.5}.no-results h3{margin:0 0 1rem;color:var(--text-primary);font-size:1.5rem;font-weight:600}.no-results p{margin:0;font-size:1rem;color:var(--text-muted);line-height:1.5}@media (max-width: 768px){.test-list-page{padding:16px}.header{flex-direction:column;gap:16px;text-align:center;padding:0 4px}.header h1{font-size:2rem;order:2}.back-button{order:1;align-self:center}.header-actions{order:3;justify-content:center;flex-wrap:wrap}.test-card{flex-direction:column;gap:20px;text-align:center}.test-header{flex-direction:column;gap:12px}.test-meta{text-align:left!important}.question-types{justify-content:flex-start!important;text-align:left!important}.types-list{justify-content:center}.pagination{flex-direction:column;gap:16px}}@media (max-width: 768px){.filters-header{flex-direction:column;gap:1rem;padding:1rem}.filters-title{justify-content:center}.filters-grid{padding:1rem}.question-types-grid{grid-template-columns:1fr}.active-filters{padding:1rem;margin-bottom:2.5rem}.active-filters-header,.active-filters-list{justify-content:center}.filter-pill{min-height:44px;padding:.5rem .75rem}.filters-section{margin-bottom:2.5rem}.test-list{margin-top:1.5rem}.search-dialog{width:95%;max-width:none;margin:0 16px}.search-dialog-header,.search-dialog-content{padding:16px}.search-dialog-actions{flex-direction:column;gap:8px}.cancel-button,.search-confirm-button{width:100%;padding:14px}.header{gap:12px}.search-button{font-size:14px;padding:10px 16px}}@media (max-width: 480px){.filters-actions{width:100%;justify-content:center}.clear-filters-button{flex:1;justify-content:center}}.header-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}.theme-toggle-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;font-size:20px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.theme-toggle-button:hover{background:var(--bg-secondary);transform:translateY(-1px);box-shadow:var(--shadow-md)}.clear-search-button{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--error-color);color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.clear-search-button:hover{background:#c53030;transform:translateY(-1px);box-shadow:var(--shadow-md)}.search-result-indicator{display:flex;justify-content:space-between;align-items:center;background:var(--accent-color);color:#fff;padding:12px 20px;border-radius:8px;margin-bottom:20px;box-shadow:var(--shadow-sm)}.search-result-info{display:flex;align-items:center;gap:8px}.clear-search-link{background:#fff3;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:background .3s ease}.clear-search-link:hover{background:#ffffff4d}.success-dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.success-dialog{background:var(--bg-card);border-radius:16px;border:2px solid var(--success-color);box-shadow:var(--shadow-lg);width:90%;max-width:400px;animation:slideIn .3s ease}.success-dialog-header{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,var(--success-color),#22c55e);color:#fff;border-top-left-radius:14px;border-top-right-radius:14px}.success-icon{color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#fff3;border-radius:50%}.success-dialog-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#fff}.success-dialog-content{padding:24px;text-align:center}.success-dialog-content p{margin:0;color:var(--text-primary);font-size:16px;line-height:1.5;font-weight:500}.success-dialog-actions{display:flex;justify-content:center;padding:20px;border-top:1px solid var(--border-color)}.success-ok-button{background:linear-gradient(135deg,var(--success-color),#22c55e);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;min-width:100px;justify-content:center;box-shadow:var(--shadow-sm)}.success-ok-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:linear-gradient(135deg,#22c55e,#16a34a)}.success-ok-button svg{width:16px;height:16px}@media (max-width: 480px){.success-dialog{width:95%;max-width:none;margin:0 16px}.success-dialog-header{padding:16px}.success-dialog-content{padding:20px}.success-dialog-actions{padding:16px}.success-ok-button{width:100%;padding:14px}}.filter-pill.deleted-option{border-color:#dc26264d;background:linear-gradient(135deg,#dc262608,#991b1b0f)}.filter-pill.deleted-option:hover{border-color:#dc262699;background:linear-gradient(135deg,#dc262614,#991b1b1f)}.filter-pill.deleted-option.selected{background:linear-gradient(135deg,#dc2626,#991b1b);border-color:#dc2626;color:#fff;animation:pulse-red 2s infinite}.filter-pill.deleted-option .filter-pill-text{color:#dc2626;font-weight:600}.filter-pill.deleted-option.selected .filter-pill-text{color:#fff}.editor-page{min-height:100vh;width:100%;background:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif}.editor-page.editor-layout{max-width:none;padding:0}.header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);padding:20px 24px;display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;z-index:1001;height:80px}.header h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.editor-content{max-width:1400px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:24px;width:100%;box-sizing:border-box}.search-section{background:linear-gradient(135deg,var(--bg-card) 0%,rgba(59,130,246,.02) 100%);border:1px solid var(--border-color);border-radius:20px;padding:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.search-section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent-color),var(--success-color));border-radius:20px 20px 0 0}.search-title h2{font-size:28px;font-weight:700;color:var(--text-primary);margin:0 0 12px;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.search-subtitle{display:flex;align-items:center;gap:8px;margin-bottom:24px}.search-icon{font-size:18px}.search-subtitle p{font-size:16px;color:var(--text-secondary);margin:0;line-height:1.5}.search-controls{display:flex;flex-direction:column;gap:16px}.search-type-tabs{display:flex;gap:12px;margin-bottom:20px;background:var(--bg-secondary);padding:6px;border-radius:12px;border:1px solid var(--border-color)}.search-type-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:500;color:var(--text-secondary);flex:1;justify-content:center;position:relative}.search-type-tab .tab-icon{font-size:16px}.search-type-tab:hover{background:var(--bg-primary);color:var(--text-primary);transform:translateY(-1px)}.search-type-tab.active{background:var(--accent-color);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-1px)}.search-type-tab.active:hover{background:var(--accent-color-hover)}.search-input-group{display:flex;gap:16px;align-items:stretch;max-width:600px}.search-input{flex:1;padding:16px 20px;border:2px solid var(--border-color);border-radius:12px;font-size:16px;background:var(--bg-primary);color:var(--text-primary);transition:all .3s ease;box-shadow:var(--shadow-sm)}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 4px #3b82f61a,var(--shadow-md);transform:translateY(-1px)}.search-button{display:flex;align-items:center;gap:8px;padding:16px 24px;background:linear-gradient(135deg,var(--accent-color),var(--accent-color-hover));color:#fff;border:none;border-radius:12px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:16px;white-space:nowrap;box-shadow:var(--shadow-md);min-width:140px;justify-content:center}.search-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.search-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.loading-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.search-tips{background:#3b82f60d;border:1px solid rgba(59,130,246,.2);border-radius:12px;padding:20px;margin-top:24px;display:flex;gap:12px;align-items:flex-start}.tip-icon{font-size:20px;margin-top:2px}.tip-content{flex:1}.tip-content strong{color:var(--text-primary);font-weight:600;margin-bottom:8px;display:block}.tip-content ul{margin:8px 0 0;padding-left:20px;color:var(--text-secondary)}.tip-content li{margin-bottom:4px;font-size:14px;line-height:1.4}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:16px 20px;margin-top:16px;display:flex;align-items:center;gap:12px;animation:slideIn .3s ease-out}.error-icon{font-size:20px;color:var(--error-color)}.error-text{color:var(--error-color);font-weight:500;font-size:14px;line-height:1.4}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:16px;margin:20px 0}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.6}.empty-state h4{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.empty-state p{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.5;max-width:300px}.editor-layout{height:100vh;display:flex;flex-direction:column}.editor-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);padding:16px 24px;position:fixed;top:0;left:0;right:0;z-index:1001;height:80px;display:flex;align-items:center}.basic-info-section{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.exit-editor-btn{padding:8px 16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:14px;color:var(--text-primary)}.exit-editor-btn:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.basic-info-fields{display:flex;align-items:center;gap:20px;flex:1;flex-wrap:wrap}.info-field{display:flex;align-items:center;gap:8px}.info-field label{font-size:14px;font-weight:500;color:var(--text-secondary);min-width:fit-content}.id-display{font-size:14px;color:var(--text-primary);font-family:monospace;background:var(--bg-secondary);padding:4px 8px;border-radius:4px}.title-input,.description-input{padding:8px 12px;border:1px solid var(--border-color);border-radius:4px;font-size:16px;background:var(--bg-primary);color:var(--text-primary);min-width:300px}.title-input:focus,.description-input:focus{outline:none;border-color:var(--accent-color)}.save-btn{padding:6px 12px;background:var(--success-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:13px;font-weight:500;height:36px;display:flex;align-items:center;gap:4px}.save-btn:hover:not(:disabled){background:var(--success-color-hover);transform:translateY(-1px)}.save-btn:disabled{opacity:.6;cursor:not-allowed}.save-success{color:var(--success-color);font-size:12px;font-weight:500;margin-left:8px}.save-error{color:var(--error-color);font-size:12px;font-weight:500;margin-left:8px}.editor-layout-container{flex:1;min-height:0}.editor-left-panel{height:100%;display:flex;flex-direction:column;background:var(--bg-card)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:2px solid var(--border-color);background:linear-gradient(135deg,var(--bg-secondary),rgba(59,130,246,.02));position:sticky;top:0;z-index:10}.panel-title{display:flex;flex-direction:column;gap:4px}.panel-header h3{margin:0;font-size:18px;font-weight:700;color:var(--text-primary)}.paragraph-count,.question-count{font-size:12px;color:var(--text-secondary);background:var(--bg-primary);padding:2px 8px;border-radius:12px;border:1px solid var(--border-color)}.add-paragraph-btn{padding:6px 12px;background:var(--success-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:12px;font-weight:500}.add-paragraph-btn:hover{background:var(--success-color-hover);transform:scale(1.05)}.paragraphs-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.paragraph-editor-item{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm);transition:all .3s ease}.paragraph-editor-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.paragraph-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.paragraph-info{display:flex;flex-direction:column;gap:4px}.paragraph-number{font-size:16px;font-weight:700;color:var(--text-primary)}.paragraph-word-count{font-size:12px;color:var(--text-secondary);background:var(--bg-secondary);padding:2px 6px;border-radius:8px;align-self:flex-start}.remove-paragraph-btn{padding:4px 8px;background:var(--error-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:12px}.remove-paragraph-btn:hover{background:var(--error-color-hover);transform:scale(1.05)}.editor-right-panel{height:100%;display:flex;flex-direction:column;background:var(--bg-card)}.questions-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.question-section-item{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm);transition:all .3s ease}.question-section-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.section-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.section-info{display:flex;align-items:center;gap:12px}.section-number{font-size:16px;font-weight:700;color:var(--text-primary)}.edit-toggle-btn{padding:6px 12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:12px;color:var(--text-primary)}.edit-toggle-btn:hover,.edit-toggle-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.paragraph-fields,.section-fields{display:flex;flex-direction:column;gap:12px}.field-group{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.field-group label{font-size:12px;font-weight:500;color:var(--text-secondary)}.field-input{padding:10px 12px;border:1px solid var(--border-color);border-radius:4px;font-size:16px;background:var(--bg-card);color:var(--text-primary)}.field-input:focus{outline:none;border-color:var(--accent-color)}.field-input.disabled{background:var(--bg-secondary);color:var(--text-secondary);cursor:not-allowed}.field-textarea{padding:10px 12px;border:1px solid var(--border-color);border-radius:4px;font-size:16px;background:var(--bg-card);color:var(--text-primary);resize:vertical;min-height:60px;font-family:inherit}.field-textarea.paragraph-content{font-size:15px;line-height:1.6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;border-radius:8px;border:2px solid var(--border-color);transition:all .3s ease;min-height:60px}.field-textarea.paragraph-content:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.auto-resize{resize:none;overflow-y:auto;min-height:40px;transition:height .15s ease;line-height:1.3}.field-textarea.auto-resize{min-height:40px;max-height:500px;padding:8px 12px}.instruction-textarea.auto-resize{min-height:40px;max-height:200px;padding:6px 10px}.paragraph-content.auto-resize{min-height:80px;max-height:600px;padding:12px}.auto-resize::-webkit-scrollbar{width:8px}.auto-resize::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}.auto-resize::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.auto-resize::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.notes-content-textarea.auto-resize{min-height:120px;max-height:600px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.4;white-space:pre-wrap}.instruction-textarea{font-size:14px;line-height:1.5;font-weight:400}.field-textarea:focus{outline:none;border-color:var(--accent-color)}.json-editor{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;background:var(--bg-secondary);color:var(--text-primary);white-space:pre}.content-preview{margin-bottom:16px}.content-preview-box{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:12px;min-height:60px}.content-preview-text{font-size:14px;line-height:1.4;color:var(--text-secondary)}.multiple-choice-editor,.statement-editor,.matching-headings-editor,.sentence-completion-editor,.short-answer-editor,.summary-note-table-flowchart-editor,.diagram-completion-editor{border:1px solid var(--border-color);border-radius:8px;padding:16px;background:var(--bg-secondary)}.multiple-choice-editor h4,.statement-editor h4,.matching-headings-editor h4,.sentence-completion-editor h4,.short-answer-editor h4,.summary-note-table-flowchart-editor h4,.diagram-completion-editor h4{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border-color);padding-bottom:8px}.question-item,.statement-item{border:1px solid var(--border-color);border-radius:6px;padding:12px;margin-bottom:12px;background:var(--bg-primary)}.question-item .field-textarea,.statement-item .field-textarea{min-height:40px;font-size:15px;line-height:1.3}.option-item,.heading-item{display:flex;align-items:center;gap:8px;margin-bottom:8px}.option-key,.heading-key{font-weight:600;color:var(--text-primary);min-width:30px}.option-item input,.heading-item input{flex:1}.notes-content,.table-content,.flowchart-content{border:1px solid var(--border-color);border-radius:6px;padding:12px;margin:8px 0;background:var(--bg-primary)}.add-button.small{padding:6px 12px;font-size:12px;margin-top:8px}select.field-input{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 12px;padding-right:40px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.edit-sections{display:flex;flex-direction:column;gap:24px}.editor-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.editor-section h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-header h3,.section-header h4{margin:0}.add-button{padding:8px 16px;background:var(--success-color);color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;font-size:13px}.add-button:hover{background:var(--success-color-hover);transform:translateY(-1px)}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:6px}.form-input{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;background:var(--bg-primary);color:var(--text-primary);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f61a}.form-input.disabled{background:var(--bg-secondary);color:var(--text-secondary);cursor:not-allowed}.form-textarea{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;background:var(--bg-primary);color:var(--text-primary);resize:vertical;min-height:80px;font-family:inherit;transition:all .2s ease;box-sizing:border-box}.form-textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f61a}.paragraph-editor{border:1px solid var(--border-color);border-radius:8px;padding:16px;margin-bottom:16px;background:var(--bg-secondary)}.paragraph-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.paragraph-header h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.remove-button{padding:6px 8px;background:var(--error-color);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;font-size:12px}.remove-button:hover{background:var(--error-color-hover);transform:scale(1.05)}.question-section-editor{border:1px solid var(--border-color);border-radius:8px;padding:20px;margin-bottom:20px;background:var(--bg-secondary)}.question-type-badge{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;padding:6px 12px;border-radius:16px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;box-shadow:var(--shadow-sm);border:1px solid rgba(255,255,255,.2)}.content-editor-note{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:16px;margin-top:16px}.content-editor-note p{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.4}.save-controls{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}.save-button{padding:12px 24px;background:var(--success-color);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:14px}.save-button:hover:not(:disabled){background:var(--success-color-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.save-button:disabled{opacity:.6;cursor:not-allowed}.error-message,.success-message{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;font-size:14px;font-weight:500}.error-message{background:#ef44441a;color:var(--error-color);border:1px solid rgba(239,68,68,.2)}.success-message{background:#10b9811a;color:var(--success-color);border:1px solid rgba(16,185,129,.2)}.error-icon,.success-icon{font-size:16px}.auth-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;background:var(--bg-card);border-radius:16px;border:1px solid var(--border-color);margin:20px auto;max-width:600px}.auth-error .error-icon{font-size:48px;margin-bottom:20px;opacity:.7}.auth-error h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.auth-error p{font-size:16px;color:var(--text-secondary);margin:0 0 24px;line-height:1.5}.auth-button{background:var(--accent-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.auth-button:hover{background:var(--accent-color-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}@media (max-width: 768px){.editor-content{padding:16px}.search-section{padding:24px 20px}.search-title h2{font-size:24px}.search-type-tabs{flex-direction:column;gap:8px;padding:4px}.search-type-tab{width:100%;justify-content:center;padding:14px 20px}.search-input-group{flex-direction:column;max-width:none;gap:12px}.search-input,.search-button{width:100%}.search-input{padding:14px 16px}.search-button{padding:14px 20px}.search-tips{padding:16px;flex-direction:column;gap:8px}.section-header{flex-direction:column;align-items:flex-start;gap:12px}.paragraph-header{flex-direction:column;align-items:flex-start;gap:8px}.header{flex-direction:column;align-items:flex-start;gap:12px}.editor-header{padding:12px 16px}.basic-info-section{flex-direction:column;align-items:stretch;gap:16px}.basic-info-fields{flex-direction:column;gap:12px}.info-field{flex-direction:column;align-items:stretch;gap:4px}.title-input,.description-input{min-width:auto;width:100%}.save-section{flex-direction:column;gap:8px}.panel-header{padding:16px;flex-direction:column;align-items:stretch;gap:12px}.panel-title{flex-direction:row;justify-content:space-between;align-items:center}.panel-header h3{font-size:16px}.add-paragraph-btn{width:100%;padding:12px;font-size:14px}.paragraphs-container,.questions-container{padding:16px;gap:16px}.paragraph-editor-item,.question-section-item{padding:16px}.paragraph-item-header,.section-item-header{flex-direction:column;align-items:stretch;gap:12px}.paragraph-info,.section-info{align-self:flex-start}.remove-paragraph-btn,.edit-toggle-btn{width:100%;padding:10px}.field-textarea.paragraph-content{min-height:80px}.auto-resize,.instruction-textarea{min-height:50px!important}.empty-state{padding:40px 20px}.empty-icon{font-size:36px}}@media (max-width: 480px){.editor-sidebar{width:100vw;left:-100vw}.section-header-bar{padding:10px 12px}.sidebar-toggle{padding:6px 10px;font-size:14px}.section-header-bar h3{font-size:15px}}.level-select{padding:8px 12px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;min-width:120px}.level-select:hover{border-color:var(--accent-color)}.level-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.compact-answers-editor{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;margin-bottom:16px;overflow:hidden}.compact-answers-header{background:var(--bg-card);padding:12px 16px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;gap:8px}.answers-title-row{display:flex;align-items:center;gap:8px;flex:1}.compact-answers-editor h4{font-size:14px;font-weight:600;color:var(--text-primary);margin:0}.compact-answers-editor .answers-count{background:var(--accent-color);color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}.compact-add-btn{background:var(--success-color);color:#fff;border:none;padding:4px 8px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .3s ease}.compact-add-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.compact-answers-list{max-height:calc(100vh - 160px);overflow-y:auto;padding:8px}.compact-answer-item{margin-bottom:0}.answer-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;background:var(--bg-card);padding:4px 6px;border-radius:6px;border:1px solid var(--border-color);transition:all .3s ease;margin-bottom:4px}.answer-row:hover{border-color:var(--accent-color)}.answer-id{font-size:10px;font-weight:600;color:var(--text-secondary);font-family:Monaco,Consolas,monospace;white-space:nowrap}.compact-answer-input{border:none;background:transparent;color:var(--text-primary);font-size:11px;font-family:Monaco,Consolas,monospace;padding:2px;width:100%}.compact-answer-input:focus{outline:none;background:var(--bg-secondary);border-radius:3px}.compact-delete-btn{background:transparent;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;padding:1px 3px;border-radius:3px;transition:all .3s ease;opacity:.6;line-height:1}.compact-delete-btn:hover{opacity:1;color:var(--error-color);background:#ef44441a}.compact-empty-state{text-align:center;padding:20px;color:var(--text-muted)}.compact-empty-state p{font-size:12px;margin:0}.compact-answers-editor .toggle-answers-btn{background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:4px;cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.compact-answers-editor .toggle-answers-btn:hover{border-color:var(--accent-color);color:var(--accent-color)}.compact-answers-editor .toggle-answers-btn .chevron{transition:transform .3s ease}.compact-answers-editor .toggle-answers-btn .chevron.rotated{transform:rotate(180deg)}.save-section{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.save-controls{display:flex;align-items:center;gap:12px}.save-btn.saving{transform:scale(.98);opacity:.8}.editor-theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;font-size:18px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);margin-left:12px}.editor-theme-toggle:hover{background:var(--bg-secondary);transform:translateY(-1px);box-shadow:var(--shadow-md)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.editor-main-container{position:fixed;left:0;right:0;bottom:0;top:80px;padding-right:160px;background:var(--bg-primary)}.editor-layout-container{width:100%;height:100%}.sidebar-answers-editor{position:fixed;right:0;top:80px;width:160px;height:calc(100vh - 80px);background:var(--bg-card);border-left:1px solid var(--border-color);box-shadow:var(--shadow-sm);overflow-y:auto;z-index:1000}.sidebar-answers-editor .compact-answers-editor{margin-bottom:0;border:none;border-radius:0;height:100%;background:transparent}.preview-mode .panel-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);padding:16px 20px}.mode-controls{display:flex;align-items:center;gap:8px}.mode-toggle-btn{background:var(--bg-secondary);border:2px solid var(--border-color);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.mode-toggle-btn.preview{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border-color:var(--accent-color)}.mode-toggle-btn.editing{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:#f59e0b}.mode-toggle-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.reading-content{padding:20px;line-height:1.6;font-size:16px;background:var(--bg-primary);overflow-y:auto;height:calc(100vh - 160px)}.questions-container{padding:20px;overflow-y:auto;height:calc(100vh - 160px)}.paragraph-preview{margin-bottom:24px;position:relative;transition:all .3s ease}.paragraph-preview.clickable{cursor:pointer;padding:12px;border-radius:8px;border:2px solid transparent}.paragraph-preview.clickable:hover{background:var(--bg-secondary);border-color:var(--border-color)}.paragraph-preview.editing{background:var(--bg-card);border:2px solid var(--accent-color);border-radius:12px;padding:16px;box-shadow:var(--shadow-md)}.paragraph-hint{position:absolute;left:-40px;top:0;width:24px;height:24px;background:var(--accent-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;z-index:5}.paragraph-content{text-align:justify;color:var(--text-primary);line-height:1.8;text-indent:2em}.paragraph-edit-form{background:var(--bg-secondary);padding:16px;border-radius:8px;border:1px solid var(--border-color)}.hint-field{display:flex;align-items:center;gap:8px;margin-bottom:12px}.hint-field label{font-size:12px;font-weight:600;color:var(--text-secondary);min-width:40px}.hint-input{width:60px;padding:4px 8px;border:1px solid var(--border-color);border-radius:4px;font-size:12px;text-align:center}.content-textarea{width:100%;min-height:100px;padding:12px;border:2px solid var(--border-color);border-radius:8px;resize:vertical;font-family:inherit;font-size:14px;line-height:1.6}.content-textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.edit-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.done-btn{background:var(--success-color);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .3s ease}.done-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}.delete-btn{background:var(--error-color);color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .3s ease}.delete-btn:hover{transform:translateY(-1px);filter:brightness(1.1)}@media (max-width: 1200px){.editor-main-container{padding-right:140px}.sidebar-answers-editor{width:140px}}@media (max-width: 768px){.editor-main-container{padding-right:0;bottom:200px}.sidebar-answers-editor{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:200px;border-left:none;border-top:2px solid var(--border-color)}.paragraph-hint{position:static;display:inline-flex;margin-bottom:8px;margin-right:12px}.reading-content,.questions-container{height:calc(100vh - 280px)}}.add-writing-practice-page{padding:20px;max-width:1200px;margin:0 auto}.page-header{display:flex;align-items:center;gap:16px;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid var(--border-color, #e1e5e9)}.back-button{background:var(--surface-color, #ffffff);border:1px solid var(--border-color, #e1e5e9);border-radius:8px;padding:8px 16px;cursor:pointer;color:var(--text-secondary, #666);font-size:14px;transition:all .2s ease}.back-button:hover{background:var(--hover-color, #f5f5f5);border-color:var(--primary-color, #2563eb);color:var(--primary-color, #2563eb)}.page-header h1{margin:0;font-size:28px;font-weight:600;color:var(--text-primary, #1f2937)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid var(--border-color, #e1e5e9);border-top-color:var(--primary-color, #2563eb);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.writing-practice-form{background:var(--surface-color, #ffffff);border-radius:12px;padding:32px;box-shadow:0 4px 6px -1px #0000001a}.success-message{background:#d1fae5;border:1px solid #10b981;color:#065f46;padding:12px 16px;border-radius:8px;margin-bottom:24px;font-weight:500}.error-message{background:#fee2e2;border:1px solid #ef4444;color:#991b1b;padding:12px 16px;border-radius:8px;margin-bottom:24px;font-weight:500}.form-section{margin-bottom:32px}.form-section h2{margin:0 0 20px;font-size:20px;font-weight:600;color:var(--text-primary, #1f2937);border-bottom:2px solid var(--primary-color, #2563eb);padding-bottom:8px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:6px;font-weight:500;color:var(--text-primary, #1f2937);font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid var(--border-color, #e1e5e9);border-radius:8px;font-size:14px;transition:border-color .2s ease;background:var(--surface-color, #ffffff);color:var(--text-primary, #1f2937)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color, #2563eb);box-shadow:0 0 0 3px #2563eb1a}.form-group input.error,.form-group textarea.error{border-color:#ef4444}.form-group textarea{resize:vertical;min-height:80px}.form-help{margin:4px 0 0;font-size:12px;color:var(--text-secondary, #666)}.field-error{color:#ef4444;font-size:12px;margin-top:4px;display:block}.types-section{background:var(--surface-color, #ffffff);border:1px solid var(--border-color, #e1e5e9);border-radius:8px;padding:16px;margin-bottom:16px}.themes-section{background:#f8fafc;border:1px solid var(--border-color, #e1e5e9);border-radius:8px;padding:16px;margin-bottom:24px}.subsection-title{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--text-primary, #1f2937)}.expand-button{display:flex;align-items:center;gap:8px;background:none;border:none;padding:8px 0;cursor:pointer;width:100%;text-align:left;transition:all .2s ease;border-radius:6px}.expand-button:hover{background:var(--hover-color, #f5f5f5);padding-left:8px}.expand-icon{font-size:14px;color:var(--primary-color, #2563eb);transition:transform .2s ease;min-width:12px}.expand-button.expanded .expand-icon{transform:rotate(0)}.expandable-content{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color, #e1e5e9);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.themes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:8px}.theme-checkbox{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--border-color, #e1e5e9);border-radius:8px;cursor:pointer;transition:all .2s ease;background:var(--surface-color, #ffffff)}.theme-checkbox:hover{background:var(--hover-color, #f5f5f5);border-color:var(--primary-color, #2563eb)}.theme-checkbox input[type=checkbox]{width:auto;margin:0}.checkmark{font-size:14px;font-weight:500;color:var(--text-primary, #1f2937)}.image-upload-area{border:2px dashed var(--border-color, #e1e5e9);border-radius:12px;padding:32px;text-align:center;transition:border-color .2s ease}.image-upload-area:hover{border-color:var(--primary-color, #2563eb)}.upload-button{display:inline-block;background:var(--primary-color, #2563eb);color:#fff;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.upload-button:hover{background:var(--primary-dark, #1d4ed8)}.upload-help{margin:8px 0 0;color:var(--text-secondary, #666);font-size:14px}.uploaded-images{margin-top:24px}.uploaded-images h3{margin:0 0 16px;font-size:16px;font-weight:600;color:var(--text-primary, #1f2937)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.image-preview{position:relative;border:1px solid var(--border-color, #e1e5e9);border-radius:8px;overflow:hidden;background:var(--surface-color, #ffffff)}.image-preview img{width:100%;height:150px;object-fit:cover;display:block}.remove-image{position:absolute;top:8px;right:8px;background:#000000b3;color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}.remove-image:hover{background:#ef4444e6}.image-name{padding:8px;font-size:12px;color:var(--text-secondary, #666);margin:0;word-break:break-all}.form-actions{display:flex;gap:16px;justify-content:flex-end;margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color, #e1e5e9)}.cancel-button{padding:12px 24px;border:1px solid var(--border-color, #e1e5e9);background:var(--surface-color, #ffffff);color:var(--text-secondary, #666);border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.cancel-button:hover{border-color:var(--text-secondary, #666);color:var(--text-primary, #1f2937)}.submit-button{padding:12px 24px;background:var(--primary-color, #2563eb);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.submit-button:hover:not(:disabled){background:var(--primary-dark, #1d4ed8)}.submit-button:disabled{background:var(--border-color, #e1e5e9);color:var(--text-secondary, #666);cursor:not-allowed}@media (prefers-color-scheme: dark){.add-writing-practice-page{--surface-color: #1f2937;--border-color: #374151;--text-primary: #f9fafb;--text-secondary: #d1d5db;--hover-color: #374151;--primary-color: #3b82f6;--primary-dark: #2563eb}.themes-section{background:#111827}.types-section{background:var(--surface-color, #1f2937)}}@media (max-width: 768px){.add-writing-practice-page{padding:16px}.writing-practice-form{padding:20px}.themes-grid{grid-template-columns:1fr}.types-section,.themes-section{padding:12px}.subsection-title{font-size:14px}.images-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.form-actions{flex-direction:column}.page-header{flex-direction:column;align-items:flex-start;gap:12px}}.admin-page{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;display:flex;flex-direction:column}.admin-header{background:var(--bg-card);border-bottom:2px solid var(--border-color);box-shadow:var(--shadow-sm);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;z-index:1001;height:80px}.admin-header-left{display:flex;align-items:center}.admin-header-right{display:flex;align-items:center;gap:16px}.admin-logo h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.admin-theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;font-size:20px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.admin-theme-toggle:hover{background:var(--bg-secondary);transform:translateY(-1px);box-shadow:var(--shadow-md)}.back-button{display:flex;align-items:center;gap:8px;background:transparent;border:2px solid var(--accent-color);color:var(--accent-color);padding:10px 16px;border-radius:8px;font-weight:500;cursor:pointer;transition:all .3s ease;font-size:14px}.back-button:hover{background:var(--accent-color);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.admin-user-info{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-color);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.user-details{display:flex;flex-direction:column;gap:2px}.user-name{font-size:14px;font-weight:600;color:var(--text-primary)}.user-role{font-size:12px;color:var(--text-secondary)}.admin-container{display:flex;flex:1;min-height:0;position:relative;margin-top:80px}.sidebar-trigger{position:absolute;left:0;top:0;width:30px;height:100%;z-index:10;cursor:pointer;transition:background .2s ease}.sidebar-trigger:hover{background:linear-gradient(to right,#3b82f666,#3b82f60d);border-right:2px solid rgba(59,130,246,.6)}.sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:50;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:none}.admin-sidebar{position:absolute;left:-280px;top:0;width:280px;height:100%;background:var(--bg-card);border-right:2px solid var(--border-color);padding:24px 0;overflow-y:auto;box-shadow:4px 0 20px #00000026;transition:left .3s ease;z-index:1002;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-sidebar.visible{left:0}.sidebar-nav{display:flex;flex-direction:column;gap:8px;padding:0 16px}.nav-module{display:flex;flex-direction:column}.nav-item{display:flex;align-items:center;gap:12px;padding:16px;background:transparent;border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;color:var(--text-secondary);text-align:left;width:100%;position:relative}.nav-item:hover{background:var(--bg-secondary);color:var(--text-primary);transform:translate(4px)}.nav-item.active{background:var(--accent-color);color:#fff;transform:translate(4px)}.nav-item.active .nav-description{color:#fffc}.nav-item.expandable{border-bottom:1px solid var(--border-color);border-radius:12px 12px 0 0}.nav-item.expandable:hover{background:var(--bg-secondary)}.nav-expand-icon{font-size:12px;transition:transform .2s ease;color:var(--text-secondary)}.nav-expand-icon.expanded{transform:rotate(180deg)}.nav-subitems{background:var(--bg-secondary);border-radius:0 0 12px 12px;padding:8px 0;margin-bottom:8px;border:1px solid var(--border-color);border-top:none}.nav-subitem{display:flex;align-items:center;gap:12px;padding:12px 20px;background:transparent;border:none;cursor:pointer;transition:all .2s ease;color:var(--text-secondary);text-align:left;width:100%;margin-left:16px;border-radius:8px}.nav-subitem:hover{background:var(--bg-primary);color:var(--text-primary);transform:translate(4px)}.nav-subitem.active{background:var(--accent-color);color:#fff;transform:translate(4px)}.nav-subitem.active .nav-description{color:#fffc}.nav-icon{font-size:20px;min-width:24px}.nav-content{flex:1}.nav-label{font-size:14px;font-weight:600;margin-bottom:4px}.nav-description{font-size:12px;color:var(--text-secondary);line-height:1.3}.admin-main{width:100%;background:var(--bg-primary);overflow-y:auto}.dashboard-content{padding:24px;max-width:1200px;margin:0 auto}.dashboard-header{margin-bottom:32px}.dashboard-header h2{font-size:28px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.dashboard-header p{font-size:16px;color:var(--text-secondary);margin:0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;display:flex;align-items:center;gap:16px;transition:all .3s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.stat-icon{font-size:28px;padding:16px;background:linear-gradient(135deg,var(--accent-color),var(--primary-color));border-radius:12px;color:#fff;box-shadow:var(--shadow-sm)}.stat-content h3{font-size:14px;font-weight:500;color:var(--text-secondary);margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.stat-number{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 4px;line-height:1}.stat-change{font-size:12px;font-weight:500;padding:4px 8px;border-radius:6px;display:inline-block}.stat-change.positive{color:var(--success-color);background:#10b9811a}.stat-change.negative{color:var(--error-color);background:#ef44441a}.dashboard-charts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}.chart-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;transition:all .3s ease}.chart-container:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.chart-container h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 20px}.chart-placeholder{height:200px;display:flex;align-items:center;justify-content:center}.chart-bars{display:flex;align-items:end;gap:12px;height:160px;width:100%;padding:0 20px}.bar{flex:1;background:linear-gradient(180deg,var(--accent-color),var(--primary-color));border-radius:6px 6px 0 0;display:flex;align-items:end;justify-content:center;padding-bottom:8px;color:#fff;font-size:12px;font-weight:600;transition:all .3s ease;min-height:20px}.bar:hover{background:linear-gradient(180deg,var(--accent-color-hover),var(--primary-color-hover));transform:scale(1.05)}.bar span{writing-mode:vertical-rl;text-orientation:mixed}.performance-chart{display:flex;flex-direction:column;gap:16px;width:100%}.performance-bar{display:flex;align-items:center;gap:12px}.performance-bar .label{width:70px;font-size:14px;font-weight:600;color:var(--text-primary)}.bar-bg{flex:1;height:24px;background:var(--bg-secondary);border-radius:12px;overflow:hidden;border:1px solid var(--border-color)}.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),var(--primary-color));border-radius:12px;transition:width .6s ease;position:relative}.performance-bar .value{width:50px;text-align:right;font-size:14px;font-weight:600;color:var(--text-primary)}.recent-activity{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.recent-activity h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 20px}.activity-list{display:flex;flex-direction:column;gap:16px}.activity-item{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-secondary);border-radius:12px;border:1px solid var(--border-color);transition:all .2s ease}.activity-item:hover{transform:translate(4px);border-color:var(--accent-color)}.activity-icon{font-size:18px;padding:12px;background:linear-gradient(135deg,var(--accent-color),var(--primary-color));border-radius:10px;color:#fff;min-width:42px;height:42px;display:flex;align-items:center;justify-content:center}.activity-content{flex:1}.activity-content p{margin:0 0 4px;color:var(--text-primary);font-size:14px;line-height:1.4}.activity-time{font-size:12px;color:var(--text-secondary);font-weight:500}.admin-section{padding:24px;max-width:1200px;margin:0 auto}.section-header{margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid var(--border-color)}.section-header h2{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.section-header p{font-size:16px;color:var(--text-secondary);margin:0}.access-denied{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:48px 24px;background:var(--bg-primary)}.denied-icon{font-size:64px;margin-bottom:24px;opacity:.8}.access-denied h2{font-size:28px;font-weight:700;color:var(--text-primary);margin:0 0 16px}.access-denied p{font-size:16px;color:var(--text-secondary);margin:0 0 32px;max-width:400px}.back-home-button{background:var(--accent-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.back-home-button:hover{background:var(--accent-color-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;background:var(--bg-card);border-radius:16px;border:1px solid var(--border-color);margin:20px auto;max-width:600px}.empty-icon{font-size:48px;margin-bottom:20px;opacity:.7}.empty-state h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:0 0 12px}.empty-state p{font-size:16px;color:var(--text-secondary);margin:0;line-height:1.5}.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;background:var(--bg-card);border-radius:16px;border:1px solid var(--border-color);max-width:500px;margin:20px auto}.coming-soon-icon{font-size:48px;margin-bottom:20px;opacity:.7}.coming-soon h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 10px}.coming-soon p{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.5}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:24px}.analytics-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:24px;text-align:center;transition:all .3s ease}.analytics-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-color)}.analytics-icon{font-size:32px;margin-bottom:16px}.analytics-card h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.analytics-card p{font-size:14px;color:var(--text-secondary);margin:0 0 16px}.analytics-value{font-size:14px;font-weight:600;color:var(--accent-color);padding:8px 16px;background:var(--bg-secondary);border-radius:6px;display:inline-block}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px;margin-top:24px}.settings-group{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px}.settings-group h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.settings-item{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border-color)}.settings-item:last-child{border-bottom:none}.settings-item label{font-size:14px;color:var(--text-primary);font-weight:500}.settings-value{font-size:14px;color:var(--accent-color);font-weight:600;padding:6px 12px;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color)}[data-theme=dark] .admin-page{background:linear-gradient(135deg,var(--bg-primary-dark) 0%,var(--bg-secondary-dark) 100%)}[data-theme=dark] .admin-header,[data-theme=dark] .admin-sidebar,[data-theme=dark] .stat-card,[data-theme=dark] .chart-container,[data-theme=dark] .recent-activity,[data-theme=dark] .coming-soon,[data-theme=dark] .analytics-card,[data-theme=dark] .settings-group{background:var(--bg-card-dark);border-color:var(--border-color-dark)}[data-theme=dark] .admin-user-info,[data-theme=dark] .activity-item{background:var(--bg-secondary-dark);border-color:var(--border-color-dark)}[data-theme=dark] .nav-item:hover,[data-theme=dark] .settings-value,[data-theme=dark] .analytics-value{background:var(--bg-secondary-dark)}[data-theme=dark] .bar-bg{background:var(--bg-secondary-dark);border-color:var(--border-color-dark)}@media (max-width: 1024px){.dashboard-charts{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media (max-width: 768px){.admin-container{flex-direction:column}.sidebar-trigger{width:40px;height:80px;left:0;top:0}.sidebar-overlay{display:block}.admin-sidebar{position:fixed;left:-100%;top:0;width:80%;height:100vh;background:var(--bg-card);border-right:none;border-bottom:1px solid var(--border-color);padding:16px 0;transition:left .3s ease;z-index:1002;box-shadow:4px 0 20px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-sidebar.visible{left:0}.sidebar-nav{flex-direction:column;overflow-y:auto;padding:0 16px;gap:8px}.nav-item{flex-shrink:0;min-width:140px;padding:12px}.admin-header{flex-direction:column;gap:16px;align-items:flex-start}.admin-user-info{align-self:stretch}.dashboard-content,.admin-section{padding:16px}.stats-grid,.dashboard-charts,.analytics-grid,.settings-grid{grid-template-columns:1fr}}@media (max-width: 480px){.admin-header{padding:16px}.user-details,.nav-content{display:none}.nav-item{min-width:auto;padding:12px;justify-content:center}.stat-card{padding:16px;gap:12px}.stat-icon{padding:12px;font-size:20px}.stat-number{font-size:24px}.chart-container,.recent-activity{padding:16px}}.user-privileges-section{padding:24px;max-width:1200px;margin:0 auto;position:relative}.search-section{margin-bottom:32px}.search-box{display:flex;gap:12px;max-width:500px}.search-input{flex:1;padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;font-size:14px;background:var(--bg-card);color:var(--text-primary);transition:all .3s ease}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.search-button{padding:12px 24px;background:var(--accent-color);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.search-button:hover{background:var(--accent-color-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.search-button:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none}.error-message{padding:12px 16px;background:#ef44441a;border:1px solid var(--error-color);border-radius:8px;color:var(--error-color);margin-bottom:24px;font-size:14px}.privileges-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;margin-bottom:24px}.privileges-section h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:0 0 24px;padding-bottom:16px;border-bottom:2px solid var(--border-color)}.current-privileges h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 24px}.privilege-group{margin-bottom:32px}.privilege-group-title{font-size:18px;font-weight:700;margin:0 0 16px;padding:14px 20px;color:#fff;border-radius:10px;text-align:center;box-shadow:var(--shadow-md);text-transform:uppercase;letter-spacing:1px;border:2px solid rgba(255,255,255,.2)}.privilege-group-title[data-module=reading]{background:linear-gradient(135deg,#3498db,#2980b9)}.privilege-group-title[data-module=listening]{background:linear-gradient(135deg,#27ae60,#229954)}.privilege-group-title[data-module=writing]{background:linear-gradient(135deg,#f39c12,#e67e22)}.privilege-group-title[data-module=speaking]{background:linear-gradient(135deg,#9b59b6,#8e44ad)}.privilege-group-title[data-module=system]{background:linear-gradient(135deg,#e74c3c,#c0392b)}.privileges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:24px}.privilege-item{background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;padding:18px;transition:all .3s ease;position:relative;box-shadow:var(--shadow-sm)}.privilege-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.privilege-item.updated{border-color:var(--success-color);background:#10b9810d}.privilege-item.deleted{border-color:var(--error-color);background:#ef44440d;opacity:.7}.privilege-item.has-privilege{border-left:4px solid #3498db}.privilege-item.active-privilege{background:linear-gradient(135deg,#27ae6014,#2ecc710d);border-left:4px solid #27ae60;box-shadow:0 2px 8px #27ae6026}.privilege-item.expired-privilege{background:linear-gradient(135deg,#e74c3c14,#c0392b0d);border-left:4px solid #e74c3c;box-shadow:0 2px 8px #e74c3c26}.privilege-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.privilege-name-container{display:flex;align-items:center;gap:8px}.privilege-name{font-size:15px;font-weight:700;color:var(--accent-color)}.privilege-status{font-size:16px;font-weight:700;padding:2px 6px;border-radius:50%;min-width:20px;text-align:center;line-height:1}.privilege-status.active{color:#27ae60;background:#27ae601a}.privilege-status.expired{color:#e74c3c;background:#e74c3c1a}.privilege-id{font-size:12px;color:var(--text-secondary);background:var(--bg-primary);padding:4px 8px;border-radius:4px;font-weight:500}.privilege-description{font-size:13px;color:var(--text-primary);margin-bottom:12px;font-weight:500}.privilege-details{display:flex;flex-direction:column;gap:12px}.privilege-info{display:flex;flex-direction:column;gap:4px}.privilege-info div{font-size:13px;color:var(--text-primary);line-height:1.4;font-weight:500}.expires-time{font-weight:700;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.1)}.expires-time.active{color:#27ae60}.expires-time.expired{color:#e74c3c}.privilege-actions{display:flex;gap:8px}.privilege-select{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-card);color:var(--text-primary);font-size:12px;cursor:pointer;transition:all .3s ease}.privilege-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #3b82f61a}.remove-change-btn{padding:6px 12px;background:var(--error-color);color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .3s ease;margin-top:8px}.remove-change-btn:hover{background:var(--error-color-hover);transform:translateY(-1px)}.changes-summary{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:20px;margin-top:24px}.changes-summary h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 16px}.changes-list{margin-bottom:16px}.changes-list strong{display:block;margin-bottom:8px;color:var(--text-primary);font-size:14px}.change-item{display:inline-block;padding:4px 12px;margin:4px 8px 4px 0;background:var(--success-color);color:#fff;border-radius:6px;font-size:12px;font-weight:500}.change-item.delete{background:var(--error-color)}.apply-changes-btn{width:100%;padding:12px 24px;background:var(--accent-color);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:14px}.apply-changes-btn:hover{background:var(--success-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.apply-changes-btn:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none}[data-theme=dark] .user-privileges-section .search-input,[data-theme=dark] .user-privileges-section .privilege-select,[data-theme=dark] .user-privileges-section .privileges-section,[data-theme=dark] .user-privileges-section .privilege-item{background:var(--bg-card-dark);border-color:var(--border-color-dark)}[data-theme=dark] .privilege-name{color:var(--accent-color)}[data-theme=dark] .privilege-description,[data-theme=dark] .privilege-info div{color:#ffffffe6}[data-theme=dark] .user-privileges-section .privilege-id{background:var(--bg-primary-dark)}[data-theme=dark] .user-privileges-section .changes-summary{background:var(--bg-primary-dark);border-color:var(--border-color-dark)}@media (max-width: 768px){.search-box{flex-direction:column;max-width:100%}.privileges-grid{grid-template-columns:1fr}.privilege-actions{flex-direction:column}.user-privileges-section{padding:16px}}@media (max-width: 480px){.privileges-section{padding:16px}.privilege-item{padding:12px}.changes-summary{padding:16px}}.notification{position:fixed;top:20px;right:20px;z-index:10000;border-radius:8px;box-shadow:0 4px 12px #00000026;animation:slideInRight .3s ease;max-width:400px;min-width:250px}.notification.success{background:#10b981;color:#fff}.notification.error{background:#ef4444;color:#fff}.notification-content{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:12px}.notification-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:0;line-height:1;opacity:.8;transition:opacity .3s ease}.notification-close:hover{opacity:1}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.custom-time-modal{background:var(--bg-card);border-radius:16px;padding:24px;max-width:400px;width:90%;box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.custom-time-modal h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 16px;text-align:center}.custom-time-modal p{font-size:14px;color:var(--text-secondary);margin:0 0 20px;text-align:center}.datetime-input-group{margin-bottom:20px}.datetime-input-group label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.datetime-input{width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:8px;font-size:14px;background:var(--bg-secondary);color:var(--text-primary);transition:all .3s ease}.datetime-input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #3b82f61a}.modal-actions{display:flex;justify-content:center;gap:12px}.cancel-btn{padding:10px 20px;background:var(--text-secondary);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px}.cancel-btn:hover{background:var(--text-primary);transform:translateY(-1px)}.confirm-btn{padding:10px 20px;background:var(--success-color);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:600}.confirm-btn:hover:not(:disabled){background:#27ae60;transform:translateY(-1px)}.confirm-btn:disabled{background:var(--text-secondary);cursor:not-allowed;transform:none}.time-preview{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;padding:12px;margin-bottom:16px}.time-preview p{margin:0 0 8px;font-size:14px;color:var(--text-primary)}.time-preview .preview-time{margin:0}.privilege-highlight{color:var(--accent-color);font-weight:700}[data-theme=dark] .custom-time-modal{background:var(--bg-card-dark);border-color:var(--border-color-dark)}[data-theme=dark] .datetime-input,[data-theme=dark] .time-preview{background:var(--bg-secondary-dark);border-color:var(--border-color-dark)}[data-theme=dark] .expires-time.active{color:#2ecc71}[data-theme=dark] .expires-time.expired{color:#ff6b6b}.admin-user-email{display:flex;align-items:center;padding:8px 16px;background:#3182ce1a;border:1px solid rgba(49,130,206,.2);border-radius:8px}.admin-user-email-text{font-size:14px;font-weight:500;color:var(--accent-color);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.admin-user-email{max-width:220px;padding:6px 12px}.admin-user-email-text{font-size:13px;max-width:200px}}@media (max-width: 480px){.admin-user-email{max-width:160px;padding:4px 8px}.admin-user-email-text{font-size:12px;max-width:140px}}[data-theme=dark]{--bg-primary: #1a202c;--bg-secondary: #2d3748;--bg-card: #2d3748;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-muted: #a0aec0;--border-color: #4a5568;--accent-color: #4299e1;--accent-hover: #3182ce;--success-color: #48bb78;--error-color: #f56565;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2)}html,body,#root{margin:0;padding:0;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-card: #ffffff;--text-primary: #1a202c;--text-secondary: #4a5568;--text-muted: #718096;--border-color: #e2e8f0;--accent-color: #3182ce;--accent-hover: #2c5aa0;--success-color: #38a169;--error-color: #e53e3e;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}[data-theme=dark]{--bg-primary: #1a202c;--bg-secondary: #2d3748;--bg-card: #2d3748;--bg-primary-dark: #1a202c;--bg-secondary-dark: #2d3748;--bg-card-dark: #2d3748;--text-primary: #f7fafc;--text-secondary: #e2e8f0;--text-muted: #a0aec0;--border-color: #4a5568;--border-color-dark: #4a5568;--accent-color: #4299e1;--accent-hover: #3182ce;--success-color: #48bb78;--error-color: #f56565;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .2)}*{box-sizing:border-box}.test-list-page{min-height:100vh;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);padding:20px;transition:all .3s ease}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding:0 8px}.header h1{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin:0;background:linear-gradient(135deg,var(--accent-color),var(--success-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.back-button{display:flex;align-items:center;gap:8px;background:var(--bg-card);color:var(--text-secondary);border:2px solid var(--border-color);padding:12px 20px;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.back-button:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.theme-toggle{background:var(--bg-card);border:2px solid var(--border-color);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm)}.theme-toggle:hover{transform:rotate(180deg) scale(1.1);box-shadow:var(--shadow-md)}.test-list{display:flex;flex-direction:column;gap:20px;margin-bottom:40px;max-width:1200px;margin-left:auto;margin-right:auto}.test-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:16px;padding:24px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);transition:all .3s ease;animation:slideInUp .5s ease forwards;opacity:0;transform:translateY(20px)}@keyframes slideInUp{to{opacity:1;transform:translateY(0)}}.test-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-color)}.test-content{flex:1}.test-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.test-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin:0}.test-badge{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:500}.test-meta,.question-types{display:flex;flex-direction:column;gap:8px}.types-label{font-size:14px;font-weight:500;color:var(--text-muted)}.types-list{display:flex;flex-wrap:wrap;gap:8px}.type-tag{background:var(--bg-secondary);color:var(--text-secondary);padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500;border:1px solid var(--border-color)}.start-test-button{background:linear-gradient(135deg,var(--accent-color),var(--success-color));color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:var(--shadow-sm)}.start-test-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.1)}.button-arrow{transition:transform .3s ease}.start-test-button:hover .button-arrow{transform:translate(4px)}.pagination{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:40px}.pagination-button{background:var(--bg-card);color:var(--text-secondary);border:2px solid var(--border-color);padding:12px 24px;border-radius:12px;font-size:16px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:var(--shadow-sm)}.pagination-button:hover:not(:disabled){background:var(--accent-color);color:#fff;border-color:var(--accent-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.pagination-button:disabled{opacity:.5;cursor:not-allowed}.page-info{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg-card);border:2px solid var(--border-color);border-radius:12px;font-weight:500;color:var(--text-secondary);box-shadow:var(--shadow-sm)}.page-number{background:var(--accent-color);color:#fff;padding:4px 12px;border-radius:8px;font-weight:600}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px}.loading-spinner{width:50px;height:50px;border:4px solid var(--border-color);border-top:4px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite}.loading-container p{font-size:18px;color:var(--text-secondary);font-weight:500}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px}.error-icon{font-size:48px}.error-container p{font-size:18px;color:var(--error-color);font-weight:500;text-align:center}.retry-button{background:var(--error-color);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.retry-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.1)}@media (max-width: 768px){.test-list-page{padding:16px}.header{flex-direction:column;gap:16px;text-align:center}.header h1{font-size:2rem}.test-card{flex-direction:column;gap:20px;text-align:center}.test-header{flex-direction:column;gap:12px}.types-list{justify-content:center}.pagination{flex-direction:column;gap:16px}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-slide-up{animation:slideInUp .5s ease forwards}.animate-slide-down{animation:slideInDown .5s ease forwards}.animate-slide-left{animation:slideInLeft .5s ease forwards}.animate-slide-right{animation:slideInRight .5s ease forwards}.animate-fade-in{animation:fadeIn .5s ease forwards}.animate-pulse{animation:pulse 2s infinite}.hover-lift{transition:transform .3s ease}.hover-lift:hover{transform:translateY(-2px)}.hover-scale{transition:transform .3s ease}.hover-scale:hover{transform:scale(1.05)}.loading-dots{display:inline-block}.loading-dots:after{content:"";animation:loadingDots 1.5s steps(4,end) infinite}@keyframes loadingDots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.app{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);transition:all .3s ease}#root{margin:0;padding:0}html{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar{display:none}body{scrollbar-width:none;-ms-overflow-style:none}body::-webkit-scrollbar{display:none}button:focus,input:focus,textarea:focus,select:focus{outline:2px solid var(--accent-color);outline-offset:2px}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}