main.card > header { grid-template-areas: "crumb actions" "title actions" "subtitle actions"; row-gap: 2px; }
main.card > header > .db-crumb { grid-area: crumb; margin: 0; font-family: var(--sp-font-ui); font-size: 13px; color: var(--sp-o-faint); }
main.card > header:has(> h1[hidden]) > .db-crumb { display: none; }                                                                        
main.card > header > h1 { margin: 0; font-family: var(--sp-font-ui); font-weight: 600; font-size: 30px; letter-spacing: -0.8px; line-height: 1.15;
  color: var(--sp-o-ink); text-transform: none; }
main.card > header > .subtitle { margin: 2px 0 0; font-family: var(--sp-font-ui); font-size: 13px; color: var(--sp-o-faint); }
@media (max-width: 720px) {
  main.card > header { grid-template-areas: "crumb" "title" "subtitle" "actions"; }
  main.card > header > h1 { font-size: 24px; letter-spacing: -0.5px; }
}

                                               
#live-sales-card.live-card { margin-top: 16px; background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-radius: var(--sp-radius-lg); box-shadow: none;
  padding: 18px 20px; font-family: var(--sp-font-ui); color: var(--sp-o-ink); }
#live-sales-card .live-badge { color: var(--sp-o-muted); letter-spacing: normal; }
#live-sales-card .ls-big { font-family: var(--sp-font-ui); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -1px; color: var(--sp-o-ink); }
#live-sales-card .ls-sub, #live-sales-card .ls-foot { color: var(--sp-o-muted); }
#live-sales-card .ls-tag { text-transform: none; letter-spacing: normal; }
#live-sales-card .ls-segmented { background: var(--sp-o-seg); border: none; border-radius: var(--sp-radius-seg); padding: 4px; }
#live-sales-card .ls-segmented button { min-height: var(--sp-target); padding: 0 14px; border-radius: var(--sp-radius-seg-in); color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-weight: 400; }
#live-sales-card .ls-segmented button[aria-pressed="true"] { background: var(--sp-o-card); font-weight: 500; box-shadow: 0 1px 2px var(--sp-o-seg-shadow); }

                                                                            
#range-bar { gap: 12px 16px; font-family: var(--sp-font-ui); }
#range-bar label { color: var(--sp-o-muted); font-weight: 500; font-size: 13px; }
#range-bar input[type="date"] { 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); font-variant-numeric: tabular-nums; padding: 0 10px; }
#range-bar .range-presets { gap: 4px; padding: 4px; background: var(--sp-o-seg); border-radius: var(--sp-radius-seg); }
#range-bar .range-presets .btn-sm { min-height: var(--sp-target); padding: 0 14px; border: none; border-radius: var(--sp-radius-seg-in); background: transparent;
  color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-size: 14px; font-weight: 400; box-shadow: none; }
#range-bar .range-presets .btn-sm:hover { background: var(--sp-o-card); }
#range-bar .range-presets .btn-sm:focus-visible { outline: 2px solid var(--sp-o-ink); outline-offset: 2px; }

                                                                         
#master-toggle.master-toggle { background: transparent; border: none; padding: 0; }
#master-toggle .nav-row { gap: 4px; padding: 4px; background: var(--sp-o-seg); border-radius: var(--sp-radius-seg); }
#master-toggle .nav-row > button { min-height: var(--sp-target); border: none; border-radius: var(--sp-radius-seg-in); background: transparent; box-shadow: none;
  color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-size: 14px; font-weight: 400; }
#master-toggle .nav-row > button:hover { color: var(--sp-o-ink); background: var(--sp-o-card); }
#master-toggle .nav-row > button.is-current, #master-toggle .nav-row > button[aria-expanded="true"], #master-toggle .nav-row > button[aria-pressed="true"] {
  background: var(--sp-o-card); font-weight: 500; box-shadow: 0 1px 2px var(--sp-o-seg-shadow); }
#master-toggle .nav-row .ng-current { color: var(--sp-o-faint); }
#master-toggle .nav-row > button.is-current .ng-current { color: var(--sp-o-muted); }
#master-toggle .nav-group-btn .ng-label::after { color: var(--sp-o-faint); }
#master-toggle .nav-row > button:focus-visible { outline: 2px solid var(--sp-o-ink); outline-offset: 2px; }
#master-toggle .nav-badge { font-family: var(--sp-font-ui); font-variant-numeric: tabular-nums; background: var(--sp-o-primary); color: var(--sp-o-primary-ink); }
#master-toggle .nav-badge.sev-alarm { background: var(--sp-problem); }
#master-toggle .nav-menu { background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-radius: var(--sp-radius-seg); box-shadow: 0 8px 24px -8px var(--sp-o-seg-shadow); }
#master-toggle .nav-menu button { min-height: var(--sp-target); border-radius: var(--sp-radius-item); color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-weight: 400; }
#master-toggle .nav-menu button:hover, #master-toggle .nav-menu button[aria-pressed="true"] { background: var(--sp-o-seg); color: var(--sp-o-ink); }
                                                                                                                                
                                                                                                                          
                                                                                           
