.get-started-page{width:100%;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:80px 80px 60px;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:scroll;overflow-x:hidden}.get-started-page::-webkit-scrollbar{width:10px;height:10px}.get-started-page::-webkit-scrollbar-track{background:#ffffff0d}.get-started-page::-webkit-scrollbar-thumb{background:#667eea80;border-radius:4px}.get-started-page::-webkit-scrollbar-thumb:hover{background:#667eeab3}.get-started-page{scrollbar-width:thin;scrollbar-color:rgba(102,126,234,.5) rgba(255,255,255,.05)}.section-header{text-align:center;margin-bottom:40px}.section-header h2{font-size:32px;color:#e5e7eb;margin-bottom:12px;font-weight:700}.section-header p{font-size:16px;color:#a0a0b8;max-width:500px;margin:0 auto}.hero-section{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px 80px;position:relative}.hero-content{max-width:700px}.hero-title{font-size:52px;font-weight:800;color:#e5e7eb;margin-bottom:20px;line-height:1.2}.hero-title .highlight{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:18px;color:#a0a0b8;margin-bottom:32px;line-height:1.6}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.btn-primary{padding:14px 32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.hero-visual{display:flex;gap:16px;margin-top:50px;flex-wrap:wrap;justify-content:center}.hero-badge{padding:12px 24px;background:#2d2d44cc;border:1px solid #3d3d54;border-radius:50px;color:#e5e7eb;font-size:14px;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-section{padding:60px 20px;max-width:900px;margin:0 auto}.video-container{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #0006;border:1px solid #3d3d54}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;background:#16162a}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.features-section{padding:80px 20px;max-width:1200px;margin:0 auto}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.feature-card{background:#2d2d44;border:1px solid #3d3d54;border-radius:12px;padding:28px;transition:all .3s;position:relative}.feature-card:hover{transform:translateY(-4px);border-color:#4a4a5e;box-shadow:0 8px 25px #0000004d}.feature-card.featured{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.feature-card.featured:hover{border-color:#764ba2}.feature-icon{font-size:36px;margin-bottom:16px}.feature-card h3{font-size:18px;color:#e5e7eb;margin-bottom:10px;font-weight:600}.feature-card p{font-size:14px;color:#a0a0b8;line-height:1.6;margin-bottom:16px}.feature-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.feature-badge.free{background:#4caf5033;color:#4caf50;border:1px solid #4caf50}.feature-badge.premium{background:linear-gradient(135deg,#667eea4d,#764ba24d);color:#a78bfa;border:1px solid #667eea}.pricing-section{padding:80px 20px;max-width:1200px;margin:0 auto}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}.plan-card{background:#2d2d44;border-radius:16px;padding:40px 32px;position:relative;transition:all .3s;display:flex;flex-direction:column}.plan-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0006}.plan-monthly{border:2px solid #3b82f6}.plan-monthly:hover{box-shadow:0 12px 40px #3b82f64d}.plan-quarterly{border:2px solid #f59e0b}.plan-quarterly:hover{box-shadow:0 12px 40px #f59e0b4d}.plan-halfyearly{border:2px solid #10b981}.plan-halfyearly:hover{box-shadow:0 12px 40px #10b9814d}.discount-badge{position:absolute;top:20px;right:20px;padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:.5px}.badge-quarterly{background:#f59e0b;color:#fff}.badge-halfyearly{background:#10b981;color:#fff}.plan-header{margin-bottom:32px}.plan-title{font-size:28px;color:#e5e7eb;margin-bottom:16px;font-weight:600;text-align:left}.plan-pricing{text-align:left}.main-price{font-size:20px;color:#e5e7eb;font-weight:400;margin-bottom:8px}.per-month{font-size:16px;color:#667eea;font-weight:500;margin-bottom:4px}.savings-text{font-size:14px;color:#4caf50;font-weight:500}.plan-features{flex:1;margin-bottom:32px}.feature-item{padding:12px 0;color:#a0a0b8;font-size:15px;text-align:left;border-bottom:1px solid rgba(61,61,84,.5)}.feature-item:last-child{border-bottom:none}.subscribe-button{width:100%;padding:16px 24px;background:#4a4a5e99;color:#e5e7eb;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.subscribe-button:hover{background:#4a4a5ecc;border-color:#fff3;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.subscribe-button.subscribed{background:#22c55e33;color:#22c55e;border-color:#22c55e;cursor:default}.subscribe-button.subscribed:hover{transform:none;box-shadow:none}@media (max-width: 1024px){.get-started-page{padding:80px 40px 60px}}@media (max-width: 768px){.get-started-page{padding:70px 20px 40px}.hero-title{font-size:36px}.hero-subtitle{font-size:16px}.section-header h2{font-size:26px}.features-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr;gap:24px}}@media (max-width: 480px){.hero-buttons{flex-direction:column;width:100%}.btn-primary{width:100%}}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal-content{background:linear-gradient(135deg,#1e1e2e,#252538);border-radius:16px;box-shadow:0 20px 60px #00000080,0 0 0 1px #667eea4d;width:90%;max-width:440px;overflow:hidden;animation:slideUp .3s ease-out;position:relative}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-modal-header{padding:28px 32px 24px;border-bottom:1px solid rgba(102,126,234,.2);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea1a,#764ba21a)}.auth-modal-header h3{font-size:24px;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.auth-modal-close{background:transparent;border:none;color:#888;font-size:28px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.auth-modal-close:hover{background:#667eea1a;color:#667eea}.auth-modal-body{padding:32px}.auth-google-btn{width:100%;padding:14px 24px;background:transparent;border:2px solid rgba(102,126,234,.5);border-radius:10px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .3s ease;box-shadow:none}.auth-google-btn:hover{transform:translateY(-2px);background:#667eea1a;border-color:#667eea;box-shadow:0 4px 15px #667eea33}.auth-google-btn:active{transform:translateY(0)}.auth-google-icon{width:22px;height:22px;flex-shrink:0}.auth-divider{text-align:center;margin:24px 0;color:#666;font-size:14px;font-weight:500;position:relative}.auth-divider:before,.auth-divider:after{content:"";position:absolute;top:50%;width:35%;height:1px;background:#667eea33}.auth-divider:before{left:0}.auth-divider:after{right:0}.auth-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#f87171;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;font-weight:500;text-align:center}.auth-google-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.auth-google-btn:disabled:hover{background:transparent;border-color:#667eea80;box-shadow:none}.problems-page{width:100%;min-height:100vh;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:120px 160px 160px;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:scroll;overflow-x:hidden}.problems-header{text-align:center;margin-bottom:50px}.problems-header h1{font-size:38px;color:#e5e7eb;margin-bottom:12px;font-weight:700}.problems-subtitle{font-size:14px;color:#a0a0b8;max-width:560px;margin:0 auto;line-height:1.5}.problems-controls{display:flex;gap:16px;align-items:center;margin-top:32px;margin-bottom:24px;flex-wrap:wrap}.search-bar{flex:1;min-width:250px;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:15px;font-size:16px;pointer-events:none}.search-input{width:100%;padding:10px 12px 10px 36px;background-color:#16162a;border:2px solid #2d2d44;border-radius:8px;color:#e5e7eb;font-size:12px;transition:all .2s}.search-input:focus{outline:none;border-color:#4a4a5e;box-shadow:0 0 0 3px #4a4a5e1a;background:#1a1a30}.search-input::placeholder{color:#6b7280}.filter-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.filter-dropdown{display:flex;align-items:center;gap:10px;background-color:#1e1e2f;padding:6px 13px;border-radius:8px;border:2px solid #2d2d44}.filter-label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.filter-select{padding:10px 32px 10px 12px;background-color:#16162a;color:#e5e7eb;border:2px solid #2d2d44;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;min-width:120px}.filter-select:hover{border-color:#4a4a5e}.filter-select:focus{outline:none;border-color:#4a4a5e;box-shadow:0 0 0 2px #4a4a5e1a}.filter-select option{background-color:#16162a;color:#e5e7eb;padding:10px 12px;border-radius:6px}.filter-btn{padding:8px 16px;background-color:#1e1e2f;color:#a0a0b8;border:2px solid #2d2d44;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:#4a4a5e;color:#e5e7eb}.filter-btn.active{background-color:#4a4a5e;border-color:#4a4a5e;color:#fff}.problems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:32px}.problem-card{background-color:#2d2d44;border:1px solid #3d3d54;border-radius:10px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}.problem-card:hover{transform:translateY(-4px);border-color:#4a4a5e;box-shadow:0 6px 16px #0000004d}.problem-header{display:flex;gap:8px;margin-bottom:12px}.difficulty-badge{padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase}.difficulty-easy{background-color:#4caf5033;color:#4caf50;border:1px solid #4caf50}.difficulty-medium{background-color:#ff980033;color:#ff9800;border:1px solid #ff9800}.difficulty-hard{background-color:#f4433633;color:#f44336;border:1px solid #f44336}.category-badge{padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600;background-color:#4a4a5e4d;color:#a0a0b8;border:1px solid #4a4a5e}.problem-title{font-size:18px;color:#e5e7eb;margin-bottom:10px;line-height:1.3;font-weight:600}.problem-description{font-size:12px;color:#a0a0b8;line-height:1.5;margin-bottom:16px;flex:1}.practice-btn{display:inline-block;padding:8px 16px;background-color:#4a4a5e;color:#fff;text-decoration:none;border-radius:6px;font-size:12px;font-weight:600;text-align:center;transition:all .3s;align-self:flex-start}.practice-btn:hover{background-color:#5a5a6e;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.problems-page::-webkit-scrollbar{width:10px;height:10px}.problems-page::-webkit-scrollbar-track{background:#ffffff0d}.problems-page::-webkit-scrollbar-thumb{background:#667eea80;border-radius:4px}.problems-page::-webkit-scrollbar-thumb:hover{background:#667eeab3}.problems-page::-webkit-scrollbar-thumb:active{background:#667eeacc}.problems-page{scrollbar-width:thin;scrollbar-color:rgba(102,126,234,.5) rgba(255,255,255,.05)}@media (max-width: 768px){.problems-grid{grid-template-columns:1fr}}.monaco-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-left:none}.monaco-wrapper>section{flex:1;min-height:0}.monaco-loading{display:flex;align-items:center;justify-content:center;height:100%;background:#ffffff0d;color:#667eea;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px}.monaco-wrapper .monaco-editor,.monaco-wrapper .monaco-editor .overflow-guard,.monaco-wrapper .monaco-editor-background,.monaco-wrapper .monaco-editor .inputarea.ime-input,.monaco-wrapper .monaco-editor .margin,.monaco-wrapper .monaco-editor .monaco-scrollable-element{background:transparent!important;background-color:transparent!important}.monaco-wrapper .monaco-editor .lines-content{background:transparent!important}.monaco-wrapper .monaco-editor .view-overlays .current-line{background:#ffffff08!important;border:none!important}.output-panel{background-color:transparent;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;height:35%;min-height:180px;max-height:350px;flex-shrink:0}.running-indicator{font-size:11px;color:#ffcb6b;margin-left:8px;animation:pulse 1.5s ease-in-out infinite}.error-indicator{font-size:11px;color:#f07178;margin-left:8px}.success-indicator{font-size:11px;color:#c3e88d;margin-left:8px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.io-split-container{flex:1;display:flex;overflow:hidden}.input-section{width:30%;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.1)}.section-label{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#667eea;background-color:#0000004d;border-bottom:1px solid rgba(255,255,255,.1)}.close-output{background:none;border:none;color:#7c8da6;cursor:pointer;font-size:18px;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s;line-height:1}.close-output:hover{background-color:#ffffff1a;color:#eff}.stdin-textarea{flex:1;width:100%;padding:12px;background-color:#ffffff0d;border:none;color:#eff;font-family:Consolas,Courier New,monospace;font-size:13px;line-height:1.5;resize:none;outline:none}.stdin-textarea::placeholder{color:#4a4a7a}.stdin-textarea:focus{background-color:#ffffff14}.output-section{width:70%;display:flex;flex-direction:column;overflow:hidden}.output-content{flex:1;padding:12px;overflow:auto;font-family:Consolas,Courier New,monospace;font-size:13px;line-height:1.5;color:#eff;background-color:#ffffff0d}.output-content pre{margin:0;white-space:pre-wrap;word-wrap:break-word}.output-content.has-error{color:#f07178}.output-content.has-error pre{color:inherit}.output-content::-webkit-scrollbar,.stdin-textarea::-webkit-scrollbar{width:8px}.output-content::-webkit-scrollbar-track,.stdin-textarea::-webkit-scrollbar-track{background:#ffffff0d}.output-content::-webkit-scrollbar-thumb,.stdin-textarea::-webkit-scrollbar-thumb{background:#1a1a2e;border-radius:4px}.output-content::-webkit-scrollbar-thumb:hover,.stdin-textarea::-webkit-scrollbar-thumb:hover{background:#252540}.editor-toolbar{padding:0 8px 0 16px;height:40px;background-color:transparent;border-bottom:none;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.toolbar-left{display:flex;align-items:center;gap:15px;margin-left:0;padding-left:0}.toolbar-left h3{margin:0;padding:0;font-size:16px;color:#fff;font-weight:600}.toolbar-right{display:flex;gap:4px;align-items:center}.language-select{padding:6px 12px;background-color:#2a2a4e;color:#eff;border:1px solid #3d3d6b;border-radius:4px;cursor:pointer;font-size:14px;min-width:100px;transform:scale(.85);transform-origin:right center}.language-select:focus{outline:none;border-color:#667eea}.language-select:hover{background-color:#3d3d6b}.toolbar-icon-btn{width:32px!important;min-width:32px!important;height:32px;padding:8px;background-color:#3a3e5c;color:#fff;border:1px solid #4a4e6c;border-radius:4px;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .2s;box-sizing:border-box;flex-shrink:0;transform:scale(.8);transform-origin:right center}.toolbar-icon-btn:hover{background-color:#464a70;border-color:#5a5f88;transform:scale(.85)}.toolbar-icon-btn.ai-btn{background-color:#667eea26;border-color:#667eea4d;color:#8b9aed}.toolbar-icon-btn.ai-btn:hover:not(:disabled){background-color:#667eea40;border-color:#667eea;color:#667eea;transform:scale(.85)}.toolbar-icon-btn.ai-btn:disabled{opacity:.3;cursor:not-allowed}.toolbar-icon-btn.sync-btn{background-color:#8b5cf626;border-color:#8b5cf64d;color:#a78bfa}.toolbar-icon-btn.sync-btn:hover:not(:disabled){background-color:#8b5cf640;border-color:#8b5cf6;color:#8b5cf6;transform:scale(.85)}.toolbar-icon-btn.sync-btn:disabled{opacity:.3;cursor:not-allowed}.toolbar-icon-btn.copy-btn{background-color:#3a3e5c;border-color:#4a4e6c;color:#eff}.toolbar-icon-btn.copy-btn:hover{background-color:#464a70;border-color:#5a5f88}.toolbar-btn{padding:6px 12px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex;align-items:center;gap:4px;height:34px;white-space:nowrap;transition:all .2s;transform:scale(.8);transform-origin:right center}.run-btn{background-color:#667eea;color:#fff;border:none}.run-btn:hover{background-color:#5a6fd6}.run-btn:disabled{background-color:#3d3d6b;cursor:not-allowed;opacity:.6}.submit-btn{background:none!important;color:#22c55e!important;border:1px solid #22c55e!important}.submit-btn img{transform:scaleY(1.2)}.submit-btn:hover{background-color:#22c55e!important;color:#fff!important}.submit-btn:hover img{filter:brightness(0) invert(1)}.sync-message{font-size:12px;color:#a3e635;font-weight:500;padding:4px 8px;background-color:#a3e6351a;border-radius:4px;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.code-display-container{display:flex;flex-direction:column;background:transparent;overflow:hidden;flex-shrink:0;height:100%}.code-editor-container{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background-color:transparent}.requirements-container{display:flex;flex-direction:column;height:100%}.requirements-header{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;box-sizing:border-box}.requirements-heading{margin:0;padding:0;color:#fff;font-size:16px;font-weight:600}.requirements-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.requirements-textarea{width:100%;height:100%;padding:12px;background:#ffffff0d;border:none;border-radius:0;color:#fff;font-size:14px;resize:none;font-family:inherit;box-sizing:border-box}.requirements-textarea:focus{outline:none;border-color:#667eea80}.requirements-textarea::-webkit-scrollbar{width:8px}.requirements-textarea::-webkit-scrollbar-track{background:#ffffff0d}.requirements-textarea::-webkit-scrollbar-thumb{background:#1a1a2e;border-radius:4px}.requirements-textarea::-webkit-scrollbar-thumb:hover{background:#252540}.requirements-buttons{display:flex;align-items:center;gap:4px}.requirements-btn{width:26px;height:26px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.requirements-btn:hover{background:#667eea4d;border-color:#667eea80;transform:scale(1.05)}.fullscreen-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:10000}.fullscreen-modal{width:80%;height:80%;background:#1a1a2e;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #00000080}.fullscreen-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.1)}.fullscreen-header h3{margin:0;color:#fff;font-size:20px;font-weight:600}.fullscreen-close{background:none;border:none;color:#aaa;font-size:36px;cursor:pointer;line-height:1;padding:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:all .2s}.fullscreen-close:hover{color:#fff;transform:scale(1.1)}.fullscreen-textarea{flex:1;width:100%;padding:24px;background:#ffffff08;border:none;color:#fff;font-size:15px;resize:none;font-family:inherit;box-sizing:border-box}.fullscreen-textarea:focus{outline:none}.evaluation-modal{width:90%;max-width:1400px;max-height:90vh;background:#1a1a2e;border-radius:12px;display:flex;flex-direction:column;overflow-y:auto;box-shadow:0 8px 32px #00000080}.evaluation-modal::-webkit-scrollbar{width:6px}.evaluation-modal::-webkit-scrollbar-track{background:#ffffff0d}.evaluation-modal::-webkit-scrollbar-thumb{background:#667eea80;border-radius:3px}.evaluation-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:linear-gradient(135deg,#667eea33,#764ba233);border-bottom:1px solid rgba(255,255,255,.1)}.evaluation-title{display:flex;align-items:center;gap:20px}.evaluation-title h3{margin:0;color:#fff;font-size:22px;font-weight:600}.evaluation-score{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff1a;border-radius:20px;font-size:14px;color:#aaa;font-weight:500}.score-value{font-size:18px;font-weight:700;color:#10b981}.eval-panels{padding:16px 24px;display:flex;flex-direction:column;gap:16px}.eval-panel{border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}.eval-panel-header{padding:10px 16px;background:#ffffff0f;font-size:14px;font-weight:600;color:#e5e7eb;border-bottom:1px solid rgba(255,255,255,.08)}.eval-panel-body{padding:12px 16px}.eval-panel-body-final{padding:0;display:flex;flex-direction:column;background:#667eea0d;border-left:3px solid rgba(102,126,234,.4)}.eval-original-text{margin:0;color:#d1d5db;font-size:14px;line-height:1.7;white-space:pre-wrap;word-wrap:break-word;font-family:inherit}.eval-item{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.eval-item:last-child{border-bottom:none}.eval-item-text{color:#d1d5db;font-size:14px;line-height:1.5}.eval-item-feedback{margin-top:6px;padding:8px 12px;background:#667eea1a;border-left:3px solid rgba(102,126,234,.5);border-radius:0 4px 4px 0;color:#a5b4fc;font-size:13px;line-height:1.5}.eval-empty{color:#6b7280;font-size:14px;font-style:italic;padding:8px 0}.eval-ai-feedback{color:#d1d5db;font-size:14px;line-height:1.6;margin-bottom:12px}.eval-bonus{margin-top:8px}.eval-bonus-title{font-size:13px;font-weight:600;color:#a5b4fc;margin-bottom:6px}.eval-bonus ul{margin:0;padding-left:20px}.eval-bonus li{color:#d1d5db;font-size:13px;line-height:1.6}.eval-subscribe-cta{text-align:center;padding:20px 16px}.eval-subscribe-icon{font-size:28px;margin-bottom:8px}.eval-subscribe-title{font-size:16px;font-weight:600;color:#e5e7eb;margin-bottom:6px}.eval-subscribe-text{font-size:13px;color:#9ca3af;line-height:1.5;max-width:400px;margin:0 auto}.eval-final-textarea{width:100%;min-height:80px;padding:12px 16px;background:#ffffff08;border:1px dashed rgba(102,126,234,.3);border-radius:4px;color:#e5e7eb;font-size:14px;line-height:1.7;resize:none;font-family:inherit;box-sizing:border-box;overflow:hidden;cursor:text}.eval-final-textarea:focus{outline:none;border-color:#667eea99;background:#667eea14}.evaluation-actions{display:flex;justify-content:center;padding:20px 24px;background:#ffffff08;border-top:1px solid rgba(255,255,255,.1)}.btn-accept{padding:10px 32px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #10b9814d}.btn-accept:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn-accept:active{transform:translateY(0)}.tutor-modal{width:95%;max-width:1400px;height:90vh;background:#1a1a2e;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px #00000080}.tutor-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:linear-gradient(135deg,#667eea33,#764ba233);border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.tutor-header-left{display:flex;align-items:center;gap:16px}.tutor-header-left h3{margin:0;color:#fff;font-size:18px;font-weight:600}.tutor-coverage{display:flex;align-items:center;gap:10px;padding:6px 14px;background:#ffffff14;border-radius:20px;font-size:13px;color:#d1d5db}.tutor-coverage-bar{width:100px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.tutor-coverage-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:3px;transition:width .4s ease}.tutor-coverage-text{font-weight:600;color:#10b981}.tutor-scroll-container{flex:1;overflow-y:auto;min-height:0}.tutor-scroll-container::-webkit-scrollbar{width:6px}.tutor-scroll-container::-webkit-scrollbar-track{background:transparent}.tutor-scroll-container::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.tutor-body{display:flex;min-height:400px}.tutor-left{width:40%;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.tutor-right{width:60%;display:flex;flex-direction:column}.tutor-left-header{padding:10px 16px;background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:600;color:#9ca3af}.tutor-left-body{padding:12px 16px}.tutor-left-body pre{margin:0;color:#d1d5db;font-size:13px;line-height:1.7;white-space:pre-wrap;word-wrap:break-word;font-family:inherit}.tutor-chat-area{padding:16px;display:flex;flex-direction:column;gap:12px;max-height:500px;overflow-y:auto}.tutor-chat-area::-webkit-scrollbar{width:6px}.tutor-chat-area::-webkit-scrollbar-track{background:transparent}.tutor-chat-area::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.tutor-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.6;animation:tutorFadeIn .3s ease}@keyframes tutorFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tutor-msg-system{align-self:flex-start;background:#ffffff0f;color:#d1d5db;border-bottom-left-radius:4px;border-left:3px solid rgba(102,126,234,.5)}.tutor-msg-question{background:#667eea14;border-left:3px solid rgba(102,126,234,.7);color:#f3f4f6}.tutor-msg-requirement{background:#10b98114;border-left:3px solid rgba(16,185,129,.6);color:#f3f4f6}.tutor-msg-user{align-self:flex-end;background:#667eea40;color:#f3f4f6;border-bottom-right-radius:4px;border-right:3px solid rgba(139,92,246,.6)}.tutor-req-card{align-self:flex-start;max-width:85%;background:#10b98114;border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:14px;animation:tutorFadeIn .3s ease}.tutor-req-card-text{color:#d1d5db;font-size:14px;line-height:1.6;margin-bottom:12px}.tutor-req-card-actions{display:flex;gap:8px}.tutor-btn-accept{padding:6px 16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.tutor-btn-accept:hover{transform:translateY(-1px);box-shadow:0 3px 10px #10b9814d}.tutor-btn-next{padding:6px 16px;background:#ffffff14;color:#d1d5db;border:1px solid rgba(255,255,255,.15);border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.tutor-btn-next:hover{background:#ffffff1f;color:#fff}.tutor-input-area{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);background:#ffffff05;position:sticky;bottom:0;z-index:2;align-items:stretch}.tutor-input{flex:1;padding:10px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-size:14px;font-family:inherit;resize:none;min-height:40px;max-height:100px}.tutor-input:focus{outline:none;border-color:#667eea80}.tutor-input::placeholder{color:#6b7280}.tutor-btn-send{padding:0 20px;background:linear-gradient(135deg,#667ee6,#764ba2);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.tutor-btn-send:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 12px #667eea66}.tutor-btn-send:disabled{opacity:.5;cursor:not-allowed}.tutor-btn-reveal{padding:0 14px;background:#eab3081a;color:#fbbf24;border:1px solid rgba(234,179,8,.25);border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.tutor-btn-reveal:hover{background:#eab3082e}.tutor-bottom{border-top:1px solid rgba(255,255,255,.1)}.tutor-bottom-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#ffffff0a;border-bottom:1px solid rgba(255,255,255,.08)}.tutor-bottom-title{font-size:13px;font-weight:600;color:#9ca3af}.tutor-final-body{padding:0}.tutor-final-textarea{width:100%;min-height:100px;padding:12px 16px;background:#ffffff08;border:none;border-left:3px solid rgba(102,126,234,.4);color:#e5e7eb;font-size:14px;line-height:1.7;resize:none;overflow:hidden;font-family:inherit;box-sizing:border-box}.tutor-final-textarea:focus{outline:none;background:#667eea0d}.tutor-btn-end{padding:4px 12px;background:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.25);border-radius:5px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.tutor-btn-end:hover{background:#ef444433}.tutor-complete{text-align:center;padding:24px;animation:tutorFadeIn .4s ease}.tutor-complete-emoji{font-size:40px;margin-bottom:12px}.tutor-complete-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px}.tutor-complete-stats{display:flex;justify-content:center;gap:20px;margin:16px 0}.tutor-stat{text-align:center}.tutor-stat-value{font-size:22px;font-weight:700;color:#10b981}.tutor-stat-label{font-size:12px;color:#9ca3af;margin-top:2px}.tutor-btn-apply{margin-top:16px;padding:10px 28px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.tutor-btn-apply:hover{transform:translateY(-2px);box-shadow:0 4px 16px #10b98166}.tutor-loading{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#9ca3af;font-size:14px;align-self:flex-start;animation:tutorFadeIn .3s ease}.tutor-loading-dots:after{content:"";animation:tutorDots 1.4s infinite}@keyframes tutorDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.tutor-exhausted{align-self:flex-start;max-width:85%;display:flex;flex-direction:column;gap:10px;animation:tutorFadeIn .3s ease}.tutor-exhausted-actions{display:flex;gap:8px}.canvas-wrapper{display:flex;flex-direction:column;width:100%;height:100%}.canvas-header{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;box-sizing:border-box;flex-shrink:0}.canvas-heading{margin:0;padding:0;color:#cbcbcb;font-size:16px;font-weight:600}.canvas-body{position:relative;flex:1;overflow:hidden}.canvas-container{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#cbcbcb;overflow:auto;border:1px solid #cbcbcb;border-radius:4px}.canvas-container::-webkit-scrollbar{width:8px;height:8px}.canvas-container::-webkit-scrollbar-track{background:#ffffff0d}.canvas-container::-webkit-scrollbar-thumb{background:#1a1a2e;border-radius:4px}.canvas-container::-webkit-scrollbar-thumb:hover{background:#252540}.canvas-container::-webkit-scrollbar-corner{background:#ffffff0d}.canvas-svg{min-width:100%;min-height:100%;cursor:default;display:block}.canvas-toolbar{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:8px;z-index:10}.canvas-toolbar-row{display:flex;gap:6px;align-items:center}.add-type-btn{width:29px;height:29px;border-radius:50%;border:2px solid;color:#cbcbcb;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0003}.add-type-btn:hover{transform:scale(1.1);box-shadow:0 3px 10px #0000004d}.add-type-btn:active{transform:scale(.95)}.class-btn{background-color:#4ec9b0;border-color:#4ec9b0}.class-btn:hover{background-color:#3ba890;border-color:#3ba890}.interface-btn{background-color:#ce9178;border-color:#ce9178}.interface-btn:hover{background-color:#b57a62;border-color:#b57a62}.enum-btn{background-color:#dcdcaa;border-color:#dcdcaa;color:#333}.enum-btn:hover{background-color:#c7c48e;border-color:#c7c48e}.relationship-btn{width:29px;height:29px;border-radius:4px;border:2px solid #666;background-color:#cbcbcb;color:#333;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026}.relationship-btn:hover{background-color:#f0f0f0;border-color:#007acc;transform:scale(1.05);box-shadow:0 3px 10px #007acc4d}.relationship-btn:active{transform:scale(.95)}.relationship-btn.active{background-color:#007acc;border-color:#007acc;color:#fff;box-shadow:0 3px 10px #007acc80}.relationship-btn.active:hover{background-color:#005a9e;border-color:#005a9e}.relationship-btn[title*=Implementation],.relationship-btn[title*=Dependency]{border-style:dashed}.canvas-controls{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:10}.control-btn{width:38px;height:38px;border-radius:50%;border:2px solid #333;background-color:#cbcbcb;color:#333;font-size:19px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000026}.control-btn:hover{background-color:#f0f0f0;border-color:#007acc;transform:scale(1.05);box-shadow:0 3px 10px #007acc4d}.control-btn:active{transform:scale(.95)}.sparkle-control-btn{padding:0}.sparkle-svg-icon{width:20px;height:20px}.sync-icon-btn{background:none;border:none;color:#333;font-size:24px;cursor:pointer;padding:0;line-height:1;transition:transform .3s ease,color .2s ease}.sync-icon-btn:hover{color:#000;transform:rotate(180deg)}.sync-icon-btn:active{transform:rotate(180deg) scale(.9)}.fullscreen-btn{font-size:16px;transition:all .3s ease}.fullscreen-btn.exit-fullscreen{transform:rotate(180deg)}.fullscreen-btn:hover{transform:scale(1.08)}.fullscreen-btn.exit-fullscreen:hover{transform:rotate(180deg) scale(1.08)}.zoom-controls{position:absolute;bottom:12px;right:12px;display:flex;gap:3px;background-color:#cbcbcb;border-radius:6px;padding:3px;box-shadow:0 2px 8px #00000026;z-index:10}.zoom-btn{width:29px;height:29px;border-radius:4px;border:1px solid #333;background-color:#cbcbcb;color:#333;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.zoom-btn:hover{background-color:#007acc;border-color:#007acc;color:#cbcbcb;transform:scale(1.05)}.zoom-btn:active{transform:scale(.95)}.zoom-reset{min-width:40px;font-size:10px;font-weight:600}.rectangle-group{cursor:move;transition:opacity .15s ease}.rectangle-group.dragging{opacity:.7}.rectangle-group:hover .rectangle-border{stroke:#007acc;stroke-width:2.5}.rectangle-border{fill:#cbcbcb;stroke:#333;stroke-width:2;rx:4;ry:4;transition:all .2s ease}.type-badge-group{pointer-events:none;-webkit-user-select:none;user-select:none}.type-badge-circle{stroke:#cbcbcb;stroke-width:2}.type-badge-circle.class{fill:#4ec9b0}.type-badge-circle.interface{fill:#ce9178}.type-badge-circle.enum{fill:#dcdcaa}.type-badge-text{fill:#fff;font-size:14px;font-weight:700;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.type-badge-text.enum{fill:#333}.rectangle-content{width:100%;min-height:100%;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:13px;line-height:1.5;color:#333;overflow:visible;box-sizing:border-box}.uml-section{padding:8px 10px;border-bottom:1px solid #333333;outline:none;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;min-height:32px;cursor:default;transition:background-color .15s ease;-webkit-user-select:none;user-select:none;overflow:visible}.uml-section[contenteditable=true]{cursor:text;-webkit-user-select:text;user-select:text}.uml-section:last-child{border-bottom:none}.uml-section:hover{background-color:#007acc08}.uml-section:focus{background-color:#007acc14;box-shadow:inset 0 0 0 1px #007acc33}.uml-section.name{text-align:center;font-weight:600;font-size:14px;background-color:#00000005}.uml-section.attributes,.uml-section.methods,.uml-section.values{background-color:#cbcbcb}.uml-section:empty:before{content:"Click to edit...";color:#cbcbcb;font-style:italic;font-weight:400}.delete-btn-group{cursor:pointer;pointer-events:all}.delete-btn-circle,.delete-btn-text{transition:fill .2s ease;opacity:1}.delete-btn-circle{fill:#f44;stroke:none}.delete-btn-group:hover .delete-btn-circle{fill:#c00}.delete-btn-text{fill:#fff;font-size:12px;font-weight:700;pointer-events:none;-webkit-user-select:none;user-select:none}.resize-handle-group{pointer-events:all}.corner-btn{cursor:pointer}.corner-btn-circle{stroke:none;transition:fill .15s ease}.sparkle-circle,.corner-btn-bl:hover .sparkle-circle{fill:#7474bd}.resize-circle{fill:#888}.corner-btn-br:hover .resize-circle{fill:#666}.resize-handle-br{cursor:nwse-resize}.sparkle-icon,.resize-icon{pointer-events:none}.connection-dots{pointer-events:auto}.connection-dot{fill:#007acc;stroke:#cbcbcb;stroke-width:2;transition:all .2s ease;opacity:.8}.connection-dot:hover{fill:#005a9e;r:8;opacity:1;stroke-width:3}.connection-dot.selected{fill:#0f0;stroke:#cbcbcb;stroke-width:3;opacity:1;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{r:6}50%{r:8}}.relationship-line{pointer-events:none;transition:stroke-width .2s ease}.relationship-line:hover{stroke-width:3}.rel-delete-btn{pointer-events:all}.rel-delete-circle,.rel-delete-text{transition:opacity .2s ease}.relationship-group:hover .rel-delete-circle,.relationship-group:hover .rel-delete-text{opacity:1!important}.rel-delete-btn:hover .rel-delete-circle{fill:#c00}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#666;pointer-events:none;-webkit-user-select:none;user-select:none}.empty-state p{margin:8px 0;font-size:16px}.empty-state strong{color:#007acc;font-weight:600}.empty-state-hint{font-size:14px;color:#999;margin-top:16px}@media (max-width: 768px){.add-type-btn{width:26px;height:26px;font-size:11px}.relationship-btn{width:26px;height:26px;font-size:13px}.canvas-toolbar{top:8px;left:8px;gap:6px}.canvas-toolbar-row{gap:4px}.canvas-controls{top:8px;right:8px}.control-btn{width:32px;height:32px;font-size:16px}.fullscreen-btn{font-size:13px}.zoom-controls{bottom:8px;right:8px}.zoom-btn{width:26px;height:26px;font-size:13px}.zoom-reset{min-width:36px;font-size:9px}}.workspace-container{display:flex;width:100%;height:100%;background:linear-gradient(135deg,#1e1e2e,#2d2d44);overflow:hidden;gap:0}.workspace-left-section{display:flex;flex-direction:column;padding:0;overflow:hidden;min-width:0;gap:0;background:transparent}.workspace-requirements,.workspace-whiteboard{margin:0;border:none}.workspace-right-section{display:flex;flex-direction:column;padding:0;overflow:hidden;min-width:0}.workspace-divider-horizontal{width:8px;background:#ffffff0d;cursor:col-resize;position:relative;flex-shrink:0;transition:background .2s ease;display:flex;align-items:center;justify-content:center}.workspace-divider-horizontal:hover{background:#ffffff1a}.workspace-divider-handle-horizontal{width:3px;height:60px;background:#ffffff26;border-radius:2px;box-shadow:none}.workspace-divider-horizontal:hover .workspace-divider-handle-horizontal{height:80px;background:#ffffff40;box-shadow:none}.workspace-panel{background:transparent;overflow:hidden;display:flex;flex-direction:column;min-height:0;flex-shrink:0;border:none;margin:0;padding:0}.workspace-right-section .workspace-panel{flex:1}.workspace-requirements{margin:0;border:none;border-bottom:none!important}.workspace-whiteboard{margin:0;border:none;border-top:none!important}.workspace-panel>*{flex:1;min-height:0}.whiteboard-tabs{display:flex;gap:8px;padding:12px 16px;background:#0003;border-bottom:1px solid rgba(255,255,255,.1)}.whiteboard-tab{padding:8px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#ffffffb3;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.whiteboard-tab:hover{background:#ffffff1a;color:#ffffffe6;border-color:#fff3}.whiteboard-tab.active{background:#9333ea33;border-color:#9333ea80;color:#a78bfa}.whiteboard-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.whiteboard-content>*{flex:1;min-height:0}.practice-page-container{width:100%;height:100vh;background:linear-gradient(135deg,#fff,#fff);display:flex;flex-direction:column;position:relative;overflow:hidden}.toast-message{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:600;z-index:10000;box-shadow:0 4px 12px #00000026;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.loading-container{display:flex;justify-content:center;align-items:center;height:100%;color:#e5e7eb;font-size:16px}.practice-header-tabs{padding:12px 20px;background:linear-gradient(135deg,#2d2d44,#3d3d54);border-bottom:2px solid #4a4a5e;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.practice-header-info{display:flex;align-items:center;gap:12px}.practice-title{color:#e5e7eb;margin:0;font-size:20px;font-weight:600}.difficulty-tag{padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.difficulty-tag.difficulty-easy{background-color:#22c55e33;color:#22c55e;border:1px solid #22c55e}.difficulty-tag.difficulty-medium{background-color:#eab30833;color:#eab308;border:1px solid #eab308}.difficulty-tag.difficulty-hard{background-color:#ef444433;color:#ef4444;border:1px solid #ef4444}.tab-buttons{display:flex;gap:4px;background-color:#1e1e2e99;border-radius:8px;padding:4px}.tab-button{padding:8px 20px;background-color:transparent;border:none;color:#a0a0b8;cursor:pointer;font-size:14px;font-weight:600;transition:all .25s ease;border-radius:6px;position:relative}.tab-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #667eea4d}.tab-button:hover:not(.active){color:#e5e7eb;background-color:#ffffff0d}.practice-header-input{padding:12px 20px;background:linear-gradient(135deg,#2d2d44,#3d3d54);border-bottom:2px solid #4a4a5e;display:flex;align-items:center;gap:15px;flex-shrink:0}.practice-label{color:#e5e7eb;font-weight:600;font-size:14px;white-space:nowrap}.practice-title-input{flex:1;padding:8px 12px;background:#1e1e2e99;border:1px solid #4a4a5e;border-radius:6px;color:#e5e7eb;font-size:14px;outline:none;transition:all .2s ease}.practice-title-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.practice-title-input::placeholder{color:#6b6b85}.practice-content{flex:1;display:flex;overflow:hidden;min-height:0}.practice-content>*{flex:1;min-height:0}.practice-list-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:80px 40px 40px;position:absolute;top:0;left:0;right:0;overflow-y:auto;overflow-x:hidden}.practice-list-content{max-width:1400px;margin:0 auto}.practice-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #2d2d44}.practice-list-header h1{color:#e5e7eb;font-size:32px;margin:0}.new-practice-btn{background:#4a4a5e;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:0 4px 15px #0000004d}.new-practice-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006;background:#5a5a6e}.new-practice-btn .plus-icon{font-size:20px;font-weight:700}.loading-container,.error-container{display:flex;justify-content:center;align-items:center;min-height:400px;color:#a0a0b8;font-size:18px}.error-container{flex-direction:column;gap:10px;color:#ff6b6b}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:500px;text-align:center;color:#a0a0b8}.empty-icon{font-size:80px;margin-bottom:20px;opacity:.5}.empty-state h2{color:#e5e7eb;font-size:28px;margin-bottom:10px}.empty-state p{font-size:16px;margin-bottom:30px}.new-practice-btn-large{background:#4a4a5e;color:#fff;border:none;padding:16px 32px;border-radius:10px;cursor:pointer;font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 20px #0000004d}.new-practice-btn-large:hover{transform:translateY(-2px);box-shadow:0 6px 25px #0006;background:#5a5a6e}.practices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:20px}.practice-card{background:#2d2d44;border:1px solid #3d3d54;border-radius:12px;padding:20px;transition:all .3s ease;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}.practice-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:#4a4a5e;transform:scaleX(0);transition:transform .3s ease}.practice-card:hover:before{transform:scaleX(1)}.practice-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0006;border-color:#4a4a5e}.practice-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.practice-title{color:#e5e7eb;font-size:20px;font-weight:700;margin:0;flex:1;word-wrap:break-word}.delete-practice-btn{background:transparent;border:none;color:#a0a0b8;font-size:28px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease;line-height:1}.delete-practice-btn:hover{background:#ff6b6b1a;color:#ff6b6b;transform:scale(1.1)}.practice-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:#a0a0b8}.practice-date{display:flex;align-items:center;gap:5px}.practice-requirements{color:#a0a0b8;font-size:14px;line-height:1.5;margin:0;flex:1}.practice-stats{display:flex;gap:16px;padding-top:12px;border-top:1px solid #3d3d54;font-size:13px;color:#a0a0b8}.practice-stats span{display:flex;align-items:center;gap:5px}@media (max-width: 768px){.practice-list-header{flex-direction:column;gap:20px;align-items:flex-start}.practice-list-header h1{font-size:24px}.practices-grid{grid-template-columns:1fr}}.page-container{flex:1;overflow-y:auto;background-color:#1e1e1e;color:#ddd}.page-content{max-width:1200px;margin:0 auto;padding:60px 40px}.page-content h1{font-size:48px;color:#fff;margin-bottom:40px;text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-section{margin-bottom:50px}.about-section h2{font-size:32px;color:#007acc;margin-bottom:20px}.about-section p{font-size:18px;line-height:1.8;color:#ccc}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-top:30px}.feature-card{background-color:#2d2d2d;padding:30px;border-radius:12px;border:1px solid #3c3c3c;transition:transform .2s,border-color .2s}.feature-card:hover{transform:translateY(-5px);border-color:#007acc}.feature-card h3{font-size:22px;color:#fff;margin-bottom:15px}.feature-card p{font-size:16px;color:#aaa;line-height:1.6}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px}.contact-info h2{font-size:32px;color:#007acc;margin-bottom:20px}.contact-info p{font-size:18px;line-height:1.8;color:#ccc;margin-bottom:40px}.contact-details{display:flex;flex-direction:column;gap:25px}.contact-item{background-color:#2d2d2d;padding:20px;border-radius:8px;border:1px solid #3c3c3c}.contact-item h3{font-size:18px;color:#fff;margin-bottom:8px}.contact-item p{font-size:16px;color:#aaa;margin:0}.contact-form{background-color:#2d2d2d;padding:40px;border-radius:12px;border:1px solid #3c3c3c}.form-group{margin-bottom:25px}.form-group label{display:block;font-size:14px;font-weight:600;color:#ddd;margin-bottom:8px}.form-group input,.form-group textarea{width:100%;padding:12px;background-color:#1e1e1e;border:1px solid #3c3c3c;border-radius:6px;color:#ddd;font-size:14px;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#007acc}.submit-btn{width:100%;padding:14px;background-color:#007acc;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s}.submit-btn:hover{background-color:#005a9e}@media (max-width: 768px){.contact-grid{grid-template-columns:1fr}}.profile-container{width:100%;min-height:100vh;height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:60px 0 0;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.profile-container::-webkit-scrollbar{width:10px}.profile-container::-webkit-scrollbar-track{background:#0f0f1e}.profile-container::-webkit-scrollbar-thumb{background:#4a4a5e;border-radius:5px;border:2px solid #0f0f1e}.profile-container::-webkit-scrollbar-thumb:hover{background:#6a6a7e}.profile-loading{text-align:center;padding:100px 20px;color:#666;font-size:18px;min-height:100vh;display:flex;align-items:center;justify-content:center}.profile-wrapper{max-width:720px;margin:0 auto;padding:32px 16px 80px;min-height:auto}.profile-card{background:#1e1e2f;border-radius:12px;box-shadow:0 6px 24px #0006;overflow:hidden;margin-bottom:32px;border:1px solid #2d2d44}.profile-header{background:#2d2d44;color:#fff;padding:32px;position:relative}.back-button{background:#fff3;border:none;color:#fff;padding:8px 16px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;margin-bottom:20px}.back-button:hover{background:#ffffff59;transform:translate(-4px)}.back-button svg{transition:transform .2s}.back-button:hover svg{transform:translate(-4px)}.profile-header h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.4px}.header-title-row{display:flex;justify-content:space-between;align-items:center}.edit-icons{display:flex;align-items:center;gap:10px}.pencil-edit-btn{background:#ffffff40;border:2px solid rgba(255,255,255,.5);color:#fff;padding:8px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;width:35px;height:35px}.pencil-edit-btn:hover{background:#ffffff59;border-color:#fffc;transform:rotate(15deg) scale(1.1)}.pencil-edit-btn svg{transition:transform .3s}.success-tick{background:#10b981;border:2px solid rgba(255,255,255,.9);color:#fff;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:tickAppear .5s ease-out;width:35px;height:35px;box-shadow:0 3px 10px #10b98166}@keyframes tickAppear{0%{transform:scale(0) rotate(-180deg);opacity:0}50%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.profile-content{padding:40px 32px;background:#1e1e2f;display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}.profile-photo-section{text-align:center;padding-bottom:0;border-bottom:none;border-right:2px solid #2d2d44;padding-right:24px;position:sticky;top:16px}.profile-photo-wrapper{position:relative;width:128px;height:128px;margin:0 auto 20px}.profile-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #4a4a5e;box-shadow:0 6px 20px #0000004d}.profile-photo-placeholder{width:100%;height:100%;border-radius:50%;background:#4a4a5e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:45px;font-weight:700;border:4px solid #4a4a5e;box-shadow:0 6px 20px #0000004d}.upload-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center}.spinner{border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.upload-photo-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;background:#4a4a5e;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:all .3s;box-shadow:0 3px 10px #0000004d}.upload-photo-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006;background:#5a5a6e}.photo-hint{margin-top:12px;font-size:13px;color:#6b7280}.profile-form{max-width:100%;margin:0}.form-section{margin-bottom:40px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-row .form-group{margin-bottom:0}.form-section h2{font-size:22px;color:#1f2937;transition:all .3s ease}.form-actions:empty{display:none;padding:0;margin:0;border:none}.form-section h2{font-size:18px;color:#a0a0b8;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #2d2d44;font-weight:700}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:12px;font-weight:600;color:#a0a0b8;margin-bottom:8px}.form-group input,.form-group textarea{width:100%;padding:11px 13px;border:2px solid #2d2d44;border-radius:8px;font-size:12px;transition:all .2s;font-family:inherit;background:#16162a;color:#e5e7eb}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#4a4a5e;box-shadow:0 0 0 3px #4a4a5e1a;background:#1a1a30}.form-group input:disabled,.form-group textarea:disabled{background:#1a1a2e;color:#6b7280;cursor:not-allowed;border-color:#2d2d44}.form-group textarea{resize:vertical;min-height:100px}.form-hint{display:block;margin-top:6px;font-size:11px;color:#6b7280;font-style:italic}.form-actions{display:flex;gap:16px;justify-content:flex-end;padding-top:32px;margin-top:32px;border-top:2px solid #e5e7eb}.edit-btn,.save-btn,.cancel-btn{padding:11px 26px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s;border:none}.edit-btn,.save-btn{background:#4a4a5e;color:#fff;box-shadow:0 3px 10px #0000004d}.edit-btn:hover,.save-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0006;background:#5a5a6e}.save-btn:disabled{background:#6b7280;cursor:not-allowed;transform:none;box-shadow:none;opacity:.6}.cancel-btn{background:#2d2d44;color:#e5e7eb;border:2px solid #3d3d54}.cancel-btn:hover{background:#3d3d54;border-color:#4d4d64}.profile-footer{margin-top:38px;padding-top:20px;border-top:2px solid #2d2d44;text-align:center}.member-since{color:#6b7280;font-size:11px;font-weight:500}.toast-message{position:fixed;top:80px;right:20px;padding:16px 24px;border-radius:8px;color:#fff;font-size:14px;font-weight:500;box-shadow:0 4px 12px #00000026;z-index:10000;animation:slideIn .3s ease-out;max-width:400px;word-wrap:break-word}.toast-message.success{background:#10b981}.toast-message.error{background:#ef4444}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.profile-wrapper{padding:16px 8px}.profile-content{padding:24px 16px;grid-template-columns:1fr;gap:24px}.profile-photo-section{border-right:none;border-bottom:2px solid #2d2d44;padding-right:0;padding-bottom:24px;position:static}.profile-header{padding:24px 16px}.profile-header h1{font-size:20px}.header-title-row{flex-direction:row;gap:6px}.pencil-edit-btn,.success-tick{width:32px;height:32px}.profile-photo-wrapper{width:112px;height:112px}.form-row{grid-template-columns:1fr;gap:24px}.form-actions{flex-direction:column}.edit-btn,.save-btn,.cancel-btn{width:100%}.profile-form{max-width:100%}}.app{display:flex;flex-direction:column;width:100%;height:100vh;overflow:hidden;position:relative}.app-header{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:0;box-shadow:0 4px 15px #1a1a2e80;z-index:100;border-bottom:1px solid #2d2d44}.header-row{display:flex;justify-content:space-between;align-items:center;padding:8px 30px;border-bottom:1px solid rgba(255,255,255,.15)}.header-row:last-child{border-bottom:none}.problem-row{background:#00000026}.app-title-link{text-decoration:none}.app-title{margin:0;font-size:24px;font-weight:700;color:#fff;letter-spacing:1px}.problem-title-header{font-size:20px;color:#fff;margin:0;font-weight:600;letter-spacing:.5px}.problem-info-inline{display:flex;align-items:center;gap:20px}.problem-meta{display:flex;gap:10px;align-items:center}.difficulty-tag{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;text-transform:uppercase}.difficulty-tag.difficulty-easy{background-color:#4caf5033;color:#4caf50;border:1px solid #4caf50}.difficulty-tag.difficulty-medium{background-color:#ff980033;color:#ff9800;border:1px solid #ff9800}.difficulty-tag.difficulty-hard{background-color:#f4433633;color:#f44336;border:1px solid #f44336}.category-tag{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:600;background-color:#007acc33;color:#007acc;border:1px solid #007acc}.action-buttons{display:flex;gap:12px}.action-btn{padding:6px 16px;background:none;color:#ddd;border:1px solid #555;border-radius:4px;font-size:13px;font-weight:400;cursor:pointer;transition:border-color .2s,color .2s}.action-btn:hover{border-color:#888;color:#fff}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000}.modal-content{background-color:#2d2d2d;border-radius:12px;border:1px solid #3c3c3c;width:85%;max-width:1400px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 25px;border-bottom:1px solid #2d2d44;background:#2d2d44}.modal-header h3{margin:0;font-size:22px;color:#fff}.modal-close{background:none;border:none;color:#aaa;font-size:32px;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .2s;line-height:1}.modal-close:hover{color:#fff}.modal-body{padding:25px;color:#ddd;font-size:15px;line-height:1.6;overflow-y:auto}.modal-body p{margin:0;color:#aaa}.app-nav{display:flex;gap:25px;align-items:center}.app-nav a{color:#ddd;text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}.app-nav a:hover{color:#007acc}.profile-icon-btn{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;transition:transform .2s}.profile-icon-btn:hover{transform:scale(1.05)}.premium-badge{display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;box-shadow:0 2px 8px #f59e0b4d;animation:premium-glow 2s ease-in-out infinite alternate}.premium-badge svg{fill:#fff}.premium-badge .days-warning{background:#fff3;padding:2px 6px;border-radius:10px;font-size:10px;margin-left:3px}@keyframes premium-glow{0%{box-shadow:0 2px 8px #f59e0b4d}to{box-shadow:0 2px 15px #f59e0b80}}.profile-header-btn{background:none;border:none;cursor:pointer;padding:6px 12px;display:flex;align-items:center;gap:8px;transition:all .2s;border-radius:20px}.profile-header-btn:hover{background:#007acc1a}.profile-username{color:#fff;font-size:14px;font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-icon-img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #007acc}.profile-icon-placeholder{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;border:2px solid #007acc}.app-nav .nav-login{padding:6px 16px;border:1px solid #22c55e;border-radius:4px;color:#22c55e;background:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.app-nav .nav-login:hover{background-color:#22c55e;color:#fff}.app-nav .profile-icon{display:flex;align-items:center;justify-content:center;padding:4px;color:#ddd;transition:all .2s;border-radius:50%;text-decoration:none;cursor:pointer;pointer-events:auto}.app-nav .profile-icon:hover{color:#667eea;background:#667eea1a}.app-nav .premium-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:6px;font-size:13px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(135deg,#f97316,#ea580c);box-shadow:0 2px 8px #f973164d;transition:transform .2s,box-shadow .2s}.app-nav .premium-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px #f9731666}.app-nav .nav-logout{padding:6px 16px;border:1px solid #ef4444;border-radius:4px;color:#ef4444;background:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.app-nav .nav-logout:hover{background-color:#ef4444;color:#fff}.submissions-modal{max-width:800px}.submissions-list{display:flex;flex-direction:column;gap:15px;max-height:60vh;overflow-y:auto}.submission-card{background-color:#252525;border:1px solid #3c3c3c;border-radius:8px;padding:15px;transition:all .2s}.submission-card:hover{border-color:#007acc;box-shadow:0 2px 8px #007acc33}.submission-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.submission-number{font-weight:700;color:#007acc;font-size:16px;min-width:40px}.submission-title{font-weight:600;color:#fff;flex:1;font-size:15px}.language-badge{padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;background-color:#3c3c3c;color:#ddd}.submission-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px}.submission-date{color:#999}.status-badge{padding:3px 10px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.status-badge.submitted{background-color:#22c55e33;color:#22c55e;border:1px solid #22c55e}.submission-stats{display:flex;gap:15px;font-size:12px;color:#aaa;padding-top:10px;border-top:1px solid #3c3c3c}.no-data{text-align:center;color:#999;padding:40px 20px;font-size:15px}.loading-text{text-align:center;color:#007acc;padding:40px 20px;font-size:15px}@keyframes shine{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.app-content{display:flex;flex:1;overflow:hidden}.resize-handle{width:4px;background-color:#333;cursor:col-resize;flex-shrink:0;transition:background-color .2s;position:relative}.resize-handle:hover{background-color:#007acc}.resize-handle:before{content:"";position:absolute;top:0;left:-2px;right:-2px;bottom:0;cursor:col-resize}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%;height:100vh}