.cmp-scrim {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 2.5vh, 32px);
  background: rgba(8, 12, 24, .62);
  -webkit-backdrop-filter: blur(14px) saturate(.9); backdrop-filter: blur(14px) saturate(.9);
  animation: cmp-fade .18s ease;
}
[data-theme="dark"] .cmp-scrim { background: rgba(4, 7, 14, .74); }
@keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } }

.cmp-modal {
  position: relative; display: flex; flex-direction: column;
  width: min(1080px, 96vw); height: min(760px, 92vh);
  border: 1px solid var(--bh-edge); border-radius: var(--bh-r-block, 24px);
  background: rgba(252, 252, 254, .94);
  -webkit-backdrop-filter: blur(var(--glass-blur, 30px)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur, 30px)) saturate(180%);
  box-shadow: var(--bh-rim), var(--bh-spec), var(--glass-shadow);
  color: var(--bh-ink); font-family: var(--bh-body);
  overflow: hidden; isolation: isolate;
  animation: cmp-pop .22s cubic-bezier(.2, .9, .3, 1.1);
}
[data-theme="light"] .cmp-modal, :root:not([data-theme]) .cmp-modal {
  box-shadow: var(--bh-rim), var(--bh-spec), 0 24px 70px -18px rgba(13, 18, 38, .45), 0 6px 20px -8px rgba(13, 18, 38, .30);
  border-color: rgba(13, 18, 38, .14);
}
[data-theme="dark"] .cmp-modal { background: rgba(22, 26, 40, .95); border-color: rgba(255, 255, 255, .10); }
@keyframes cmp-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

.cmp-modal::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), transparent 24%);
  opacity: .3; mix-blend-mode: overlay;
}
[data-theme="dark"] .cmp-modal::after { background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 28%); opacity: .4; }