@media (max-width: 767px) {
  #master-toggle .nav-menu[data-group] { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--sp-bar-height) + 8px); min-width: 0;
    max-height: calc(100vh - var(--sp-bar-height) - 24px); overflow-y: auto; z-index: 95; box-shadow: 0 -8px 24px -8px var(--sp-o-seg-shadow); }
}

                                                                                                              
#view-findings #findings-panel { background: transparent; border: none; box-shadow: none; padding: 0; font-family: var(--sp-font-ui); color: var(--sp-o-ink); }
#view-findings #findings-panel h2 { font-family: var(--sp-font-ui); font-weight: 600; font-size: 22px; letter-spacing: -0.4px; text-transform: none; color: var(--sp-o-ink); }
#view-findings .findings-filter { gap: 4px; padding: 4px; border: none; border-radius: var(--sp-radius-seg); background: var(--sp-o-seg); overflow: visible; flex-wrap: wrap; width: auto; }
#view-findings .ff-btn { min-height: var(--sp-target); padding: 0 14px; border-radius: var(--sp-radius-seg-in); color: var(--sp-o-ink); font-family: var(--sp-font-ui); font-size: 14px; }
#view-findings .ff-btn[aria-pressed="true"] { background: var(--sp-o-card); font-weight: 500; box-shadow: 0 1px 2px var(--sp-o-seg-shadow); }
#view-findings #findings-recheck { min-height: var(--sp-target); margin-left: auto; padding: 0 14px; border: 1px solid var(--sp-o-button-edge); border-radius: var(--sp-radius-seg-in);
  background: var(--sp-o-card); color: var(--sp-o-ink); font-family: var(--sp-font-ui); }
#view-findings .finding-card { background: var(--sp-o-card); border: 1px solid var(--sp-o-card-edge); border-left-width: 1px; border-radius: var(--sp-radius-card); padding: 16px 18px; margin: 0 0 12px; }
#view-findings .finding-card.sev-alarm { border-left: 3px solid var(--sp-problem); }
#view-findings .finding-title { font-family: var(--sp-font-ui); font-weight: 600; font-size: 15px; color: var(--sp-o-ink); }
#view-findings .sev-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-family: var(--sp-font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: normal; text-transform: capitalize; background: var(--sp-o-seg); color: var(--sp-o-ink); }
#view-findings .sev-pill.sev-alarm { background: var(--sp-problem); color: var(--sp-o-primary-ink); }
#view-findings .finding-fix, #view-findings .finding-meta { color: var(--sp-o-muted); }
#view-findings .finding-actions, #view-findings .finding-fix.finding-cd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#view-findings .fa-btn, #view-findings .finding-fix-link.warm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sp-target); padding: 0 16px;
  border: 1px solid var(--sp-o-button-edge); border-radius: var(--sp-radius-seg-in); background: var(--sp-o-card); color: var(--sp-o-ink);
  font-family: var(--sp-font-ui); font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: none; }
#view-findings .fa-btn:hover, #view-findings .finding-fix-link.warm-btn:hover { background: var(--sp-o-seg); }
#view-findings .fa-btn.fa-primary { background: var(--sp-o-primary); border-color: var(--sp-o-primary); color: var(--sp-o-primary-ink); }
#view-findings .fa-btn.fa-primary:hover { background: var(--sp-o-ink-hover); }
#view-findings .fa-btn.fa-quiet { border-color: transparent; background: transparent; color: var(--sp-o-muted); }
#view-findings .fa-btn.fa-danger, #view-findings .fa-btn.fa-danger:hover { background: var(--sp-o-card); border-color: var(--sp-problem); color: var(--sp-problem); }
#view-findings .fa-btn:focus-visible, #view-findings .finding-fix-link:focus-visible { outline: 2px solid var(--sp-o-ink); outline-offset: 2px; }
#view-findings .findings-spach { margin-top: 12px; }
#view-findings .findings-spach > summary { cursor: pointer; font-size: 13px; color: var(--sp-o-ink-2); padding: 8px 0; }