@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--vscode-bg:#1e1e1e;--vscode-sidebar:#252526;--vscode-editor:#1e1e1e;--vscode-panel:#181818;--vscode-border:#3c3c3c;--vscode-text:#d4d4d4;--vscode-text-muted:#969696;--vscode-accent:#007acc;--vscode-error:#f14c4c;--vscode-warning:#ffcc02;--vscode-success:#89d185;--vscode-info:#75beff;--brand-yellow:#fbbf24;--brand-yellow-hover:#fb923c;--brand-yellow-dark:#f59e0b;--syntax-keyword:#569cd6;--syntax-string:#ce9178;--syntax-number:#b5cea8;--syntax-comment:#6a9955;--syntax-function:#dcdcaa;--syntax-variable:#9cdcfe;--syntax-type:#4ec9b0}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--vscode-bg);color:var(--vscode-text);height:100vh;font-family:JetBrains Mono,monospace;overflow:hidden}@media (max-width:768px){body{height:auto;overflow:auto}}.ide-container{width:100vw;height:100vh;display:flex}.ide-titlebar{background:var(--vscode-panel);border-bottom:1px solid var(--vscode-border);height:30px;color:var(--vscode-text);z-index:1000;-webkit-user-select:none;-moz-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:12px;display:flex;position:fixed;top:0;left:0;right:0}.ide-titlebar .title{font-weight:500}.window-controls{gap:8px;display:flex;position:absolute;left:10px}.window-control{cursor:pointer;border-radius:50%;width:12px;height:12px}.control-close{background:#ff5f57}.control-minimize{background:#ffbd2e}.control-maximize{background:#28ca42}.ide-activity-bar{background:var(--vscode-sidebar);border-right:1px solid var(--vscode-border);flex-direction:column;width:48px;padding:40px 0 10px;display:flex}.activity-item{cursor:pointer;width:48px;height:48px;color:var(--vscode-text-muted);justify-content:center;align-items:center;transition:all .2s;display:flex;position:relative}.activity-item:hover{color:var(--vscode-text)}.activity-item.active{color:var(--vscode-text);background:var(--vscode-bg)}.activity-item.active:before{content:"";background:var(--vscode-accent);width:2px;position:absolute;top:0;bottom:0;left:0}.ide-sidebar{background:var(--vscode-sidebar);border-right:1px solid var(--vscode-border);width:300px;padding-top:30px;overflow-y:auto}.sidebar-section{margin-bottom:20px}.sidebar-header{text-transform:uppercase;color:var(--vscode-text-muted);background:var(--vscode-sidebar);padding:8px 16px;font-size:11px;font-weight:600;position:-webkit-sticky;position:sticky;top:0}.file-explorer{padding:0 8px}.file-item{cursor:pointer;color:var(--vscode-text);border-radius:3px;align-items:center;padding:4px 8px;font-size:13px;display:flex;position:relative}.file-item:hover{background:rgba(255,255,255,.1)}.file-item.active{background:var(--vscode-accent);color:#fff}.file-item.error:after{content:"●";color:var(--vscode-error);margin-left:auto;font-size:16px}.file-item.warning:after{content:"●";color:var(--vscode-warning);margin-left:auto;font-size:16px}.file-icon{flex-shrink:0;width:16px;height:16px;margin-right:8px}.folder-toggle{width:16px;height:16px;color:var(--vscode-text-muted);justify-content:center;align-items:center;margin-right:4px;font-size:10px;display:flex}.problems-list{background:var(--vscode-sidebar-background);max-height:400px;overflow-y:auto}.problems-list::-webkit-scrollbar{width:8px}.problems-list::-webkit-scrollbar-track{background:var(--vscode-scrollbar-track)}.problems-list::-webkit-scrollbar-thumb{background:var(--vscode-scrollbar-thumb);border-radius:4px}.problems-list::-webkit-scrollbar-thumb:hover{background:var(--vscode-scrollbar-thumb-hover)}.problems-section{flex-direction:column;flex:1;min-height:0;display:flex}.problems-section .problems-list{flex:1;min-height:0}.problem-item{border-bottom:1px solid var(--vscode-border);cursor:pointer;align-items:flex-start;padding:8px 16px;font-size:12px;display:flex}.problem-item:hover{background:rgba(255,255,255,.05)}.problem-icon{flex-shrink:0;width:16px;height:16px;margin-top:1px;margin-right:8px}.problem-error{color:var(--vscode-error)}.problem-warning{color:var(--vscode-warning)}.problem-info{color:var(--vscode-info)}.problem-content{flex:1}.problem-message{color:var(--vscode-text);margin-bottom:2px;line-height:1.4}.problem-location{color:var(--vscode-text-muted);font-size:11px}.ide-editor-area{flex-direction:column;flex:1;padding-top:30px;display:flex}.ide-tabs{background:var(--vscode-editor);border-bottom:1px solid var(--vscode-border);min-height:35px;display:flex}.tab{background:var(--vscode-panel);border-right:1px solid var(--vscode-border);cursor:pointer;min-width:120px;color:var(--vscode-text);align-items:center;padding:0 16px;font-size:13px;transition:all .2s;display:flex;position:relative}.tab:hover:not(.active){background:rgba(255,255,255,.05)}.tab.active{background:var(--vscode-editor);border-bottom:1px solid var(--vscode-editor)}.tab.dirty:after{content:"●";color:var(--vscode-text-muted);margin-left:8px}.tab.error{color:var(--vscode-error)}.tab-close{opacity:0;border-radius:3px;margin-left:auto;margin-right:-4px;padding:2px;transition:opacity .2s}.tab:hover .tab-close{opacity:1}.tab-close:hover{background:rgba(255,255,255,.1)}.ide-editor{background:var(--vscode-editor);flex:1;position:relative;overflow:auto}.editor-content{white-space:pre-wrap;color:var(--vscode-text);padding:16px;font-family:JetBrains Mono,monospace;font-size:14px;line-height:1.6}.code-line{min-height:22px;display:flex;position:relative}.line-number{color:var(--vscode-text-muted);text-align:right;border-right:1px solid var(--vscode-border);-webkit-user-select:none;-moz-user-select:none;user-select:none;min-width:40px;margin-right:16px;padding-right:16px;font-size:12px}.line-content{flex:1}.code-line.error{border-left:2px solid var(--vscode-error);background:rgba(244,76,76,.1);padding-left:8px}.code-line.warning{border-left:2px solid var(--vscode-warning);background:rgba(255,204,2,.1);padding-left:8px}.code-line.success{border-left:2px solid var(--vscode-success);background:rgba(137,209,133,.1);padding-left:8px;animation:2s ease-out flash-success}@keyframes flash-success{0%{background:rgba(137,209,133,.3)}to{background:rgba(137,209,133,.1)}}.file-header{background:var(--vscode-editor);border-bottom:1px solid var(--vscode-border);color:var(--vscode-text-muted);justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;display:flex}.file-path{align-items:center;display:flex}.path-segment{color:var(--vscode-text-muted)}.path-separator{color:var(--vscode-text-muted);margin:0 4px}.active-file{font-weight:500;color:var(--vscode-text)!important}.file-actions{align-items:center;gap:8px;display:flex}.file-status-badges{gap:6px;display:flex}.status-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:500}.status-badge.error{color:var(--vscode-error);background:rgba(244,76,76,.2);border:1px solid rgba(244,76,76,.3)}.status-badge.warning{color:var(--vscode-warning);background:rgba(255,204,2,.2);border:1px solid rgba(255,204,2,.3)}.status-badge.success{color:var(--vscode-success);background:rgba(137,209,133,.2);border:1px solid rgba(137,209,133,.3)}.syntax-keyword{color:#569cd6}.syntax-string{color:#ce9178}.syntax-comment{color:#6a9955}.syntax-number{color:#b5cea8}.syntax-property{color:#9cdcfe}.error-underline{text-decoration:underline;-webkit-text-decoration-color:var(--vscode-error);text-decoration-color:var(--vscode-error);-webkit-text-decoration-style:wavy;text-decoration-style:wavy}.warning-underline{text-decoration:underline;-webkit-text-decoration-color:var(--vscode-warning);text-decoration-color:var(--vscode-warning);-webkit-text-decoration-style:wavy;text-decoration-style:wavy}.ide-terminal{background:var(--vscode-panel);border-top:1px solid var(--vscode-border);flex-direction:column;height:300px;display:flex}.terminal-tabs{background:var(--vscode-panel);border-bottom:1px solid var(--vscode-border);min-height:30px;display:flex}.terminal-tab{cursor:pointer;border-right:1px solid var(--vscode-border);align-items:center;padding:0 12px;font-size:12px;display:flex}.terminal-tab.active{background:var(--vscode-bg);border-bottom:1px solid var(--vscode-bg)}.terminal-content{background:var(--vscode-bg);color:var(--vscode-text);flex:1;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:13px;overflow-y:auto}.terminal-line{align-items:flex-start;margin-bottom:4px;display:flex}.terminal-prompt{color:var(--vscode-success);flex-shrink:0;margin-right:8px}.terminal-command{color:var(--vscode-text);flex:1}.terminal-output{color:var(--vscode-text-muted);flex:1;margin-left:16px}.terminal-error{color:var(--vscode-error);flex:1;margin-left:16px}.terminal-warning{color:var(--vscode-warning);flex:1;margin-left:16px}.terminal-info{color:var(--vscode-info);flex:1;margin-left:16px}.terminal-success{color:var(--vscode-success);flex:1;margin-left:16px}.typing-cursor:after{content:"|";animation:1s infinite blink}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.floating-actions{z-index:1500;flex-direction:column;gap:16px;display:flex;position:fixed;bottom:32px;right:32px}.floating-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:12px;padding:16px 32px;font-size:16px;font-weight:700;transition:all .3s;animation:4s ease-in-out infinite pulse-glow;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 2px rgba(255,215,0,.3)}.floating-btn:hover{animation:none;transform:translateY(-4px)scale(1.02);box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 3px rgba(255,215,0,.6)}.floating-btn.primary{background:linear-gradient(135deg,var(--brand-yellow)0%,var(--brand-yellow-hover)100%);color:#000;border:2px solid var(--brand-yellow-dark);font-weight:800}.floating-btn.primary:hover{background:linear-gradient(135deg,var(--brand-yellow-hover)0%,var(--brand-yellow)100%);border-color:var(--brand-yellow)}.floating-btn.secondary{color:var(--brand-yellow);background:linear-gradient(135deg,rgba(255,215,0,.2) 0%,rgba(255,215,0,.1) 100%);border:2px solid rgba(255,215,0,.4);font-weight:700}.floating-btn.secondary:hover{border-color:var(--brand-yellow);color:var(--brand-yellow-hover);background:linear-gradient(135deg,rgba(255,215,0,.3) 0%,rgba(255,215,0,.2) 100%)}@keyframes pulse-glow{0%,to{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 2px rgba(255,215,0,.3)}50%{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 3px rgba(255,215,0,.4),0 0 10px rgba(255,215,0,.2)}}.upgrade-modal{z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#3a3a3a;border:1px solid #555;border-radius:12px;min-width:500px;max-width:650px;padding:32px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 16px 48px rgba(0,0,0,.7)}.upgrade-modal.hidden{display:none}.modal-header{text-align:center;margin-bottom:24px}.modal-title{color:#ff6b6b;margin-bottom:12px;font-size:20px;font-weight:700;line-height:1.3}.modal-subtitle{color:var(--vscode-text);font-size:15px;font-weight:500;line-height:1.5}.modal-content{margin-bottom:28px}.fix-item{background:var(--vscode-bg);border-left:3px solid transparent;border-radius:6px;align-items:flex-start;margin-bottom:16px;padding:12px;display:flex}.fix-item:has(.fix-icon-critical){background:rgba(255,138,128,.08);border-left-color:#ff8a80}.fix-item:has(.fix-icon-high){background:rgba(255,183,77,.08);border-left-color:#ffb74d}.fix-icon{width:16px;height:16px;margin-top:2px;margin-right:8px;font-size:14px}.fix-icon-critical{color:#ff8a80}.fix-icon-high{color:#ffb74d}.fix-icon-medium{color:var(--vscode-warning)}.fix-icon-low{color:var(--vscode-text-muted)}.fix-description{color:var(--vscode-text);flex:1;font-size:14px;line-height:1.25}.fix-description strong{color:#fff;margin-bottom:0;font-weight:600;display:block}.modal-actions{flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;display:flex}.btn-modal{border:2px solid var(--vscode-border);background:var(--vscode-sidebar);color:var(--vscode-text);cursor:pointer;text-transform:uppercase;letter-spacing:.3px;border-radius:8px;flex:1;justify-content:center;align-items:center;min-width:200px;max-width:250px;min-height:48px;padding:14px 28px;font-size:15px;font-weight:600;transition:all .3s;display:flex}.btn-modal:hover{background:var(--vscode-bg);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}.btn-modal.btn-primary{border-color:var(--brand-yellow);color:var(--brand-yellow);background:rgba(255,215,0,.1);font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2)}.btn-modal.btn-primary:hover{border-color:var(--brand-yellow-hover);color:var(--brand-yellow-hover);background:rgba(255,215,0,.2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3),0 0 0 1px rgba(255,215,0,.4)}.btn-modal.btn-success{background:linear-gradient(135deg,var(--brand-yellow)0%,var(--brand-yellow-hover)100%);border-color:var(--brand-yellow-dark);color:#000;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.2),0 0 0 1px rgba(255,215,0,.3)}.btn-modal.btn-success:hover{background:linear-gradient(135deg,var(--brand-yellow-hover)0%,var(--brand-yellow)100%);border-color:var(--brand-yellow);box-shadow:0 6px 20px rgba(0,0,0,.3),0 0 0 2px rgba(255,215,0,.5)}@media (max-width:768px){.ide-sidebar{width:250px}.ide-terminal{height:200px}.upgrade-modal{min-width:90vw;max-width:90vw;padding:20px}.floating-actions{gap:12px;bottom:24px;right:24px}.floating-btn{border-radius:10px;padding:14px 24px;font-size:14px}.file-header{padding:6px 12px}.file-status-badges{flex-direction:column;gap:2px}.ide-tabs{overflow-x:auto}.tab{min-width:100px}}
.mobile-preview{color:#d4d4d4;background:#1e1e1e;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:JetBrains Mono,Monaco,Cascadia Code,monospace;display:flex}.mobile-titlebar{color:#d4d4d4;background:#181818;border-bottom:1px solid #3c3c3c;justify-content:center;align-items:center;height:44px;padding:0 16px;font-size:14px;display:flex;position:relative}.mobile-window-controls{gap:8px;display:flex;position:absolute;left:10px}.mobile-window-control{border-radius:50%;width:12px;height:12px}.mobile-control-close{background:#ff5f57}.mobile-control-minimize{background:#ffbd2e}.mobile-control-maximize{background:#28ca42}.mobile-title{text-align:center;flex:1;padding:0 60px;font-weight:500}.mobile-activity-bar{background:#252526;border-bottom:1px solid #3c3c3c;justify-content:center;align-items:center;gap:28px;height:56px;padding:0 20px;display:flex}.mobile-activity-item{color:#969696;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:15px;text-decoration:none;transition:all .2s;display:flex}.mobile-activity-item:hover{color:#d4d4d4;background:rgba(255,255,255,.05)}.mobile-activity-item.active{color:#d4d4d4;background:rgba(255,255,255,.1)}.mobile-content{flex:1;max-width:100%;padding:max(20px,min(5vw,32px)) max(16px,min(4vw,24px));overflow-x:hidden}.mobile-hero{text-align:center;margin-bottom:32px}.mobile-hero-title{color:#f8fafc;background:linear-gradient(135deg,#fbbf24,#fb923c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:16px;padding:0 4px;font-size:max(24px,min(6vw,32px));font-weight:700;line-height:1.1}.mobile-hero-subtitle{color:#94a3b8;margin:0;padding:0 8px;font-size:max(16px,min(4vw,20px));line-height:1.5}.code-comparison{margin-bottom:40px}.comparison-title{text-align:center;color:#f8fafc;margin-bottom:32px;font-size:24px;font-weight:600;line-height:1.3}.code-split{flex-direction:column;gap:24px;display:flex}.code-panel{background:#1e1e1e;border:1px solid #3c3c3c;border-radius:8px;margin-bottom:8px;overflow:hidden}.code-panel-tabs{background:#1e1e1e;border-bottom:1px solid #3c3c3c;display:flex}.code-panel-tab{color:#d4d4d4;background:#181818;border-right:1px solid #3c3c3c;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex;position:relative}.code-panel-tab.active{background:#1e1e1e;border-bottom:1px solid #1e1e1e}.code-panel-tab.broken:after{content:"●";color:#f14c4c;font-size:16px}.code-panel-tab.fixed:after{content:""}.code-panel-header{color:#969696;background:#1e1e1e;border-bottom:1px solid #3c3c3c;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;display:flex}.status-badge-mobile{text-transform:uppercase;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:500}.status-badge-mobile.error{color:#f14c4c;background:rgba(244,76,76,.2);border:1px solid rgba(244,76,76,.3)}.status-badge-mobile.success{color:#89d185;background:rgba(137,209,133,.2);border:1px solid rgba(137,209,133,.3)}.code-panel-body{-webkit-overflow-scrolling:touch;background:#1e1e1e;padding:max(12px,min(3vw,20px)) max(12px,min(3vw,16px));font-family:JetBrains Mono,Monaco,Cascadia Code,monospace;font-size:max(12px,min(3vw,14px));line-height:1.6;overflow-x:auto}.code-line{white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;margin-bottom:8px;line-height:1.7}.code-broken{color:#f14c4c}.code-comment{color:#6a9955}.code-fixed{color:#89d185}.code-keyword{color:#569cd6}.code-string{color:#ce9178}.mobile-features{text-align:left;margin-bottom:40px}.features-title{color:#f8fafc;text-align:center;margin-bottom:24px;font-size:max(20px,min(5vw,24px));font-weight:600;line-height:1.3}.mobile-feature-list{flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;display:flex}.mobile-feature-list li{background:rgba(255,255,255,.03);border:1px solid #3c3c3c;border-radius:8px;align-items:flex-start;gap:16px;padding:16px;transition:all .3s;display:flex}.mobile-feature-list li:hover{background:rgba(255,255,255,.05);border-color:#4a4a4a}.feature-icon{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:2px;font-size:14px;display:flex}.feature-text{flex:1;font-size:14px;line-height:1.25}.feature-text strong{color:#f8fafc;margin-bottom:2px;font-weight:600;display:block}.feature-text{color:#94a3b8}.mobile-actions{flex-direction:column;gap:max(16px,min(4vw,20px));margin-bottom:max(32px,min(8vw,48px));padding:0 4px;display:flex}.mobile-btn{text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none;border-radius:max(8px,min(2vw,12px));padding:max(16px,min(4vw,20px)) max(20px,min(5vw,28px));font-size:max(16px,min(4vw,18px));font-weight:600;text-decoration:none;transition:all .3s;display:block}.mobile-btn.primary{color:#0f172a;background:linear-gradient(135deg,#fbbf24,#fb923c);border:none;box-shadow:0 4px 16px rgba(251,191,36,.3)}.mobile-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(251,191,36,.4)}.mobile-btn.secondary{color:#e2e8f0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}.mobile-btn.secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}.mobile-footer{text-align:center;color:#64748b;font-size:12px;line-height:1.5}.screen-hint{text-align:center;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);border-radius:12px;margin-bottom:40px;padding:24px 20px}.screen-hint-title{color:#93c5fd;margin-bottom:12px;font-size:16px;font-weight:600}.screen-hint-text{color:#cbd5e1;font-size:15px;line-height:1.5}.mobile-preview{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.mobile-btn:active{transition:transform .1s;transform:scale(.95)}.mobile-activity-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}.mobile-activity-item:active{transition:transform .1s;transform:scale(.95)}@media (max-width:480px){.code-panel-body{padding:8px 12px;font-size:11px;line-height:1.8}.mobile-hero{margin-bottom:24px}.mobile-hero-title{margin-bottom:12px;font-size:22px}.mobile-hero-subtitle{font-size:15px}.comparison-title{margin-bottom:24px;font-size:20px}.mobile-content{padding:16px 12px}.mobile-titlebar{height:40px;font-size:12px}.mobile-title{padding:0 50px;font-size:12px}}@media (max-height:500px) and (orientation:landscape){.mobile-hero{margin-bottom:16px}.mobile-hero-title{margin-bottom:8px;font-size:20px}.mobile-hero-subtitle{font-size:14px}.mobile-content{padding:12px 16px}.code-comparison,.mobile-actions{margin-bottom:24px}}@media (min-width:769px){.mobile-preview{display:none}}@media (max-width:768px){.ide-container{display:none!important}}