.sr-eyebrow{font:750 11px system-ui;letter-spacing:1.3px;color:#ff4258;margin-bottom:9px}
.sr-title{font:800 clamp(24px,3vw,32px)/1.2 system-ui;color:#f4f4f4;margin:0 0 10px}
.sr-note,.sr-muted{color:#aaa;font:13px/1.6 system-ui}
.sr-root{display:grid;gap:18px;margin-top:20px}
.sr-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:10px 0}
.sr-domain{background:#242424;border:1px solid #383838;color:#f0f0f0;border-radius:9px;font:750 13px system-ui;padding:9px 12px}
.sr-status{border-left:2px solid #e00018;padding:10px 14px;background:#1c1c1c;color:#ccc;font:12px/1.5 system-ui}
.sr-toolbar,.sr-actions,.sr-examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sr-btn{background:#252525;border:1px solid #444;color:#e6e6e6;border-radius:9px;padding:10px 13px;font:700 12px system-ui;cursor:pointer}
.sr-btn.primary{background:#e00018;border-color:#e00018;color:#fff}
.sr-btn.danger{color:#ff9b9b}
.sr-btn:disabled{opacity:.35;cursor:not-allowed}
.sr-btn:hover:not(:disabled){border-color:#ff4258}
.sr-subhead{margin:18px 0 8px;color:#ececec;font:750 17px system-ui}
.sr-rule-list{display:grid;gap:12px}
.sr-card,.sr-form,.sr-preview,.sr-history{padding:18px;border:1px solid #303030;background:#1c1c1c;border-radius:12px}
.sr-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.sr-selector{font:750 13px ui-monospace,monospace;color:#fff}
.sr-scope{font:11px system-ui;background:#303030;color:#bfbfbf;padding:5px 8px;border-radius:20px}
.sr-decls{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}
.sr-decl{font:11px/1.5 ui-monospace,monospace;background:#101010;color:#c5c5c5;padding:5px 8px;border:1px solid #303030;border-radius:5px;overflow-wrap:anywhere}
.sr-empty{padding:28px;border:1px dashed #444;color:#b6b6b6;border-radius:12px;background:#1c1c1c}
.sr-form{display:grid;gap:15px}
.sr-form h3{font:750 17px system-ui;margin:0;color:#fff}
.sr-field{display:grid;gap:8px;color:#ddd;font:650 12px system-ui}
.sr-field input,.sr-field select,.sr-form-row input,.sr-form-row select{box-sizing:border-box;background:#101010;color:#f0f0f0;border:1px solid #454545;border-radius:8px;padding:10px 11px;min-width:0;width:100%;font:12px system-ui}
.sr-form-rows{display:grid;gap:8px}
.sr-form-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(130px,1fr) auto;align-items:center;gap:8px}
.sr-hint{color:#a4a4a4;font:11px/1.7 system-ui;margin:0}
.sr-preview{overflow:hidden}
.sr-code{font:11px/1.7 ui-monospace,monospace;background:#101010;color:#ccc;overflow:auto;max-height:230px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #303030;border-radius:9px;padding:15px}
.sr-shadow-host{margin-top:15px}
.sr-history{display:grid;gap:10px}
.sr-history-row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;color:#bbb;font:12px system-ui}
.sr-error{color:#ff8888;font:13px/1.6 system-ui}
@media(max-width:650px){.sr-form-row{grid-template-columns:1fr}.sr-form-row .sr-btn{justify-self:start}}

.sr-picker{padding:17px;border:1px solid #303030;background:#1c1c1c;border-radius:12px}
.sr-picker-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.sr-picker-select{background:#101010;color:#f1f1f1;border:1px solid #444;padding:10px 12px;border-radius:8px;max-width:100%;min-width:190px;font:12px system-ui}