.cmp-header {
  position: relative; z-index: 7; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--bh-line);
}
.cmp-header__title {
  font-family: var(--bh-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 1.02rem; color: var(--bh-ink); margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.cmp-header__title .cmp-trophy { font-size: 1.15rem; line-height: 1; }
.cmp-header__spacer { flex: 1 1 auto; }
.cmp-x {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--bh-edge);
  background: var(--bh-chrome-fill); color: var(--bh-ink-2); cursor: pointer;
  font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.cmp-x:hover { background: var(--bh-chrome-fill-hover, rgba(0,0,0,.06)); transform: rotate(90deg); }

.cmp-body { position: relative; z-index: 7; flex: 1 1 auto; display: flex; min-height: 0; }
.cmp-master {
  flex: 0 0 clamp(300px, 30%, 380px); display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--bh-line);
}
.cmp-detail { flex: 1 1 auto; position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.cmp-modal.is-narrow .cmp-master { position: absolute; inset: 0 auto 0 0; z-index: 9; width: 86%; max-width: 320px; background: var(--bh-glass-2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%); backdrop-filter: blur(var(--glass-blur)) saturate(200%); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--glass-shadow); }
.cmp-modal.is-narrow.master-open .cmp-master { transform: none; }
.cmp-modal:not(.is-narrow) .cmp-master-toggle { display: none; }
.cmp-master-toggle { flex: 0 0 auto; width: 34px; height: 34px; margin-right: 6px; padding: 0; border: 1px solid var(--bh-edge); border-radius: var(--bh-r-pill, 10px); background: transparent; color: var(--bh-ink-2); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cmp-master-toggle:hover { background: var(--bh-track, rgba(0, 0, 0, .05)); color: var(--bh-ink); }

.cmp-search-wrap { flex: 0 0 auto; padding: 12px 12px 8px; }
.cmp-search {
  width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: var(--bh-r-pill);
  border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); color: var(--bh-ink);
  font-family: var(--bh-body); font-size: .85rem;
}
.cmp-search:focus { outline: none; border-color: var(--accent, var(--bh-blue)); }
.cmp-filters { display: flex; gap: 4px; padding: 0 12px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cmp-filters::-webkit-scrollbar { display: none; }
.cmp-filter {
  flex: 0 0 auto; padding: 5px 11px; border-radius: var(--bh-r-pill); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--bh-ink-2);
  font-family: var(--bh-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  transition: background .15s, color .15s;
}
.cmp-filter:hover { background: var(--bh-track, rgba(0,0,0,.05)); color: var(--bh-ink); }
.cmp-filter.is-on { background: var(--accent-soft, rgba(0,0,0,.08)); color: var(--accent-ink, var(--bh-ink)); }

.cmp-list { flex: 1 1 auto; overflow-y: auto; padding: 0 8px 8px; }
.cmp-list-group-h {
  font-family: var(--bh-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--bh-ink-3); padding: 12px 8px 5px;
}
.cmp-list-group-h.is-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; }
.cmp-list-group-h .cmp-caret { transition: transform .15s; font-size: .7rem; }
.cmp-list-group.collapsed .cmp-caret { transform: rotate(-90deg); }
.cmp-list-group.collapsed .cmp-row { display: none; }

.cmp-row {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 9px 10px; margin: 2px 0; border-radius: var(--bh-r-tile); cursor: pointer;
  border: 1px solid transparent; transition: background .14s, border-color .14s;
}
.cmp-row:hover { background: var(--bh-track, rgba(0,0,0,.045)); }
.cmp-row.is-selected { background: var(--accent-soft, rgba(0,0,0,.07)); border-color: var(--accent, var(--bh-edge)); }
.cmp-row__main { min-width: 0; }
.cmp-row__name {
  font-family: var(--bh-display); font-weight: 700; font-size: .85rem; color: var(--bh-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em;
}
.cmp-row__meta { font-size: .68rem; color: var(--bh-ink-3); margin-top: 1px; display: flex; align-items: center; gap: 5px; }
.cmp-row__glyph { font-size: .92rem; }
.cmp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--bh-ink-3); box-shadow: 0 0 0 2px var(--bh-glass-stop, transparent); }
.cmp-dot.s-active { background: var(--bh-green, #2ecc71); animation: cmp-pulse 1.8s ease-in-out infinite; }
.cmp-dot.s-scheduled { background: var(--bh-blue, #3b82f6); }
.cmp-dot.s-draft { background: var(--bh-ink-3, #9aa3ba); }
.cmp-dot.s-finished { background: var(--bh-pop, #f0a02e); }
.cmp-dot.s-archived { background: var(--bh-ink-3); opacity: .5; }
@keyframes cmp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); } 50% { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); } }
.cmp-payflag { color: var(--bh-pop, #f0a02e); font-size: .8rem; }
.cmp-row__act {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bh-edge);
  background: var(--bh-chrome-fill); color: var(--bh-ink-2); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .14s, background .14s;
}
.cmp-row:hover .cmp-row__act, .cmp-row.is-selected .cmp-row__act, .cmp-row:focus-within .cmp-row__act, .cmp-row__act:focus-visible { opacity: 1; }
.cmp-row__act:hover { background: var(--accent-soft, rgba(0,0,0,.08)); color: var(--accent-ink, var(--bh-ink)); }

.cmp-new {
  position: sticky; bottom: 0; margin: 8px; padding: 11px; border-radius: var(--bh-r-pill);
  border: 1px dashed var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink);
  font-family: var(--bh-display); font-weight: 700; cursor: pointer; width: calc(100% - 16px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s, border-color .15s;
}
.cmp-new:hover { background: var(--accent-soft, rgba(0,0,0,.06)); border-color: var(--accent, var(--bh-blue)); }

.cmp-empty { padding: 28px 16px; text-align: center; color: var(--bh-ink-3); font-size: .82rem; }

.cmp-arena {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: .5;
}
.cmp-arena::before, .cmp-arena::after { content: ""; position: absolute; inset: -20%; }
[data-theme="dark"] .cmp-arena { opacity: .42; }
.cmp-modal:not([data-comp-theme]):not([data-comp-welcome]) .cmp-arena { display: none; }
.cmp-modal[data-comp-welcome] .cmp-arena {
  display: block; opacity: .6;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(120, 140, 180, .10), transparent 60%),
    linear-gradient(180deg, rgba(60, 72, 100, .04), rgba(60, 72, 100, .09));
}
.cmp-modal[data-comp-welcome] .cmp-arena::before {
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(120, 140, 180, .14) 60px 96px);
  height: 5px; top: auto; bottom: 14%; left: -20%; right: -20%; inset: auto; opacity: .25;
  animation: cmp-road 3.2s linear infinite;
}
[data-theme="dark"] .cmp-modal[data-comp-welcome] .cmp-arena { opacity: .4; }

.cmp-detail > .cmp-stripe-bar,
.cmp-detail > .cmp-detail-head,
.cmp-detail > .cmp-actionbar,
.cmp-detail > .cmp-detail-scroll,
.cmp-detail > .cmp-footer,
.cmp-detail > .cmp-welcome { position: relative; z-index: 1; }

.cmp-modal[data-comp-theme="tdf"] .cmp-arena {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(254, 221, 0, .10), transparent 60%),
    linear-gradient(180deg, rgba(20, 20, 24, .04), rgba(20, 20, 24, .10));
}
.cmp-modal[data-comp-theme="tdf"] .cmp-arena::before {
  background: repeating-linear-gradient(90deg, transparent 0 54px, var(--tdf-yellow, #FEDD00) 54px 92px);
  height: 6px; top: auto; bottom: 12%; left: -20%; right: -20%; inset: auto; opacity: .22;
  animation: cmp-road 2.4s linear infinite;
}
.cmp-modal[data-comp-theme="tdf"] .cmp-arena::after {
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(31, 168, 76, .5) 40px 70px);
  height: 4px; top: auto; bottom: 8%; left: -20%; right: -20%; inset: auto; opacity: .14;
  animation: cmp-road 3.6s linear infinite;
}
@keyframes cmp-road { from { transform: translateX(0); } to { transform: translateX(92px); } }

.cmp-modal[data-comp-theme="vm"] .cmp-arena {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(201, 162, 39, .12), transparent 55%),
    linear-gradient(180deg, rgba(31, 138, 76, .10), rgba(15, 81, 50, .14));
}
.cmp-modal[data-comp-theme="vm"] .cmp-arena::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 70px, transparent 70px 140px);
  inset: 0; opacity: .5; animation: cmp-pitch 9s linear infinite;
}
.cmp-modal[data-comp-theme="vm"] .cmp-arena::after {
  width: 120px; height: 120px; border-radius: 50%; inset: auto; left: 50%; top: 38%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .5), rgba(201, 162, 39, .15) 60%, transparent 70%);
  opacity: .3; animation: cmp-float 6s ease-in-out infinite;
}
@keyframes cmp-pitch { from { transform: translateX(0); } to { transform: translateX(140px); } }
@keyframes cmp-float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -14px); } }

.cmp-modal[data-comp-theme="f1"] .cmp-arena {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 30, 0, .12), transparent 55%),
    linear-gradient(180deg, rgba(21, 21, 30, .10), rgba(21, 21, 30, .18));
}
.cmp-modal[data-comp-theme="f1"] .cmp-arena::before {
  background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 30, 0, .5) 60px 64px, transparent 64px 120px);
  inset: -40%; opacity: .16; animation: cmp-streak 1.6s linear infinite;
}
.cmp-modal[data-comp-theme="f1"] .cmp-arena::after {
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(255, 255, 255, .4) 90px 94px, transparent 94px 180px);
  inset: -40%; opacity: .08; animation: cmp-streak 2.6s linear infinite;
}
@keyframes cmp-streak { from { transform: translateX(0); } to { transform: translateX(-120px); } }

