/* ===========================================================================
   Stake.Cake — Solana staking rewards calculator (embeddable widget).
   Self-contained; reads theme tokens from the host page (guide.css / site CSS)
   with safe fallbacks so it also works standalone.
   =========================================================================== */
.scalc {
  --sc-bg: var(--surface, #11161c);
  --sc-bg2: var(--surface-2, #161d25);
  --sc-line: var(--line-strong, rgba(255,255,255,0.16));
  --sc-line-soft: var(--line, rgba(255,255,255,0.08));
  --sc-text: var(--text, #f3f5f7);
  --sc-muted: var(--muted, #9aa6b2);
  --sc-muted2: var(--muted-2, #6b7785);
  --sc-gold: var(--gold, #ffa805);
  --sc-green: var(--sol-green, #14f195);
  max-width: 760px; margin: 0 auto;
  background: var(--sc-bg); border: 1px solid var(--sc-line-soft); border-radius: 16px;
  padding: 22px; color: var(--sc-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.scalc * { box-sizing: border-box; }
.scalc-head { margin-bottom: 16px; }
.scalc-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; }

.scalc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .scalc-grid { grid-template-columns: 1fr; } }
.scalc-field label { display: block; font-size: 13px; color: var(--sc-muted); margin-bottom: 6px; }
.scalc-suffix { display: flex; align-items: stretch; }
.scalc-suffix input {
  width: 100%; min-width: 0; background: var(--sc-bg2); border: 1px solid var(--sc-line); color: var(--sc-text);
  border-radius: 10px 0 0 10px; border-right: 0; padding: 11px 12px; font: inherit; font-size: 15px; outline: none;
  -moz-appearance: textfield;
}
.scalc-suffix input::-webkit-outer-spin-button, .scalc-suffix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scalc-suffix input:focus { border-color: var(--sc-gold); }
.scalc-suffix .unit {
  display: flex; align-items: center; flex: none;
  background: var(--sc-bg2); border: 1px solid var(--sc-line); border-left: 0; color: var(--sc-muted);
  border-radius: 0 10px 10px 0; padding: 0 12px; font-size: 13px; white-space: nowrap;
}

.scalc-horizon { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.scalc-horizon button {
  cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--sc-muted); background: var(--sc-bg2); border: 1px solid var(--sc-line-soft);
  border-radius: 999px; padding: 7px 15px; transition: color .15s, border-color .15s, background .15s;
}
.scalc-horizon button:hover { color: var(--sc-gold); }
.scalc-horizon button.on { color: #07090c; background: linear-gradient(135deg, var(--sc-gold), #ffce6b); border-color: transparent; }

.scalc-out {
  margin-top: 18px; padding: 18px; border-radius: 12px;
  background: linear-gradient(180deg, var(--sc-bg2), var(--sc-bg)); border: 1px solid var(--sc-line-soft);
}
.scalc-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.scalc-big { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(26px, 5vw, 34px); color: var(--sc-green); font-variant-numeric: tabular-nums; }
.scalc-big-usd { font-size: 16px; color: var(--sc-muted); font-variant-numeric: tabular-nums; }
.scalc-sub { font-size: 13px; color: var(--sc-muted2); margin-bottom: 16px; }
.scalc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 540px) { .scalc-rows { grid-template-columns: 1fr; } }
.scalc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--sc-line-soft); }
.scalc-row .k { font-size: 13px; color: var(--sc-muted); }
.scalc-row .v { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--sc-text); font-variant-numeric: tabular-nums; }
.scalc-row .v.green { color: var(--sc-green); }

.scalc-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scalc-note { font-size: 12px; color: var(--sc-muted2); line-height: 1.5; }
.scalc .scalc-cta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px; color: #07090c !important;
  background: linear-gradient(135deg, #ffce6b, var(--sc-gold)); border: none; border-radius: 999px;
  padding: 10px 18px; text-decoration: none !important; box-shadow: 0 10px 30px -10px rgba(255,168,5,0.5);
  transition: transform .15s, box-shadow .2s;
}
.scalc .scalc-cta:hover { color: #07090c !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 14px 38px -10px rgba(255,168,5,0.7); }