@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

.kc {
  --sea: #0E4D64;
  --sea-deep: #093646;
  --marigold: #F2A900;
  --ink: #17212B;
  --slate: #5B6B7A;
  --line: #D9E1E7;
  --paper: #FFFFFF;
  --mist: #EEF4F6;
  --go: #1E7F4F;
  --stop: #B42318;
  font-family: "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-size: 17px;
  line-height: 1.45;
}
@media (prefers-color-scheme: dark) {
  .kc { --ink: #E8EEF2; --slate: #A3B1BD; --line: #2C3A45; --paper: #121A21; --mist: #1A252E; }
  .kc { background: var(--paper); }
}
.kc * { box-sizing: border-box; }
.kc h1, .kc h2 { margin: 0; letter-spacing: -0.01em; }
.kc h2 { font-size: 20px; margin: 32px 0 12px; }
.kc .muted { color: var(--slate); }
.kc .num { font-variant-numeric: tabular-nums; }

/* The one bold element: the float band */
.kc-float {
  background: var(--sea);
  color: #fff;
  border-radius: 0 0 20px 20px;
  margin: 0 -16px 24px;
  padding: 24px 20px 20px;
}
.kc-float .who { font-size: 15px; opacity: .85; }
.kc-float .amount { font-size: 48px; font-weight: 700; line-height: 1.1; margin: 4px 0 2px; }
.kc-float .label { font-size: 15px; opacity: .85; }
.kc-float .stats { display: flex; gap: 24px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.2); font-size: 15px; }
.kc-float .stats b { display: block; font-size: 20px; }

/* Segmented switch between selling modes */
.kc-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--sea);
  border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.kc-tabs button { background: none; border: 0; padding: 12px; font: inherit; font-weight: 700;
  color: var(--sea); min-height: 48px; cursor: pointer; }
.kc-tabs button[aria-selected="true"] { background: var(--sea); color: #fff; }
@media (prefers-color-scheme: dark) { .kc-tabs button { color: #7FC3DA; } .kc-tabs { border-color: #7FC3DA; } }

.kc label { display: block; font-weight: 700; margin: 16px 0 6px; }
.kc input, .kc select {
  width: 100%; min-height: 52px; font: inherit; font-size: 20px; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.kc input:focus, .kc select:focus, .kc button:focus-visible {
  outline: 3px solid var(--marigold); outline-offset: 2px; border-color: var(--sea);
}
.kc .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.kc .chip { min-height: 52px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper);
  font: inherit; font-weight: 700; font-size: 18px; color: var(--ink); cursor: pointer; }
.kc .chip[aria-pressed="true"] { border-color: var(--sea); background: var(--mist); }
.kc .hint { font-size: 15px; color: var(--slate); margin-top: 6px; }

.kc .primary {
  width: 100%; min-height: 56px; margin-top: 20px; border: 0; border-radius: 12px;
  background: var(--marigold); color: #1B1300; font: inherit; font-size: 19px; font-weight: 700; cursor: pointer;
}
.kc .primary:disabled { opacity: .55; cursor: progress; }

.kc .notice { border-radius: 10px; padding: 12px 14px; margin-top: 16px; font-size: 16px; }
.kc .notice.ok { background: #E6F4EC; color: #0F4D2E; }
.kc .notice.err { background: #FDECEA; color: #7A1A12; }

.kc .ledger { list-style: none; margin: 0; padding: 0; }
.kc .ledger li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.kc .ledger .what { font-weight: 700; }
.kc .ledger .when { font-size: 14px; color: var(--slate); }
.kc .ledger .earned { text-align: right; color: var(--go); font-weight: 700; }
.kc .ledger .moved { text-align: right; font-size: 14px; color: var(--slate); }
.kc .empty { padding: 24px 0; color: var(--slate); }

/* Rates page */
.kc-rate-hero { padding: 32px 0 8px; }
.kc-rate-hero h1 { font-size: 34px; line-height: 1.15; }
.kc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.kc-compare div { border: 2px solid var(--line); border-radius: 12px; padding: 14px; }
.kc-compare .ours { border-color: var(--sea); }
.kc-compare b { display: block; font-size: 28px; }
.kc-save { margin-top: 12px; font-weight: 700; color: var(--go); font-size: 19px; }

@media (prefers-reduced-motion: no-preference) {
  .kc .notice { animation: kc-in .18s ease-out; }
  @keyframes kc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}