body[data-room] { background: var(--sp-o-page); }
.sar { font-family: var(--sp-font-ui); color: var(--sp-o-ink); }

                
.sar .sar-crumb { display: block; margin: 16px 0 0; font-size: 13px; color: var(--sp-o-faint); }
.sar h1 { margin: 4px 0 4px; font-family: var(--sp-font-ui); font-size: 30px; font-weight: 600; letter-spacing: -0.8px; color: var(--sp-o-ink); }
.sar h2 { font-family: var(--sp-font-ui); font-size: 18px; font-weight: 600; color: var(--sp-o-ink); }
.sar .sa-lead, .sar .sa-msg { color: var(--sp-o-muted); }

                                                                  
.sar .sa-card, .sar .sa-add, .sar .sa-others, .sar .sa-log-wrap { background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-radius: var(--sp-radius-card); padding: 16px 18px; margin: 0 0 14px; color: var(--sp-o-ink); }
.sar .sa-others h2, .sar .sa-log-wrap h2 { margin-top: 0; }
.sar .sa-head .sa-sub, .sar .sa-summary-access, .sar .sa-log-when, .sar .ao-note { color: var(--sp-o-muted); }
.sar .sa-card .sa-summary { min-height: var(--sp-target); border-radius: var(--sp-radius); }
.sar .sa-card .sa-summary:hover, .sar .sa-card .sa-summary:focus-visible { border-color: var(--sp-o-card-edge); background: var(--sp-o-page); }
.sar .sa-grid, .sar .sa-row, .sar .sa-others li, .sar .sa-log-wrap li, .sar .ao-row { border-color: var(--sp-o-row-rule); }
.sar .sa-label, .sar .sa-row-label { font-weight: 500; color: var(--sp-o-ink); }

                                                              
.sar .sa-presets, .sar .sa-levels { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--sp-o-seg); border-radius: var(--sp-radius-seg); }
.sar .sa-choice { min-height: var(--sp-target); padding: 0 14px; border: none; background: transparent; border-radius: var(--sp-radius-seg-in); color: var(--sp-o-ink-2); font-family: var(--sp-font-ui); font-size: 14px; }
.sar .sa-choice[aria-pressed="true"] { background: var(--sp-o-card); color: var(--sp-o-ink); font-weight: 500; box-shadow: 0 1px 2px var(--sp-o-seg-shadow); border: none; }
.sar .sa-tick, .sar .ao-tick { min-height: var(--sp-target); }

                                                         
.sar .ao-in { min-height: var(--sp-target); border: 1px solid var(--sp-o-input-edge); border-radius: var(--sp-radius); background: var(--sp-o-card); color: var(--sp-o-ink); font-family: var(--sp-font-ui); }
.sar .ao-send { min-height: var(--sp-target); background: var(--sp-o-primary); color: var(--sp-o-primary-ink); border: 1px solid var(--sp-o-primary); border-radius: var(--sp-radius-seg); font-family: var(--sp-font-ui); font-weight: 500; }
.sar .ao-small, .sar .sa-close { min-height: var(--sp-target); background: var(--sp-o-card); color: var(--sp-o-ink); border: 1px solid var(--sp-o-button-edge); border-radius: var(--sp-radius-seg); font-family: var(--sp-font-ui); }
.sar .sa-result, .sar .sa-norows { border-radius: var(--sp-radius); }

@media (max-width: 480px) {
  .sar h1 { font-size: 26px; }
  .sar .sa-card, .sar .sa-add, .sar .sa-others, .sar .sa-log-wrap { padding: 12px; }
  .sar .sa-presets, .sar .sa-levels { display: flex; }
}