:root{
  --bg:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#7c3aed;
  --brand2:#0ea5e9;
  --card:#ffffff;
}

.product-links { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.product-link-card { padding: 1rem; border: 1px solid rgba(148,163,184,.35); border-radius: 16px; background: rgba(255,255,255,.72); }
.product-link-card h2 { margin: .25rem 0; font-size: 1.15rem; }
.product-link-card p { margin: .25rem 0 .9rem; color: #64748b; }
.product-link-card .copy-row + label { display: block; margin-top: .75rem; }
.product-link-card.coming-soon { border-style: dashed; }

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left,rgba(124,58,237,.14),transparent 32rem),
    radial-gradient(circle at bottom right,rgba(14,165,233,.12),transparent 30rem),
    var(--bg);
  color:var(--ink);
}

a{color:inherit}

.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2rem;
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:3rem 1.25rem;
}

.hero-card,.form-card,.card,.dash-hero,.stat{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(226,232,240,.9);
  border-radius:2rem;
  box-shadow:0 24px 70px rgba(15,23,42,.08);
  backdrop-filter:blur(16px);
}

.hero-card{padding:3rem}

.hero-card h1{
  font-size:clamp(2.4rem,6vw,4.8rem);
  letter-spacing:-.06em;
  line-height:.95;
  margin:1rem 0;
}

.hero-card p{
  font-size:1.12rem;
  line-height:1.75;
  color:var(--muted);
}

.badge{
  display:inline-flex;
  border-radius:999px;
  padding:.45rem .75rem;
  background:rgba(124,58,237,.10);
  color:#6d28d9;
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.5rem;
}

.hero-points span{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:.55rem .75rem;
  color:#334155;
  font-weight:700;
}

.form-card{padding:1.35rem}

.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#eef2ff;
  border-radius:1rem;
  padding:.35rem;
  margin-bottom:1rem;
}

.tab{
  border:0;
  background:transparent;
  border-radius:.8rem;
  padding:.8rem;
  font-weight:900;
  cursor:pointer;
  color:#475569;
}

.tab.active{
  background:#fff;
  color:#0f172a;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.panel{display:none}
.panel.active{display:block}

label{
  display:block;
  font-size:.85rem;
  font-weight:800;
  color:#334155;
  margin:.9rem 0;
}

input,textarea{
  display:block;
  width:100%;
  margin-top:.42rem;
  border:1px solid #cbd5e1;
  border-radius:1rem;
  background:#fff;
  padding:.95rem 1rem;
  font:inherit;
  color:#0f172a;
}

textarea{min-height:82px;resize:vertical}

.grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

.btn{
  width:100%;
  border:0;
  border-radius:1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  padding:1rem 1.15rem;
  font-weight:950;
  font-size:1rem;
  cursor:pointer;
  box-shadow:0 16px 36px rgba(124,58,237,.22);
}

.fine,.muted{
  color:var(--muted);
  line-height:1.65;
}

.alert{
  border-radius:1rem;
  padding:1rem;
  margin-bottom:1rem;
  font-weight:700;
}

.alert.error{
  background:#fee2e2;
  border:1px solid #fecaca;
  color:#991b1b;
}

.alert.success{
  background:#dcfce7;
  border:1px solid #86efac;
  color:#166534;
}

.dash-header{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.25rem;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}

.dash-header div{
  display:flex;
  gap:.75rem;
  align-items:center;
}

.dash-header span{
  color:var(--muted);
}

.dash-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:2rem 1.25rem 5rem;
}

.dash-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:2rem;
  margin-bottom:1.5rem;
}

.dash-hero h1{
  font-size:clamp(2rem,5vw,4rem);
  line-height:1;
  letter-spacing:-.05em;
  margin:.8rem 0;
}

.code-box{
  background:#f8fafc;
  border:1px solid var(--line);
  border-radius:1.5rem;
  padding:1rem;
}

.copy-row{
  display:flex;
  gap:.5rem;
}

.copy-row input{
  margin:0;
}

.copy-row button{
  border:0;
  border-radius:1rem;
  background:#0f172a;
  color:#fff;
  padding:0 1rem;
  font-weight:900;
  cursor:pointer;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:1.5rem;
}

