/* Minimal default looks for prototype/respond.mjs. Everything is scoped to .rs-skin, so a form that maps
   the rs-* parts onto its own classes (D does) is not affected. Override the custom properties to recolour. */
.rs-skin {
  --rs-ink: #1f2a24;
  --rs-ink-2: #5d675f;
  --rs-line: #d9d6cc;
  --rs-paper: #fbfaf6;
  --rs-accent: #c8412b;
  --rs-accent-soft: #f6e3dd;
  --rs-radius: 10px;
  font: 14px/1.45 system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: var(--rs-ink);
}
.rs-skin .rs-prompt { margin: 0 0 8px; font-weight: 650; }
.rs-skin .rs-subject { margin: 0 0 8px; font-size: 13px; color: var(--rs-ink-2); }
.rs-skin .rs-subject a { color: inherit; }
.rs-skin .rs-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rs-skin .rs-btn,
.rs-skin .rs-compact,
.rs-skin .rs-options button,
.rs-skin .rs-suggest button,
.rs-skin .rs-keypad-chips button,
.rs-skin .rs-keypad-keys button {
  min-height: 34px; padding: 0 12px; border-radius: var(--rs-radius); font: inherit; font-weight: 600; cursor: pointer;
}
.rs-skin .rs-btn.rs-fill { background: var(--rs-accent); color: #fff; border: 1px solid var(--rs-accent); }
.rs-skin .rs-btn.rs-line, .rs-skin .rs-compact { background: transparent; color: var(--rs-accent); border: 1.5px solid var(--rs-accent); }
.rs-skin .rs-compact.rs-decide { background: var(--rs-accent-soft); }
.rs-skin .rs-btn small { margin-left: 6px; font-size: 11px; opacity: .85; }
.rs-skin .rs-snooze, .rs-skin .rs-undo { border: 0; background: none; color: var(--rs-ink-2); font: inherit; cursor: pointer; padding: 4px 6px; }
.rs-skin .rs-snooze span { margin-left: 3px; font-size: 12px; }
.rs-skin .rs-input { display: flex; gap: 8px; align-items: center; }
.rs-skin .rs-amount { display: inline-flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: var(--rs-paper); font: inherit; cursor: pointer; }
.rs-skin .rs-amount b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rs-skin .rs-amount i { font-style: normal; color: var(--rs-ink-2); }
.rs-skin .rs-panel { margin-top: 10px; padding: 10px; border: 1px solid var(--rs-line); border-radius: var(--rs-radius); background: var(--rs-paper); }
.rs-skin .rs-options { display: flex; flex-direction: column; gap: 6px; }
.rs-skin .rs-options button { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--rs-line); background: #fff; color: var(--rs-ink); text-align: left; }
.rs-skin .rs-options small { color: var(--rs-ink-2); font-weight: 400; }
.rs-skin .rs-custom { display: flex; gap: 8px; align-items: center; margin: 8px 0; color: var(--rs-ink-2); }
.rs-skin .rs-custom input { font: inherit; padding: 4px 6px; border: 1px solid var(--rs-line); border-radius: 6px; }
.rs-skin .rs-suggest, .rs-skin .rs-keypad-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rs-skin .rs-suggest button, .rs-skin .rs-keypad-chips button { border: 1.5px solid var(--rs-accent); background: none; color: var(--rs-accent); border-radius: 99px; font-weight: 500; }
.rs-skin .rs-composer { display: flex; gap: 8px; align-items: flex-end; }
.rs-skin .rs-composer textarea { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid var(--rs-line); border-radius: 8px; resize: vertical; }
.rs-skin .rs-send { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--rs-accent); color: #fff; font-weight: 700; cursor: pointer; }
.rs-skin .rs-keypad { max-width: 260px; }
.rs-skin .rs-keypad-value { text-align: center; color: var(--rs-ink-2); margin-bottom: 8px; }
.rs-skin .rs-keypad-value b { font-size: 28px; color: var(--rs-ink); margin-left: 4px; font-variant-numeric: tabular-nums; }
.rs-skin .rs-keypad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.rs-skin .rs-keypad-keys button { border: 0; background: #efece4; color: var(--rs-ink); font-size: 17px; }
.rs-skin .rs-keypad-done { width: 100%; }
.rs-skin .rs-receipt, .rs-skin .rs-acked { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.rs-skin .rs-receipt small, .rs-skin .rs-acked small { display: block; font-weight: 400; font-size: 12px; color: var(--rs-ink-2); }
.rs-skin .rs-check { color: var(--rs-accent); }
.rs-skin :focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }