@layer components {
  /* ---- Generic card ---- */
  .ss-card {
    border-radius: var(--r-md);
    padding: var(--space-5);
    border: none;
    margin-bottom: var(--space-5);
  }

  .ss-card--tight {
    padding: var(--space-3) var(--space-4);
  }

  .ss-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .ss-card__title {
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 600;
    color: var(--ink);
  }

  .ss-card__subtitle {
    margin: 0;
    font-size: var(--fs-13);
    color: var(--muted);
  }

  /* ---- Simple grid ---- */
  .ss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3) var(--space-4);
  }

  @media (max-width: 960px) {
    .ss-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ---- Metric item ---- */
  .ss-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-13);
  }

  .ss-item__label {
    color: var(--muted);
  }

  .ss-item__value {
    font-weight: 500;
    color: var(--ink-2);
  }

  /* ---- Badge chips ---- */
  .ss-badge {
    display: inline-block;
    padding: .5em 1.3em;
    border-radius: var(--r-pill);
    background: var(--info);
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5em;
  }

  .ss-badge--good {
    background: var(--good-soft);
    color: #166534;
    border-color: #bbf7d0;
  }

  .ss-badge--warn {
    background: var(--warn-soft);
    color: #92400e;
    border-color: #facc15;
  }

  .ss-badge--bad {
    background: var(--bad-soft);
    color: var(--bad);
    border-color: #fecaca;
  }

    
  .ss-badge--direct {
    background: var(--accuracy-direct-soft);
    color: #0d5c5c;
    border-color: #99d6d6;
  }
  .ss-badge--inferred {
    background: var(--accuracy-inferred-soft);
    color: #2e4080;
    border-color: #a5b4e8;
  }
  .ss-badge--experimental {
    background: var(--accuracy-experimental-soft);
    color: #475569;
    border-color: #cbd5e1;
  }

  .ss-badge--info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
  }

  .ss-confidence-badge {
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 1em;
    white-space: nowrap;
  }

  .ss-title-badge {
    padding: 7px 17px;
    border-radius: 15px;
    font-size: 14px;
    background: rgba(255, 255, 255, .15);
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 1em;
    white-space: nowrap;
  }

    /* ---- State tag (inline label next to metric value) ---- */
  .ss-state-tag {
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2) !important;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    line-height: 1em;
    white-space: nowrap;
  }
  
  body[data-state-filter="bad"] .report-item.state-bad .ss-state-tag,
  body[data-state-filter="warn"] .report-item.state-warn .ss-state-tag,
  body[data-state-filter="good"] .report-item.state-good .ss-state-tag,
  body[data-state-filter="unknown"] .report-item.state-unknown .ss-state-tag,
  .report-item:hover .ss-state-tag {
    color: #fff !important;
  }

  .state-good .ss-state-tag {
    color: var(--good-fg);
  }

  .state-warn .ss-state-tag {
    background: var(--warn-soft);
    color: var(--warn-fg);
  }

  .state-bad .ss-state-tag {
    background: var(--bad-soft);
    color: var(--bad-fg);
  }

  .state-neutral .ss-state-tag {
    background: var(--muted-soft, rgba(127, 127, 127, 0.15));
    color: var(--muted);
  }

  .state-neutral:hover .ss-state-tag {
    background: rgba(0, 0, 0, 0.1) !important;
    color: var(--ink) !important;
  }

  .state-unknown .ss-state-tag {
    background: var(--unknown-soft, rgba(158, 158, 158, 0.15));
    color: var(--unknown-fg, #757575);
    font-style: italic;
  }

  .state-unknown:hover .ss-state-tag {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--ink) !important;
  }

  /* ---- Status pill (OK / warning / error) ---- */
  .ss-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    border: 1px solid var(--border-subtle);
    font-size: var(--fs-11);
    font-weight: 500;
  }

  .ss-status-pill--ok {
    border-color: var(--good);
    color: #166534;
  }

  .ss-status-pill--warn {
    border-color: #eab308;
    color: #92400e;
  }

  .ss-status-pill--bad {
    border-color: #ef4444;
    color: var(--bad);
  }

  /* ---- Tables ---- */
  .ss-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
  }

  .ss-table th,
  .ss-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ui-2);
    vertical-align: top;
  }

  .ss-table th {
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--ui-1);
  }

  .ss-table tr:nth-child(even) td {
    background: #fbfbfb;
  }

  .ss-table__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    background: var(--ui-1);
    font-size: var(--fs-11);
  }

  /* ---- Modal ---- */
  .ss-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ss-modal {
    background: var(--ui-0);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    padding: var(--space-5);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0, 0.6);
  }

    #ss-network-edit-site-modal h2,
    #ss-network-add-site-modal h2 { padding-left: 0; }

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

  .ss-modal__title {
    margin: 0;
    font-size: var(--fs-16);
  }

  .ss-modal__body {
    font-size: var(--fs-13);
    color: var(--ink-2);
  }

  .ss-modal__footer {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  #ss-network-edit-site-modal .ss-modal-header,
  #ss-network-edit-site-modal .ss-modal-body,
  #ss-network-edit-site-modal .ss-modal-footer {
    background: #131517 !important;
    border: none !important;
  }

  .ss-modal label { color: #fff; }
  .ss-modal table input:not([type="submit"]) { width: 100%; }

  .ss-modal-notice {
    border-radius: 3px;
    margin-top:15px;
    padding:5px 10px;
    background: #fff3cd;
    border-left:4px solid #ffc107;
  }

  .ss-modal-content .ss-modal-notice p,
  .ss-modal-notice label {
    color: #131517 !important;
  }

  
  .ss-modal.ss-modal-open {
    display: flex;
  }

  
  .ss-modal-dialog {
    width: 100%;
    max-height: calc(100vh - 32px);
    margin: 0 auto;
  }

  .ss-modal-dialog--sm {
    max-width: 768px;
  }

  .ss-modal-dialog--md {
    max-width: 1100px;
  }

  .ss-modal-dialog--lg {
    max-width: 1600px;
  }

  .ss-modal-content {
    border-radius: 5px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    
    display: flex;
    flex-direction: column;
    max-height: inherit;
    background: #1d2327;
  }

    .ss-modal--state-bad .ss-modal-content {
      outline: 5px solid rgba(var(--bad-rgb), .75) !important;
    }
    .ss-modal--state-unknown .ss-modal-content {
      outline: 5px solid rgba(var(--unknown-rgb, 100, 116, 139), .5) !important;
    }
    .ss-modal--state-warn .ss-modal-content {
      outline: 5px solid rgba(var(--warn-rgb), .75) !important;
    }
    .ss-modal--state-good .ss-modal-content {
      outline: 5px solid rgba(var(--good-rgb), .75) !important;
    }
    .ss-modal--state-default .ss-modal-content,
    #ss-plugin-settings-modal .ss-modal-content,
    #ss-settings-modal .ss-modal-content,
    #ss-license-modal .ss-modal-content,
    #ss-network-edit-site-modal .ss-modal-content,
    #ss-network-add-site-modal .ss-modal-content {
      outline: 5px solid rgba(var(--brand-fleet-rgb), .75) !important;
    }
    #ss-network-edit-site-modal .ss-modal-content > div,
    #ss-network-add-site-modal .ss-modal-content > div {
      padding: 15px 25px;
    }
    .ss-metric-modal__state-body--bad {
      background: var(--bad);
      padding: 15px;
    }
    .ss-metric-modal__state-body--good {
      background: var(--good);
      padding: 15px;
    }
    .ss-metric-modal__state-body--warn {
      background: var(--warn);
      padding: 15px;
    }

        .ss-modal-body div[class^="ss-metric-modal__state-body"] p,
        .ss-modal-body div[class^="ss-metric-modal__state-body"] ol,
        .ss-modal-body div[class^="ss-metric-modal__state-body"] ul {
          color: #fff !important;
          margin-top: 0 !important;
        }
        .ss-modal-body div[class^="ss-metric-modal__state-body"] p:last-of-type,
        .ss-modal-body div[class^="ss-metric-modal__state-body"] ol:last-of-type,
        .ss-modal-body div[class^="ss-metric-modal__state-body"] ul:last-of-type {
          margin-bottom: 0 !important;
        }

  .ss-modal-content--sm {
    max-width: 530px;
    margin: 0 auto;
  }

    .ss-modal-content > div {
      padding: 15px;
    }

    .ss-modal-content .ss-modal-header {
      padding-bottom: 10px;
      display: flex;
      align-items: center;
      padding-top: 3.25em;
      position: relative;
    }
      #ss-network-edit-site-modal .ss-modal-header,
      #ss-network-add-site-modal .ss-modal-header,
      #ss-plugin-settings-modal .ss-modal-header,
      #ss-settings-modal .ss-modal-header,
      #ss-license-modal .ss-modal-header {
        padding-top: 1.5em;
      }

      #ss-license-modal .ss-modal-content {
        outline: 5px solid rgba(var(--brand-fleet-rgb), .5) !important;
      }
      #ss-license-modal .button.button-primary {
        background: var(--warn) !important;
        border-color: var(--warn) !important;
      }
        #ss-license-modal .button.button-primary[disabled] {
          background: rgba(255,255,255,.1) !important;
          border-color: rgba(255,255,255,.1) !important;
        }

    .wp-die-message, p { font-size: inherit; }
    .ss-modal-content h3,
    .ss-modal-content h2,
    .ss-modal-content .form-table th,
    .ss-modal-content p,
    .ss-modal-content ul,
    .ss-modal-content ol {
      color: #ccc !important;
      line-height: 1.5em !important;
      font-size: 1.25em !important;
      font-weight: 300;
    }

    .ss-modal-content ol,
    .ss-modal-content ul {
      margin-left: 17px !important;
    }

      .ss-modal-content strong,
      .ss-modal-content h3,
      .ss-modal-content .ss-metric-modal__cache-note p { color: #fff !important; }

      .ss-modal-notice strong { color: #1d2327 !important }

        .ss-modal-content li { margin-bottom: 1em !important; }

      .ss-modal-content .group-silo h3,
      .ss-modal-content h3 {
        margin: .75em 0 !important;
        font-size: 1.5em !important;
        color: #fff;
        padding: .5em .75em .5em .75em !important;
        background: rgba(255, 255, 255, .05);
        border-radius: 3px;
        display: flex !important;
        align-items: center;
        gap: .5em;
      }
        .ss-modal-content h3:first-of-type { margin-top: 0 !important; }

        .ss-settings-group > :not(h3) {
          margin-left: 15px !important;
        }
        .ss-modal-content h3 { padding: .5em .75em .5em .75em !important; }
      .ss-modal-body { overflow: auto; }
      .ss-modal-body h4 { color: #fff; margin-bottom: 0; font-size: 1.25em; }
      .ss-modal-content .form-table th { padding-top: 0; }

      .ss-modal-content h2 {
        font-size: 2em !important;
        margin: 0 !important;
        padding: 0 0 0 .15em;
        line-height: 1em;
        color: #fff !important;
        display: flex !important;
        align-items: center;
        gap: .75em;
      }
        .ss-modal-content h2 span:first-of-type {
          display: block;
          position: absolute;
          font-size: .65em;
          top: -5px;
          padding: .35em 2em .35em 1em;
          background: rgba(255, 255, 255, .15);
          line-height: 1em;
          font-weight: normal;
          border-radius: 0 0 3px 3px;
          left: 15px;
          border-top: 5px solid rgba(255, 255, 255, 1);
        }

        #ss-plugin-settings-modal.ss-modal h2 { padding-left: 0; }

      .ss-modal-content .group-silo:last-of-type { margin-bottom: 0; }

        .ss-modal-body .ss-settings-group .description {
          margin-top: 10px !important;
        }

      .group-api-config .group-silo-liner {
        padding: 10px 30px;
        background-color: rgba(0, 0, 0, .4);
        border-radius: 5px;
        margin-bottom: 25px;
      }

        .group-api-config:last-of-type .group-silo-liner {
          margin-bottom: 0;
        }

        .ss-modal-btn-patch-note {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 15px;
        }

        .ss-how-to-note,
        .patch-info-copy {
          background: var(--info);
          padding: 1em 1.5em;
          line-height: 1.35em !important;
          border-radius: var(--r-sm);
        }

        .patch-info-copy p {
          line-height: 1.35em;
          margin: 0 0 1em !important;
        }

            .patch-info-copy p:last-of-type {
              margin: 0 !important;
            }

            .ss-metric-modal__cache-note {
              border-left: 3px solid var(--warn);
              padding: 1em 1.5em;
              margin-bottom: 2em;
              background: var(--warn) !important;
            }
              .ss-metric-modal__cache-note p {
                margin: 0 !important;
                line-height: 1.35em !important;
              }
              .ss-metric-modal__cache-note code {
                color: #1d2327 !important;
                background: #fff !important;
              }

      .ss-metric-modal__help,
      .ss-metric-modal__how-to,
      .ss-metric-modal__action {
        
        padding: 0 !important;
      }

        .ss-metric-modal__how-to { border-color: var(--info) }
        .ss-metric-modal__action { border-color: var(--warn); background: rgba(255,152,0, .1) !important; }
        .ss-metric-modal__action h3 { color: var(--warn); }

        .ss-metric-modal__help h3,
        .ss-metric-modal__how-to h3,
        .ss-metric-modal__action h3 {
          margin-top: 0 !important;
        }
        .ss-metric-modal__action button { border-color: #fff !important; }

        .ss-metric-modal__attribution {
          margin-bottom: 0.75em;
          padding: 0.35em 0.5em;
          background: var(--unknown-soft, rgba(158, 158, 158, 0.08));
          border-radius: 3px;
          font-size: var(--fs-12, 11px);
          color: var(--muted, #888);
          display: flex;
          align-items: center;
          gap: 0.25em;
          background: rgba(255, 255, 255, .05);
          padding: .5em 1em;
          border-radius: 3px;
          display: inline-block;
          width: fit-content;
        }
        .ss-attr-sep { opacity: 0.5; }
        .ss-attr-confidence--high { color: var(--good, #2e7d32); }
        .ss-attr-confidence--medium { color: var(--warn, #f57c00); }
        .ss-attr-confidence--low { color: var(--bad, #c62828); }

        .ss-rec-heading {
          margin: 0 0 0.5em !important;
          font-size: var(--fs-14);
          font-weight: 600;
          color: var(--ink);
          display: flex;
          align-items: center;
          gap: 0.5em;
        }

        .ss-rec-info-icon {
          font-size: 14px;
          opacity: 0.5;
          cursor: help;
        }

        .ss-rec-intro {
          margin: 0 0 1em !important;
          font-size: var(--fs-13);
          color: var(--muted);
        }

        .ss-rec-list {
          list-style: none;
          margin: 0 0 1em !important;
          padding: 0 !important;
          display: flex;
          flex-direction: column;
          gap: 0.75em;
        }

        .ss-rec-item {
          padding: 0.75em 1em;
          background: var(--scrim-10);
          border-radius: var(--r-sm);
          border-left: 3px solid var(--info);
        }

        .ss-rec-link {
          display: flex;
          align-items: center;
          gap: 0.5em;
          text-decoration: none;
          color: var(--ink);
        }
          .ss-rec-link:hover {
            text-decoration: underline;
          }
          .ss-rec-link strong {
            font-size: 1.15em;
          }

        .ss-rec-affiliate-badge {
          font-size: 10px;
          text-transform: uppercase;
          letter-spacing: 0.03em;
          padding: 0.15em 0.5em;
          border-radius: var(--r-xs);
          background: var(--scrim-20);
          color: #fff;
          letter-spacing: 1px;
        }

        .ss-rec-description {
          margin: 0.25em 0 0 !important;
          font-size: var(--fs-12);
          color: var(--muted);
          line-height: 1.4;
        }

        .ss-rec-disclosure {
          margin-top: 1em;
          font-size: var(--fs-12);
        }

        .ss-rec-disclosure-toggle {
          cursor: pointer;
          color: var(--muted);
          display: flex;
          align-items: center;
          gap: 0.3em;
          font-size: 1.35em;
        }
          .ss-rec-disclosure-toggle .dashicons {
            font-size: 14px;
            width: 14px;
            height: 14px;
          }

        .ss-rec-disclosure-body {
          margin-top: 0.75em;
          padding: 1em 1.65em;
          background: var(--info);
          border-radius: var(--r-sm);
        }
          .ss-rec-disclosure-body p {
            margin: 0 0 0.75em !important;
            font-size: 1.35em !important;
          }

        .ss-rec-disable-link {
          background: var(--ink);
          border: none;
          padding: 0;
          color: var(--muted);
          font-size: var(--fs-12);
          cursor: pointer;
          text-decoration: underline;
          border-radius: 3px;
        }
          .ss-rec-disable-link:hover {
            color: var(--warn);
          }

    .ss-license-open {
      margin-left: 10px;
      vertical-align: middle;
      background: #ff9800;
      color: #fff;
      border: none;
      line-height: 1em;
      padding-top: 9px;
    }

    #ss-license-body {
      max-height:70vh;
      overflow:auto;
      padding: 5px 15px 15px;
    }

      #ss-license-body > div:last-of-type { margin-bottom: 0; }

      .ss-license-panel p { margin: .5em !important; }

    .group-license-config {
      
      padding: 5px 20px 5px;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .group-license-config #ss-license-key,
    .group-license-config #ss-license-email {
      background: #fce6c7;
      border: #222;
    }

    .group-license-config #ss-license-save {
      background: #ff9800;
      border: none;
    }

    .group-license-config #ss-license-clear {
      border: none;
    }

    .ss-modal td {
      color: #fff;
    }

    #ss-license-key-toggle {
      border: none;
      background: rgba(255,255,255,.1);
      color: #fff;
      padding: 0;
      display: flex !important;
    }

    #ss-license-clear {
      border: none;
      margin-left: 15px;
      color: var(--ink);
    }
      #ss-license-clear[disabled] {
        color: #ccc;
      }

  .ss-modal-footer {
    border-bottom: none;
    text-align: right;
    display: flex;
    gap: 20px;
    align-items: center;
  }

    .ss-modal-body button,
    .ss-modal-body input[type="submit"],
    .ss-modal-footer button,
    .ss-modal-footer input[type="submit"] {
      padding: 10px 20px !important;
      font-size: 16px !important;
      line-height: 1em !important;
      box-shadow: none !important;
    }

      .ss-modal-body input#submit[disabled],
      .ss-modal-footer input#submit[disabled]{
        border-color: rgba(255, 255, 255, .1) !important;
        background: rgba(255, 255, 255, .1) !important;
      }

    .ss-modal-body table input[type="text"],
    .ss-modal-body table input[type="url"],
    .ss-modal-body table input[type="email"],
    .ss-modal-body table input[type="password"] {
      width: 100% !important;
      border: none !important;
      border-radius: 2px !important;
      padding: 7px 15px !important;
      font-size: 16px !important;
      background: rgba(255, 255, 255, .1) !important;
      color: #fff !important;
      line-height: 1.75em !important;
    }

      .ss-modal-body .form-table th { width: 120px; font-weight: normal; }

      @media screen and (max-width: 782px) {
        .ss-modal-body .form-table th {
          width: 100% !important;
        }
      }

      .ss-settings-group .email-frequency {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 1.5em 0;
      }
          .ss-settings-group > * {
            margin: 0;
          }
      .ss-settings-group p.description,
      .ss-modal-body .ss-license-key-wrapper + p.description,
      .ss-modal-body input + p.description {
        margin-top: .5em;
        color: #ccc !important;
        font-size: 14px !important;
        padding: .25em .5em !important;
        font-style: italic;
        line-height: 1.5em !important;
      }

      .submit-save,
      .save-clear,
      .token-copy {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .save-clear,
      .submit-save { gap: 15px; }

        .submit-save p {
          margin: 0 !important;
          padding: 0 !important;
        }

        #api-token-field {
          background-color: #e0fbde !important;
          color: var(--ink) !important;
          margin-bottom: 0 !important;
        }

        .token-copy {
          gap: 0;
          border-radius: 5px;
          background: #282e32;
          box-shadow: 0 3px 3px rgba(0, 0, 0, 1) !important;
          margin-bottom: 10px;
        }

        .token-copy .button-token {
          margin-left: 5px;
          width: 120px;
          padding: 12px 15px !important;
        }

    .ss-modal-body > div {
      
    }

      .ss-modal-body > div.ss-modal-status {
        padding: 0;
        background: transparent;
        margin: 0;
      }

      #ss-settings-modal .ss-modal-body {
        padding-top: 0;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-row: auto auto;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
      #ss-settings-modal .ss-modal-body > div {
        background: transparent;
      }

    .ss-modal-body div[class^="ss-metric-modal__"] {
      margin-bottom: 20px;
      border-radius: var(--r-xs)
    }
    .ss-modal-body div[class^="ss-metric-modal__"]:first-of-type {
      margin-bottom: 20px;
    }
    .ss-modal-body div[class^="ss-metric-modal__"]:last-of-type {
      margin-bottom: 0;
    }

        

        .license--free .ss-modal-body div[class^="ss-metric-modal__"]:last-of-type {
          margin-bottom: 0;
        }
        .license--free .ss-modal-body div[class^="ss-metric-modal__"]:first-of-type {
          margin-bottom: 20px;
        }

        .ss-modal-body .ss-metric-modal__extra {
          border-left: 3px solid var(--good);
        }

        .ss-modal-body .ss-metric-confidence p {
          background: rgba(255, 255, 255, .1);
          display: inline-block;
          padding: .2em 1em;
        }

          button[data-ss-mode="default"] {
            background-color: var(--good) !important;
            border: none !important;
          }
          button[data-ss-mode="force_off"] {
            background: var(--warn) !important;
            border: none !important;
          }

          .ss-modal-btn-patch-note .button-primary[disabled] { color: #fff !important }

  #ss-metric-modal .ss-modal-body {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
  }

    .license--free #ss-metric-modal .ss-modal-body {
      flex-direction: column;
    }

  .ss-modal-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
  }

  .ss-modal-close {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 3em !important;
    font-weight: 100;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    position: relative;
    top: -.15em;
  }

  .ss-modal-close:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .ss-modal-backdrop-lock {
    overflow: hidden !important;
  }

  .ss-modal-body pre,
  .ss-modal-body code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    margin: .5em 0;
  }

  .ss-modal-body table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
  }

  .ss-modal-body .report-grid,
  .ss-modal-body .ss-grid {
    min-width: 0;
  }

  @media (max-width: 782px) {
    .ss-modal {
      align-items: flex-start;
      justify-content: center;
      padding: 8px;
    }

    .ss-modal-dialog {
      max-width: 100%;
      max-height: calc(100vh - 16px);
    }

    .ss-modal-body {
      max-height: calc(100vh - 16px - 46px - 46px);
    }
  }

  @media (max-height: 500px) {
    .ss-modal {
      align-items: flex-start;
    }

    .ss-modal-dialog,
    .ss-modal-content {
      max-height: calc(100vh - 16px);
    }

    .ss-modal-body {
      max-height: calc(100vh - 16px - 46px - 46px);
    }
  }

  @supports not (display: flex) {
    .ss-modal {
      display: block;
      overflow-y: auto;
    }

    .ss-modal-dialog {
      margin: 40px auto;
    }
  }

  /* ---- Report layout shell ---- */

  .ss-report {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1.4fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .ss-report__main,
  .ss-report__aside {
    min-width: 0;
  }

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

  .ss-report__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--ui-2);
    padding-bottom: var(--space-2);
  }

  .ss-report__title {
    margin: 0;
    font-size: var(--fs-20);
  }

  .ss-report__meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--fs-12);
    color: var(--muted);
  }

  .ss-report__meta-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
  }

  .ss-report__badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .ss-footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-12);
    color: var(--muted);
  }

  
  .ss-license-key-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ss-license-key-wrapper input {
    flex: 1;
  }

  .ss-modal-content .ss-license-status { color: #fff !important; }

  #ss-license-summary {
    margin-bottom: 0.75rem;
    padding: 10px 15px 15px;
    margin-top: 1px;
    border-radius: 5px;
    transition: all .2s ease-in;
    background: var(--scrim-20);
}

  #ss-license-summary .description {
    background: rgba(255,255,255,.2);
    color: #fff !important;
    padding: .25em .75em;
    border-radius: var(--r-xs);
    position: relative;
  }

  #ss-license-key-toggle {
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 11px 5px !important;
    outline: none !important;
  }

  .license--pro #ss-license-summary .description,
  .license--network #ss-license-summary .description { padding-left: 2em; }

  .license--pro #ss-license-summary .description::before,
  .license--network #ss-license-summary .description::before {
    content: '✔';
    display: block;
    position: absolute;
    top: .25em;
    left: .75em;
    margin-right: .5em;
    color: #fff;
  }

  .ss-license-cta { margin: 0 1em 1.25em; }

  .license--pro #ss-license-summary,
  .license--network #ss-license-summary {
    background: var(--good);
  }

    #ss-license-summary code {
      background-color: rgba(255, 255, 255, .5);
      color: var(--ink) !important;
      padding: 5px 10px !important;
    }

    .license--free .ss-license-status,
    .license--free .ss-license-key-value {
      display: none;
    }
    .license--free #ss-license-summary {
      background: transparent;
      padding: 0;
    }

 .ss-license-cta {
    margin-top: 1.25rem;
    display: flex !important;
    gap: 20px;
    align-items: center;
    justify-content: center;
    background: #ff9800;
    border-radius: 3px;
    padding: .5em 1.5em .5em 1.5em !important;
    margin: .25em !important;
 }

  .ss-license-cta.glow-on-hover:before { filter: grayscale(1) blur(5px) !important; opacity: .4 !important; }

 .ss-license-cta p {
   line-height: 1.35em !important;
   color: #fff !important;
 }

 .ss-modal-body button[disabled] {
    color: #999 !important;
    border-color: rgba(0,0,0,0.2) !important;
 }

 .ss-license-cta a.button.button-secondary {
    border: 2px solid #fff;
    color: var(--warn) !important;
    font-weight: bold;
    padding: 10px 20px !important;
    font-size: 1.25em !important;
    line-height: 1em !important;
    border-radius: 20px !important;
 }

 #ss-license-summary .description-dev {
   margin-top: 15px;
   background: #ff9800;
   padding: .75em 1em;
   border-radius: 2px;
   text-align: center;
 }

  .ss-toggle-visibility {
    padding: 4px 8px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ss-toggle-visibility .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
  }
}

