@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--navy:#06163a;--blue:#1261ff;--soft:#f4f8ff;--line:#dbe6f8;--muted:#5d6f91;--green:#17b978;--red:#ef4444}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--navy);background:linear-gradient(135deg,#f7fbff,#edf4ff)}a{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:10px 15px;font-weight:800;font-size:13px;cursor:pointer}.btn-primary{background:var(--blue);color:#fff}.btn-green{background:var(--green);color:#fff}.btn-secondary{background:#eaf2ff;color:var(--blue)}.btn-danger{background:var(--red);color:#fff}.btn.full{width:100%;margin-top:9px}.kicker{color:var(--blue);font-weight:900;letter-spacing:.06em;font-size:11px;text-transform:uppercase}.muted{color:var(--muted)}.big{font-size:15px;line-height:1.55}
.portal-body{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:50px 18px}.auth-card{width:min(520px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 24px 70px rgba(6,22,58,.08)}.auth-logo{text-align:center;font-size:42px;font-weight:900;margin-bottom:22px}.auth-logo span{color:var(--blue)}.auth-card h1{text-align:center;margin:0;font-size:30px}.auth-card p{text-align:center;color:var(--muted);line-height:1.55}.auth-card label{display:block;margin:14px 0 7px;font-weight:800;font-size:14px}.auth-card input{width:100%;padding:14px 16px;border:1px solid #c8d8f3;border-radius:14px;font-size:15px}.auth-card .btn{width:100%;margin-top:18px}.auth-links{text-align:center;margin-top:18px;color:var(--muted)}.auth-links a{color:var(--blue);font-weight:800}
.request-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:34px 18px}.request-card{width:min(900px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:0 24px 80px rgba(6,22,58,.08)}.clean-request{max-width:860px}.success-center{text-align:center;max-width:680px;margin:0 auto 22px}.success-mark{width:52px;height:52px;border-radius:16px;background:#eafff4;color:#0b8f55;display:grid;place-items:center;font-size:28px;font-weight:900;margin:0 auto 14px}.request-card h1{margin:8px 0;font-size:31px;letter-spacing:-.04em}.request-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.info-box{background:#f2f7ff;border:1px solid var(--line);border-radius:16px;padding:15px}.info-box span{display:block;color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase}.info-box strong{display:block;margin-top:6px;font-size:17px}.process-box{background:#fbfdff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:20px}.process-box h2{margin:0 0 14px;font-size:21px}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.process-steps div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}.process-steps b{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin-bottom:10px}.process-steps span{color:var(--muted);font-size:13px;line-height:1.45}.request-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.request-actions.center{justify-content:center}.note-card{margin-top:20px;background:#eef6ff;border:1px solid #bcd7ff;border-radius:16px;padding:14px 16px;line-height:1.5;color:#183968}.note-card strong{color:#0b2a5b}
.dashboard-body{display:flex;min-height:100vh}.sidebar{width:230px;background:linear-gradient(180deg,#041533,#0a3270);color:#fff;padding:24px 18px;position:fixed;inset:0 auto 0 0}.side-logo{font-size:34px;font-weight:900;letter-spacing:-.06em;display:inline-block;margin-bottom:24px}.side-logo span{color:var(--blue)}.sidebar nav{display:flex;flex-direction:column;gap:7px}.sidebar nav a{padding:11px 13px;border-radius:13px;font-weight:800;color:#d9e8ff;font-size:14px}.sidebar nav a.active,.sidebar nav a:hover{background:rgba(255,255,255,.13);color:#fff}.side-ref{margin-top:30px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);border-radius:16px;padding:14px}.side-ref small,.side-ref span{display:block;color:#bdd2f5;font-weight:800;font-size:12px}.side-ref strong{display:block;font-size:19px;margin:6px 0;overflow:hidden;text-overflow:ellipsis}
.dash{margin-left:230px;padding:28px 34px 50px;width:calc(100% - 230px)}.dash-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:22px}.dash-header h1{margin:8px 0;font-size:32px;letter-spacing:-.04em}.dash-header p{margin:0;color:var(--muted);font-size:15px}.header-actions{display:flex;gap:10px}
.top-dashboard-grid{display:grid;grid-template-columns:1fr 2.6fr;gap:18px;margin-bottom:20px}.premium-status-card,.premium-locked-card,.panel{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 54px rgba(6,22,58,.055)}.premium-status-card{padding:22px}.metric-label{display:block;color:var(--muted);font-weight:900;text-transform:uppercase;font-size:11px}.premium-status-card h2,.premium-locked-card h2{font-size:25px;line-height:1.12;margin:10px 0 10px;letter-spacing:-.04em}.premium-status-card p,.premium-locked-card p{color:var(--muted);font-size:14px;line-height:1.5}.status-pill{display:inline-flex;margin-top:12px;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900}.status-pill.pending{background:#fff4df;color:#a96a00}.status-pill.active{background:#e7fff5;color:#0b8f55}.premium-locked-card{padding:22px;display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:center}.locked-visual{background:linear-gradient(135deg,#f8fbff,#eef5ff);border:1px solid #d7e6ff;border-radius:18px;padding:16px}.visual-top,.visual-row{display:flex;justify-content:space-between;align-items:center;color:#607197;font-size:12px;font-weight:800}.visual-top b{color:#1261ff}.fake-chart{height:86px;display:flex;align-items:flex-end;gap:10px;padding:12px 4px}.fake-chart i{flex:1;border-radius:999px;background:linear-gradient(180deg,#1261ff,#16c5a8);opacity:.75}.visual-row{border-top:1px solid #dbe6f8;padding-top:10px;margin-top:8px}.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}.panel{padding:20px}.panel h2{margin:0 0 9px;font-size:22px;letter-spacing:-.03em}.panel p{color:var(--muted);line-height:1.55;font-size:14px}.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.badge{background:#eaf2ff;color:var(--blue);border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900}.premium-empty{background:linear-gradient(135deg,#f9fcff,#f1f6ff);border:1px dashed #bcd7ff;border-radius:18px;padding:24px;position:relative;overflow:hidden}.empty-chart-line{height:66px;border-radius:16px;background:linear-gradient(135deg,rgba(18,97,255,.12),rgba(22,197,168,.12));margin-bottom:18px;position:relative}.empty-chart-line:after{content:"";position:absolute;left:22px;right:22px;top:34px;height:4px;border-radius:999px;background:linear-gradient(90deg,#1261ff,#16c5a8);transform:skewY(-8deg)}.mini-metrics,.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.mini-metrics div,.ref-grid div{background:#f4f8ff;border:1px solid var(--line);border-radius:15px;padding:14px}.mini-metrics b,.ref-grid strong{display:block;font-size:20px;margin-bottom:4px}.mini-metrics span,.ref-grid span{color:var(--muted);font-weight:800;font-size:11px}.plan-actions{margin-top:17px}.copy-input{width:100%;border:1px solid #c8d8f3;border-radius:14px;padding:13px;font-size:13px}.template-label{display:block;font-weight:900;margin:16px 0 8px}.dashboard-cta{color:#1261ff!important;font-weight:900}
@media(max-width:980px){.sidebar{position:relative;width:100%;inset:auto}.dashboard-body{display:block}.dash{margin-left:0;width:100%;padding:24px 16px}.top-dashboard-grid,.dash-grid,.request-grid,.process-steps,.premium-locked-card{grid-template-columns:1fr}.mini-metrics,.ref-grid{grid-template-columns:1fr 1fr}.dash-header{flex-direction:column}}


/* v15 premium referral + metrics */
.active-metrics-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 18px 54px rgba(6,22,58,.055);
  padding:20px;
}
.metric-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.metric-strip div{
  background:linear-gradient(135deg,#f8fbff,#eef5ff);
  border:1px solid #dbe6f8;
  border-radius:16px;
  padding:16px;
}
.metric-strip span{
  display:block;
  color:var(--muted);
  font-weight:900;
  font-size:11px;
  text-transform:uppercase;
}
.metric-strip strong{
  display:block;
  font-size:26px;
  letter-spacing:-.04em;
  margin:8px 0 4px;
}
.metric-strip small,.sync-note{
  color:var(--muted);
  font-weight:700;
}
.positive{color:#17b978}
.negative{color:#ef4444}
.premium-mini div{
  background:linear-gradient(135deg,#f8fbff,#eef5ff);
}
.premium-referral{
  overflow:hidden;
  position:relative;
}
.premium-referral:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,#1261ff,#18c7a7);
}
.referral-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:20px;
}
.referral-head h2{
  font-size:24px;
  margin:8px 0;
  letter-spacing:-.04em;
}
.referral-head p{
  margin:0;
  color:var(--muted);
}
.referral-code-card{
  min-width:220px;
  background:linear-gradient(135deg,#06163a,#1261ff);
  color:white;
  border-radius:18px;
  padding:18px;
  box-shadow:0 18px 40px rgba(18,97,255,.22);
}
.referral-code-card span{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  font-weight:900;
  opacity:.75;
}
.referral-code-card strong{
  display:block;
  font-size:24px;
  margin-top:8px;
  letter-spacing:.02em;
}
.premium-ref-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.ref-stat{
  background:#f7fbff;
  border:1px solid #dbe6f8;
  border-radius:16px;
  padding:16px;
}
.ref-stat span{
  display:block;
  color:var(--muted);
  font-weight:900;
  font-size:11px;
  text-transform:uppercase;
}
.ref-stat strong{
  display:block;
  font-size:24px;
  letter-spacing:-.04em;
  margin:7px 0;
}
.ref-stat small{
  color:var(--muted);
  line-height:1.35;
}
.ref-stat.money{
  background:linear-gradient(135deg,#f6fbff,#eef7ff);
}
.ref-link-box{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  background:#f8fbff;
  border:1px solid #dbe6f8;
  border-radius:16px;
  padding:14px 16px;
}
.ref-link-box span{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  font-weight:900;
}
.ref-link-box strong{
  display:block;
  font-size:13px;
  word-break:break-all;
  margin-top:4px;
}
@media(max-width:980px){
  .metric-strip,.premium-ref-grid{grid-template-columns:1fr}
  .referral-head,.ref-link-box{flex-direction:column;align-items:stretch}
}
/* ZibX mobile auth page fix */
.auth-logo,
.auth-logo a,
.auth-brand,
.brand,
.footer-brand {
  text-decoration: none !important;
}

.auth-wrap,
.portal-auth,
.auth-page,
.auth-shell {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.auth-card {
  max-width: 560px !important;
  margin: 40px auto !important;
  padding: 34px !important;
  border-radius: 24px !important;
  background: #fff !important;
  border: 1px solid #dbe6f8 !important;
  box-shadow: 0 24px 70px rgba(6,22,58,.08) !important;
}

.auth-card form {
  display: block !important;
  width: 100% !important;
}

.auth-card label {
  display: block !important;
  width: 100% !important;
  margin: 14px 0 7px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #06163a !important;
}

.auth-card input,
.auth-card select,
.auth-card textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  border: 1px solid #c8d8f3 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  color: #06163a !important;
  background: #fff !important;
}

.auth-card .btn,
.auth-card button,
.auth-card input[type="submit"] {
  width: 100% !important;
  margin-top: 18px !important;
  padding: 15px 18px !important;
  border-radius: 14px !important;
  background: #1261ff !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: 0 !important;
}

.auth-links,
.auth-card p,
.auth-card .small {
  text-align: center !important;
}

@media (max-width: 700px) {
  body {
    overflow-x: hidden !important;
  }

  .auth-card {
    width: calc(100% - 32px) !important;
    margin: 24px auto !important;
    padding: 24px 18px !important;
    border-radius: 22px !important;
  }

  .auth-card h1,
  .auth-card h2 {
    font-size: 34px !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  .auth-card p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .auth-card .form-row,
  .auth-card .grid,
  .auth-card .two-col,
  .auth-card .name-row {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .auth-card label,
  .auth-card input,
  .auth-card select,
  .auth-card textarea {
    float: none !important;
    clear: both !important;
  }
}