*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#ede8df;--bg-panel:#f7f3ed;--bg-toolbar:#2c2c2c;--text:#1a1714;--text-muted:#5a514d;--text-toolbar:#f5f0e8;--border:#ccc4b0;--accent:#c0392b;--accent-hover:#a93226;--success:#27ae60;--error:#c0392b;--mono:ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--radius:6px;--toolbar-h:52px;--statusbar-h:36px}[data-theme=dark]{--bg:#1a1a2e;--bg-panel:#16213e;--bg-toolbar:#0f0f23;--text:#e8e8e8;--text-muted:#88a;--text-toolbar:#e8e8e8;--border:#2a2a4a;--accent:#e74c3c;--accent-hover:#c0392b;--success:#2ecc71;--error:#e74c3c}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}.app{background:var(--bg);flex-direction:column;height:100vh;display:flex;overflow:hidden}.toolbar{height:var(--toolbar-h);background:var(--bg-toolbar);color:var(--text-toolbar);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:0 6px;padding:0 16px;display:flex}.toolbar-brand{font-family:var(--mono);letter-spacing:.04em;color:var(--accent);flex-shrink:0;margin-right:8px;font-size:15px;font-weight:700}.toolbar-actions{flex-wrap:wrap;flex:1;gap:4px;display:flex}.toolbar-btn{color:var(--text-toolbar);font-family:var(--sans);border-radius:var(--radius);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #ffffff2e;padding:5px 12px;font-size:13px;transition:background .15s,border-color .15s}.toolbar-btn:hover{background:#ffffff1a;border-color:#ffffff59}.toolbar-btn:active{background:var(--accent);border-color:var(--accent)}.toolbar-right{flex-shrink:0;align-items:center;gap:10px;display:flex}.indent-label{color:#ffffff8c;cursor:default;align-items:center;gap:6px;font-size:12px;display:flex}.indent-select{color:var(--text-toolbar);cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:4px;outline:none;padding:3px 6px;font-size:13px}.indent-select:hover{border-color:#fff6}.theme-toggle{color:var(--text-toolbar);border-radius:var(--radius);cursor:pointer;background:0 0;border:1px solid #fff3;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;transition:background .15s;display:flex}.theme-toggle:hover{background:#ffffff1a}.panels{flex:1;gap:0;display:flex;overflow:hidden}.panel-divider{background:var(--border);flex-shrink:0;width:1px}.editor-panel{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.editor-header{border-bottom:1px solid var(--border);background:var(--bg-panel);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 14px;display:flex}.editor-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.editor-action{align-items:center;display:flex}.editor-textarea{background:var(--bg-panel);width:100%;color:var(--text);font-family:var(--mono);resize:none;tab-size:4;border:none;outline:none;flex:1;padding:16px;font-size:13.5px;line-height:1.65;overflow:auto}.editor-textarea::placeholder{color:var(--text-muted);opacity:.6}.editor-textarea[readonly]{cursor:default;background:color-mix(in srgb, var(--bg) 70%, var(--bg-panel))}[data-theme=dark] .editor-textarea[readonly]{background:#111827}.copy-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px;font-size:12px;transition:background .15s,color .15s,border-color .15s}.copy-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.copy-btn:disabled{opacity:.35;cursor:not-allowed}.copy-btn.copied{background:var(--success);border-color:var(--success);color:#fff}.status-bar{height:var(--statusbar-h);font-family:var(--mono);border-top:1px solid var(--border);flex-shrink:0;align-items:center;padding:0 16px;font-size:12.5px;display:flex}.status-idle{background:var(--bg-panel)}.status-valid{background:color-mix(in srgb, var(--success) 10%, transparent);color:var(--success);border-top-color:color-mix(in srgb, var(--success) 30%, transparent)}.status-error{background:color-mix(in srgb, var(--error) 10%, transparent);color:var(--error);border-top-color:color-mix(in srgb, var(--error) 30%, transparent)}@media (width<=700px){.panels{flex-direction:column}.panel-divider{width:100%;height:1px}.toolbar{gap:6px;height:auto;padding:8px 12px}}
