/* ── ATP Portal — Status tab styles ─────────────────────────── */

    .metric-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px
    }

    .metric {
      background: var(--bg2);
      border-radius: 10px;
      padding: 12px 14px;
      border: 1px solid transparent
    }

    .metric.good {
      border-color: rgba(29, 158, 117, .3)
    }

    .metric.warning {
      border-color: rgba(239, 159, 39, .3)
    }

    .metric.critical {
      border-color: rgba(226, 75, 74, .3)
    }

    .metric-label {
      font-size: 11px;
      color: var(--text2);
      margin-bottom: 4px
    }

    .metric-value {
      font-size: 22px;
      font-weight: 500;
      color: var(--text1)
    }

    .metric-sub {
      font-size: 10px;
      color: var(--text3);
      margin-top: 2px
    }

    .metric-insight {
      margin-top: 8px;
      font-size: 11px;
      color: var(--text2);
      padding-top: 8px;
      border-top: 1px solid var(--border);
      line-height: 1.4
    }

    .card {
      background: var(--bg1);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      box-shadow: var(--shadow)
    }

    .card-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: .6px
    }

    .card-sub {
      color: var(--text3);
      font-size: 11px;
      margin-top: -8px;
      margin-bottom: 12px
    }

    .charts-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 12px;
      margin-bottom: 12px
    }

    .section-row {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 12px;
      margin-bottom: 12px
    }

    .tl-track {
      height: 20px;
      background: var(--bg3);
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 4px
    }

    .tl-fill {
      height: 100%;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding-left: 8px;
      font-size: 10px;
      font-weight: 600;
      transition: width .4s
    }

    .tl-dates {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: var(--text3)
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600
    }

    .pill.good {
      background: rgba(29, 158, 117, .16);
      color: #7ad6b6
    }

    .pill.warning {
      background: rgba(239, 159, 39, .14);
      color: #f6c36e
    }

    .pill.critical {
      background: rgba(226, 75, 74, .14);
      color: #ff8b89
    }

    .pill.info {
      background: rgba(55, 138, 221, .14);
      color: #9cc8f3
    }

    .alert-list {
      display: grid;
      gap: 8px
    }

    .alert-item {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--blue);
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start
    }

    .alert-item.critical {
      border-left-color: var(--red)
    }

    .alert-item.warning {
      border-left-color: var(--amber)
    }

    .alert-item.good {
      border-left-color: var(--teal)
    }

    .alert-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text1);
      margin-bottom: 2px
    }

    .alert-desc {
      color: var(--text2);
      font-size: 11px;
      line-height: 1.4
    }

    .alert-tag {
      font-size: 10px;
      color: var(--text1);
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 3px 7px;
      white-space: nowrap
    }

    .banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(226, 75, 74, .3);
      background: rgba(226, 75, 74, .07);
      margin-bottom: 12px
    }

    .banner.warn {
      border-color: rgba(239, 159, 39, .3);
      background: rgba(239, 159, 39, .07)
    }

    .banner-title {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 2px
    }

    .banner-sub {
      font-size: 11px;
      color: var(--text2)
    }