:root {
  --bk-brand: #2F6DB4; --bk-bright: #4A90E2; --bk-soft: #E8F0FA;
  --bk-honey: #E8A317; --bk-honey-soft: #FBEFD3;
  --bk-ink: #16212C; --bk-muted: #5C6B7A; --bk-faint: #8A98A6;
  --bk-line: #E4E9EE; --bk-bg: #F6F8FA; --bk-surface: #fff;
  --bk-ok: #2E9E6B; --bk-ok-soft: #E4F4EC; --bk-r: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bk-bg);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--bk-ink); }
a { color: inherit; }
.bk-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.bk-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.bk-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; }
.bk-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #241a03;
  background: radial-gradient(circle at 32% 30%, var(--bk-honey), #c9880c); font-weight: 800; }
.bk-tag { color: var(--bk-muted); font-size: 13px; font-weight: 600; }
.bk-main { flex: 1; padding: 6px 18px 28px; }
.bk-foot { text-align: center; color: var(--bk-faint); font-size: 12px; padding: 18px; }

h1.bk-h { font-size: 21px; margin: 6px 0 2px; }
.bk-sub { color: var(--bk-muted); font-size: 14px; margin: 0 0 18px; }
.bk-back { display: inline-block; color: var(--bk-muted); text-decoration: none; font-size: 13px; margin-bottom: 8px; }

.bk-modes { display: flex; gap: 8px; margin-bottom: 18px; }
.bk-mode { flex: 1; text-align: center; border: 1.5px solid var(--bk-line); border-radius: var(--bk-r);
  padding: 12px 8px; text-decoration: none; background: var(--bk-surface); }
.bk-mode .m-ic { font-size: 20px; } .bk-mode .m-t { font-weight: 650; font-size: 14px; margin-top: 3px; }
.bk-mode .m-p { color: var(--bk-muted); font-size: 12px; }
.bk-mode.on { border-color: var(--bk-brand); background: var(--bk-soft); }
.bk-mode.on .m-t { color: var(--bk-brand); }

.bk-field { margin-bottom: 14px; }
.bk-field label { display: block; font-size: 12.5px; font-weight: 650; color: var(--bk-muted); margin-bottom: 5px; }
.bk-field input, .bk-field textarea { width: 100%; border: 1px solid var(--bk-line); border-radius: 10px;
  padding: 11px 12px; font-size: 15px; font-family: inherit; background: #fbfcfd; color: var(--bk-ink); }

.bk-svc { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--bk-line); border-radius: var(--bk-r);
  padding: 13px; margin-bottom: 9px; cursor: pointer; background: var(--bk-surface); }
.bk-svc:hover { border-color: var(--bk-bright); }
.bk-svc input { accent-color: var(--bk-brand); width: 18px; height: 18px; flex: none; }
.bk-svc .s-t { font-weight: 650; font-size: 15px; } .bk-svc .s-p { color: var(--bk-muted); font-size: 12.5px; }

.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.bk-day { flex: none; text-align: center; border: 1px solid var(--bk-line); border-radius: 12px; padding: 8px 12px;
  min-width: 58px; text-decoration: none; }
.bk-day .dd { font-size: 11px; color: var(--bk-muted); } .bk-day .dn { font-size: 17px; font-weight: 700; }
.bk-day.on { background: var(--bk-brand); border-color: var(--bk-brand); color: #fff; }
.bk-day.on .dd { color: rgba(255,255,255,.85); }

.bk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-slot { border: 1px solid var(--bk-line); border-radius: 10px; padding: 12px 6px; text-align: center;
  font-weight: 650; font-size: 15px; text-decoration: none; background: var(--bk-surface); font-variant-numeric: tabular-nums; }
.bk-slot:hover { border-color: var(--bk-brand); color: var(--bk-brand); }

.bk-banner { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; }
.bk-banner.warn { background: var(--bk-honey-soft); color: #6b5316; }
.bk-banner.ok { background: var(--bk-ok-soft); color: var(--bk-ok); font-weight: 600; }

.bk-deposit { border: 1px dashed var(--bk-honey); background: var(--bk-honey-soft); border-radius: var(--bk-r);
  padding: 13px; margin: 6px 0 16px; }
.bk-deposit b { font-size: 19px; } .bk-deposit p { margin: 5px 0 0; font-size: 12.5px; color: #6b5316; line-height: 1.5; }
.bk-chk { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: 13px; color: var(--bk-muted); }
.bk-chk input { accent-color: var(--bk-brand); width: 18px; height: 18px; margin-top: 1px; flex: none; }

.bk-cta { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--bk-brand); color: #fff;
  font: inherit; font-weight: 700; font-size: 16px; padding: 15px; cursor: pointer; text-align: center; text-decoration: none; }
.bk-cta:hover { background: var(--bk-bright); }
.bk-foot-note { text-align: center; color: var(--bk-faint); font-size: 11.5px; margin-top: 10px; }

.bk-summary { border: 1px solid var(--bk-line); border-radius: var(--bk-r); overflow: hidden; margin-bottom: 16px; background: var(--bk-surface); }
.bk-summary .r { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 14px; }
.bk-summary .r + .r { border-top: 1px solid var(--bk-line); }
.bk-summary .r .l { color: var(--bk-muted); }
.bk-success { text-align: center; padding-top: 20px; }
.bk-success .ring { width: 64px; height: 64px; border-radius: 50%; background: var(--bk-ok-soft); color: var(--bk-ok);
  display: grid; place-items: center; font-size: 30px; margin: 0 auto 14px; }
.bk-empty { color: var(--bk-muted); text-align: center; padding: 26px 0; }