*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#111214;--surface:#18191c;--surface2:#1e2023;--border:#2a2c30;--accent:#3b82f6;--ok:#22c55e;--err:#ef4444;--text:#d4d8de;--muted:#55595f;--kw:#60a5fa;--str:#86efac;--num:#fbbf24;--op:#94a3b8;--radius:8px}html,body{height:100%}body{background:var(--bg);color:var(--text);flex-direction:column;font-family:Segoe UI,system-ui,sans-serif;display:flex}#app{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.app-header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;padding:12px 20px}.app-header h1{font-size:14px;font-weight:700}.app-header .subtitle{color:var(--muted);margin-top:2px;font-size:11px}.credit{color:var(--muted);font-size:11px;text-decoration:none;transition:color .1s}.credit:hover{color:var(--text)}.workspace{flex-direction:column;flex:1;min-height:0;display:flex}.panels{flex:1;min-height:0;display:flex}.panel{border-right:1px solid var(--border);flex-direction:column;flex:1;min-height:0;display:flex}.panel:last-child{border-right:none}.panel-header{background:var(--surface);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.8px;color:var(--muted);flex-shrink:0;justify-content:space-between;align-items:center;min-height:36px;padding:0 14px;font-size:10px;font-weight:600;display:flex}.panel:first-child .panel-header{padding:8px 14px}.output-header{padding:0}.tab-bar{height:100%;display:flex}.tab{color:var(--muted);border:none;border-right:1px solid var(--border);letter-spacing:.5px;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:0;height:100%;padding:0 16px;font-size:11px;font-weight:600;transition:color .1s,background .1s}.tab:hover{color:var(--text)}.tab.active{color:var(--text);background:var(--surface2);border-bottom:2px solid var(--accent)}#input{background:var(--bg);color:var(--text);resize:none;border:none;outline:none;flex:1;min-height:0;padding:14px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:12px;line-height:1.7;overflow-y:auto}#input::placeholder{color:var(--muted)}#output{background:var(--bg);flex:1;min-height:0;padding:14px;overflow-y:auto}.sql-block{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}.sql-block:last-child{margin-bottom:0}.block-header{background:var(--surface2);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:6px 12px;font-size:11px;display:flex}.block-num{color:var(--muted)}.timing{color:var(--muted);margin-left:auto}.btn-copy-block{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;margin-left:auto;padding:2px 8px;font-size:10px;transition:color .1s,border-color .1s}.timing+.btn-copy-block{margin-left:6px}.btn-copy-block:hover{color:var(--text);border-color:var(--muted)}.btn-copy-block.copied{color:var(--ok);border-color:var(--ok)}.block-body{white-space:pre-wrap;word-break:break-all;color:var(--text);padding:12px 14px;font-family:Cascadia Code,Fira Code,Consolas,monospace;font-size:12px;line-height:1.7}.kw{color:var(--kw);font-weight:600}.str{color:var(--str)}.num{color:var(--num)}.op{color:var(--op)}.dialect-select{gap:4px;margin-left:8px;display:flex}.dialect{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:500;transition:color .1s,border-color .1s,background .1s}.dialect:hover{color:var(--text);border-color:var(--muted)}.dialect.active{color:var(--text);background:var(--surface2);border-color:var(--accent)}.analysis-summary{background:var(--border);border:1px solid var(--border);border-radius:var(--radius);gap:1px;margin-bottom:16px;display:flex;overflow:hidden}.summary-stat{background:var(--surface2);flex-direction:column;flex:1;align-items:center;gap:3px;padding:12px 8px;display:flex}.summary-stat.warn .stat-val{color:var(--num)}.stat-val{font-variant-numeric:tabular-nums;color:var(--text);font-size:20px;font-weight:700}.stat-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.analysis-block{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}.analysis-block:last-child{margin-bottom:0}.analysis-block-header{background:var(--surface2);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:7px 12px;font-size:11px;display:flex}.analysis-body{flex-direction:column;gap:6px;padding:10px 14px;display:flex}.analysis-row{align-items:baseline;gap:10px;font-size:12px;display:flex}.analysis-lbl{width:70px;color:var(--muted);flex-shrink:0;font-size:11px}.analysis-val{color:var(--text);flex-wrap:wrap;flex:1;gap:4px;display:flex}.analysis-timing{color:var(--muted);margin-left:auto}.tag{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:1px 7px;font-family:Cascadia Code,Fira Code,monospace;font-size:10px}.complexity-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:10px;padding:1px 8px;font-size:10px;font-weight:600}.complexity-ok{color:var(--ok);background:#22c55e1f}.complexity-warn{color:var(--num);background:#fbbf241f}.complexity-err{color:var(--err);background:#ef44441f}.badge-slow{color:var(--err);text-transform:uppercase;letter-spacing:.5px;background:#ef444426;border-radius:3px;padding:1px 6px;font-size:9px;font-weight:700}.an-summary{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:0;margin-bottom:14px;display:flex;overflow:hidden}.an-sum-item{flex-direction:column;flex:1;align-items:center;gap:3px;padding:12px 8px;display:flex}.an-sum-sep{background:var(--border);flex-shrink:0;width:1px;height:32px}.an-sum-n{font-variant-numeric:tabular-nums;color:var(--text);font-size:22px;font-weight:700;line-height:1}.an-sum-l{color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:10px}.an-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);margin-bottom:10px;overflow:hidden}.an-card:last-child{margin-bottom:0}.an-card-head{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:8px;padding:9px 12px;display:flex}.an-card-title{color:var(--text);font-size:12px;font-weight:600}.ac-timing{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.an-cx-label{text-transform:uppercase;letter-spacing:.5px;border-radius:10px;padding:2px 8px;font-size:10px;font-weight:700}.an-cx-ok{color:#22c55e;background:#22c55e1f}.an-cx-warn{color:#fbbf24;background:#fbbf241f}.an-cx-err{color:#ef4444;background:#ef44441f}.an-bar-wrap{background:var(--border);border-radius:2px;flex:1;height:4px;margin:0 4px;overflow:hidden}.an-bar-fill{border-radius:2px;height:100%;transition:width .3s}.an-cx-score{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:10px}.an-section{border-bottom:1px solid var(--border);align-items:baseline;gap:10px;padding:7px 12px;display:flex}.an-section:last-child{border-bottom:none}.an-sec-lbl{text-transform:uppercase;letter-spacing:.5px;color:var(--muted);flex-shrink:0;width:68px;font-size:10px}.an-sec-val{color:var(--text);flex-wrap:wrap;flex:1;gap:4px;font-size:12px;display:flex}.an-dim-text{color:var(--muted);font-size:12px}.an-metrics{border-bottom:1px solid var(--border);gap:0;display:flex}.an-metric{border-right:1px solid var(--border);flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px;display:flex}.an-metric:last-child{border-right:none}.an-metric-n{font-variant-numeric:tabular-nums;color:var(--text);font-size:18px;font-weight:700;line-height:1}.an-metric-l{color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-size:9px}.an-tag{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:1px 7px;font-family:Cascadia Code,Fira Code,monospace;font-size:10px}.an-tag-fn{color:var(--kw);background:#60a5fa0d;border-color:#60a5fa33}.an-flag{color:var(--op);background:#94a3b814;border:1px solid #94a3b826;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:500}.an-dim{color:var(--muted);font-size:12px}#historyPanel{background:var(--bg);flex-direction:column;flex:1;gap:6px;padding:10px;overflow-y:auto}.hist-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);flex-shrink:0;overflow:hidden}.hist-main{border-bottom:1px solid var(--border);align-items:baseline;gap:8px;padding:8px 12px;display:flex}.hist-preview{color:var(--text);white-space:nowrap;text-overflow:ellipsis;flex:1;font-family:Cascadia Code,Fira Code,monospace;font-size:11px;overflow:hidden}.hist-meta{color:var(--muted);flex-shrink:0;font-size:10px}.hist-foot{background:var(--surface);align-items:center;gap:6px;padding:5px 12px;display:flex}.hist-ts{color:var(--muted);flex:1;font-size:10px}.hist-load,.hist-del{cursor:pointer;border:1px solid var(--border);background:0 0;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:500}.hist-load{color:var(--accent);border-color:#3b82f64d}.hist-load:hover{background:#3b82f61a}.hist-del{color:var(--muted)}.hist-del:hover{color:var(--err);border-color:#ef44444d}.btn-clear-hist{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;padding:3px 10px;font-size:10px}.btn-clear-hist:hover{color:var(--err);border-color:#ef44444d}.toolbar{background:var(--surface);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:10px 14px;display:flex}button{cursor:pointer;border:none;border-radius:6px;padding:7px 16px;font-size:13px;font-weight:600;transition:opacity .1s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{opacity:.85}.btn-primary:active{opacity:.7}.btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--border)}.btn-copy-all{color:var(--muted);border:1px solid var(--border);background:0 0;border-radius:5px;margin-left:auto;padding:5px 12px;font-size:11px}.btn-copy-all:hover{color:var(--text);border-color:var(--muted)}.btn-copy-all.copied{color:var(--ok);border-color:var(--ok)}.status{color:var(--muted);font-size:12px}.status.ok{color:var(--ok)}.status.err{color:var(--err)}.kbd{background:var(--surface2);border:1px solid var(--border);color:var(--muted);border-radius:3px;padding:1px 5px;font-size:10px}.empty-state{height:100%;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:12px;display:flex}.empty-state.error{color:var(--err)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}@media (width<=700px){.panels{flex-direction:column}.panel{border-right:none;border-bottom:1px solid var(--border);flex:none;height:45dvh}.panel:last-child{border-bottom:none;flex:1}}