@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap";:root{--color-bg-primary: #fefdf8;--color-bg-secondary: #fffef5;--color-bg-tertiary: #fef3c7;--color-bg-card: #ffffff;--color-bg-hover: #fef9e7;--color-accent-primary: #f97316;--color-accent-secondary: #fb923c;--color-accent-tertiary: #fdba74;--color-accent-glow: rgba(249, 115, 22, .25);--color-purple: #a855f7;--color-pink: #ec4899;--color-teal: #14b8a6;--color-success: #22c55e;--color-success-bg: rgba(34, 197, 94, .15);--color-error: #ef4444;--color-error-bg: rgba(239, 68, 68, .12);--color-warning: #eab308;--color-warning-bg: rgba(234, 179, 8, .15);--color-text-primary: #1e293b;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-border: #e2e8f0;--color-border-light: #f1f5f9;--gradient-sunshine: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);--gradient-rainbow: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #e0e7ff 100%);--gradient-card: linear-gradient(145deg, #ffffff 0%, #fefce8 100%);--font-primary: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.25rem;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .04);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .04);--shadow-glow: 0 0 25px var(--color-accent-glow);--shadow-card: 0 4px 20px rgba(249, 115, 22, .08), 0 2px 8px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--transition-bounce: .4s cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-primary);background:var(--gradient-rainbow);background-attachment:fixed;color:var(--color-text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--color-text-primary)}h1{font-size:2.25rem;font-weight:800}h2{font-size:1.75rem;font-weight:700}h3{font-size:1.375rem;font-weight:700}h4{font-size:1.125rem;font-weight:600}p{color:var(--color-text-secondary)}a{color:var(--color-accent-primary);text-decoration:none;transition:all var(--transition-fast);font-weight:600}a:hover{color:var(--color-accent-secondary);text-decoration:underline}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:var(--spacing-md);background:var(--gradient-sunshine)}.spinner{width:48px;height:48px;border:4px solid var(--color-accent-tertiary);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen p{color:var(--color-accent-primary);font-weight:600;font-size:1.1rem}.layout{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,#fff,#fff7ed);border-bottom:2px solid var(--color-accent-tertiary);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px #f973161a}.header-logo{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header-logo svg{width:32px;height:32px;stroke:var(--color-accent-primary)}.header-user{display:flex;align-items:center;gap:var(--spacing-md)}.header-user-info{text-align:right}.header-user-name{font-weight:500;font-size:.9rem}.header-user-role{font-size:.75rem;color:var(--color-accent-primary);text-transform:capitalize;font-weight:600}.main-content{flex:1;padding:var(--spacing-xl);max-width:1400px;width:100%;margin:0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);font-family:var(--font-primary);font-size:.95rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-bounce);text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:#fff;box-shadow:0 4px 15px #f973164d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f9731666}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:#fff;color:var(--color-text-primary);border:2px solid var(--color-border)}.btn-secondary:hover:not(:disabled){border-color:var(--color-accent-primary);color:var(--color-accent-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-danger{background:linear-gradient(135deg,#ef4444,#f87171);color:#fff;box-shadow:0 4px 15px #ef44444d}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ef444466}.btn-success{background:linear-gradient(135deg,#22c55e,#4ade80);color:#fff;box-shadow:0 4px 15px #22c55e4d}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #22c55e66}.btn-icon{padding:var(--spacing-sm);background:#fff;color:var(--color-text-secondary);border:2px solid var(--color-border)}.btn-icon:hover:not(:disabled){color:var(--color-accent-primary);border-color:var(--color-accent-primary);transform:scale(1.05)}.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:1.1rem}.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:.85rem}.form-group{margin-bottom:var(--spacing-md)}.form-label{display:block;margin-bottom:var(--spacing-xs);font-weight:600;font-size:.9rem;color:var(--color-text-secondary)}.form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-primary);font-size:1rem;color:var(--color-text-primary);background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:0 0 0 4px var(--color-accent-glow)}.form-input::placeholder{color:var(--color-text-muted)}.form-textarea{min-height:100px;resize:vertical}.form-error{margin-top:var(--spacing-xs);font-size:.85rem;font-weight:500;color:var(--color-error)}.card{background:var(--gradient-card);border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);transition:all var(--transition-bounce);box-shadow:var(--shadow-card)}.card:hover{border-color:var(--color-accent-tertiary);transform:translateY(-4px);box-shadow:0 8px 30px #f973161f}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md)}.card-title{font-size:1.15rem;font-weight:700;color:var(--color-text-primary)}.card-description{font-size:.9rem;color:var(--color-text-muted);margin-top:var(--spacing-xs)}.card-actions{display:flex;gap:var(--spacing-sm)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.page-title{font-size:1.85rem;font-weight:800;background:linear-gradient(135deg,var(--color-text-primary),var(--color-accent-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{color:var(--color-text-muted);font-size:1rem;font-weight:500;margin-top:var(--spacing-xs)}.grid{display:grid;gap:var(--spacing-lg)}.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.grid-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.table-container{overflow-x:auto;border-radius:var(--radius-xl);border:2px solid var(--color-border);background:#fff;box-shadow:var(--shadow-sm)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:var(--spacing-md);text-align:left;border-bottom:1px solid var(--color-border)}.table th{background:linear-gradient(135deg,#fff7ed,#fef3c7);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent-primary)}.table tr:hover td{background:var(--color-bg-hover)}.table tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);font-size:.75rem;font-weight:700;border-radius:var(--radius-full);text-transform:capitalize}.badge-success{background:linear-gradient(135deg,#22c55e33,#4ade8033);color:#16a34a;border:1px solid rgba(34,197,94,.3)}.badge-error{background:linear-gradient(135deg,#ef444426,#f8717126);color:#dc2626;border:1px solid rgba(239,68,68,.3)}.badge-warning{background:linear-gradient(135deg,#eab30833,#facc1533);color:#ca8a04;border:1px solid rgba(234,179,8,.3)}.badge-info{background:linear-gradient(135deg,#f9731626,#fb923c26);color:var(--color-accent-primary);border:1px solid rgba(249,115,22,.3)}.modal-overlay{position:fixed;inset:0;background:#1e293b80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:1000;animation:fadeIn .15s ease}.modal{background:#fff;border:2px solid var(--color-accent-tertiary);border-radius:var(--radius-xl);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s var(--transition-bounce);box-shadow:0 25px 50px #00000026}.modal-header{padding:var(--spacing-lg);border-bottom:2px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#fff7ed,#fefce8)}.modal-title{font-size:1.25rem;font-weight:700;color:var(--color-accent-primary)}.modal-body{padding:var(--spacing-lg)}.modal-footer{padding:var(--spacing-lg);border-top:2px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--spacing-sm);background:var(--color-bg-secondary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.empty-state{text-align:center;padding:var(--spacing-2xl);color:var(--color-text-muted);background:var(--gradient-card);border-radius:var(--radius-xl);border:2px dashed var(--color-border)}.empty-state-icon{font-size:3.5rem;margin-bottom:var(--spacing-md);opacity:.6}.tabs{display:flex;gap:var(--spacing-sm);border-bottom:2px solid var(--color-border);margin-bottom:var(--spacing-lg);overflow-x:auto;background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--spacing-xs) var(--spacing-xs) 0}.tab{padding:var(--spacing-md) var(--spacing-lg);font-weight:600;color:var(--color-text-muted);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border-radius:var(--radius-md) var(--radius-md) 0 0}.tab:hover{color:var(--color-accent-primary);background:#f973160d}.tab.active{color:var(--color-accent-primary);border-bottom-color:var(--color-accent-primary);background:#f9731614}.voice-indicator{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#fff;border:2px solid var(--color-border);border-radius:var(--radius-full);font-size:.85rem;font-weight:600}.voice-indicator.listening{background:linear-gradient(135deg,#ef44441a,#f8717126);border-color:var(--color-error);color:var(--color-error)}.voice-indicator.listening .voice-dot{background:var(--color-error);animation:pulse 1s infinite}.voice-dot{width:10px;height:10px;background:var(--color-text-muted);border-radius:50%}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}.spelling-display{font-family:var(--font-mono);font-size:2.5rem;letter-spacing:.2em;text-align:center;padding:var(--spacing-xl);background:#fff;border-radius:var(--radius-xl);min-height:100px;display:flex;align-items:center;justify-content:center;border:3px solid var(--color-border);transition:all var(--transition-bounce);box-shadow:var(--shadow-md)}.spelling-display.correct{border-color:var(--color-success);background:linear-gradient(135deg,#22c55e1a,#4ade8026);animation:correctBounce .5s ease}.spelling-display.incorrect{border-color:var(--color-error);background:linear-gradient(135deg,#ef44441a,#f8717126);animation:shake .5s ease}@keyframes correctBounce{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.progress-bar{width:100%;height:12px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-accent-primary),var(--color-accent-secondary),var(--color-warning));border-radius:var(--radius-full);transition:width var(--transition-normal);box-shadow:0 2px 8px #f9731666}.score-display{text-align:center;padding:var(--spacing-xl);background:var(--gradient-card);border-radius:var(--radius-xl);border:2px solid var(--color-border)}.score-value{font-size:4.5rem;font-weight:800;background:linear-gradient(135deg,var(--color-accent-primary),var(--color-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.score-label{font-size:1.1rem;font-weight:600;color:var(--color-text-muted)}.droppable-area{min-height:60px;padding:var(--spacing-md);background:#fff;border:3px dashed var(--color-border);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.droppable-area.over{border-color:var(--color-accent-primary);background:linear-gradient(135deg,#f973160d,#fb923c1a);transform:scale(1.01)}.draggable-item{padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,var(--color-accent-primary),var(--color-accent-secondary));color:#fff;border-radius:var(--radius-full);cursor:grab;font-weight:600;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:0 3px 10px #f973164d;transition:all var(--transition-fast)}.draggable-item:hover{transform:scale(1.05);box-shadow:0 5px 15px #f9731666}.draggable-item:active{cursor:grabbing;transform:scale(1.1)}.draggable-item.dragging{opacity:.6}.checkbox-group{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.checkbox{width:22px;height:22px;accent-color:var(--color-accent-primary);cursor:pointer;border-radius:var(--radius-sm)}.alert{padding:var(--spacing-md);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);font-weight:500}.alert-error{background:linear-gradient(135deg,#ef44441a,#f8717126);border:2px solid var(--color-error);color:#dc2626}.alert-success{background:linear-gradient(135deg,#22c55e1a,#4ade8026);border:2px solid var(--color-success);color:#16a34a}.test-section{margin-bottom:var(--spacing-2xl)}.test-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.test-section-title{font-size:1.3rem;font-weight:700;color:var(--color-accent-primary)}.word-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.word-item{display:flex;gap:var(--spacing-sm);align-items:flex-start;padding:var(--spacing-sm);background:#ffffffb3;border-radius:var(--radius-lg);transition:all var(--transition-fast)}.word-item:hover{background:#fff;box-shadow:var(--shadow-sm)}.word-item .form-input{flex:1}@media(max-width:768px){html{font-size:14px}.header{padding:var(--spacing-sm) var(--spacing-md)}.main-content{padding:var(--spacing-md)}.page-header{flex-direction:column;align-items:flex-start}.spelling-display{font-size:1.75rem;padding:var(--spacing-md)}.modal{margin:var(--spacing-sm)}.tabs{gap:0}.tab{padding:var(--spacing-sm) var(--spacing-md);flex:1;text-align:center}.table th,.table td{padding:var(--spacing-sm)}h1{font-size:1.75rem}h2{font-size:1.5rem}}@media(max-width:480px){.btn,.page-header .btn{width:100%}.card-actions{flex-direction:column;width:100%}.card-actions .btn{width:100%}}.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.w-full{width:100%}