:root{
  --stl-blue:#2563eb;
  --stl-border:#e5e7eb;
  --stl-muted:#6b7280;
  --stl-bg:#ffffff;
  --stl-shadow:0 6px 20px rgba(0,0,0,.08);
  --stl-max:520px; /* Default width to match reference */
}
.stl-card{
  border:1px solid var(--stl-border);
  padding:16px;
  border-radius:12px;
  max-width:var(--stl-max);
  width:100%;
  background:var(--stl-bg);
  box-shadow:var(--stl-shadow);
  margin:12px 0;
}
.stl-header{ display:flex;align-items:center;gap:10px;margin-bottom:12px }
.stl-pill{
  display:inline-block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:#eef2ff;
  color:#3730a3;
  border-radius:999px;
  padding:4px 10px;
}
.stl-title{font-weight:700;font-size:18px}
.stl-controls{ display:flex;gap:10px;align-items:center;margin-bottom:8px }
.stl-input{
  flex:1; padding:12px 14px; border:1px solid #cbd5e1; border-radius:10px; width:100%; font-size:16px;
}
.stl-input:focus{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.2); border-color:var(--stl-blue) }
.stl-button{
  padding:12px 16px; border:0; border-radius:10px; cursor:pointer; background:var(--stl-blue); color:#fff; font-weight:700; white-space:nowrap; font-size:16px;
}
.stl-consent{ font-size:14px; color:var(--stl-muted); margin-top:4px }
.stl-message{ margin-top:10px; font-size:14px }
.stl-form.stl-loading{ opacity:.6; pointer-events:none }
/* a11y */
.screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
/* Mobile stacking */
@media (max-width: 600px){
  .stl-controls{ flex-direction: column; align-items: stretch; }
  .stl-button{ width: 100%; }
}