.sim_mod_backdrop,
.sim_mod_modal {
max-height: 90vh;
--accent:#FFD166; --muted:#6b7280; --success:#16a34a;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.hidden {
display: none !important;
}
/* backdrop */
.sim_mod_backdrop{
position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
background: rgba(0,0,0,0.45);
z-index:1000;
}

/* modal */
.sim_mod_modal{
width:min(760px,92%); max-height:90vh; overflow-y:auto;
background:#fff; color:#111827;
border-radius:16px; padding:20px; position:relative;
box-shadow:0 10px 40px rgba(0,0,0,0.25);
display:grid; grid-template-columns:1fr; gap:18px;
font-size:14px;
}

/* close button */
.sim_mod_modal button.close{
position:absolute; top:14px; right:16px;
background:none; border:0; font-size:22px; color:#6b7280; cursor:pointer;
}
.sim_mod_modal button.close:hover{color:#111827}

/* MODE TOGGLE */
.sim_mod_mode-toggle{
display:flex; gap:8px; justify-content:center; margin-bottom:16px;
background:#f3f4f6; padding:4px; border-radius:12px; width:fit-content;
margin-left:auto; margin-right:auto;
}
.sim_mod_mode-btn{
padding:8px 20px; border:0; border-radius:8px; font-weight:600; font-size:13px;
cursor:pointer; transition:all 200ms ease; background:transparent; color:#6b7280;
}
.sim_mod_mode-btn.active{
background:#fff; color:#111827; box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.sim_mod_mode-btn:hover:not(.active){color:#111827;}

/* title */
.sim_mod_title{display:flex; gap:12px; align-items:center; justify-content:center;}
.sim_mod_spark{
width:46px;height:46px;border-radius:12px;
background:linear-gradient(135deg,var(--accent),#FF9E3B);
display:flex;align-items:center;justify-content:center;
font-weight:700;color:#05202a;
}
.sim_mod_modal h1{font-size:20px;margin:0}
.sim_mod_modal p.lead{
margin:6px 0 12px;
color:#6b7280;
font-size:14px;
line-height:1.4;
}

/* simulator box */
.sim_mod_sim{background:#f9fafb;border-radius:12px;padding:14px;border:1px solid #e5e7eb;}
.sim_mod_stat-row{display:flex;justify-content:space-between;margin-bottom:8px}
.sim_mod_big-amount{font-size:24px;font-weight:700}
.sim_mod_mini{font-size:12px;color:#6b7280}

/* controls */
.sim_mod_controls{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.sim_mod_row{display:flex;gap:10px;align-items:center;justify-content:space-between;}
.sim_mod_label{font-size:13px;color:#374151; flex-shrink:0;}
.sim_mod_slider-wrap{flex:1;display:flex;gap:12px;align-items:center}
.sim_mod_slider-wrap input[type=range]{width:100%; flex:1; display:block;}
.sim_mod_pill{background:#f3f4f6;padding:6px 10px;border-radius:999px;font-weight:600;min-width:86px;text-align:center;}

/* Editable input pill */
.sim_mod_input-pill{
background:#fff;
border:2px solid #e5e7eb;
padding:6px 10px;
border-radius:999px;
font-weight:600;
min-width:120px;
text-align:center;
font-size:14px;
transition: border-color 200ms ease;
}
.sim_mod_input-pill:focus{
outline:none;
border-color:var(--accent);
}

.sim_mod_input-pill::placeholder {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}

/* FEASIBILITY BADGE */
.sim_mod_feasibility{
margin-top:12px;
padding:12px;
border-radius:10px;
display:flex;
align-items:center;
gap:10px;
font-size:13px;
line-height:1.4;
}
.sim_mod_feasibility.within-reach{
background:#f0fdf4;
border:1px solid #86efac;
color:#166534;
}
.sim_mod_feasibility.stretch{
background:#fef3c7;
border:1px solid #fcd34d;
color:#92400e;
}
.sim_mod_feasibility.ambitious{
background:#fef2f2;
border:1px solid #fca5a5;
color:#991b1b;
}
.sim_mod_feasibility-icon{
font-size:20px;
flex-shrink:0;
}

/* CTA Section */
.sim_mod_cta-section{
margin-top:24px;
padding-top:20px;
border-top:1px solid #e5e7eb;
}
.sim_mod_cta-headline{
font-size:16px;
font-weight:600;
color:#111827;
margin:0 0 16px 0;
font-style:italic;
line-height:1.4;
text-align:center;
}
.sim_mod_cta-btn{
width:100%;
padding:14px 20px;
border-radius:12px;
border:0;
font-weight:700;
font-size:15px;
cursor:pointer;
background: linear-gradient(90deg, rgb(22, 163, 74), rgb(16, 185, 129));
color:#fff;
box-shadow:0 4px 12px rgba(124,58,237,0.25);
transition:transform 150ms ease, box-shadow 150ms ease;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.sim_mod_cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(124,58,237,0.35);
}
.sim_mod_cta-btn:active{transform:translateY(0);}
.sim_mod_cta-microcopy{
margin-top:10px;
font-size:12px;
color:#6b7280;
text-align:center;
line-height:1.5;
}

/* right panel - keeping for future */
.sim_mod_panel{background:#f9fafb;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;}
.sim_mod_progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;}
.sim_mod_progress>i{display:block;height:100%;width:0%;background:var(--success);transition:width 800ms ease;}
.sim_mod_badge-big{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;background:#fff;border:1px solid #e5e7eb;}
.sim_mod_coin{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-weight:800;background:linear-gradient(180deg,#FFD166,#FF9E3B);color:#05202a;}
.sim_mod_btn{flex:1;padding:10px 14px;border-radius:10px;border:0;font-weight:700;cursor:pointer}
.sim_mod_btn-primary{background:linear-gradient(90deg,#7C3AED,#FF9E3B);color:#fff}
.sim_mod_btn-ghost{background:#fff;border:1px solid #d1d5db;color:#374151}

/* toast alert */
#sim_mod_toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #16a34a;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  line-height: 1.4;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  z-index: 9999;
}
#sim_mod_toast.show {
  opacity: 1;
  bottom: 50px;
}



@media (max-width: 600px) {
  .sim_mod_modal {
    width: 94%;
    padding: 14px;
    font-size: 13px;
    gap: 12px;
  }

  .sim_mod_title {
    flex-direction: column;
    gap: 6px;
  }

  .sim_mod_spark {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .sim_mod_row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sim_mod_label {
    font-size: 12px;
  }

  .sim_mod_slider-wrap {
    flex-direction: column;
    gap: 6px;
  }

  .sim_mod_cta-btn {
    padding: 12px;
    font-size: 14px;
  }

  .sim_mod_input-pill,
  .sim_mod_pill {
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .sim_mod_cta-headline {
    font-size: 14px;
  }
}