*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base: #0d0f14;--bg-surface: #13161d;--bg-elevated: #1a1d27;--bg-overlay: #21253a;--border: rgba(255, 255, 255, .07);--border-accent: rgba(99, 179, 237, .3);--text-primary: #e8eaf2;--text-secondary: #8892a4;--text-muted: #4a5568;--accent: #63b3ed;--accent-hover: #90cdf4;--accent-glow: rgba(99, 179, 237, .15);--success: #68d391;--success-bg: rgba(104, 211, 145, .1);--success-border: rgba(104, 211, 145, .3);--error: #fc8181;--error-bg: rgba(252, 129, 129, .08);--error-border: rgba(252, 129, 129, .3);--error-line-bg: rgba(252, 129, 129, .06);--warn: #f6ad55;--warn-bg: rgba(246, 173, 85, .1);--syn-key: #63b3ed;--syn-string: #68d391;--syn-number: #f6ad55;--syn-bool: #b794f4;--syn-null: #718096;--syn-punct: #8892a4}.cm-editor{--yaml-key: #90cdf4;--yaml-string: #68d391;--yaml-number: #f6ad55;--yaml-bool: #b794f4;--yaml-null: #a0aec0;--yaml-comment: #4a5568;--yaml-punct: #8892a4}:root{--header-h: 64px;--tabbar-h: 50px;--font-ui: "Inter", system-ui, sans-serif;--font-code: "JetBrains Mono", "Fira Code", monospace;--radius: 10px;--radius-sm: 6px;--transition: .18s ease}[data-theme=light]{--bg-base: #f7fafc;--bg-surface: #ffffff;--bg-elevated: #edf2f7;--bg-overlay: #e2e8f0;--border: rgba(0, 0, 0, .08);--border-accent: rgba(49, 130, 206, .3);--text-primary: #1a202c;--text-secondary: #4a5568;--text-muted: #718096;--accent: #3182ce;--accent-hover: #2b6cb0;--accent-glow: rgba(49, 130, 206, .1);--success: #38a169;--success-bg: rgba(56, 161, 105, .1);--success-border: rgba(56, 161, 105, .3);--error: #e53e3e;--error-bg: rgba(229, 62, 62, .08);--error-border: rgba(229, 62, 62, .3);--error-line-bg: rgba(229, 62, 62, .06);--warn: #dd6b20;--warn-bg: rgba(221, 107, 32, .1)}[data-theme=light] .cm-editor{--yaml-key: #0451a5;--yaml-string: #a31515;--yaml-number: #098658;--yaml-bool: #0000ff;--yaml-null: #0000ff;--yaml-comment: #008000;--yaml-punct: #333333}html{height:100%}body{height:100%;font-family:var(--font-ui);background:var(--bg-base);color:var(--text-primary);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;position:relative;overflow:hidden}.header:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,179,237,.04) 0%,transparent 60%);pointer-events:none}.header-inner{padding:0 24px;display:flex;align-items:center;gap:20px;width:100%}.logo{display:flex;align-items:center;gap:10px}.logo-icon{font-size:22px;filter:drop-shadow(0 0 8px rgba(99,179,237,.6));animation:pulse-glow 3s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 8px rgba(99,179,237,.6))}50%{filter:drop-shadow(0 0 16px rgba(99,179,237,.9))}}.logo-text{font-size:20px;font-weight:700;background:linear-gradient(135deg,#e8eaf2,#63b3ed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.header-tagline{color:var(--text-muted);font-size:12px;letter-spacing:.3px}.tab-bar{height:var(--tabbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:flex-end;padding:0 20px;gap:2px}.tab{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-ui);font-size:13.5px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:2px solid transparent;transition:all var(--transition);position:relative}.tab:hover{color:var(--text-primary);background:var(--bg-elevated)}.tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-elevated)}.tab-icon{font-family:var(--font-code);font-size:12px;opacity:.7}.editor-area{flex:1;overflow:hidden;position:relative}.panel{display:none;flex-direction:column;height:100%}.panel.active{display:flex}.pane-wrapper{display:grid;grid-template-columns:1fr auto 1fr;flex:1;overflow:hidden;gap:0}.pane{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-surface)}.pane-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg-elevated);flex-shrink:0}.pane-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);display:flex;align-items:center;gap:6px}.editable-hint{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);background:var(--accent-glow);border:1px solid var(--border-accent);border-radius:4px;padding:1px 5px;vertical-align:middle}.pane-actions{display:flex;gap:6px}.editor-container{flex:1;display:flex;overflow:hidden;position:relative}.cm-container{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.cm-editor{flex:1;height:100%}.cm-scroller{overflow:auto}.output-container{position:relative}.cm-editor .cm-yaml-bool{color:var(--yaml-bool)!important}.cm-editor .cm-yaml-number{color:var(--yaml-number)!important}.cm-editor .cm-yaml-null{color:var(--yaml-null)!important;font-style:italic}.pane-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 12px;background:var(--bg-surface);border-left:1px solid var(--border);border-right:1px solid var(--border);position:relative}.pane-divider:before,.pane-divider:after{content:"";position:absolute;left:50%;transform:translate(-50%);width:1px;background:linear-gradient(to bottom,transparent,var(--border),transparent)}.pane-divider:before{top:0;height:calc(50% - 70px)}.pane-divider:after{bottom:0;height:calc(50% - 70px)}.btn-format,.btn-minify{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 14px;border:1px solid var(--border-accent);border-radius:var(--radius);background:var(--accent-glow);color:var(--accent);font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all var(--transition);position:relative;z-index:1;min-width:64px}.btn-format svg,.btn-minify svg{width:18px;height:18px}.btn-format:hover{background:#63b3ed40;border-color:var(--accent);box-shadow:0 0 20px #63b3ed33,0 0 40px #63b3ed0d;transform:translateY(-1px)}.btn-minify{border-color:#f6ad554d;background:#f6ad5514;color:var(--warn)}.btn-minify:hover{background:#f6ad5533;border-color:var(--warn);box-shadow:0 0 20px #f6ad5526;transform:translateY(-1px)}.btn-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.btn-icon svg{width:14px;height:14px}.btn-icon:hover{color:var(--text-primary);background:var(--bg-overlay);border-color:#ffffff26}.btn-icon.copied{color:var(--success);border-color:var(--success-border);background:var(--success-bg)}.status-bar{height:30px;display:flex;align-items:center;padding:0 16px;background:var(--bg-elevated);border-top:1px solid var(--border);flex-shrink:0;font-size:12px;gap:12px;overflow:hidden}.status-idle{color:var(--text-muted)}.status-ok{color:var(--success);display:flex;align-items:center;gap:6px}.status-ok:before{content:"●";font-size:8px}.status-error{color:var(--error);display:flex;align-items:center;gap:6px}.status-error:before{content:"●";font-size:8px}.status-bar .err-detail{color:var(--text-secondary);font-family:var(--font-code);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(20px);background:var(--bg-overlay);border:1px solid var(--border);color:var(--text-primary);padding:10px 20px;border-radius:100px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s ease;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;z-index:999}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast.success{border-color:var(--success-border);background:#68d3911f;color:var(--success)}.toast.error-toast{border-color:var(--error-border);background:#fc81811a;color:var(--error)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#fff3}.err-overlay{position:absolute;left:0;right:0;background:#fc81810d;border-left:2px solid var(--error);pointer-events:none}@media(max-width:768px){.pane-wrapper{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}.pane-divider{flex-direction:row;padding:8px 16px;border-left:none;border-right:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.pane-divider:before,.pane-divider:after{display:none}body{overflow:auto}#app{height:auto;min-height:100vh;overflow:auto}.editor-area{overflow:auto}.panel.active{display:flex;min-height:80vh}.editor,.output{min-height:200px}.header-tagline{display:none}}