/* ============================================
       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: rgba(20,3,3,.55);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
      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, transparent, rgba(255,95,95,.15), transparent);
      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(255,45,45,.5));
    }

    .brand-divider {
      width: 1px;
      height: 20px;
      background: rgba(255,255,255,.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: var(--muted);
      letter-spacing: .3px;
      white-space: nowrap;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,95,95,.25);
      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: #ff5f5f;
      box-shadow: 0 0 12px rgba(255,95,95,.9);
      animation: pulse 1.8s ease-in-out infinite;
    }

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