:root{
  --csmt-red:#e0002d;
  --csmt-bg:#f6f1f3;
  --csmt-card:#ffffff;
  --csmt-shadow:0 10px 24px rgba(0,0,0,.08);
  --csmt-radius:18px;
}

.csmt-body{
  background: var(--csmt-bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Login ===== */
.csmt-login-bg{
  min-height: 100vh;
  background:
    radial-gradient(1100px 420px at 70% 30%, rgba(0,0,0,.04), transparent 60%),
    radial-gradient(900px 320px at 20% 70%, rgba(0,0,0,.05), transparent 55%),
    linear-gradient(135deg, #f8fafc 0%, #eef2f7 45%, #f8fafc 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 12px;
}
.csmt-login-card{
  width: 380px;
  max-width: 92vw;
  background: white;
  border-radius: 10px;
  box-shadow: var(--csmt-shadow);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.csmt-login-logo{
  width: 86px;
  height: 86px;
  background: #0b0b0b;
  margin: 18px auto 10px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--csmt-red);
  font-weight: 800;
  letter-spacing: 1px;
}
.csmt-login-btn{
  background: #91b9e8;
  border: none;
  color: #0b1b2a;
  font-weight: 600;
  border-radius: 20px;
  padding: 10px 14px;
}
.csmt-login-btn:hover{ filter: brightness(.97); }

.csmt-social-btns .btn{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
}

/* ===== Topbars ===== */
.csmt-topbar{
  background: #2c343c;
  padding-top: 8px;
  padding-bottom: 8px;
}
.csmt-logo-box{
  background: transparent;
  color: var(--csmt-red);
  font-weight: 800;
  letter-spacing: .5px;
}
.csmt-mobile-topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #dff3fb;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ===== Desktop Dashboard ===== */
.csmt-hero{
  background: var(--csmt-red);
  border-radius: 0 0 22px 22px;
  padding: 22px 18px 16px;
  margin-bottom: 16px;
}
.csmt-hero .card{
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.06);
}
.csmt-avatar{
  width: 110px; height: 110px;
  border-radius: 50%;
  background: #1e2b34;
  display:flex; align-items:center; justify-content:center;
  color: #d9e2ea;
  font-size: 52px;
}
.csmt-avatar-sm{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #1e2b34;
  display:flex; align-items:center; justify-content:center;
  color: #d9e2ea;
  font-size: 22px;
}
.csmt-quick-grid .card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.csmt-step-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ===== Mobile Home (cards like your screenshots) ===== */
.csmt-mobile-wrap{ padding: 12px 12px 84px; }

.csmt-tile{
  background: var(--csmt-card);
  border-radius: var(--csmt-radius);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 16px;
  border: 1px solid rgba(0,0,0,.05);
}
.csmt-tile h6{ margin: 0 0 10px; font-weight: 700; color:#3c4f80; }

.csmt-icons-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 10px;
}
.csmt-icon-item{
  text-align:center;
  font-size: 12px;
  color:#5a6570;
}
.csmt-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 6px;
  background: #f3f6fb;
  border: 1px solid rgba(0,0,0,.05);
}
.csmt-icon i{ font-size: 22px; }

.csmt-vip-banner{
  background: #fde3b8;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 14px;
  padding: 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.csmt-vip-banner .badge{
  background:#1f2c35 !important;
}

/* ===== Bottom nav ===== */
.csmt-bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #f9fbff;
  border-top: 1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content: space-around;
  padding: 10px 6px;
  z-index: 30;
}
.csmt-bottom-nav a{
  text-decoration:none;
  color:#7a8896;
  font-size: 11px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 4px;
  min-width: 64px;
}
.csmt-bottom-nav a i{ font-size: 18px; }
.csmt-bottom-nav a.active{ color:#2a3c52; font-weight:600; }
.csmt-bottom-nav a.center{
  width: 56px; height: 56px;
  margin-top: -26px;
  border-radius: 50%;
  background: #222a31;
  color: white;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.csmt-bottom-nav a.center i{ font-size: 22px; }

/* ===== Responsive behavior ===== */
@media (max-width: 767.98px){
  .csmt-desktop-only{ display:none !important; }
}
@media (min-width: 768px){
  .csmt-mobile-only{ display:none !important; }
}