:root{
  /* Logo 6-dot brand colors */
  --dot-cyan:#50bced;
  --dot-magenta:#b6258c;
  --dot-red:#f81725;
  --dot-orange:#f69433;
  --dot-yellow:#ffdf00;
  --dot-green:#c0d343;
  --cras-primary:#b6258c;
  --cras-dark:#1e293b;
  --brand-gradient:linear-gradient(90deg,var(--dot-cyan),var(--dot-magenta),var(--dot-red),var(--dot-orange),var(--dot-yellow),var(--dot-green));
}

*{font-family:'Poppins','Segoe UI',system-ui,sans-serif;}
body{background:#f4f6fb;}

/* ---- Top rainbow strip on brand gradient ---- */
.brand-strip{height:5px;background:var(--brand-gradient);}

/* ---- Navbar ---- */
.cras-navbar{background:linear-gradient(100deg,#1e1b4b,#4c1d6b,#831843);}
.cras-navbar .navbar-brand{display:flex;align-items:center;gap:.5rem;}
.navbar-logo{height:34px;width:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));}

/* ---- Logo dots (reusable colorful dot row) ---- */
.dot-row{display:inline-flex;gap:6px;align-items:center;}
.dot-row span{width:9px;height:9px;border-radius:50%;display:inline-block;}
.dot-row span:nth-child(1){background:var(--dot-cyan);}
.dot-row span:nth-child(2){background:var(--dot-magenta);}
.dot-row span:nth-child(3){background:var(--dot-red);}
.dot-row span:nth-child(4){background:var(--dot-orange);}
.dot-row span:nth-child(5){background:var(--dot-yellow);}
.dot-row span:nth-child(6){background:var(--dot-green);}

/* ---- Stat cards (attractive gradient border + colored icon) ---- */
.stat-card{
  border:none;border-radius:18px;position:relative;overflow:hidden;
  background:#fff;
  transition:transform .3s ease,box-shadow .3s ease;
}
.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-gradient);}
.stat-card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(182,37,140,.16);}
.stat-card .stat-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;}
.stat-card .stat-num{font-size:2rem;font-weight:700;line-height:1;}
/* colored icon variants */
.ic-cyan{background:linear-gradient(135deg,var(--dot-cyan),#2a9fd6);}
.ic-magenta{background:linear-gradient(135deg,var(--dot-magenta),#8a1f6d);}
.ic-red{background:linear-gradient(135deg,var(--dot-red),#c00);}
.ic-orange{background:linear-gradient(135deg,var(--dot-orange),#e07b1a);}
.ic-yellow{background:linear-gradient(135deg,var(--dot-yellow),#e0c000);color:#5a4a00 !important;}
.ic-green{background:linear-gradient(135deg,var(--dot-green),#9bb02f);}
.ic-dark{background:linear-gradient(135deg,#475569,#1e293b);}

/* ---- Auth pages ---- */
.auth-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;position:relative;overflow:hidden;
  background:linear-gradient(-45deg,#1e1b4b,#4c1d6b,#0e7490,#831843);
  background-size:400% 400%;animation:authBg 18s ease infinite;
}
@keyframes authBg{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.auth-wrapper .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4;z-index:0;}
.auth-wrapper .blob.b1{width:340px;height:340px;background:var(--dot-magenta);top:-100px;left:-80px;}
.auth-wrapper .blob.b2{width:300px;height:300px;background:var(--dot-cyan);bottom:-90px;right:-70px;}
.auth-card{
  max-width:420px;width:100%;border:none;border-radius:22px;position:relative;z-index:2;overflow:hidden;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--brand-gradient);}
.auth-logo{height:56px;margin-bottom:.4rem;}

/* ---- Forms / general cards ---- */
.form-card{border:none;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);}
.form-card::before,.card.shadow-sm{position:relative;}
.card{border-radius:16px;border:none;}
.card.shadow-sm{box-shadow:0 8px 24px rgba(30,27,75,.07)!important;}
.btn-primary{background:linear-gradient(100deg,var(--dot-magenta),#8a1f6d);border:none;}
.btn-primary:hover{background:linear-gradient(100deg,#8a1f6d,var(--dot-magenta));}
.btn-success{background:linear-gradient(100deg,var(--dot-green),#9bb02f);border:none;color:#3a4400;font-weight:600;}
.text-primary{color:var(--dot-magenta)!important;}
.badge.bg-primary{background:var(--dot-magenta)!important;}

/* ---- Tables ---- */
.table-responsive{border-radius:14px;}
.table thead th{white-space:nowrap;font-size:.8rem;text-transform:uppercase;letter-spacing:.3px;background:#faf5fb;}
.table td{vertical-align:middle;font-size:.9rem;}

/* ---- OTP / happy code inputs ---- */
.otp-input{letter-spacing:.6rem;font-size:1.4rem;text-align:center;font-weight:600;}
.dev-otp{background:#fff8e1;border:1px dashed var(--dot-orange);color:#8a5a00;border-radius:10px;padding:.6rem 1rem;font-weight:600;}

/* ---- Step wizard dots use brand colors ---- */
.step-badge{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;}

@media(max-width:576px){
  .stat-card .stat-num{font-size:1.6rem;}
  main.container{padding-left:.75rem;padding-right:.75rem;}
}