.stat{padding:1.35rem}

.stat span{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-bottom:.5rem;
}

.stat strong{
  font-size:2rem;
  letter-spacing:-.04em;
}

.card{
  padding:1.5rem;
  margin-bottom:1.25rem;
}

.table-wrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  border-bottom:1px solid var(--line);
  padding:.9rem;
  text-align:left;
  vertical-align:top;
}

th{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
}

td span{
  color:#64748b;
}

@media(max-width:900px){
  .auth-shell,.dash-hero,.stats-grid{
    grid-template-columns:1fr;
  }

  .grid.two{
    grid-template-columns:1fr;
    gap:0;
  }

  .hero-card{
    padding:2rem;
  }
}

/* === Affiliate commission dashboard === */

.commission-note {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(124, 58, 237, .24);
  background: rgba(124, 58, 237, .08);
}

.commission-note strong,
.commission-note span {
  display: block;
}

.commission-note strong {
  color: #0f172a;
  margin-bottom: .35rem;
}

.commission-note span {
  color: #475569;
  font-size: .9rem;
  line-height: 1.55;
}

.commission-stat {
  border-color: rgba(124, 58, 237, .28);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(14, 165, 233, .05)),
    rgba(255, 255, 255, .88);
}

.commission-stat small {
  display: block;
  color: #64748b;
  margin-top: .25rem;
  font-weight: 700;
}

@media (min-width: 901px) {
  .stats-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* === Dookun Affiliate Ladder === */

.ladder-mini{
  margin-top:1.5rem;
  border:1px solid rgba(124,58,237,.2);
  background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(14,165,233,.08));
  border-radius:1.5rem;
  padding:1.25rem;
}

.ladder-mini h2{
  margin:.2rem 0 1rem;
  letter-spacing:-.035em;
}

.ladder-mini-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.7rem;
}

.ladder-mini-grid div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:1rem;
  padding:.85rem;
}

.ladder-mini-grid strong,
.ladder-mini-grid span,
.ladder-mini-grid small{
  display:block;
}

.ladder-mini-grid span{
  font-size:1.35rem;
  font-weight:950;
  color:#6d28d9;
  margin:.25rem 0;
}

.tier-card{
  margin-top:1rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}

.tier-card > div{
  border:1px solid rgba(124,58,237,.2);
  border-radius:1rem;
  background:rgba(124,58,237,.06);
  padding:1rem;
}

.tier-card strong,
.tier-card small,
.tier-kicker{
  display:block;
}

.tier-kicker{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  font-weight:900;
  color:#6d28d9;
  margin-bottom:.35rem;
}

.tier-card strong{
  font-size:1.15rem;
}

.card-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
}

.ladder-grid{
  margin-top:1.25rem;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
}

.ladder-tier{
  border:1px solid var(--line);
  background:#fff;
  border-radius:1.25rem;
  padding:1rem;
  position:relative;
  overflow:hidden;
}

.ladder-tier.current{
  border-color:#7c3aed;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(14,165,233,.08));
  box-shadow:0 18px 42px rgba(124,58,237,.13);
}

.ladder-tier span,
.ladder-tier strong,
.ladder-tier em,
.ladder-tier small{
  display:block;
}

.ladder-tier span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  font-weight:900;
}

.ladder-tier strong{
  margin:.35rem 0;
  font-size:1.05rem;
}

.ladder-tier em{
  font-size:2rem;
  font-style:normal;
  font-weight:950;
  color:#6d28d9;
  letter-spacing:-.04em;
}

.ladder-tier small{
  margin:.25rem 0 .65rem;
  color:#334155;
  font-weight:800;
}

.ladder-tier p{
  margin:0;
  color:#64748b;
  line-height:1.55;
  font-size:.9rem;
}

@media(max-width:900px){
  .ladder-mini-grid,
  .ladder-grid{
    grid-template-columns:1fr 1fr;
  }

  .tier-card{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .ladder-mini-grid,
  .ladder-grid{
    grid-template-columns:1fr;
  }
}

/* === Affiliate QR Code === */

.affiliate-qr-card {
  overflow: hidden;
}

.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 320px;
  gap: 1.5rem;
  align-items: center;
}

