*{margin:0;padding:0;box-sizing:border-box}:root,body{--bg-primary:#1e1e1e;--bg-secondary:#252525;--bg-tertiary:#2d2d2d;--text-primary:#d4d4d4;--text-secondary:#808080;--border-color:#3e3e3e;--hover-bg:#2a2a2a;--accent-color:#007acc;--error-bg:#3e1e1e;--error-border:#f14c4c;--error-text:#f14c4c}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);transition:background-color 0.3s,color 0.3s}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;max-width:100vw;max-height:100vh;margin:0;padding:0;position:fixed;top:0;left:0;right:0;bottom:0}.app-header{background:#252526;padding:10px 20px;border-bottom:1px solid #3e3e42;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;min-height:50px}.app-header h1{font-size:18px;font-weight:600;color:#cccccc;margin:0;flex:0 0 auto;white-space:nowrap}.render-controls{display:flex;align-items:center;gap:15px}.main-content{display:flex;flex:1;overflow:hidden;position:relative;min-height:0}.left-panel{display:flex;flex-direction:column;width:50%;min-width:250px;max-width:80%;background:#1e1e1e;overflow:hidden}.right-panel{display:flex;flex-direction:column;flex:1;min-width:250px;background:#1e1e1e;overflow:hidden}.editor-section{display:flex;flex-direction:column;overflow:hidden;min-height:0}.template-section{flex:1;min-height:150px}.data-section{flex:1;min-height:150px}.section-header{background:#2d2d30;padding:8px 12px;border-bottom:1px solid #3e3e42;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;min-height:40px;gap:10px;flex-wrap:wrap}.header-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.section-header h2{font-size:13px;font-weight:600;color:#cccccc;white-space:nowrap;margin:0}.filename-display{font-size:11px;color:#858585;font-family:'Consolas','Monaco','Courier New',monospace;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.filename-display.modified::after{content:' *';color:#f48771;font-weight:bold;font-style:normal}.button-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.editor-container{flex:1;width:100%;overflow:hidden;min-height:0;background:#1e1e1e}.cm-editor{height:100%;font-size:13px;font-family:'Consolas','Monaco','Courier New',monospace}.cm-scroller{overflow:auto;font-family:'Consolas','Monaco','Courier New',monospace}.cm-content{padding:12px 0;font-family:'Consolas','Monaco','Courier New',monospace}.cm-line{padding:0 12px}.cm-gutters{background:#1e1e1e;border-right:1px solid #3e3e42;color:#858585}.cm-activeLineGutter{background:#2d2d30}.cm-activeLine{background:#2d2d30}.cm-focused{outline:none}.cm-focused .cm-selectionBackground{background:#264f78!important}.btn{padding:8px 16px;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s ease;outline:none}.btn-primary{background:#0e639c;color:#ffffff;padding:8px 20px;font-size:13px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.btn-primary:hover{background:#1177bb;box-shadow:0 2px 6px rgba(0,0,0,0.3)}.btn-primary:active{background:#0d5689;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.btn-secondary{background:#3e3e42;color:#cccccc;font-size:11px;padding:5px 10px;white-space:nowrap}.btn-secondary:hover{background:#4e4e52}.btn-secondary:active{background:#2e2e32}.btn-small{padding:4px 8px;font-size:10px}.btn-sample{background:#2d6d4e;color:#e8e8e8;border:1px solid #3a8f63;font-weight:500}.btn-sample:hover{background:#3a8f63;border-color:#4ec9b0;color:#ffffff}.btn-sample:active{background:#255a3d;border-color:#2d6d4e}.toggle-group{display:flex;align-items:center;padding:2px 6px;background:#2d2d30;border-radius:4px}.toggle-label{position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none}.toggle-label input[type="checkbox"]{display:none}.toggle-slider{position:relative;width:38px;height:18px;background:#3e3e42;border-radius:9px;transition:background 0.3s ease;margin-right:6px;flex-shrink:0}.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#007acc;top:2px;left:2px;transition:transform 0.3s ease}.toggle-label input[type="checkbox"]:checked + .toggle-slider::before{transform:translateX(20px)}.toggle-text{display:flex;gap:6px;font-size:10px;font-weight:600;color:#cccccc;white-space:nowrap}.yaml-label{color:#f48771}.json-label{color:#75beff}.auto-render-toggle{display:inline-flex;align-items:center;cursor:pointer;user-select:none;padding:6px 12px;background:#2d2d30;border-radius:4px;transition:background 0.2s ease}.auto-render-toggle:hover{background:#3e3e42}.auto-render-toggle input[type="checkbox"]{display:none}.auto-render-slider{position:relative;width:38px;height:18px;background:#3e3e42;border-radius:9px;transition:background 0.3s ease;margin-right:8px;flex-shrink:0}.auto-render-slider::before{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#6e6e6e;top:2px;left:2px;transition:all 0.3s ease}.auto-render-toggle input[type="checkbox"]:checked + .auto-render-slider{background:#0e639c}.auto-render-toggle input[type="checkbox"]:checked + .auto-render-slider::before{transform:translateX(20px);background:#ffffff}.auto-render-label{font-size:12px;font-weight:600;color:#cccccc;white-space:nowrap}.auto-render-toggle input[type="checkbox"]:checked ~ .auto-render-label{color:#4ec9b0}.btn-primary:disabled{background:#4e4e52;color:#888888;cursor:not-allowed;opacity:0.5;box-shadow:none}.btn-primary:disabled:hover{background:#4e4e52;box-shadow:none}.divider{background:#3e3e42;position:relative;z-index:10}.vertical-divider{width:6px;cursor:col-resize;flex-shrink:0}.vertical-divider:hover{background:#007acc}.horizontal-divider{height:6px;cursor:row-resize;flex-shrink:0}.horizontal-divider:hover{background:#007acc}.divider.dragging{background:#007acc}.output-frame{flex:1;width:100%;background:var(--bg-primary);overflow:auto;padding:15px;min-height:0}.toast{position:fixed;right:20px;bottom:20px;background:rgba(40,40,40,0.95);color:#fff;padding:10px 14px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.35);font-size:13px;opacity:0;transform:translateY(8px);transition:opacity 180ms ease,transform 180ms ease;z-index:10000;pointer-events:none}.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}.toast.success{background:rgba(46,125,50,0.95)}.toast.info{background:rgba(33,150,243,0.95)}.toast.warn{background:rgba(255,152,0,0.95)}.toast.error{background:rgba(211,47,47,0.95)}.error-display{background:#5a1d1d;border:1px solid #be1100;border-left:4px solid #f48771;color:#f48771;padding:12px 15px;margin:15px;border-radius:4px;font-family:'Consolas','Monaco','Courier New',monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}.error-display strong{display:block;margin-bottom:6px;font-size:13px;color:#ff6b6b}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1e1e1e}::-webkit-scrollbar-thumb{background:#424242;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#4e4e4e}::selection{background:#264f78;color:#ffffff}@media (max-width:1024px){.section-header{padding:6px 10px}.section-header h2{font-size:12px}.btn-secondary{font-size:10px;padding:4px 8px}.auto-render-toggle{padding:4px 8px}.auto-render-label{font-size:11px}.filename-display{font-size:10px;max-width:150px}}@media (max-width:768px){.main-content{flex-direction:column}.left-panel{width:100%!important;height:50%;max-width:100%}.vertical-divider{width:100%;height:6px;cursor:row-resize}.app-header{padding:8px 12px}.app-header h1{font-size:14px}.button-group{gap:4px}.btn-primary{padding:6px 16px;font-size:12px}.toggle-text{font-size:9px}.render-controls{gap:8px;flex-wrap:wrap}.auto-render-label{font-size:10px}.auto-render-toggle{padding:3px 6px}.filename-display{font-size:9px;max-width:100px}.header-title{gap:4px}}.loading{opacity:0.6;pointer-events:none}.success-message{background:#1e5127;border:1px solid #4ec9b0;border-left:4px solid #4ec9b0;color:#4ec9b0;padding:10px 15px;margin:15px;border-radius:4px;font-size:12px}.modal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);animation:fadeIn 0.2s}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;max-width:900px;width:90%;max-height:80vh;display:flex;flex-direction:column;animation:slideIn 0.3s}.modal-content.modal-large{max-width:1100px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0;font-size:20px;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:28px;color:var(--text-secondary);cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s}.modal-close:hover{background-color:var(--hover-bg);color:var(--text-primary)}.modal-body{padding:20px;overflow-y:auto;flex:1}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.template-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;padding:15px;cursor:pointer;transition:all 0.2s}.template-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.3)}.template-card h3{margin:0 0 8px 0;font-size:16px;color:var(--text-primary)}.template-card p{margin:0;font-size:13px;color:var(--text-secondary);line-height:1.4}.template-card .template-category{display:inline-block;padding:3px 8px;border-radius:3px;font-size:11px;margin-top:10px;background-color:var(--hover-bg);color:var(--accent-color)}.filter-item{background:var(--bg-secondary);padding:12px;border-radius:6px;border-left:3px solid var(--accent-color)}.filter-item strong{color:var(--accent-color);display:block;margin-bottom:6px}.filter-item code{background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-family:'Courier New',monospace;font-size:12px;color:#4ec9b0}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}body.light-theme{--bg-primary:#ffffff;--bg-secondary:#f5f5f5;--bg-tertiary:#e0e0e0;--text-primary:#1e1e1e;--text-secondary:#666666;--border-color:#d0d0d0;--hover-bg:#e8e8e8;--accent-color:#0066cc;--error-bg:#fff0f0;--error-border:#ff4444;--error-text:#cc0000}body.light-theme .cm-editor{background-color:#ffffff!important}body.light-theme .cm-gutters{background-color:#f5f5f5!important;border-right-color:#d0d0d0!important}body.light-theme .cm-activeLine{background-color:#f0f0f0!important}body.light-theme .cm-content{color:#1e1e1e!important}