/* Hosted swap widget. Frame, fields, and buttons take their radius from the saved theme. */
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--w-bg, #ffffff);
  color: var(--w-text, #141417);
}

#app {
  min-height: 100%;
  background: var(--w-bg, #ffffff);
}

.w-widget {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
  padding: 20px;
  background: var(--w-bg, #ffffff);
  color: var(--w-text, #141417);
  border: var(--w-border-w, 1px) solid var(--w-border, #f0f0f5);
  border-radius: var(--w-widget-radius, 0);
  font-family: var(--w-font, Inter, system-ui, sans-serif);
  font-size: var(--w-font-size, 14px);
  line-height: 1.4;
}

.w-widget *,
.w-widget *::before,
.w-widget *::after {
  box-sizing: border-box;
}

/* Page-level so the square iframe canvas matches the rounded frame. A rule on
   .w-widget alone leaves html/body on the white fallback and shows wedges. */
html[data-scheme="dark"] {
  --w-bg: #0f0f14;
  --w-card: #1a1a22;
  --w-border: #2a2a33;
  --w-text: #ffffff;
  --w-muted: #9a9ba0;
  --w-accent: #2f8af5;
  --w-accent-text: #ffffff;
}

.w-title {
  margin: 0;
  font-size: 1.15em;
  font-weight: var(--w-font-weight, 700);
}

.w-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--w-muted, #76777a);
  font-size: 0.85em;
}

.w-field input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: var(--w-border-w, 1px) solid var(--w-border, #f0f0f5);
  border-radius: var(--w-radius, 0);
  background: var(--w-card, #f7f7fa);
  color: var(--w-text, #141417);
  font: inherit;
  font-size: 1.05em;
}

.w-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w-button {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--w-btn-radius, 8px);
  background: var(--w-accent, #1e1ee8);
  color: var(--w-accent-text, #ffffff);
  font: inherit;
  font-weight: var(--w-font-weight, 600);
  cursor: pointer;
}

.w-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.w-quote {
  min-height: 1.2em;
  font-weight: var(--w-font-weight, 600);
}

.w-status {
  min-height: 1em;
  color: var(--w-muted, #76777a);
  font-size: 0.85em;
}