:root{
  --stc-bg:#0E321F;
  --stc-text:#F5FAEF;
  --stc-accent:#8BC53E;
  --stc-accent-2:#009343;
  --stc-border:rgba(14,50,31,.18);
  --stc-surface:#FFFFFF;
  --stc-surface-2:#EEF6EA;
  --stc-shadow:0 12px 26px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
  --stc-radius:16px;
  --stc-radius-sm:12px;
}

.stc-wrap{border:1px solid var(--stc-border); padding:18px; border-radius:var(--stc-radius); background:var(--stc-surface); box-shadow:var(--stc-shadow)}
.stc-preview{background:var(--stc-surface-2); border:1px solid var(--stc-border); border-radius:calc(var(--stc-radius) - 2px); overflow:hidden; margin-bottom:14px}
#stc-canvas{display:block; width:100%; height:auto}

.stc-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end; margin-bottom:12px}
.stc-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px}
.stc-x{align-self:center; font-size:18px; opacity:.65}

.stc-wrap label{display:flex; flex-direction:column; gap:6px; font-weight:700; color:#0E1730; font-family:'Nunito Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.stc-wrap input, .stc-wrap select{padding:12px 14px; border-radius:var(--stc-radius-sm); border:1px solid rgba(0,0,0,.12); font-size:16px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease}
.stc-wrap input:focus, .stc-wrap select:focus{outline:none; border-color:var(--stc-accent-2); box-shadow:0 0 0 3px rgba(0,147,67,.15)}

.stc-output{position:relative; background:var(--stc-bg); color:var(--stc-text); border-radius:var(--stc-radius); padding:20px; display:flex; flex-direction:column; gap:10px}
.stc-output .stc-total{font-size:22px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-family:'Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif}
.stc-output .stc-total strong{font-size:54px; line-height:1; color:var(--stc-accent)}
.stc-output .stc-sub{opacity:.95}
.stc-output .stc-reco{background:rgba(255,255,255,.07); padding:12px 14px; border-radius:var(--stc-radius-sm); border:1px dashed rgba(255,255,255,.22)}

.stc-atc{align-self:flex-start; margin-top:8px; background:#fff; color:var(--stc-accent-2); border:2px solid var(--stc-accent); border-radius:12px; padding:10px 18px; font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.04); transition:transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease}
.stc-atc:hover{background:var(--stc-accent-2); color:#fff; border-color:var(--stc-accent-2)}
.stc-atc:active{transform:translateY(1px)}

.stc-locked-note{align-self:flex-end; font-size:13px; color:#0E321F; padding:10px 12px; background:#F5FAEF; border:1px dashed var(--stc-border); border-radius:10px}

/* Toast overlay styles */
.stc-output--toast > *:not(.stc-toast){opacity:0; transition:opacity .2s ease}
.stc-toast{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,50,31,.92); color:#fff; border-radius:var(--stc-radius);
  opacity:0; transform:scale(.96); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  font-weight:900; font-size:28px; letter-spacing:.3px;
}
.stc-toast.is-active{opacity:1; transform:scale(1)}

@media (max-width: 900px){
  .stc-output .stc-total strong{font-size:44px}
}
@media (max-width: 768px){
  .stc-grid{grid-template-columns:1fr 1fr; gap:12px}
  .stc-x{display:none}
}
@media (max-width: 480px){
  .stc-row{flex-direction:column}
  .stc-wrap input, .stc-wrap select{font-size:16px}
}