/* SocialHeat v03 — shared application surfaces. The data and action contracts stay in the views. */
.sh-pilot-page .app-content {
  max-width:100%;
  min-width:0;
  padding:28px!important
}
.sh-pilot-page .app-main,.sh-pilot-page .main-content {
  min-width:0
}
.sh-pilot-page :is(h1,.page-hero-title) {
  font-size:22px!important;
  font-weight:500!important;
  line-height:1.3;
  letter-spacing:-.35px;
  color:var(--ink)
}
.sh-pilot-page :is(h2,.card-title,.chart-title,.widget-title) {
  font-size:15px;
  font-weight:600!important
}
.sh-pilot-page :is(.page-hero-subtitle,.page-subtitle) {
  font-size:12px!important;
  font-weight:400!important;
  color:var(--muted)!important;
  max-width:760px;
  line-height:1.6
}
.sh-pilot-page .page-hero-eyebrow {
  color:var(--muted)!important;
  font-size:10px;
  letter-spacing:1px
}
.sh-pilot-page :is(.page-hero-icon,.page-hero-badge) {
  background:var(--primary-light)!important;
  color:var(--primary)!important;
  box-shadow:none!important
}
.sh-pilot-page .page-hero-title:after {
  display:none
}
.sh-pilot-page :is(.page-header,.page-heading) {
  margin-bottom:24px
}
.sh-pilot-page .card-header {
  padding:18px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--border)
}
.sh-pilot-page :is(.card-body,.modal-body) {
  padding:20px
}
.sh-pilot-page :is(.card-footer,.modal-footer) {
  background:var(--surface);
  padding:14px 20px;
  border-top:1px solid var(--border)
}
.sh-pilot-page :is(.chart-card,.metric,.stat-card,.stats-card,.sl-card,.stat-box,.post-intel-card,.social-post-card,.ai-card,.config-card,.settings-card) {
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  min-width:0
}
.sh-pilot-page :is(.stat-value,.stat-val,.stats-value,.metric .value,.sl-value) {
  font-family:Inter,system-ui,sans-serif!important;
  font-size:26px!important;
  font-weight:600!important;
  letter-spacing:-.5px
}
.sh-pilot-page :is(.stat-icon,.stats-icon,.sl-icon-box) {
  background:var(--primary-light)!important;
  color:var(--primary)!important;
  border-radius:9px!important;
  box-shadow:none!important
}
.sh-pilot-page :is(.form-label,.fg-label) {
  font-size:12px;
  font-weight:500
}
.sh-pilot-page :is(.filter-input,.filter-select,.fg-input,.adv-filter-control,select.form-control,textarea.form-control) {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:7px!important;
  font-family:Inter,system-ui,sans-serif;
  font-size:12px
}
.sh-pilot-page input[type=checkbox],.sh-pilot-page input[type=radio] {
  accent-color:var(--primary)
}
.sh-pilot-page :is(.filter-bar,.m1-filter-bar,.adv-filter-bar,.adv-filter-body) {
  box-shadow:none;
  border-color:var(--border);
  border-radius:10px
}
.sh-pilot-page :is(.btn-success,.btn-info) {
  box-shadow:none
}
.sh-pilot-page :is(.modal-box,.modal-content,.modal-dialog) {
  max-width:calc(100vw - 32px);
  border-radius:12px!important
}
.sh-pilot-page :is(.modal-box,.modal-content) {
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border)
}
.sh-pilot-page .modal-header {
  padding:18px 20px;
  border-bottom:1px solid var(--border)
}
.sh-pilot-page .badge {
  border-radius:5px;
  font-size:11px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:4px
}
.sh-pilot-page .badge-primary {
  background:var(--primary-light);
  color:var(--primary);
  border-color:var(--primary-line)
}
.sh-pilot-page :is(.table-responsive,.table-wrap,.sh-table-scroll) {
  overflow-x:auto;
  max-width:100%;
  scrollbar-width:thin
}
.sh-pilot-page td {
  vertical-align:middle
}
.sh-pilot-page tbody tr:hover {
  background:var(--bg-hover)
}
.sh-pilot-page .pagination {
  gap:5px;
  flex-wrap:wrap;
  align-items:center
}
.sh-pilot-page :is(.pagination a,.pagination button,.pagination span,.page-btn) {
  border-radius:6px!important;
  font-size:12px;
  box-shadow:none;
  min-width:32px;
  min-height:32px
}
.sh-pilot-page .pagination > li.active > :is(a,span),.sh-pilot-page .page-btn.active {
  background:var(--primary)!important;
  color:#fff!important;
  border-color:var(--primary)!important
}
.sh-pilot-page .pagination .disabled {
  opacity:.45;
  pointer-events:none
}
.sh-pilot-page :is(.tab-navigation,.tab-nav) {
  display:flex;
  gap:8px;
  padding:0 0 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border)!important;
  border-radius:0!important;
  overflow-x:auto;
  flex-wrap:nowrap;
  max-width:100%;
  background:transparent!important
}
.sh-pilot-page .tab-item {
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px!important;
  border-radius:8px!important;
  border:0!important;
  white-space:nowrap;
  font-size:12px;
  font-weight:500!important;
  color:var(--muted);
  background:transparent;
  flex-shrink:0
}
.sh-pilot-page .tab-item.active {
  background:var(--primary-light)!important;
  color:var(--primary)!important;
  box-shadow:none!important
}
.sh-pilot-page .tab-item:after {
  display:none!important
}
.sh-pilot-page .tab-item .badge {
  border-radius:20px!important;
  background:var(--primary-light)!important;
  color:var(--primary)!important;
  border:1px solid var(--primary-line);
  font-size:11px!important;
  min-width:25px;
  padding:2px 7px!important;
  justify-content:center
}
.sh-pilot-page .tab-item.active .badge {
  background:var(--primary)!important;
  color:white!important;
  border-color:var(--primary)
}
.sh-pilot-page .tab-item .m1-icon {
  font-size:15px!important
}
.sh-pilot-page .menu-badge {
  font-size:10px
}
.sh-pilot-page pre {
  max-width:100%;
  overflow:auto
}
.sh-pilot-page .log-terminal {
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:none
}
.sh-pilot-page .log-terminal-body {
  max-height:320px;
  overflow:auto
}
.sh-pilot-page .btn-outline-primary {
  color:var(--primary);
  border-color:var(--primary-line);
  background:var(--primary-light)
}
/* Detail layouts retain the original IDs and lazy data loaders. */ .sh-pilot-page .fanpage-hero-card {
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}
.sh-pilot-page .fanpage-title-link {
  font-size:22px!important;
  font-weight:500!important;
  letter-spacing:-.3px
}
.sh-pilot-page .fanpage-hero-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:20px
}
.sh-pilot-page .fanpage-avatar-img {
  width:58px!important;
  height:58px!important;
  border-radius:12px!important
}
.sh-pilot-page .fanpage-hero-right {
  display:contents
}
.sh-pilot-page .fanpage-identity-block {
  grid-row:1;
  min-width:0
}
.sh-pilot-page .fp-action-bar {
  grid-row:2;
  order:initial;
  border:0!important;
  padding:0!important;
  justify-content:flex-start
}
.sh-pilot-page .fp-kpi-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  grid-row:3
}
.sh-pilot-page .fp-kpi-card {
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px!important;
  border:1px solid var(--border);
  background:var(--surface)!important;
  border-radius:10px;
  box-shadow:none!important;
  min-width:0
}
.sh-pilot-page .fp-kpi-card>div:last-child {
  display:flex;
  flex-direction:column;
  min-width:0
}
.sh-pilot-page .fp-kpi-card .fp-kpi-lbl {
  order:-1;
  min-height:32px;
  font-size:11px;
  font-weight:400;
  color:var(--muted)!important
}
.sh-pilot-page .fp-kpi-val {
  font-size:26px!important;
  font-weight:600!important;
  line-height:1.3;
  color:var(--ink)!important
}
.sh-pilot-page .fp-kpi-icon {
  width:20px;
  height:20px;
  background:transparent!important;
  color:var(--muted)!important;
  font-size:16px;
  flex-shrink:0
}
.sh-pilot-page .fp-kpi-card:has(#heroStatPhones) {
  background:var(--primary-light)!important;
  border-color:var(--primary-line)
}
.sh-pilot-page #heroStatPhones {
  color:var(--primary)!important
}
.sh-pilot-page .fanpage-sub-stats {
  color:var(--muted);
  font-size:11px
}
.sh-pilot-page :is(.dashboard-grid,.dashboard-analytics-grid) {
  gap:20px
}
.sh-pilot-page .chart-card {
  padding:20px!important;
  overflow:hidden
}
.sh-pilot-page .trendline-chart-svg-wrap {
  height:240px!important;
  min-height:0!important
}
.sh-pilot-page .trendline-chart-svg-wrap>svg {
  width:100%;
  height:100%
}
.sh-pilot-page :is(.chart-sub,.widget-sub) {
  font-size:12px
}
.sh-pilot-page .post-detail-split-grid {
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
  gap:20px;
  align-items:start
}
.sh-pilot-page .social-post-card {
  position:sticky;
  top:90px
}
.sh-pilot-page .social-post-avatar {
  border-radius:50%!important
}
.sh-pilot-page .post-caption-box {
  font-size:13px!important;
  line-height:1.65!important
}
.sh-pilot-page .post-media-showcase,.sh-pilot-page .post-media-showcase :is(img,video) {
  max-height:360px!important
}
.sh-pilot-page .post-intel-header {
  background:transparent!important
}
.sh-pilot-page .intel-kpi-value {
  font-size:25px!important;
  color:var(--ink)!important;
  font-weight:600!important
}
.sh-pilot-page .intel-kpi-item {
  border:1px solid var(--border);
  border-radius:10px
}
.sh-pilot-page .intel-conversion-card {
  background:var(--primary-light)!important;
  border:1px solid var(--primary-line);
  box-shadow:none
}
.sh-pilot-page .m1-post-detail.sh-data-view .post-detail-split-grid {
  grid-template-columns:minmax(0,1fr)
}
.sh-pilot-page .m1-post-detail.sh-data-view .social-post-card {
  display:none
}
.sh-pilot-page .sh-post-page.sh-data-view .sh-user-post-content {
  display:none
}
.sh-pilot-page .sh-post-page :is(.tab-pane-content,.tab-content) {
  min-width:0
}
.sh-pilot-page .audience-row td {
  padding:12px 10px!important
}
.sh-pilot-page .audience-row img {
  border-radius:50%
}
.sh-pilot-page .badge-locked {
  background:var(--bg-subtle)!important;
  border:1px solid var(--border)!important;
  border-radius:5px!important;
  color:var(--muted)!important
}
.sh-pilot-page :is(.audience-pagination,.comments-pagination) {
  padding:14px 18px!important;
  gap:12px;
  border-top:1px solid var(--border);
  background:var(--surface)!important
}
.sh-pilot-page .audience-pagination button,.sh-pilot-page .comments-pagination button {
  font-size:12px;
  border-radius:6px
}
.sh-pilot-page .sh-detail-heading {
  margin-bottom:20px
}
.sh-pilot-page .sh-detail-heading p {
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px
}
/* Charts Studio 06.A / 06.B at product scale, never stretched to the card width. */ .sh-circular-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin:0 0 20px
}
.sh-circular-card {
  padding:20px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  min-width:0
}
.sh-circular-card h2 {
  margin:0 0 5px
}
.sh-circular-card p {
  color:var(--muted);
  font-size:12px;
  margin:0
}
.sh-circular-kpi {
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:18px
}
.sh-circular-kpi strong {
  font-size:28px;
  font-weight:600;
  color:var(--ink)
}
.sh-circular-kpi span {
  font-size:11px;
  color:var(--muted)
}
.sh-circular-card svg {
  display:block;
  width:100%;
  max-width:300px;
  height:192px;
  margin:8px auto
}
.sh-circular-card .sh-chart-total {
  font:600 25px Inter,sans-serif;
  fill:var(--ink)
}
.sh-circular-card .sh-chart-unit {
  font:400 10px Inter,sans-serif;
  fill:var(--muted)
}
.sh-chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}
.sh-chart-legend span {
  display:inline-flex;
  align-items:center;
  gap:5px
}
.sh-chart-legend i {
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--swatch)
}
.sh-circular-card .sh-chart-note {
  border-top:1px solid var(--border);
  padding-top:12px;
  margin-top:16px;
  font-size:11px
}
.sh-circular-card.sh-thin-ring {
  background:linear-gradient(145deg,#084C8D,#0B61B4 55%,#1B84FF);
  --ink:#fff;
  --muted:#D8E9FA;
  --border:rgba(255,255,255,.22);
  color:#fff
}
.sh-circular-card.sh-thin-ring h2 {
  color:#fff!important
}
.sh-chart-empty {
  height:192px;
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--muted);
  font-size:12px
}
.sh-compact-pager {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted)
}
.sh-compact-pager nav {
  display:flex;
  align-items:center;
  gap:8px
}
/* Account, configuration and crawler workspaces. */ .sh-pilot-page :is(.config-section,.settings-section,.export-card,.api-section) {
  border-color:var(--border);
  border-radius:12px;
  box-shadow:none
}
.sh-pilot-page :is(.ai-marketing-page,.config-page,.export-page,.scanpost-col-left,.scanpost-col-right) {
  min-width:0
}
.sh-pilot-page .scanpost-grid {
  gap:20px;
  grid-template-columns:minmax(280px,340px) minmax(0,1fr)
}
.sh-pilot-page :is(.scan-main-tab,.engage-range-pill,.comment-date-btn,.comment-prio-btn) {
  font-size:12px;
  border-radius:7px;
  box-shadow:none
}
.sh-pilot-page :is(.scan-main-tab,.engage-range-pill,.comment-date-btn,.comment-prio-btn).active {
  background:var(--primary-light)!important;
  color:var(--primary)!important;
  border-color:var(--primary-line)!important
}
.sh-pilot-page .scan-control-grid {
  gap:20px
}
.sh-pilot-page :is(.table-empty,.empty-state) {
  padding:36px 20px;
  color:var(--muted)
}
/* Standalone authentication uses the same local brand assets. */ .sh-pilot-page.auth-page {
  background:var(--bg-body)
}
.sh-pilot-page .auth-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 8px 30px rgba(15,23,42,.04);
  padding:32px!important
}
.sh-pilot-page .auth-logo {
  justify-content:center
}
.sh-pilot-page .auth-logo-icon {
  display:none!important
}
.sh-pilot-page .auth-logo-text {
  display:none!important
}
.sh-pilot-page .auth-logo:before {
  content:"";
  display:block;
  width:190px;
  height:35px;
  background:url('../../socialheat/logo-light.png') center/contain no-repeat
}
.sh-pilot-page[data-theme=dark] .auth-logo:before,[data-theme=dark] .sh-pilot-page .auth-logo:before {
  background-image:url('../../socialheat/logo-dark.png')
}
.sh-pilot-page .auth-title {
  font-size:22px;
  font-weight:500
}
.sh-pilot-page .auth-subtitle {
  font-size:12px;
  color:var(--muted)
}
@media(min-width:1450px) {
  .sh-pilot-page .fanpage-hero-grid {
    grid-template-columns:minmax(0,1fr) auto
  }
  .sh-pilot-page .fanpage-identity-block {
    grid-column:1
  }
  .sh-pilot-page .fp-action-bar {
    grid-row:1;
    grid-column:2;
    align-self:start
  }
  .sh-pilot-page .fp-kpi-grid {
    grid-row:2;
    grid-column:1/-1
  }
}
@media(max-width:1100px) {
  .sh-pilot-page .fp-kpi-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .sh-pilot-page .scanpost-grid {
    grid-template-columns:minmax(250px,320px) minmax(0,1fr)
  }
}
@media(max-width:1023px) {
  .sh-pilot-page .app-content {
    padding:24px 16px!important
  }
  .sh-pilot-page .scanpost-grid {
    grid-template-columns:1fr
  }
  .sh-pilot-page .post-detail-split-grid {
    grid-template-columns:1fr
  }
  .sh-pilot-page .social-post-card {
    position:static
  }
  .sh-pilot.sidebar-collapsed .sh-mini-logo {
    display:none
  }
}
@media(max-width:767px) {
  .sh-pilot-page :is(h1,.page-hero-title) {
    font-size:20px!important
  }
  .sh-pilot-page .fp-kpi-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .sh-pilot-page .fp-kpi-card:last-child {
    grid-column:1/-1
  }
  .sh-pilot-page .fp-kpi-val {
    font-size:24px!important
  }
  .sh-pilot-page .tab-item {
    font-size:11px;
    padding:9px 10px!important
  }
  .sh-pilot-page .tab-item .badge {
    font-size:10px!important
  }
  .sh-pilot-page :is(.card-body,.chart-card) {
    padding:16px!important
  }
  .sh-circular-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .sh-circular-card {
    padding:16px
  }
  .sh-pilot-page :is(.modal-box,.modal-content) {
    max-height:90vh;
    overflow-y:auto
  }
  .sh-pilot-page .trendline-chart-svg-wrap {
    height:200px!important
  }
  .sh-compact-pager {
    flex-wrap:wrap
  }
  .sh-pilot-page .auth-card {
    padding:24px!important
  }
}
.sh-post-workspace {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px
}
.sh-post-workspace>.post-intel-card {
  margin:0
}
.sh-post-workspace>.d-flex {
  margin:0!important
}
.sh-post-workspace .sh-circular-grid {
  grid-template-columns:1fr 1fr
}
.sh-post-workspace .dashboard-analytics-grid {
  display:grid;
  grid-template-columns:1fr
}
.sh-post-workspace .dashboard-analytics-grid>.chart-card {
  grid-column:1/-1
}
.sh-user-overview {
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(0,1fr);
  gap:20px;
  align-items:start
}
.sh-user-overview .sh-circular-grid {
  grid-template-columns:1fr
}
.sh-user-post-content img {
  max-width:100%
}
.sh-pilot-page .sh-user-post-content {
  display:block
}
@media(max-width:1250px) {
  .sh-post-workspace .sh-circular-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:767px) {
  .sh-user-overview {
    grid-template-columns:1fr
  }
  .sh-post-workspace .sh-circular-grid {
    grid-template-columns:1fr
  }
}
/* Module-specific surfaces inherit the same v03 hierarchy. */ .sh-pilot-page .ai-workspace {
  --ai-primary:var(--primary);
  --ai-soft:var(--primary-light);
  --ai-primary-line:var(--primary-line);
  --ai-paper:var(--surface);
  --ai-paper-2:var(--surface-2);
  --ai-border:var(--border);
  --ai-ink:var(--ink);
  --ai-text:var(--text);
  --ai-muted:var(--muted);
  max-width:none
}
.sh-pilot-page .ai-workspace :is(.ai-hero,.ai-card,.ai-kpi) {
  border-radius:12px!important;
  box-shadow:none!important
}
.sh-pilot-page .ai-workspace .ai-hero {
  padding:0 0 24px;
  background:transparent;
  border:0
}
.sh-pilot-page .ai-workspace .ai-button {
  border-radius:7px;
  font-size:12px;
  min-height:36px;
  font-weight:500
}
.sh-pilot-page .ai-kpi strong {
  font-size:26px;
  font-weight:600
}
.sh-pilot-page .ai-kpi {
  background:var(--surface)!important;
  border:1px solid var(--border)
}
.sh-pilot-page .ai-kpi-icon {
  background:var(--primary-light);
  color:var(--primary)
}
.sh-pilot-page :is(.ldb-hero,.ads-hero-header) {
  padding:0 0 24px!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important
}
.sh-pilot-page :is(.ldb-hero-title,.ads-hero-title) {
  color:var(--ink)!important;
  font-size:22px!important;
  font-weight:500!important
}
.sh-pilot-page :is(.ldb-hero-sub,.ads-hero-subtitle) {
  color:var(--muted)!important;
  font-size:12px!important
}
.sh-pilot-page :is(.ldb-hero-eyebrow,.ads-hero-eyebrow) {
  color:var(--muted)!important;
  font-weight:600!important;
  letter-spacing:1px
}
.sh-pilot-page :is(.dash-card,.insight-card,.metric-card,.pi-card,.ads-filter-card) {
  background:var(--surface);
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  box-shadow:none!important
}
.sh-pilot-page :is(.metric-card-val,.kpi-value) {
  font-size:26px!important;
  font-weight:600!important;
  color:var(--ink)
}
.sh-pilot-page :is(.dash-card-title,.metric-card-label) {
  font-weight:500
}
.sh-pilot-page .btn-preset.active {
  background:var(--primary)!important;
  color:#fff!important;
  border-color:var(--primary)!important
}
.sh-pilot-page .btn-preset {
  border-radius:7px;
  font-size:12px
}
.sh-pilot-page .ai-model-dialog {
  max-width:min(780px,calc(100vw - 32px));
  max-height:90vh;
  overflow:auto
}
.sh-post-extra {
  display:grid;
  gap:16px;
  margin-top:20px
}
.sh-pilot-page .post-intel-header {
  padding:12px 18px
}
.sh-post-workspace .post-intel-body {
  padding:16px
}
.sh-post-workspace .intel-kpi-grid {
  margin:0
}
.sh-pilot-page .intel-track-fill {
  background:var(--primary)!important
}
.sh-pilot-page .intel-conversion-pct {
  color:var(--primary)!important
}
.sh-pilot-page .sh-kpi-note {
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.4
}
/* Data enrichment horizontal bar chart card */ .sh-hbar-card {
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  margin:0 0 20px;
  min-width:0
}
.sh-hbar-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border)
}
.sh-hbar-list {
  display:flex;
  flex-direction:column;
  gap:10px
}
.sh-hbar-row {
  display:grid;
  grid-template-columns:minmax(160px,.45fr) minmax(0,1fr);
  gap:16px;
  align-items:center
}
.sh-hbar-label {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.sh-hbar-label strong {
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap
}
.sh-hbar-label small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.sh-hbar-data {
  min-width:0
}
.sh-hbar-numbers {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px
}
.sh-hbar-pct {
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px
}
.sh-hbar-count {
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}
.sh-hbar-sep {
  margin:0 1px;
  opacity:.5
}
.sh-hbar-track {
  height:6px;
  border-radius:3px;
  background:var(--surface-2,var(--bg-hover,#F1F3F7));
  overflow:hidden
}
.sh-hbar-fill {
  height:100%;
  border-radius:3px;
  transition:width .6s cubic-bezier(.4,0,.2,1)
}
@media(max-width:767px) {
  .sh-hbar-row {
    grid-template-columns:1fr;
    gap:8px
  }
  .sh-hbar-head {
    flex-direction:column;
    gap:8px
  }
  .sh-hbar-card {
    padding:16px 18px
  }
}
/* Overview dashboard layout components */ .sh-ov-kpi-strip {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px
}
.sh-ov-kpi {
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  min-width:0
}
.sh-ov-kpi-label {
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.sh-ov-kpi-value {
  display:block;
  font-size:24px;
  font-weight:700;
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.4px;
  font-variant-numeric:tabular-nums
}
.sh-ov-kpi-sub {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.sh-ov-grid-2 {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:20px;
  margin-bottom:20px;
  align-items:start
}
.sh-ov-grid-2>div>.sh-circular-card h2 {
  margin:0 0 4px
}
.sh-ov-grid-2>div>.sh-circular-card>p:first-of-type {
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border)
}
.sh-ov-card {
  padding:20px 22px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  min-width:0
}
.sh-ov-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border)
}
.sh-ov-card-head h2 {
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--ink)
}
.sh-ov-card-head p {
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted)
}
.sh-ov-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:86px;
  font-size:11px;
  font-weight:600;
  background:var(--sh-primary-light,#EBF3FA);
  color:var(--sh-primary,#0B61B4);
  border:1px solid var(--sh-primary-line,#B8D5EF);
  white-space:nowrap;
  flex-shrink:0
}
.sh-ov-legend-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--surface-2,var(--bg-hover,#F1F3F7));
  border-radius:8px;
  border:1px solid var(--border)
}
.sh-ov-legend-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0
}
.sh-ov-legend-label {
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  flex:1
}
.sh-ov-legend-val {
  font-size:13px;
  font-weight:700;
  white-space:nowrap
}
.sh-ov-legend-val small {
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  margin-left:2px
}
@media(max-width:1100px) {
  .sh-ov-kpi-strip {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:767px) {
  .sh-ov-kpi-strip {
    grid-template-columns:1fr
  }
  .sh-ov-grid-2 {
    grid-template-columns:1fr
  }
  .sh-ov-kpi {
    padding:14px
  }
  .sh-ov-card {
    padding:16px
  }
}