/* =========================================
   CMA Generator — High Readability Edition
   ========================================= */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1D4ED8;
  --primary-dark:#1E3A8A;
  --primary-soft:#DBEAFE;
  --primary-glow:#BFDBFE;
  --accent:#DC2626;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#CBD5E1;
  --border-soft:#E2E8F0;
  --text:#0F172A;          /* near-black */
  --text-2:#1E293B;        /* dark slate (was lighter, now darker) */
  --muted:#475569;         /* darker than before */
  --green:#15803D;
  --green-soft:#DCFCE7;
  --amber:#D97706;
  --amber-soft:#FEF3C7;
  --amber-bg:#FFFBEB;
  --radius:16px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.05);
  --shadow:0 2px 8px rgba(15,23,42,0.06),0 1px 3px rgba(15,23,42,0.04);
  --shadow-lg:0 8px 28px rgba(15,23,42,0.08);
}

html{scroll-behavior:auto}
body{
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  font-size:17px;          /* bumped from 16 */
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ===== Header ===== */
.app-header{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  color:#fff;
  padding:28px 24px;
  box-shadow:var(--shadow-lg);
}
.brand{
  display:flex;
  align-items:center;
  gap:18px;
  max-width:1100px;
  margin:0 auto;
}
.logo{
  font-size:54px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.app-header h1{
  font-size:30px;          /* bigger */
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.2;
}
.tagline{
  font-size:16px;
  opacity:.95;
  margin-top:6px;
  font-weight:400;
}

.container{
  max-width:1000px;        /* narrower for better reading */
  margin:28px auto;
  padding:0 20px 120px;
}

/* ===== Card ===== */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:36px;            /* more breathing room */
  margin-bottom:28px;
  box-shadow:var(--shadow);
  border:1px solid var(--border-soft);
}
.card h2{
  font-size:26px;          /* much bigger */
  font-weight:800;
  margin-bottom:10px;
  color:var(--text);
  letter-spacing:-0.4px;
  line-height:1.3;
}
.hint{
  color:var(--text-2);     /* darker */
  font-size:16.5px;
  margin-bottom:26px;
  line-height:1.7;
}
.hint strong{color:var(--primary);font-weight:700}

/* ===== Sections ===== */
details{
  border:2px solid var(--border-soft);
  border-radius:var(--radius-sm);
  margin-bottom:18px;
  overflow:hidden;
  background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
details[open]{
  border-color:var(--primary-glow);
  box-shadow:0 4px 16px rgba(29,78,216,0.08);
}
details summary{
  padding:22px 26px;
  background:#F8FAFC;
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  user-select:none;
  font-size:18px;          /* bigger */
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  transition:background .15s;
}
details summary::-webkit-details-marker{display:none}
details summary::before{
  content:"▶";
  display:inline-block;
  transition:transform .25s;
  font-size:13px;
  color:var(--primary);
}
details[open] summary::before{transform:rotate(90deg)}
details[open] summary{
  background:var(--primary-soft);
  color:var(--primary-dark);
  border-bottom:2px solid var(--border-soft);
}
details summary:hover{background:#EFF6FF}

/* ===== Section Tip ===== */
.section-tip{
  background:var(--amber-bg);
  border:1.5px solid var(--amber-soft);
  border-left:5px solid var(--amber);
  padding:16px 20px;
  font-size:15.5px;
  color:#78350F;
  margin:18px 24px 0;
  border-radius:10px;
  line-height:1.7;
  font-weight:500;
}
.section-tip strong{color:#78350F;font-weight:800}

/* ===== Form Grid ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:20px;
  padding:24px;
}

/* ===== Field ===== */
.field{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fff;
  padding:22px;
  border-radius:14px;
  border:2px solid var(--border-soft);
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.field:hover{
  border-color:var(--primary-glow);
}
.field:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(29,78,216,0.12);
}
.field-label{
  font-size:18px;          /* MUCH bigger */
  font-weight:700;
  color:var(--text);
  line-height:1.4;
  display:block;
  letter-spacing:-0.1px;
}
.field-hint{
  font-size:15.5px;        /* bigger */
  color:var(--text-2);     /* dark, not gray */
  line-height:1.65;
  font-weight:400;
}
.field-hint strong{
  color:var(--accent);
  font-weight:700;
}

/* ===== Inputs ===== */
.field input,
.grid > label > input{
  padding:15px 18px;
  border:2px solid var(--border);
  border-radius:11px;
  font-size:18px;          /* bigger! */
  font-family:inherit;
  font-weight:700;
  background:#FAFBFC;
  color:var(--text);
  transition:border-color .15s,box-shadow .15s,background .15s;
  width:100%;
  min-height:54px;
  letter-spacing:0.2px;
}
.field input:hover,
.grid > label > input:hover{
  background:#fff;
  border-color:#94A3B8;
}
.field input:focus,
.grid > label > input:focus{
  outline:none;
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 4px rgba(29,78,216,0.12);
}
.field input[type="number"]{
  font-variant-numeric:tabular-nums;
}

/* ===== Example helper ===== */
.field-example{
  font-size:14.5px;
  color:#14532D;
  font-weight:600;
  background:var(--green-soft);
  padding:10px 14px;
  border-radius:9px;
  border-left:4px solid var(--green);
  line-height:1.6;
}

/* ===== Guide Box ===== */
.guide-box{
  background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%);
  border:2.5px solid var(--primary);
  margin-bottom:28px;
  box-shadow:0 4px 12px rgba(29,78,216,0.12);
}
.guide-box summary{
  background:var(--primary);
  color:#fff!important;
  font-size:18.5px;
  font-weight:800;
  padding:22px 26px;
}
.guide-box summary::before{color:#fff}
.guide-box[open] summary{
  background:var(--primary-dark);
}
.guide-box summary:hover{background:var(--primary-dark)}
.guide-content{
  padding:30px 32px;
  font-size:16.5px;
  color:var(--text);
  line-height:1.85;
  background:#fff;
}
.guide-content h4{
  color:var(--primary-dark);
  font-size:19px;          /* bigger */
  margin:24px 0 12px 0;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-0.2px;
}
.guide-content h4:first-child{margin-top:0}
.guide-content ul,.guide-content ol{
  padding-left:28px;
  margin-bottom:14px;
}
.guide-content ul ul{margin-top:8px}
.guide-content li{
  margin-bottom:8px;
  color:var(--text);       /* dark, not muted */
}
.guide-content code{
  background:var(--amber-soft);
  padding:4px 11px;
  border-radius:7px;
  font-family:'Consolas','Courier New',monospace;
  font-size:15.5px;
  color:#78350F;
  font-weight:800;
  border:1px solid #FCD34D;
}
.guide-content strong{color:var(--accent);font-weight:800}
.guide-content p{margin-top:14px;font-size:16px}

/* ===== Buttons ===== */
.actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;
  margin-top:28px;
  padding-top:26px;
  border-top:2px solid var(--border-soft);
}
button{
  padding:17px 22px;
  border-radius:12px;
  font-size:17px;          /* bigger */
  font-weight:700;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:transform .12s,box-shadow .15s,background .15s;
  min-height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  letter-spacing:0.1px;
}
button:active{transform:scale(0.97)}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(29,78,216,0.30);
}
.btn-primary:hover{
  background:var(--primary-dark);
  box-shadow:0 6px 20px rgba(29,78,216,0.40);
  transform:translateY(-2px);
}
.btn-secondary{
  background:var(--green);
  color:#fff;
  box-shadow:0 4px 12px rgba(21,128,61,0.30);
}
.btn-secondary:hover{
  background:#166534;
  box-shadow:0 6px 20px rgba(21,128,61,0.40);
  transform:translateY(-2px);
}
.btn-ghost{
  background:#F1F5F9;
  color:var(--text);
  border:2px solid var(--border);
}
.btn-ghost:hover{
  background:#E2E8F0;
  transform:translateY(-2px);
}

/* ====================================
   Report Tables
   ==================================== */
.report{padding:24px}
#report-title{
  font-size:24px;
  margin-bottom:22px;
  word-break:break-word;
  color:var(--text);
}
.cma-table-wrap{
  overflow-x:auto;
  margin-bottom:36px;
  border:2px solid #94A3B8;
  border-radius:10px;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-sm);
}
.cma-title{
  background:var(--primary);
  color:#fff;
  text-align:center;
  font-size:16px;
  font-weight:800;
  padding:13px 8px;
  letter-spacing:0.4px;
}
.cma-subtitle{
  background:var(--primary-dark);
  color:#fff;
  text-align:center;
  font-size:14px;
  padding:9px 8px;
  font-weight:500;
}
.cma-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;          /* bigger */
  background:#fff;
  min-width:640px;
}
.cma-table th,
.cma-table td{
  border:1px solid #94A3B8;
  padding:10px 11px;
  text-align:right;
  vertical-align:middle;
}
.cma-table th{
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-weight:800;
  text-align:center;
  font-size:14px;
}
.cma-table .lbl{
  text-align:left;
  font-weight:600;
  width:36%;
  color:var(--text);
}
.cma-table tr.section-row td{
  background:#FEF3C7;
  font-weight:800;
  color:#78350F;
  text-align:left;
  font-size:14.5px;
}
.cma-table tr.total-row td{
  background:#FEE2E2;
  font-weight:800;
  color:#991B1B;
}
.cma-table tr.subtotal-row td{
  background:#F1F5F9;
  font-weight:700;
}
.cma-table .indent{padding-left:26px}
.cma-table .indent2{padding-left:42px}
.num-blue{color:var(--primary-dark);font-weight:700}

/* ===== Footer ===== */
.foot{
  text-align:center;
  color:var(--muted);
  padding:28px 16px;
  font-size:14.5px;
  line-height:1.7;
}

/* ====================================
   MOBILE — Responsive (max 768px)
   ==================================== */
@media (max-width:768px){
  body{font-size:16.5px;line-height:1.7}

  .app-header{
    padding:18px 18px;
    position:sticky;
    top:0;
    z-index:50;
  }
  .brand{gap:14px}
  .logo{font-size:42px}
  .app-header h1{font-size:22px;letter-spacing:-0.3px}
  .tagline{font-size:13.5px;margin-top:2px}

  .container{
    margin:18px auto;
    padding:0 14px 100px;
  }

  .card{
    padding:22px 18px;
    border-radius:14px;
    margin-bottom:20px;
  }
  .card h2{font-size:21px}
  .hint{font-size:15.5px;margin-bottom:20px;line-height:1.65}

  details{
    margin-bottom:14px;
    border-radius:11px;
  }
  details summary{
    padding:18px 18px;
    font-size:16.5px;
    gap:10px;
  }

  .section-tip{
    margin:16px 18px 0;
    padding:14px 16px;
    font-size:14.5px;
    border-left-width:4px;
  }

  .grid{
    grid-template-columns:1fr;
    gap:16px;
    padding:18px;
  }

  .field{
    padding:18px 16px;
    border-radius:12px;
    gap:9px;
  }
  .field-label{font-size:16.5px;line-height:1.45}
  .field-hint{font-size:14.5px;line-height:1.65}
  .field-example{
    font-size:13.5px;
    padding:9px 12px;
  }
  .field input,
  .grid > label > input{
    padding:14px 15px;
    font-size:17px;
    min-height:52px;
  }

  .guide-box summary{
    font-size:16.5px;
    padding:18px 18px;
  }
  .guide-content{
    padding:22px 18px;
    font-size:15.5px;
    line-height:1.75;
  }
  .guide-content h4{font-size:16.5px;margin:18px 0 10px}
  .guide-content code{font-size:14.5px;padding:3px 8px}
  .guide-content ul,.guide-content ol{padding-left:22px}
  .guide-content li{margin-bottom:6px}

  /* Action buttons — full-width primary, 2-col secondary */
  .actions{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:22px;
    padding-top:20px;
  }
  .actions button{
    padding:14px 12px;
    font-size:14.5px;
    min-height:54px;
  }
  .actions .btn-primary{
    grid-column:span 2;
    padding:17px;
    font-size:17px;
  }

  /* Tables */
  .report{padding:16px 12px}
  #report-title{font-size:19px}
  .cma-title{font-size:14.5px;padding:11px 6px}
  .cma-subtitle{font-size:12.5px;padding:7px}
  .cma-table{font-size:13px;min-width:600px}
  .cma-table th,.cma-table td{padding:8px 8px}
  .cma-table tr.section-row td{font-size:13.5px}

  .foot{padding:20px 14px;font-size:13.5px}
}

/* Small phones */
@media (max-width:420px){
  body{font-size:16px}
  .actions{grid-template-columns:1fr}
  .actions .btn-primary{grid-column:span 1}
  .app-header h1{font-size:19px}
  .logo{font-size:36px}
  .field{padding:16px 14px}
  .field-label{font-size:16px}
  details summary{padding:16px;font-size:15.5px}
  .card{padding:18px 14px}
  .grid{padding:14px}
}

/* Tablet */
@media (min-width:769px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .container{padding:0 24px 100px}
}

/* Large desktop */
@media (min-width:1280px){
  body{font-size:17.5px}
  .field-label{font-size:18.5px}
  .field-hint{font-size:16px}
}

/* ===== Print ===== */
@media print{
  .app-header,.actions,.card:first-of-type,.foot,.guide-box{display:none}
  .card{box-shadow:none;border:none;padding:0}
  body{background:#fff;font-size:12px}
  .cma-table{font-size:10px}
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
*:focus-visible{
  outline:3px solid var(--primary);
  outline-offset:2px;
}

/* ============================================================
   MODE TOGGLE (CMA1 vs Project Report)
   ============================================================ */
.mode-card{background:linear-gradient(135deg,#FAFCFF 0%,#F1F5F9 100%);border:2px solid var(--primary-glow)}
.mode-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.mode-btn{
  background:#fff;
  border:2.5px solid var(--border);
  border-radius:14px;
  padding:22px 20px;
  cursor:pointer;
  text-align:left;
  transition:all .2s;
  display:flex;
  gap:16px;
  align-items:flex-start;
  min-height:auto;
  font-family:inherit;
}
.mode-btn:hover{
  border-color:var(--primary-glow);
  background:#FAFCFF;
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(29,78,216,0.10);
}
.mode-btn.active{
  border-color:var(--primary);
  background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%);
  box-shadow:0 4px 16px rgba(29,78,216,0.18);
}
.mode-icon{font-size:42px;line-height:1;flex-shrink:0}
.mode-info{flex:1}
.mode-title{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.mode-btn.active .mode-title{color:var(--primary-dark)}
.mode-desc{
  font-size:14px;
  color:var(--text-2);
  line-height:1.55;
  margin-bottom:8px;
}
.mode-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  background:var(--primary-soft);
  color:var(--primary-dark);
  padding:3px 10px;
  border-radius:20px;
}
.mode-btn.active .mode-tag{background:var(--primary);color:#fff}

@media (max-width:640px){
  .mode-toggle{grid-template-columns:1fr;gap:12px}
  .mode-btn{padding:18px 16px;gap:12px}
  .mode-icon{font-size:34px}
  .mode-title{font-size:16.5px}
  .mode-desc{font-size:13.5px}
}

/* ============================================================
   PROJECT REPORT — Section Layout
   ============================================================ */
.proj-section{
  background:#FAFCFF;
  border:1.5px solid var(--border-soft);
  border-radius:12px;
  padding:22px;
  margin-bottom:22px;
}
.proj-h{
  font-size:22px;
  font-weight:800;
  color:#5B21B6;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2.5px solid #DDD6FE;
  letter-spacing:-0.3px;
}
.proj-h2{
  font-size:17px;
  font-weight:700;
  color:#1E40AF;
  margin:18px 0 10px;
  padding-bottom:6px;
  border-bottom:1.5px solid #DBEAFE;
}
.kv-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:8px;
}
.kv-table tr{border-bottom:1px solid #E2E8F0}
.kv-table td{padding:9px 12px;font-size:14.5px;line-height:1.55}
.kv-table td.k{color:var(--text-2);width:42%;font-weight:500}
.kv-table td.v{color:var(--text);font-weight:600}
.kv-table tr.hlrow{background:#FEF3C7}
.kv-table tr.hlrow td{font-size:15.5px;padding:11px 12px}

/* Form for project mode — select dropdown */
.field select{
  padding:14px 16px;
  border:2px solid var(--border);
  border-radius:11px;
  font-size:16px;
  font-family:inherit;
  font-weight:600;
  background:#FAFBFC;
  color:var(--text);
  width:100%;
  min-height:54px;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D4ED8'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:24px;
  padding-right:42px;
}
.field select:focus{
  outline:none;
  border-color:var(--primary);
  background-color:#fff;
  box-shadow:0 0 0 4px rgba(29,78,216,0.12);
}

@media (max-width:768px){
  .proj-section{padding:18px 14px}
  .proj-h{font-size:19px}
  .proj-h2{font-size:15.5px}
  .kv-table td{padding:8px 10px;font-size:13.5px}
  .kv-table td.k{width:50%}
  .field select{padding:13px 14px;font-size:15.5px;min-height:52px}
}

/* ============================================================
   CHARTS GRID (Project Report)
   ============================================================ */
.charts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:20px;
  margin-top:14px;
}
.chart-box{
  background:#fff;
  border:1.5px solid var(--border-soft);
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:var(--shadow-sm);
  position:relative;
}
.chart-box canvas{
  width:100% !important;
  height:280px !important;
  max-height:300px;
}
.chart-title{
  font-size:15px;
  font-weight:700;
  color:#1E40AF;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:2px solid #DBEAFE;
}

@media (max-width:768px){
  .charts-grid{grid-template-columns:1fr;gap:14px}
  .chart-box{padding:14px 12px 10px}
  .chart-box canvas{height:240px !important}
  .chart-title{font-size:14px}
}

/* ============================================================
   PAYWALL — Locked Preview Sections (Freemium)
   ============================================================ */
.locked-section{
  position:relative;
  filter:blur(6px) saturate(0.7);
  pointer-events:none;
  user-select:none;
  opacity:0.55;
}
.locked-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.85) 100%);
  z-index:1;
  pointer-events:none;
}

.paywall-card{
  background:linear-gradient(135deg,#FEF3C7 0%,#FCD34D 100%);
  border:2.5px solid #F59E0B;
  border-radius:18px;
  padding:36px 30px 30px;
  margin:28px 0;
  text-align:center;
  position:relative;
  z-index:10;
  box-shadow:0 12px 32px rgba(245,158,11,0.25);
}
.paywall-card .paywall-icon{
  font-size:54px;
  margin-bottom:10px;
}
.paywall-card h2{
  font-size:26px;
  font-weight:800;
  color:#78350F;
  margin:0 0 12px 0;
}
.paywall-card .pw-desc{
  font-size:15.5px;
  color:#92400E;
  line-height:1.65;
  margin:0 auto 20px;
  max-width:560px;
}
.paywall-card .pw-desc strong{color:#78350F;font-weight:800}
.paywall-card .pw-cta{
  background:#1D4ED8;
  color:#fff;
  border:none;
  padding:16px 36px;
  border-radius:11px;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 6px 18px rgba(29,78,216,0.35);
  transition:transform .15s,box-shadow .15s;
  margin-bottom:14px;
}
.paywall-card .pw-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(29,78,216,0.45);
}
.paywall-card .pw-meta{
  font-size:13px;
  color:#92400E;
  margin:0;
  font-weight:600;
}

@media (max-width:640px){
  .paywall-card{padding:28px 18px 22px;margin:20px 0}
  .paywall-card h2{font-size:22px}
  .paywall-card .pw-desc{font-size:14.5px}
  .paywall-card .pw-cta{padding:14px 24px;font-size:15.5px;width:100%}
}

/* ============================================================
   MULTI-STEP WIZARD (Form)
   ============================================================ */
.wizard-progress{
  display:flex;justify-content:space-between;align-items:center;
  background:#fff;border:2px solid var(--border-soft);
  border-radius:14px;padding:18px 14px;margin-bottom:20px;
  position:relative;gap:8px;
}
.wp-step{
  display:flex;flex-direction:column;align-items:center;
  flex:1;text-align:center;position:relative;cursor:default;
}
.wp-step .wp-num{
  width:38px;height:38px;border-radius:50%;
  background:#F1F5F9;color:#64748B;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;border:2px solid #E2E8F0;
  transition:all .25s;z-index:2;position:relative;
}
.wp-step .wp-label{
  font-size:11.5px;font-weight:600;color:#64748B;
  margin-top:6px;line-height:1.3;max-width:120px;
}
.wp-step.active .wp-num{
  background:var(--primary);color:#fff;border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(29,78,216,0.18);
  transform:scale(1.06);
}
.wp-step.active .wp-label{color:var(--primary-dark);font-weight:800}
.wp-step.completed .wp-num{
  background:var(--green);color:#fff;border-color:var(--green);
}
.wp-step.completed .wp-num::after{content:"✓"}
.wp-step.completed .wp-num span{display:none}
.wp-step:not(:last-child)::after{
  content:"";position:absolute;top:19px;left:calc(50% + 19px);
  right:calc(-50% + 19px);height:3px;background:#E2E8F0;z-index:1;
}
.wp-step.completed:not(:last-child)::after{background:var(--green)}

.wizard-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:18px;padding:18px 22px;
  border-top:2px solid var(--border-soft);
  background:#FAFCFF;border-radius:0 0 12px 12px;
  gap:14px;
}
.wizard-nav .btn-ghost,
.wizard-nav .btn-primary{
  padding:13px 26px;font-size:15.5px;
  border-radius:10px;border:none;cursor:pointer;
  font-weight:700;font-family:inherit;
  transition:all .15s;
}
.wizard-nav .btn-ghost{
  background:#F1F5F9;color:var(--text);
  border:1.5px solid var(--border);
}
.wizard-nav .btn-ghost:hover{background:#E2E8F0}
.wizard-nav .btn-primary{
  background:var(--primary);color:#fff;
  box-shadow:0 4px 12px rgba(29,78,216,0.25);
}
.wizard-nav .btn-primary:hover{
  background:var(--primary-dark);transform:translateY(-1px);
}
.wizard-step-counter{
  font-size:13px;color:var(--muted);
  font-weight:600;
}

/* WIZARD MODE DISABLED — show all form fields + Generate button at once */
body.wizard-mode .actions{display:grid !important}
body.wizard-mode details[open]{display:block !important}
body.wizard-mode .wizard-progress,body.wizard-mode .wizard-nav{display:none !important}

/* Report preview is available to all logged-in users (paywall handled in JS) */

/* Hide "Generate Report" button for non-admin */
body:not(.is-admin) .actions .btn-primary[data-admin-only]{display:none}

@media (max-width:640px){
  .wizard-progress{padding:14px 8px}
  .wp-step .wp-num{width:32px;height:32px;font-size:13px}
  .wp-step .wp-label{font-size:10.5px;max-width:90px}
  .wp-step:not(:last-child)::after{top:16px;left:calc(50% + 16px);right:calc(-50% + 16px)}
  .wizard-nav{padding:14px 16px;gap:10px}
  .wizard-nav .btn-ghost,.wizard-nav .btn-primary{padding:11px 18px;font-size:14px}
}

/* ============================================================
   HIGHLIGHTED PRIMARY CTA (Generate Report)
   Bigger, pulsing, attention-grabbing
   ============================================================ */
.btn-highlight-cta{
  font-size:18px !important;
  font-weight:800 !important;
  padding:18px 28px !important;
  min-height:62px !important;
  background:linear-gradient(135deg,#1D4ED8 0%,#7C3AED 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:13px !important;
  letter-spacing:0.3px !important;
  box-shadow:0 8px 24px rgba(29,78,216,0.40),
             0 0 0 4px rgba(29,78,216,0.12) !important;
  position:relative;
  overflow:hidden;
  animation:btnHighlightPulse 2.2s ease-in-out infinite;
  transition:transform .15s,box-shadow .15s !important;
}
.btn-highlight-cta:hover{
  transform:translateY(-3px) scale(1.02) !important;
  box-shadow:0 14px 32px rgba(29,78,216,0.55),
             0 0 0 6px rgba(124,58,237,0.20) !important;
  animation-play-state:paused;
}
.btn-highlight-cta::before{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent);
  animation:btnShine 3s infinite;
}
@keyframes btnHighlightPulse{
  0%,100%{box-shadow:0 8px 24px rgba(29,78,216,0.40),0 0 0 4px rgba(29,78,216,0.12)}
  50%{box-shadow:0 12px 30px rgba(29,78,216,0.55),0 0 0 8px rgba(124,58,237,0.22)}
}
@keyframes btnShine{
  0%{left:-100%}
  50%,100%{left:100%}
}

/* In actions grid — make Generate button take more visual weight */
.actions .btn-highlight-cta{
  grid-column:span 2;
}
@media (min-width:769px){
  .actions{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (max-width:768px){
  .actions .btn-highlight-cta{grid-column:span 1}
  .btn-highlight-cta{font-size:16.5px !important;padding:16px 22px !important}
}

/* When in wizard mode, show actions only on last step (existing rule) but emphasize they're "ready" */
body.wizard-mode.is-last-step .actions{
  display:grid;
  animation:actionsIn .35s ease-out;
}
body.wizard-mode:not(.is-last-step) .actions{display:none}
@keyframes actionsIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ============================================================
   GENERATE BUTTON — STRONGER HIGHLIGHT (override priority)
   ============================================================ */
.actions .btn-highlight-cta,
button.btn-highlight-cta{
  background:linear-gradient(135deg,#1D4ED8 0%,#7C3AED 100%) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:800 !important;
  padding:18px 30px !important;
  min-height:64px !important;
  border:3px solid #FBBF24 !important;
  border-radius:14px !important;
  box-shadow:
    0 0 0 3px rgba(251,191,36,0.4),
    0 8px 28px rgba(29,78,216,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.20);
  letter-spacing:0.4px !important;
  position:relative;
  overflow:hidden;
  animation:cta-pulse 1.8s ease-in-out infinite;
  z-index:2;
}
.actions .btn-highlight-cta:hover,
button.btn-highlight-cta:hover{
  transform:translateY(-3px) scale(1.025) !important;
  box-shadow:
    0 0 0 5px rgba(251,191,36,0.55),
    0 14px 40px rgba(124,58,237,0.55) !important;
}
.actions .btn-highlight-cta::after,
button.btn-highlight-cta::after{
  content:"";position:absolute;top:0;left:-150%;
  width:80%;height:100%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0.5) 50%,transparent 100%);
  animation:cta-shine 2.6s linear infinite;
  pointer-events:none;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(251,191,36,0.4),0 8px 28px rgba(29,78,216,0.45),inset 0 1px 0 rgba(255,255,255,0.18)}
  50%{box-shadow:0 0 0 8px rgba(251,191,36,0.55),0 14px 38px rgba(124,58,237,0.55),inset 0 1px 0 rgba(255,255,255,0.25)}
}
@keyframes cta-shine{
  0%{left:-150%}100%{left:150%}
}

/* ============================================================
   GENERATE BUTTON — DARK ORANGE (override previous blue/purple)
   ============================================================ */
.actions .btn-highlight-cta,
button.btn-highlight-cta{
  background:linear-gradient(135deg,#C2410C 0%,#F97316 100%) !important;
  border:3px solid #FED7AA !important;
  box-shadow:
    0 0 0 4px rgba(251, 146, 60, 0.35),
    0 8px 28px rgba(234, 88, 12, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  color:#fff !important;
}
.actions .btn-highlight-cta:hover,
button.btn-highlight-cta:hover{
  box-shadow:
    0 0 0 6px rgba(251, 146, 60, 0.55),
    0 14px 40px rgba(234, 88, 12, 0.65) !important;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(251,146,60,0.35),0 8px 28px rgba(234,88,12,0.55),inset 0 1px 0 rgba(255,255,255,0.20)}
  50%{box-shadow:0 0 0 9px rgba(251,146,60,0.55),0 14px 40px rgba(234,88,12,0.70),inset 0 1px 0 rgba(255,255,255,0.28)}
}

/* ============================================================
   GENERATE BUTTON — Loading/Progress State
   ============================================================ */
.btn-highlight-cta.is-loading{
  pointer-events:none;
  background:linear-gradient(135deg,#7C2D12 0%,#9A3412 100%) !important;
  animation:none !important;
  cursor:wait !important;
}
.btn-highlight-cta.is-loading::after{display:none}
.btn-highlight-cta .progress-bar{
  position:absolute;
  bottom:0;left:0;
  height:8px;
  background:linear-gradient(90deg,#FCD34D 0%,#F59E0B 50%,#FFFFFF 100%);
  width:0;
  transition:width .25s ease-out;
  box-shadow:0 0 12px rgba(252,211,77,0.9);
  border-radius:0 0 8px 8px;
}
.btn-highlight-cta.is-loading{
  position:relative;
  overflow:hidden;
}
.btn-highlight-cta .spinner-dot{
  display:inline-block;
  width:14px;height:14px;
  border:2.5px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  vertical-align:middle;
  margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Dashboard nav "Generate Report" link — orange highlight */
.dash-nav a[href="index.html"]{
  background:linear-gradient(135deg,#C2410C 0%,#F97316 100%) !important;
  color:#fff !important;
  font-weight:800 !important;
  border:1.5px solid #FED7AA !important;
  box-shadow:0 4px 12px rgba(234,88,12,0.40);
}
.dash-nav a[href="index.html"]:hover{
  box-shadow:0 6px 18px rgba(234,88,12,0.55);
  transform:translateY(-1px);
}

/* =====================================================
   INDUSTRY TEMPLATES (Mode 1 - Bank CMA)
   ===================================================== */
.industry-card{
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1.5px solid #F59E0B;
}
.industry-card h2{color:#78350F}
.industry-card .hint{color:#92400E}

.industry-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.industry-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding: 14px 10px;
  background:#fff;
  border:1.5px solid #FDE68A;
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  text-align:center;
  transition: all .18s ease;
  min-height:110px;
}
.industry-tile:hover{
  border-color:#F59E0B;
  background:#FFFBEB;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245,158,11,.18);
}
.industry-tile.active{
  border-color:#F59E0B;
  background: linear-gradient(135deg,#F59E0B 0%, #D97706 100%);
  box-shadow: 0 6px 18px rgba(245,158,11,.35);
}
.industry-tile.active .ind-name,
.industry-tile.active .ind-meta{color:#fff}
.industry-tile .ind-icon{font-size:30px;line-height:1}
.industry-tile .ind-name{
  font-size:13px;
  font-weight:700;
  color:#0F172A;
  line-height:1.3;
}
.industry-tile .ind-meta{
  font-size:11px;
  color:#64748B;
  font-weight:600;
}

.industry-applied{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:14px 16px;
  background:#ECFDF5;
  border:1.5px solid #10B981;
  border-radius:10px;
  flex-wrap:wrap;
  animation: slideInGreen .35s ease;
}
@keyframes slideInGreen {
  from { opacity:0; transform:translateY(-8px); }
  to { opacity:1; transform:translateY(0); }
}
.industry-applied .ia-icon{font-size:22px}
.industry-applied .ia-text{
  flex:1;
  font-size:14px;
  color:#065F46;
  line-height:1.5;
  min-width:200px;
}
.industry-applied .ia-reset{
  background:#fff;
  border:1.5px solid #10B981;
  color:#065F46;
  font-weight:700;
  padding:8px 14px;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
}
.industry-applied .ia-reset:hover{background:#D1FAE5}

@media (max-width:560px){
  .industry-grid{grid-template-columns:repeat(2, 1fr); gap:10px}
  .industry-tile{min-height:96px;padding:10px 6px}
  .industry-tile .ind-icon{font-size:26px}
  .industry-tile .ind-name{font-size:12px}
}

/* ========== PAID USER DASHBOARD ENHANCEMENTS ========== */

/* Highlight Guide nav link like Generate Report button */
.dash-nav .nav-guide{
  background:linear-gradient(135deg,#7C3AED 0%,#5B21B6 100%) !important;
  color:#fff !important;
  padding:7px 14px !important;
  border-radius:8px !important;
  font-weight:700 !important;
  box-shadow:0 2px 8px rgba(124,58,237,.3);
  transition:all .2s;
}
.dash-nav .nav-guide:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(124,58,237,.45);
}

/* Paid plan badges */
.plan-badge.paid{
  background:linear-gradient(135deg,#10B981 0%,#059669 100%);
  color:#fff;
  padding:8px 16px;
  font-weight:800;
  letter-spacing:.5px;
  box-shadow:0 3px 10px rgba(16,185,129,.35);
  animation:badge-pulse 2.5s ease-in-out infinite;
}
.plan-badge.unlimited.paid{
  background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  box-shadow:0 3px 10px rgba(245,158,11,.4);
}
.plan-badge.pro-paid{
  background:linear-gradient(135deg,#8B5CF6 0%,#6D28D9 100%);
  box-shadow:0 3px 10px rgba(139,92,246,.4);
}
@keyframes badge-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

/* Welcome message under user name */
.welcome-msg{
  color:#475569 !important;
  font-style:italic;
}

/* Paid quick actions card */
.paid-quick-actions{
  background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%);
  border:2px solid #10B981;
  position:relative;
  overflow:hidden;
}
.paid-quick-actions::before{
  content:'';
  position:absolute;top:0;right:0;width:200px;height:200px;
  background:radial-gradient(circle,rgba(16,185,129,.15) 0%,transparent 70%);
  pointer-events:none;
}
body.is-paid:has(.plan-badge.unlimited.paid) .paid-quick-actions{
  background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);
  border-color:#F59E0B;
}
.paid-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.paid-banner-text{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
}
.paid-icon{
  font-size:32px;
  background:#fff;
  border-radius:50%;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.paid-banner-text h2{
  margin:0;color:#065F46;font-size:20px;
}
.paid-banner-text .muted-text{
  margin:2px 0 0;color:#047857 !important;font-size:13.5px;
}
.paid-countdown{
  background:#fff;
  border:2px solid #F59E0B;
  border-radius:12px;
  padding:8px 18px;
  text-align:center;
  min-width:80px;
}
.countdown-num{
  font-size:24px;
  font-weight:800;
  color:#D97706;
  line-height:1;
}
.countdown-label{
  font-size:11px;
  color:#92400E;
  font-weight:600;
  margin-top:2px;
}

/* Quick actions grid */
.quick-actions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  position:relative;
  z-index:1;
}
.qa-tile{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1.5px solid #E2E8F0;
  border-radius:12px;
  padding:14px 16px;
  text-decoration:none;
  color:#1F2937;
  transition:all .2s;
  font-family:inherit;
}
.qa-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border-color:#10B981;
}
.qa-tile.qa-primary{
  background:linear-gradient(135deg,#1D4ED8 0%,#1E3A8A 100%);
  color:#fff;
  border-color:transparent;
  grid-column:1/-1;
}
.qa-tile.qa-primary .muted-text,
.qa-tile.qa-primary span{color:rgba(255,255,255,.85) !important}
.qa-tile.qa-primary:hover{
  background:linear-gradient(135deg,#1E3A8A 0%,#1E40AF 100%);
  border-color:transparent;
}
.qa-icon{
  font-size:28px;
  flex-shrink:0;
}
.qa-text{
  flex:1;
  display:flex;
  flex-direction:column;
}
.qa-text strong{
  font-size:15px;
  font-weight:700;
}
.qa-text span{
  font-size:12.5px;
  color:#64748B;
  margin-top:2px;
}
.qa-arrow{
  font-size:24px;
  font-weight:700;
}

/* Hide pricing section for paid users (they already paid) */
body.is-paid main.dash-page > section.card:has(.pricing-grid){
  display:none;
}
/* Fallback for browsers without :has() — add helper class via JS */
body.is-paid .pricing-grid{display:none}
body.is-paid .pricing-section-paid-hidden{display:none !important}

/* Mobile tweaks */
@media (max-width:600px){
  .paid-banner{flex-direction:column;align-items:flex-start}
  .paid-countdown{align-self:flex-end}
  .quick-actions-grid{grid-template-columns:1fr}
}

/* Hide pricing section entirely for paid users */
body.is-paid #pricing-section{display:none !important}

/* ========== EMPTY FIELD HIGHLIGHT ========== */
/* Show red border + red label on empty/zero number inputs after pre-fill */
.field.is-empty input{
  border-color:#DC2626 !important;
  background:#FEF2F2 !important;
  color:#991B1B !important;
}
.field.is-empty .field-label::after{
  content:" ⚠️ खाली है";
  color:#DC2626;
  font-size:13px;
  font-weight:700;
  margin-left:8px;
}
.field.is-empty:focus-within input{
  box-shadow:0 0 0 4px rgba(220,38,38,0.15) !important;
}

/* ========== CENTER-SCREEN GENERATE PROGRESS OVERLAY ========== */
#gen-progress-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,23,42,0.65);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;justify-content:center;
  animation:gpo-fade .25s ease-out;
}
#gen-progress-overlay.active{display:flex}
@keyframes gpo-fade{from{opacity:0}to{opacity:1}}
#gen-progress-overlay .gpo-card{
  background:#fff;
  border-radius:18px;
  padding:36px 40px;
  width:min(440px,90vw);
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
#gen-progress-overlay .gpo-spinner{
  width:60px;height:60px;
  border:5px solid #DBEAFE;
  border-top-color:#1D4ED8;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin:0 auto 18px;
}
#gen-progress-overlay h3{
  font-size:22px;font-weight:800;color:#0F172A;
  margin:0 0 8px;
}
#gen-progress-overlay .gpo-step{
  font-size:14.5px;color:#475569;
  margin:14px 0 18px;
  min-height:22px;
}
#gen-progress-overlay .gpo-bar-bg{
  background:#E2E8F0;height:14px;
  border-radius:99px;overflow:hidden;
  margin-bottom:10px;
}
#gen-progress-overlay .gpo-bar-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#10B981 0%,#059669 50%,#1D4ED8 100%);
  border-radius:99px;
  transition:width .3s ease-out;
  box-shadow:0 0 12px rgba(16,185,129,.6);
}
#gen-progress-overlay .gpo-pct{
  font-size:13px;color:#64748B;font-weight:700;
}

/* ========== CLICKABLE STAT BOX (Reports → Edit) ========== */
.stat-box.stat-clickable{
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer;
  display:block;
  position:relative;
  transition:all .25s;
  background:#fff;
  border:1.5px solid #E2E8F0;
}
.stat-box.stat-clickable:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(124,58,237,.15);
  border-color:#7C3AED;
  background:linear-gradient(135deg,#FAF5FF 0%,#F3E8FF 100%);
}
.stat-edit-hint{
  font-size:11.5px;
  color:#7C3AED;
  font-weight:700;
  margin-top:6px;
  opacity:0;
  transition:opacity .2s;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.stat-box.stat-clickable:hover .stat-edit-hint{opacity:1}
/* Always show hint on mobile (no hover) */
@media (max-width:600px){
  .stat-edit-hint{opacity:1}
}

/* ========== ADMIN PANEL ENHANCEMENTS ========== */
.admin-tab-pill{
  display:inline-block;
  padding:7px 14px;
  background:#F1F5F9;
  border:1.5px solid #CBD5E1;
  border-radius:8px;
  color:#1E3A8A;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition:all .15s;
}
.admin-tab-pill:hover{
  background:#1D4ED8;
  color:#fff;
  border-color:#1D4ED8;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(29,78,216,.25);
}
.admin-filters{
  display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.admin-filters input,.admin-filters select{
  flex:1;
  min-width:180px;
  padding:10px 14px;
  border:1.5px solid #CBD5E1;
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:#FAFBFC;
}
.btn-sm-action{
  background:#1D4ED8;color:#fff;border:none;
  padding:6px 12px;border-radius:6px;cursor:pointer;
  font-size:12.5px;font-weight:700;font-family:inherit;
  margin-right:4px;
  transition:opacity .15s;
}
.btn-sm-action:hover{opacity:.85}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.3px}
.pill-admin{background:#FCE7F3;color:#9F1239}
.pill-unlimited{background:#FEF3C7;color:#92400E}
.pill-free{background:#E2E8F0;color:#475569}
.pill-status.pill-success{background:#DCFCE7;color:#166534}
.pill-status.pill-failed{background:#FEE2E2;color:#991B1B}
.pill-status.pill-pending{background:#FEF3C7;color:#92400E}
.pill-failed{background:#FEE2E2;color:#991B1B}
.pill-basic{background:#DBEAFE;color:#1E3A8A}
.pill-pro{background:#EDE9FE;color:#5B21B6}
.pay-table-wrap{overflow-x:auto;margin-top:10px}
.pay-table{width:100%;border-collapse:collapse;font-size:13.5px}
.pay-table th,.pay-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #E2E8F0}
.pay-table th{background:#F8FAFC;font-weight:700;color:#1E3A8A;text-transform:uppercase;font-size:11.5px;letter-spacing:.3px}
.pay-table tbody tr:hover{background:#F8FAFC}
.pay-table .small{font-size:12.5px}

/* ========== PHASE 4: UX EDGE CASE IMPROVEMENTS ========== */

/* Modal close button — better tap target on mobile */
.modal-close{
  min-width:44px;
  min-height:44px;
  padding:6px;
  border:none;
  background:transparent;
  font-size:28px;
  cursor:pointer;
  color:#475569;
  border-radius:8px;
  transition:background .15s;
}
.modal-close:hover{background:#F1F5F9;color:#0F172A}
.modal-close:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}

/* All buttons get clear focus ring (a11y) */
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
a:focus-visible{
  outline:3px solid #1D4ED8;
  outline-offset:2px;
  border-radius:6px;
}

/* Mobile tap targets — ensure buttons are min 44px tall */
@media (max-width:600px){
  button,.btn-primary,.btn-secondary,.btn-ghost,.qa-tile,
  .industry-tile,.mode-btn,.admin-tab-pill,.dash-nav a{
    min-height:44px;
  }
  /* Industry tiles less cramped on phone */
  .industry-grid{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }
  /* Stat boxes stack 2x2 not 1x4 on phone */
  .dash-stats{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  /* Modal content doesn't bleed off-screen */
  .modal-card{
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
    overflow-y:auto;
  }
  /* Form-page nav wraps cleanly */
  .form-page-nav{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px !important;
    margin:10px 0 !important;
  }
}

/* Print-friendly stylesheet (when user prints invoice/report) */
@media print {
  .app-header,.dash-nav,.form-page-nav,.qa-arrow,
  .modal-overlay,#__net_status_bar__,#gen-progress-overlay,
  .whatsapp-float,.wa-float,.industry-card,.guide-box,
  .actions,.paid-quick-actions{
    display:none !important;
  }
  body{background:#fff !important}
  .card{box-shadow:none !important;border:1px solid #ccc !important}
}

/* Reduced-motion users: disable animations */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Skeleton placeholder (when data loads) */
.skeleton{
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%;
  animation:skeletonPulse 1.4s ease-in-out infinite;
  border-radius:8px;
  color:transparent !important;
  user-select:none;
}
@keyframes skeletonPulse{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}