.sp-settings { --sp-ink:#163b4a; --sp-accent:#0b7890; --sp-border:#d8e7ed; --sp-soft:#f4f9fb; display:grid; gap:22px; color:var(--sp-ink); }
.sp-settings .sp-intro { padding:20px 24px; border:1px solid var(--sp-border); border-radius:20px; background:linear-gradient(110deg,#f2fafb,#fff 65%); }
.sp-settings .sp-kicker { color:#6b8793; font-size:12px; font-weight:700; margin:0 0 6px; }
.sp-settings h3 { font-size:22px; margin:0 0 8px; }
.sp-settings .sp-intro>p:not(.sp-kicker) { color:#718692; font-size:14px; margin:0; }
.sp-settings .sp-steps { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.sp-settings .sp-steps button { display:flex; align-items:center; justify-content:center; gap:9px; flex:1; min-height:44px; padding:9px 14px; border:1px solid var(--sp-border); border-radius:12px; background:#fff; color:var(--sp-ink); font-size:13px; cursor:pointer; }
.sp-settings .sp-steps button[aria-selected="true"] { color:var(--sp-accent); background:#eaf7fa; border-color:#83c2cf; box-shadow:0 2px 8px #17415b0a; }
.sp-settings .sp-steps b { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; color:var(--sp-accent); background:#e7f5f8; }
.sp-settings .sp-top-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
.sp-settings .sp-panel { padding:22px; min-width:0; border:1px solid var(--sp-border); background:#fff; border-radius:20px; box-shadow:0 6px 20px #17415b05; scroll-margin-top:110px; }
.sp-settings .sp-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.sp-settings .sp-panel-heading h4 { font-size:18px; margin:0; }
.sp-settings .sp-number { display:grid; place-items:center; width:42px; height:42px; border:1px solid #cce7ee; background:#ecf8fa; color:var(--sp-accent); border-radius:13px; font-weight:800; }
.sp-settings .sp-form { display:grid; gap:13px; }
.sp-settings label { display:grid; gap:7px; margin:0; font-size:13px; font-weight:700; }
.sp-settings :is(input:not([type=checkbox]),select) { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #d5e1e8; background:#fff; border-radius:11px; font:inherit; color:var(--sp-ink); }
.sp-settings input:read-only { background:#f6f9fa; }
.sp-settings :is(input,select,button,a):focus-visible { outline:3px solid #7bc4d555; outline-offset:2px; }
.sp-settings .sp-search { position:relative; margin-bottom:20px; }
.sp-settings .sp-search>label { margin-bottom:7px; }
.sp-settings .sp-search>input { padding-inline:14px; background:var(--sp-soft); border-color:#c9e0e9; }
.sp-settings .sp-search-drawer { border:1px solid #c9e0e9; border-radius:0 0 13px 13px; background:#fff; margin:4px 0 0; overflow:hidden; animation:sp-drawer .18s ease-out; }
.sp-settings [hidden] { display:none!important; }
.sp-settings .sp-search-status { padding:10px 12px; font-size:12px; color:#6c828e; background:#f6fafb; }
.sp-settings .sp-search-list { max-height:260px; overflow-y:auto; }
.sp-settings button.sp-search-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; width:100%; text-align:start; background:#fff; padding:12px 14px; border:0; border-bottom:1px solid #edf3f6; border-radius:0; color:var(--sp-ink); }
.sp-settings .sp-search-option strong { font-size:13px; overflow-wrap:anywhere; }
.sp-settings .sp-search-option small { grid-row:2; color:#718692; font-size:12px; font-weight:400; }
.sp-settings .sp-search-option>span { grid-row:1/3; grid-column:2; align-self:center; color:var(--sp-accent); font-size:12px; }
.sp-settings .sp-search-option:hover { background:#eef8fa; }
.sp-settings .sp-form-note,.sp-settings .sp-panel-note { margin:0; line-height:1.9; font-size:12px; color:#7b8d96; font-weight:400; }
.sp-settings .sp-panel-note { margin-bottom:15px; }
.sp-settings .sp-form-error { padding:10px 12px; background:#fff2ef; border:1px solid #f0c9c2; color:#a54135; border-radius:10px; font-size:13px; }
.sp-settings .sp-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-settings button { min-height:40px; padding:8px 13px; border-radius:10px; font-size:13px; white-space:normal; }
.sp-settings .sp-form>.sp-actions { padding-top:3px; }
.sp-settings .sp-list-title { display:flex; align-items:center; justify-content:space-between; font-size:13px; border-top:1px solid var(--sp-border); padding-top:20px; margin:20px 0 12px; }
.sp-settings .sp-list-title span { color:#8798a1; }
.sp-settings .sp-organizations-list { display:grid; gap:9px; }
.sp-settings .sp-org-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #e3ecf1; background:#fbfdfe; border-radius:12px; }
.sp-settings .sp-org-row>div:first-child { min-width:0; }
.sp-settings .sp-org-row strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.sp-settings .sp-org-row small { display:block; color:#8798a1; margin-top:5px; font-size:11px; }
.sp-settings .sp-org-row button { font-size:11px; min-height:34px; padding:6px 9px; }
.sp-settings .sp-method-list { display:grid; gap:9px; }
.sp-settings details.sp-method { border:1px solid #dfebf0; border-radius:12px; background:#fff; overflow:hidden; }
.sp-settings details>summary { list-style:none; cursor:pointer; }
.sp-settings details>summary::-webkit-details-marker { display:none; }
.sp-settings .sp-method>summary { display:flex; align-items:center; gap:10px; padding:13px 14px; min-height:28px; }
.sp-settings .sp-method-name { flex:1; min-width:0; font-size:13px; font-weight:700; line-height:1.9; }
.sp-settings svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:#6194a5; stroke-width:2; transition:transform .18s; }
.sp-settings details[open]>summary>svg { transform:rotate(180deg); }
.sp-settings .sp-method[open]>summary { background:#f1f8fa; }
.sp-settings .sp-badge { color:#247b67; background:#edf8f3; padding:4px 8px; border-radius:7px; font-size:10px; white-space:nowrap; }
.sp-settings .sp-badge.is-inactive { color:#8b9095; background:#f2f3f4; }
.sp-settings .sp-method-body { border-top:1px solid #e3edf2; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:#79909b; }
.sp-settings .sp-legacy { margin-top:16px; padding-top:12px; border-top:1px solid var(--sp-border); }
.sp-settings .sp-legacy>summary { display:flex; justify-content:space-between; font-size:12px; color:#7a929d; padding:8px 0; }
.sp-settings .sp-legacy .sp-method { margin-top:8px; }
.sp-settings .sp-method-editor { padding:12px 14px; margin-top:18px; border:1px dashed #b9d6e0; border-radius:12px; background:#fbfdfe; }
.sp-settings .sp-method-editor>summary { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--sp-accent); font-weight:700; }
.sp-settings .sp-method-editor .sp-form { padding-top:16px; }
.sp-settings .sp-field-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sp-settings .sp-pattern-select { max-width:460px; }
.sp-settings .sp-pattern-choices { margin:0; padding:14px; border:1px solid var(--sp-border); border-radius:13px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.sp-settings .sp-pattern-choices legend { padding:0 7px; font-size:13px; font-weight:700; }
.sp-settings label.sp-choice { display:flex; flex-direction:row; align-items:center; gap:10px; padding:12px; min-width:0; border:1px solid #e0e9ed; border-radius:10px; background:#fbfdfe; font-size:12px; cursor:pointer; }
.sp-settings .sp-choice:has(input:checked) { border-color:#78bbc9; background:#edf8fa; color:#086b81; }
.sp-settings .sp-choice input { width:18px; height:18px; margin:0; flex-shrink:0; accent-color:var(--sp-accent); }
.sp-settings .sp-pattern-list { display:grid; gap:10px; border-top:1px solid var(--sp-border); margin-top:22px; padding-top:20px; }
.sp-settings .sp-saved-pattern { border:1px solid #e1ebef; border-radius:12px; }
.sp-settings .sp-saved-pattern>summary { padding:13px 16px; display:flex; align-items:center; gap:12px; font-size:13px; }
.sp-settings .sp-saved-pattern>summary strong { flex:1; }
.sp-settings .sp-saved-pattern>summary span { color:#889ca6; font-size:12px; }
.sp-settings .sp-saved-pattern>div { padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:9px; border-top:1px solid #e5edf1; }
.sp-settings .sp-tag { display:inline-flex; padding:7px 10px; background:#f1f7f9; border:1px solid #dfeaf0; border-radius:8px; font-size:12px; }
@keyframes sp-drawer { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .sp-settings .sp-top-grid { grid-template-columns:1fr; } }
@media(max-width:600px) {
 .sp-settings { gap:15px; }
 .sp-settings .sp-panel,.sp-settings .sp-intro { padding:16px; border-radius:15px; }
 .sp-settings h3 { font-size:19px; }
 .sp-settings .sp-steps { display:grid; grid-template-columns:1fr; }
 .sp-settings .sp-pattern-choices,.sp-settings .sp-field-pair { grid-template-columns:1fr; }
 .sp-settings .sp-org-row,.sp-settings .sp-method-body { align-items:flex-start; flex-direction:column; }
 .sp-settings button,.sp-settings .sp-org-row button { min-height:44px; }
 .sp-settings .sp-method>summary { padding:11px; gap:7px; }
 .sp-settings .sp-method-name { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .sp-settings *, .sp-settings *::before { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }