/* ═══════════════════════════════════════════════════════════════
   CMA GENERATOR — PRO UI DESIGN SYSTEM v2
   Professional-level overrides and new components
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root{
  --brand:#1D4ED8;
  --brand-dark:#1E3A8A;
  --brand-mid:#2563EB;
  --brand-light:#DBEAFE;
  --brand-xlight:#EFF6FF;
  --violet:#7C3AED;
  --violet-light:#EDE9FE;
  --emerald:#059669;
  --emerald-light:#D1FAE5;
  --amber:#D97706;
  --amber-light:#FEF3C7;
  --rose:#E11D48;
  --slate-50:#F8FAFC;
  --slate-100:#F1F5F9;
  --slate-200:#E2E8F0;
  --slate-300:#CBD5E1;
  --slate-400:#94A3B8;
  --slate-500:#64748B;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-800:#1E293B;
  --slate-900:#0F172A;
  --r4:4px; --r8:8px; --r12:12px; --r16:16px; --r20:20px; --r24:24px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.07), 0 4px 6px -4px rgba(15,23,42,.04);
  --shadow-xl: 0 20px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);
}

/* ── 2. GLOBAL RESET & BASE ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }

/* ── 3. DASHBOARD HEADER ──────────────────────────────────── */
.dash-header{
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 50%, #1D4ED8 100%) !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.dash-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand-logo-wrap{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-logo-wrap .logo-emoji{ font-size: 28px; line-height: 1 }
.brand-logo-wrap .logo-text{
  font-size: 18px; font-weight: 800; color: #fff;
  letter-spacing: -.3px; line-height: 1.2;
}
.brand-logo-wrap .logo-sub{
  font-size: 11px; color: rgba(255,255,255,.6);
  font-weight: 500; display: block;
}

/* Dashboard nav pills */
.dash-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-nav a{
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
}
.dash-nav a:hover{ background: rgba(255,255,255,.12); color: #fff }
.dash-nav .nav-active{ background: rgba(255,255,255,.15); color: #fff }
.dash-nav .nav-cta{
  background: linear-gradient(135deg,#FCD34D 0%,#F59E0B 100%) !important;
  color: #78350F !important;
  padding: 7px 16px;
  font-weight: 800;
  border-radius: 8px;
}
.dash-nav .nav-cta:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,.4); background: #FCD34D !important }

/* ── 4. PAGE WRAPPER ──────────────────────────────────────── */
.dash-page{
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* ── 5. USER HERO CARD ────────────────────────────────────── */
.user-hero{
  background: linear-gradient(135deg, #EFF6FF 0%, #FAF5FF 100%) !important;
  border: 1.5px solid #BFDBFE !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-bottom: 24px !important;
  box-shadow: var(--shadow-md) !important;
}
.user-info{
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-avatar{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1D4ED8 0%,#7C3AED 100%);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(29,78,216,.3);
}
.user-info h2{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin: 0 0 2px !important;
}
.user-info .muted-text{
  font-size: 13.5px !important;
  color: var(--slate-500) !important;
  margin: 0 !important;
}
.plan-badge{
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: var(--slate-100);
  color: var(--slate-600);
  border: 1.5px solid var(--slate-200);
}
.plan-badge.paid{
  background: linear-gradient(135deg,#059669,#047857);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(5,150,105,.3);
}

/* ── 6. STATS GRID ────────────────────────────────────────── */
.dash-stats{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.stat-box{
  background: #fff !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 16px !important;
  padding: 22px 20px !important;
  text-align: center !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .2s ease !important;
  position: relative;
  overflow: hidden;
}
.stat-box::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--violet));
  opacity:0;
  transition:opacity .2s;
}
.stat-box:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--brand-light) !important;
}
.stat-box:hover::before{ opacity:1 }
.stat-icon{
  font-size: 26px !important;
  margin-bottom: 8px !important;
  line-height: 1 !important;
}
.stat-num{
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--slate-900) !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.stat-label{
  font-size: 12.5px !important;
  color: var(--slate-500) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── 7. SOCIAL PROOF SECTION (FIXED) ─────────────────────── */
.social-proof-section{
  background: linear-gradient(135deg,#EFF6FF 0%,#FAF5FF 100%);
  border: 1.5px solid #BFDBFE;
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.sp-section-title{
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-700);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sp-counters{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sp-counter-item{
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: 14px;
  padding: 18px 12px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: all .2s ease;
}
.sp-counter-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-light);
}
.sp-counter-num{
  font-size: 28px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1.1;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.sp-counter-label{
  font-size: 12px;
  color: var(--slate-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
/* Testimonials */
.testimonials-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.t-card{
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-xs);
  transition: all .2s ease;
}
.t-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-light);
}
.t-stars{
  color: #F59E0B;
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.t-quote{
  font-size: 13.5px;
  color: var(--slate-700);
  line-height: 1.6;
  margin-bottom: 14px;
  font-style: italic;
}
.t-author{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-100);
}
.t-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1D4ED8,#7C3AED);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.t-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  display: block;
  line-height: 1.3;
}
.t-role{
  font-size: 12px;
  color: var(--slate-500);
  display: block;
}
.sp-trust-bar{
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--slate-600);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.sp-trust-bar span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── 8. SECTION CARD HEADERS ──────────────────────────────── */
.section-card{
  background: #fff;
  border: 1.5px solid var(--slate-200);
  border-radius: 18px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.section-card-header{
  padding: 22px 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.section-card-title{
  font-size: 20px;
  font-weight: 800;
  color: var(--slate-900);
  letter-spacing: -.3px;
  line-height: 1.3;
  margin: 0 0 4px;
}
.section-card-sub{
  font-size: 14px;
  color: var(--slate-500);
  margin: 0;
  line-height: 1.5;
}
.section-card-body{ padding: 20px 28px 28px }

/* ── 9. PRICING CARDS (REDESIGNED) ───────────────────────── */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  padding: 20px 28px 28px;
}
.price-card{
  background: #fff !important;
  border: 2px solid var(--slate-200) !important;
  border-radius: 18px !important;
  padding: 26px !important;
  position: relative !important;
  transition: all .25s ease !important;
  box-shadow: var(--shadow-sm) !important;
}
.price-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-xl) !important;
  border-color: var(--brand-light) !important;
}
.price-card.popular{
  border-color: var(--brand) !important;
  background: linear-gradient(180deg,#EFF6FF 0%,#fff 100%) !important;
  box-shadow: 0 8px 28px rgba(29,78,216,.15) !important;
}
.price-card.unlimited{
  border-color: var(--violet) !important;
  background: linear-gradient(180deg,#EDE9FE 0%,#fff 100%) !important;
}
.ribbon{
  position: absolute;
  top: 16px; right: -1px;
  background: linear-gradient(135deg,var(--brand),var(--violet));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px 5px 10px;
  border-radius: 6px 0 0 6px;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(29,78,216,.3);
}
.price-tag{
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 12px;
}
.price-tag.basic{ background: var(--brand-light); color: var(--brand-dark) }
.price-tag.pro{ background: var(--violet-light); color: var(--violet) }
.price-tag.unl{ background: linear-gradient(135deg,var(--brand-light),var(--violet-light)); color: var(--slate-800) }
.price-card h3{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}
.price{
  font-size: 38px !important;
  font-weight: 900 !important;
  color: var(--slate-900) !important;
  line-height: 1 !important;
  margin-bottom: 18px !important;
  letter-spacing: -1px !important;
}
.price span{
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--slate-500) !important;
  letter-spacing: 0 !important;
}
.price-card ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  font-size: 14px !important;
}
.price-card ul li{
  padding: 7px 0 !important;
  color: var(--slate-700) !important;
  border-bottom: 1px solid var(--slate-100) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.price-card ul li:last-child{ border-bottom: none !important }
.price-card ul li::before{
  content: '✓';
  color: var(--emerald);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Remove the ✓ characters since we add them via CSS */
.price-card ul li{ list-style: none }

/* ── 10. BUY BUTTON ───────────────────────────────────────── */
.buy-btn{
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  font-family: inherit !important;
  letter-spacing: .2px;
}
.price-card .buy-btn{
  background: linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(29,78,216,.3);
}
.price-card.popular .buy-btn{
  background: linear-gradient(135deg,#1D4ED8 0%,#7C3AED 100%);
  box-shadow: 0 4px 18px rgba(29,78,216,.4);
}
.price-card.unlimited .buy-btn{
  background: linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%);
  box-shadow: 0 4px 18px rgba(124,58,237,.4);
}
.buy-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(29,78,216,.4) !important;
}

/* ── 11. PAYMENT HISTORY TABLE ────────────────────────────── */
.payment-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.payment-table th{
  background: var(--slate-50);
  font-weight: 700;
  color: var(--slate-600);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid var(--slate-200);
}
.payment-table td{
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
  vertical-align: middle;
}
.payment-table tr:hover td{ background: var(--slate-50) }
.payment-table .badge-paid{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--emerald-light);
  color: #065F46;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
}
.payment-table .badge-pending{
  background: var(--amber-light);
  color: #78350F;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  display: inline-block;
}

/* ── 12. SECTION CARD COMPONENT ──────────────────────────── */
.card{
  border-radius: 18px !important;
  border: 1.5px solid var(--slate-200) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 24px !important;
}
.card h2{
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--slate-900) !important;
  letter-spacing: -.3px !important;
}
.hint{
  font-size: 15px !important;
  color: var(--slate-600) !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}

/* ── 13. GENERAL BUTTONS ──────────────────────────────────── */
.btn-primary{
  background: linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 13px 24px !important;
  border-radius: 11px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  font-family: inherit !important;
  box-shadow: 0 4px 14px rgba(29,78,216,.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(29,78,216,.35) !important;
}
.btn-ghost{
  background: #fff !important;
  border: 1.5px solid var(--slate-300) !important;
  color: var(--slate-700) !important;
  padding: 12px 22px !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  font-family: inherit !important;
}
.btn-ghost:hover{
  border-color: var(--brand-light) !important;
  background: var(--brand-xlight) !important;
  color: var(--brand) !important;
}

/* ── 14. WHATSAPP FLOAT ───────────────────────────────────── */
.whatsapp-float{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.wa-btn{
  width: 58px; height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  animation: waBounce 2.5s infinite;
  transition: transform .2s ease;
}
.wa-btn:hover{ transform: scale(1.1) }
.wa-btn svg{ width: 30px; height: 30px }
@keyframes waBounce{
  0%,60%,100%{ box-shadow: 0 6px 20px rgba(37,211,102,.45) }
  30%{ box-shadow: 0 6px 32px rgba(37,211,102,.7) }
}
.wa-tooltip{
  background: var(--slate-900);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: all .2s ease;
  pointer-events: none;
}
.whatsapp-float:hover .wa-tooltip{
  opacity: 1;
  transform: translateX(0);
}

/* ── 15. LOGIN PAGE ───────────────────────────────────────── */
.auth-page body, body.auth-page{
  background: linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%) !important;
  min-height: 100vh;
}
.auth-shell{
  min-height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  overflow: visible !important;
}
.auth-brand{
  background: linear-gradient(165deg,#0F172A 0%,#1E3A8A 40%,#1D4ED8 100%) !important;
  padding: 44px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 0;
  border-radius: 24px 0 0 24px !important;
}
.auth-brand::before{
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle,rgba(124,58,237,.25) 0%,transparent 70%);
  pointer-events: none;
}
.auth-brand::after{
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle,rgba(29,78,216,.3) 0%,transparent 70%);
  pointer-events: none;
}
.auth-logo{
  font-size: 52px !important;
  margin-bottom: 16px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)) !important;
}
.auth-brand h1{
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -1px !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}
.auth-brand > p:first-of-type{
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.auth-brand > p:nth-of-type(2){
  font-size: 17px;
  color: rgba(255,255,255,.85);
  margin-bottom: 24px;
  line-height: 1.5;
}
.auth-features{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.auth-features li{
  font-size: 15px !important;
  color: rgba(255,255,255,.9) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
/* Login social proof */
.auth-sp{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.auth-sp-item{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.auth-sp-num{
  font-size: 22px;
  font-weight: 900;
  color: #FCD34D;
  display: block;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.auth-sp-label{
  font-size: 11.5px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  display: block;
  margin-top: 3px;
}
.auth-trust-bar{
  margin-top: 20px;
  padding: 12px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(255,255,255,.75);
  text-align: center;
  line-height: 1.7;
}

/* ── 16. AUTH FORM (RIGHT PANEL) ──────────────────────────── */
.auth-form-wrap{
  width: auto !important;
  min-width: 0 !important;
  background: var(--slate-50) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 40px 36px !important;
  border-radius: 0 24px 24px 0 !important;
}
.auth-card{
  width: 100% !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-xl) !important;
  padding: 36px !important;
  border: 1.5px solid var(--slate-200) !important;
}
.auth-tabs{
  display: flex !important;
  background: var(--slate-100) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  margin-bottom: 24px !important;
  gap: 4px !important;
}
.auth-tab{
  flex: 1 !important;
  padding: 10px !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--slate-500) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  font-family: inherit !important;
}
.auth-tab.active{
  background: #fff !important;
  color: var(--brand) !important;
  box-shadow: var(--shadow-sm) !important;
}
.auth-form h2{
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--slate-900) !important;
  letter-spacing: -.4px !important;
  margin-bottom: 4px !important;
}
.auth-sub{
  font-size: 14px !important;
  color: var(--slate-500) !important;
  margin-bottom: 24px !important;
}
.afield{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}
.afield span:first-child{
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--slate-700) !important;
}
.afield input{
  padding: 12px 16px !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  color: var(--slate-900) !important;
  background: #fff !important;
  transition: all .15s ease !important;
  outline: none !important;
  width: 100% !important;
}
.afield input:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.1) !important;
}
.auth-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 8px }
.auth-btn{
  width: 100% !important;
  padding: 13px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg,var(--brand) 0%,var(--brand-mid) 100%) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(29,78,216,.3) !important;
  transition: all .2s ease !important;
  font-family: inherit !important;
}
.auth-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(29,78,216,.4) !important;
}
.btn-google{
  width: 100% !important;
  padding: 12px !important;
  border: 1.5px solid var(--slate-200) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--slate-700) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all .15s ease !important;
}
.btn-google:hover{
  border-color: var(--slate-300) !important;
  background: var(--slate-50) !important;
}
.forgot-link{
  font-size: 13px !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
}
.auth-tos{
  font-size: 12px !important;
  color: var(--slate-400) !important;
  text-align: center !important;
  margin-top: 12px !important;
  line-height: 1.5 !important;
}
.auth-back{
  margin-top: 16px !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--slate-400) !important;
}
.auth-back a{ color: var(--brand); font-weight: 600; text-decoration: none }
.auth-msg{
  font-size: 14px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  margin-top: 12px !important;
  font-weight: 600 !important;
}
.auth-msg.ok{
  background: var(--emerald-light) !important;
  color: #065F46 !important;
  border: 1px solid #A7F3D0 !important;
}
.auth-msg.err{
  background: #FFF1F2 !important;
  color: #9F1239 !important;
  border: 1px solid #FFA1B4 !important;
}

/* ── 17. GENERATE REPORT BUTTON ───────────────────────────── */
.btn-highlight-cta{
  background: linear-gradient(135deg,#EA580C 0%,#C2410C 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 18px 36px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  box-shadow: 0 8px 24px rgba(234,88,12,.35) !important;
  transition: all .2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  letter-spacing: -.2px !important;
}
.btn-highlight-cta:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(234,88,12,.45) !important;
}

/* ── 18. MODE TOGGLE ──────────────────────────────────────── */
.mode-card{
  background: linear-gradient(135deg,#0F172A 0%,#1E3A8A 100%) !important;
  border: none !important;
  padding: 28px !important;
}
.mode-card h2{
  color: #fff !important;
  font-size: 22px !important;
}
.mode-card .hint{
  color: rgba(255,255,255,.75) !important;
  margin-bottom: 20px !important;
}
.mode-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mode-btn{
  background: rgba(255,255,255,.08) !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left !important;
  transition: all .2s ease !important;
}
.mode-btn:hover{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
  transform: translateY(-2px) !important;
}
.mode-btn.active{
  background: rgba(255,255,255,.18) !important;
  border-color: #FCD34D !important;
  box-shadow: 0 0 0 2px rgba(252,211,77,.3) !important;
}
.mode-icon{
  font-size: 32px !important;
  line-height: 1 !important;
}
.mode-title{
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}
.mode-desc{
  font-size: 13px !important;
  color: rgba(255,255,255,.7) !important;
  line-height: 1.4 !important;
}
.mode-tag{
  display: inline-block !important;
  background: rgba(252,211,77,.2) !important;
  color: #FCD34D !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  margin-top: 8px !important;
  letter-spacing: .3px !important;
}

/* ── 19. APP HEADER (INDEX PAGE) ──────────────────────────── */
.app-header{
  background: linear-gradient(135deg,#0F172A 0%,#1E3A8A 50%,#1D4ED8 100%) !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.brand{
  max-width: 1200px !important;
  margin: 0 auto !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  gap: 16px !important;
}
.brand .logo{ font-size: 30px !important; filter: none !important }
.brand h1{
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
}
.brand .tagline{
  font-size: 13px !important;
  opacity: .7 !important;
  margin: 0 !important;
}
.auth-area{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.auth-area a, .auth-area button{
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
}

/* ── 20. INDUSTRY TEMPLATE CARD ───────────────────────────── */
.industry-card{
  background: linear-gradient(135deg,#FFFBEB 0%,#FEF3C7 100%) !important;
  border: 2px solid #F59E0B !important;
}
.industry-card h2{ color: #78350F !important }
.industry-tile{
  background: #fff !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: 14px !important;
  transition: all .2s ease !important;
  min-height: 106px !important;
}
.industry-tile:hover{
  background: #FFFBEB !important;
  border-color: #F59E0B !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(245,158,11,.2) !important;
}
.industry-tile.active{
  background: linear-gradient(135deg,#F59E0B 0%,#D97706 100%) !important;
  border-color: #D97706 !important;
  box-shadow: 0 6px 20px rgba(245,158,11,.4) !important;
}

/* ── 21. FOOTER ───────────────────────────────────────────── */
.site-footer{
  background: #0F172A !important;
  color: rgba(255,255,255,.8) !important;
  padding: 60px 24px 32px !important;
  margin-top: 0 !important;
}
.footer-grid{
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 40px !important;
}
.footer-logo{
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
}
.footer-desc{
  font-size: 13.5px !important;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.6 !important;
  margin-bottom: 6px !important;
}
.footer-by{
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
}
.footer-col h4{
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  color: rgba(255,255,255,.5) !important;
  margin-bottom: 14px !important;
}
.footer-col ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-col li{ margin-bottom: 10px !important }
.footer-col a{
  color: rgba(255,255,255,.7) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color .15s ease !important;
}
.footer-col a:hover{ color: #fff !important }
.footer-bottom{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.45) !important;
}

/* ── 22. MOBILE RESPONSIVENESS ───────────────────────────── */
@media (max-width:900px){
  .dash-stats{ grid-template-columns: repeat(2, 1fr) !important }
  .sp-counters{ grid-template-columns: repeat(2, 1fr) }
  .testimonials-row{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 28px !important }
  .pricing-grid{ grid-template-columns: 1fr !important }
  .mode-toggle{ grid-template-columns: 1fr !important }
}
@media (max-width:700px){
  .auth-form-wrap{ min-width: 0 !important; width: 100% !important }
  .auth-shell{ flex-direction: column !important }
  .auth-brand{ padding: 32px 24px !important }
  .auth-brand h1{ font-size: 28px !important }
  .brand{ flex-wrap: wrap; height: auto !important; padding: 14px 20px !important }
  .dash-stats{ grid-template-columns: repeat(2, 1fr) !important }
  .sp-counters{ grid-template-columns: repeat(2, 1fr) }
  .footer-grid{ grid-template-columns: 1fr !important }
  .industry-grid{ grid-template-columns: repeat(2, 1fr) !important }
  .dash-page{ padding: 20px 16px 60px !important }
}
@media (max-width:480px){
  .auth-card{ padding: 24px 18px !important }
  .stat-num{ font-size: 22px !important }
}

/* ── MODAL (Buy Plan popup) ──────────────────────────────── */
/* NOTE: display is controlled by JS (style="display:none" → "flex") — do NOT set display here */
.modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15,23,42,0.65) !important;
  z-index: 9999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  backdrop-filter: blur(3px) !important;
  animation: modalFadeIn .18s ease !important;
}
@keyframes modalFadeIn{
  from{ opacity:0 }
  to{ opacity:1 }
}
.modal-card{
  background: #fff !important;
  border-radius: 20px !important;
  padding: 32px 28px 28px !important;
  width: 100% !important;
  max-width: 480px !important;
  position: relative !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22) !important;
  animation: modalSlideUp .22s cubic-bezier(.34,1.3,.64,1) !important;
}
@keyframes modalSlideUp{
  from{ transform:translateY(30px); opacity:0 }
  to{ transform:translateY(0); opacity:1 }
}
.modal-close{
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  background: #F1F5F9 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: #64748B !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
}
.modal-close:hover{ background:#E2E8F0 !important; color:#1E293B !important }