:root{
    /* Background image + overlay */
    --rb-supplier-hero:url('hero.webp');
    --rb-supplier-overlay:rgba(15,23,42,0.90);
    --rb-supplier-bg:#212d45;

    /* bottom nav */
    --rb-nav-btn-bg:#ffc03d;
    --rb-nav-btn-text:#111827;

    /* top menu cards */
    --rb-top-card-active:#212d45;
  }

  body{
    margin:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }

  /* PAGE BACKGROUND: hero + overlay */
  .supplier-body{
    min-height:100vh;
    background-color:var(--rb-supplier-bg);
    background-image:var(--rb-supplier-hero);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    position:relative;
    display:flex;
    justify-content:center;
    color:#0f172a;
  }
  .supplier-body::before{
    content:"";
    position:fixed;
    inset:0;
    background:var(--rb-supplier-overlay);
    pointer-events:none;
    z-index:0;
  }
  .supplier-shell{
    position:relative;
    z-index:1;
  }

  .screen.hidden{display:none;}

  /* TOP MENU BUTTON WRAPPER (so cards act like buttons) */
  .menu-btn{
    background:none;
    border:none;
    padding:0;
    margin:0;
    text-align:inherit;
  }
  .menu-btn:focus{
    outline:none;
    box-shadow:none;
  }

  /* TOP MENU CARDS */
  .top-menu-card{
    border-radius:1rem;
  }

  .menu-card{
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(226,232,240,1);
    transition:
      background-color .15s ease,
      color .15s ease,
      box-shadow .15s ease,
      transform .15s ease,
      border-color .15s ease;
  }

  .menu-card:hover,
  .menu-card--default-active{
    background:var(--rb-top-card-active) !important;
    border-color:var(--rb-top-card-active) !important;
    color:#ffffff;
    box-shadow:0 18px 40px rgba(15,23,42,0.7);
    transform:translateY(-1px);
  }

  .menu-card:hover h2,
  .menu-card:hover p,
  .menu-card:hover span,
  .menu-card:hover i,
  .menu-card--default-active h2,
  .menu-card--default-active p,
  .menu-card--default-active span,
  .menu-card--default-active i{
    color:#ffffff !important;
  }

  /* Pills (Live / Status / Payouts / Profile) */
  .pill-tag{
    border-radius:999px;
  }
  .menu-card:hover .pill-tag,
  .menu-card.menu-card--default-active .pill-tag{
    background:rgba(255,255,255,0.15) !important;
    border-color:rgba(255,255,255,0.75) !important;
    color:#ffffff !important;
  }

  /* BOTTOM NAV BUTTONS */
  .tab-btn{
    border-radius:9999px;
    transition:
      background-color .15s ease,
      color .15s ease,
      transform .15s ease;
  }
  .tab-btn:hover,
  .tab-btn.tab-active{
    background:var(--rb-nav-btn-bg);
    color:var(--rb-nav-btn-text) !important;
    transform:translateY(-1px);
  }

  /* Earnings status badges */
  .badge-status{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    border-width:1px;
    border-style:solid;
  }
  .bg-green{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
  .bg-amber{background:#fff7ed;color:#92400e;border-color:#fed7aa}
  .bg-gray{background:#f1f5f9;color:#334155;border-color:#e2e8f0}

  /* availability toggle */
  .switch{
    position:relative;width:50px;height:24px;
    border-radius:999px;border:1px solid rgba(148,163,184,0.6);
    background:#e5e7eb;cursor:pointer;
  }
  .switch-knob{
    position:absolute;top:2px;left:2px;
    width:20px;height:20px;border-radius:999px;
    background:#ffffff;transition:.18s;
  }
  .switch.on{background:#22c55e;border-color:#16a34a}
  .switch.on .switch-knob{left:26px}