.wp-menu-name .ss-tier-badge {
  padding: 4px 9px;
  border-radius: 10px 0 10px 10px;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.2);
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  line-height: 1em;
  white-space: nowrap;
  position: relative;
  top: -1px;
}

/* ---- Pre/Code copy button ---- */
.ss-pre-wrapper {
  position: relative;
  margin: 1em 0;
}

.ss-pre-wrapper pre {
  margin: 0;
  padding-right: 3em;
}

.ss-copy-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 4px 6px;
  background: #181C1E;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  color: #fff;
  line-height: 1;
}

.ss-copy-btn:hover {
  opacity: 1;
  background: var(--glass-25);
}

.ss-copy-btn:focus {
  outline: 2px solid var(--brand-400);
  outline-offset: 1px;
}

.ss-copy-btn .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.ss-copy-btn--success {
  color: var(--good);
  opacity: 1;
}

/* ---- Section header with inline filters ---- */
.ss-section-header {
    display: flex;
    align-items: baseline;
    gap: .5em;
    flex-wrap: wrap;
    margin-bottom: .5em;
    position: relative;
    z-index: 100;
    font-size: 1.75em;
}

/* ---- Filter pills ---- */
.ss-section-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  position: relative;
  top: -.25em;
  margin-left: .35em;
}

