/* ============================================
       TOP BAR — GLASS PILL
       ============================================ */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      margin-bottom: 22px;
      border-radius: 999px;
      background: rgb(0, 0, 0);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid #ffffff;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(0, 0, 0, 0.1);
      animation: fadeUp .7s ease-out both;
      position: relative;
      overflow: hidden;
    }

    .topbar::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #000000, #000000, #000000);
      animation: sweep 6s ease-in-out infinite;
    }

    @keyframes sweep {
      0%, 80%, 100% { left: -100%; }
      90% { left: 100%; }
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      position: relative;
      z-index: 1;
    }

    .brand-logo {
      width: 120px;
      height: 36px;
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: left center;
      display: block;
      filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
    }

    .brand-divider {
      width: 1px;
      height: 20px;
      background: rgba(0, 0, 0, 0.15);
      flex: 0 0 1px;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      min-width: 0;
    }

    .brand-text strong {
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: .4px;
      white-space: nowrap;
    }

    .brand-text span {
      font-size: 10px;
      color: #ffffff;
      letter-spacing: .3px;
      white-space: nowrap;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgb(0, 38, 255);
      border: 1px solid #ffffff;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      position: relative;
      z-index: 1;
    }

    .status-pill .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #000000;
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
      animation: pulse 1.8s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 0, 0, 0.9); }
      50% { box-shadow: 0 0 0 6px rgba(255,95,95,0), 0 0 20px rgb(0, 0, 0); }
    }