.qr-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.qr-box {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 1.5rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.qr-box img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto .8rem;
  border-radius: 1rem;
  background: #fff;
}

.qr-box strong,
.qr-box small {
  display: block;
}

.qr-box strong {
  font-weight: 950;
  letter-spacing: .02em;
}

.qr-box small {
  margin-top: .35rem;
  color: #64748b;
  font-size: .78rem;
  word-break: break-all;
}

.fine {
  margin-top: 1rem;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .qr-layout {
    grid-template-columns: 1fr;
  }

  .qr-box {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* === Affiliate QR Code layout repair === */

.affiliate-qr-card {
  overflow: hidden;
}

.affiliate-qr-card .qr-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) 320px;
  gap: 1.5rem;
  align-items: center;
}

.affiliate-qr-card .qr-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.affiliate-qr-card .qr-box {
  display: block !important;
  border: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 1.5rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.affiliate-qr-card .qr-box img {
  display: block !important;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto .8rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.affiliate-qr-card .qr-box strong,
.affiliate-qr-card .qr-box small {
  display: block;
}

.affiliate-qr-card .qr-box strong {
  font-weight: 950;
  letter-spacing: .02em;
}

.affiliate-qr-card .qr-box small {
  margin-top: .35rem;
  color: #64748b;
  font-size: .78rem;
  word-break: break-all;
}

.affiliate-qr-card .fine {
  margin-top: 1rem;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .affiliate-qr-card .qr-layout {
    grid-template-columns: 1fr !important;
  }

  .affiliate-qr-card .qr-box {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* === Affiliate QR final repair === */

.affiliate-qr-card {
  overflow: hidden;
}

.affiliate-qr-card .qr-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) 320px;
  gap: 1.5rem;
  align-items: center;
}

.affiliate-qr-card .qr-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.affiliate-qr-card .qr-box {
  display: block !important;
  border: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-radius: 1.5rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.affiliate-qr-card .qr-box img {
  display: block !important;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto .8rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.affiliate-qr-card .qr-box strong,
.affiliate-qr-card .qr-box small {
  display: block;
}

.affiliate-qr-card .qr-box strong {
  font-weight: 950;
  letter-spacing: .02em;
}

.affiliate-qr-card .qr-box small {
  margin-top: .35rem;
  color: #64748b;
  font-size: .78rem;
  word-break: break-all;
}

.affiliate-qr-card .fine {
  margin-top: 1rem;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .affiliate-qr-card .qr-layout {
    grid-template-columns: 1fr !important;
  }

  .affiliate-qr-card .qr-box {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* === QR direct image fallback === */

.affiliate-qr-card .qr-fallback {
  display: none;
  padding: 1rem;
  border-radius: 1rem;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-weight: 800;
  margin-bottom: .8rem;
}

.affiliate-qr-card .qr-error img {
  display: none !important;
}

.affiliate-qr-card .qr-error .qr-fallback {
  display: block;
}

.affiliate-qr-card .qr-box img {
  min-height: 220px;
  object-fit: contain;
}

/* === Human-friendly affiliate landing ladder === */

.affiliate-ladder-panel {
  margin-top: 1.7rem;
  padding: 1.45rem;
}

.ladder-intro {
  margin-bottom: 1.15rem;
}

.ladder-eyebrow {
  display: inline-flex;
  margin-bottom: .45rem;
  color: #6d28d9;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ladder-intro h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.ladder-intro p {
  margin: 0;
  max-width: 48rem;
  font-size: 1rem;
  line-height: 1.65;
}

.affiliate-ladder-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.affiliate-tier-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(124, 58, 237, .16);
  border-radius: 1.2rem;
  padding: 0;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.affiliate-tier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, .42);
  box-shadow: 0 16px 38px rgba(124, 58, 237, .12);
}

.affiliate-tier-card summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(8rem, .8fr);
  gap: .9rem;
  align-items: center;
}

.affiliate-tier-card summary::-webkit-details-marker {
  display: none;
}

.affiliate-tier-card summary::after {
  content: "+";
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  background: rgba(124, 58, 237, .1);
  color: #6d28d9;
  font-weight: 950;
}

.affiliate-tier-card[open] summary::after {
  content: "−";
}

.affiliate-tier-card .tier-topline {
  color: #0f172a;
  font-weight: 950;
  line-height: 1.1;
}

.affiliate-tier-card strong {
  color: #6d28d9;
  font-size: 1.65rem;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.affiliate-tier-card small {
  color: #475569;
  font-weight: 800;
  line-height: 1.2;
}

.affiliate-tier-card p {
  margin: 0;
  padding: 0 1rem 1rem;
  color: #64748b;
  font-size: .95rem;
  line-height: 1.6;
}

.hero-card h1 {
  max-width: 9.5ch;
}

.hero-card p strong {
  color: #334155;
}

@media (min-width: 760px) {
  .affiliate-ladder-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .affiliate-tier-card summary {
    grid-template-columns: 1fr auto;
  }

  .affiliate-tier-card strong,
  .affiliate-tier-card small {
    grid-column: 1 / -1;
  }

  .affiliate-tier-card summary::after {
    grid-row: 1;
    grid-column: 2;
  }
}


/* === Affiliate landing layout balance === */

body {
  min-height: 100vh;
}

.auth-shell,
.affiliate-auth-shell,
.page-shell,
main {
  align-items: flex-start !important;
}

.auth-grid,
.affiliate-grid,
.hero-auth-grid,
.landing-grid {
  align-items: flex-start !important;
}

/* Bring the form higher so the two sides feel balanced */
.auth-card,
.form-card,
.signup-card,
.login-card {
  margin-top: 1.8rem !important;
}

/* Reduce the visual weight of the left headline */
.hero-card h1 {
  max-width: 10.5ch;
  font-size: clamp(3.4rem, 5.8vw, 5.6rem) !important;
  line-height: .96 !important;
  letter-spacing: -.075em !important;
}

/* Keep the left card powerful, but not overpowering */
.hero-card {
  padding-top: clamp(2.2rem, 4vw, 3.2rem) !important;
  padding-bottom: clamp(2.2rem, 4vw, 3.2rem) !important;
}

/* Make intro copy easier to scan */
.hero-card > p {
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Keep the chips tidy */
.hero-points {
  gap: .65rem !important;
}

.hero-points span {
  padding: .52rem .8rem !important;
  font-size: .9rem !important;
}

/* Make the ladder feel lighter and less dominant */
.affiliate-ladder-panel {
  margin-top: 1.35rem !important;
  padding: 1.25rem !important;
  max-height: 27rem;
  overflow: auto;
  scrollbar-width: thin;
}

.affiliate-ladder-panel::-webkit-scrollbar {
  width: 8px;
}

.affiliate-ladder-panel::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, .35);
  border-radius: 999px;
}

.ladder-intro h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
}

.ladder-intro p {
  font-size: .95rem !important;
  line-height: 1.55 !important;
}

.affiliate-tier-card summary {
  padding: .85rem 1rem !important;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(7rem, .75fr) auto !important;
}

.affiliate-tier-card strong {
  font-size: 1.45rem !important;
}

.affiliate-tier-card p {
  font-size: .9rem !important;
}

/* Give the right form a stronger presence */
.auth-card,
.form-card,
.signup-card,
.login-card {
  box-shadow: 0 28px 80px rgba(15, 23, 42, .12) !important;
}

/* Desktop: make the two columns feel more equal */
@media (min-width: 980px) {
  .auth-shell,
  .affiliate-auth-shell,
  .page-shell,
  main {
    padding-top: 1.6rem !important;
  }

  .auth-grid,
  .affiliate-grid,
  .hero-auth-grid,
  .landing-grid {
    grid-template-columns: minmax(420px, .96fr) minmax(420px, .9fr) !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
  }
}

/* Mobile: remove scroll panel and let content flow naturally */
@media (max-width: 979px) {
  .hero-card h1 {
    max-width: 100%;
    font-size: clamp(2.8rem, 13vw, 4rem) !important;
  }

  .affiliate-ladder-panel {
    max-height: none;
    overflow: visible;
  }

  .auth-card,
  .form-card,
  .signup-card,
  .login-card {
    margin-top: 0 !important;
  }
}