/* ================================================================ AFFILIATE AREA */

.affiliate-shell{max-width:520px;margin:0 auto;padding:60px 26px 80px}
.affiliate-shell-wide{max-width:920px;margin:0 auto;padding:60px 26px 80px}

/* ---- form card (register / login / payout / password change) ---- */
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:36px 32px;box-shadow:0 34px 60px -40px rgba(15,35,70,.4)}
.form-card h2{font-size:24px;margin-bottom:24px;text-align:center}
.form-card label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;margin-top:2px}
.form-card input[type="email"],.form-card input[type="password"],.form-card input[type="text"],.form-card select{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:12px;
  font-family:var(--sans);font-size:14.5px;margin-bottom:18px;background:var(--bg)
}
.form-card input:focus,.form-card select:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
.form-card .redirect{text-align:center;font-size:13.5px;color:var(--muted);margin-top:18px}
.form-card .redirect a{color:var(--primary);font-weight:600}

.notification{padding:12px 16px;border-radius:12px;font-size:13.5px;margin-bottom:18px}
.notification.red{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.notification.green{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}

/* ---- /affiliate public landing page ---- */
.affiliate-perks{list-style:none;margin:0 auto 32px;padding:0;max-width:600px; text-align:center;}
.affiliate-perks li{font-size:15px;color:var(--text);padding-left:26px;position:relative;margin-bottom:12px;line-height:1.5}
.affiliate-cta{margin:0 0 12px; text-align:center;}

/* ---- dashboard / account settings shared — .affiliate-link-box and its .content span are read by affiliate.js, do not rename ---- */
.affiliate-link-row{display:flex;justify-content:flex-end;margin-bottom:24px}
.affiliate-link-box{display:inline-flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:13.5px}
.affiliate-link-box .title{padding:10px 14px;background:var(--bg);color:var(--muted);font-weight:600;border-right:1px solid var(--border)}
.affiliate-link-box .content{padding:10px 14px;font-family:var(--mono);color:var(--text)}
.affiliate-link-box .action{display:flex;align-items:center;padding:0 14px;cursor:pointer;color:var(--primary);border-left:1px solid var(--border);background:none;border-top:none;border-right:none;border-bottom:none;font:inherit}
.affiliate-link-box .action:hover{background:var(--bg)}
@media(max-width:560px){.affiliate-link-box .title{display:none}}

.affiliate-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.affiliate-stats .card{align-items:center;text-align:center;padding:24px 16px}
.affiliate-stats .metric{flex-direction:column;gap:4px}
.affiliate-stats .metric b{font-size:28px}
@media(max-width:640px){.affiliate-stats{grid-template-columns:1fr}}

.affiliate-payout-empty{text-align:center;padding:50px 20px}
.affiliate-payout-empty img{width:160px;margin:0 auto 18px}
.affiliate-payout-empty h3{font-size:18px;margin-bottom:6px}
.affiliate-payout-empty p{color:var(--muted);font-size:14px}

@media(max-width:520px){
  .affiliate-shell{padding:40px 18px 60px}
  .affiliate-shell-wide{padding:40px 18px 60px}
  .form-card{padding:28px 22px}
}