*{box-sizing:border-box}
:root{--bg:#0b0e14;--panel:#131822;--border:#28303d;--text:#f4f6fb;--muted:#8f98aa;--accent:#6577ff}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}
a{text-decoration:none}
.page{max-width:1100px;margin:0 auto;padding:48px 24px 72px}
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:30px}
.brand{font-size:12px;letter-spacing:3px;font-weight:800;color:#9cacf4}
h1{font-size:34px;margin:8px 0}
h2,h3{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:12px;color:#788396}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}
.summary{margin-bottom:28px}
.section{margin-top:28px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{font-size:10px;letter-spacing:1.5px;color:#78849a;font-weight:800;text-transform:uppercase;margin-bottom:8px}
.badge{font-size:10px;font-weight:900;padding:6px 10px;border-radius:999px}
.badge.free{background:#252d3a;color:#c1c8d5}
.badge.premium{background:#183a2b;color:#7ce0b1}
.actions{display:flex;gap:10px;margin-top:18px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer}
.btn.primary{background:#fff;color:#111}
.btn.secondary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:#fff;border:1px solid #364051}
.error{color:#f2aaaa}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(420px,100%);background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:28px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:#aab3c2;margin-bottom:6px}
.field input{width:100%;padding:12px;border:1px solid #344050;border-radius:10px;background:#0e131a;color:#fff}
button{font:inherit}
.auth-card button{width:100%;border:0}
.status{margin-top:12px;color:#efaaaa;font-size:13px}
@media(max-width:640px){.top{align-items:flex-start;flex-direction:column}h1{font-size:28px}}

.upgrade-head{max-width:720px;margin-bottom:28px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.plan-card{position:relative;border:1px solid var(--border);background:var(--panel);border-radius:18px;padding:24px}
.plan-card.recommended{border-color:#596ef4;box-shadow:0 0 0 1px rgba(101,119,255,.2)}
.recommend-label{position:absolute;top:14px;right:14px;font-size:9px;font-weight:900;letter-spacing:1px;background:#28356f;color:#bfc9ff;padding:6px 9px;border-radius:999px}
.price{font-size:30px;font-weight:900;margin:22px 0}
.price span{font-size:13px;color:var(--muted);font-weight:500}
.included{border-top:1px solid var(--border);padding-top:16px;margin-top:14px}
.included-title{font-size:12px;color:var(--muted);margin-bottom:10px}
.included-row{font-size:14px;margin:8px 0;color:#d9dfeb}
.plan-button{width:100%;border:0;margin-top:20px}
.upgrade-status{color:#d9a0a0;margin-top:18px}
.checkout-note{margin-top:24px;color:var(--muted);font-size:13px}

.checkout-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.checkout-price{
  font-size:34px;
  font-weight:900;
  margin:18px 0 24px;
}
.checkout-detail,
.payment-line{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
}
.checkout-detail span,
.payment-line span{
  color:var(--muted);
}
.payment-box{
  margin:18px 0;
}
.checkout-label{
  display:block;
  color:#aab3c2;
  font-size:12px;
  margin:18px 0 7px;
}
.checkout-input{
  width:100%;
  padding:12px 13px;
  border-radius:10px;
  border:1px solid #303846;
  background:#0e131b;
  color:#fff;
}
.checkout-button{
  width:100%;
  border:0;
  margin-top:14px;
}
.pending-box{
  margin-top:16px;
  padding:14px;
  border-radius:10px;
  border:1px solid #5a4b25;
  background:#292315;
  color:#e8cf82;
}
.success-box{
  margin-top:16px;
  padding:14px;
  border-radius:10px;
  border:1px solid #26563d;
  background:#173427;
  color:#82dfb0;
}
.qris-box{
  margin:18px 0;
  padding:16px;
  text-align:center;
  background:#fff;
  border-radius:12px;
}
.qris-box img{
  max-width:280px;
  width:100%;
  display:block;
  margin:0 auto;
}
@media(max-width:760px){
  .checkout-layout{
    grid-template-columns:1fr;
  }
}

.amount-breakdown{
  margin:22px 0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.amount-row,
.amount-total{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px;
}
.amount-row{
  border-bottom:1px solid var(--border);
  color:var(--muted);
}
.amount-row strong{
  color:#dce3ef;
}
.unique-row strong{
  color:#e8cf82;
}
.amount-total{
  background:#0e131a;
  align-items:center;
}
.amount-total span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  color:#92a0b7;
}
.amount-total strong{
  font-size:26px;
}
.important-note{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #514928;
  background:#272315;
  color:#dbc982;
  font-size:12px;
  line-height:1.55;
  margin-bottom:18px;
}
.payment-total-line strong{
  color:#79dfad;
}
.qris-caption{
  color:#111;
  font-size:12px;
  font-weight:800;
  margin-top:10px;
}
.file-input{
  padding:9px;
}
.proof-file-name{
  color:#9ea8b9;
  font-size:12px;
  margin-top:7px;
}
.proof-preview{
  margin-top:12px;
}
.proof-preview-image{
  max-width:280px;
  max-height:300px;
  width:auto;
  border-radius:12px;
  border:1px solid var(--border);
  display:block;
}
.file-proof{
  padding:12px;
  border:1px dashed #394456;
  border-radius:10px;
  color:#aeb8c8;
}
.error-box{
  margin-top:16px;
  padding:14px;
  border-radius:10px;
  border:1px solid #67383b;
  background:#321a1d;
  color:#efaaaa;
}
.admin-top-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.admin-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
}
.admin-count{
  font-size:34px;
  font-weight:900;
}
.admin-orders{
  display:grid;
  gap:16px;
}
.admin-order-card{
  padding:24px;
}
.admin-order-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}
.admin-waiting-badge{
  padding:7px 10px;
  border-radius:999px;
  background:#2b2516;
  color:#e6cd7a;
  border:1px solid #504528;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
}
.admin-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
  margin-top:20px;
}
.admin-info-grid > div{
  padding:13px;
  background:#0e131a;
  border:1px solid var(--border);
  border-radius:11px;
}
.admin-info-grid span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:6px;
}
.admin-info-grid strong{
  font-size:13px;
}
.admin-amount{
  color:#79dfad;
  font-size:17px!important;
}
.admin-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}
.admin-approve-btn{
  border:1px solid #326347;
  background:#1a432f;
  color:#8ce0b4;
}
.admin-reject-btn{
  border:1px solid #63373a;
  background:#3a1f22;
  color:#efaaaa;
}
.admin-empty{
  color:var(--muted);
  text-align:center;
  padding:34px;
}
@media(max-width:640px){
  .admin-summary{
    align-items:flex-start;
    flex-direction:column;
  }
}

.billing-current-card{
  margin-bottom:28px;
}
.billing-current-head,
.billing-history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.billing-status{
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  border:1px solid var(--border);
}
.billing-status.status-good{
  background:#173427;
  color:#82dfb0;
  border-color:#26563d;
}
.billing-status.status-wait{
  background:#292315;
  color:#e8cf82;
  border-color:#5a4b25;
}
.billing-status.status-bad{
  background:#321a1d;
  color:#efaaaa;
  border-color:#67383b;
}
.billing-summary-grid,
.billing-history-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  margin-top:22px;
}
.billing-summary-grid > div,
.billing-history-grid > div{
  padding:13px;
  background:#0e131a;
  border:1px solid var(--border);
  border-radius:11px;
}
.billing-summary-grid span,
.billing-history-grid span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:6px;
}
.billing-summary-grid strong,
.billing-history-grid strong{
  font-size:13px;
}
.billing-products{
  margin-top:22px;
}
.billing-product-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.billing-product-tags span{
  padding:8px 10px;
  background:#131a25;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
}
.billing-actions,
.billing-history-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}
.billing-note{
  color:var(--muted);
  font-size:12px;
  margin-top:16px;
}
.billing-history-section{
  margin-top:30px;
}
.billing-section-head{
  margin-bottom:16px;
}
.billing-history-list{
  display:grid;
  gap:14px;
}
.billing-history-card{
  padding:22px;
}
@media(max-width:640px){
  .billing-current-head,
  .billing-history-head{
    flex-direction:column;
  }
}


/* ==========================================================
   Revaly 5.3A.2 — Product cards & access state
   ========================================================== */
.product-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
}
.product-card-head{
  align-items:flex-start;
}
.product-card h3{
  margin-bottom:0;
}
.product-access-copy{
  min-height:42px;
  line-height:1.55;
}
.product-actions{
  margin-top:auto;
}
.badge.suite{
  background:#2b2453;
  color:#c9c2ff;
  border:1px solid #514899;
}
.hub-refresh-state{
  min-height:16px;
  margin-top:7px;
  color:#78849a;
  font-size:11px;
  transition:opacity .18s ease;
  opacity:0;
}

/* =========================================================
   REVALY 5.4.8 - ACCOUNT CENTER V2
   ========================================================= */
.account-v2-page{max-width:1180px}
.account-v2-top{align-items:flex-start}
.section-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}
.section-heading-row h2{margin-bottom:6px}
.account-summary-row{display:flex;justify-content:space-between;align-items:center;gap:18px}
.account-summary-meta{display:flex;gap:8px}
.product-card{display:flex;flex-direction:column;min-height:220px}
.product-card .product-actions{margin-top:auto}
.product-access-copy{min-height:38px}
.badge.suite{background:#2b2754;color:#c7c1ff}
.badge.pending{background:#2b2516;color:#e6cd7a;border:1px solid #504528}
.usage-product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.usage-product-card{min-height:220px}
.usage-list{display:grid;gap:16px;margin-top:20px}
.usage-item{border-top:1px solid var(--border);padding-top:14px}
.usage-item:first-child{border-top:0;padding-top:0}
.usage-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.usage-label{font-size:13px;font-weight:800;color:#dde3ee}
.usage-meta{font-size:11px;color:var(--muted);margin-top:4px}
.usage-progress{height:7px;background:#0d1219;border:1px solid #222b38;border-radius:999px;overflow:hidden;margin-top:10px}
.usage-progress span{display:block;height:100%;background:var(--accent);border-radius:999px}
.usage-unlimited{display:inline-flex;margin-top:9px;font-size:10px;font-weight:900;letter-spacing:.7px;color:#7ce0b1}
.team-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.team-list{display:grid;gap:10px}
.team-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.team-row:last-child{border-bottom:0}
.team-person{display:flex;align-items:center;gap:11px;min-width:0}
.team-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#20283a;color:#c8d0ff;font-weight:900;flex:0 0 auto}
.team-email{font-size:13px;font-weight:800;color:#edf0f7;overflow-wrap:anywhere}
.team-controls{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.team-role-select,.field select{padding:9px 10px;border-radius:9px;border:1px solid #344050;background:#0e131a;color:#fff}
.btn.compact{padding:7px 10px;font-size:11px}
.btn.danger{background:#3a1c20;color:#ffb0b6;border:1px solid #683239}
.inline-notice{margin:0 0 14px;padding:11px 13px;border-radius:10px;border:1px solid #354050;background:#131a24;color:#ccd3e0;font-size:12px}
.inline-notice.success{border-color:#26563d;background:#173427;color:#82dfb0}
.inline-notice.error{border-color:#67383b;background:#321a1d;color:#efaaaa}
.modal-backdrop{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.68);backdrop-filter:blur(7px)}
.modal-backdrop[hidden]{display:none}
.modal-card{width:min(500px,100%);background:#131822;border:1px solid #303949;border-radius:18px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.modal-close{border:0;background:transparent;color:#9ca6b8;font-size:26px;cursor:pointer}
.modal-actions{justify-content:flex-end}
.field select{width:100%;padding:12px}
.hub-refresh-state{min-height:16px;font-size:11px;color:#9aa6ba;transition:opacity .2s ease}
@media(max-width:820px){.team-layout{grid-template-columns:1fr}.section-heading-row{align-items:flex-start}}
@media(max-width:640px){.section-heading-row,.account-summary-row,.team-row{align-items:flex-start;flex-direction:column}.team-controls{width:100%;justify-content:flex-start}.team-role-select{width:100%}.section-heading-row .btn{width:100%;text-align:center}}

/* =========================================================
   REVALY 5.4.9 - BILLING CENTER V2
   ========================================================= */
.billing-v2-page,.checkout-v2-page,.upgrade-v2-page,.admin-payments-v2-page{max-width:1120px}
.billing-history{display:grid;gap:14px}
.billing-row-card,.admin-order-card{display:grid;gap:14px}
.billing-row-main{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.billing-amount-block{display:grid;justify-items:end;gap:8px;text-align:right}
.billing-amount-block strong{font-size:20px}
.billing-row-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:11px}
.billing-products{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge.danger{background:#3a1c20;color:#ffb0b6;border:1px solid #683239}
.checkout-card{display:grid;gap:18px}
.checkout-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.checkout-amount-panel{display:grid;gap:5px;padding:18px;border:1px solid #394458;border-radius:14px;background:#101722}
.checkout-amount-panel span,.checkout-amount-panel small{color:var(--muted)}
.checkout-amount-panel strong{font-size:34px;letter-spacing:-1px}
.checkout-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.checkout-detail-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#10151d}
.checkout-detail-grid span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.checkout-proof-box{display:grid;gap:10px;padding-top:6px}
.checkout-proof-box input{width:100%;padding:12px;border:1px dashed #465269;border-radius:10px;background:#0d1219;color:#fff}
.checkout-help,.renewal-note,.admin-warning{margin-top:16px}
.upgrade-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.upgrade-plan-card{position:relative;display:flex;flex-direction:column;min-height:300px}
.upgrade-plan-card .btn{margin-top:auto}
.upgrade-plan-card.featured{border-color:#695be9;box-shadow:0 0 0 1px rgba(105,91,233,.25)}
.upgrade-featured-label{position:absolute;top:12px;right:12px;font-size:9px;font-weight:900;letter-spacing:.8px;background:#30286f;color:#d8d1ff;padding:6px 8px;border-radius:999px}
.upgrade-price{display:flex;align-items:baseline;gap:7px;margin:18px 0}
.upgrade-price strong{font-size:28px}
.upgrade-price span{font-size:11px;color:var(--muted)}
.admin-approval-actions{padding-top:4px}
@media(max-width:640px){
  .billing-row-main,.checkout-header-row{flex-direction:column}
  .billing-amount-block{justify-items:start;text-align:left}
  .checkout-detail-grid{grid-template-columns:1fr}
  .checkout-amount-panel strong{font-size:28px}
}


/* =========================================================
   REVALY 5.5.0-E1 — Unified Error / Empty / Loading States
   ========================================================= */
.revaly-state{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  background:var(--panel);
}
.revaly-state-title{
  font-weight:800;
  line-height:1.35;
}
.revaly-state-copy{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.revaly-state-action{
  margin-top:12px;
}
.revaly-state-error{
  border-color:rgba(242,170,170,.35);
}
.revaly-state-error .revaly-state-title{
  color:#f2aaaa;
}
.revaly-state-loading{
  opacity:.9;
}


/* =========================================================
   REVALY 5.5.0-F3 — LIGHT PREMIUM LOGIN
   ========================================================= */
.light-premium-login{
  min-height:100vh;margin:0;
  background:
    radial-gradient(circle at 15% 20%,rgba(37,99,235,.12),transparent 32%),
    radial-gradient(circle at 86% 78%,rgba(14,165,233,.08),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef5ff 48%,#f7faff 100%);
  color:#0f172a;
}
.light-premium-login::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px);
  background-size:32px 32px;
}
.login-shell{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;max-width:1240px;margin:0 auto;padding:48px;gap:72px}
.login-brand-panel{padding:38px 18px 38px 10px}
.brand-badge{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid rgba(37,99,235,.14);border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(15,23,42,.05);font-size:11px;font-weight:800;letter-spacing:.14em;color:#2563eb}
.brand-copy{max-width:650px;margin-top:38px}
.brand-mark-wrap{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:22px;background:linear-gradient(145deg,#0f3f94,#2563eb);box-shadow:0 18px 40px rgba(37,99,235,.22)}
.brand-mark-letter{color:#fff;font-weight:900;font-size:24px}
.brand-copy h1{margin:0;max-width:620px;color:#0b1f46;font-size:clamp(38px,5vw,62px);line-height:1.04;letter-spacing:-.045em;font-weight:850}
.brand-copy p{max-width:560px;margin:22px 0 0;font-size:17px;line-height:1.7;color:#64748b}
.product-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.product-pills span{padding:9px 13px;background:rgba(255,255,255,.8);border:1px solid rgba(148,163,184,.18);border-radius:10px;font-size:12px;font-weight:750;color:#334155;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.trust-line{display:flex;align-items:center;gap:9px;margin-top:30px;color:#64748b;font-size:12px;font-weight:650}
.trust-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}
.login-form-panel{display:flex;justify-content:center}
.premium-login-card{width:min(100%,440px);padding:36px;border:1px solid rgba(148,163,184,.22);border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 28px 80px rgba(15,23,42,.10),0 3px 12px rgba(15,23,42,.04);backdrop-filter:blur(18px)}
.login-logo-line{color:#2563eb;font-size:13px;font-weight:900;letter-spacing:.18em}
.login-eyebrow{margin-top:8px;color:#94a3b8;font-size:10px;font-weight:800;letter-spacing:.16em}
.premium-login-card h2{margin:22px 0 0;color:#0b1f46;font-size:34px;line-height:1.1;letter-spacing:-.035em}
.login-subtitle{margin:10px 0 28px;color:#64748b;line-height:1.6;font-size:14px}
.premium-login-form{display:flex;flex-direction:column;gap:17px}
.premium-field{display:flex;flex-direction:column;gap:8px}
.premium-field>span{color:#334155;font-size:12px;font-weight:750}
.premium-field input{width:100%;min-height:48px;box-sizing:border-box;border:1px solid #dbe5f2;border-radius:12px;background:#f8fbff;color:#0f172a;padding:0 14px;outline:none;font:inherit;transition:.18s}
.premium-field input:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.11)}
.password-wrap{position:relative}.password-wrap input{padding-right:84px}
.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#2563eb;font-size:11px;font-weight:800;cursor:pointer;padding:8px}
.login-status{min-height:18px;font-size:12px;color:#dc2626}
.premium-login-button{width:100%;min-height:50px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#17468f,#2563eb);box-shadow:0 14px 30px rgba(37,99,235,.22);font-size:13px;font-weight:850;transition:.16s}
.premium-login-button:hover{transform:translateY(-1px);box-shadow:0 17px 36px rgba(37,99,235,.27)}
.login-footer-note{margin-top:22px;padding-top:18px;border-top:1px solid #edf2f7;text-align:center;color:#94a3b8;font-size:11px;line-height:1.5}
@media(max-width:900px){
  .login-shell{grid-template-columns:1fr;padding:34px 20px;gap:26px}
  .login-brand-panel{text-align:center;padding:24px 6px 4px}
  .brand-copy{margin-left:auto;margin-right:auto}.brand-copy h1{font-size:38px}
  .brand-copy p,.brand-mark-wrap{margin-left:auto;margin-right:auto}
  .product-pills,.trust-line{justify-content:center}
}
@media(max-width:520px){
  .login-shell{padding:22px 14px 30px}.brand-copy h1{font-size:32px}.brand-copy p{font-size:14px}
  .premium-login-card{padding:26px 20px;border-radius:20px}.premium-login-card h2{font-size:30px}
}


/* =========================================================
   REVALY 5.5.0-F3A — ORIGINAL LOGO + PREMIUM WORDING
   ========================================================= */
.brand-logo-hero{
  width:220px;
  margin-bottom:26px;
}
.brand-logo-hero img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.login-wordmark{
  width:150px;
  margin-bottom:4px;
}
.login-wordmark img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:900px){
  .brand-logo-hero{
    margin-left:auto;
    margin-right:auto;
    width:190px;
  }
  .login-wordmark{
    width:140px;
  }
}
@media(max-width:520px){
  .brand-logo-hero{width:165px}
  .login-wordmark{width:125px}
}


/* =========================================================
   REVALY 5.5.0-F4 — LIGHT PREMIUM ACCOUNT CENTER
   ========================================================= */

body.account-center-light{
  --bg:#f4f8ff;
  --panel:#ffffff;
  --panel-soft:#f8fbff;
  --border:#dce6f3;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#2563eb;
  --accent-strong:#17468f;
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 9% 8%,rgba(37,99,235,.09),transparent 26%),
    radial-gradient(circle at 91% 85%,rgba(14,165,233,.06),transparent 25%),
    linear-gradient(135deg,#f8fbff 0%,#f2f7ff 52%,#f8fbff 100%);
  min-height:100vh;
}

body.account-center-light::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.018) 1px,transparent 1px);
  background-size:36px 36px;
  z-index:0;
}

body.account-center-light .page{
  position:relative;
  z-index:1;
  max-width:1160px;
  padding:54px 28px 84px;
}

body.account-center-light .top{
  margin-bottom:34px;
  padding-bottom:26px;
  border-bottom:1px solid rgba(148,163,184,.18);
}

body.account-center-light h1{
  color:#0b1f46;
  font-size:36px;
  letter-spacing:-.035em;
}

body.account-center-light h2,
body.account-center-light h3{
  color:#14213d;
}

body.account-center-light .account-wordmark{
  width:132px;
  margin-bottom:13px;
}

body.account-center-light .account-wordmark img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

body.account-center-light .muted{
  color:#64748b;
}

body.account-center-light .small{
  color:#7c8ba1;
}

body.account-center-light .card,
body.account-center-light .plan-card,
body.account-center-light .modal-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(148,163,184,.22);
  box-shadow:
    0 18px 48px rgba(15,23,42,.055),
    0 2px 7px rgba(15,23,42,.025);
  backdrop-filter:blur(14px);
}

body.account-center-light .card{
  border-radius:18px;
}

body.account-center-light .summary{
  border-color:rgba(37,99,235,.14);
  background:
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,250,255,.96));
}

body.account-center-light .eyebrow{
  color:#5f77a4;
  letter-spacing:.14em;
}

body.account-center-light .badge.free{
  background:#eef2f7;
  color:#64748b;
  border:1px solid #e1e7ef;
}

body.account-center-light .badge.premium{
  background:#eaf8f1;
  color:#15805b;
  border:1px solid #cdeedf;
}

body.account-center-light .btn{
  border-radius:11px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}

body.account-center-light .btn:hover{
  transform:translateY(-1px);
}

body.account-center-light .btn.primary{
  background:#ffffff;
  color:#173568;
  border:1px solid #dce6f3;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}

body.account-center-light .btn.secondary{
  background:linear-gradient(135deg,#17468f,#2563eb);
  color:#ffffff;
  border:1px solid transparent;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}

body.account-center-light .btn.ghost{
  background:rgba(255,255,255,.74);
  color:#334155;
  border:1px solid #d9e3ef;
  box-shadow:0 4px 14px rgba(15,23,42,.035);
}

body.account-center-light .btn.ghost:hover,
body.account-center-light .btn.primary:hover{
  border-color:#b9cbea;
  background:#fff;
}

body.account-center-light .actions{
  gap:9px;
}

body.account-center-light .field label,
body.account-center-light .checkout-label{
  color:#475569;
  font-weight:700;
}

body.account-center-light .field input,
body.account-center-light .field select,
body.account-center-light .checkout-input,
body.account-center-light select{
  background:#f8fbff;
  color:#0f172a;
  border:1px solid #d8e3f0;
  outline:none;
}

body.account-center-light .field input:focus,
body.account-center-light .field select:focus,
body.account-center-light .checkout-input:focus,
body.account-center-light select:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 4px rgba(59,130,246,.10);
  background:#fff;
}

body.account-center-light .amount-breakdown{
  border-color:#dce6f3;
  background:#fff;
}

body.account-center-light .amount-row{
  border-bottom-color:#e7eef7;
}

body.account-center-light .amount-row strong{
  color:#1e293b;
}

body.account-center-light .amount-total{
  background:#f4f8ff;
}

body.account-center-light .amount-total span{
  color:#64748b;
}

body.account-center-light .amount-total strong{
  color:#0b1f46;
}

body.account-center-light .included{
  border-top-color:#e7eef7;
}

body.account-center-light .included-row{
  color:#334155;
}

body.account-center-light .plan-card.recommended{
  border-color:#8bb2f7;
  box-shadow:
    0 0 0 2px rgba(37,99,235,.07),
    0 22px 56px rgba(37,99,235,.08);
}

body.account-center-light .recommend-label{
  background:#e9f1ff;
  color:#2458ad;
}

body.account-center-light .pending-box{
  border-color:#f0d58a;
  background:#fff9e8;
  color:#8a6818;
}

body.account-center-light .success-box{
  border-color:#bfe7d2;
  background:#eefaf4;
  color:#166a49;
}

body.account-center-light .important-note{
  border-color:#ecd79a;
  background:#fff9e9;
  color:#795d16;
}

body.account-center-light .payment-total-line strong,
body.account-center-light .admin-amount{
  color:#16805a;
}

body.account-center-light .proof-file-name{
  color:#64748b;
}

body.account-center-light .file-proof{
  border-color:#cdd9e7;
  background:#f8fbff;
  color:#64748b;
}

body.account-center-light .error,
body.account-center-light .status,
body.account-center-light .upgrade-status{
  color:#c2414d;
}

body.account-center-light .error-box{
  border-color:#efc9cd;
  background:#fff3f4;
  color:#b64652;
}

body.account-center-light .admin-info-grid > div{
  background:#f8fbff;
  border-color:#e1e9f3;
}

body.account-center-light .admin-waiting-badge{
  background:#fff8e8;
  color:#8a6818;
  border-color:#ecd79a;
}

body.account-center-light .qris-box{
  border:1px solid #e2e8f0;
  box-shadow:0 10px 28px rgba(15,23,42,.05);
}

body.account-center-light .section-heading-row{
  align-items:flex-end;
}

body.account-center-light .section-heading-row h2{
  margin-bottom:7px;
}

body.account-center-light .usage-product-grid .card,
body.account-center-light .grid .card,
body.account-center-light .team-layout .card{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

body.account-center-light .usage-product-grid .card:hover,
body.account-center-light .grid .card:hover,
body.account-center-light .team-layout .card:hover{
  transform:translateY(-2px);
  border-color:#cad8ec;
  box-shadow:0 22px 52px rgba(15,23,42,.075);
}

body.account-center-light .modal-backdrop{
  background:rgba(15,23,42,.28);
  backdrop-filter:blur(5px);
}

body.account-center-light .modal-close{
  color:#334155;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}

body.account-center-light .revaly-state{
  background:#ffffff;
  border-color:#dce6f3;
}

body.account-center-light .revaly-state-error{
  border-color:#efc9cd;
}

body.account-center-light .revaly-state-error .revaly-state-title{
  color:#b64652;
}

/* Billing history and rendered transaction cards */
body.account-center-light .billing-history .card{
  background:#fff;
}

/* Keep QR code area deliberately white */
body.account-center-light .qris-box{
  background:#fff;
}

/* Cleaner scrollbar on supported browsers */
body.account-center-light{
  scrollbar-color:#c7d3e3 #f4f8ff;
}

/* Responsive polish */
@media(max-width:760px){
  body.account-center-light .page{
    padding:30px 18px 58px;
  }

  body.account-center-light .top{
    gap:20px;
  }

  body.account-center-light .admin-top-actions{
    width:100%;
  }

  body.account-center-light .admin-top-actions .btn{
    flex:1 1 auto;
  }

  body.account-center-light .account-wordmark{
    width:118px;
  }
}

@media(max-width:520px){
  body.account-center-light h1{
    font-size:30px;
  }

  body.account-center-light .card{
    padding:17px;
    border-radius:15px;
  }

  body.account-center-light .btn{
    min-height:42px;
  }
}


/* =========================================================
   REVALY 5.5.0-F4A — MEMBER EMAIL + FAVICON VISIBILITY FIX
   ========================================================= */

/* Team/member email and metadata were inheriting low-contrast dark-theme colors. */
body.account-center-light .team-email,
body.account-center-light .member-email,
body.account-center-light .member-meta,
body.account-center-light .team-member-email,
body.account-center-light [data-role="member-email"],
body.account-center-light .team-layout .muted,
body.account-center-light .team-layout .small,
body.account-center-light .team-layout small{
  color:#4b6485 !important;
  opacity:1 !important;
}

/* Ensure member names / invitation emails are always readable on white cards. */
body.account-center-light .team-layout strong,
body.account-center-light .team-layout b,
body.account-center-light .team-layout .member-name,
body.account-center-light .team-layout .invite-email{
  color:#14213d !important;
}

/* Safer generic table/list text contrast inside Account Center. */
body.account-center-light td,
body.account-center-light th,
body.account-center-light .list-item,
body.account-center-light .row-item{
  color:#26364f;
}


/* =========================================================
   REVALY 5.5.0-F5 — REGISTRATION & FIRST ACCESS FLOW
   ========================================================= */

.register-entry{
  margin-top:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:#64748b;
  font-size:12px;
}

.register-entry a{
  color:#2563eb;
  text-decoration:none;
  font-weight:800;
}

.register-entry a:hover{
  text-decoration:underline;
}

.register-entry-bottom{
  margin-top:22px;
}

.register-card{
  width:min(100%,460px);
}

.register-agreement{
  margin-top:-2px;
  padding:12px 13px;
  border:1px solid #e2eaf5;
  border-radius:11px;
  background:#f8fbff;
  color:#718096;
  font-size:10.5px;
  line-height:1.55;
}

.register-confirmation-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:22px;
  background:
    radial-gradient(circle at 20% 10%,rgba(37,99,235,.12),transparent 30%),
    rgba(244,248,255,.96);
  backdrop-filter:blur(12px);
}

.register-confirmation-overlay[hidden]{
  display:none;
}

.register-confirmation-card{
  width:min(100%,450px);
  padding:38px 34px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 90px rgba(15,23,42,.14);
  text-align:center;
}

.confirmation-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:16px;
  background:#eaf8f1;
  color:#15805b;
  font-size:26px;
  font-weight:900;
  box-shadow:0 10px 30px rgba(21,128,91,.10);
}

.confirmation-wordmark{
  margin:0 auto 18px;
}

.register-confirmation-card h2{
  margin:0;
  color:#0b1f46;
  font-size:29px;
  letter-spacing:-.03em;
}

.register-confirmation-card p{
  margin:13px 0 24px;
  color:#64748b;
  font-size:13px;
  line-height:1.7;
}

.register-confirmation-card p strong{
  color:#1e3a66;
}

.confirmation-button{
  text-decoration:none;
  box-sizing:border-box;
}

.confirmation-help{
  margin-top:17px;
  color:#94a3b8;
  font-size:10.5px;
  line-height:1.5;
}

body.confirmation-open{
  overflow:hidden;
}

@media(max-width:520px){
  .register-card{
    padding:24px 18px;
  }

  .register-confirmation-card{
    padding:30px 22px;
    border-radius:20px;
  }
}


/* REVALY 5.6.0-D3D — SIMPLE HIGH-VISIBILITY LIVE CHAT */
.rv-support-fab{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:9000;
  width:62px;
  height:62px;
  padding:0;
  border:3px solid #fff;
  border-radius:999px;
  background:linear-gradient(145deg,#00B7FF 0%,#1677FF 58%,#075DFF 100%);
  box-shadow:0 14px 34px rgba(0,140,255,.45);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rv-support-fab:hover{transform:translateY(-50%) scale(1.04)}
.rv-support-fab-icon,.rv-support-fab-icon svg{display:block;width:31px;height:31px}
.rv-support-unread{
  position:absolute;
  top:-4px;
  right:-3px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border:2px solid #fff;
  border-radius:999px;
  background:#FF334D;
  color:#fff;
  font-size:10px;
  line-height:18px;
  font-weight:900;
  text-align:center;
  box-shadow:0 6px 14px rgba(255,51,77,.35);
}
.rv-support-panel{
  position:fixed;
  right:94px;
  top:50%;
  transform:translateY(-50%);
  z-index:9001;
  width:min(380px,calc(100vw - 125px));
  height:min(560px,calc(100vh - 70px));
  background:#fff;
  border:1px solid #dce8f6;
  border-radius:18px;
  box-shadow:0 26px 70px rgba(15,23,42,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:#26364f;
}
.rv-support-panel[hidden]{display:none}
.rv-support-panel header{
  padding:14px 15px;
  border-bottom:1px solid #e7eef7;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8fbff;
}
.rv-support-panel header b{display:block;color:#123f77;font-size:15px}
.rv-support-panel header small{display:block;color:#8291a5;margin-top:3px;font-size:11px}
.rv-support-panel header button{
  width:30px;height:30px;border:0;border-radius:50%;
  background:#eef4fa;color:#52657b;font-size:19px;cursor:pointer
}
.rv-support-state{
  padding:8px 12px;
  background:#fff7ed;
  color:#9a3412;
  font-size:11px;
  border-bottom:1px solid #fed7aa
}
.rv-support-messages{
  flex:1;overflow:auto;padding:15px;
  display:flex;flex-direction:column;gap:9px;background:#fff
}
.rv-support-empty{margin:auto;color:#8c99aa;text-align:center;font-size:12px}
.rv-support-msg{
  max-width:80%;
  background:#f1f5f9;
  border-radius:13px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.5
}
.rv-support-msg.mine{
  margin-left:auto;
  background:#e6f2ff;
  color:#164d8e
}
.rv-support-msg small{
  display:block;font-size:9px;color:#94a3b8;margin-top:5px
}
.rv-support-form{
  display:flex;gap:8px;padding:12px;border-top:1px solid #e7eef7;background:#fff
}
.rv-support-form textarea{
  flex:1;resize:none;min-height:42px;max-height:100px;
  border:1px solid #d8e3f0;border-radius:11px;padding:10px;
  color:#24364d;background:#fff;outline:none
}
.rv-support-form textarea:focus{
  border-color:#73b9ff;box-shadow:0 0 0 3px rgba(0,153,255,.12)
}
.rv-support-form button{
  border:0;border-radius:11px;
  background:#168cff;color:#fff;padding:0 14px;font-weight:800;cursor:pointer
}
.rv-support-form button:disabled{opacity:.6;cursor:default}
@media(max-width:680px){
  .rv-support-fab{
    right:14px;top:auto;bottom:20px;transform:none;width:58px;height:58px
  }
  .rv-support-fab:hover{transform:scale(1.04)}
  .rv-support-panel{
    right:14px;left:14px;top:auto;bottom:88px;transform:none;
    width:auto;height:min(520px,calc(100vh - 115px))
  }
}



/* =========================================================
   REVALY 5.6.2C1 — INVITATION FLOW
   ========================================================= */
.invitation-history-block{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid #e2eaf3;
}

.invitation-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.invitation-history-head .small{
  margin:4px 0 0;
}

#teamInvitationHistory[hidden]{
  display:none !important;
}

@media(max-width:640px){
  .invitation-history-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .invitation-history-head .btn{
    width:100%;
  }
}


/* =========================================================
   REVALY 5.6.2C2 — MANUAL INVITATION ACCEPT / DECLINE
   ========================================================= */
#incomingInvitationsSection[hidden]{
  display:none !important;
}

#incomingInvitations{
  padding:4px 18px;
}

.incoming-invitation-row{
  padding:15px 0;
}

.incoming-invitation-row + .incoming-invitation-row{
  border-top:1px solid #e4ebf3;
}

@media(max-width:640px){
  .incoming-invitation-row .team-controls{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .incoming-invitation-row .team-controls .badge{
    grid-column:1 / -1;
    width:max-content;
  }

  .incoming-invitation-row .team-controls .btn{
    width:100%;
  }
}

/* REVALY PHASE 1.10B — Unified OS plan polish */
.upgrade-benefits {
  margin: 16px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.upgrade-benefits li {
  line-height: 1.5;
}
.product-card button[disabled] {
  cursor: not-allowed;
  opacity: .58;
}


/* =========================================================
   REVALY ACCOUNT CENTER PHASE 1.10C
   LAUNCH PRICING + SOFT LAUNCH POLISH
   ========================================================= */
.launch-pricing-note{
  margin-bottom:18px;
  border-color:#cbdcf5!important;
  background:linear-gradient(135deg,#fbfdff,#f4f8ff)!important;
}
.launch-pricing-note h3{margin-bottom:7px}
.upgrade-plan-topline{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.launch-price-badge{
  display:inline-flex;padding:5px 8px;border-radius:999px;
  background:#e8f8ef;color:#087845;border:1px solid #c8ecd8;
  font-size:9px;font-weight:900;letter-spacing:.06em
}
.upgrade-audience{
  margin:4px 0 9px;color:#345a87;font-size:12px;font-weight:800;line-height:1.5
}
.plan-all-apps{
  margin:10px 0 2px;padding:9px 10px;border-radius:9px;
  background:#f5f9ff;border:1px solid #dce8f7;
  color:#53708f;font-size:10px;font-weight:800;line-height:1.4
}
.checkout-os-includes{margin-top:18px}
.checkout-app-pills{
  display:flex;gap:7px;flex-wrap:wrap;margin:12px 0
}
.checkout-app-pills span{
  padding:6px 9px;border-radius:999px;background:#eff6ff;
  border:1px solid #d5e5fa;color:#245a99;font-size:10px;font-weight:900
}
.checkout-plan-scope{
  display:flex;justify-content:space-between;gap:14px;
  margin:12px 0;padding:10px 12px;border-radius:10px;
  background:#f7fbff;border:1px solid #dce8f5;
  color:#657b94;font-size:11px
}
.checkout-plan-scope strong{color:#193f6f;text-align:right}
@media(max-width:640px){
  .checkout-plan-scope{flex-direction:column}
  .checkout-plan-scope strong{text-align:left}
}


/* =========================================================
   REVALY ACCOUNT PHASE 1.11C — PRICING & UPGRADE UX
   ========================================================= */
.pricing-cost-note{
  margin-bottom:18px;
  border-color:#d5e3f5!important;
  background:#fbfdff!important;
}
.pricing-cost-note h3{margin-bottom:7px}
.pricing-meter-pills{
  display:flex;gap:7px;flex-wrap:wrap;margin-top:12px
}
.pricing-meter-pills span{
  display:inline-flex;padding:6px 9px;border-radius:999px;
  background:#eff6ff;border:1px solid #d8e7fa;
  color:#275b99;font-size:10px;font-weight:900
}
.upgrade-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.upgrade-plan-card.not-sellable{
  background:linear-gradient(180deg,#fbfdff,#f8fafc);
}
.plan-tier-badge{
  display:inline-flex;padding:5px 8px;border-radius:999px;
  background:#edf4ff;border:1px solid #d4e4fb;
  color:#315f9b;font-size:9px;font-weight:900;letter-spacing:.06em
}
.cost-aware-benefits li{
  position:relative;padding-right:52px
}
.cost-bearing-benefit{
  color:#153b68!important;font-weight:700
}
.cost-aware-dot{
  position:absolute;right:0;top:2px;
  display:inline-flex;padding:3px 6px;border-radius:999px;
  background:#fff6df;border:1px solid #f4dfa8;
  color:#9a670c;font-size:8px;font-weight:900;letter-spacing:.06em
}
.plan-rollout-note{
  margin:10px 0;padding:10px 11px;border-radius:9px;
  background:#fff9eb;border:1px solid #f2dfb4;
  color:#866020;font-size:10px;line-height:1.5
}
.plan-disabled-btn{
  width:100%;opacity:.72;cursor:not-allowed
}
@media(max-width:900px){
  .upgrade-grid{grid-template-columns:1fr!important}
}

.account-center-light .checkout-card,.account-center-light .checkout-payment-guide,.account-center-light .checkout-os-includes,.account-center-light .checkout-help{background:#fff!important;color:#10264a!important;border-color:#d8e3f0!important}.account-center-light .checkout-amount-panel{display:grid;gap:8px;padding:20px;border:1px solid #c8dcf4!important;border-radius:14px;background:linear-gradient(135deg,#eef6ff,#f8fbff)!important;color:#10264a!important}.account-center-light .checkout-amount-panel span,.account-center-light .checkout-amount-panel small{color:#667d99!important}.checkout-amount-label{color:#667d99;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.checkout-total-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.account-center-light .checkout-amount-panel strong{color:#0a2f63!important;font-size:34px!important}.account-center-light .checkout-detail-grid>div{background:#f8fbff!important;border-color:#dce7f3!important;color:#173a66!important}.account-center-light .checkout-detail-grid span{color:#71859e!important}.account-center-light .checkout-detail-grid strong{color:#183b68!important}.account-center-light .checkout-proof-box input{background:#fff!important;color:#15365f!important;border-color:#bfcfe1!important}.mini-copy-btn{border:1px solid #bad1ed;background:#fff;color:#245d9d;border-radius:8px;padding:6px 9px;font-size:10px;font-weight:900;cursor:pointer}.checkout-copy-status{width:max-content;padding:5px 8px;border-radius:8px;background:#e9f8ef;color:#0b7a45;font-size:10px;font-weight:800}.payment-destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}.payment-method-card{border:1px solid #d7e3f0;border-radius:14px;padding:16px;background:#fbfdff;color:#17385f}.payment-method-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.payment-method-head h3{margin:0}.payment-method-badge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#e7f7ee;color:#087a45;border:1px solid #c8ead7;font-size:8px;font-weight:900}.payment-method-badge.neutral{background:#eff5fd;color:#39689f;border-color:#d7e5f6}.payment-account-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #e5edf6;color:#7388a1;font-size:11px}.payment-account-row>div{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.payment-account-row strong{color:#133b6c;font-size:13px;text-align:right}.payment-method-card ol{margin:14px 0 0;padding-left:18px;color:#6a7f98;font-size:10px;line-height:1.65}.checkout-qris-image-wrap{background:#fff;border:1px solid #e1e8f0;border-radius:12px;padding:10px}.checkout-qris-image-wrap img{width:100%;max-width:360px;height:auto;display:block;margin:0 auto;border-radius:8px}.qris-total-note{margin-top:10px;padding:9px 10px;border-radius:9px;background:#eef6ff;color:#59738f;font-size:10px}.qris-total-note strong{display:block;margin-top:3px;color:#0f4f8f;font-size:14px}@media(max-width:760px){.payment-destination-grid{grid-template-columns:1fr}.checkout-total-row{align-items:flex-start;flex-direction:column}.account-center-light .checkout-amount-panel strong{font-size:29px!important}}
/* Account 3.1 canonical entitlement cards */
.entitlement-value{font-weight:800;color:#17335f}.entitlement-note{margin-top:8px;font-size:11px;color:#71829a}.entitlement-list{display:grid;gap:8px;margin-top:12px}.entitlement-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #edf1f6}.entitlement-row:last-child{border-bottom:0}

/* Revaly Account 3.1A — entitlement compatibility / over-limit protection */
.usage-over-limit{border-top-color:#f0b35b!important}
.usage-over-limit .usage-meta{color:#a45b12!important;font-weight:700}
.usage-compat-warning,.usage-limit-note{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:11px;line-height:1.45}
.usage-compat-warning{background:#fff6e8;border:1px solid #f2cf9a;color:#7a470c}
.usage-limit-note{background:#f7f8fb;border:1px solid #dce2ea;color:#536176}
body:not(.account-center-light) .usage-compat-warning{background:#261d10;border-color:#5f4928;color:#f2c778}
body:not(.account-center-light) .usage-limit-note{background:#151a21;border-color:#303946;color:#aab5c5}


/* ============================================================
   Account 3.2C — Billing lifecycle UI
   ============================================================ */
.billing-lifecycle{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  background:#f8fafc;
}
.billing-lifecycle-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.billing-lifecycle-head strong{display:block;margin-top:2px}
.billing-lifecycle p{margin:8px 0 0;font-size:12px;line-height:1.55}
.billing-lifecycle-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:700;
  border:1px solid currentColor;
}
.billing-lifecycle.lifecycle-good{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.billing-lifecycle.lifecycle-wait{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.billing-lifecycle.lifecycle-bad{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.billing-lifecycle.lifecycle-neutral{background:#f8fafc;border-color:#e2e8f0;color:#475569}
.account-lifecycle-line{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body:not(.account-center-light) .billing-lifecycle.lifecycle-good{background:#10261a;border-color:#245838;color:#a7e8bd}
body:not(.account-center-light) .billing-lifecycle.lifecycle-wait{background:#2c1f10;border-color:#6f4e25;color:#f2c27b}
body:not(.account-center-light) .billing-lifecycle.lifecycle-bad{background:#2b1515;border-color:#6c3030;color:#f0aaaa}
body:not(.account-center-light) .billing-lifecycle.lifecycle-neutral{background:#171a22;border-color:#303644;color:#c7ced8}
@media(max-width:640px){
  .billing-lifecycle-head{flex-direction:column}
}

/* =========================================================
   REVALY ACCOUNT 3.2C1 — PLAN BENEFIT CLARITY + CUSTOM DOMAIN
   ========================================================= */
.upgrade-benefit-list{
  display:grid;
  gap:0;
  margin:16px 0 4px;
  border-top:1px solid #e8eef6;
}
.upgrade-benefit-item{
  position:relative;
  padding:10px 0;
  border-bottom:1px solid #edf2f7;
}
.upgrade-benefit-main{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding-right:2px;
  line-height:1.35;
}
.upgrade-benefit-label{
  color:#193b68;
  font-size:12px;
  font-weight:800;
}
.upgrade-benefit-label::after{content:':' }
.upgrade-benefit-value{
  color:#15233d;
  font-size:12px;
  font-weight:800;
}
.upgrade-benefit-note{
  margin-top:3px;
  color:#7a8ca4;
  font-size:9.5px;
  line-height:1.45;
  max-width:95%;
}
.upgrade-benefit-item .cost-aware-dot,
.benefit-popular-dot{
  position:static;
  flex:0 0 auto;
  margin-left:auto;
  margin-top:0;
}
.benefit-popular-dot{
  display:inline-flex;
  padding:3px 6px;
  border-radius:999px;
  background:#edf7ff;
  border:1px solid #cfe4fb;
  color:#2461a4;
  font-size:7px;
  font-weight:900;
  letter-spacing:.06em;
}
.upgrade-benefit-item.benefit-highlight{
  margin:4px -8px;
  padding:10px 8px;
  border:1px solid #cfe0f6;
  border-radius:10px;
  background:linear-gradient(135deg,#f6faff,#eef6ff);
}
.upgrade-benefit-item.benefit-highlight .upgrade-benefit-label,
.upgrade-benefit-item.benefit-highlight .upgrade-benefit-value{color:#114f91}
.upgrade-benefit-item.benefit-muted .upgrade-benefit-value{color:#718198}
@media(max-width:520px){
  .upgrade-benefit-main{flex-wrap:wrap}
  .upgrade-benefit-item .cost-aware-dot,.benefit-popular-dot{margin-left:0}
  .upgrade-benefit-note{max-width:100%}
}

/* Account 3.3 — Xendit Live Payment Foundation */
.xendit-method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:18px 0}
.xendit-method-btn{appearance:none;text-align:left;border:1px solid var(--border);background:#fff;border-radius:14px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:5px;color:inherit}
.xendit-method-btn:hover,.xendit-method-btn.active{border-color:#111827;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.xendit-method-btn span{font-size:12px;color:#64748b;line-height:1.4}
.xendit-method-btn:disabled{opacity:.55;cursor:wait}
.xendit-payment-result{margin-top:16px;border:1px solid var(--border);border-radius:16px;padding:18px;background:#fff}
.xendit-result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.xendit-qris-wrap{text-align:center;padding:18px 0}.xendit-qris-target{min-height:260px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}.xendit-qris-target canvas,.xendit-qris-target img,.xendit-qris-target svg{max-width:260px;width:100%;height:auto}.xendit-qris-error{max-width:520px;margin:0 auto;text-align:left}
.xendit-va-number{margin:18px 0;padding:16px;border-radius:12px;background:#f8fafc}.xendit-va-number>span{font-size:12px;color:#64748b}.xendit-va-number>div{display:flex;gap:10px;align-items:center;margin:6px 0}.xendit-va-number strong{font-size:22px;letter-spacing:.03em}
.manual-payment-fallback summary{cursor:pointer;font-weight:700}.manual-payment-fallback[open] summary{margin-bottom:12px}


/* ============================================================
   REVALY ACCOUNT 3.4D — Subscription Expiry / Renewal Awareness
   ============================================================ */
.subscription-expiry-banner{
  margin: 18px 0 26px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(239,246,255,.98),rgba(255,255,255,.98));
  box-shadow:0 14px 38px rgba(15,23,42,.07);
  padding:18px 20px;
}
.subscription-expiry-banner[hidden]{display:none!important}
.subscription-expiry-banner .expiry-banner-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.subscription-expiry-banner .expiry-banner-copy{min-width:0;flex:1 1 520px}
.subscription-expiry-banner .expiry-banner-eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#2563eb;margin-bottom:6px
}
.subscription-expiry-banner h3{margin:0 0 6px;font-size:20px;line-height:1.25;color:#0f172a}
.subscription-expiry-banner p{margin:0;color:#53657d;line-height:1.55}
.subscription-expiry-banner .expiry-banner-meta{
  margin-top:8px;font-size:13px;font-weight:700;color:#334155
}
.subscription-expiry-banner .expiry-banner-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.subscription-expiry-banner.expiry-watch{
  border-color:rgba(245,158,11,.30);
  background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(255,255,255,.98))
}
.subscription-expiry-banner.expiry-watch .expiry-banner-eyebrow{color:#b45309}
.subscription-expiry-banner.expiry-warning{
  border-color:rgba(234,88,12,.34);
  background:linear-gradient(135deg,rgba(255,247,237,.99),rgba(255,255,255,.98))
}
.subscription-expiry-banner.expiry-warning .expiry-banner-eyebrow{color:#c2410c}
.subscription-expiry-banner.expiry-urgent{
  border-color:rgba(220,38,38,.30);
  background:linear-gradient(135deg,rgba(254,242,242,.99),rgba(255,255,255,.98))
}
.subscription-expiry-banner.expiry-urgent .expiry-banner-eyebrow{color:#b91c1c}
.subscription-expiry-banner.expiry-expired{
  border-color:rgba(220,38,38,.32);
  background:linear-gradient(135deg,rgba(254,242,242,.99),rgba(255,255,255,.98))
}
.subscription-expiry-banner.expiry-expired .expiry-banner-eyebrow{color:#b91c1c}
.subscription-expiry-banner.expiry-normal .expiry-banner-actions{display:none}
.subscription-expiry-banner.expiry-normal{padding:14px 18px}
.subscription-expiry-banner.expiry-normal h3{font-size:17px;margin-bottom:3px}
@media(max-width:720px){
  .subscription-expiry-banner{padding:16px}
  .subscription-expiry-banner .expiry-banner-actions{width:100%}
  .subscription-expiry-banner .expiry-banner-actions .btn{flex:1 1 auto;text-align:center}
}


/* ==========================================================
   Revaly Account 3.4E — Product Purpose Clarity & App Card Awareness UX
   Frontend-only presentation layer. No entitlement/payment logic changes.
   ========================================================== */
.product-card{
  min-height:300px;
}
.product-purpose{
  margin-top:16px;
  padding:14px 15px;
  border:1px solid rgba(75,107,160,.16);
  border-radius:14px;
  background:rgba(247,250,255,.72);
}
.product-purpose-label{
  font-size:12px;
  line-height:1.4;
  font-weight:900;
  color:#173a66;
}
.product-purpose-copy{
  margin:7px 0 0;
  font-size:12px;
  line-height:1.58;
  color:#6b7f99;
}
.product-access-state{
  margin-top:14px;
}
.product-access-label{
  display:block;
  margin-bottom:4px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#8798ad;
}
.product-access-copy{
  min-height:auto;
  margin:0;
}
body.account-center-light .product-purpose{
  background:linear-gradient(135deg,#f7fbff,#fbfdff);
  border-color:#dce7f3;
}
body.account-center-light .product-purpose-label{
  color:#173a66;
}
body.account-center-light .product-purpose-copy{
  color:#667d99;
}
body.account-center-light .product-access-label{
  color:#8496ab;
}
body:not(.account-center-light) .product-purpose{
  background:#111824;
  border-color:#293545;
}
body:not(.account-center-light) .product-purpose-label{
  color:#e7edf8;
}
body:not(.account-center-light) .product-purpose-copy{
  color:#9eabba;
}
@media(max-width:640px){
  .product-card{min-height:auto}
  .product-purpose{padding:13px}
}


/* =========================================================
   REVALY ACCOUNT 3.4F — SECURE PASSWORD RECOVERY UX
   ========================================================= */
.password-recovery-entry{
  margin-top:-7px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.password-recovery-entry a,
.recovery-inline-link{
  color:#2563eb;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
}
.password-recovery-entry a:hover,
.recovery-inline-link:hover{text-decoration:underline}

.recovery-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 18px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 15% 20%,rgba(37,99,235,.12),transparent 32%),
    radial-gradient(circle at 86% 78%,rgba(14,165,233,.08),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef5ff 48%,#f7faff 100%);
  color:#0f172a;
}
.recovery-page::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px);
  background-size:32px 32px;
}
.recovery-card{
  position:relative;
  z-index:1;
  width:min(100%,460px);
  box-sizing:border-box;
  padding:34px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 28px 80px rgba(15,23,42,.10),0 3px 12px rgba(15,23,42,.04);
  backdrop-filter:blur(18px);
}
.recovery-card .login-wordmark{margin-bottom:14px}
.recovery-card h1{
  margin:8px 0 0;
  color:#0b1f46;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.recovery-card .recovery-subtitle{
  margin:10px 0 24px;
  color:#64748b;
  font-size:13px;
  line-height:1.65;
}
.recovery-form{display:flex;flex-direction:column;gap:16px}
.recovery-status{
  min-height:20px;
  margin-top:2px;
  font-size:12px;
  line-height:1.55;
  color:#64748b;
}
.recovery-status.error{color:#c13b4d}
.recovery-status.success{color:#087a51}
.recovery-status.info{color:#475569}
.recovery-meta{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #edf2f7;
  color:#94a3b8;
  font-size:11px;
  line-height:1.55;
  text-align:center;
}
.recovery-success-box{
  margin:14px 0 0;
  padding:14px;
  border:1px solid #ccebdc;
  border-radius:12px;
  background:#f2fbf7;
  color:#087a51;
  font-size:12px;
  line-height:1.55;
}
.recovery-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.recovery-secondary{
  min-height:46px;
  border:1px solid #dbe5f2;
  border-radius:12px;
  background:#fff;
  color:#17468f;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:12px;
}
.recovery-secondary:hover{background:#f8fbff}
.recovery-strength-note{margin-top:-7px;color:#94a3b8;font-size:10.5px;line-height:1.45}
.recovery-loading{
  display:flex;
  align-items:center;
  gap:9px;
  color:#64748b;
  font-size:12px;
  margin-bottom:16px;
}
.recovery-loading-dot{
  width:8px;height:8px;border-radius:50%;background:#2563eb;
  box-shadow:0 0 0 5px rgba(37,99,235,.10)
}
@media(max-width:520px){
  .recovery-card{padding:26px 20px;border-radius:20px}
  .recovery-card h1{font-size:27px}
}


/* Revaly Plan Economics 1.1F — Delta Upgrade UX */
.upgrade-tier-flags{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.plan-current-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#eaf7ef;color:#0b7a46;font-size:10px;font-weight:900;letter-spacing:.06em}
.current-plan-card{border-color:rgba(16,185,129,.34);box-shadow:0 14px 40px rgba(15,23,42,.06)}
.upgrade-delta-box{margin:16px 0;padding:15px;border:1px solid #dbe8f8;border-radius:15px;background:#f8fbff;display:flex;flex-direction:column;gap:8px}
.upgrade-delta-head,.upgrade-delta-row,.upgrade-delta-total{display:flex;justify-content:space-between;gap:12px;align-items:center}
.upgrade-delta-head{padding-bottom:8px;border-bottom:1px solid #e5edf7;color:#475569;font-size:11px}
.upgrade-delta-head strong{color:#0b1f46;font-size:11px}
.upgrade-delta-row{font-size:12px;color:#64748b}
.upgrade-delta-row strong{color:#0f172a}
.upgrade-delta-row.credit strong{color:#087a51}
.upgrade-delta-total{margin-top:2px;padding-top:10px;border-top:1px solid #dbe8f8;color:#0b1f46;font-size:13px;font-weight:900}
.upgrade-delta-total strong{font-size:18px}
.upgrade-delta-box small{margin-top:2px;color:#64748b;line-height:1.5}
.plan-transition-note{margin:14px 0;padding:12px;border-radius:12px;background:#f8fafc;border:1px solid #e7edf4;color:#475569;font-size:11px;line-height:1.55}
.upgrade-checkout-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.upgrade-checkout-grid{grid-template-columns:1fr 1fr}.upgrade-delta-head,.upgrade-delta-row,.upgrade-delta-total{align-items:flex-start}.upgrade-delta-total strong{font-size:16px}}


/* =========================================================
   REVALY AFFILIATE 1.0D — Dashboard & Earnings UX
   ========================================================= */
.affiliate-page{max-width:1240px}
/* 1.0D1: respect HTML hidden state even when component classes set display */
.affiliate-page [hidden]{display:none!important}
.affiliate-top{margin-bottom:22px}
.affiliate-state-card{display:flex;align-items:center;gap:14px;min-height:94px}
.affiliate-loader{width:26px;height:26px;border:3px solid #dbe6f4;border-top-color:#155fc7;border-radius:50%;animation:aff-spin .8s linear infinite;flex:0 0 auto}
@keyframes aff-spin{to{transform:rotate(360deg)}}
.affiliate-copy{max-width:700px;line-height:1.7}
.affiliate-activation{padding:30px}
.affiliate-activation-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:34px;align-items:center}
.affiliate-policy-mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:22px}
.affiliate-policy-mini-grid>div{border:1px solid #dce6f2;background:#f8fbff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.affiliate-policy-mini-grid strong{font-size:20px;color:#0c2147}
.affiliate-policy-mini-grid span{font-size:11px;color:#738399;line-height:1.4}
.affiliate-activation-action{border:1px solid #dce6f2;background:#fbfdff;border-radius:16px;padding:20px}
.affiliate-check-row{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.55;color:#65768f;cursor:pointer}
.affiliate-check-row input{margin-top:3px;accent-color:#155fc7}
.affiliate-primary-cta{width:100%;margin-top:16px;min-height:46px}
.affiliate-status-banner{display:flex;gap:10px;align-items:center;border-radius:13px;padding:12px 14px;margin-bottom:16px;font-size:12px}
.affiliate-status-banner strong{white-space:nowrap}
.affiliate-profile-suspended{background:#fff7e8;border:1px solid #f1d59b;color:#6e531e}
.affiliate-profile-closed{background:#fff0f0;border:1px solid #efc3c3;color:#803c3c}
.affiliate-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:center;padding:28px;margin-bottom:16px;background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%)}
.affiliate-hero h2{margin:6px 0 6px}
.affiliate-link-builder{display:flex;gap:9px;margin-top:18px;align-items:stretch}
.affiliate-copy-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;flex:1;min-width:0}
.affiliate-copy-control input,.affiliate-select{border:1px solid #d7e1ee;background:#fff;color:#18345e;border-radius:10px;min-height:42px;padding:0 12px;font:inherit;font-size:12px;outline:none}
.affiliate-copy-control input{width:100%;box-sizing:border-box}
.affiliate-select:focus,.affiliate-copy-control input:focus{border-color:#7aa7df;box-shadow:0 0 0 3px rgba(21,95,199,.08)}
.affiliate-code-card{border:1px solid #d8e5f5;background:#f5f9ff;border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:7px;text-align:center}
.affiliate-code-card>span{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#7a899e;font-weight:800}
.affiliate-code-card>strong{font-size:22px;letter-spacing:.6px;color:#0c3475;word-break:break-all}
.affiliate-code-card .badge{align-self:center;margin-top:4px}
.affiliate-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}
.affiliate-metric{padding:20px;display:flex;flex-direction:column;gap:6px;min-height:116px}
.affiliate-metric>span{font-size:11px;font-weight:800;color:#718198;text-transform:uppercase;letter-spacing:.55px}
.affiliate-metric>strong{font-size:25px;color:#0c2147;letter-spacing:-.5px}
.affiliate-metric>small{font-size:11px;color:#8997a9}
.affiliate-metric-highlight{background:linear-gradient(145deg,#0d326c,#145ab7);border-color:#0f4b9b}
.affiliate-metric-highlight>span,.affiliate-metric-highlight>small{color:#cddcf2}
.affiliate-metric-highlight>strong{color:#fff}
.affiliate-two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:16px}
.affiliate-panel{padding:22px}
.affiliate-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.affiliate-panel h2{margin:5px 0 0}
.affiliate-window-chip{border:1px solid #d8e3ef;background:#f7faff;color:#657a95;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:800}
.affiliate-funnel-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;margin-top:26px}
.affiliate-funnel-stats>div:not(.affiliate-stat-arrow){display:flex;flex-direction:column;gap:3px}
.affiliate-funnel-stats strong{font-size:28px;color:#0c2147}
.affiliate-funnel-stats span{font-size:11px;color:#74859b}
.affiliate-stat-arrow{color:#9daabd;font-size:20px}
.affiliate-performance-foot{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid #e5ecf4;margin-top:22px;padding-top:15px;font-size:11px;color:#718198}
.affiliate-performance-foot strong{color:#18345e}
.affiliate-rule-list{margin-top:14px;display:grid;gap:0}
.affiliate-rule-list>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #e7edf4;font-size:12px}
.affiliate-rule-list>div:last-child{border-bottom:0}
.affiliate-rule-list span{color:#718198}
.affiliate-rule-list strong{color:#18345e}
.affiliate-payout-note{margin-top:14px;line-height:1.5}
.affiliate-history-section{margin-top:22px}
.affiliate-history-head{align-items:end}
.affiliate-filter{min-width:160px}
.affiliate-table-card{padding:0;overflow:hidden}
.affiliate-table-scroll{overflow:auto}
.affiliate-table{width:100%;border-collapse:collapse;min-width:820px}
.affiliate-table th{background:#f7faff;color:#6f8097;text-transform:uppercase;letter-spacing:.45px;font-size:10px;text-align:left;padding:12px 14px;border-bottom:1px solid #dfe7f1;white-space:nowrap}
.affiliate-table td{padding:13px 14px;border-bottom:1px solid #edf1f6;color:#51657f;font-size:11px;vertical-align:middle}
.affiliate-table tr:last-child td{border-bottom:0}
.affiliate-table td strong{color:#1b3559}
.affiliate-money-cell strong{color:#0c4f9e!important}
.affiliate-status{display:inline-flex;align-items:center;min-height:24px;border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:900;white-space:nowrap}
.status-pending{background:#fff6df;color:#7b5e16}
.status-available{background:#eaf6ef;color:#1f6a3c}
.status-paid{background:#e9f2ff;color:#18549a}
.status-reversed{background:#fff0f0;color:#9c4444}
.affiliate-empty{padding:28px;text-align:center;color:#8492a5;font-size:12px}

@media(max-width:900px){
  .affiliate-activation-grid,.affiliate-hero,.affiliate-two-col{grid-template-columns:1fr}
  .affiliate-code-card{text-align:left;align-items:flex-start}
  .affiliate-code-card .badge{align-self:flex-start}
  .affiliate-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .affiliate-policy-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .affiliate-activation{padding:20px}
  .affiliate-hero{padding:20px}
  .affiliate-link-builder{flex-direction:column}
  .affiliate-copy-control{grid-template-columns:1fr}
  .affiliate-metric-grid{grid-template-columns:1fr 1fr;gap:10px}
  .affiliate-metric{padding:16px;min-height:108px}
  .affiliate-metric>strong{font-size:20px}
  .affiliate-funnel-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .affiliate-stat-arrow{display:none}
  .affiliate-funnel-stats strong{font-size:22px}
  .affiliate-history-head{align-items:flex-start;flex-direction:column}
  .affiliate-filter{width:100%}
}

/* =========================================================
   REVALY AFFILIATE 1.0D2
   Earnings Card Visual Recovery
   ========================================================= */
body.account-center-light .affiliate-metric-highlight{
  background:linear-gradient(145deg,#0d326c,#145ab7);
  border-color:#0f4b9b;
  box-shadow:
    0 18px 42px rgba(13,50,108,.15),
    0 2px 7px rgba(15,23,42,.025);
}
body.account-center-light .affiliate-metric-highlight>span,
body.account-center-light .affiliate-metric-highlight>small{
  color:#cddcf2;
}
body.account-center-light .affiliate-metric-highlight>strong{
  color:#fff;
}


/* =========================================================
   REVALY AFFILIATE 1.0E2
   Withdrawal Request Runtime & Affiliate UX
   ========================================================= */

.affiliate-metric-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.affiliate-payout-section{margin-top:24px}
.affiliate-payout-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;margin-bottom:14px}
.affiliate-payout-balance-card,.affiliate-bank-card{min-height:300px}
.affiliate-payout-money-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.affiliate-payout-money-row>div{border:1px solid #e0e8f2;background:#f8fbff;border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:5px}
.affiliate-payout-money-row span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#718198;font-weight:800}
.affiliate-payout-money-row strong{font-size:22px;color:#123a78}
.affiliate-payout-progress{margin:8px 0 16px}
.affiliate-payout-progress-track{height:9px;border-radius:999px;background:#e8eef6;overflow:hidden}
.affiliate-payout-progress-bar{height:100%;width:0;background:linear-gradient(90deg,#155fc7,#4b8ee7);border-radius:999px;transition:width .25s ease}
.affiliate-payout-progress .small{margin-top:7px}
.affiliate-payout-request-btn{width:100%;min-height:44px;margin-top:10px}
.affiliate-payout-flow-note{line-height:1.55;margin:12px 0 0}
.affiliate-inline-status{min-height:18px;margin-top:8px}
.affiliate-open-withdrawal{display:grid;grid-template-columns:1.25fr .75fr .7fr;gap:10px;border:1px solid #d9e5f3;background:#f6faff;border-radius:13px;padding:12px;margin:12px 0}
.affiliate-open-withdrawal>div{display:flex;flex-direction:column;gap:4px}
.affiliate-open-withdrawal span:not(.affiliate-status){font-size:9.5px;text-transform:uppercase;letter-spacing:.45px;color:#7a8aa0;font-weight:800}
.affiliate-open-withdrawal strong{font-size:12px;color:#18345e}
.affiliate-small-btn{min-height:34px;padding:0 11px;font-size:11px}
.affiliate-bank-summary{margin-top:18px}
.affiliate-empty-inline{border:1px dashed #d6e0ec;background:#fbfdff;border-radius:12px;padding:18px;text-align:center;color:#8694a6;font-size:12px}
.affiliate-bank-row{display:grid;grid-template-columns:.8fr 1.2fr 1fr;gap:10px}
.affiliate-bank-row>div{border:1px solid #e0e8f2;background:#f8fbff;border-radius:12px;padding:13px;display:flex;flex-direction:column;gap:4px;min-width:0}
.affiliate-bank-row span{font-size:9.5px;color:#7b8ca1;text-transform:uppercase;letter-spacing:.45px;font-weight:800}
.affiliate-bank-row strong{font-size:12px;color:#19375e;overflow-wrap:anywhere}
.affiliate-bank-verification{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.affiliate-bank-form{display:grid;gap:12px;margin-top:16px;border-top:1px solid #e5ecf4;padding-top:16px}
.affiliate-bank-form label{display:grid;gap:6px}
.affiliate-bank-form label>span{font-size:10.5px;font-weight:800;color:#60738e}
.affiliate-bank-form input{border:1px solid #d7e1ee;background:#fff;color:#18345e;border-radius:10px;min-height:42px;padding:0 12px;font:inherit;font-size:12px;outline:none}
.affiliate-bank-form input:focus{border-color:#7aa7df;box-shadow:0 0 0 3px rgba(21,95,199,.08)}
.affiliate-bank-form-actions{display:flex;gap:8px}
.affiliate-withdrawal-history-card{margin-top:14px}
.affiliate-withdrawal-history-head{padding:14px 16px;border-bottom:1px solid #e3eaf3;display:flex;align-items:center;justify-content:space-between}
.affiliate-withdrawal-history-head>div{display:flex;flex-direction:column;gap:2px}
.affiliate-withdrawal-table{min-width:980px}
.affiliate-mini-action{min-height:30px;padding:0 10px;font-size:10px}
.affiliate-table-helper{margin-top:5px;font-size:9.5px;color:#9a5b5b;max-width:220px}
.affiliate-status.status-processing{background:#eef4ff;color:#315f9f;border:1px solid #cfdcf0}
.affiliate-status.status-failed,.affiliate-status.status-rejected,.affiliate-status.status-reversed{background:#fff0f0;color:#994444;border:1px solid #efcaca}
.affiliate-status.status-cancelled{background:#f2f4f7;color:#697586;border:1px solid #dfe3e8}

@media(max-width:1100px){
  .affiliate-metric-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:860px){
  .affiliate-payout-grid{grid-template-columns:1fr}
  .affiliate-bank-row{grid-template-columns:1fr}
  .affiliate-open-withdrawal{grid-template-columns:1fr}
}

@media(max-width:680px){
  .affiliate-metric-grid-five{grid-template-columns:1fr 1fr}
  .affiliate-payout-money-row{grid-template-columns:1fr}
  .affiliate-bank-form-actions{flex-direction:column}
}

/* REVALY AFFILIATE 1.0E3B — Xendit recipient address contract */
.affiliate-address-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.affiliate-address-wide{grid-column:1/-1}
.affiliate-provider-warning{color:#9a6b16;font-weight:700}
@media(max-width:680px){.affiliate-address-grid{grid-template-columns:1fr}.affiliate-address-wide{grid-column:auto}}

/* REVALY AFFILIATE 1.1A — Dynamic Bank & Payout Fee UX */
.affiliate-fee-breakdown{
  margin:14px 0;
  padding:14px;
  border:1px solid #dce5f2;
  border-radius:14px;
  background:#f9fbff;
}
.affiliate-fee-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.affiliate-fee-title strong{font-size:14px;color:#132b52}
.affiliate-fee-title span{font-size:11px;color:#6d7f9b;text-align:right}
.affiliate-fee-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:5px 0;
  font-size:12px;
}
.affiliate-fee-row.muted-row{color:#6f809d}
.affiliate-fee-row.debt-row{color:#8a5c00}
.affiliate-fee-row.net-row{
  margin-top:6px;
  padding:10px 0 2px;
  font-size:14px;
  color:#0d4a8b;
}
.affiliate-fee-row.net-row strong{font-size:18px}
.affiliate-fee-divider{height:1px;background:#dce5f2;margin:7px 0}
.affiliate-fee-note{margin:10px 0 0;line-height:1.45}
.affiliate-history-net{color:#0f5ea8;font-weight:700}
#payoutBankCode option:disabled{color:#9aa8bb}
@media(max-width:640px){
  .affiliate-fee-title{align-items:flex-start;flex-direction:column}
  .affiliate-fee-title span{text-align:left}
}