.ide-page{background:radial-gradient(circle,#fff 1px,#0000 1px) 0 0/20px 20px,linear-gradient(135deg,#000 0%,#1a1a1a 50%,#000 100%) 0 0/100% 100%;min-height:100vh;padding:90px 1rem 1rem;position:relative;overflow-x:hidden}.ide-container{z-index:1;width:100%;margin:0 auto;position:relative}.ide-workspace{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000f2;border:3px solid #ffffff1a;border-radius:24px;padding:2rem;box-shadow:0 8px 30px #0000001f}.ide-toolbar{border-bottom:2px solid #ffffff1a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;display:flex}.toolbar-left{flex-wrap:wrap;align-items:center;gap:2rem;display:flex}.language-selector{align-items:center;gap:.75rem;display:flex}.language-selector label{color:#fff;font-size:.875rem;font-weight:600}.language-select{color:#000;cursor:pointer;background:#ffffffe6;border:2px solid #0003;border-radius:8px;padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s}.language-select:hover{background:#fff;border-color:#0000004d}.language-select option{color:#000;background:#fff}.font-size-selector{align-items:center;gap:.75rem;display:flex}.font-size-selector label{color:#fff;font-size:.875rem;font-weight:600}.font-size-select{color:#000;cursor:pointer;background:#ffffffe6;border:2px solid #0003;border-radius:8px;padding:.625rem 1rem;font-size:.875rem;font-weight:500;transition:all .3s}.font-size-select:hover{background:#fff;border-color:#0000004d}.font-size-select option{color:#000;background:#fff}.toolbar-right{align-items:center;gap:1rem;display:flex}.toolbar-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:2px solid #ffffff1a;border-radius:10px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;transition:all .3s;display:flex}.toolbar-btn:hover{background:#ffffff1a;border-color:#fff3}.toolbar-btn.primary{color:#fff;background:linear-gradient(135deg,#000 0%,#1a1a1a 100%);border:2px solid #000;box-shadow:0 4px 15px #0006}.toolbar-btn.primary:hover{background:linear-gradient(135deg,#1a1a1a 0%,#000 100%);transform:translateY(-2px);box-shadow:0 8px 25px #00000080}.toolbar-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.spinner-small{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.ide-content{grid-template-columns:1fr 1fr;gap:2rem;min-height:500px;display:grid}.editor-section{background:#0000004d;border:2px solid #ffffff1a;border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.section-header{background:#ffffff0d;border-bottom:2px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.section-title{color:#fff;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;display:flex}.section-info{color:#aaa;background:#ffffff0d;border-radius:6px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.section-actions{align-items:center;gap:.5rem;display:flex}.icon-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:2px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .3s;display:flex}.icon-btn:hover{background:#ffffff1a;border-color:#fff3}.status-indicator{border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.status-indicator.success{color:#16a34a;background:#22c55e1a}.status-indicator.error{color:#dc2626;background:#ef44441a}.code-editor{resize:none;color:#e0e0e0;background:0 0;border:none;outline:none;flex:1;width:100%;padding:1.5rem;font-family:Courier New,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.6}.code-editor::placeholder{color:#666}.editor-container{border-radius:0 0 16px 16px;flex:1;width:100%;min-height:500px;overflow:hidden}.editor-container .monaco-editor{border-radius:0 0 16px 16px}.output-section{background:#0000004d;border:2px solid #ffffff1a;border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.output-area{flex:1;min-height:400px;padding:1.5rem;font-family:Courier New,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.6;overflow-y:auto}.output-area.success{background:#22c55e0d}.output-area.error{background:#ef44440d}.output-content{white-space:pre-wrap;word-wrap:break-word;color:#e0e0e0;margin:0}.output-placeholder{color:#666;text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.output-placeholder svg{opacity:.5;margin-bottom:1rem}.output-placeholder p{margin:0;font-size:.875rem}@media (max-width:768px){.ide-workspace{padding:1.5rem}.ide-toolbar{flex-direction:column;gap:1rem}.toolbar-left,.toolbar-right{justify-content:center;width:100%}.ide-content{grid-template-columns:1fr;gap:1.5rem}.output-area{min-height:300px}}@media (max-width:480px){.ide-page{padding:90px .75rem .75rem}.header-text h1{font-size:1.75rem}.toolbar-btn{justify-content:center;width:100%}.language-selector{justify-content:space-between;width:100%}.language-select{flex:1}}