:root{--bg:#0f1115;--surface:#171a21;--surface-2:#1f232c;--border:#2a2f3a;--text:#e6e8ee;--muted:#9aa3b2;--accent:#6ea8fe;--accent-strong:#4d8ff0;--ok:#55c98a;--warn:#e5b567;--danger:#e06c75;--radius:10px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit}.app{max-width:1180px;margin:0 auto;padding:24px 20px 64px}.app__header{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px;display:flex}.app__header h1{margin:0;font-size:20px}.app__header p{color:var(--muted);margin:4px 0 0;font-size:13px}.layout{grid-template-columns:340px 1fr;align-items:start;gap:18px;display:grid}@media (width<=900px){.layout{grid-template-columns:1fr}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.card+.card{margin-top:16px}.card__title{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;font-size:14px}.field{margin-bottom:12px;display:block}.field__label{color:var(--muted);margin-bottom:6px;font-size:13px;display:block}.field__hint{color:var(--muted);margin-top:6px;font-size:12px}input,textarea,select{background:var(--surface-2);width:100%;color:var(--text);border:1px solid var(--border);font:inherit;border-radius:8px;padding:9px 11px}textarea{resize:vertical;min-height:160px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}.button{border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.5;cursor:not-allowed}.button--primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#07101f;font-weight:600}.button-row{flex-wrap:wrap;gap:8px;display:flex}.badge{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:11px;display:inline-block}.badge--ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent)}.badge--warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, transparent)}.list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.list__item{text-align:left;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;width:100%;color:var(--text);border-radius:8px;padding:10px 12px}.list__item:hover{border-color:var(--accent)}.list__item[aria-current=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface-2))}.list__title{justify-content:space-between;align-items:center;gap:8px;display:flex}.list__meta{color:var(--muted);margin-top:2px;font-size:12px}.notice{border:1px solid;border-radius:8px;margin-bottom:12px;padding:10px 12px;font-size:13px}.notice--error{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 45%, transparent);background:color-mix(in srgb, var(--danger) 10%, transparent)}.notice--warn{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 45%, transparent);background:color-mix(in srgb, var(--warn) 10%, transparent)}.notice--ok{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, transparent);background:color-mix(in srgb, var(--ok) 10%, transparent)}.notice ul{margin:6px 0 0;padding-left:18px}.empty{color:var(--muted);padding:8px 0;font-size:13px}.preview{background:var(--surface-2);border:1px solid var(--border);white-space:pre-wrap;border-radius:8px;max-height:520px;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;overflow:auto}.row{flex-wrap:wrap;align-items:flex-end;gap:10px;display:flex}.row>*{flex:160px}.row>.row__fixed{flex:0 0 120px}.gate{max-width:420px;margin:14vh auto 0}.spinner{border:2px solid color-mix(in srgb, var(--text) 30%, transparent);border-top-color:var(--text);vertical-align:-2px;border-radius:50%;width:13px;height:13px;margin-right:6px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}
