@layer base {
  .wrap.ss-scope-wrap h1 {
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .wrap.ss-scope-wrap h1 small {
    font-size: var(--fs-12);
    font-weight: 400;
    color: var(--muted);
  }

  .ss-header-right {
    display: flex;
    gap: var(--space-2);
    align-items: center;
  }

  .ss-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ui-2);
    background: var(--ui-1);
    font-size: var(--fs-11);
    color: var(--muted);
  }

  .ss-header-pill strong { color: var(--ink-2); font-weight: 600; }
  .ss-layout { margin-top: var(--space-4); }
  .ss-layout-main { margin-bottom: var(--space-4); }
  .ss-layout-two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1.4fr); gap: var(--space-4); }

  @media (max-width: 1100px) {
    .ss-layout-two-col { grid-template-columns: minmax(0, 1fr); }
  }

  .ss-inspector {
    background: var(--ui-0);
    border-radius: var(--r-md);
    border: 1px solid var(--ui-2);
    padding: var(--space-4);
  }

  .ss-inspector__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
  }

  .ss-inspector__title { margin: 0; font-size: var(--fs-14); font-weight: 600; }
  .ss-inspector__body { font-size: var(--fs-13); color: var(--ink-2); }
  #ss-active-site-label { font-size: var(--fs-13); color: var(--muted); }

  #ss-active-site-label em {
    font-style: normal;
    font-weight: 100;
    letter-spacing: 1px;
    font-size: .75em;
    display: inline-block;
    position: relative;
    line-height: 1em;
  }

  .ss-help-cta {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--r-md);
    background: var(--ui-1);
    border: 1px dashed var(--ui-2);
    font-size: var(--fs-13);
  }

  .ss-help-cta a { font-weight: 500; }
  .ss-badge--good { background: var(--good); color: #fff; }
  .ss-badge--warn { background: var(--warn); color: #fff; }
  .ss-badge--bad { background: var(--bad); color: #fff; }
  .ss-badge--direct { background: var(--accuracy-direct); color: #fff; }
  .ss-badge--inferred { background: var(--accuracy-inferred); color: #fff; }
  .ss-badge--experimental { background: var(--accuracy-experimental); color: #fff; }

  .badge-self { margin-left: 5px; }

  .ss-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-12);
    color: var(--muted);
  }

  .ss-loading-inline__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ui-2);
    animation: ss-loading-pulse 1.1s infinite ease-in-out;
  }

  .ss-loading-inline__dot:nth-child(2) { animation-delay: 0.15s; }
  .ss-loading-inline__dot:nth-child(3) { animation-delay: 0.3s; }

  #ss-network-sites-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--ui-2);
    background: var(--ui-1);
    font-size: var(--fs-12);
    cursor: pointer;
  }

  #ss-network-sites-toggle .dashicons { font-size: 14px; line-height: 1; }

  #ss-network-sites-drawer {
    margin-top: var(--space-3);
    /* border-radius: var(--r-sm); */
    border: 1px solid var(--ui-2);
    background: var(--ui-0);
  }

  #ss-network-root { position: relative; max-width: 2000px; margin-left: auto; margin-right: auto; margin-bottom: 25px; }
  #ss-network-root.ss-network-drawer--open::after {
    content: '';
    display: block;
    height: 10px;
    background-color: rgba(18,21,23,.5);
    position: absolute;
    z-index: 1000;
    width: 100%;
    bottom: 0;
    left: 0;
  }

  /* .ss-network-drawer--open { max-height: 630px !important; } */

  .ss-network-sites-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .25em 10px .35em .85em;
    background: #C2C3A3;
  }

  .ss-network-sites-drawer {
    border: none;
    background: #121517;
    padding: 0;
    position: relative;
    overflow-y: scroll;
  }

  .ss-network-sites-header h2 { margin: 0; font-size: var(--fs-13); }

  .ss-network-sites-header h2 button { background: transparent; border: none; padding: 0; }

  .ss-network-sites-header h2 span {
    cursor: pointer;
    vertical-align: middle;
    background: var(--glass-10);
    border: none;
    border-radius: var(--r-xs);
    padding: .5em 1em;
    outline: none;
    font-size: 15px;
    position: relative;
    top: -3px;
    color: #fff;
  }
  .site-card-refresh-all:disabled { cursor: not-allowed; opacity: 0.4; }
}