:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-card:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-primary:#63e2b7;--accent-hover:#4ade80;--accent-secondary:#3b82f6;--danger:#ef4444;--border:#334155;--radius:12px;--font-main:"Inter", sans-serif;--font-title:"Outfit", sans-serif;--transition:all .3s ease}[data-theme=light]{--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-card:#fff;--text-primary:#0f172a;--text-secondary:#64748b;--accent-primary:#059669;--accent-hover:#10b981;--accent-secondary:#2563eb;--border:#e2e8f0}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-primary);color:var(--text-primary);transition:var(--transition);height:100vh;line-height:1.5;overflow:hidden}.app-layout{flex-direction:column;height:100vh;display:flex}.app-header{background-color:var(--bg-card);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.logo{align-items:center;gap:.75rem;display:flex}.logo .icon{font-family:var(--font-title);color:var(--accent-primary);font-size:1.5rem;font-weight:700}.logo h1{font-family:var(--font-title);letter-spacing:-.025em;font-size:1.5rem;font-weight:600}.logo h1 span{color:var(--accent-primary)}.icon-btn{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;transition:var(--transition);background:0 0;border-radius:8px;justify-content:center;align-items:center;padding:.5rem;display:flex}.icon-btn:hover{background-color:var(--bg-secondary)}.icon-btn svg{width:20px;height:20px}[data-theme=light] .sun,[data-theme=dark] .moon{display:none}.main-container{flex:1;grid-template-columns:1fr 340px;transition:grid-template-columns .4s cubic-bezier(.19,1,.22,1);display:grid;overflow:hidden}.main-container.sidebar-hidden{grid-template-columns:1fr 0}.editor-section{border-right:1px solid var(--border);height:100%;position:relative;overflow:hidden}#editor-container{width:100%;height:100%;display:flex}.cm-editor{flex:1;height:100%;max-height:100%;font-size:14px;overflow:hidden}.cm-scroller{overflow:auto!important}.controls-section{background-color:var(--bg-secondary);flex-direction:column;gap:1.5rem;min-width:340px;height:100%;padding:1.5rem;transition:transform .4s,opacity .3s;display:flex;overflow-y:auto}.sidebar-hidden .controls-section{opacity:0;pointer-events:none;min-width:0;padding:0;transform:translate(100%)}.card{background-color:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:1.25rem;box-shadow:0 4px 6px -1px #0000001a}.card h3{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:1rem;font-size:.875rem}.control-group{margin-bottom:1.25rem}.control-group:last-child{margin-bottom:0}.control-group label{color:var(--text-primary);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}select,.file-input{background-color:var(--bg-primary);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:8px;outline:none;padding:.625rem;font-family:inherit;font-size:.875rem;transition:border-color .2s}select:focus{border-color:var(--accent-primary)}.action-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}button{cursor:pointer;transition:var(--transition);border:none;border-radius:8px;padding:.625rem;font-family:inherit;font-size:.875rem;font-weight:600}.primary-btn{background-color:var(--accent-primary);color:#0f172a;grid-column:span 2}.primary-btn:hover{background-color:var(--accent-hover);transform:translateY(-1px)}.secondary-btn{background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border)}.secondary-btn:hover{background-color:var(--border)}.danger-btn{background-color:var(--danger);color:#fff;grid-column:span 2}.danger-btn:hover{opacity:.9}.status-panel{background-color:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;display:flex}.status-dot{background-color:#94a3b8;border-radius:50%;width:8px;height:8px}.status-panel.ok .status-dot{background-color:var(--accent-primary)}.status-panel.error .status-dot{background-color:var(--danger)}.cm-search{background-color:var(--bg-card)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;color:var(--text-primary)!important;padding:1rem!important;box-shadow:0 10px 15px -3px #0000001a!important}.cm-search input{background-color:var(--bg-primary)!important;border:1px solid var(--border)!important;color:var(--text-primary)!important;border-radius:4px!important;outline:none!important;padding:4px 8px!important}.cm-search input:focus{border-color:var(--accent-primary)!important}.cm-search button{background-color:var(--bg-secondary)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;cursor:pointer!important;border-radius:4px!important;margin:0 2px!important;padding:4px 8px!important}.cm-search button:hover{background-color:var(--border)!important}.cm-search button[name=close]{color:var(--danger)!important}@media (width<=768px){.main-container{grid-template-columns:1fr}.controls-section{border-top:1px solid var(--border);max-height:40vh}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}