:root{--font-sans:"Inter", "Segoe UI", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", Consolas, monospace;--accent:#6366f1;--accent-hover:#4f46e5;--accent-soft:rgba(99, 102, 241, 0.12);--accent-glow:rgba(99, 102, 241, 0.25);--success:#10b981;--danger:#ef4444;--danger-soft:rgba(239, 68, 68, 0.12);--bg-app:#eef2f7;--bg-sidebar:#0f172a;--bg-sidebar-hover:rgba(255, 255, 255, 0.06);--bg-sidebar-active:rgba(99, 102, 241, 0.18);--bg-pane:#ffffff;--bg-header:#f8fafc;--border:#e2e8f0;--border-strong:#cbd5e1;--text-primary:#0f172a;--text-secondary:#64748b;--text-sidebar:#94a3b8;--text-sidebar-active:#e2e8f0;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--shadow-pane:0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04);--shadow-btn:0 1px 2px rgba(15, 23, 42, 0.08);--sidebar-width:220px}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body,html,main{display:flex;flex-direction:column;height:100%;overflow:hidden}body,html{min-height:100vh;min-height:100dvh;font-family:var(--font-sans);font-size:14px;background:var(--bg-app);-webkit-font-smoothing:antialiased}main{flex:1 1 auto;min-height:0}.ad-position-control,.top-bar{display:flex;align-items:center}.top-bar{justify-content:flex-start;padding:6px 14px;background:var(--bg-pane);border-bottom:1px solid var(--border);flex-shrink:0}.ad-position-control{gap:8px}.ad-pos-label{font-size:.72rem;font-weight:600;color:var(--text-secondary);white-space:nowrap}.ad-pos-toggle{display:inline-flex;padding:2px;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);gap:2px}.ad-pos-btn{border:0;background:0 0;color:var(--text-secondary);font-family:inherit;font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:4px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}.ad-pos-btn:hover,body,html{color:var(--text-primary)}.ad-pos-btn.active{background:var(--accent);color:#fff;box-shadow:0 1px 4px var(--accent-glow)}.app-row,.sidebar{min-height:0;display:flex}.app-row{flex:1 1 auto;overflow:hidden;gap:0;padding:8px 10px 10px;align-items:stretch}.app-row.ads-right .ad-rail{order:3}.app-row.ads-left .ad-rail{order:-1}.app-row .sidebar{order:0}.app-row .main{order:1}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);align-self:stretch;background:var(--bg-sidebar);flex-direction:column;overflow-y:auto;overflow-x:hidden;flex-shrink:0;border-radius:var(--radius-lg);box-shadow:0 4px 24px rgba(15,23,42,.18)}.brand-icon,.sidebar-brand{display:flex;align-items:center;flex-shrink:0}.sidebar-brand{gap:10px;padding:18px 16px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.brand-icon{width:38px;height:38px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent) 0%,#818cf8 100%);justify-content:center;color:#fff;box-shadow:0 4px 12px var(--accent-glow)}.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}.brand-name{font-size:.88rem;font-weight:700;color:#f1f5f9;letter-spacing:-.01em;line-height:1.2}.brand-badge{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a5b4fc}.sidebar-nav{display:flex;flex-direction:column;gap:4px;padding:12px 10px;flex-shrink:0}.nav-group{margin-bottom:8px}.nav-group-label{display:block;font-size:.65rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#475569;padding:4px 10px 6px}.sb-btn,.sb-icon{display:flex;align-items:center}.sb-btn{width:100%;gap:9px;text-align:left;background:0 0;color:var(--text-sidebar);padding:8px 10px;border:0;cursor:pointer;font-size:.84rem;font-family:inherit;font-weight:500;transition:background .15s,color .15s,transform .1s;border-radius:var(--radius-sm);line-height:1.3}.sb-btn:hover{background:var(--bg-sidebar-hover);color:var(--text-sidebar-active)}.sb-btn:active{transform:scale(.98)}.sb-btn.active{background:var(--bg-sidebar-active);color:#c7d2fe;font-weight:600}.sb-btn.active .sb-icon{color:#a5b4fc}.sb-btn-danger:hover{background:var(--danger-soft);color:#fca5a5}.sb-icon{width:16px;height:16px;flex-shrink:0;justify-content:center;font-style:normal;font-size:.9rem;color:#64748b;transition:color .15s}.sb-btn:hover .sb-icon,.sb-link:hover{color:#94a3b8}.sidebar-footer{margin-top:auto;padding:12px 16px 8px;flex-shrink:0}.sb-link{color:#64748b;font-size:.78rem;text-decoration:none;transition:color .15s}.sb-link-sep{color:#334155;font-size:.78rem;margin:0 4px}.sidebar-copy{color:#334155;font-size:.7rem;margin-top:8px}.sidebar-ad{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.05);flex-shrink:0}.main,.pane{display:flex;overflow:hidden;min-width:0;min-height:0;align-self:stretch}.main{flex:1 1 auto;gap:0;margin-left:10px}.pane{flex:1 1 0;flex-direction:column;background:var(--bg-pane);border-radius:var(--radius-lg);box-shadow:var(--shadow-pane);border:1px solid var(--border)}.pane-header,.pane-title{display:flex;align-items:center}.pane-header{justify-content:space-between;padding:10px 14px;background:var(--bg-header);border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;border-radius:var(--radius-lg) var(--radius-lg)0 0}.pane-title{gap:8px;min-width:0}.pane-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.pane-dot-editor{background:var(--accent);box-shadow:0 0 6px var(--accent-glow)}.pane-dot-preview{background:var(--success);box-shadow:0 0 6px rgba(16,185,129,.35)}.pane-label{font-size:.82rem;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}.pane-toolbar{display:flex;align-items:center;gap:8px;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:var(--radius-sm);font-family:inherit;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s,transform .1s,color .15s;white-space:nowrap}.btn:active{transform:scale(.97)}.btn[hidden]{display:none!important}.btn-sm{font-size:.78rem;padding:6px 12px}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-btn),0 2px 8px var(--accent-glow)}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:0 0;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-header);color:var(--text-primary);border-color:var(--border-strong)}.toggle-switch{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}.toggle-switch input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;width:34px;height:20px;background:var(--border-strong);border-radius:20px;transition:background .2s;flex-shrink:0}.toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.15)}.toggle-switch input:checked+.toggle-track{background:var(--accent)}.toggle-switch input:checked+.toggle-track .toggle-thumb{transform:translateX(14px)}.toggle-label{font-size:.76rem;font-weight:500;color:var(--text-secondary)}.pane-editor{flex:1 1 0;min-height:0}.editor-wrap{flex:1 1 auto;min-height:0;overflow:hidden}.editor-wrap .CodeMirror{height:100%;font-family:var(--font-mono);font-size:.84rem;line-height:1.7;background:var(--bg-pane);color:var(--text-primary)}.editor-wrap .CodeMirror-gutters{background:var(--bg-header);border-right:1px solid var(--border);user-select:none}.editor-wrap .CodeMirror-foldgutter-folded,.editor-wrap .CodeMirror-foldgutter-open,.editor-wrap .CodeMirror-linenumber{user-select:none}.editor-wrap .CodeMirror-linenumber{color:#94a3b8}.editor-wrap .CodeMirror-foldmarker{color:var(--accent);text-shadow:none;font-family:var(--font-mono)}.editor-wrap .CodeMirror-foldgutter-folded,.editor-wrap .CodeMirror-foldgutter-open{color:#64748b}.dark .editor-wrap .CodeMirror{background:#0f172a;color:#e2e8f0}.dark .editor-wrap .CodeMirror-gutters{background:#1e293b;border-right-color:#334155}.editor-wrap .cm-s-default .cm-attribute,.editor-wrap .cm-s-default .cm-bracket,.editor-wrap .cm-s-default .cm-tag{color:#922}.editor-wrap .cm-s-default .cm-atom,.editor-wrap .cm-s-default .cm-keyword,.editor-wrap .cm-s-default .cm-property,.editor-wrap .cm-s-default .cm-qualifier,.editor-wrap .cm-s-default .cm-string,.editor-wrap .cm-s-default .cm-string-2{color:#06c}.editor-wrap .cm-s-default .cm-number{color:#098658}.editor-wrap .cm-s-default .cm-comment{color:#a05000}.dark .editor-wrap .cm-s-default .cm-attribute,.dark .editor-wrap .cm-s-default .cm-bracket,.dark .editor-wrap .cm-s-default .cm-tag{color:#f97583}.dark .editor-wrap .cm-s-default .cm-atom,.dark .editor-wrap .cm-s-default .cm-keyword,.dark .editor-wrap .cm-s-default .cm-property,.dark .editor-wrap .cm-s-default .cm-qualifier,.dark .editor-wrap .cm-s-default .cm-string,.dark .editor-wrap .cm-s-default .cm-string-2{color:#79b8ff}.dark .editor-wrap .cm-s-default .cm-number{color:#85e89d}.dark .editor-wrap .cm-s-default .cm-comment{color:#ffab70}.pane-preview{flex:1 1 0;min-height:0}.preview-body{flex:1 1 auto;position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column}.pane-preview iframe{flex:1 1 auto;width:100%;min-height:0;border:0;background:#fff;display:block}.source-output{position:absolute;inset:0;z-index:2;overflow:auto;padding:16px 18px;font-family:var(--font-mono);font-size:.82rem;line-height:1.7;background:var(--bg-pane);color:var(--text-primary);white-space:pre-wrap;word-break:break-all}.pane-preview iframe.hidden,.preview-empty.hidden,.source-output.hidden{display:none}.preview-empty,.preview-empty-icon{display:flex;align-items:center;justify-content:center}.preview-empty{position:absolute;inset:0;z-index:1;flex-direction:column;gap:10px;padding:32px;text-align:center;background:linear-gradient(160deg,#f8fafc 0,#f1f5f9 100%);pointer-events:none;transition:opacity .25s}.preview-body.format-split{display:grid;grid-template-rows:1fr 1fr;gap:0}.preview-body.format-split iframe{position:relative;flex:none;height:100%;min-height:0;border-bottom:1px solid var(--border)}.preview-body.format-split .source-output{position:relative;inset:auto;flex:none;height:100%;min-height:0;z-index:1}.preview-body.format-split .source-output.hidden{display:block}.preview-body.format-split.source-panel-hidden{grid-template-rows:1fr}.preview-body.format-split.source-panel-hidden .source-output{display:none!important}.preview-empty-icon{width:72px;height:72px;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}.preview-empty-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}.preview-empty-desc{font-size:.88rem;color:var(--text-secondary);max-width:280px;line-height:1.55}.preview-empty-desc strong{color:var(--accent);font-weight:600}.error-msg{color:#b91c1c;background:#fef2f2;border-top:1px solid #fecaca;padding:10px 16px;font-size:.84rem;flex-shrink:0}.pane-divider{width:8px;min-width:8px;align-self:stretch;background:0 0;cursor:col-resize;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}.pane-divider::before{content:"";width:3px;height:48px;border-radius:3px;background:var(--border-strong);transition:background .15s,height .15s}.pane-divider.dragging::before,.pane-divider:hover::before{background:var(--accent);height:64px}.ad-caption{margin:0 0 8px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#8aa2bc;text-align:center}.below-preview-ad .ad-caption,.sidebar-ad .ad-caption{display:none}.ad-slot{background:0 0}.below-preview-ad{padding:8px;border-top:1px solid var(--border);flex-shrink:0}.ad-rail,.ad-rail-unit{min-height:0;display:flex;flex-direction:column;overflow:hidden}.ad-rail{width:176px;min-width:176px;max-width:176px;align-self:stretch;gap:8px;flex-shrink:0;padding-top:2px;padding-bottom:2px}.app-row.ads-right .ad-rail{padding-left:8px}.app-row.ads-left .ad-rail{padding-right:8px}.ad-rail-unit{flex:1 1 0;align-items:center;justify-content:flex-start;width:160px;gap:4px;padding:6px 8px;background:rgba(255,255,255,.55);border:1px dashed var(--border-strong);border-radius:var(--radius-md)}.ad-rail-unit .ad-caption{display:block;margin:0;flex-shrink:0;font-size:.6rem}.ad-rail-unit .adsbygoogle{flex:1 1 auto;width:160px!important;min-height:250px;max-height:100%;height:auto!important}.lazy-ad:not([data-loaded="1"]){opacity:1;visibility:visible}@media (max-width:980px){.ad-rail{display:none}}body.dark{--bg-app:#0b1120;--bg-pane:#131c2e;--bg-header:#0f1729;--border:#1e293b;--border-strong:#334155;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--accent-soft:rgba(99, 102, 241, 0.2)}body.dark .sidebar{background:#080e1a;box-shadow:0 4px 24px rgba(0,0,0,.4)}body.dark .preview-empty{background:linear-gradient(160deg,#131c2e 0,#0f1729 100%)}body.dark .preview-empty-icon{background:rgba(99,102,241,.15)}body.dark .error-msg{background:rgba(239,68,68,.1);border-top-color:rgba(239,68,68,.25);color:#fca5a5}body.dark .btn-ghost{border-color:var(--border);color:var(--text-secondary)}body.dark .btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}body.dark .toggle-track{background:#334155}body.dark .ad-rail-unit{background:rgba(19,28,46,.6);border-color:#334155}body.dark .top-bar{background:var(--bg-header);border-bottom-color:var(--border)}body.dark .ad-pos-toggle{background:#0b1120;border-color:var(--border)}body.dark .ad-caption{color:#6f87a1}@media (max-width:640px){body,html{overflow:auto}.app-row{flex-direction:column;padding:8px}.sidebar{width:100%;min-width:unset;height:auto;max-height:none;border-radius:var(--radius-md)}.sidebar-nav{flex-direction:row;flex-wrap:wrap;gap:4px;padding:8px}.nav-group{display:contents}.nav-group-label{display:none}.sb-btn{width:auto;white-space:nowrap;padding:7px 10px;font-size:.78rem}.sidebar-ad,.sidebar-footer{display:none}.main{height:70vh;flex-direction:column;margin-left:0;margin-top:8px}.pane-divider{width:100%;height:8px;min-width:unset;cursor:row-resize}.pane-divider::before{width:48px;height:3px}.pane-divider.dragging::before,.pane-divider:hover::before{width:64px;height:3px}.ad-rail,.toggle-label{display:none}}