:root{
  /* dark defaults */
  --wd-card-bg:#141414;
  --wd-border:rgba(255,255,255,.10);
  --wd-text:#eaeaea;
  --wd-muted:#b8b8b8;
  --wd-badge-bg:#1a1a1a;
  --wd-input-bg:#1b1b1b;
  --wd-input-border:#333;
  --wd-input-text:#eaeaea;
  --wd-input-ph:#8c8c8c;
}

/* light scheme fallback */
@media (prefers-color-scheme: light){
  :root{
    --wd-card-bg:#ffffff;
    --wd-border:#e5e5e5;
    --wd-text:#1b1b1b;
    --wd-muted:#666666;
    --wd-badge-bg:#f4f4f4;
    --wd-input-bg:#ffffff;
    --wd-input-border:#dddddd;
    --wd-input-text:#1b1b1b;
    --wd-input-ph:#8a8a8a;
  }
}

/* your styles, themed */
.wd-sc-card{
  border:1px solid var(--wd-border);
  padding:14px;
  border-radius:10px;
  margin:12px 0;
  background:var(--wd-card-bg);
  color:var(--wd-text);
}
.wd-sc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.wd-sc-title{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--wd-text);
}
.wd-sc-badge{
  background:var(--wd-badge-bg);
  border:1px solid var(--wd-border);
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  color:var(--wd-text);
}
.wd-sc-note{ color:var(--wd-muted); }
.wd-sc-controls{ display:grid; gap:10px; }
.wd-sc-input-row{ display:flex; gap:8px; }
#wd-sc-amount{
  flex:1;
  padding:8px 10px;
  border:1px solid var(--wd-input-border);
  border-radius:6px;
  font-size:14px;
  background:var(--wd-input-bg);
  color:var(--wd-input-text);
}
#wd-sc-amount::placeholder{ color:var(--wd-input-ph); }

.wd-sc-quick{ display:flex; gap:6px; }
.wd-sc-quick .button-small{
  padding:2px 8px; line-height:22px; height:auto;
  background:transparent; color:var(--wd-text); border:1px solid var(--wd-border); border-radius:6px;
}

#wd-sc-range{ width:100%; }

/* optional: make range track readable in dark */
#wd-sc-range::-webkit-slider-runnable-track{ height:6px; background:var(--wd-border); border-radius:999px; }
#wd-sc-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-4px; border-radius:50%; background:var(--wd-text); border:0; }
#wd-sc-range::-moz-range-track{ height:6px; background:var(--wd-border); border-radius:999px; }
#wd-sc-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--wd-text); border:0; }

.wd-sc-footer{
  display:flex; align-items:center; gap:10px; margin-top:8px;
}
.wd-sc-feedback{ font-size:13px; color:var(--wd-text); }

@media (max-width:480px){
  .wd-sc-input-row{ flex-direction:column; }
}


.wd-sc-applied .wd-sc-applied-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.wd-sc-applied .wd-sc-applied-amount{font-weight:700}