/* Inline, above the blocking scripts, so it is styled on the first paint. */
    #portal-boot { max-width: 460px !important; margin: 60px auto !important; padding: 0 20px !important;
                   font-family: Arial, Helvetica, sans-serif !important; }
    #portal-boot .pb-card { background: #161616 !important; border: 1px solid #262626 !important;
                            border-radius: 10px !important; padding: 32px !important; }
    #portal-boot .pb-h    { margin: 0 0 6px !important; font-size: 22px !important; font-weight: 700 !important;
                            color: #ffffff !important; }
    #portal-boot .pb-sub  { margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important;
                            color: #C8C8C8 !important; }
    #portal-boot .pb-dots { margin: 18px 0 0 !important; text-align: left !important; }
    #portal-boot .pb-dots span { display: inline-block !important; width: 8px !important; height: 8px !important;
                                 margin-right: 6px !important; border-radius: 50% !important;
                                 background: #1DB954 !important; opacity: .3 !important;
                                 animation: pbBlink 1.2s infinite !important; }
    #portal-boot .pb-dots span:nth-child(2) { animation-delay: .2s !important; }
    #portal-boot .pb-dots span:nth-child(3) { animation-delay: .4s !important; }
    @keyframes pbBlink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }
  

    .rb-portal * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .rb-portal {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      background: #0A0A0A;
      min-height: 100vh;
    }

    /* Header */
    .portal-header {
      background: #111;
      padding: 16px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .portal-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .portal-logo img {
      display: none !important;
    }

    .portal-logo span {
      color: #1DB954;
      font-size: 14px;
      font-weight: 500;
    }

    .portal-user {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .portal-user-name {
      color: #fff;
      font-size: 14px;
    }

    /* Checking-you-in state. Shown while Firebase restores the session from
       storage, which takes a moment. Before 14 September 2026 the LOGIN FORM
       was what showed during that window, so an already-signed-in contributor
       was looking at a sign-in prompt for a few seconds on every visit — and
       anyone arriving from a password link, now signed in automatically,
       reasonably concluded it had failed. */
    .portal-checking {
      max-width: 400px;
      margin: 120px auto;
      text-align: center;
      color: #C8C8C8;
      font-size: 15px;
    }

    /* Login Container */
    .login-container {
      max-width: 400px;
      margin: 80px auto;
      padding: 40px;
      background: #161616;
      border-radius: 12px; border: 1px solid #2a2a2a;
    }

    .login-container h1 {
      font-size: 24px;
      color: #e8e8e8;
      margin-bottom: 8px;
      text-align: center;
    }

    .login-container p {
      color: #C8C8C8;
      font-size: 14px;
      text-align: center;
      margin-bottom: 32px;
    }

    .login-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid #2e2e2e;
      border-radius: 8px;
      font-size: 15px;
      margin-bottom: 16px;
      transition: border-color 0.2s;
    }

    .login-input:focus {
      outline: none;
      border-color: #1DB954;
    }

    .login-btn {
      width: 100%;
      padding: 14px;
      background: #1DB954;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .login-btn:hover {
      background: #1aa34a;
    }

    .login-btn:disabled {
      background: #333;
      cursor: not-allowed;
    }

    .login-error {
      background: rgba(255,68,68,.14);
      color: #ff6b6b;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 13px;
      margin-bottom: 16px;
      display: none;
    }

    .login-forgot {
      text-align: center;
      margin-top: 20px;
    }

    .login-forgot a {
      color: #1DB954;
      font-size: 13px;
      text-decoration: none;
    }

    .login-forgot a:hover {
      text-decoration: underline;
    }

    /* Dashboard */
    .dashboard {
      display: none;
      max-width: 1500px;
      margin: 0 auto;
      padding: 28px 24px;
    }

    .dashboard.active {
      display: block;
    }

    .dashboard-welcome {
      margin-bottom: 32px;
    }

    .dashboard-welcome h1 {
      font-size: 28px;
      color: #fff !important;
      margin-bottom: 8px;
    }

    .dashboard-welcome p {
      color: #8f8f8f !important;
      font-size: 15px;
    }

    /* Summary Cards */
    .summary-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }

    .summary-card {
      background: #161616;
      padding: 20px;
      border-radius: 12px; border: 1px solid #2a2a2a;
    }

    .summary-card-label {
      font-size: 12px;
      color: #C8C8C8;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .summary-card-sublabel {
      font-size: 12px;
      color: #a5a5a5;
      margin-bottom: 8px;
    }

    .summary-card-value {
      font-size: 28px;
      font-weight: 700;
      color: #e8e8e8;
    }

    .summary-card-value.money {
      color: #1DB954;
    }

    .summary-card-value.pending {
      color: #f59e0b;
    }

    /* Payout progress bar */
    .payout-bar {
      height: 8px;
      background: #1a1a1a;
      border-radius: 4px;
      margin-top: 10px;
      overflow: hidden;
    }

    .payout-bar-fill {
      height: 100%;
      background: #1DB954;
      border-radius: 4px;
      width: 0%;
      transition: width 0.4s ease;
    }

    /* Sections */
    .dashboard-section {
      background: #161616;
      border-radius: 12px; border: 1px solid #2a2a2a;
      margin-bottom: 24px;
      overflow: hidden;
    }

    .rb-portal .section-header {
      padding: 20px 24px;
      border-bottom: 1px solid #262626;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .rb-portal .section-header h2 {
      font-size: 18px;
      color: #e8e8e8;
      font-weight: 600;
    }

    .section-controls {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .filter-select {
      padding: 8px 12px;
      border: 1px solid #2e2e2e;
      border-radius: 6px;
      font-size: 13px;
      color: #e8e8e8;
      background: #141414;
      cursor: pointer;
    }

    .filter-select:focus {
      outline: none;
      border-color: #1DB954;
    }

    /* ---- PAYMENT HISTORY -- 15 September 2026 --------------------------
       A contributor could see a Total Paid figure with no record of when or
       how it was paid. That is the single least trustworthy thing a portal
       about somebody else's money can do. */
    .pay-table { width: 100% !important; border-collapse: collapse !important; }
    .pay-table th { text-align: left !important; padding: 10px 12px !important; font-size: 11px !important;
                    letter-spacing: .5px !important; text-transform: uppercase !important;
                    color: #8f8f8f !important; border-bottom: 1px solid #262626 !important; font-weight: 600 !important; }
    .pay-table td { padding: 12px !important; font-size: 14px !important; color: #ffffff !important;
                    border-bottom: 1px solid #262626 !important; }
    .pay-table td.amt { font-weight: 700 !important; color: #1DB954 !important; white-space: nowrap !important; }
    .pay-table td.meth { color: #C8C8C8 !important; text-transform: capitalize !important; }
    .pay-note { margin: 14px 12px 0 !important; font-size: 12px !important; line-height: 1.6 !important; color: #a5a5a5 !important; }
    @media (max-width: 600px) {
      .pay-table th:nth-child(3), .pay-table td:nth-child(3) { display: none !important; }
    }

    .section-content {
      padding: 16px 20px;
    }

    /* Bank Cards */
    .bank-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 12px 16px;
      background: #0E0E0E;
      border-radius: 10px; border: 1px solid #242424;
      margin-bottom: 8px;
    }

    .bank-card:last-child {
      margin-bottom: 0;
    }

    .bank-thumbnail {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      background: #242424;
    }

    .bank-info {
      flex: 1;
    }

    .bank-title {
      font-size: 16px;
      font-weight: 600;
      color: #e8e8e8;
      margin-bottom: 4px;
    }

    .bank-artiste {
      font-size: 14px;
      color: #C8C8C8;
      margin-bottom: 12px;
    }

    .bank-packages {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .package-tag {
      background: rgba(29,185,84,.14);
      color: #1DB954;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
    }

    .package-tag .pkg-sales {
      color: #4ee07e;
      font-weight: 700;
    }

    .bank-sales-badge {
      display: inline-block;
      background: #111;
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 12px;
      margin-left: 10px;
      vertical-align: middle;
    }

    /* Muted styling when nothing has sold yet */
    .package-tag.zero {
      background: #1a1a1a;
      color: #a5a5a5;
    }

    .package-tag.zero .pkg-sales {
      color: #a5a5a5;
    }

    .bank-sales-badge.zero {
      background: #1a1a1a;
      color: #8f8f8f;
    }

    .bank-status {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 12px;
    }

    .bank-status.published {
      background: rgba(29,185,84,.14);
      color: #1DB954;
    }

    .bank-status.draft {
      background: rgba(232,163,23,.14);
      color: #E8A317;
    }

    /* Empty States */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: #8f8f8f;
    }

    .empty-state-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-state h3 {
      font-size: 16px;
      color: #C8C8C8;
      margin-bottom: 8px;
    }

    .empty-state p {
      font-size: 14px;
    }

    /* Loading */
    .loading {
      text-align: center;
      padding: 60px;
      color: #8f8f8f;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid #262626;
      border-top-color: #1DB954;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 16px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Access Denied */
    .access-denied {
      display: none;
      max-width: 500px;
      margin: 80px auto;
      padding: 48px;
      background: #161616;
      border-radius: 12px; border: 1px solid #2a2a2a;
      text-align: center;
    }

    .access-denied h2 {
      color: #e8e8e8;
      margin-bottom: 16px;
    }

    .access-denied p {
      color: #C8C8C8;
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .access-denied a {
      color: #1DB954;
    }

    /* Stats Row */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .portal-header {
        padding: 12px 16px;
      }

      .dashboard {
        padding: 20px 16px;
      }

      .summary-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .summary-card {
        padding: 16px;
      }

      .summary-card-value {
        font-size: 24px;
      }

      .bank-card {
        flex-direction: column;
      }

      .bank-thumbnail {
        width: 100%;
        height: 120px;
      }

      .rb-portal .section-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .stats-row {
        grid-template-columns: 1fr;
      }
    }

/* ---------------------------------------------------------------------- title
   The portal name was an <a> to riddimbank.com styled in the accent green — so
   it read as a link, and behaved like one, while naming the page you were
   already on. It is a heading now, not a link.

   Centred with a three-column grid rather than text-align, because the bar also
   holds the signed-in email on the right: centring the text alone would leave
   the title visibly off-centre against it. The empty first column is what makes
   the middle column the true centre of the bar. Below 600px the bar stacks and
   the grid collapses to one column, so the title centres on its own. */
.rb-portal .portal-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
}
.rb-portal .portal-logo{grid-column:2;justify-content:center}
.rb-portal .portal-logo span{
  color:#ffffff;font-size:15px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.rb-portal .portal-user{grid-column:3;justify-self:end}

@media(max-width:600px){
  .rb-portal .portal-header{grid-template-columns:1fr;justify-items:center;text-align:center}
  .rb-portal .portal-logo,.rb-portal .portal-user{grid-column:1;justify-self:center}
}

/* --------------------------------------------------------------- form controls
   The source never declared a background or colour on its inputs: on a white
   card the browser default was already right. On a dark card it is a white box
   with black text, which is not broken but reads as an unfinished conversion.
   Declared explicitly here, including the placeholder — an undeclared
   placeholder inherits a grey tuned for light backgrounds and comes out barely
   visible. */
.rb-portal input[type="text"],
.rb-portal input[type="email"],
.rb-portal input[type="password"],
.rb-portal input[type="number"],
.rb-portal select,
.rb-portal textarea{
  background:#0f0f0f;
  color:#ffffff;
  border-color:#2e2e2e;
}
.rb-portal input::placeholder,
.rb-portal textarea::placeholder{color:#7a7a7a;opacity:1}
.rb-portal input:focus,
.rb-portal select:focus,
.rb-portal textarea:focus{outline:none;border-color:#1DB954}
/* Chrome paints its own pale background over autofilled fields; the inset
   shadow is the only reliable way to override it. */
.rb-portal input:-webkit-autofill,
.rb-portal input:-webkit-autofill:hover,
.rb-portal input:-webkit-autofill:focus{
  -webkit-text-fill-color:#ffffff;
  -webkit-box-shadow:0 0 0 1000px #0f0f0f inset;
  caret-color:#ffffff;
}

/* "Not a contributor yet? Apply" on the sign-in screen.

   Added 19 September 2026. Standard on any login page, and it was missing from
   both portals — so the ONLY route between the sign-up page and the portal ran
   one way. Someone who bookmarked the portal and let their application lapse,
   or who arrived here by guessing the URL, had nowhere to go. */
.rb-portal .login-apply {
  margin: 18px 0 0; text-align: center; font-size: 14px; color: #8f8f8f;
}
.rb-portal .login-apply a { color: #1DB954; text-decoration: none; font-weight: 600; }
.rb-portal .login-apply a:hover { text-decoration: underline; }