.rb-portal *{margin:0;padding:0;box-sizing:border-box}
    .rb-portal{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0A0A0A;min-height:100vh}
    
    .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 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}
    .logout-btn{background:transparent;border:1px solid #333;color:#8f8f8f;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all 0.2s}
    .logout-btn:hover{border-color:#1DB954;color:#1DB954}
    
    .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{display:none;max-width:1000px;margin:0 auto;padding:32px 24px}
    .dashboard.active{display:block}
    .dashboard-welcome{margin-bottom:32px}
    .dashboard-welcome h1{font-size:28px;color:#e8e8e8;margin-bottom:8px}
    .dashboard-welcome p{color:#C8C8C8;font-size:15px}
    
    .summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:32px}
    .summary-card{background:#161616;padding:20px;border-radius:12px; border: 1px solid #2a2a2a;}
    .summary-card-label{font-size:12px;color:#8f8f8f;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.5px}
    .summary-card-value{font-size:28px;font-weight:700;color:#e8e8e8}
    .summary-card-value.money{color:#1DB954}
    .summary-card-value.pending{color:#f59e0b}
    
    .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}
    .rb-portal .section-header h2{font-size:18px;color:#e8e8e8;font-weight:600}
    .section-content{padding:24px}
    
    .code-card{background:#0E0E0E;border-radius:10px; border: 1px solid #242424;padding:20px;margin-bottom:16px}
    .code-card:last-child{margin-bottom:0}
    .code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
    .code-string{display:flex;align-items:center;gap:12px}
    .code-badge{font-family:'SF Mono',Monaco,'Courier New',monospace;background:#1DB954;color:#000;padding:8px 16px;border-radius:6px;font-size:18px;font-weight:700;letter-spacing:1px}
    .copy-btn{background:#141414;border:1px solid #2e2e2e;padding:8px 12px;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.2s}
    .copy-btn:hover{border-color:#1DB954;color:#1DB954}
    .copy-btn.copied{background:#1DB954;border-color:#1DB954;color:#fff}
    .code-status{font-size:12px;padding:4px 12px;border-radius:20px;font-weight:500}
    .code-status.active{background:rgba(29,185,84,.14);color:#1DB954}
    .code-status.paused{background:rgba(232,163,23,.14);color:#E8A317}
    .code-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
    .code-detail{background:#141414;padding:12px 16px;border-radius:8px}
    .code-detail-label{font-size:11px;color:#8f8f8f;margin-bottom:4px;text-transform:uppercase}
    .code-detail-value{font-size:16px;font-weight:600;color:#e8e8e8}
    .code-detail-value.highlight{color:#1DB954}
    
    .payments-table{width:100%;border-collapse:collapse}
    .payments-table th{text-align:left;padding:12px 16px;font-size:11px;font-weight:600;color:#8f8f8f;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #262626}
    .payments-table td{padding:16px;font-size:14px;color:#e8e8e8;border-bottom:1px solid #262626}
    .payments-table tr:last-child td{border-bottom:none}
    .payment-status{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500}
    .payment-status.paid{background:rgba(29,185,84,.14);color:#1DB954}
    .payment-status.pending{background:rgba(232,163,23,.14);color:#E8A317}
    
    .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{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{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}
    
    .payout-info{background:rgba(29,185,84,.12);border:1px solid rgba(29,185,84,.3);border-radius:8px;padding:16px 20px;margin-bottom:24px}
    .payout-info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
    .payout-info-row:last-child{margin-bottom:0}
    .payout-info-label{font-size:13px;color:#C8C8C8}
    .payout-info-value{font-size:14px;font-weight:600;color:#e8e8e8}
    
    @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}
      .code-header{flex-direction:column;align-items:flex-start;gap:12px}
      .code-details{grid-template-columns:1fr 1fr}
      .payments-table th,.payments-table td{padding:12px 8px;font-size:13px}
    }
  

  .rb-share-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
  .rb-share-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.65;margin-bottom:6px}
  .rb-share-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .rb-share-url{font-family:monospace;font-size:12px;word-break:break-all;flex:1;min-width:200px;opacity:.9}
  .rb-copy-link{padding:8px 14px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-weight:700;background:#1DB954;color:#000}
  .rb-copy-link.copied{background:#1ed760}
  .rb-pay-banner{background:rgba(255,167,38,.12);border:1px solid rgba(255,167,38,.45);border-radius:12px;padding:18px 20px;margin-bottom:22px}
  .rb-pay-banner h3{margin:0 0 6px;font-size:16px;color:#FFA726}
  .rb-pay-banner p{margin:0 0 14px;font-size:14px;opacity:.85}
  .rb-pay-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .rb-pay-form select,.rb-pay-form input{padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:inherit;font-size:14px}
  .rb-pay-form input{flex:1;min-width:200px}
  .rb-pay-form button{padding:10px 18px;border-radius:8px;border:none;background:#1DB954;color:#000;font-weight:700;cursor:pointer;font-size:14px}
  .rb-pay-msg{margin-top:10px;font-size:13px;display:none}

/* ---------------------------------------------------------------------- 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; }