@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap";@font-face{font-family:Nasalization;src:url(/assets/nasalization-DGCqGoiX.woff2)format("woff2");font-display:swap}:root{--bg-main:#0b0c10;--bg-sidebar:#111219d9;--bg-panel:#161823b3;--bg-card:#1e213080;--border-color:#ffffff0f;--border-color-active:#f3c2b166;--border-color-pink:#eea89d73;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-pink:#eea89d;--accent-purple:#f3c2b1;--accent-green:#34d399;--glow-shadow:0 0 20px #f3c2b126;--glow-shadow-pink:0 0 20px #eea89d26;--glass-blur:blur(16px);--font-ui:"Outfit", "Inter", sans-serif;--font-fancy:"Playfair Display", serif}[data-theme=light]{--bg-main:#f5f4f0;--bg-sidebar:#f0ede6d9;--bg-panel:#fffc;--bg-card:#fffffff2;--border-color:#00000014;--border-color-active:#f3c2b159;--border-color-pink:#eea89d73;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--accent-pink:#eea89d;--accent-purple:#f3c2b1;--accent-green:#059669;--glow-shadow:0 0 20px #f3c2b11f;--glow-shadow-pink:0 0 20px #eea89d1f}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);background-color:var(--bg-main);color:var(--text-primary);justify-content:center;min-height:100vh;transition:background-color .3s,color .3s;display:flex;overflow-x:hidden}#root{justify-content:center;width:100%;display:flex}.spinner{border:2px solid #ffffff1a;border-top-color:var(--accent-purple);border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.global-spinner{border-width:3px;width:48px;height:48px}.study-container{z-index:10;flex-direction:column;gap:2rem;width:100%;max-width:1600px;padding:2.5rem 1.5rem;display:flex}.study-header{border-bottom:1px solid var(--border-color);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding-bottom:1.5rem;display:flex}.study-title-area h1{font-family:"Nasalization", var(--font-ui);letter-spacing:.05em;text-transform:uppercase;font-size:2.2rem;font-weight:700}.controls-bar{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.token-panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;align-items:center;gap:16px;padding:8px 16px;font-size:.85rem;display:flex;box-shadow:0 4px 12px #0000000d}.token-stat{flex-direction:column;display:flex}.token-lbl{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;font-weight:600}.token-val{font-family:monospace;font-weight:700}.token-saved{color:var(--accent-green)}.token-used{color:var(--accent-pink)}.ai-toggle-wrapper{background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;align-items:center;gap:8px;padding:6px 12px;display:flex}.toggle-switch{width:42px;height:22px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:var(--text-muted);border-radius:34px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:3px}input:checked+.toggle-slider{background-color:var(--accent-purple);box-shadow:var(--glow-shadow)}input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-lbl{text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600}.bento-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}@media (width<=900px){.bento-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=600px){.bento-grid{grid-template-columns:1fr}}.bento-card{background:var(--bg-panel);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:14px;flex-direction:column;justify-content:space-between;gap:1.25rem;padding:1.5rem;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex}.bento-card:hover{border-color:var(--border-color-active);box-shadow:var(--glow-shadow);transform:translateY(-2px)}.bento-card-title{color:var(--text-primary);align-items:center;gap:10px;font-size:1.25rem;font-weight:700;display:flex}.card-icon{color:var(--accent-purple)}.bento-card-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:4px;width:fit-content;padding:3px 8px;font-size:.65rem;font-weight:700;display:inline-block}.badge-lang{color:var(--accent-pink);background:#ffa6d21a;border:1px solid #ffa6d233}.badge-it{color:var(--accent-purple);background:#a78bfa1a;border:1px solid #a78bfa33}.badge-custom{color:var(--accent-green);background:#34d3991a;border:1px solid #34d39933}.player-container{flex-direction:column;align-items:center;gap:2rem;padding:1rem 0;display:flex}.card-flip-wrapper{perspective:1000px;cursor:pointer;width:100%;max-width:480px;height:280px}.card-flip-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.175,.885,.32,1.275);position:relative}.card-flip-wrapper.flipped .card-flip-inner{transform:rotateY(180deg)}.card-front,.card-back{backface-visibility:hidden;border:1px solid var(--border-color);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;padding:2rem;display:flex;position:absolute;box-shadow:0 10px 30px #0000001a}.card-front{background:linear-gradient(135deg, var(--bg-panel), #0f121ecc)}.card-back{background:linear-gradient(135deg, #140f23e6, var(--bg-panel));border-color:var(--border-color-active);box-shadow:var(--glow-shadow);transform:rotateY(180deg)}.card-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:.1em;font-size:.7rem;font-weight:700}.card-text{color:var(--text-primary);font-size:1.5rem;font-weight:600}.card-back .card-text{font-size:1.15rem;font-weight:400;line-height:1.6}.editor-form{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:14px;flex-direction:column;gap:1.5rem;padding:2rem;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;font-weight:600}.form-input,.form-select,.form-textarea{border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-ui);background:#0003;border-radius:8px;outline:none;padding:10px 14px;font-size:.9rem;transition:border-color .2s}.form-input:focus,.form-textarea:focus{border-color:var(--border-color-active)}.form-textarea{resize:vertical;min-height:80px}.card-row{align-items:center;gap:12px;display:flex}.card-row input{flex:1}.qcm-options-list{flex-direction:column;gap:10px;width:100%;max-width:600px;margin-top:1rem;display:flex}.qcm-option-btn{background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-ui);text-align:left;cursor:pointer;border-radius:10px;outline:none;padding:14px 18px;font-size:.95rem;transition:all .2s}.qcm-option-btn:hover:not(:disabled){border-color:var(--border-color-active);background:#8b5cf60d}.qcm-option-btn.selected{border-color:var(--border-color-active);box-shadow:var(--glow-shadow);background:#8b5cf61a}.qcm-option-btn.correct{border-color:var(--accent-green);color:var(--text-primary);background:#34d3991f}.qcm-option-btn.wrong{border-color:var(--accent-pink);background:#ffa6d21f}.btn{cursor:pointer;font-size:.9rem;font-weight:600;font-family:var(--font-ui);border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;transition:all .2s;display:inline-flex}.btn-primary{background:var(--accent-purple);color:#fff;box-shadow:var(--glow-shadow)}.btn-primary:hover:not(:disabled){background:#f7d1c2}.btn-secondary{border-color:var(--border-color);color:var(--text-secondary);background:0 0}.btn-secondary:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-secondary)}.btn-danger{color:#ef4444;background:#ef44441a;border-color:#ef444433}.btn-danger:hover{color:#fff;background:#ef4444}.ai-feedback-box{border:1px solid var(--border-color-active);background:#8b5cf60d;border-radius:12px;flex-direction:column;gap:1rem;margin-top:1.5rem;padding:1.5rem;display:flex}.ai-header{color:var(--accent-purple);align-items:center;gap:8px;font-size:.95rem;font-weight:700;display:flex}.ai-grade-badge{background:var(--accent-purple);color:#fff;border-radius:6px;width:fit-content;padding:4px 8px;font-family:monospace;font-size:1.1rem;font-weight:700}.correction-table{border-collapse:collapse;width:100%;margin:10px 0}.correction-table th,.correction-table td{text-align:left;border-bottom:1px solid var(--border-color);padding:8px 12px;font-size:.85rem}.correction-table th{color:var(--text-muted)}.original-err{color:#f43f5e;text-decoration:line-through}.corrected-fix{color:var(--accent-green);font-weight:600}.offline-banner{color:#fff;background:#b45309;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:600;display:flex}.dashboard-layout{gap:24px;width:100%;margin-top:20px;display:flex}.sidebar-menu{background:var(--bg-sidebar);border:1px solid var(--border-color);height:fit-content;-webkit-backdrop-filter:var(--glass-blur);border-radius:12px;flex-direction:column;flex:0 0 240px;align-self:flex-start;gap:6px;padding:16px;display:flex}.sidebar-section-title{text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em;padding:8px 12px 4px;font-size:.75rem;font-weight:700}.sidebar-item{color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 12px;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.sidebar-item:hover{color:var(--text-primary);background:#ffffff08}.sidebar-item.active{border-color:var(--border-color-active);color:var(--accent-purple);background:#f3c2b114;font-weight:600}.sidebar-separator{background:var(--border-color);height:1px;margin:12px 4px}.sidebar-action-btn{justify-content:center;align-items:center;gap:8px;width:100%;margin-top:10px;padding:12px;display:flex}.dashboard-content{flex-direction:column;flex:1;gap:16px;display:flex}.dashboard-content-header{margin-bottom:8px}@media (width<=768px){.dashboard-layout{flex-direction:column;gap:16px}.sidebar-menu{flex:auto;align-self:stretch;width:100%}}