:root{--bg: #0f1420;--panel: #1a2130;--panel-2: #222b3d;--border: #2e3a52;--text: #e6ebf5;--muted: #9aa7bd;--accent: #4f8cff;--accent-2: #2b6bdd;--warn-bg: #3a2a17;--warn-border: #7a5a2a;--warn-text: #ffce8a;--info-bg: #16304a;--info-border: #2b5a86;--info-text: #9fd0ff;--ok: #4ad28a;--danger: #ff6b6b;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.45}.app{max-width:1400px;margin:0 auto;padding:24px 20px 80px}.layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}.col-main{min-width:0}.col-side{position:sticky;top:16px;min-width:0;display:flex;flex-direction:column;gap:18px;max-height:calc(100vh - 32px);overflow:auto}@media (max-width: 980px){.layout{grid-template-columns:1fr}.col-side{position:static;max-height:none}}.howto{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:14px 0 0}.howto li{flex:1 1 240px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--muted)}.howto strong{color:var(--text);font-weight:600}.step-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent-2);color:#fff;font-size:12px;font-weight:700;margin-right:6px}header h1{margin:0 0 4px;font-size:22px}header p{margin:0 0 20px;color:var(--muted)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:18px}.panel h2{margin:0 0 12px;font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}textarea,input{width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:13px}textarea{resize:vertical}input:focus,textarea:focus{outline:none;border-color:var(--accent)}.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;font-size:13px}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent-2);border-color:var(--accent)}.btn.primary:hover{background:var(--accent)}.btn.danger{color:var(--danger)}.btn.small{padding:3px 8px;font-size:12px}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row.mt{margin-top:12px}.spacer{flex:1}.queryset{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px;background:var(--panel-2)}.queryset-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.queryset-head .badge{background:var(--accent-2);color:#fff;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}.set-role{font-size:12px;color:var(--muted);font-style:italic}.param-grid{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,2fr) minmax(160px,2fr) auto;gap:6px 8px;align-items:center}.param-grid .head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding-bottom:2px}.param-grid .preview{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:7px 9px;overflow-x:auto;white-space:nowrap}.param-actions{display:flex;gap:4px}.hylda-tag{display:inline-block;background:#2a1f3a;border:1px solid #5a3a86;color:#c8a8ff;border-radius:4px;font-size:10px;padding:1px 5px;margin-left:6px;text-decoration:none;cursor:pointer}.hylda-tag:hover{background:#3a2a52}.live-badge{font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:var(--ok);color:#062a18;border-radius:10px;padding:1px 8px;margin-left:8px;vertical-align:middle;font-weight:700}.output-url.flash{animation:flash-border .6s ease}@keyframes flash-border{0%{border-color:var(--ok);box-shadow:0 0 0 2px #4ad28a59}to{border-color:var(--border);box-shadow:none}}#hylda-editor{scroll-margin-top:16px}.field{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;margin-bottom:8px}.field label{color:var(--muted)}.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}.duration-grid .field{display:grid;grid-template-columns:1fr;gap:6px}.duration-grid .field span{color:var(--muted);font-size:13px}@media (max-width: 520px){.duration-grid{grid-template-columns:1fr}}.field .hint{grid-column:2;color:var(--muted);font-size:12px;margin-top:-4px}.warnings{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.warning{border-radius:6px;padding:8px 10px;font-size:13px;border:1px solid}.warning.warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}.warning.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}.warning .code{font-family:var(--mono);font-size:11px;opacity:.8}.ok-msg{color:var(--ok)}.output-url{font-family:var(--mono);font-size:12px;min-height:120px}.inspect{font-family:var(--mono);font-size:12.5px}.inspect .base{color:var(--accent);word-break:break-all}.inspect .set-title{color:var(--muted);margin:10px 0 4px;text-transform:uppercase;font-size:11px;letter-spacing:.05em}.inspect .kv{display:flex;gap:6px;padding:1px 0}.inspect .kv .k{color:#8fd3ff}.inspect .kv .v{color:var(--text);word-break:break-all}.inspect .sub{margin-left:18px}.inspect .sub .k{color:#c8a8ff}.copied{color:var(--ok);font-size:12px;margin-left:6px}small.muted{color:var(--muted)}