.cmp-sprite { position: absolute; pointer-events: none; will-change: transform; }
.cmp-sprite svg { display: block; }
.cmp-sprite.cmp-rider { bottom: 11%; left: 0; opacity: .85; animation: cmp-ride linear infinite; }
.cmp-modal[data-comp-theme="tdf"] .cmp-rider svg { color: var(--tdf-yellow, #FEDD00); }
@keyframes cmp-ride { 0% { transform: translateX(-12vw); } 100% { transform: translateX(96vw); } }
.cmp-sprite.cmp-ball { bottom: 16%; left: 0; opacity: .9; animation: cmp-roll linear infinite; }
@keyframes cmp-roll { 0% { transform: translateX(-10vw) rotate(0); } 100% { transform: translateX(94vw) rotate(900deg); } }
.cmp-sprite.cmp-conf { top: -6%; opacity: .75; animation: cmp-conf-fall linear infinite; }
@keyframes cmp-conf-fall { 0% { transform: translateY(-10%) rotate(0); } 100% { transform: translateY(560px) rotate(420deg); } }
.cmp-sprite.cmp-car { bottom: 13%; left: 0; opacity: .8; animation: cmp-zoom linear infinite; }
.cmp-modal[data-comp-theme="f1"] .cmp-car svg { color: var(--f1-red, #FF1E00); }
@keyframes cmp-zoom { 0% { transform: translateX(-16vw) skewX(-6deg); } 100% { transform: translateX(104vw) skewX(-6deg); } }

.cmp-modal[data-comp-theme="pakkeleg"] .cmp-arena {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201, 162, 39, .13), transparent 58%),
    linear-gradient(180deg, rgba(201, 162, 39, .04), rgba(120, 90, 10, .10));
}
.cmp-sprite.cmp-gift { bottom: 12%; left: 0; opacity: .85; animation: cmp-ride linear infinite; }
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-gift svg { color: var(--color-gold, #C9A227); }
.cmp-sprite.cmp-diefall { top: -6%; opacity: .7; animation: cmp-conf-fall linear infinite; }
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-diefall svg { color: var(--color-gold, #C9A227); }

@media (prefers-reduced-motion: reduce) {
  .cmp-arena::before, .cmp-arena::after, .cmp-sprite { animation: none !important; }
  .cmp-sprite.cmp-conf { display: none; }
}

.cmp-stripe-bar { flex: 0 0 auto; height: 6px; background: var(--cmp-stripe, var(--bh-line)); }
.cmp-detail-head {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 10px;
}
.cmp-back {
  display: none; flex: 0 0 auto; padding: 5px 10px; border-radius: var(--bh-r-pill); cursor: pointer;
  border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink-2); font-size: .78rem;
}
.cmp-modal.is-narrow .cmp-back { display: inline-flex; align-items: center; gap: 5px; }
.cmp-title-block { flex: 1 1 auto; min-width: 0; }
.cmp-detail-title {
  margin: 0; font-family: var(--cmp-font-display, var(--bh-display));
  font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--bh-ink);
  text-transform: var(--cmp-heading-transform, none); font-style: var(--cmp-heading-style, normal);
  letter-spacing: var(--cmp-heading-spacing, -.01em);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-detail-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .76rem; color: var(--bh-ink-2); flex-wrap: wrap; }
.cmp-ver-pill {
  font-family: var(--bh-mono); font-size: .64rem; padding: 2px 7px; border-radius: var(--bh-r-pill);
  border: 1px solid var(--bh-line); color: var(--bh-ink-3); background: var(--bh-track, transparent);
}
.cmp-live-pill {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--bh-mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 2px 8px; border-radius: var(--bh-r-pill);
}
.cmp-live-pill .cmp-dot { width: 7px; height: 7px; }

.cmp-actionbar {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 18px 12px;
  border-top: var(--cmp-top-border, 0);
}
.cmp-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--bh-r-pill);
  border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink);
  font-family: var(--bh-display); font-weight: 600; font-size: .78rem; cursor: pointer;
  transition: background .14s, transform .12s, filter .14s;
}
.cmp-act:hover { background: var(--bh-chrome-fill-hover, rgba(0,0,0,.05)); transform: translateY(-1px); }
.cmp-act.is-primary { background: var(--cmp-accent, var(--bh-blue)); color: var(--cmp-on-accent, #fff); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.cmp-act.is-primary:hover { filter: saturate(1.12) brightness(1.03); }
.cmp-act.is-danger { color: var(--bh-danger, #e0392b); }
.cmp-act.is-money { color: var(--bh-pop-deep, #d9803a); }
.cmp-act:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.cmp-detail-scroll { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 16px; }

.cmp-sec { margin: 0 0 9px; border: 1px solid var(--bh-line); border-radius: var(--bh-r-block); background: var(--card-bg); overflow: hidden; }
.cmp-sec__head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none;
  border-left: 3px solid var(--cmp-accent, transparent);
}
.cmp-sec.is-locked-open .cmp-sec__head { cursor: default; }
.cmp-sec__caret { font-size: .72rem; color: var(--bh-ink-3); transition: transform .16s; flex: 0 0 auto; }
.cmp-sec.collapsed .cmp-sec__caret { transform: rotate(-90deg); }
.cmp-sec__title {
  font-family: var(--bh-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--bh-ink); flex: 0 0 auto;
}
.cmp-sec__spacer { flex: 1 1 auto; }
.cmp-sec__chip {
  font-family: var(--bh-body); font-size: .72rem; color: var(--bh-ink-2); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%;
}
.cmp-sec__chip .cmp-chip-warn { color: var(--bh-danger, #e0392b); font-weight: 700; }
.cmp-sec__body { padding: 2px 14px 14px; border-top: 1px solid var(--bh-line); }
.cmp-sec.collapsed .cmp-sec__body { display: none; }
.cmp-sec.is-advanced { opacity: .92; }
.cmp-sec.is-advanced .cmp-sec__title { color: var(--bh-ink-2); }

.cmp-wizard-nav { display: flex; gap: 6px; padding: 6px 0 14px; flex-wrap: wrap; }
.cmp-wstep {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--bh-r-pill);
  font-family: var(--bh-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  border: 1px solid var(--bh-line); color: var(--bh-ink-3); background: transparent;
}
.cmp-wstep .cmp-wstep-n { width: 17px; height: 17px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bh-track, rgba(0,0,0,.07)); font-size: .6rem; }
.cmp-wstep.is-done { color: var(--bh-ink-2); }
.cmp-wstep.is-done .cmp-wstep-n { background: var(--cmp-accent, var(--bh-green)); color: var(--cmp-on-accent, #fff); }
.cmp-wstep.is-current { color: var(--bh-ink); border-color: var(--cmp-accent, var(--bh-blue)); background: var(--accent-soft, rgba(0,0,0,.05)); }
.cmp-wstep.is-current .cmp-wstep-n { background: var(--cmp-accent, var(--bh-blue)); color: var(--cmp-on-accent, #fff); }
.cmp-detail-scroll.is-wizard .cmp-sec__head { pointer-events: none; }
.cmp-detail-scroll.is-wizard .cmp-sec__caret { display: none; }
.cmp-detail-scroll.is-wizard .cmp-sec { display: none; }
.cmp-detail-scroll.is-wizard .cmp-sec.wizard-active { display: block; }
.cmp-detail-scroll.is-wizard .cmp-sec.wizard-active .cmp-sec__body { display: block; }

.cmp-detail label.cmp-fld { display: block; margin: 0 0 10px; font-size: .74rem; color: var(--bh-ink-2); font-family: var(--bh-body); }
.cmp-detail label.cmp-fld > span.cmp-flab { display: block; margin-bottom: 4px; font-weight: 600; color: var(--bh-ink); }
.cmp-i, .cmp-detail input[type="text"], .cmp-detail input[type="number"], .cmp-detail input[type="datetime-local"], .cmp-detail select {
  width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: var(--bh-r-tile);
  border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); color: var(--bh-ink);
  font-family: var(--bh-body); font-size: .84rem;
}
.cmp-i:focus, .cmp-detail input:focus, .cmp-detail select:focus { outline: none; border-color: var(--cmp-accent, var(--bh-blue)); }
.cmp-ss { position: relative; }
.cmp-ss-menu { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; max-height: 210px; overflow-y: auto; background: var(--bh-surface, var(--bh-chrome-fill, #fff)); border: 1px solid var(--bh-line); border-radius: var(--bh-r-tile); box-shadow: 0 10px 28px rgba(0,0,0,.20); }
.cmp-ss-menu[hidden] { display: none; }
.cmp-ss-opt { padding: 8px 11px; cursor: pointer; font-size: .82rem; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--bh-line); }
.cmp-ss-opt:last-child { border-bottom: 0; }
.cmp-ss-opt:hover { background: var(--bh-track, rgba(127,127,127,.10)); }
.cmp-ss-sub { font-size: .7rem; color: var(--bh-ink-2); font-family: var(--bh-mono); margin-left: auto; }
.cmp-ss-empty { padding: 8px 11px; font-size: .78rem; color: var(--bh-ink-2); }
.cmp-i.cmp-locked { opacity: .6; cursor: not-allowed; background-image: linear-gradient(135deg, transparent 0, transparent 60%, rgba(127,127,127,.12) 60%); }
.cmp-detail input[type="color"] { width: 38px; height: 34px; padding: 2px; border-radius: var(--bh-r-tile); border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); cursor: pointer; }
.cmp-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cmp-hint { font-size: .68rem; color: var(--bh-ink-3); line-height: 1.4; }
.cmp-flab .cmp-hint { font-weight: 400; }
.cmp-info-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: var(--bh-r-tile);
  background: var(--bh-track, rgba(0,0,0,.04)); font-size: .72rem; color: var(--bh-ink-2); margin: 0 0 10px;
}
.cmp-info-row .cmp-deeplink { margin-left: auto; flex: 0 0 auto; color: var(--cmp-accent-text, var(--bh-blue)); cursor: pointer; font-weight: 600; white-space: nowrap; }
.cmp-validate-err { color: var(--bh-danger, #e0392b); font-size: .7rem; margin-top: -5px; margin-bottom: 9px; display: none; }
.cmp-validate-err.show { display: block; }

.cmp-pz-earned:empty { display: none; }
.cmp-pz-earned {
  padding: 12px 14px; border-radius: var(--bh-r-tile);
  background: linear-gradient(135deg, rgba(255,199,44,.16), rgba(255,199,44,.04));
  border: 1px solid rgba(255,199,44,.34);
}
.cmp-pz-earned-num { font-size: 1.32rem; font-weight: 800; color: var(--bh-ink-1); letter-spacing: -.01em; line-height: 1.1; }
.cmp-pz-earned-unit { font-size: .74rem; font-weight: 600; color: var(--bh-ink-2); letter-spacing: 0; }
.cmp-pz-earned-sub { font-size: .68rem; color: var(--bh-ink-3); margin-top: 5px; }
.cmp-pz-earned-bar { margin-top: 8px; height: 6px; border-radius: 4px; background: rgba(0,0,0,.10); overflow: hidden; }
.cmp-pz-earned-bar > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FFC72C, #FF8A0A); transition: width .3s ease; }

.cmp-presets { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }
.cmp-preset { padding: 5px 11px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); color: var(--bh-ink-2); font-size: .72rem; cursor: pointer; font-family: var(--bh-body); }
.cmp-preset:hover { background: var(--bh-track, rgba(0,0,0,.05)); }
.cmp-preset.is-on { background: var(--accent-soft, rgba(0,0,0,.08)); color: var(--accent-ink, var(--bh-ink)); border-color: transparent; }

.cmp-detail input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: 0 0 auto; margin: 0; cursor: pointer; position: relative;
  border-radius: 6px; border: 1.5px solid var(--bh-line); background: var(--bh-chrome-fill);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.cmp-detail input[type="checkbox"]:hover { border-color: var(--cmp-accent, var(--bh-blue, #0A84FF)); }
.cmp-detail input[type="checkbox"]:checked {
  background: var(--cmp-accent, var(--bh-blue, #0A84FF)); border-color: transparent;
  box-shadow: var(--bh-spec, inset 0 1px 0 rgba(255,255,255,.4));
}
.cmp-detail input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid var(--cmp-on-accent, #fff); border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.cmp-detail input[type="checkbox"]:focus-visible { outline: 2px solid var(--cmp-accent, var(--bh-blue)); outline-offset: 2px; }

.cmp-tilegroup {
  border: 1px solid var(--bh-line); border-radius: var(--bh-r-tile);
  background: var(--bh-track, rgba(0,0,0,.03)); padding: 2px 12px; margin: 0 0 12px;
}
.cmp-tilegroup > .cmp-check,
.cmp-tilegroup > .cmp-notify-evrow { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--bh-line); }
.cmp-tilegroup > *:last-child { border-bottom: 0; }
.cmp-grouplabel {
  font-family: var(--bh-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--bh-ink-3); margin: 2px 0 6px;
}
.cmp-tilegroup.is-dim { opacity: .45; pointer-events: none; }

.cmp-pill-on, .cmp-pill-off {
  font-family: var(--bh-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; padding: 2px 9px; border-radius: var(--bh-r-pill); border: 1px solid transparent;
}
.cmp-pill-on { color: var(--bh-green, #1f9e5a); background: color-mix(in srgb, var(--bh-green, #1f9e5a) 16%, transparent); }
.cmp-pill-off { color: var(--bh-ink-3); background: var(--bh-track, rgba(0,0,0,.06)); border-color: var(--bh-line); }

.cmp-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px; font-size: .8rem; color: var(--bh-ink); cursor: pointer; }
.cmp-check input { margin-top: 1px; flex: 0 0 auto; }
.cmp-check .cmp-hint { display: block; margin-top: 1px; }
.cmp-notify-evrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cmp-notify-evrow .cmp-check { margin: 0; align-items: center; flex: 1 1 auto; min-width: 0; }
.cmp-notify-evrow .cmp-f-notify-dur { flex: 0 0 auto; width: auto; min-width: 118px; padding: 4px 8px; font-size: .7rem; }
.cmp-notify-test {
  flex: 0 0 auto; border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); color: var(--bh-ink);
  border-radius: var(--bh-r-pill); padding: 4px 14px; font-family: var(--bh-display); font-size: .68rem;
  font-weight: 600; cursor: pointer; box-shadow: var(--bh-spec, none); transition: background .15s, border-color .15s, transform .12s;
}
.cmp-notify-test:hover { background: var(--accent-soft, color-mix(in srgb, var(--cmp-accent, var(--bh-blue)) 16%, transparent)); border-color: var(--cmp-accent, var(--bh-blue)); transform: translateY(-1px); }
.cmp-notify-test:active { transform: translateY(0); }

.cmp-jpt { border: 1px solid var(--bh-line); border-radius: var(--bh-r-tile); background: var(--bh-track, rgba(0,0,0,.03)); padding: 8px 12px; margin: 0 0 8px; }
.cmp-jpt .cmp-jrow { display: flex; align-items: center; gap: 10px; }
.cmp-jpt .cmp-jrow .cmp-check { flex: 1 1 auto; min-width: 0; }
.cmp-jformula { display: flex; align-items: center; gap: 10px; margin: 9px 0 0; }
.cmp-jformula .cmp-flab { flex: 0 0 auto; margin: 0; font-size: .66rem; font-family: var(--bh-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--bh-ink-3); }
.cmp-jformula select { flex: 1 1 auto; }
.cmp-jadv { display: flex; gap: 8px; margin-top: 8px; }
.cmp-jadv-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.cmp-jadv-f > span { font-family: var(--bh-mono); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bh-ink-3); }
.cmp-jadv-f input { width: 100%; }
.cmp-jadv-ms { flex: 1.7 1 0; }
.cmp-jpt.is-improve .cmp-jmode, .cmp-jpt.is-improve .cmp-jptcfg { opacity: .38; pointer-events: none; }
.cmp-jmode { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--bh-line); border-radius: var(--bh-r-pill); overflow: hidden; }
.cmp-jmode-btn { border: 0; background: transparent; color: var(--bh-ink-2); font-family: var(--bh-display); font-weight: 700; font-size: .68rem; padding: 5px 13px; cursor: pointer; transition: background .14s, color .14s; }
.cmp-jmode-btn.is-on { background: var(--cmp-accent, var(--bh-blue, #0A84FF)); color: var(--cmp-on-accent, #fff); }
.cmp-jptcfg { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bh-line); }
.cmp-jptcfg[hidden] { display: none; }
.cmp-jpt-expl { font-size: .72rem; color: var(--bh-ink-2); line-height: 1.45; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  background: color-mix(in srgb, var(--cmp-accent, var(--bh-blue, #0A84FF)) 9%, transparent); }
.cmp-jpt-expl b { color: var(--bh-ink); font-weight: 800; }
.cmp-jpt-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-jpt-pre { border: 1px solid var(--bh-line); background: var(--bh-chrome-fill); color: var(--bh-ink-2); border-radius: var(--bh-r-pill); padding: 4px 12px; font-family: var(--bh-display); font-weight: 700; font-size: .66rem; cursor: pointer; transition: .14s; }
.cmp-jpt-pre:hover { border-color: var(--cmp-accent, var(--bh-blue)); color: var(--bh-ink); transform: translateY(-1px); }
.cmp-warn-box { border: 1px solid var(--bh-danger, #e0392b); border-radius: var(--bh-r-tile); padding: 8px 10px; background: rgba(224, 57, 43, .07); font-size: .72rem; color: var(--bh-ink); margin: 4px 0 10px; }

.cmp-team { border: 1px solid var(--bh-line); border-radius: var(--bh-r-tile); padding: 10px; margin: 0 0 9px; background: var(--bh-track, rgba(0,0,0,.02)); }
.cmp-thead { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.cmp-tname { flex: 1 1 auto; }
.cmp-trm, .cmp-frm { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink-2); cursor: pointer; font-size: .85rem; }
.cmp-trm:hover, .cmp-frm:hover { color: var(--bh-danger, #e0392b); }
.cmp-team.is-locked { opacity: .82; }
.cmp-stagerow.is-locked { opacity: .66; cursor: not-allowed; }
.cmp-team.is-locked .cmp-tname, .cmp-team.is-locked .cmp-tval, .cmp-team.is-locked .cmp-tkind { cursor: not-allowed; }
.cmp-tlocked { flex: 0 0 auto; font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bh-ink-2); background: var(--bh-chrome-fill); border: 1px solid var(--bh-edge); border-radius: 999px; padding: 3px 9px; }
.cmp-filters-box { display: flex; flex-direction: column; gap: 6px; }
.cmp-filter-row { display: grid; grid-template-columns: 1fr 1.2fr auto auto; gap: 6px; align-items: center; }
.cmp-tcount { font-family: var(--bh-mono); font-size: .68rem; color: var(--bh-ink-3); white-space: nowrap; }
.cmp-tcount.is-zero { color: var(--bh-danger, #e0392b); }
.cmp-addfilter, .cmp-addteam { margin-top: 7px; padding: 6px 11px; border-radius: var(--bh-r-pill); border: 1px dashed var(--bh-edge); background: transparent; color: var(--bh-ink-2); cursor: pointer; font-size: .74rem; font-family: var(--bh-body); }
.cmp-addfilter:hover, .cmp-addteam:hover { background: var(--bh-track, rgba(0,0,0,.04)); }
.cmp-tmembers-wrap { margin-top: 7px; }
.cmp-tmembers-toggle { padding: 4px 10px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: transparent; color: var(--bh-ink-2); cursor: pointer; font-size: .72rem; font-family: var(--bh-body); }
.cmp-tmembers-toggle:hover:not(:disabled) { background: var(--bh-track, rgba(0,0,0,.04)); }
.cmp-tmembers-toggle:disabled { opacity: .5; cursor: default; }
.cmp-tmembers { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-mnote { flex: 1 1 100%; font-size: .72rem; color: var(--bh-ink-3); }
.cmp-mchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: var(--bh-surface, #fff); font-size: .74rem; color: var(--bh-ink-1); max-width: 100%; }
.cmp-mname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15ch; }
.cmp-mchip.is-excluded { opacity: .55; text-decoration: line-through; border-style: dashed; }
.cmp-mchip.is-excluded .cmp-mname { text-decoration: line-through; }
.cmp-mx { width: 18px; height: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: var(--bh-track, rgba(0,0,0,.06)); color: var(--bh-ink-2); cursor: pointer; font-size: .9rem; padding: 0; flex: 0 0 auto; }
.cmp-mx:hover { background: var(--bh-danger, #e0392b); color: #fff; }
.cmp-mchip.is-excluded .cmp-mx:hover { background: var(--bh-good, #1FA84C); }
.cmp-autorow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cmp-dims { display: flex; gap: 8px; flex-wrap: wrap; }
.cmp-dimchk { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--bh-ink-2); }
.cmp-autoteams { padding: 5px 11px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink); cursor: pointer; font-size: .72rem; font-family: var(--bh-display); font-weight: 600; }

.cmp-jrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: .82rem; color: var(--bh-ink); border-bottom: 1px solid var(--bh-line); }
.cmp-jrow:last-child { border-bottom: 0; }
.cmp-jrow .cmp-hint { margin-left: auto; text-align: right; }
.cmp-stages-sec { margin-top: 4px; }
.cmp-stagebtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.cmp-stagebtns button { padding: 5px 10px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink-2); cursor: pointer; font-size: .72rem; }
.cmp-stagelist { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.cmp-stagerow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--bh-r-tile); font-size: .78rem; color: var(--bh-ink); }
.cmp-stagerow:hover { background: var(--bh-track, rgba(0,0,0,.04)); }
.cmp-stagerow.is-custom { border: 1px dashed var(--bh-edge); }
.cmp-stagerow .cmp-hint { margin-left: auto; }
.cmp-painter { width: 100%; height: 130px; border: 1px solid var(--bh-line); border-radius: var(--bh-r-tile); background: var(--bh-track, rgba(0,0,0,.03)); margin: 7px 0; touch-action: none; cursor: crosshair; }
.cmp-paint-svg { width: 100%; height: 100%; display: block; }
.cmp-csclimb { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; margin: 4px 0; }
.cmp-cs-gpxlabel { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--cmp-accent-text, var(--bh-blue)); cursor: pointer; margin: 4px 0; }
.cmp-cs-gpxlabel input { display: none; }

.cmp-cal-quick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 9px 0; font-size: .72rem; color: var(--bh-ink-2); }
.cmp-cal-quick .cmp-i { width: auto; flex: 0 0 auto; }
.cmp-cal-gen { padding: 6px 11px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink); cursor: pointer; font-size: .72rem; font-family: var(--bh-body); }
.cmp-cal-gen:hover { background: var(--accent-soft, rgba(0,0,0,.06)); }
.cmp-cal-list { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.cmp-cal-row { display: grid; grid-template-columns: auto minmax(0,1.4fr) minmax(0,1fr) auto auto auto; gap: 6px; align-items: center; }
.cmp-cal-row .cmp-i { width: 100%; }
.cmp-cal-n { font-family: var(--bh-mono); font-size: .68rem; color: var(--bh-ink-3); min-width: 26px; }
.cmp-cal-sprint { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; color: var(--bh-ink-2); white-space: nowrap; }

.cmp-footer {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 11px 18px;
  border-top: 1px solid var(--bh-line); background: var(--bh-glass-stop, transparent);
}
.cmp-footer__spacer { flex: 1 1 auto; }
.cmp-btn { padding: 9px 16px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: var(--bh-chrome-fill); color: var(--bh-ink); font-family: var(--bh-display); font-weight: 600; font-size: .82rem; cursor: pointer; transition: background .14s, transform .12s, filter .14s; }
.cmp-btn:hover { background: var(--bh-chrome-fill-hover, rgba(0,0,0,.05)); }
.cmp-btn.primary { background: var(--cmp-accent, var(--bh-blue)); color: var(--cmp-on-accent, #fff); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.cmp-btn.primary:hover { filter: saturate(1.12) brightness(1.03); transform: translateY(-1px); }
.cmp-btn:disabled { opacity: .45; cursor: not-allowed; }

.cmp-welcome { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; padding: 36px 32px; gap: 22px; max-width: 680px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.cmp-welcome__h { font-family: var(--bh-display); font-weight: 800; font-size: 1.45rem; color: var(--bh-ink); }
.cmp-welcome__p { font-size: .85rem; color: var(--bh-ink-2); max-width: 360px; }
.cmp-welcome__sec { width: 100%; }
.cmp-welcome__sec-h { font-family: var(--bh-display); font-weight: 800; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bh-ink-3); margin-bottom: 10px; }
.cmp-welcome__stats { display: flex; gap: 10px; width: 100%; }
.cmp-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--bh-r-block); border: 1px solid var(--bh-edge); background: var(--card-bg); cursor: pointer; text-align: left; transition: transform .15s, border-color .15s; }
.cmp-stat:hover { transform: translateY(-2px); border-color: var(--accent, var(--bh-blue)); }
.cmp-stat b { font-family: var(--bh-display); font-size: 1.4rem; color: var(--bh-ink); line-height: 1.1; }
.cmp-stat span { font-size: .62rem; color: var(--bh-ink-3); text-transform: uppercase; letter-spacing: .03em; }
.cmp-live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cmp-live-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; border-radius: var(--bh-r-block); border: 1px solid var(--bh-edge); background: var(--card-bg); cursor: pointer; border-left: 4px solid var(--cmp-accent, var(--bh-blue)); transition: transform .15s, box-shadow .15s; }
.cmp-live-card:hover { transform: translateY(-2px); box-shadow: var(--bh-spec), var(--bh-shadow-flat); }
.cmp-live-card__glyph { font-size: 1.5rem; line-height: 1; }
.cmp-live-card__name { font-family: var(--bh-display); font-weight: 700; font-size: .92rem; color: var(--bh-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-live-card__meta { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--bh-ink-2); }
.cmp-live-card[data-comp-theme="tdf"] { --cmp-accent: var(--tdf-yellow); }
.cmp-live-card[data-comp-theme="vm"] { --cmp-accent: var(--vm-gold); }
.cmp-live-card[data-comp-theme="f1"] { --cmp-accent: var(--f1-red); }
.cmp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: var(--bh-ink-3); }
.cmp-dot.s-active { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .6); }
.cmp-empty-all { margin-left: 6px; padding: 3px 10px; border-radius: var(--bh-r-pill); border: 1px solid var(--bh-edge); background: transparent; color: var(--accent, var(--bh-blue)); cursor: pointer; font-size: .72rem; }
.cmp-empty-all:hover { background: var(--bh-track, rgba(0, 0, 0, .05)); }
.cmp-theme-cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.cmp-theme-card {
  width: 150px; padding: 22px 14px; border-radius: var(--bh-r-block); cursor: pointer;
  border: 1px solid var(--bh-edge); background: var(--card-bg); display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cmp-theme-card:hover { transform: translateY(-3px); box-shadow: var(--bh-spec), var(--bh-shadow-flat); }
.cmp-theme-card__glyph { font-size: 2.4rem; line-height: 1; }
.cmp-theme-card__name { font-family: var(--bh-display); font-weight: 700; font-size: .92rem; color: var(--bh-ink); }
.cmp-theme-card__sub { font-size: .68rem; color: var(--bh-ink-3); }
.cmp-theme-card[data-theme-card="tdf"]:hover { border-color: var(--tdf-yellow); }
.cmp-theme-card[data-theme-card="vm"]:hover { border-color: var(--vm-gold); }
.cmp-theme-card[data-theme-card="f1"]:hover { border-color: var(--f1-red); }

.cmp-modal[data-comp-theme="tdf"] {
  --cmp-accent: var(--tdf-yellow, #FEDD00);
  --cmp-on-accent: var(--tdf-yellow-ink, #111);
  --cmp-accent-text: var(--tdf-gold, #C9A800);
  --cmp-stripe: linear-gradient(90deg, #FEDD00 0 25%, #1FA84C 25% 50%, #E2231A 50% 75%, #F2F4F8 75%);
  --cmp-font-display: var(--tdf-font-display, 'Saira Condensed', sans-serif);
  --cmp-heading-transform: uppercase;
  --cmp-heading-style: italic;
  --cmp-heading-spacing: -.01em;
  --cmp-top-border: 0;
}
.cmp-modal[data-comp-theme="vm"] {
  --cmp-accent: var(--vm-gold, #C9A227);
  --cmp-on-accent: #1a1300;
  --cmp-accent-text: var(--vm-gold, #C9A227);
  --cmp-stripe: linear-gradient(90deg, var(--vm-grass, #1f8a4c), var(--vm-gold, #C9A227));
  --cmp-font-display: var(--bh-display);
  --cmp-heading-transform: none;
  --cmp-heading-style: normal;
  --cmp-heading-spacing: -.02em;
  --cmp-top-border: 0;
}
.cmp-modal[data-comp-theme="f1"] {
  --cmp-accent: var(--f1-red, #FF1E00);
  --cmp-on-accent: #fff;
  --cmp-accent-text: var(--f1-red-ink, #C20D00);
  --cmp-stripe: var(--f1-red, #FF1E00);
  --cmp-font-display: var(--bh-display);
  --cmp-heading-transform: uppercase;
  --cmp-heading-style: normal;
  --cmp-heading-spacing: .02em;
  --cmp-top-border: 3px solid var(--f1-red, #FF1E00);
}
.cmp-modal[data-comp-theme="pakkeleg"] {
  --cmp-accent: var(--color-gold, #C9A227);
  --cmp-on-accent: var(--color-on-gold, #1a1d26);
  --cmp-accent-text: var(--color-gold, #C9A227);
  --cmp-stripe: linear-gradient(90deg, var(--color-gold, #C9A227), color-mix(in srgb, var(--color-gold, #C9A227) 50%, transparent));
  --cmp-font-display: var(--bh-display);
  --cmp-heading-transform: none;
  --cmp-heading-style: normal;
  --cmp-heading-spacing: -.02em;
  --cmp-top-border: 0;
}
.cmp-live-card[data-comp-theme="pakkeleg"] { --cmp-accent: var(--color-gold, #C9A227); }
.pkl-dicebtns { display: flex; gap: .4rem; margin: .3rem 0 .2rem; }
.pkl-dicebtns .pkl-dbtn {
  flex: 1; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--bh-line);
  background: var(--bh-surface); color: var(--bh-ink-2); font-family: inherit; font-weight: 800;
  font-size: 1rem; cursor: pointer;
}
.pkl-dicebtns .pkl-dbtn.on { border-color: var(--cmp-accent); background: color-mix(in srgb, var(--cmp-accent) 14%, transparent); color: var(--cmp-accent-text); }
.pkl-dicebtns .pkl-dbtn:disabled { opacity: .5; cursor: not-allowed; }
.pkl-dice-n, .pkl-dice-pct { color: var(--cmp-accent-text); }

.cmp-modal[data-comp-theme="pakkeleg"] .cmp-detail-scroll {
  background: radial-gradient(130% 34% at 50% 0%, color-mix(in srgb, var(--color-gold, #C9A227) 6%, transparent), transparent 62%);
}
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-sec {
  border-color: color-mix(in srgb, var(--color-gold, #C9A227) 16%, var(--bh-line));
}
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-sec__head {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-gold, #C9A227) 7%, transparent), transparent 45%);
}
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-sec.wizard-active,
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-sec:not(.collapsed) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-gold, #C9A227) 22%, transparent);
}
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-sec__chip { color: color-mix(in srgb, var(--color-gold, #C9A227) 80%, var(--bh-ink-2)); }
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-wstep.is-current .cmp-wstep-n,
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-wstep.is-done .cmp-wstep-n {
  background: var(--color-gold, #C9A227); color: var(--color-on-gold, #1a1d26);
}
.cmp-modal[data-comp-theme="pakkeleg"] .cmp-detail-title {
  background: linear-gradient(92deg, var(--bh-ink), color-mix(in srgb, var(--color-gold, #C9A227) 55%, var(--bh-ink)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.cmp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 100001;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bh-edge); background: var(--bh-glass-2);
  -webkit-backdrop-filter: blur(var(--glass-blur, 30px)) saturate(200%); backdrop-filter: blur(var(--glass-blur, 30px)) saturate(200%);
  box-shadow: var(--bh-rim), var(--bh-spec), var(--glass-shadow);
  font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
  transition: transform .16s, box-shadow .16s;
}
.cmp-fab:hover { transform: translateY(-2px) scale(1.04); }
.cmp-fab:active { transform: scale(.96); }

.cmp-modal :focus-visible { outline: 2px solid var(--cmp-accent, var(--bh-blue)); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) {
  .cmp-modal, .cmp-fab { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-hi, #fff); }
  [data-theme="dark"] .cmp-modal, [data-theme="dark"] .cmp-fab { background: var(--surface-hi, #1a2236); }
  .cmp-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 12, 24, .86); }
  [data-theme="dark"] .cmp-scrim { background: rgba(2, 4, 9, .92); }
}

@media (max-width: 720px) {
  .cmp-modal { height: 94vh; width: 98vw; }
}