body { background: var(--sp-l-c-f6f4ef); color: var(--sp-l-c-1f2a24); }
.sa { max-width: 760px; margin: 0 auto; padding: 16px; font-family: var(--sp-l-f-inter-3); }
.sa h1 { font-size: 22px; margin: 12px 0 4px; }
.sa h2 { font-size: 17px; margin: 18px 0 6px; }
.sa-lead { color: var(--sp-l-c-55605a); margin: 0 0 12px; font-size: 14px; }
.sa-msg { min-height: 18px; font-size: 14px; color: var(--sp-l-c-55605a); }
.sa-msg.bad { color: var(--sp-l-c-9b2c2c); }
.sa-card { background: var(--sp-l-c-ffffff); border: 1px solid var(--sp-l-c-d9d4c7); border-radius: 10px; padding: 14px; margin: 0 0 16px; }
.sa-head { margin: 0; }
                                                                                                                           
                                                                                                                       
                                                                               
.sa-card .sa-summary { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; margin: 0; padding: 6px 8px;
  text-align: left; white-space: normal; font-size: 14px; font-weight: 400; line-height: 1.35; border-color: transparent; background: transparent; }
.sa-card .sa-summary:hover, .sa-card .sa-summary:focus-visible { border-color: var(--sp-l-c-b9b2a2); background: var(--sp-l-c-faf8f3); }
.sa-card.sa-open .sa-summary { border-bottom: 1px solid var(--sp-l-c-ebe7dc); border-radius: 6px 6px 0 0; margin-bottom: 8px; }
.sa-head strong { font-size: 16px; }
.sa-head .sa-sub { color: var(--sp-l-c-55605a); font-size: 13px; }
.sa-summary-access { flex: 1 1 200px; color: var(--sp-l-c-3b4a42); font-size: 13.5px; }
.sa-body[hidden] { display: none; }
.sa-norows { font-size: 14px; color: var(--sp-l-c-5c3d0b); background: var(--sp-l-c-fdf6e7); border-left: 3px solid var(--sp-l-c-b7791f); padding: 6px 10px; margin: 6px 0 10px; }
.sa-label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.sa-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-grid { margin-top: 10px; border-top: 1px solid var(--sp-l-c-ebe7dc); }
.sa-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sp-l-c-ebe7dc); }
.sa-row-label { flex: 1 1 150px; font-size: 14px; font-weight: 600; }
.sa-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-choice { min-height: 36px; padding: 6px 12px; border: 1px solid var(--sp-l-c-b9b2a2); border-radius: 6px; background: var(--sp-l-c-faf8f3); color: var(--sp-l-c-1f2a24); font: inherit; font-size: 14px; cursor: pointer; }
.sa-choice[aria-pressed="true"] { background: var(--sp-l-c-1f3a5f); border-color: var(--sp-l-c-1f3a5f); color: var(--sp-l-c-ffffff); }
.sa-choice[disabled] { opacity: .6; cursor: default; }
.sa-vendors { flex: 1 1 100%; padding: 4px 0 2px; }
.sa-vendor-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.sa-tick { display: flex; gap: 6px; align-items: center; font-size: 14px; min-height: 36px; }
.sa-tick input { width: 20px; height: 20px; }
.sa-result { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--sp-l-c-478b5d); background: var(--sp-l-c-eef7f0); color: var(--sp-l-c-1c3727); font-size: 14px; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.sa-result.bad { border-left-color: var(--sp-l-c-9b2c2c); background: var(--sp-l-c-fbf0ef); color: var(--sp-l-c-6d1f1f); }
                                                                                       
.sa-add { background: var(--sp-l-c-ffffff); border: 1px solid var(--sp-l-c-d9d4c7); border-radius: 10px; padding: 14px; margin: 0 0 16px; }
.sa-add h2 { font-size: 17px; margin: 0 0 4px; }
.ao-note { font-size: 13px; color: var(--sp-l-c-55605a); margin: 3px 0 7px; line-height: 1.45; }
.ao-note.ao-disabled { color: var(--sp-l-c-5c3d0b); font-weight: 600; }
.ao-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sp-l-c-ebe7dc); }
.ao-in { min-height: 36px; padding: 6px 8px; border: 1px solid var(--sp-l-c-b9b2a2); border-radius: 6px; font: inherit; font-size: 14px; box-sizing: border-box; max-width: 100%; }
.ao-name { flex: 1 1 140px; } .ao-email { flex: 1 1 180px; } .ao-phone { flex: 1 1 130px; }
.ao-sheets { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 100%; }
.ao-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; min-height: 32px; }
.ao-tick input { width: 18px; height: 18px; }
.ao-small { min-height: 32px; padding: 4px 10px; border: 1px solid var(--sp-l-c-b9b2a2); border-radius: 6px; background: var(--sp-l-c-faf8f3); color: var(--sp-l-c-1f2a24); font: inherit; font-size: 13px; cursor: pointer; }
.ao-send { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 6px; background: var(--sp-l-c-1f3a5f); color: var(--sp-l-c-ffffff); font: inherit; font-weight: 600; cursor: pointer; }
.ao-send[disabled], .ao-small[disabled] { opacity: .5; cursor: not-allowed; }
.ao-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; align-items: center; }
.ao-msg { min-height: 16px; font-size: 13px; color: var(--sp-l-c-55605a); }
.ao-msg.ok { color: var(--sp-l-c-1c3727); } .ao-msg.bad { color: var(--sp-l-c-9b2c2c); }
.ao-results { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.ao-results .ao-ok { color: var(--sp-l-c-1c3727); } .ao-results .ao-bad { color: var(--sp-l-c-9b2c2c); }
.sa-close { min-height: 32px; padding: 4px 10px; border: 1px solid var(--sp-l-c-b9b2a2); border-radius: 6px; background: var(--sp-l-c-ffffff); font: inherit; font-size: 13px; cursor: pointer; }
.sa-others ul, .sa-log-wrap ul { list-style: none; padding: 0; margin: 0; }
.sa-others li, .sa-log-wrap li { font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--sp-l-c-ebe7dc); }
.sa-others .sa-ask { margin-left: 10px; }
.sa-others .sa-ask-msg { margin-left: 8px; font-size: 13px; }
.sa-others .sa-ask-msg.sa-ask-err { color: var(--sp-l-c-9b2c2c); }
.sa-log-when { color: var(--sp-l-c-55605a); font-size: 13px; margin-right: 6px; }
.sa-hidden { display: none; }
@media (max-width: 480px) { .sa-card { padding: 12px; } .sa-choice { flex: 1 1 auto; } .sa-row-label { flex-basis: 100%; } }