/* The Tool Bakery — Steps ↔ Calories Converter (Modern Theme) */
/* General */
#ttb-sc * { box-sizing: border-box; }
#ttb-sc { --bg:#0b0f17; --panel:#0f1623; --card:#111827; --muted:#b6c2d9; --line:#2a3244; --accent1:#8EC5FC; --accent2:#E0C3FC; --ok:#10b981; --warn:#f59e0b; --err:#ef4444; }
#ttb-sc { background: var(--bg); color: #fff; padding: 18px; border-radius: 18px; border:1px solid var(--line); }

/* Titles keep accent styling (body text is #fff) */
#ttb-sc .ttb-sc-title {
  font-size: 28px; line-height: 1.2; margin: 0 0 6px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#ttb-sc .ttb-sc-sub { color:#fff; opacity:.9; margin: 0 0 14px; }

/* Panel */
#ttb-sc .ttb-sc-panel { background: var(--panel); border:1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 12px; }
#ttb-sc .ttb-sc-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 900px){ #ttb-sc .ttb-sc-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ #ttb-sc .ttb-sc-row{ grid-template-columns: 1fr; } }

#ttb-sc .ttb-sc-field label { display:block; font-size: 12px; color: #fff; opacity: .9; margin-bottom: 6px; }
#ttb-sc .ttb-sc-field input, #ttb-sc .ttb-sc-field select {
  width: 100%; padding: 10px 12px; border-radius: 12px; background: #0e1522; border: 1px solid var(--line); color: #fff;
}
#ttb-sc .ttb-sc-duo { display:flex; align-items:center; gap:8px; }
#ttb-sc .ttb-sc-unit { display:inline-block; min-width:32px; text-align:center; font-size:12px; color:#fff; opacity:.9; }

#ttb-sc .ttb-sc-inline { display:flex; align-items:center; gap:10px; margin-top:6px; }
#ttb-sc .ttb-sc-check { color:#fff; opacity:.9; }
#ttb-sc .ttb-sc-radio { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#fff; opacity:.9; }

/* Exports */
#ttb-sc .ttb-sc-export { display:flex; align-items:center; justify-content: space-between; gap: 10px; margin: 10px 0; }
#ttb-sc .ttb-sc-export-right { display:flex; gap:10px; }
#ttb-sc .ttb-sc-btn {
  padding: 10px 14px; border-radius: 12px; background:#0e1522; border:1px solid var(--line); color:#fff; cursor:pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
#ttb-sc .ttb-sc-btn:hover{ transform: translateY(-1px); border-color:#5b6a8d; }
#ttb-sc .ttb-sc-btn.primary{ background: linear-gradient(135deg, var(--accent1), var(--accent2)); color:#0b0f17; border:none; }
#ttb-sc .ttb-sc-btn.ghost{ background:#0e1522; color:#fff; }

/* Capture Card */
#ttb-sc #ttb-sc-capture { background: var(--card); border:1px solid var(--line); border-radius: 16px; padding: 16px; }
#ttb-sc .ttb-sc-h2 { margin: 0 0 10px; font-size: 18px; color:#fff; }
#ttb-sc .ttb-sc-results { }
#ttb-sc .ttb-sc-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 900px){ #ttb-sc .ttb-sc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ #ttb-sc .ttb-sc-grid{ grid-template-columns: 1fr; } }

#ttb-sc .ttb-sc-stat { background:#0e1522; border:1px solid var(--line); border-radius: 14px; padding: 10px; min-height: 66px; }
#ttb-sc .ttb-sc-stat span { display:block; font-size: 12px; color:#fff; opacity:.8; margin-bottom: 6px; }
#ttb-sc .ttb-sc-stat strong { font-size: 20px; color:#fff; }

#ttb-sc .ttb-sc-assumptions { margin-top: 10px; font-size: 12px; color:#fff; opacity:.9; }
#ttb-sc .ttb-sc-footer { margin-top: 10px; color:#fff; opacity:.9; font-size: 12px; }

/* Print rules (fallback). Primary printing uses hidden iframe from JS. */
@media print {
  #ttb-sc .ttb-sc-panel, #ttb-sc .ttb-sc-export { display: none !important; }
  #ttb-sc { border: none; padding:0; }
  #ttb-sc #ttb-sc-capture { border: none; border-radius:0; padding:0; }
}

#sc-auto-step { max-width: 20px; }

#ttb-sc #ttb-sc-capture {
  display: none;
}
#ttb-sc #ttb-sc-capture.show {
  display: block;
}