.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.success-modal{background:linear-gradient(135deg,#0a0e27,#16213e);border:2px solid rgba(0,217,255,.5);border-radius:20px;padding:40px;text-align:center;color:#fff;max-width:400px;box-shadow:0 20px 60px #00d9ff4d}.trophy-icon{font-size:80px;margin-bottom:20px;animation:bounce .6s ease-in-out}.success-modal h2{font-size:28px;font-weight:900;margin-bottom:10px;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.success-modal p{font-size:16px;margin-bottom:30px;opacity:.9}.continue-btn{background:linear-gradient(135deg,#00d9ff,#7c3aed);color:#fff;border:none;padding:14px 40px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 24px #00d9ff59;transition:all .3s ease}.continue-btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px #00d9ff80}.continue-btn:active{transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed}.compiler-suggestion-modal{background:linear-gradient(135deg,#0a0e27,#16213e);border:2px solid rgba(255,140,0,.5);border-radius:15px;max-width:600px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;color:#e0e0e0;box-shadow:0 20px 60px #ff8c0033}.modal-content{display:flex;flex-direction:column;height:100%}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px;border-bottom:1px solid rgba(255,140,0,.3);background:#ff8c000d}.modal-header h2{margin:0;font-size:22px;color:#ff8c00;font-weight:700}.modal-close{background:none;border:none;font-size:28px;color:#ff8c00;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.modal-close:hover{background:#ff8c0033;transform:rotate(90deg)}.compiler-suggestion-body{flex:1;overflow-y:auto;padding:25px}.suggestion-section{display:flex;flex-direction:column;gap:20px}.suggestion-description{font-size:16px;line-height:1.6;color:#b0b0b0;margin:0;padding:0}.quick-start-section{background:#ff8c001a;border-left:4px solid #ff8c00;padding:15px;border-radius:8px}.quick-start-section h3{margin:0 0 10px;font-size:14px;font-weight:700;color:#ff8c00;text-transform:uppercase;letter-spacing:1px}.quick-start-content{background:#0000004d;padding:12px;border-radius:5px;font-size:14px;line-height:1.6;color:#d0d0d0;font-family:Courier New,monospace}.quick-start-content p{margin:0}.detailed-instructions-section{display:flex;flex-direction:column;gap:10px}.toggle-instructions-btn{background:#ff8c0026;border:1px solid rgba(255,140,0,.4);color:#ff8c00;padding:12px 15px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s ease;text-align:left}.toggle-instructions-btn:hover{background:#ff8c0040;border-color:#ff8c0099}.detailed-instructions{background:#0000004d;border-left:4px solid #ff8c00;padding:15px;border-radius:8px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.instruction-line{font-size:13px;line-height:1.8;color:silver;margin:5px 0;font-family:Courier New,monospace}.download-section{background:#ff8c000d;border:1px solid rgba(255,140,0,.3);padding:15px;border-radius:8px;text-align:center}.download-label{margin:0 0 10px;font-size:14px;font-weight:600;color:#ff8c00}.download-button{display:inline-block;background:linear-gradient(135deg,#ff8c00,#ff6b35);color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;font-size:13px;transition:all .3s ease;box-shadow:0 4px 15px #ff8c004d}.download-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff8c0066}.help-section{background:#00d9ff0d;border-left:4px solid #00d9ff;padding:15px;border-radius:8px}.help-section h4{margin:0 0 10px;font-size:14px;font-weight:700;color:#00d9ff}.help-section ul{margin:0;padding-left:20px;list-style:disc}.help-section li{font-size:13px;line-height:1.6;color:#b0b0b0;margin:5px 0}.modal-footer{padding:20px 25px;border-top:1px solid rgba(255,140,0,.3);background:#0003;display:flex;gap:10px;justify-content:flex-end}.btn{padding:10px 20px;border-radius:6px;border:none;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#ff8c00,#ff6b35);color:#fff;box-shadow:0 4px 15px #ff8c004d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff8c0066}.btn-secondary{background:#ff8c001a;border:1px solid rgba(255,140,0,.4);color:#ff8c00}.btn-secondary:hover{background:#ff8c0033}.compiler-suggestion-body::-webkit-scrollbar{width:8px}.compiler-suggestion-body::-webkit-scrollbar-track{background:#ff8c000d;border-radius:10px}.compiler-suggestion-body::-webkit-scrollbar-thumb{background:#ff8c004d;border-radius:10px}.compiler-suggestion-body::-webkit-scrollbar-thumb:hover{background:#ff8c0080}.code-editor-container{display:flex;flex-direction:column;gap:16px;background:#1e1e1e;border-radius:8px;padding:16px;border:1px solid #333}.editor-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid #333}.editor-controls{display:flex;gap:12px;align-items:center}.language-selector{padding:8px 12px;border:1px solid #555;border-radius:4px;background:#2d2d2d;color:#e0e0e0;font-size:14px;cursor:pointer;transition:all .3s ease}.language-selector:hover{border-color:#888;background:#3d3d3d}.language-selector:focus{outline:none;border-color:#0078d4;background:#3d3d3d}.editor-buttons{display:flex;gap:8px;flex-wrap:wrap}.btn{padding:10px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:6px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-validate{background:#0078d4;color:#fff}.btn-validate:hover:not(:disabled){background:#005a9e}.btn-execute{background:#28a745;color:#fff}.btn-execute:hover:not(:disabled){background:#218838}.btn-reset{background:#6c757d;color:#fff}.btn-reset:hover:not(:disabled){background:#5a6268}.validation-message{padding:10px 14px;border-radius:4px;font-size:13px;font-weight:500;animation:slideIn .3s ease}.validation-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.validation-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.editor-wrapper{border:1px solid #333;border-radius:4px;overflow:hidden;background:#1e1e1e}.editor-wrapper .monaco-editor,.editor-wrapper .monaco-editor .monaco-editor-background{background:#1e1e1e!important}.output-section{border:1px solid #333;border-radius:4px;background:#252526;overflow:hidden}.output-header{background:#2d2d30;padding:12px 16px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}.output-header h3{margin:0;color:#ccc;font-size:14px;font-weight:500}.error-box{padding:16px;background:#5a2c2c;border-left:4px solid #d32f2f;color:#fcc;font-family:Courier New,monospace}.error-box strong{display:block;margin-bottom:8px;color:#ff6b6b}.error-box pre{margin:0;white-space:pre-wrap;word-break:break-word;font-size:13px}.test-results{padding:16px;border-left:4px solid}.test-results.success{background:#2d4d2d;border-left-color:#28a745}.test-results.failure{background:#4d2d2d;border-left-color:#d32f2f}.test-summary{padding:8px 0;color:#c8e6c9;font-size:14px;margin-bottom:12px}.test-results.failure .test-summary{color:#fcc}.failed-tests{margin-top:12px}.failed-tests h4{margin:0 0 12px;color:#ff6b6b;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.test-case-failure{margin-bottom:12px;padding:10px;background:#0000004d;border-radius:4px}.test-number{color:#ffb3ba;font-size:12px;font-weight:600;margin-bottom:8px}.test-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.test-comparison>div{display:flex;flex-direction:column;gap:4px}.test-comparison strong{color:#fcc;font-size:12px;text-transform:uppercase}.test-comparison code{padding:6px 8px;background:#00000080;border-radius:3px;color:#ff9;font-size:12px;font-family:Courier New,monospace;word-break:break-all}.output-box{padding:16px;background:#1e1e1e;border-top:1px solid #333;color:#ccc;font-family:Courier New,monospace;font-size:13px}.output-box strong{display:block;margin-bottom:8px;color:#4ec9b0}.output-box pre{margin:0;white-space:pre-wrap;word-break:break-word;color:#ce9178;line-height:1.5}@media (max-width: 768px){.code-editor-container{padding:12px;gap:12px}.editor-header{flex-direction:column;align-items:stretch}.editor-buttons{width:100%}.btn{flex:1;justify-content:center}.test-comparison{grid-template-columns:1fr}.editor-wrapper{height:300px!important}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.onboarding-hero .premium-header{font-size:56px;letter-spacing:1px}.onboarding-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}.profile-card,.goals-card{padding:28px;border-radius:16px;min-height:260px}.lang-list{display:flex;flex-wrap:wrap;gap:8px}.lang-btn{padding:8px 12px;border-radius:10px;background:transparent;border:1px solid rgba(0,217,255,.12);color:inherit;cursor:pointer}.lang-btn.active{background:linear-gradient(90deg,#00d9ff,#7c3aed);color:#fff;border:none;box-shadow:0 8px 30px #00d9ff1f}.start-quest{width:100%;padding:16px 20px;font-size:16px;border-radius:12px;box-shadow:0 12px 40px #7c3aed2e}@media (max-width: 960px){.onboarding-grid{grid-template-columns:1fr}}.dark-mode{background:linear-gradient(135deg,#0a0e27,#16213e,#0f1419);color:#fff;min-height:100vh;transition:all .3s ease}.light-mode{background:linear-gradient(135deg,#f8f9fa,#fff,#f3f5f8);color:#1a1a1a;min-height:100vh;transition:all .3s ease}.navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid rgba(0,217,255,.3)}.dark-mode .navbar{background:#0a0e27e6;box-shadow:0 8px 32px #00d9ff1a}.light-mode .navbar{background:#fffffff2;border-bottom-color:#7c3aed33}.nav-brand{font-size:28px;font-weight:900;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;text-shadow:0 0 20px rgba(0,217,255,.3)}.theme-toggle{background:none;border:2px solid rgba(0,217,255,.4);font-size:20px;cursor:pointer;padding:10px 14px;border-radius:8px;transition:all .3s ease}.theme-toggle:hover{border-color:#00d9ffcc;box-shadow:0 0 15px #00d9ff4d}.page{max-width:1200px;margin:0 auto;padding:40px 20px}.premium-header{font-size:42px;font-weight:900;margin-bottom:10px;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.premium-subheader{font-size:16px;margin-bottom:30px;opacity:.7;font-weight:500}.subheader{font-size:24px;font-weight:700;margin:40px 0 20px;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:30px 0 50px}.metric-card{padding:28px;border-radius:16px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(0,217,255,.4);transition:all .3s ease;position:relative;overflow:hidden}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#00d9ff1a,#7c3aed1a);pointer-events:none}.dark-mode .metric-card{background:#16213e99}.light-mode .metric-card{background:#7c3aed0d;border-color:#7c3aed4d}.metric-card:hover{border-color:#00d9ffcc;transform:translateY(-8px);box-shadow:0 12px 40px #00d9ff40}.metric-label{font-size:12px;opacity:.65;text-transform:uppercase;letter-spacing:2px;font-weight:700}.metric-value{font-size:42px;font-weight:900;margin-top:12px;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.problem-card{padding:24px;border-radius:16px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(0,217,255,.3);position:relative;overflow:hidden}.problem-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#00d9ff14,#7c3aed14);pointer-events:none}.dark-mode .problem-card{background:#16213e80}.light-mode .problem-card{background:#7c3aed0a;border-color:#7c3aed40}.problem-card:hover{border-color:#00d9ffcc;transform:translateY(-6px);box-shadow:0 12px 40px #00d9ff40,inset 0 0 20px #00d9ff1a}.problem-card.big{min-height:220px;display:flex;flex-direction:column;justify-content:space-between}.problem-title{font-size:20px;font-weight:700;margin-bottom:10px;color:inherit;position:relative;z-index:1}.problem-meta{font-size:12px;opacity:.6;margin:10px 0;text-transform:uppercase;letter-spacing:1px;position:relative;z-index:1}.problem-desc{font-size:14px;line-height:1.8;opacity:.95;position:relative;z-index:1;text-align:justify}.dark-mode .problem-card,.dark-mode .problem-card.big,.dark-mode .problem-card .problem-desc,.dark-mode .problem-title,.dark-mode .problem-meta{color:#fff}.editor-card,.output-box{color:inherit}.dark-mode .output-box{background:#00101e99;color:#e6f7ff;border:1px solid rgba(0,217,255,.08)}.light-mode .output-box{background:#f7fbff;color:#111}.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.problem-section{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}@media (max-width: 1024px){.problem-section{grid-template-columns:1fr}}.editor-card{padding:28px;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(0,217,255,.3);transition:all .3s ease}.dark-mode .editor-card{background:#0a0e27b3}.light-mode .editor-card{background:#ffffffb3}.editor-card:hover{border-color:#00d9ff99;box-shadow:0 8px 32px #00d9ff26}.code-editor{width:100%;min-height:300px;padding:16px;border-radius:12px;font-family:Fira Code,Monaco,Courier New,monospace;font-size:14px;line-height:1.6;resize:vertical;border:2px solid rgba(0,217,255,.2);margin-bottom:16px;transition:all .3s ease;color:inherit;background:transparent}.dark-mode .code-editor{background:#0a0e2799;color:#e6f7ff}.light-mode .code-editor{background:#fff;color:#111;border-color:#7c3aed1f}.code-editor:focus{outline:none;border-color:#00d9ff99;box-shadow:0 0 20px #00d9ff33}.output-box{margin-top:16px;padding:16px;border-radius:12px;background:#00000080;color:#00d9ff;font-family:Fira Code,Monaco,Courier New,monospace;font-size:13px;overflow-x:auto;max-height:220px;overflow-y:auto;border:1px solid rgba(0,217,255,.2)}.btn{padding:12px 28px;border-radius:10px;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;display:inline-block}.btn.primary{background:linear-gradient(135deg,#00d9ff,#7c3aed);color:#fff;box-shadow:0 8px 24px #00d9ff59;border:2px solid transparent}.btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px #00d9ff80}.btn.primary:active{transform:translateY(-1px)}.dark-mode .btn{background:#7c3aed40;color:#00d9ff;border:2px solid rgba(0,217,255,.4)}.dark-mode .btn:hover{background:#7c3aed66;border-color:#00d9ffcc;box-shadow:0 8px 24px #00d9ff40}.light-mode .btn{background:#7c3aed26;color:#7c3aed;border:2px solid rgba(124,58,237,.4)}.light-mode .btn:hover{background:#7c3aed40;border-color:#7c3aedcc}.chat-window{height:450px;overflow-y:auto;padding:20px;border:2px solid rgba(0,217,255,.3);border-radius:16px;margin-bottom:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dark-mode input,.dark-mode textarea,.dark-mode select{background:#ffffff08;color:#e6f7ff;border:1px solid rgba(0,217,255,.08);padding:8px 10px;border-radius:8px}.light-mode input,.light-mode textarea,.light-mode select{background:#fff;color:#111;border:1px solid rgba(0,0,0,.08);padding:8px 10px;border-radius:8px}.problem-desc{color:inherit}.dark-mode .chat-window{background:#16213e80}.light-mode .chat-window{background:#7c3aed0a}.chat-user{padding:14px 18px;background:linear-gradient(135deg,#00d9ff,#7c3aed);color:#fff;border-radius:12px;text-align:right;margin:12px 0 12px auto;max-width:75%;font-weight:500;box-shadow:0 4px 16px #00d9ff33}.chat-assistant{margin:12px 0;padding:14px 18px;background:#7c3aed40;color:inherit;border-radius:12px;max-width:75%;border:1px solid rgba(0,217,255,.2);font-weight:500}input,textarea,select{width:100%;padding:14px 18px;border-radius:10px;border:2px solid rgba(0,217,255,.2);font-family:inherit;font-size:14px;margin-bottom:16px;transition:all .3s ease;font-weight:500}.dark-mode input,.dark-mode textarea,.dark-mode select{background:#0006;color:#fff}.light-mode input,.light-mode textarea,.light-mode select{background:#0000000a;color:#333;border-color:#7c3aed33}input:focus,textarea:focus,select:focus{outline:none;border-color:#00d9ffcc;box-shadow:0 0 20px #00d9ff40,inset 0 0 10px #00d9ff0d}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:1px;opacity:.85}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media (max-width: 768px){.form-grid{grid-template-columns:1fr}}input[type=checkbox],input[type=radio]{width:auto;margin-right:8px;cursor:pointer;accent-color:#00d9ff}ul{list-style:none}ul li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-weight:500}ul li:last-child{border-bottom:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#00d9ff80;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00d9ffcc}.loading{opacity:.6;pointer-events:none}@keyframes glow{0%,to{box-shadow:0 0 10px #00d9ff4d}50%{box-shadow:0 0 20px #00d9ff99}}.glow{animation:glow 2s ease-in-out infinite}@keyframes slideIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.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;animation:fadeIn .3s ease-out}.success-modal{background:linear-gradient(135deg,#0a0e27,#16213e);border:2px solid;border-image:linear-gradient(135deg,#00d9ff,#7c3aed) 1;border-radius:24px;padding:60px 40px;text-align:center;max-width:500px;box-shadow:0 20px 60px #00d9ff4d;animation:slideIn .4s ease-out}.trophy-icon{font-size:80px;margin-bottom:20px;animation:bounce .6s ease-in-out;display:inline-block}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.success-modal h2{font-size:42px;font-weight:900;background:linear-gradient(135deg,#00d9ff,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 15px;letter-spacing:2px}.success-modal p{font-size:18px;color:#e6f7ff;margin:0 0 30px;font-weight:500}.continue-btn{background:linear-gradient(135deg,#00d9ff,#7c3aed);color:#fff;border:none;padding:16px 50px;font-size:16px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 25px #7c3aed66;text-transform:uppercase;letter-spacing:1px}.continue-btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px #00d9ff80}.continue-btn:active{transform:translateY(-1px)}