.ss-filter-pill {
  padding: 4px 10px;
  font-size: var(--fs-12);
  font-weight: 500;
  border: 1px solid var(--glass-25);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.ss-filter-pill:hover {
  
  border-color: var(--glass-50, rgba(255,255,255,1));
  color: #fff;
}

.ss-filter-pill--active {
  background: #fff;
  border-color: #fff;
  color: #1d2327;
}

.ss-filter-pill--active:hover {
  background: #fff;
  border-color: #fff;
  color: #1d2327;
}

/* ---- Disk space bar ---- */
.ss-disk-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-disk-bar {
  width: 100%;
  height: 6px;
  background: var(--glass-15);
  border-radius: 5px;
  overflow: hidden;
  margin-top: 4px;
  border-top: 1px solid rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.ss-disk-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: var(--r-xs);
  transition: width 0.3s ease;
}


.ss-disk-card.state-warn .ss-disk-bar-fill {
  background: linear-gradient(90deg, var(--warn), var(--warn-dark, #b38600));
}

.ss-disk-card.state-bad .ss-disk-bar-fill {
  background: linear-gradient(90deg, var(--bad), var(--bad-dark, #a00));
}

.ss-disk-card.state-good .ss-disk-bar-fill {
  background: linear-gradient(90deg, var(--good), var(--good-dark, #007017));
}

.ss-disk-card.state-unknown .ss-disk-bar-fill {
  background: linear-gradient(90deg, var(--unknown, #64748b), #475569);
}

/* ---- Toast notifications ---- */
.ss-toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  pointer-events: none;
}

.ss-toast {
  background: var(--surface-2, #374151);
  color: var(--text-1, #f9fafb);
  padding: 12px 20px;
  border-radius: var(--r-md, 8px);
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ss-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.ss-toast--success {
  background: var(--good, #16a34a);
  color: #fff;
}

.ss-toast--error {
  background: var(--bad, #dc2626);
  color: #fff;
}

.ss-toast--warn {
  background: var(--warn, #ca8a04);
  color: #fff;
}

.ss-toast--info {
  background: var(--surface-2, #374151);
  color: var(--text-1, #f9fafb);
}

.ss-policy-status {
  width: fit-content;
  background: rgba(255, 255, 255, .1);
  padding: .5em 1em !important;
  line-height: 1em !important;
  border-radius: 3px;
  font-size: 1.25em;
  font-style: italic;
}

.ss-connect-panel {
  
  border-radius: var(--r-md, 8px);
  margin-bottom: 30px;
  background: #34393d;
}

.ss-connect-panel h3 {
  font-size: var(--fs-16, 16px);
  margin-bottom: var(--space-4, 16px);
}

/* ---- Details/Summary (Advanced toggles) ---- */
.ss-advanced-details {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
  border-radius: var(--r-sm, 4px);
  padding: 0;
}

.ss-advanced-details summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-13, 13px);
  color: var(--muted, #888);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-advanced-details summary::-webkit-details-marker {
  display: none;
}

.ss-advanced-details summary::before {
  content: "▶";
  font-size: 10px;
  transition: transform 0.2s ease;
}

.ss-advanced-details[open] summary::before {
  transform: rotate(90deg);
}

.ss-advanced-details[open] {
  padding-bottom: 12px;
}

.ss-advanced-details > div {
  padding: 0 14px;
}

/* ---- Form group spacing ---- */
.ss-form-group {
  margin-bottom: var(--space-3, 12px);
}

.ss-form-group:last-child {
  margin-bottom: 0;
}