:root { --gap: 12px; --bg: #0b0f14; --panel: #121822; --ink: #e8eef7; --muted: #9fb0c3; --accent: #4aa4ff; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--ink); background: radial-gradient(1200px 800px at 10% -20%, #1a2433, #0b0f14); }
header { padding: 16px; display: flex; align-items: center; gap: 10px; }
header h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .2px; color: var(--ink); }
header .badges { margin-left: auto; color: var(--muted); font-size: 12px; }
.wrap { padding: var(--gap); max-width: 1100px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 1000px) { .grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.panel { background: var(--panel); border: 1px solid #223047; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.25); overflow: hidden; display: flex; flex-direction: column; }
.panel header { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-bottom: 1px solid #1e2a3d; padding: 10px 12px; }
.panel header h2 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.panel .body { padding: 12px; }
textarea, pre { width: 100%; height: 360px; background: #0f1520; color: var(--ink); border: 1px solid #1c2740; border-radius: 8px; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; resize: vertical; }
pre { white-space: pre-wrap; word-break: break-word; height: 360px; overflow: auto; }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #1e2a3d; background: #0e141f; flex-wrap: wrap; }
button { appearance: none; border: 1px solid #275e9d; background: linear-gradient(180deg, #1a66c0, #13539a); color: white; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
button:disabled { opacity: .6; cursor: progress; }
.status { font-size: 12px; color: var(--muted); margin-left: auto; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.hidden { display: none !important; }
#src { tab-size: 4; -moz-tab-size: 4; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
select, .desc { background: #0f1520; color: var(--ink); border: 1px solid #1c2740; border-radius: 8px; padding: 8px; }
select { font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial; }
.desc { font-size: 12px; color: var(--muted); }
.badge { display:inline-block; padding:2px 6px; border-radius:6px; border:1px solid #2b3d62; font-size:11px; color:#cfe0ff; }
.ok { color:#8fffa8; }
.fail { color:#ff9c9c; }