@font-face { font-family: "VillageFlex"; src: url("/assets/fonts/VillageFlex-Bold-WebS.woff") format("woff"); font-weight: 700; font-display: swap; }
:root { --bg: #171717; --panel: #222; --panel2: #2b2b2b; --line: #3a3a3a; --ink: #fff; --muted: #b3b3b3; --yellow: #fff500; --red: #ff1a1a; --good: #7bd88f; color-scheme: dark; }
* { box-sizing: border-box; }
body.bk { margin: 0; font: 16px/1.55 Montserrat, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--ink); background: var(--bg); }
.bk-top { background: #000; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 3px solid var(--yellow); box-shadow: 0 3px 0 var(--red); }
.bk-top a { display: block; width: 150px; height: 46px; background: url("/assets/logo.png") left center / contain no-repeat; text-indent: -9999px; overflow: hidden; }
.bk-top span { font-family: VillageFlex, sans-serif; font-size: .8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--yellow); }
.bk-main { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; }
.bk-foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 22px 16px 34px; background: #000; }
.bk-foot a, .bk-main a { color: var(--yellow); }
h1 { font-family: VillageFlex, sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: 4px; text-transform: uppercase; margin: 6px 0 20px; color: #fff; }
h2 { font-family: VillageFlex, sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 10px; color: var(--yellow); }
h3 { font-family: VillageFlex, sans-serif; font-size: .85rem; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: 3px; color: var(--red); }
.bk-card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 18px; margin: 0 0 16px; }
fieldset.bk-card { min-width: 0; }
legend { font-family: VillageFlex, sans-serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); padding: 0 6px; }
.bk-intro { border-left: 4px solid var(--red); }
.bk-intro b { color: var(--yellow); }
.bk-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.bk-groups span { border: 1px solid var(--yellow); border-radius: 2px; padding: 3px 10px; font-size: .88rem; color: var(--muted); }
.bk-groups b { color: #fff; }
label { display: block; margin: 0 0 14px; font-weight: 600; font-size: .92rem; color: #eee; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; font: inherit; font-weight: 400; color: #fff; background: #141414; border: 1px solid #4a4a4a; border-radius: 3px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--yellow); outline-offset: 0; border-color: var(--yellow); }
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bk-short { max-width: 260px; }
.bk-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); }
.bk-check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--yellow); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-more > summary { cursor: pointer; font-family: VillageFlex, sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: .9rem; color: var(--yellow); margin: 0 0 16px; list-style: none; }
.bk-more > summary::-webkit-details-marker { display: none; }
.bk-more[open] > summary { color: var(--muted); }
.bk-btn { display: inline-block; background: #000; color: #fff !important; border: 2px solid var(--yellow); border-radius: 0; padding: 14px 26px; font-family: VillageFlex, sans-serif; font-size: 1rem; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.bk-btn:hover, .bk-btn:focus { background: var(--yellow); color: #000 !important; }
.bk-error { background: #2a0d0d; border: 1px solid var(--red); border-left-width: 4px; color: #ffd6d6; border-radius: 3px; padding: 12px 14px; margin: 0 0 16px; }
.bk-small { font-size: .88rem; color: var(--muted); }
.bk-tag { font-family: Montserrat, system-ui, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: 1px; background: var(--yellow); color: #000; border-radius: 2px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.bk-classes { margin-bottom: 12px; }
.bk-class { display: grid; grid-template-columns: auto 5.5rem 1fr auto; grid-template-areas: "radio time age spaces" "radio time starts spaces"; gap: 2px 12px; align-items: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin: 0 0 8px; font-weight: 400; cursor: pointer; transition: border-color .15s; }
.bk-class:hover { border-color: #777; }
.bk-class input { grid-area: radio; width: 20px; height: 20px; margin: 0; accent-color: var(--yellow); }
.bk-time { grid-area: time; font-family: VillageFlex, sans-serif; font-size: 1.1rem; letter-spacing: 1px; color: #fff; }
.bk-age { grid-area: age; font-weight: 600; color: #fff; }
.bk-age small { display: block; font-weight: 400; color: var(--muted); }
.bk-starts { grid-area: starts; font-size: .85rem; color: var(--muted); }
.bk-spaces { grid-area: spaces; font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--good); text-align: right; }
.bk-class:has(input:checked) { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); background: #2f2d12; }
.bk-class.is-full { opacity: .45; cursor: not-allowed; }
.bk-class.is-full .bk-spaces { color: var(--red); }
.bk-summary { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.bk-summary td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bk-summary small { color: var(--muted); }
.bk-num { text-align: right; white-space: nowrap; }
.bk-total td { font-weight: 700; color: var(--yellow); border-bottom: 0; }
@media (max-width: 560px) {
  h1 { font-size: 1.5rem; letter-spacing: 3px; }
  .bk-two { grid-template-columns: 1fr; }
  .bk-class { grid-template-columns: auto 1fr auto; grid-template-areas: "radio time spaces" "radio age age" "radio starts starts"; }
  .bk-btn { width: 100%; text-align: center; }
  .bk-top span { display: none; }
}