:root {
  color-scheme: dark;
  --bg: #080d15;
  --panel: #101827;
  --panel-2: #151f31;
  --line: #27354a;
  --line-soft: #1d293b;
  --muted: #8193ad;
  --text: #edf4ff;
  --accent: #48dfbd;
  --accent-2: #43a9ff;
  --danger: #ff667d;
  --warning: #ffca63;
  --radius: 13px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 0%, rgba(67,169,255,.10), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(72,223,189,.08), transparent 26%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(8,13,21,.90);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand-block { min-width: 250px; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .17em; }
.project-name {
  width: min(370px, 34vw);
  margin-top: 3px;
  padding: 3px 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  outline: none;
}
.project-name:focus { border-color: var(--accent); }
.top-actions, .toolbar-group, .runtime-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.btn, .file-btn, .icon-btn, .mini-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: #172235;
  border: 1px solid var(--line);
  border-radius: 9px;
  transition: .16s ease;
}
.btn, .file-btn { padding: 0 12px; }
.icon-btn { width: 35px; padding: 0; font-size: 17px; }
.mini-btn { width: 28px; min-height: 28px; padding: 0; }
.btn:hover, .file-btn:hover, .icon-btn:hover, .mini-btn:hover, .template-grid button:hover, .component-add:hover {
  transform: translateY(-1px);
  border-color: #496887;
}
.btn-accent { color: #06130f; background: linear-gradient(135deg, var(--accent), #9cf8e2); border-color: transparent; font-weight: 850; }
.danger { color: var(--danger); }
.file-btn input { display: none; }
.inline-field { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.inline-field.compact select { min-width: 150px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; color: #acbdd2; font-size: 12px; white-space: nowrap; }
.zoom-label { width: 48px; text-align: center; color: #b4c5da; font-size: 12px; }

input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="color"], select, textarea {
  width: 100%;
  color: var(--text);
  background: #0b1320;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  outline: none;
}
select { min-height: 35px; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(67,169,255,.10); }

.editor-shell { display: grid; grid-template-columns: 360px minmax(560px, 1fr) 360px; min-height: calc(100vh - 76px); }
.left-sidebar, .right-sidebar { background: rgba(15,23,37,.82); }
.left-sidebar { border-right: 1px solid var(--line); }
.right-sidebar { border-left: 1px solid var(--line); padding: 16px; }
.panel-scroll { max-height: calc(100vh - 76px); overflow: auto; position: sticky; top: 76px; }
.sidebar-section { padding: 16px; border-bottom: 1px solid rgba(39,53,74,.72); }
.sidebar-section.sticky-search { position: sticky; top: 0; z-index: 3; background: #101827; padding-bottom: 12px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
h2 { margin: 0 0 10px; color: #cbd8ea; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.section-title-row h2 { margin: 0; }
.template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.template-grid button { min-height: 37px; color: #d7e3f2; background: #151f31; border: 1px solid var(--line); border-radius: 9px; }
.tabs-manager { display: grid; gap: 7px; margin-top: 10px; }
.tab-manager-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #131e2e; }
.tab-manager-row input { padding: 6px 7px; }
.tab-manager-row button { width: 27px; height: 27px; border-radius: 7px; color: #bdcce0; background: #0c1421; border: 1px solid var(--line); }
.component-library { padding: 0 12px 24px; }
.component-category { margin-top: 14px; }
.component-category-title { margin: 0 4px 7px; color: #8195af; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.component-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.component-add { min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 9px; color: #dbe7f6; background: #141e2f; border: 1px dashed #30425d; border-radius: 9px; text-align: left; }
.component-add .component-icon { color: var(--accent); font-size: 15px; }
.component-add small { color: #7489a5; font-size: 10px; }

.workspace { min-width: 0; padding: 14px; }
.workspace-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.canvas-viewport { min-height: 650px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #080d15; box-shadow: inset 0 0 60px rgba(0,0,0,.32); }
.canvas-sizer { position: relative; }
.canvas-stage { position: relative; transform-origin: top left; overflow: hidden; user-select: none; }
.canvas-stage.show-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(67,169,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,169,255,.055) 1px, transparent 1px);
  background-size: var(--grid-size, 10px) var(--grid-size, 10px), var(--grid-size, 10px) var(--grid-size, 10px), calc(var(--grid-size, 10px) * 10) calc(var(--grid-size, 10px) * 10), calc(var(--grid-size, 10px) * 10) calc(var(--grid-size, 10px) * 10);
}
.canvas-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 16px; }
.builder-component { position: absolute; min-width: 40px; min-height: 28px; border: 1px solid transparent; border-radius: 10px; touch-action: none; }
.builder-component:hover { border-color: rgba(67,169,255,.45); }
.builder-component.selected { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(67,169,255,.14); }
.builder-component.is-hidden-layer { opacity: .22; filter: grayscale(.7); }
.builder-component.locked::after { content: "🔒"; position: absolute; right: 5px; top: 4px; font-size: 10px; z-index: 8; }
.builder-component.dragging { cursor: grabbing; }
.component-shell { width: 100%; height: 100%; overflow: hidden; }
.component-tag { position: absolute; top: -10px; left: 8px; z-index: 5; max-width: calc(100% - 16px); padding: 2px 7px; color: #9eb4d0; background: #111c2c; border: 1px solid #36506d; border-radius: 999px; font-size: 9px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resize-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; z-index: 6; border: 2px solid #08101b; border-radius: 3px; background: var(--accent-2); cursor: nwse-resize; }
.snap-guide { position: absolute; z-index: 999; pointer-events: none; background: #ff4fd8; box-shadow: 0 0 8px rgba(255,79,216,.65); }
.snap-guide.horizontal { left: 0; right: 0; height: 1px; }
.snap-guide.vertical { top: 0; bottom: 0; width: 1px; }

.data-inspector { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #0b1320; }
.data-inspector summary { padding: 10px 12px; color: #acbdd1; cursor: pointer; }
.data-inspector-grid { display: grid; grid-template-columns: 1fr 280px; border-top: 1px solid var(--line); }
.data-inspector pre { margin: 0; max-height: 310px; overflow: auto; padding: 12px; color: #9cebd8; font-size: 11px; }
.data-inspector-grid > div { border-left: 1px solid var(--line); padding: 12px; }
.mini-heading { color: #a8b8ce; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.data-paths { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; max-height: 280px; overflow: auto; }
.data-paths button { padding: 4px 7px; color: #b9cbe1; background: #152035; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }

.type-pill { padding: 3px 8px; color: #9cdcca; border: 1px solid rgba(72,223,189,.25); border-radius: 999px; background: rgba(72,223,189,.06); font-size: 10px; }
.empty-state { margin-top: 12px; padding: 28px 12px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
.inspector { display: grid; gap: 12px; margin-top: 12px; }
.inspector-group { display: grid; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(12,20,33,.7); }
.inspector-group-title { color: #95a9c3; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.field { display: grid; gap: 5px; }
.field > label { color: #afbed2; font-size: 11px; }
.field small { color: #7186a2; font-size: 10px; line-height: 1.35; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tab-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-check { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; color: #aebed2; background: #111b2a; font-size: 10px; }

/* Runtime and rendered controls */
.runtime-view { width: 100%; height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #080d15; }
.runtime-topbar { min-height: 70px; display: grid; grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) max-content; align-items: center; column-gap: 15px; row-gap: 8px; flex: 0 0 auto; padding: 9px 18px 0; border-bottom: 1px solid var(--line); background: #080d15; position: sticky; top: 0; z-index: 30; }
.runtime-actions { flex-wrap: nowrap; white-space: nowrap; }
.runtime-actions > .hockey-selected-chip { display: none !important; }
.runtime-topbar > div:first-child .eyebrow { font-size: 8px; }
.runtime-topbar > div:first-child #runtimeTitle { font-size: 14px; }
.runtime-tabs { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.runtime-tab { min-height: 35px; padding: 0 13px; color: #9dafc7; background: #141f31; border: 1px solid var(--line); border-radius: 9px; }
.runtime-tab.active { color: #06130f; background: var(--accent); border-color: transparent; font-weight: 800; }
.runtime-viewport { min-height: 0; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; overflow: hidden; padding: 10px; }
.runtime-stage {
  position: relative;
  margin: 0 auto;
  transform-origin: top left;
  overflow: hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,.36);
  /* Keep browser-native font rasterization in runtime mode. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
}
.runtime-component { position: absolute; overflow: hidden; }

.ui-box { width: 100%; height: 100%; overflow: hidden; }
.ui-container, .ui-card { width: 100%; height: 100%; border: 1px solid #26364d; border-radius: 12px; background: #111b2b; }
.ui-card { padding: 14px; }
.ui-heading { width: 100%; height: 100%; display: flex; align-items: center; font-size: 25px; font-weight: 850; line-height: 1.1; }
.ui-text { width: 100%; height: 100%; overflow: auto; line-height: 1.45; white-space: pre-wrap; }
.ui-data-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid #26364d; border-radius: 11px; background: rgba(17,27,43,.88); }
.ui-label { color: #8fa2bc; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.ui-value { margin-top: 5px; font-size: 18px; font-weight: 760; overflow-wrap: anywhere; }
.ui-kpi { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid #2a3a51; border-radius: 12px; background: linear-gradient(145deg, #17243a, #101928); }
.ui-kpi .ui-value { margin-top: 9px; font-size: 28px; font-weight: 900; }
.ui-badge { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 5px 10px; border-radius: 999px; color: #07120e; background: var(--accent); font-weight: 800; }
.ui-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-icon { width: 100%; height: 100%; display: grid; place-items: center; font-size: 38px; }
.ui-divider { width: 100%; height: 100%; display: flex; align-items: center; }
.ui-divider::after { content: ""; width: 100%; border-top: 1px solid #344760; }
.ui-spacer { width: 100%; height: 100%; border: 1px dashed rgba(130,151,180,.25); border-radius: 8px; }
.ui-progress { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ui-progress-track { width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #0b1320; border: 1px solid #28384e; }
.ui-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.ui-alert { width: 100%; height: 100%; display: flex; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,202,99,.36); border-radius: 11px; background: rgba(255,202,99,.08); }
.ui-list { margin: 0; padding: 12px 12px 12px 30px; width: 100%; height: 100%; overflow: auto; }
.ui-key-value { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(90px,.6fr) 1fr; gap: 7px 12px; align-content: start; padding: 11px; overflow: auto; border: 1px solid #27374d; border-radius: 11px; background: #101927; }
.ui-key-value dt { color: #8396b0; }
.ui-key-value dd { margin: 0; font-weight: 700; }

.ui-table-wrap { width: 100%; height: 100%; overflow: auto; border: 1px solid #27374d; border-radius: 11px; background: #0c1421; }
.ui-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.ui-table th, .ui-table td { padding: 10px 12px; border-bottom: 1px solid #202e42; text-align: left; white-space: nowrap; }
.ui-table th { position: sticky; top: 0; z-index: 1; color: #9db0c9; background: #151f31; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ui-table tbody tr:hover { background: rgba(67,169,255,.06); }
.ui-cards { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 9px; overflow: auto; }
.ui-repeat-card { padding: 11px; border: 1px solid #293a51; border-radius: 10px; background: #111b2b; }
.ui-repeat-card strong { display: block; margin-bottom: 5px; }
.ui-repeat-card small { color: #8ca0bb; }
.ui-chart { width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 9px; padding: 12px; border: 1px solid #27374d; border-radius: 11px; background: #0e1725; }
.ui-bar-item { min-width: 34px; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.ui-bar { width: min(42px,75%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.ui-bar-label { color: #8ea2bc; font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-line-chart { width: 100%; height: 100%; border: 1px solid #27374d; border-radius: 11px; background: #0e1725; }
.ui-json { width: 100%; height: 100%; margin: 0; overflow: auto; padding: 11px; color: #9cebd8; border: 1px solid #27374d; border-radius: 11px; background: #0a111c; font-size: 11px; }

.ui-button, .ui-link-button { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; color: #06130f; background: linear-gradient(135deg, var(--accent), #9cf8e2); font-weight: 850; text-decoration: none; }
.ui-button.secondary, .ui-link-button.secondary { color: var(--text); border-color: #33465f; background: #172235; }
.ui-button-group { width: 100%; height: 100%; display: flex; gap: 7px; }
.ui-button-group button { flex: 1; color: #dce7f5; background: #172235; border: 1px solid #30425b; border-radius: 9px; }
.ui-field { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; }
.ui-field > label { color: #9cafc7; font-size: 11px; }
.ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .ui-field select, .ui-field textarea { min-height: 38px; flex: 1; }
.ui-field textarea { resize: none; }
.ui-check-field { width: 100%; height: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid #293a51; border-radius: 10px; background: #111b2b; }
.ui-switch { position: relative; width: 42px; height: 23px; flex: none; }
.ui-switch input { opacity: 0; width: 0; height: 0; }
.ui-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #34445a; transition: .16s; }
.ui-switch-track::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .16s; }
.ui-switch input:checked + .ui-switch-track { background: var(--accent); }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(19px); }
.ui-radio-group { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; overflow: auto; }
.ui-radio-option { display: inline-flex; align-items: center; gap: 5px; }
.ui-accordion { width: 100%; height: 100%; border: 1px solid #293a51; border-radius: 10px; overflow: hidden; background: #111b2b; }
.ui-accordion button { width: 100%; min-height: 39px; padding: 0 12px; color: #dce7f5; background: #172235; border: 0; text-align: left; }
.ui-accordion-body { padding: 11px; overflow: auto; }
.ui-breadcrumb { width: 100%; height: 100%; display: flex; align-items: center; gap: 8px; color: #91a4bd; overflow: hidden; }
.ui-breadcrumb strong { color: #e3edf9; }
.ui-pagination { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; }
.ui-pagination button { width: 34px; height: 34px; color: #dbe7f5; background: #172235; border: 1px solid #30425b; border-radius: 8px; }
.ui-pagination button.active { color: #07130f; background: var(--accent); border-color: transparent; }
.ui-tab-bar { width: 100%; height: 100%; display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid #293a51; border-radius: 11px; background: #111b2b; overflow: auto; }
.ui-tab-bar button { min-height: 34px; padding: 0 12px; color: #91a4bd; background: transparent; border: 0; border-radius: 8px; white-space: nowrap; }
.ui-tab-bar button.active { color: #07130f; background: var(--accent); font-weight: 800; }

.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(2,6,12,.75); backdrop-filter: blur(6px); }
.modal-card { width: min(560px,100%); max-height: 80vh; overflow: auto; padding: 18px; border: 1px solid #344861; border-radius: 14px; background: #111b2b; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }
.modal-head button { width: 32px; height: 32px; color: #dbe7f5; background: #172235; border: 1px solid #30425b; border-radius: 8px; }
.backup-list { display: grid; gap: 8px; }
.backup-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #293a51; border-radius: 9px; background: #0c1421; }
.backup-row small { display: block; color: #8498b2; }

.toast { position: fixed; right: 18px; bottom: 18px; z-index: 2000; max-width: 370px; padding: 12px 15px; color: #07130f; background: var(--accent); border-radius: 10px; font-weight: 800; transform: translateY(90px); opacity: 0; transition: .2s ease; }
.toast.show { transform: translateY(0); opacity: 1; }

@media (max-width: 1320px) {
  .editor-shell { grid-template-columns: 310px minmax(500px,1fr); }
  .right-sidebar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: none; position: static; }
}
@media (max-width: 820px) {
  .topbar { align-items: flex-start; flex-direction: column; position: static; }
  .project-name { width: min(100%,370px); }
  .top-actions { justify-content: flex-start; }
  .editor-shell { display: block; }
  .panel-scroll { position: static; max-height: none; }
  .left-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-toolbar { align-items: flex-start; flex-direction: column; }
  .runtime-topbar { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
  .runtime-tabs { justify-content: flex-start; }
  .runtime-actions { width: 100%; justify-content: flex-start; overflow-x: auto; }
  .data-inspector-grid { display: block; }
  .data-inspector-grid > div { border-left: 0; border-top: 1px solid var(--line); }
}
.runtime-sizer { position: relative; margin: 0 auto; }
.canvas-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.canvas-settings-grid label { display: grid; gap: 4px; color: #91a4bd; font-size: 10px; }
.canvas-settings-grid input { padding: 7px; }
.canvas-settings-grid .canvas-background { grid-column: 1 / -1; }


/* ===== UI Builder v7: unified controls, nesting, states, triggers and CSS popovers ===== */
:root {
  --control-bg: #0a1321;
  --control-bg-hover: #101c2e;
  --control-border: #2a3b53;
  --control-border-hover: #486785;
  --control-height: 38px;
  --scroll-thumb: #344b68;
  --scroll-thumb-hover: #466789;
  --scroll-track: #0a111c;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b5574, #2a3f59);
  border: 2px solid var(--scroll-track);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #52779f, #385674); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }

.left-sidebar { min-width: 0; }
.component-library { padding: 0 15px 28px; }
.component-category-grid { gap: 9px; }
.component-add {
  min-height: 78px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-content: initial;
  align-content: center;
  column-gap: 9px;
  padding: 10px 11px;
  border-style: solid;
  background: linear-gradient(145deg, #141f31, #101927);
}
.component-add .component-icon {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(72,223,189,.2);
  border-radius: 8px;
  background: rgba(72,223,189,.06);
  font-size: 17px;
}
.component-add strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.component-add small { font-size: 10px; line-height: 1.3; }

/* Unified base controls */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="email"],
input[type="url"],
input[type="password"],
select,
textarea {
  min-height: var(--control-height);
  color: var(--text);
  background: linear-gradient(180deg, #0c1625, var(--control-bg));
  border: 1px solid var(--control-border);
  border-radius: 9px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--control-border-hover); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(67,169,255,.12), inset 0 1px 0 rgba(255,255,255,.035);
}
input::placeholder, textarea::placeholder { color: #657b98; }
input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Styled selects */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fa7c4 50%),
    linear-gradient(135deg, #8fa7c4 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-position:
    calc(100% - 17px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px),
    0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}
select[multiple] {
  min-height: 96px;
  padding-right: 9px;
  background-image: none;
}
select option {
  color: #eaf2ff;
  background: #101a2a;
}

/* Custom number steppers */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.css-number-control {
  width: 100%;
  min-height: var(--control-height);
  display: grid;
  grid-template-columns: minmax(0,1fr) 29px;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.css-number-control:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(67,169,255,.12);
}
.css-number-control > input[type="number"] {
  grid-row: 1 / 3;
  min-width: 0;
  height: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.css-number-control > input[type="number"]:focus { box-shadow: none; }
.number-step {
  width: 29px;
  min-height: 0;
  padding: 0;
  color: #9fb2ca;
  background: #142136;
  border: 0;
  border-left: 1px solid var(--control-border);
  font-size: 9px;
  line-height: 1;
}
.number-step:first-of-type { border-bottom: 1px solid var(--control-border); }
.number-step:hover { color: var(--accent); background: #1a2a42; }

/* Checkbox and radio styling */
input[type="checkbox"]:not(.switch-native),
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  color: #06130f;
  background: #0b1422;
  border: 1px solid #3a4d67;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
  cursor: pointer;
  transition: .15s ease;
}
input[type="checkbox"]:not(.switch-native) { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:not(.switch-native)::before {
  content: "✓";
  font-size: 12px;
  font-weight: 950;
  transform: scale(0);
  transition: transform .12s ease;
}
input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #06130f;
  transform: scale(0);
  transition: transform .12s ease;
}
input[type="checkbox"]:not(.switch-native):checked,
input[type="radio"]:checked {
  border-color: transparent;
  background: var(--accent);
}
input[type="checkbox"]:not(.switch-native):checked::before,
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:not(.switch-native):focus-visible,
input[type="radio"]:focus-visible { outline: 3px solid rgba(67,169,255,.2); outline-offset: 2px; }

/* Range */
input[type="range"] {
  appearance: none;
  width: 100%;
  height: 20px;
  padding: 0;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid #31445e;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), #23334a);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 19px;
  height: 19px;
  margin-top: -7px;
  border: 3px solid #0c1523;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-track {
  height: 7px;
  border: 1px solid #31445e;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), #23334a);
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #0c1523;
  border-radius: 50%;
  background: var(--accent);
}

/* Color picker: native picker + editable CSS value */
.color-control {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 30px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
}
.color-control:focus-within {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(67,169,255,.12);
}
.color-control input[type="color"] {
  width: 42px;
  min-height: 38px;
  padding: 5px;
  border: 0;
  border-right: 1px solid var(--control-border);
  border-radius: 0;
  background: #111d2e;
  cursor: pointer;
}
.color-control input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-control input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
}
.color-control input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
}
.color-control input[type="text"] {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.color-control input[type="text"]:focus { box-shadow: none; }
.color-clear {
  width: 30px;
  min-height: 38px;
  color: #8498b2;
  background: #131f31;
  border: 0;
  border-left: 1px solid var(--control-border);
}
.color-clear:hover { color: var(--danger); background: #1b263a; }
.color-control-static { margin-top: 1px; }
.canvas-settings-grid .canvas-background { grid-column: 1 / -1; }

/* File inputs */
input[type="file"] {
  width: 100%;
  min-height: 40px;
  padding: 5px;
  color: #9fb1c8;
  border: 1px dashed #39516f;
  border-radius: 9px;
  background: #0b1422;
}
input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 9px;
  padding: 0 10px;
  color: #07130f;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

/* Date/time calendar indicators */
input[type="date"],
input[type="time"],
input[type="datetime-local"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: .75;
  cursor: pointer;
  filter: invert(.85) sepia(.15) saturate(.7);
}

/* Parent/child container binding */
.builder-component.is-container {
  outline: 1px dashed rgba(72,223,189,.22);
  outline-offset: -4px;
}
.builder-component.has-parent .component-tag::before {
  content: "↳ ";
  color: var(--accent);
}
.builder-component.drop-target {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(72,223,189,.2), inset 0 0 0 2px rgba(72,223,189,.18);
}
.builder-component.drop-target::before {
  content: "ПРИВЯЗАТЬ К КОНТЕЙНЕРУ";
  position: absolute;
  inset: 8px;
  z-index: 30;
  display: grid;
  place-items: center;
  color: #cafff2;
  border: 1px dashed rgba(72,223,189,.7);
  border-radius: 8px;
  background: rgba(5,18,15,.48);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  pointer-events: none;
}
.parent-info {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(72,223,189,.18);
  border-radius: 9px;
  background: rgba(72,223,189,.045);
}
.parent-badge {
  color: #8fe8d3;
  font-size: 10px;
}
.container-help {
  margin: 0;
  color: #748aa7;
  font-size: 10px;
  line-height: 1.4;
}

/* Rendered color input */
.ui-color-control {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: var(--control-bg);
}
.ui-color-control input[type="color"] {
  width: 52px;
  height: 100%;
  min-height: 38px;
  padding: 5px;
  border: 0;
  border-right: 1px solid var(--control-border);
  background: #111d2e;
}
.ui-color-value {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #b9c9dc;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

/* Make field controls align consistently */
.field > .css-number-control,
.field > .color-control { width: 100%; }
.ui-field > .css-number-control,
.ui-field > .select-control,
.ui-field > .ui-color-control { flex: 1; min-height: 38px; }
.ui-check-field { cursor: default; }
.ui-radio-option { padding: 5px 8px; border: 1px solid #2d4058; border-radius: 8px; background: #111b2b; }

/* Wider menu responsive tuning */
@media (max-width: 1320px) {
  .component-category-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .component-category-grid { grid-template-columns: 1fr 1fr; }
}

/* v5: interaction states and trigger editor */
.btn-count {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  color: #07130f;
  background: var(--accent);
  font-size: 10px;
  font-weight: 900;
}

.interaction-state-preview {
  max-height: 150px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  color: #93ead6;
  border: 1px solid #263a50;
  border-radius: 9px;
  background: #09111c;
  font-size: 11px;
}

.trigger-open-button { width: 100%; }

.ui-box[data-action-id] { --state-ring: rgba(72,223,189,.58); }
.ui-box[data-action-id].interaction-active > *,
.ui-box[data-action-id] .interaction-active {
  box-shadow: 0 0 0 2px var(--state-ring), 0 0 24px rgba(72,223,189,.18);
}
.ui-box[data-action-id].interaction-pressed > * { transform: translateY(1px) scale(.992); }
.ui-box[data-state="true"] .ui-button,
.ui-box[data-state="true"] .ui-link-button { filter: brightness(1.08); }
.ui-button-group button.interaction-active,
.ui-tab-bar button.interaction-active,
.ui-pagination button.interaction-active {
  color: #07130f;
  border-color: transparent;
  background: var(--accent);
  font-weight: 850;
}

.trigger-editor { display: grid; gap: 12px; }
.trigger-help {
  padding: 12px 14px;
  border: 1px solid rgba(72,223,189,.24);
  border-radius: 11px;
  background: rgba(72,223,189,.06);
}
.trigger-help p { margin: 5px 0 0; color: #91a5be; font-size: 12px; }
.trigger-toolbar {
  position: sticky;
  top: -18px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto;
  gap: 9px;
  padding: 10px 0;
  background: #111b2b;
}
.trigger-list { display: grid; gap: 12px; }
.trigger-card {
  overflow: hidden;
  border: 1px solid #30445d;
  border-radius: 12px;
  background: #0c1522;
}
.trigger-card-head {
  display: grid;
  grid-template-columns: auto minmax(180px,1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border-bottom: 1px solid #26394f;
  background: #142033;
}
.trigger-enabled { display: inline-flex; align-items: center; gap: 6px; color: #b8c7da; font-size: 12px; white-space: nowrap; }
.trigger-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  padding: 10px;
}
.trigger-flow section {
  min-width: 0;
  padding: 10px;
  border: 1px solid #24364c;
  border-radius: 10px;
  background: #101a29;
}
.trigger-flow h4 { margin: 0 0 9px; color: #dfeafa; font-size: 12px; }
.trigger-flow h4 small { color: #788ca7; font-weight: 400; }
.trigger-flow label { display: grid; gap: 5px; margin-top: 8px; color: #91a6c0; font-size: 10px; }
.trigger-flow input,
.trigger-flow select,
.trigger-flow textarea { width: 100%; }
.trigger-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  color: #788da8;
  border-top: 1px solid #26394f;
  font-size: 10px;
}
.trigger-card-foot code { color: #8be8d2; }

.modal-card:has(.trigger-editor) { width: min(1180px, 96vw); max-height: 90vh; }

@media (max-width: 980px) {
  .trigger-flow { grid-template-columns: 1fr; }
  .trigger-card-foot { flex-direction: column; }
}

/* ========================================================================== 
   CSS popover controls — dropdowns, color picker, date and time picker
   Native browser panels are kept only as hidden value sources so every panel
   has the same visual language in Chromium, Firefox and embedded web views.
   ========================================================================== */
.native-control-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

.control-popover {
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  color: var(--text);
  border: 1px solid #334a66;
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(22,34,53,.99), rgba(10,18,31,.99));
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(18px);
  transform-origin: top left;
  animation: control-popover-in .13s ease-out;
}
@keyframes control-popover-in {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.control-popover-search { padding: 9px; border-bottom: 1px solid #263a52; }
.control-popover-search input { width: 100%; min-height: 36px; }
.control-popover-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 12px; }
.control-popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid #263a52;
  background: rgba(7,14,25,.42);
}
.popover-btn {
  min-height: 33px;
  padding: 0 11px;
  color: #c8d6e8;
  border: 1px solid #314861;
  border-radius: 8px;
  background: #152237;
  font-size: 12px;
}
.popover-btn:hover { border-color: #55799b; background: #1b2b43; }
.popover-btn.primary { color: #06130f; border-color: transparent; background: var(--accent); font-weight: 850; }
.popover-btn.secondary { color: #aabbd0; }

/* Custom dropdown */
.css-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  display: inline-flex;
  vertical-align: middle;
}
.field > .css-select-shell,
.ui-field > .css-select-shell,
.trigger-flow label > .css-select-shell { width: 100%; }
.inline-field > .css-select-shell { width: auto; min-width: 130px; flex: 0 1 auto; }
.inline-field.compact > .css-select-shell { min-width: 150px; }
.trigger-toolbar > .css-select-shell { width: 100%; }
.css-select-trigger {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  display: grid;
  grid-template-columns: minmax(0,1fr) 28px;
  align-items: center;
  padding: 0 5px 0 11px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: linear-gradient(180deg, #0e1929, #0a1321);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: .16s ease;
}
.css-select-trigger:hover { border-color: var(--control-border-hover); background: linear-gradient(180deg, #122036, #0c1727); }
.css-select-trigger:focus-visible,
.css-select-trigger.control-popover-open {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(67,169,255,.12);
}
.css-select-trigger.is-empty .css-select-value { color: #657b98; }
.css-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.css-select-arrow {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(67,86,112,.5);
}
.css-select-arrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #91a9c5;
  border-bottom: 2px solid #91a9c5;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .14s ease;
}
.css-select-trigger.control-popover-open .css-select-arrow::before { transform: translateY(2px) rotate(225deg); }
.css-select-options { max-height: min(330px, 48vh); overflow: auto; padding: 6px; }
.css-select-option {
  width: 100%;
  min-height: 37px;
  display: grid;
  grid-template-columns: 20px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  color: #c4d2e4;
  text-align: left;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.css-select-option:hover { color: #f4f8ff; background: rgba(67,169,255,.11); }
.css-select-option.selected { color: #eafff9; background: rgba(72,223,189,.10); }
.css-select-option:disabled { opacity: .38; }
.css-select-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.css-select-dot,
.css-select-check {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #415873;
  background: #0a1422;
}
.css-select-dot { border-radius: 50%; }
.css-select-check { border-radius: 5px; }
.css-select-option.selected .css-select-dot { border: 5px solid var(--accent); }
.css-select-option.selected .css-select-check { color: #06130f; border-color: transparent; background: var(--accent); }
.css-select-option.selected .css-select-check::before { content: "✓"; font-size: 11px; font-weight: 950; }

/* Custom date / time */
.css-datetime-shell { position: relative; width: 100%; min-width: 0; display: inline-flex; }
.css-datetime-trigger {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 24px;
  align-items: center;
  padding: 0 7px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--control-border);
  border-radius: 9px;
  background: linear-gradient(180deg, #0e1929, #0a1321);
  transition: .16s ease;
}
.css-datetime-trigger:hover { border-color: var(--control-border-hover); background: #101d30; }
.css-datetime-trigger:focus-visible,
.css-datetime-trigger.control-popover-open { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(67,169,255,.12); }
.css-datetime-trigger.is-empty .css-datetime-value { color: #657b98; }
.css-datetime-icon { color: var(--accent); font-size: 16px; }
.css-datetime-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.css-datetime-arrow::before { content: "⌄"; color: #8fa8c5; font-size: 14px; }
.css-datetime-popover { width: 342px; }
.css-calendar { padding: 10px; }
.css-calendar-head {
  min-height: 38px;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.css-calendar-head strong { text-align: center; text-transform: capitalize; font-size: 13px; }
.css-calendar-head button {
  width: 34px;
  height: 34px;
  color: #b9c9dc;
  border: 1px solid #2c425c;
  border-radius: 8px;
  background: #142137;
  font-size: 22px;
}
.css-calendar-head button:hover { color: var(--accent); border-color: #4b6c8c; }
.css-calendar-weekdays,
.css-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.css-calendar-weekdays { margin-bottom: 4px; }
.css-calendar-weekdays span { padding: 4px 0; color: #6f84a0; text-align: center; font-size: 10px; font-weight: 800; }
.css-calendar-day {
  aspect-ratio: 1;
  min-width: 0;
  color: #c9d7e8;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
}
.css-calendar-day:hover { color: #fff; border-color: #416185; background: rgba(67,169,255,.11); }
.css-calendar-day.outside { color: #52647b; }
.css-calendar-day.today { border-color: rgba(72,223,189,.55); color: #a8f6e3; }
.css-calendar-day.selected { color: #06130f; border-color: transparent; background: var(--accent); font-weight: 900; }
.css-time-panel { padding: 10px; border-top: 1px solid #263a52; }
.css-time-heading { margin-bottom: 8px; color: #8fa4bf; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.css-time-controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.css-time-unit {
  display: grid;
  grid-template-columns: 30px minmax(46px,1fr) 30px;
  grid-template-rows: auto 34px;
  gap: 5px;
  align-items: center;
  padding: 8px;
  border: 1px solid #2b405a;
  border-radius: 10px;
  background: #0d1828;
}
.css-time-unit > span { grid-column: 1 / -1; color: #7186a2; text-align: center; font-size: 9px; text-transform: uppercase; }
.css-time-unit button { width: 30px; height: 30px; color: #aec0d6; border: 1px solid #304761; border-radius: 7px; background: #16243a; }
.css-time-unit button:hover { color: var(--accent); border-color: #4d7297; }
.css-time-unit strong { color: #f0f6ff; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Custom color picker — familiar default-like layout */
.css-color-trigger {
  width: 42px;
  min-width: 42px;
  min-height: 38px;
  position: relative;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 0;
  border-right: 1px solid var(--control-border);
  border-radius: 0;
  background: #111d2e;
}
.ui-color-control > .css-color-trigger { width: 52px; min-width: 52px; }
.css-color-trigger:hover { background: #19273b; }
.css-color-trigger:focus-visible,
.css-color-trigger.control-popover-open { outline: none; box-shadow: inset 0 0 0 2px var(--accent-2); }
.css-color-swatch {
  width: 100%;
  height: 100%;
  min-height: 27px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  box-shadow: 0 2px 7px rgba(0,0,0,.28);
}
.css-color-edit {
  position: absolute;
  right: 2px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  color: #06130f;
  border-radius: 4px;
  background: var(--accent);
  font-size: 8px;
  font-weight: 900;
}
.css-color-popover {
  width: 378px;
  overflow: hidden;
  background: linear-gradient(180deg, #111d2e 0%, #0b1422 100%);
}
.css-color-head {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  align-items: stretch;
  gap: 10px;
  padding: 11px;
  border-bottom: 1px solid #263a52;
}
.css-color-preview {
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.14);
}
.css-color-hex-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #2b405a;
  border-radius: 9px;
  background: #0b1524;
}
.css-color-hex-field > span {
  height: 100%;
  display: grid;
  place-items: center;
  color: #7288a4;
  border-right: 1px solid #2b405a;
  background: #111d2e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.css-color-hex-field input {
  min-width: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.css-color-hex-field input.invalid {
  color: #ff8fa1;
  background: rgba(255,102,125,.08) !important;
}
.css-color-workspace {
  height: 218px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 24px;
  gap: 11px;
  padding: 12px 12px 9px;
}
.css-color-sv,
.css-color-hue {
  position: relative;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.css-color-sv {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    var(--picker-hue, #f00);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 4px 14px rgba(0,0,0,.24);
}
.css-color-sv:focus-visible,
.css-color-hue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67,169,255,.20), inset 0 0 0 1px rgba(255,255,255,.22);
}
.css-color-sv-cursor {
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.css-color-hue {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: linear-gradient(to bottom, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 3px 12px rgba(0,0,0,.25);
  cursor: ns-resize;
}
.css-color-hue-cursor {
  position: absolute;
  left: 50%;
  width: 34px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(10,18,30,.12);
  box-shadow: 0 1px 5px rgba(0,0,0,.9);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.css-color-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  padding: 0 12px 11px;
}
.css-color-channel {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid #2b405a;
  border-radius: 9px;
  background: #0b1524;
}
.css-color-channel > span {
  height: 100%;
  display: grid;
  place-items: center;
  color: #7e93ae;
  border-right: 1px solid #2b405a;
  background: #111d2e;
  font-size: 10px;
  font-weight: 900;
}
.css-color-channel input[type="number"] {
  min-width: 0;
  height: 36px;
  padding: 0 7px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.css-color-channel input[type="number"]::-webkit-inner-spin-button,
.css-color-channel input[type="number"]::-webkit-outer-spin-button {
  opacity: .5;
}
.css-color-palette {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  padding: 0 12px 12px;
}
.css-color-palette-item {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.css-color-palette-item:hover {
  z-index: 1;
  transform: translateY(-1px) scale(1.08);
  border-color: #fff;
}
.css-color-palette-item.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 3px 9px rgba(0,0,0,.4);
}
.css-color-palette-item.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}
.css-color-footer {
  justify-content: space-between;
}
.css-color-footer-tools {
  display: flex;
  gap: 7px;
}

@media (max-width: 600px) {
  .control-popover { max-width: calc(100vw - 16px) !important; }
  .css-datetime-popover, .css-color-popover { width: min(342px, calc(100vw - 16px)); }
}
.css-select-popover { width: min(390px, calc(100vw - 16px)); }


/* Keyboard shortcuts */
.component-shortcut-badge {
  position: absolute;
  right: 8px;
  bottom: -10px;
  z-index: 8;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  overflow: hidden;
  color: #06130f;
  background: #f5c451;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(0,0,0,.28);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.shortcut-list { display: grid; gap: 10px; }
.shortcut-empty {
  padding: 14px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
.shortcut-card {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(22,33,52,.92), rgba(12,20,33,.92));
}
.shortcut-card.has-conflict { border-color: rgba(245,196,81,.72); box-shadow: 0 0 0 3px rgba(245,196,81,.08); }
.shortcut-head, .shortcut-combo-row, .shortcut-toggles {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shortcut-head { justify-content: space-between; }
.shortcut-enabled { display: inline-flex; align-items: center; gap: 7px; color: #dce7f7; font-size: 12px; font-weight: 800; }
.shortcut-remove, .shortcut-clear {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #ff8da0;
  background: #121c2c;
}
.shortcut-remove { width: 30px; height: 30px; font-size: 19px; }
.shortcut-clear { min-height: 38px; padding: 0 10px; color: #aebed4; }
.shortcut-combo-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 800; letter-spacing: .02em; }
.shortcut-capture { flex: 0 0 auto; min-width: 92px; }
.shortcut-capture.is-capturing { color: #06130f; background: #f5c451; border-color: transparent; animation: shortcutPulse 1s ease-in-out infinite; }
.shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shortcut-toggles { align-items: stretch; flex-direction: column; gap: 2px; }
.shortcut-toggles .field { margin: 0; }
.shortcut-warning {
  padding: 8px 10px;
  color: #ffe6a5;
  background: rgba(245,196,81,.10);
  border: 1px solid rgba(245,196,81,.30);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.4;
}
.shortcut-add { width: 100%; margin-top: 10px; border-style: dashed; }
.inspector-group code { color: #8debd7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
@keyframes shortcutPulse { 50% { transform: translateY(-1px); box-shadow: 0 0 18px rgba(245,196,81,.35); } }
@media (max-width: 1180px) { .shortcut-grid { grid-template-columns: 1fr; } }


/* Timer component */
.ui-timer {
  --timer-accent: var(--accent, #48dfbd);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--timer-accent) 14%, transparent), transparent 48%),
    linear-gradient(145deg, #132038, #0c1524);
}
.ui-timer-label {
  max-width: 100%;
  overflow: hidden;
  color: #9cafc8;
  font-size: .72em;
  font-weight: 850;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-timer-display {
  color: inherit;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: clamp(30px, 3.6em, 70px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
  text-shadow: 0 0 24px color-mix(in srgb, var(--timer-accent) 34%, transparent);
  white-space: nowrap;
}
.ui-timer-status {
  min-height: 18px;
  padding: 2px 9px;
  color: #8195af;
  border: 1px solid #283c56;
  border-radius: 999px;
  background: rgba(8,15,25,.58);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ui-timer.is-running .ui-timer-status {
  color: #07130f;
  border-color: transparent;
  background: var(--timer-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--timer-accent) 38%, transparent);
}
.ui-timer.is-finished .ui-timer-status {
  color: #fff0f3;
  border-color: rgba(255,102,125,.45);
  background: rgba(255,102,125,.16);
}
.ui-timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 2px;
}
.ui-timer-controls button {
  min-width: 42px;
  height: 32px;
  padding: 0 10px;
  color: #c9d6e8;
  border: 1px solid #30445f;
  border-radius: 9px;
  background: linear-gradient(180deg, #1b2a40, #111c2c);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  font-weight: 900;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease;
}
.ui-timer-controls button:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: #4d6d94;
}
.ui-timer-controls button.active {
  color: #07130f;
  border-color: transparent;
  background: var(--timer-accent);
}


/* -------------------------------------------------------------------------
   v11 — compact timers without screen controls
   ------------------------------------------------------------------------- */
.ui-timer--compact {
  --timer-accent: var(--accent, #48dfbd);
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--timer-accent) 9%, transparent), transparent 46%),
    linear-gradient(145deg, #142238, #0d1727);
}
.ui-timer--compact .ui-timer-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.ui-timer--compact .ui-timer-label {
  max-width: 100%;
  overflow: hidden;
  color: #a4b5cb;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-timer--compact .ui-timer-display {
  color: inherit;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: clamp(27px, 3em, 54px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.065em;
  line-height: 1;
  text-align: right;
  text-shadow: 0 0 22px color-mix(in srgb, var(--timer-accent) 34%, transparent);
  white-space: nowrap;
}
.ui-timer--compact .ui-timer-status {
  min-height: auto;
  padding: 2px 7px;
  color: #8397b1;
  border: 1px solid #2a405b;
  border-radius: 999px;
  background: rgba(8,15,25,.58);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.ui-timer--compact.is-running .ui-timer-status {
  color: #06130f;
  border-color: transparent;
  background: var(--timer-accent);
}
.ui-timer-controls { display: none !important; }

/* Hockey penalty timer */
.ui-penalty-timer {
  --penalty-accent: var(--accent, #48dfbd);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 5px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 10px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--penalty-accent) 12%, transparent), transparent 56%),
    linear-gradient(145deg, #142238, #0c1625);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ui-penalty-timer.team-home { --penalty-accent: #4d9cff; }
.ui-penalty-timer.team-away { --penalty-accent: #ff5f79; }
.ui-penalty-timer.team-neutral { --penalty-accent: #f5c451; }
.ui-penalty-accent {
  align-self: stretch;
  width: 5px;
  background: var(--penalty-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--penalty-accent) 60%, transparent);
}
.ui-penalty-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--penalty-accent) 52%, #30445f);
  border-radius: 11px;
  background: color-mix(in srgb, var(--penalty-accent) 18%, #111c2c);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -.03em;
}
.ui-penalty-number::before {
  content: "#";
  margin-right: 1px;
  color: color-mix(in srgb, var(--penalty-accent) 72%, white);
  font-size: 10px;
  vertical-align: super;
}
.ui-penalty-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ui-penalty-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #8398b2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ui-penalty-team {
  color: color-mix(in srgb, var(--penalty-accent) 76%, white);
}
.ui-penalty-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-penalty-player {
  overflow: hidden;
  color: #eef4ff;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-penalty-time-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ui-penalty-time {
  min-width: 63px;
  color: #fff;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: clamp(22px, 2em, 34px);
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: 1;
  text-align: right;
  text-shadow: 0 0 18px color-mix(in srgb, var(--penalty-accent) 38%, transparent);
}
.ui-penalty-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #53657c;
  box-shadow: 0 0 0 3px rgba(83,101,124,.12);
}
.ui-penalty-timer.is-running .ui-penalty-state-dot {
  background: var(--penalty-accent);
  box-shadow: 0 0 12px var(--penalty-accent);
}
.ui-penalty-progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 5px;
  height: 3px;
  overflow: hidden;
  background: rgba(255,255,255,.045);
}
.ui-penalty-progress {
  width: 100%;
  height: 100%;
  background: var(--penalty-accent);
  box-shadow: 0 0 12px var(--penalty-accent);
  transition: width .12s linear, background .2s ease;
}
.ui-penalty-timer.is-warning {
  border-color: #f5c451;
  box-shadow: 0 0 0 2px rgba(245,196,81,.09), 0 0 20px rgba(245,196,81,.10);
}
.ui-penalty-timer.is-warning .ui-penalty-time,
.ui-penalty-timer.is-warning .ui-penalty-state-dot {
  color: #ffe8a3;
  background: #f5c451;
  text-shadow: 0 0 16px rgba(245,196,81,.55);
}
.ui-penalty-timer.is-warning .ui-penalty-progress { background: #f5c451; }
.ui-penalty-expired {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #b6c3d5;
  background: rgba(8,14,23,.89);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity .18s ease;
}
.ui-penalty-timer.is-finished .ui-penalty-expired { opacity: 1; }
.ui-penalty-timer.is-auto-hidden {
  display: none !important;
}


/* -------------------------------------------------------------------------
   v13 — quick timer editor
   ------------------------------------------------------------------------- */
.timer-editable-display {
  cursor: pointer;
  user-select: none;
}
.timer-editable-display:hover {
  filter: brightness(1.14);
}
.modal-card:has(.timer-quick-editor) {
  width: min(1180px, 96vw);
  max-height: 92vh;
}
.timer-quick-editor {
  display: grid;
  gap: 14px;
}
.timer-editor-toolbar {
  position: sticky;
  top: -18px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -2px -2px 0;
  padding: 12px 2px 13px;
  border-bottom: 1px solid #2b3d55;
  background: #111b2b;
}
.timer-editor-toolbar strong {
  display: block;
  color: #edf4ff;
  font-size: 15px;
}
.timer-editor-toolbar p {
  margin: 4px 0 0;
  color: #8194ae;
  font-size: 12px;
}
.timer-editor-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-editor-list {
  display: grid;
  gap: 9px;
}
.timer-editor-row {
  display: grid;
  grid-template-columns: 44px minmax(170px, 1fr) 116px 150px auto;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid #2a3c55;
  border-radius: 13px;
  background:
    linear-gradient(100deg, rgba(72,223,189,.045), transparent 42%),
    #0d1726;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.timer-editor-row.is-focused {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.10);
}
.timer-editor-row.is-running {
  border-color: rgba(72,223,189,.42);
}
.timer-editor-row.is-finished {
  opacity: .68;
}
.timer-editor-kind {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #07130f;
  border-radius: 11px;
  background: #48dfbd;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(72,223,189,.18);
}
.timer-editor-kind.team-home {
  color: #fff;
  background: #4d9cff;
}
.timer-editor-kind.team-away {
  color: #fff;
  background: #ff5f79;
}
.timer-editor-kind.team-neutral {
  color: #171104;
  background: #f5c451;
}
.timer-editor-info {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.timer-editor-info strong {
  overflow: hidden;
  color: #eef4ff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timer-editor-info span {
  overflow: hidden;
  color: #8194ae;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timer-editor-info code {
  color: #9edfcf;
}
.timer-editor-live {
  display: grid;
  justify-items: end;
  gap: 3px;
}
.timer-editor-live strong {
  color: #fff;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.055em;
}
.timer-editor-live span {
  color: #8295ae;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.timer-editor-row.is-running .timer-editor-live span {
  color: #48dfbd;
}
.timer-editor-input {
  display: grid;
  gap: 5px;
}
.timer-editor-input span {
  color: #8295ae;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.timer-editor-input input {
  width: 100%;
  min-height: 38px;
  color: #fff;
  border: 1px solid #31465f;
  border-radius: 9px;
  background: #091321;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: center;
}
.timer-editor-input input:focus {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.10);
  outline: none;
}
.timer-editor-input input:disabled {
  color: #687a91;
  cursor: not-allowed;
  opacity: .7;
}
.timer-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.btn.btn-small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 11px;
}
@media (max-width: 900px) {
  .timer-editor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .timer-editor-toolbar-actions {
    justify-content: flex-end;
  }
  .timer-editor-row {
    grid-template-columns: 40px minmax(0, 1fr) 100px;
  }
  .timer-editor-input {
    grid-column: 2 / 4;
  }
  .timer-editor-actions {
    grid-column: 1 / 4;
  }
}

/* v14: Hockey drag-and-drop penalty dashboard */
.hockey-penalty-dashboard{--hpd-home:#4d9cff;--hpd-away:#ff5f79;width:100%;height:100%;min-height:520px;display:flex;flex-direction:column;overflow:hidden;color:#eef4ff;border:1px solid #263b55;border-radius:20px;background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--hpd-home) 12%,transparent),transparent 28%),radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--hpd-away) 11%,transparent),transparent 28%),#08111e}
.hpd-header{min-height:66px;display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(300px,1fr);align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid #23364d;background:rgba(11,22,37,.9)}
.hpd-header>div:first-child{display:grid;gap:2px}.hpd-header small{color:#7187a3;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hpd-header strong{font-size:17px;font-weight:950}
.hpd-header-stats{display:flex;align-items:center;gap:8px;padding:5px 10px;color:#91a4bc;border:1px solid #2a405a;border-radius:999px;background:#0a1524;font-size:10px;font-weight:900;text-transform:uppercase}.hpd-header-stats strong{min-width:23px;color:#07130f;border-radius:999px;background:#48dfbd;font-size:12px;line-height:23px;text-align:center}
.hpd-board-actions{display:flex;justify-content:flex-end;gap:7px}.hpd-board-actions button{min-height:32px;padding:0 10px;color:#b8c7da;border:1px solid #2c425c;border-radius:9px;background:linear-gradient(180deg,#18283d,#101b2b);font-size:10px;font-weight:850}.hpd-board-actions button:hover{color:#fff;border-color:#4b6b91}
.hpd-layout{min-height:0;flex:1;display:grid;grid-template-columns:minmax(230px,282px) minmax(500px,1fr) minmax(230px,282px)}
.hpd-roster{min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px;background:rgba(9,19,32,.76)}.hpd-roster.team-home{border-right:1px solid #23364d}.hpd-roster.team-away{border-left:1px solid #23364d}
.hpd-roster-header{min-height:47px;display:flex;align-items:center;justify-content:space-between;gap:10px}.hpd-roster-header>div{min-width:0;display:grid;gap:2px}.hpd-roster-header span{color:#6f849f;font-size:8px;font-weight:900;letter-spacing:.11em}.hpd-roster-header strong{overflow:hidden;font-size:14px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.hpd-roster.team-home .hpd-roster-header strong{color:color-mix(in srgb,var(--hpd-home) 74%,white)}.hpd-roster.team-away .hpd-roster-header strong{color:color-mix(in srgb,var(--hpd-away) 74%,white)}.hpd-roster-header em{min-width:28px;padding:4px 7px;color:#8da0b8;border:1px solid #2b4059;border-radius:999px;background:#0a1524;font-size:10px;font-style:normal;font-weight:900;text-align:center}
.hpd-roster-search{width:100%;min-height:36px;margin-bottom:8px;padding:0 11px;color:#eaf2ff;border:1px solid #2b4059;border-radius:10px;background:#091420;outline:none}.hpd-roster-search:focus{border-color:#48dfbd;box-shadow:0 0 0 3px rgba(72,223,189,.08)}
.hpd-roster-list{min-height:0;flex:1;display:grid;align-content:start;gap:5px;overflow-y:auto;padding-right:3px}.hpd-player-row{min-height:39px;display:grid;grid-template-columns:20px 34px minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px 7px 4px 3px;border:1px solid transparent;border-radius:9px;background:rgba(18,31,49,.7);cursor:grab;transition:transform .12s ease,border-color .12s ease,background .12s ease,opacity .12s ease}.hpd-player-row:hover{transform:translateX(2px);border-color:#334d6b;background:#15253a}.hpd-player-row:active{cursor:grabbing}.hpd-player-row.is-dragging{opacity:.38}.hpd-player-row.hidden{display:none}.hpd-drag-handle{color:#566c86;font-size:11px;letter-spacing:-3px}.hpd-player-number{display:grid;place-items:center;width:32px;height:28px;color:#eef4ff;border:1px solid #314963;border-radius:8px;background:#0b1727;font-size:11px;font-weight:950}.hpd-player-name{overflow:hidden;color:#e6eef9;font-size:11px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.hpd-player-row small{color:#6e829c;font-size:8px;font-weight:900;text-transform:uppercase}
.hpd-center{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(190px,1fr) minmax(110px,.58fr);gap:10px;padding:12px}.hpd-assignment{display:grid;gap:8px}.hpd-drop-zones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hpd-drop-zone{--zone-color:#48dfbd;min-width:0;min-height:55px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:7px 9px;border:1px dashed #344e6b;border-radius:12px;background:rgba(14,26,42,.78);transition:border-color .15s ease,background .15s ease,transform .15s ease}.hpd-drop-zone.team-home{--zone-color:var(--hpd-home)}.hpd-drop-zone.team-away{--zone-color:var(--hpd-away)}.hpd-drop-zone.is-over{transform:translateY(-2px);border-color:var(--zone-color);background:color-mix(in srgb,var(--zone-color) 12%,#0f1c2d);box-shadow:0 0 0 3px color-mix(in srgb,var(--zone-color) 8%,transparent)}.hpd-drop-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--zone-color);border:1px solid color-mix(in srgb,var(--zone-color) 48%,#334a65);border-radius:10px;background:color-mix(in srgb,var(--zone-color) 10%,#0b1726);font-size:16px;font-weight:950}.hpd-drop-zone>div{min-width:0;display:grid;gap:2px}.hpd-drop-zone small{color:#70859f;font-size:8px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hpd-drop-zone strong{overflow:hidden;color:#eaf2fd;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.hpd-drop-zone>button{width:27px;height:27px;color:#9badc2;border:1px solid #30465f;border-radius:8px;background:#111e2f}
.hpd-presets{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr));gap:6px}.hpd-presets button{min-height:45px;display:grid;place-items:center;gap:1px;padding:5px;color:#c9d6e6;border:1px solid #2d435d;border-radius:10px;background:linear-gradient(180deg,#17273b,#0f1b2b);transition:transform .12s ease,border-color .12s ease,background .12s ease}.hpd-presets button:hover,.hpd-presets button.is-over{transform:translateY(-2px);color:#07130f;border-color:transparent;background:#48dfbd}.hpd-presets strong{font-size:13px;font-weight:950}.hpd-presets small{color:inherit;opacity:.7;font-size:8px;font-weight:850}
.hpd-active-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.hpd-active-column{--penalty-color:#48dfbd;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #263b54;border-radius:13px;background:rgba(10,20,34,.75)}.hpd-active-column.team-home{--penalty-color:var(--hpd-home)}.hpd-active-column.team-away{--penalty-color:var(--hpd-away)}.hpd-active-header{min-height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #263b54;background:color-mix(in srgb,var(--penalty-color) 7%,#0e1a2a)}.hpd-active-header strong{color:color-mix(in srgb,var(--penalty-color) 72%,white);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.hpd-active-header span{min-width:22px;color:#dce7f5;border-radius:999px;background:#21334a;font-size:9px;font-weight:950;line-height:22px;text-align:center}.hpd-active-list{min-height:0;display:grid;align-content:start;gap:5px;overflow-y:auto;padding:7px}
.hpd-penalty-card{--card-color:#48dfbd;position:relative;min-height:52px;display:grid;grid-template-columns:41px minmax(0,1fr) 56px auto;align-items:center;gap:7px;padding:5px 6px 7px;overflow:hidden;border:1px solid #2b4059;border-radius:10px;background:linear-gradient(100deg,color-mix(in srgb,var(--card-color) 9%,transparent),#111e2f 58%)}.hpd-penalty-card.team-home{--card-color:var(--hpd-home)}.hpd-penalty-card.team-away{--card-color:var(--hpd-away)}.hpd-penalty-card.is-warning{--card-color:#f5c451;border-color:#806b32}.hpd-penalty-card.is-finished{opacity:.52}.hpd-penalty-number{display:grid;place-items:center;min-height:34px;color:#fff;border:1px solid color-mix(in srgb,var(--card-color) 54%,#344b65);border-radius:8px;background:color-mix(in srgb,var(--card-color) 14%,#0b1726);font-size:10px;font-weight:950}.hpd-penalty-player{min-width:0;display:grid;gap:2px}.hpd-penalty-player strong{overflow:hidden;color:#edf4ff;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.hpd-penalty-player small{color:color-mix(in srgb,var(--card-color) 70%,#aab8ca);font-size:8px;font-weight:900}.hpd-penalty-time{min-width:54px;padding:0;color:#fff;border:0;background:transparent;font-family:"Roboto Mono","Cascadia Mono",Consolas,monospace;font-size:19px;font-variant-numeric:tabular-nums;font-weight:950;letter-spacing:-.055em;text-align:right}.hpd-penalty-actions{display:flex;gap:3px;opacity:.38;transition:opacity .12s ease}.hpd-penalty-card:hover .hpd-penalty-actions{opacity:1}.hpd-penalty-actions button{width:25px;height:25px;padding:0;color:#9eb0c7;border:1px solid #30465f;border-radius:7px;background:#0c1727;font-size:9px;font-weight:900}.hpd-penalty-actions button:hover{color:#fff;border-color:var(--card-color)}.hpd-penalty-progress-track{position:absolute;right:0;bottom:0;left:0;height:2px;background:rgba(255,255,255,.04)}.hpd-penalty-progress-track i{display:block;width:100%;height:100%;background:var(--card-color);box-shadow:0 0 10px var(--card-color);transition:width .1s linear}.hpd-empty-active,.hpd-empty-history{padding:20px 8px;color:#647a95;font-size:9px;font-weight:800;text-align:center}
.hpd-history{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid #263b54;border-radius:13px;background:rgba(9,18,31,.76)}.hpd-history-header{min-height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #263b54}.hpd-history-header strong{color:#9baec5;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.hpd-history-header span{color:#70859f;font-size:9px;font-weight:900}.hpd-history-list{min-height:0;display:grid;align-content:start;gap:2px;overflow-y:auto;padding:5px 7px}.hpd-history-item{min-height:24px;display:grid;grid-template-columns:50px 7px minmax(0,1fr);align-items:center;gap:6px;padding:2px 5px;border-radius:7px;background:rgba(18,31,48,.58)}.hpd-history-item time{color:#657a94;font-family:"Roboto Mono",Consolas,monospace;font-size:8px}.hpd-history-item>span{width:6px;height:6px;border-radius:50%;background:#667b94}.hpd-history-item>span.team-home{background:var(--hpd-home)}.hpd-history-item>span.team-away{background:var(--hpd-away)}.hpd-history-item strong{overflow:hidden;color:#9eafc3;font-size:8px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.hpd-time-editor{display:grid;gap:10px}.hpd-time-editor>strong{color:#eef4ff;font-size:16px}.hpd-time-editor>span{color:#8ea2ba;font-size:11px}.hpd-time-editor label{display:grid;gap:6px;color:#8ea2ba;font-size:10px;font-weight:800}.hpd-time-editor input{min-height:42px;color:#fff;border:1px solid #314862;border-radius:10px;background:#091421;font-family:"Roboto Mono",Consolas,monospace;font-size:18px;font-weight:900;text-align:center}


/* =========================================================================
   v15 — staged hockey penalty workflow
   ========================================================================= */
.hpd-center--workflow {
  grid-template-rows: auto minmax(360px, 1fr) minmax(95px, .28fr);
}
.hpd-preparation {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 9px;
}
.hpd-clock-creator {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 10px;
  padding: 7px 11px;
  color: #dce8f8;
  border: 1px solid #31506b;
  border-radius: 12px;
  background:
    linear-gradient(110deg, rgba(72,223,189,.12), transparent 58%),
    #101d2e;
  text-align: left;
}
.hpd-clock-creator:hover {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.08);
}
.hpd-clock-creator small {
  color: #758ba5;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hpd-clock-creator strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #fff;
  font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.06em;
}
.hpd-clock-creator span {
  color: #48dfbd;
  font-size: 9px;
  font-weight: 850;
}
.hpd-workbench {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 225px) minmax(380px, 1fr);
  gap: 9px;
}
.hpd-section-header {
  min-height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 6px 9px;
  border-bottom: 1px solid #263b54;
}
.hpd-section-header > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.hpd-section-header small {
  color: #657b96;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hpd-section-header strong {
  overflow: hidden;
  color: #b6c6d9;
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.hpd-section-header > span {
  min-width: 23px;
  color: #9baec4;
  border: 1px solid #2d435d;
  border-radius: 999px;
  background: #0b1726;
  font-size: 8px;
  font-weight: 900;
  line-height: 21px;
  text-align: center;
}
.hpd-infractions,
.hpd-event-queue {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #263b54;
  border-radius: 13px;
  background: rgba(9,18,31,.78);
}
.hpd-infraction-search {
  width: calc(100% - 14px);
  min-height: 31px;
  margin: 7px;
  padding: 0 9px;
  color: #edf4ff;
  border: 1px solid #2c425c;
  border-radius: 9px;
  background: #081421;
  font-size: 10px;
  outline: none;
}
.hpd-infraction-search:focus {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.08);
}
.hpd-infraction-list,
.hpd-event-list {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  padding: 0 7px 7px;
}
.hpd-event-list.is-over {
  background: rgba(72,223,189,.045);
  box-shadow: inset 0 0 0 1px rgba(72,223,189,.3);
}
.hpd-infraction-row {
  min-height: 37px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 7px 4px 3px;
  color: #cbd8e8;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #111f31;
  cursor: grab;
  transition: border-color .12s ease, transform .12s ease, background .12s ease, opacity .12s ease;
}
.hpd-infraction-row em {
  padding: 2px 5px;
  color: #ffd98a;
  border: 1px solid rgba(245,196,81,.34);
  border-radius: 6px;
  background: rgba(245,196,81,.08);
  font-size: 6.5px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .05em;
}
.hpd-infraction-row:hover,
.hpd-infraction-row.is-selected,
.hpd-infraction-row.is-drop-target {
  transform: translateX(2px);
  border-color: #48dfbd;
  background: #15283a;
}
.hpd-infraction-row.is-dragging { opacity: .4; }
.hpd-infraction-row.hidden { display: none; }
.hpd-infraction-drag {
  color: #566d88;
  font-size: 10px;
  letter-spacing: -3px;
}
.hpd-infraction-row strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
}
.hpd-infraction-row small {
  min-width: 31px;
  padding: 3px 5px;
  color: #07130f;
  border-radius: 7px;
  background: #48dfbd;
  font-size: 8px;
  font-weight: 950;
  text-align: center;
}
.hpd-player-row.is-drop-target {
  border-color: #f5c451;
  background: rgba(245,196,81,.09);
}
.hpd-presets button {
  cursor: grab;
}
.hpd-presets button.is-dragging {
  opacity: .45;
}
.hpd-event-card {
  --event-color: #879bb4;
  position: relative;
  display: grid;
  gap: 6px;
  padding: 7px 8px 9px;
  overflow: hidden;
  border: 1px solid #2b4059;
  border-radius: 11px;
  background:
    linear-gradient(100deg, color-mix(in srgb,var(--event-color) 7%,transparent), transparent 62%),
    #101d2e;
  transition: border-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.hpd-event-card.team-home { --event-color: var(--hpd-home); }
.hpd-event-card.team-away { --event-color: var(--hpd-away); }
.hpd-event-card.is-selected,
.hpd-event-card.is-over {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.08);
}
.hpd-event-card.is-ready {
  border-color: color-mix(in srgb,#48dfbd 62%,#2b4059);
}
.hpd-event-card.is-running {
  box-shadow: 0 0 18px color-mix(in srgb,var(--event-color) 12%,transparent);
}
.hpd-event-card.is-finished { opacity: .53; }
.hpd-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hpd-event-time {
  min-width: 76px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  color: #fff;
  border: 1px solid #304962;
  border-radius: 8px;
  background: #091522;
}
.hpd-event-time small {
  color: #70859f;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}
.hpd-event-time strong {
  font-family: "Roboto Mono",Consolas,monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}
.hpd-event-status {
  color: #7e93ad;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hpd-event-card.is-ready .hpd-event-status { color: #48dfbd; }
.hpd-event-card.is-running .hpd-event-status { color: var(--event-color); }
.hpd-event-fields {
  display: grid;
  grid-template-columns: 1.12fr 1.42fr .72fr;
  gap: 5px;
}
.hpd-event-field {
  min-width: 0;
  min-height: 45px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid #2b4059;
  border-radius: 8px;
  background: rgba(8,18,30,.65);
}
.hpd-event-field.is-empty {
  border-style: dashed;
  color: #627891;
}
.hpd-event-field.is-over {
  border-color: #48dfbd;
  background: rgba(72,223,189,.08);
}
.hpd-event-field small {
  color: #687e98;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.hpd-event-field strong {
  overflow: hidden;
  color: #e7effa;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-event-field span {
  overflow: hidden;
  color: #758aa3;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hpd-event-countdown {
  min-width: 70px;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
  font-family: "Roboto Mono",Consolas,monospace;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.06em;
  text-align: left;
}
.hpd-event-actions {
  display: flex;
  gap: 4px;
}
.hpd-event-actions button {
  width: 27px;
  height: 27px;
  padding: 0;
  color: #9eb0c6;
  border: 1px solid #30465f;
  border-radius: 7px;
  background: #0a1625;
  font-size: 9px;
  font-weight: 900;
}
.hpd-event-actions button:hover:not(:disabled) {
  color: #fff;
  border-color: #48dfbd;
}
.hpd-event-actions button:disabled {
  cursor: not-allowed;
  opacity: .25;
}
.hpd-empty-events {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #657b95;
  border: 1px dashed #304760;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 1180px) {
  .hpd-workbench { grid-template-columns: 185px minmax(360px,1fr); }
  .hpd-event-fields { grid-template-columns: 1fr 1.25fr .65fr; }
}


/* =========================================================================
   v16 — clear team columns, violation dropdown, and grouped timer editor
   ========================================================================= */
.hpd-center--teams {
  grid-template-rows: auto auto minmax(250px, 1fr) minmax(90px, .34fr);
}
.hpd-tools-row {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: stretch;
  gap: 9px;
}
.hpd-create-event {
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #dce8f7;
  border: 1px solid #31506b;
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(72,223,189,.11), transparent 62%), #101d2e;
  text-align: left;
}
.hpd-create-event:hover {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.08);
}
.hpd-create-event > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #07130f;
  border-radius: 9px;
  background: #48dfbd;
  font-size: 18px;
  font-weight: 950;
}
.hpd-create-event > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hpd-create-event strong {
  color: #f0f6ff;
  font-size: 10px;
  font-weight: 950;
}
.hpd-create-event small {
  overflow: hidden;
  color: #7187a1;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-penalty-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 7px;
}
.hpd-infraction-dropdown {
  position: relative;
  min-width: 0;
}
.hpd-infraction-dropdown > summary {
  height: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #cbd8e7;
  border: 1px solid #2d435d;
  border-radius: 11px;
  background: linear-gradient(180deg,#17273b,#0f1b2b);
  cursor: pointer;
  list-style: none;
}
.hpd-infraction-dropdown > summary::-webkit-details-marker { display: none; }
.hpd-infraction-dropdown > summary span {
  font-size: 10px;
  font-weight: 900;
}
.hpd-infraction-dropdown > summary strong {
  min-width: 22px;
  color: #07130f;
  border-radius: 999px;
  background: #48dfbd;
  font-size: 8px;
  line-height: 22px;
  text-align: center;
}
.hpd-infraction-dropdown > summary i {
  color: #7287a0;
  font-size: 10px;
  font-style: normal;
  transition: transform .15s ease;
}
.hpd-infraction-dropdown[open] > summary i { transform: rotate(180deg); }
.hpd-infraction-popup {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  width: min(355px, 72vw);
  max-height: 430px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 6px;
  padding: 9px;
  overflow: hidden;
  border: 1px solid #35506d;
  border-radius: 13px;
  background: #0b1726;
  box-shadow: 0 20px 55px rgba(0,0,0,.48);
}
.hpd-infraction-hint {
  color: #71869f;
  font-size: 8px;
  line-height: 1.35;
}
.hpd-infraction-popup .hpd-infraction-list {
  max-height: 335px;
  overflow-y: auto;
}
.hpd-infraction-row.is-drop-target,
.hpd-player-row.is-drop-target {
  border-color: #f5c451;
  background: rgba(245,196,81,.09);
}
.hpd-unassigned-events {
  min-height: 0;
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 7px;
  padding: 7px;
  border: 1px solid #293f58;
  border-radius: 12px;
  background: rgba(9,19,32,.66);
}
.hpd-unassigned-events.is-empty { opacity: .72; }
.hpd-unassigned-title {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 4px 6px;
}
.hpd-unassigned-title strong {
  color: #8398b1;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.3;
  text-transform: uppercase;
}
.hpd-unassigned-title span {
  width: 25px;
  color: #aebed1;
  border: 1px solid #30465f;
  border-radius: 999px;
  background: #0c1725;
  font-size: 8px;
  font-weight: 900;
  line-height: 23px;
  text-align: center;
}
.hpd-unassigned-list {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 350px);
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.hpd-unassigned-list.is-over,
.hpd-team-column-list.is-over {
  box-shadow: inset 0 0 0 1px #48dfbd;
  background: rgba(72,223,189,.035);
}
.hpd-unassigned-empty {
  display: grid;
  place-items: center;
  color: #627891;
  border: 1px dashed #30465f;
  border-radius: 9px;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}
.hpd-team-penalty-board {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.hpd-team-penalty-column {
  --team-column-color: #7d91aa;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #293f58;
  border-radius: 14px;
  background: rgba(8,18,31,.72);
}
.hpd-team-penalty-column.team-home { --team-column-color: var(--hpd-home); }
.hpd-team-penalty-column.team-away { --team-column-color: var(--hpd-away); }
.hpd-team-column-header {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #293f58;
  background: linear-gradient(90deg, color-mix(in srgb,var(--team-column-color) 12%,transparent), transparent);
}
.hpd-team-column-header > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hpd-team-column-header small {
  color: #71869f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .1em;
}
.hpd-team-column-header strong {
  overflow: hidden;
  color: color-mix(in srgb,var(--team-column-color) 72%,white);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-team-column-counts {
  display: flex;
  gap: 5px;
}
.hpd-team-column-counts span,
.hpd-team-column-counts b {
  min-width: 23px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  line-height: 23px;
  text-align: center;
}
.hpd-team-column-counts span {
  color: #b8c7d8;
  background: #21334a;
}
.hpd-team-column-counts b {
  color: #07130f;
  background: var(--team-column-color);
}
.hpd-team-column-list {
  min-height: 0;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  padding: 7px;
}
.hpd-team-column-empty {
  min-height: 125px;
  display: grid;
  place-items: center;
  padding: 18px;
  color: #637993;
  border: 1px dashed color-mix(in srgb,var(--team-column-color) 42%,#30465f);
  border-radius: 10px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
}
.hpd-team-penalty-card {
  --team-card-color: #8195ad;
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0,1fr);
  min-height: 106px;
  overflow: hidden;
  border: 1px solid #2d435d;
  border-radius: 11px;
  background: linear-gradient(100deg,color-mix(in srgb,var(--team-card-color) 9%,transparent),transparent 56%),#101d2e;
  transition: border-color .14s ease,box-shadow .14s ease,opacity .14s ease;
}
.hpd-team-penalty-card.team-home { --team-card-color: var(--hpd-home); }
.hpd-team-penalty-card.team-away { --team-card-color: var(--hpd-away); }
.hpd-team-penalty-card.is-selected,
.hpd-team-penalty-card.is-over {
  border-color: #48dfbd;
  box-shadow: 0 0 0 3px rgba(72,223,189,.08);
}
.hpd-team-penalty-card.is-ready { border-color: color-mix(in srgb,#48dfbd 58%,#2d435d); }
.hpd-team-penalty-card.is-finished { opacity: .48; }
.hpd-team-card-accent {
  width: 5px;
  background: var(--team-card-color);
  box-shadow: 0 0 15px color-mix(in srgb,var(--team-card-color) 54%,transparent);
}
.hpd-team-card-main {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 7px 8px 9px;
}
.hpd-team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hpd-team-card-player {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.hpd-team-card-player small {
  color: color-mix(in srgb,var(--team-card-color) 74%,#9aaac0);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}
.hpd-team-card-player strong {
  overflow: hidden;
  color: #edf4ff;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-team-card-player.is-empty strong { color: #667c95; }
.hpd-team-card-clock {
  min-width: 72px;
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 0;
  color: #fff;
  border: 0;
  background: transparent;
}
.hpd-team-card-clock small {
  color: #6f849d;
  font-family: "Roboto Mono",Consolas,monospace;
  font-size: 8px;
}
.hpd-team-card-clock strong {
  font-family: "Roboto Mono",Consolas,monospace;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
  letter-spacing: -.055em;
}
.hpd-team-card-details {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(90px,.72fr);
  gap: 5px;
}
.hpd-team-penalty-toggle {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #879bb3;
  font-size: 7.5px;
  font-weight: 850;
  cursor: pointer;
}
.hpd-team-penalty-toggle input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #48dfbd;
}
.hpd-team-penalty-toggle:has(input:checked) {
  color: #f0d08b;
}
.hpd-team-card-infraction,
.hpd-team-card-preset {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid #2b4159;
  border-radius: 8px;
  background: rgba(8,18,30,.6);
}
.hpd-team-card-infraction.is-empty,
.hpd-team-card-preset.is-empty { border-style: dashed; }
.hpd-team-card-infraction small,
.hpd-team-card-preset small {
  color: #657b95;
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}
.hpd-team-card-infraction strong,
.hpd-team-card-preset strong {
  overflow: hidden;
  color: #dce7f4;
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-team-card-infraction.is-empty strong,
.hpd-team-card-preset.is-empty strong { color: #657b95; }
.hpd-team-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.hpd-team-card-status {
  color: #758ba4;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.hpd-team-penalty-card.is-ready .hpd-team-card-status { color: #48dfbd; }
.hpd-team-penalty-card.is-running .hpd-team-card-status { color: var(--team-card-color); }

/* Quick timers: main center, home/away split */
.timer-editor-main-section,
.timer-editor-team-section,
.timer-editor-neutral-section,
.timer-editor-other-section {
  display: grid;
  gap: 8px;
}
.timer-editor-section-title {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #2a3d55;
  border-radius: 10px;
  background: #0c1726;
}
.timer-editor-section-title strong {
  color: #aebed1;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.timer-editor-section-title span {
  min-width: 23px;
  color: #9fb1c7;
  border-radius: 999px;
  background: #21334a;
  font-size: 8px;
  font-weight: 950;
  line-height: 23px;
  text-align: center;
}
.timer-editor-main-list {
  width: min(780px,100%);
  justify-self: center;
}
.timer-editor-main-list .timer-editor-row {
  border-color: rgba(72,223,189,.42);
  background: linear-gradient(100deg,rgba(72,223,189,.08),transparent 54%),#0d1726;
}
.timer-editor-main-list .timer-editor-live strong {
  font-size: 31px;
}
.timer-editor-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.timer-editor-team-section {
  --timer-team-color: #8094ad;
  min-width: 0;
  padding: 8px;
  border: 1px solid #2a3d55;
  border-radius: 13px;
  background: rgba(8,18,31,.72);
}
.timer-editor-team-section.team-home { --timer-team-color: #4d9cff; }
.timer-editor-team-section.team-away { --timer-team-color: #ff5f79; }
.timer-editor-team-section .timer-editor-section-title {
  border-color: color-mix(in srgb,var(--timer-team-color) 40%,#2a3d55);
  background: linear-gradient(90deg,color-mix(in srgb,var(--timer-team-color) 10%,transparent),#0c1726);
}
.timer-editor-team-section .timer-editor-section-title strong {
  color: color-mix(in srgb,var(--timer-team-color) 72%,white);
}
.timer-editor-team-list,
.timer-editor-neutral-list {
  display: grid;
  gap: 7px;
}
.timer-editor-hockey-row {
  grid-template-columns: 40px minmax(150px,1fr) 95px 128px auto;
  min-height: 71px;
}
.timer-editor-hockey-row.team-home { border-left: 3px solid #4d9cff; }
.timer-editor-hockey-row.team-away { border-left: 3px solid #ff5f79; }
.timer-editor-hockey-row.team-neutral { border-left: 3px solid #8296ad; }
.timer-editor-kind.team-home { color:#fff;background:#4d9cff; }
.timer-editor-kind.team-away { color:#fff;background:#ff5f79; }
.timer-editor-kind.team-neutral { color:#fff;background:#71859d; }
.timer-editor-empty {
  min-height: 85px;
  display: grid;
  place-items: center;
  color: #627891;
  border: 1px dashed #30465f;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 800;
}
@media (max-width: 1050px) {
  .timer-editor-team-grid { grid-template-columns: 1fr; }
  .hpd-tools-row { grid-template-columns: 160px minmax(0,1fr); }
  .hpd-penalty-tools { grid-template-columns: minmax(0,1fr) 105px; }
}


/* =========================================================================
   v17 — larger main timer card and collapsible journal
   ========================================================================= */

.modal-card:has(.timer-quick-editor) {
  width: min(1460px, 98vw);
  max-height: 95vh;
  padding: 20px;
}
.modal-card:has(.timer-quick-editor) .modal-head {
  position: sticky;
  top: -20px;
  z-index: 8;
  margin: -20px -20px 0;
  padding: 17px 20px 14px;
  border-bottom: 1px solid #2a3e57;
  background: rgba(17,27,43,.97);
  backdrop-filter: blur(12px);
}
.timer-quick-editor {
  gap: 18px;
}
.timer-editor-toolbar {
  top: 34px;
  margin: 0;
  padding: 14px 2px 15px;
}
.timer-editor-toolbar strong {
  font-size: 17px;
}
.timer-editor-toolbar p {
  font-size: 12px;
}

.timer-editor-main-section {
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(72,223,189,.34);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,223,189,.11), transparent 52%),
    linear-gradient(145deg, #111f31, #0a1524);
  box-shadow: 0 18px 40px rgba(0,0,0,.20);
}
.timer-editor-main-section .timer-editor-section-title {
  min-height: 37px;
  border-color: rgba(72,223,189,.28);
  background: rgba(7,19,27,.48);
}
.timer-editor-main-section .timer-editor-section-title strong {
  color: #7ff0d5;
  font-size: 10px;
}
.timer-editor-main-list {
  width: min(1040px, 100%);
}
.timer-editor-main-list .timer-editor-row {
  grid-template-columns: 72px minmax(260px,1fr) 205px 200px auto;
  min-height: 132px;
  gap: 18px;
  padding: 20px 22px;
  border-color: rgba(72,223,189,.46);
  border-radius: 16px;
  background:
    linear-gradient(100deg,rgba(72,223,189,.12),transparent 58%),
    #0c1828;
  box-shadow:
    inset 0 1px rgba(255,255,255,.035),
    0 12px 34px rgba(0,0,0,.24);
}
.timer-editor-main-list .timer-editor-kind {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  font-size: 25px;
  box-shadow: 0 0 28px rgba(72,223,189,.23);
}
.timer-editor-main-list .timer-editor-info {
  gap: 7px;
}
.timer-editor-main-list .timer-editor-info strong {
  font-size: 19px;
}
.timer-editor-main-list .timer-editor-info span {
  font-size: 11px;
}
.timer-editor-main-list .timer-editor-live {
  justify-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid rgba(72,223,189,.22);
  border-radius: 14px;
  background: rgba(5,15,24,.55);
}
.timer-editor-main-list .timer-editor-live strong {
  font-size: clamp(42px, 4.6vw, 62px);
  line-height: .95;
  text-shadow: 0 0 25px rgba(72,223,189,.28);
}
.timer-editor-main-list .timer-editor-live span {
  color: #76d9c3;
  font-size: 10px;
}
.timer-editor-main-list .timer-editor-input {
  gap: 8px;
}
.timer-editor-main-list .timer-editor-input span {
  font-size: 10px;
}
.timer-editor-main-list .timer-editor-input input {
  min-height: 54px;
  border-radius: 12px;
  font-size: 22px;
}
.timer-editor-main-list .timer-editor-actions {
  flex-wrap: wrap;
  max-width: 220px;
  gap: 8px;
}
.timer-editor-main-list .timer-editor-actions .btn {
  min-height: 42px;
  padding: 0 14px;
  font-size: 12px;
}

.timer-editor-team-grid {
  gap: 14px;
}
.timer-editor-team-section {
  padding: 10px;
  border-radius: 15px;
}
.timer-editor-team-section .timer-editor-section-title {
  min-height: 37px;
}
.timer-editor-team-list {
  max-height: 43vh;
  overflow-y: auto;
  padding-right: 3px;
}
.timer-editor-hockey-row {
  grid-template-columns: 42px minmax(150px,1fr) 102px 136px auto;
  min-height: 76px;
  padding: 9px 10px;
}
.timer-editor-hockey-row .timer-editor-live strong {
  font-size: 25px;
}

/* Journal is collapsed by default and expands on click */
.hpd-center--teams {
  grid-template-rows: auto auto minmax(250px,1fr) auto;
}
.hpd-history-collapsible {
  min-height: 39px;
  display: block;
  overflow: hidden;
  border: 1px solid #293f58;
  border-radius: 12px;
  background: rgba(9,18,31,.76);
}
.hpd-history-collapsible > summary {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hpd-history-collapsible > summary::-webkit-details-marker {
  display: none;
}
.hpd-history-collapsible > summary > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hpd-history-chevron {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #8296ae;
  border: 1px solid #2d435d;
  border-radius: 7px;
  background: #0b1726;
  font-size: 16px;
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
}
.hpd-history-collapsible[open] .hpd-history-chevron {
  color: #48dfbd;
  border-color: rgba(72,223,189,.38);
  transform: rotate(90deg);
}
.hpd-history-collapsible .hpd-history-header strong {
  color: #a4b6ca;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hpd-history-count {
  min-width: 25px;
  color: #a7b7ca;
  border-radius: 999px;
  background: #21334a;
  font-size: 8px;
  font-weight: 950;
  line-height: 23px;
  text-align: center;
}
.hpd-history-collapsible[open] .hpd-history-list {
  max-height: 185px;
  padding: 6px 7px 8px;
  border-top: 1px solid #263b54;
  overflow-y: auto;
}
.hpd-history-collapsible:not([open]) .hpd-history-list {
  display: none;
}
.hpd-history-collapsible .hpd-history-header {
  border-bottom: 0;
  background: linear-gradient(90deg,rgba(72,223,189,.035),transparent);
}

@media (max-width: 1220px) {
  .timer-editor-main-list .timer-editor-row {
    grid-template-columns: 62px minmax(200px,1fr) 170px 170px;
  }
  .timer-editor-main-list .timer-editor-actions {
    grid-column: 2 / 5;
    justify-content: flex-end;
    max-width: none;
  }
}
@media (max-width: 900px) {
  .modal-card:has(.timer-quick-editor) {
    width: 98vw;
    padding: 14px;
  }
  .modal-card:has(.timer-quick-editor) .modal-head {
    top: -14px;
    margin: -14px -14px 0;
    padding: 14px;
  }
  .timer-editor-main-list .timer-editor-row {
    grid-template-columns: 52px minmax(0,1fr) 130px;
    min-height: 150px;
    gap: 11px;
    padding: 14px;
  }
  .timer-editor-main-list .timer-editor-kind {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    font-size: 19px;
  }
  .timer-editor-main-list .timer-editor-input {
    grid-column: 2 / 4;
  }
  .timer-editor-main-list .timer-editor-actions {
    grid-column: 1 / 4;
  }
}


/* =========================================================================
   v18 — protected editor, clean hockey header, CSS tooltips
   ========================================================================= */

/* Clean hockey module header */
.hpd-header.hpd-header--clean {
  min-height: 54px;
  grid-template-columns: minmax(0,1fr);
  padding: 9px 16px;
}
.hpd-header--clean > div {
  display: grid;
  gap: 2px;
}
.hpd-header--clean strong {
  font-size: 17px;
}
.hpd-header--clean + .hpd-layout {
  min-height: 0;
}

/* Hockey team statistics */
.hockey-statistics-hub {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}
.hsh-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 0 10px;
  border: 1px solid #263b55;
  border-radius: 11px;
  background: rgba(10, 22, 37, .94);
}
.hsh-navigation > span {
  color: #687f98;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .16em;
}
.hsh-navigation nav { grid-column: 2; min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.hsh-navigation button {
  min-width: 112px;
  min-height: 28px;
  padding: 0 14px;
  color: #8ca0b8;
  border: 1px solid #2b425d;
  border-radius: 8px;
  background: #0d1a2b;
  font-size: 9px;
  font-weight: 900;
}
.hsh-navigation button:hover { color: #edf5fd; border-color: #4a6a88; }
.hsh-navigation button.active {
  color: #06140f;
  border-color: transparent;
  background: #48dfbd;
  box-shadow: 0 4px 15px rgba(72, 223, 189, .14);
}
.hsh-content { min-height: 0; overflow: hidden; }
.hsh-content > * { width: 100%; height: 100%; }

.hockey-tournament-statistics {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #263b55;
  border-radius: 17px;
  background:
    radial-gradient(circle at 8% 0%, rgba(72, 223, 189, .08), transparent 30%),
    linear-gradient(180deg, rgba(13, 27, 44, .98), rgba(7, 17, 29, .98));
  overflow: hidden;
}
.htr-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 12px;
}
.htr-header > div { min-width: 0; display: grid; gap: 2px; }
.htr-header > div > span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.htr-header > div > strong { color: #edf5fc; font-size: 20px; font-weight: 950; }
.htr-header > div > small { color: #70869e; font-size: 8px; font-weight: 750; }
.htr-header > b { color: #9fb1c5; font-size: 10px; text-align: center; }
.htr-header > time { color: #637a92; font-size: 7px; font-weight: 800; text-align: right; }
.htr-header nav { min-width: 0; display: flex; justify-content: center; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.htr-header nav button {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #2a435e;
  border-radius: 8px;
  color: #8ba0b8;
  background: #0b192a;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.htr-header nav button:hover { color: #eef6fc; border-color: #486a88; }
.htr-header nav button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
.htr-table-scroll {
  min-height: 0;
  overflow: auto;
  border: 1px solid #213851;
  border-radius: 12px;
  background: rgba(5, 15, 26, .82);
}
.htr-table-scroll table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
.htr-table-scroll th,
.htr-table-scroll td {
  height: 31px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(38, 59, 85, .62);
  color: #91a5ba;
  font: 800 9px "Roboto Mono", Consolas, monospace;
  text-align: center;
  white-space: nowrap;
}
.htr-table-scroll th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 30px;
  color: #7189a1;
  background: #0d1c2e;
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.htr-table-scroll tbody tr:hover td { background: rgba(72, 223, 189, .035); color: #c7d4e1; }
.htr-table-scroll tbody tr.htr-current-team.side-home td {
  background: rgba(77, 156, 255, .11);
  background: color-mix(in srgb, var(--htr-home) 13%, #07111d);
  color: #d9e9f8;
}
.htr-table-scroll tbody tr.htr-current-team.side-away td {
  background: rgba(255, 95, 121, .11);
  background: color-mix(in srgb, var(--htr-away) 13%, #07111d);
  color: #f0dde2;
}
.htr-table-scroll tbody tr.htr-current-team.side-home td:first-child { box-shadow: inset 3px 0 0 var(--htr-home); }
.htr-table-scroll tbody tr.htr-current-team.side-away td:first-child { box-shadow: inset 3px 0 0 var(--htr-away); }
.htr-table-scroll tbody tr.htr-current-team td.htr-name strong { color: #fff; }
.htr-table-scroll tbody tr.htr-current-team:hover td { filter: brightness(1.08); }
.htr-table-scroll tbody tr:last-child td { border-bottom: 0; }
.htr-table-scroll .htr-rank { width: 44px; color: #48dfbd; font-weight: 950; }
.htr-table-scroll .htr-number { width: 44px; color: #c8d5e2; }
.htr-table-scroll .htr-name,
.htr-table-scroll .htr-team { text-align: left; }
.htr-table-scroll .htr-name { min-width: 210px; }
.htr-table-scroll td.htr-name strong { color: #e8f1fa; font-family: inherit; font-size: 10px; }
.htr-table-scroll .htr-team { min-width: 140px; color: #7f95aa; }
.htr-empty {
  place-self: center;
  display: grid;
  gap: 7px;
  color: #71869f;
  text-align: center;
}
.htr-empty strong { color: #bdcad9; font-size: 18px; }
.htr-empty span { font-size: 11px; }
.hockey-team-statistics {
  --hts-home: #4d9cff;
  --hts-away: #ff5f79;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 11px;
  overflow: hidden;
  padding: 15px;
  color: #eef4ff;
  border: 1px solid #263b55;
  border-radius: 20px;
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--hts-home) 13%, transparent), transparent 29%),
    radial-gradient(circle at 95% 0%, color-mix(in srgb, var(--hts-away) 12%, transparent), transparent 29%),
    #08111e;
}
.hts-header {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 10px 17px;
  border: 1px solid #263b54;
  border-radius: 15px;
  background: rgba(11, 23, 39, .86);
}
.hts-team {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.hts-team.away { text-align: right; }
.hts-team span {
  color: #6f849f;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .13em;
}
.hts-team strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--hts-home) 70%, white);
  font-size: 20px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hts-team.away strong {
  color: color-mix(in srgb, var(--hts-away) 70%, white);
}
.hts-score {
  display: grid;
  place-items: center;
  gap: 3px;
}
.hts-score strong {
  color: #f5f8fc;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: 1;
}
.hts-score span {
  color: #70859f;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .12em;
}
.hts-segments {
  display: flex;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
}
.hts-segments button {
  min-width: 86px;
  padding: 0 13px;
  color: #8ea1ba;
  border: 1px solid #2a4059;
  border-radius: 9px;
  background: #0d1929;
  font-size: 10px;
  font-weight: 900;
}
.hts-segments button:hover {
  color: #eaf2fc;
  border-color: #476784;
}
.hts-segments button.active {
  color: #07130f;
  border-color: transparent;
  background: #48dfbd;
  box-shadow: 0 5px 18px rgba(72, 223, 189, .16);
}
.hts-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px 9px;
  overflow: hidden;
}
.hts-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
.hts-metric {
  min-width: 0;
  min-height: 51px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  border: 1px solid #243950;
  border-radius: 11px;
  background: rgba(13, 25, 42, .78);
}
.hts-metric > strong {
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 18px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.hts-home-value { color: color-mix(in srgb, var(--hts-home) 72%, white); }
.hts-away-value {
  color: color-mix(in srgb, var(--hts-away) 72%, white);
  text-align: right;
}
.hts-metric > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.hts-metric > div > span {
  overflow: hidden;
  color: #9badc2;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hts-comparison {
  height: 4px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: #101d2d;
}
.hts-comparison i { display: block; height: 100%; }
.hts-comparison i.home { background: var(--hts-home); }
.hts-comparison i.away { background: var(--hts-away); }
.hts-empty {
  grid-row: 1 / -1;
  place-self: center;
  display: grid;
  gap: 7px;
  color: #71869f;
  text-align: center;
}
.hts-empty strong { color: #bdcad9; font-size: 18px; }
.hts-empty span { font-size: 11px; }

/* Hockey tournament standings */
.hockey-tournament-standings {
  --htb-home: #4d9cff;
  --htb-away: #ff5f79;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  padding: 13px;
  color: #eef4ff;
  border: 1px solid #263b55;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(72, 223, 189, .08), transparent 28%),
    #08111e;
}
.htb-header {
  min-height: 61px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border: 1px solid #263b54;
  border-radius: 14px;
  background: rgba(11, 23, 39, .9);
}
.htb-header > div { display: grid; gap: 2px; }
.htb-header > div span {
  color: #668099;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .16em;
}
.htb-header > div strong { font-size: 20px; font-weight: 950; }
.htb-header nav { display: flex; justify-content: center; gap: 5px; }
.htb-header button {
  min-height: 35px;
  padding: 0 15px;
  color: #8da1b9;
  border: 1px solid #2a4059;
  border-radius: 9px;
  background: #0d1929;
  font-size: 10.5px;
  font-weight: 900;
}
.htb-header button:hover { color: #edf5ff; border-color: #496b88; }
.htb-header button.active {
  color: #06140f;
  border-color: transparent;
  background: #48dfbd;
  box-shadow: 0 5px 18px rgba(72, 223, 189, .15);
}
.htb-header > small {
  justify-self: end;
  color: #667d97;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.htb-groups {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: hidden;
}
.htb-groups.groups-1 { grid-template-columns: 1fr; }
.htb-groups.groups-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htb-groups.groups-3,
.htb-groups.groups-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htb-groups.groups-3,
.htb-groups.groups-4 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.htb-group {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 31px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #243950;
  border-radius: 11px;
  background: rgba(11, 22, 37, .78);
}
.htb-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  border-bottom: 1px solid #243950;
  background: rgba(18, 33, 53, .78);
}
.htb-group > header strong {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.htb-group > header span {
  min-width: 24px;
  color: #6f849d;
  font-size: 8px;
  font-weight: 900;
  text-align: right;
}
.htb-table-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.htb-table-scroll thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.htb-table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.htb-table-scroll::-webkit-scrollbar-track { background: rgba(5, 13, 23, .7); }
.htb-table-scroll::-webkit-scrollbar-thumb {
  border: 2px solid rgba(5, 13, 23, .7);
  border-radius: 999px;
  background: #35516d;
}
.htb-group table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.htb-group th,
.htb-group td {
  height: 24px;
  padding: 0 4px;
  overflow: hidden;
  border-bottom: 1px solid rgba(39, 57, 79, .58);
  color: #879bb2;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.htb-group th {
  height: 24px;
  color: #617991;
  background: rgba(8, 17, 30, .72);
  font-size: 8px;
  letter-spacing: .03em;
}
.htb-group th:nth-child(1),
.htb-group td:nth-child(1) { width: 30px; }
.htb-group th:nth-child(2),
.htb-group td:nth-child(2) { width: 32%; }
.htb-group th:nth-child(10),
.htb-group td:nth-child(10) { width: 49px; }
.htb-group th:nth-child(11),
.htb-group td:nth-child(11) { width: 35px; }
.htb-group .htb-team {
  position: relative;
  padding-left: 8px;
  font-family: inherit;
  text-align: left;
}
.htb-team strong {
  overflow: hidden;
  display: block;
  color: #c2cfdd;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
}
.htb-team i {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}
.htb-points { color: #eaf2fc !important; font-weight: 950 !important; }
.htb-goals { color: #9eafc2 !important; }
.htb-group tr.playoff-cut td { border-top: 1px dashed rgba(72, 223, 189, .56); }
.htb-group tr.is-highlighted td {
  color: #eaf3ff;
  background: color-mix(in srgb, var(--team-color) 14%, transparent);
  border-bottom-color: color-mix(in srgb, var(--team-color) 34%, transparent);
}
.htb-group tr.is-highlighted .htb-team strong { color: #fff; }
.htb-group tr.side-home { --team-color: var(--htb-home); }
.htb-group tr.side-away { --team-color: var(--htb-away); }
.htb-group tr.is-highlighted .htb-team i {
  background: var(--team-color);
  box-shadow: 0 0 7px color-mix(in srgb, var(--team-color) 75%, transparent);
}
.htb-legend {
  min-height: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 13px;
  padding: 0 3px;
  color: #70859e;
  font-size: 7px;
  font-weight: 850;
}
.htb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.htb-legend i { width: 6px; height: 6px; border-radius: 50%; }
.htb-legend .home i { background: var(--htb-home); }
.htb-legend .away i { background: var(--htb-away); }
.htb-empty {
  grid-row: 1 / -1;
  place-self: center;
  display: grid;
  gap: 7px;
  color: #71869f;
  text-align: center;
}
.htb-empty strong { color: #bdcad9; font-size: 18px; }
.htb-empty span { font-size: 11px; }

/* Hockey player statistics */
.hockey-player-statistics {
  --ppi-home: #4d9cff;
  --ppi-away: #ff5f79;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  overflow: hidden;
  padding: 11px;
  color: #eef4ff;
  border: 1px solid #263b55;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ppi-home) 9%, transparent), transparent 28%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ppi-away) 8%, transparent), transparent 28%),
    #08111e;
}
.ppi-header {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid #263b54;
  border-radius: 13px;
  background: rgba(11, 23, 39, .9);
}
.ppi-header > div { display: grid; gap: 1px; }
.ppi-header > div span {
  color: #658099;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .16em;
}
.ppi-header > div strong { font-size: 18px; font-weight: 950; }
.ppi-header nav { display: flex; justify-content: center; gap: 4px; }
.ppi-header nav button {
  max-width: 145px;
  min-height: 32px;
  overflow: hidden;
  padding: 0 12px;
  color: #8da1b9;
  border: 1px solid #2a4059;
  border-radius: 8px;
  background: #0d1929;
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppi-header nav button.active {
  color: #06140f;
  border-color: transparent;
  background: #48dfbd;
}
.ppi-header > label {
  justify-self: end;
  width: min(230px, 100%);
  min-height: 32px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  padding: 0 8px;
  border: 1px solid #2a4059;
  border-radius: 8px;
  background: #091522;
}
.ppi-header > label span { color: #70879f; font-size: 15px; }
.ppi-header > label input {
  min-width: 0;
  padding: 0;
  color: #dce8f5;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 9px;
  font-weight: 750;
}
.ppi-leaders {
  min-height: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.ppi-leaders.leaders-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ppi-leaders article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 8px;
  padding: 5px 10px;
  border: 1px solid #243950;
  border-radius: 10px;
  background: rgba(13, 25, 42, .78);
}
.ppi-leaders article span {
  color: #6f859e;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ppi-leaders article strong {
  grid-column: 2;
  grid-row: 1 / 3;
  color: #48dfbd;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 18px;
  font-weight: 950;
}
.ppi-leaders article small {
  overflow: hidden;
  color: #c2d0df;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppi-skater-tables {
  min-height: 0;
  display: grid;
  gap: 7px;
  overflow: hidden;
}
.ppi-skater-tables.columns-1 { grid-template-columns: 1fr; }
.ppi-skater-tables.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppi-team-table {
  --ppi-side: var(--ppi-home);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 29px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #243950;
  border-radius: 10px;
  background: rgba(10, 21, 36, .82);
}
.ppi-team-table.side-away { --ppi-side: var(--ppi-away); }
.ppi-team-table > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 9px;
  border-bottom: 1px solid #243950;
  box-shadow: inset 3px 0 var(--ppi-side);
  background: rgba(18, 33, 53, .8);
}
.ppi-team-table > header div { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.ppi-team-table > header span { color: #6b829b; font-size: 6.5px; font-weight: 950; letter-spacing: .1em; }
.ppi-team-table > header strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--ppi-side) 68%, white);
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppi-team-table > header b { color: #7289a2; font-size: 8px; }
.ppi-table-wrap { min-height: 0; overflow: hidden; }
.ppi-team-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.ppi-team-table th,
.ppi-team-table td {
  height: 19px;
  padding: 0 3px;
  overflow: hidden;
  border-bottom: 1px solid rgba(39, 57, 79, .52);
  color: #8da0b6;
  font-family: "Roboto Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppi-team-table th {
  height: 21px;
  color: #627a93;
  background: rgba(7, 16, 28, .78);
  font-size: 6.5px;
  font-weight: 950;
}
.ppi-team-table th:nth-child(1), .ppi-team-table td:nth-child(1) { width: 27px; }
.ppi-team-table th:nth-child(2), .ppi-team-table td:nth-child(2) { width: 31%; }
.ppi-team-table th:nth-child(3), .ppi-team-table td:nth-child(3) { width: 31px; }
.ppi-team-table th:nth-child(11), .ppi-team-table td:nth-child(11) { width: 45px; }
.ppi-team-table .ppi-player-name {
  position: relative;
  padding-left: 7px;
  font-family: inherit;
  text-align: left;
}
.ppi-player-name strong {
  overflow: hidden;
  display: inline-block;
  max-width: calc(100% - 20px);
  color: #c7d3df;
  font-size: 8.5px;
  font-weight: 900;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.ppi-player-name i {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  color: #07130f;
  border-radius: 50%;
  background: #48dfbd;
  font-size: 6px;
  font-style: normal;
  font-weight: 950;
  vertical-align: middle;
}
.ppi-team-table tbody tr { cursor: pointer; transition: background .12s ease; }
.ppi-team-table tbody tr:hover { background: color-mix(in srgb, var(--ppi-side) 12%, transparent); }
.ppi-team-table tr.not-played { opacity: .42; }
.ppi-team-table tr[hidden] { display: none; }
.ppi-team-table .ppi-points { color: #eef5fd; font-weight: 950; }
.ppi-team-table .ppi-toi { color: color-mix(in srgb, var(--ppi-side) 58%, white); }
.ppi-team-table .ppi-plus-minus.positive { color: #65e4c6; }
.ppi-team-table .ppi-plus-minus.negative { color: #ff8497; }
.ppi-season-table th:nth-child(3),
.ppi-season-table td:nth-child(3) { width: 28px; }
.ppi-season-table th:nth-child(7),
.ppi-season-table td:nth-child(7) { width: 32px; }
.ppi-goalkeepers {
  min-height: 104px;
  display: grid;
  grid-template-rows: 21px auto;
  gap: 4px;
}
.ppi-goalkeepers > header { display: flex; align-items: baseline; gap: 8px; padding: 0 3px; }
.ppi-goalkeepers > header strong { font-size: 11px; font-weight: 950; }
.ppi-goalkeepers > header span { color: #6c8199; font-size: 7px; font-weight: 800; }
.ppi-goalkeepers > div { min-height: 0; display: grid; gap: 7px; }
.ppi-goalkeepers > div.columns-1 { grid-template-columns: 1fr; }
.ppi-goalkeepers > div.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppi-goalie-team {
  --ppi-side: var(--ppi-home);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, 18%) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #243950;
  border-radius: 10px;
  background: rgba(11, 23, 39, .84);
}
.ppi-goalie-team.side-away { --ppi-side: var(--ppi-away); }
.ppi-goalie-team > strong {
  display: grid;
  place-items: center start;
  overflow: hidden;
  padding: 0 9px;
  color: color-mix(in srgb, var(--ppi-side) 65%, white);
  border-right: 1px solid #243950;
  box-shadow: inset 3px 0 var(--ppi-side);
  font-size: 8px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppi-goalie-team > div { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppi-goalie-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, .85fr) minmax(145px, 1.45fr);
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  border-left: 1px solid #243950;
  cursor: pointer;
}
.ppi-goalie-card.not-played { opacity: .45; }
.ppi-goalie-person { min-width: 0; display: grid; grid-template-columns: 29px minmax(0, 1fr); align-items: center; gap: 6px; }
.ppi-goalie-person > b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #06131f;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ppi-side) 78%, white);
  font-size: 10px;
  font-weight: 950;
}
.ppi-goalie-person span { min-width: 0; display: grid; gap: 1px; }
.ppi-goalie-person strong { overflow: hidden; color: #d5e0eb; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ppi-goalie-person small { color: #6f849b; font-size: 6.5px; }
.ppi-goalie-card dl { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin: 0; }
.ppi-season-goalie dl { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ppi-goalie-card dl div { min-width: 0; display: grid; gap: 1px; text-align: center; }
.ppi-goalie-card dt { color: #667c94; font-size: 6px; font-weight: 900; }
.ppi-goalie-card dd { margin: 0; color: #e4edf6; font: 900 8.5px "Roboto Mono", Consolas, monospace; }
.ppi-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(2, 8, 15, .76);
  backdrop-filter: blur(3px);
}
.ppi-player-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 21;
  width: min(1040px, calc(100% - 34px));
  max-height: calc(100% - 30px);
  overflow: auto;
  padding: 25px;
  border: 1px solid #355170;
  border-radius: 22px;
  background: linear-gradient(145deg, #11243a, #081522 72%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
  transform: translate(-50%, -50%);
}
.ppi-player-detail > button {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 38px;
  height: 38px;
  color: #91a5bb;
  border: 1px solid #314b66;
  border-radius: 8px;
  background: #0b1a2a;
  font-size: 22px;
}
.ppi-player-detail > header { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 18px; padding-right: 48px; }
.ppi-player-detail > header > b {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  color: #06130f;
  border-radius: 21px;
  background: #48dfbd;
  font: 950 31px "Roboto Mono", Consolas, monospace;
}
.ppi-player-detail > header div { min-width: 0; display: grid; gap: 2px; }
.ppi-player-detail > header span { color: #6d879f; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.ppi-player-detail > header strong { overflow: hidden; font-size: 29px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.ppi-player-detail > header small { color: #7890a8; font-size: 11px; }
.ppi-player-detail > section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 21px; }
.ppi-player-detail > section div { min-width: 0; min-height: 70px; display: grid; align-content: center; gap: 7px; padding: 11px 13px; border: 1px solid #28415b; border-radius: 12px; background: rgba(8, 20, 33, .76); }
.ppi-player-detail > section span { color: #7289a1; font-size: 9px; font-weight: 850; }
.ppi-player-detail > section strong { color: #edf5fc; font: 950 18px "Roboto Mono", Consolas, monospace; }
.ppi-empty {
  grid-row: 1 / -1;
  place-self: center;
  display: grid;
  gap: 7px;
  color: #71869f;
  text-align: center;
}
.ppi-empty strong { color: #bdcad9; font-size: 18px; }
.ppi-empty span { font-size: 11px; }

@media (max-width: 900px) {
  .hsh-navigation button { min-width: 84px; padding: 0 9px; }
  .htr-header { grid-template-columns: 1fr; }
  .htr-header > time { display: none; }
  .htr-header nav { justify-content: flex-start; }
  .hts-header { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); }
  .hts-team strong { font-size: 15px; }
  .hts-score strong { font-size: 24px; }
  .hts-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .hts-column { gap: 6px; }
  .htb-header { grid-template-columns: 1fr; }
  .htb-header > small { display: none; }
  .htb-groups.groups-2,
  .htb-groups.groups-3,
  .htb-groups.groups-4 { grid-template-columns: 1fr; overflow-y: auto; }
  .ppi-header { grid-template-columns: 1fr; }
  .ppi-header > label { display: none; }
  .ppi-leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppi-player-detail > section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppi-skater-tables.columns-2,
  .ppi-goalkeepers > div.columns-2 { grid-template-columns: 1fr; overflow-y: auto; }
  .ppi-goalie-team { grid-template-columns: 1fr; }
  .ppi-goalie-team > strong { display: none; }
}
.hpd-tools-row.hpd-tools-row--compact {
  display: block;
}
.hpd-tools-row--compact .hpd-penalty-tools {
  grid-template-columns: minmax(0,1fr) 128px;
}

/* Editor session controls */
.editor-session-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: #87dec9;
  border: 1px solid rgba(72,223,189,.28);
  border-radius: 9px;
  background: rgba(72,223,189,.07);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .04em;
}
.editor-lock-btn {
  color: #ffc0c9;
  border-color: rgba(255,102,125,.32);
  background: rgba(255,102,125,.07);
}
.runtime-editor-hint {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: #8296af;
  border: 1px solid #2c425c;
  border-radius: 8px;
  background: rgba(11,22,37,.72);
  font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .03em;
}

/* PIN dialog */
.modal-card:has(.editor-pin-dialog) {
  width: min(490px,94vw);
  overflow: visible;
}
.editor-pin-dialog {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr);
  gap: 13px;
  padding-top: 4px;
}
.editor-pin-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #07130f;
  border-radius: 15px;
  background: linear-gradient(145deg,#79efd3,#36c6a7);
  box-shadow: 0 0 30px rgba(72,223,189,.22);
  font-size: 23px;
  font-weight: 950;
}
.editor-pin-copy {
  display: grid;
  align-content: center;
  gap: 4px;
}
.editor-pin-copy strong {
  color: #eff6ff;
  font-size: 16px;
}
.editor-pin-copy p {
  margin: 0;
  color: #8194ad;
  font-size: 11px;
  line-height: 1.45;
}
.editor-pin-field {
  grid-column: 1 / 3;
  display: grid;
  gap: 7px;
}
.editor-pin-field > span {
  color: #8498b1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.editor-pin-field input {
  width: 100%;
  min-height: 58px;
  color: #fff;
  border: 1px solid #344e6a;
  border-radius: 13px;
  background: #081421;
  font-family: "Roboto Mono","Cascadia Mono",Consolas,monospace;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: .38em;
  text-align: center;
  outline: none;
}
.editor-pin-field input:focus {
  border-color: #48dfbd;
  box-shadow: 0 0 0 4px rgba(72,223,189,.09);
}
.editor-pin-preview {
  grid-column: 1 / 3;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.editor-pin-preview i {
  width: 10px;
  height: 10px;
  border: 1px solid #36506b;
  border-radius: 50%;
  background: #0b1726;
  transition: .14s ease;
}
.editor-pin-preview i.filled {
  border-color: #48dfbd;
  background: #48dfbd;
  box-shadow: 0 0 12px rgba(72,223,189,.55);
}
.editor-pin-message {
  grid-column: 1 / 3;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 7px 10px;
  color: #8095ae;
  border: 1px solid #293f58;
  border-radius: 9px;
  background: rgba(8,18,30,.64);
  font-size: 10px;
  text-align: center;
}
.editor-pin-message.error {
  color: #ffc3cc;
  border-color: rgba(255,102,125,.36);
  background: rgba(255,102,125,.07);
}
.editor-pin-dialog.success .editor-pin-icon {
  transform: scale(1.05);
  box-shadow: 0 0 38px rgba(72,223,189,.36);
}
.editor-pin-actions {
  grid-column: 1 / 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Global custom tooltips */
.ui-custom-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(320px,calc(100vw - 24px));
  padding: 8px 11px;
  color: #eaf2fd;
  border: 1px solid #3a5674;
  border-radius: 9px;
  background:
    linear-gradient(145deg,rgba(25,41,62,.98),rgba(10,21,35,.98));
  box-shadow:
    0 14px 35px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.04);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .015em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(.98);
  transition: opacity .13s ease,transform .13s ease;
}
.ui-custom-tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #3a5674;
  border-bottom: 1px solid #3a5674;
  background: #0e1b2d;
  transform: translateX(-50%) rotate(45deg);
}
.ui-custom-tooltip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Topbar can fit publish/session controls */
.topbar .top-actions {
  gap: 7px;
}
@media (max-width: 1500px) {
  .editor-session-badge {
    order: 5;
  }
}

/* Three-state sorting for every real table inside the hockey statistics views. */
.hockey-statistics-hub table th.hst-sortable,
.hockey-player-statistics table th.hst-sortable,
.hockey-tournament-statistics table th.hst-sortable {
  cursor: pointer;
  user-select: none;
  transition: color .12s ease, background .12s ease;
}
.hockey-statistics-hub table th.hst-sortable::after,
.hockey-player-statistics table th.hst-sortable::after,
.hockey-tournament-statistics table th.hst-sortable::after {
  content: "↕";
  display: inline-block;
  min-width: 9px;
  margin-left: 4px;
  color: #49647e;
  font-size: .9em;
  line-height: 1;
  opacity: .72;
}
.hockey-statistics-hub table th.hst-sortable:hover,
.hockey-player-statistics table th.hst-sortable:hover,
.hockey-tournament-statistics table th.hst-sortable:hover,
.hockey-statistics-hub table th.hst-sortable:focus-visible,
.hockey-player-statistics table th.hst-sortable:focus-visible,
.hockey-tournament-statistics table th.hst-sortable:focus-visible {
  color: #dce9f5;
  outline: none;
}
.hockey-statistics-hub table th.hst-sort-active,
.hockey-player-statistics table th.hst-sort-active,
.hockey-tournament-statistics table th.hst-sort-active {
  color: #48dfbd;
}
.hockey-statistics-hub table th.hst-sort-asc::after,
.hockey-player-statistics table th.hst-sort-asc::after,
.hockey-tournament-statistics table th.hst-sort-asc::after {
  content: "↑";
  color: #48dfbd;
  opacity: 1;
}
.hockey-statistics-hub table th.hst-sort-desc::after,
.hockey-player-statistics table th.hst-sort-desc::after,
.hockey-tournament-statistics table th.hst-sort-desc::after {
  content: "↓";
  color: #48dfbd;
  opacity: 1;
}

/* ========================================================================
   Stable runtime canvas on every monitor and in browser fullscreen mode
   ======================================================================== */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.runtime-view {
  height: 100vh;
  height: 100dvh;
}

.runtime-viewport {
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.runtime-sizer {
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  overflow: visible;
}

.runtime-stage {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: top left;
  backface-visibility: hidden;
  will-change: transform;
}

/* Hockey pages live on a fixed logical canvas. Browser-width media queries
   must not rearrange the content inside that canvas after it has been scaled. */
.runtime-view .hpd-workbench {
  grid-template-columns: minmax(190px, 225px) minmax(380px, 1fr);
}
.runtime-view .hpd-event-fields {
  grid-template-columns: 1.12fr 1.42fr .72fr;
}
.runtime-view .hpd-tools-row:not(.hpd-tools-row--compact) {
  grid-template-columns: 178px minmax(0, 1fr);
}
.runtime-view .hpd-penalty-tools {
  grid-template-columns: minmax(0, 1fr) 118px;
}
.runtime-view .timer-editor-team-grid {
  grid-template-columns: 1fr 1fr;
}
.runtime-view .hsh-navigation button {
  min-width: 112px;
  padding: 0 12px;
}
.runtime-view .htr-header {
  grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 1fr);
}
.runtime-view .htr-header > time {
  display: block;
}
.runtime-view .htr-header nav {
  justify-content: center;
}
.runtime-view .hts-header {
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
}
.runtime-view .hts-team strong {
  font-size: 20px;
}
.runtime-view .hts-score strong {
  font-size: 30px;
}
.runtime-view .hts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
.runtime-view .htb-header {
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
}
.runtime-view .htb-header > small {
  display: block;
}
.runtime-view .htb-groups.groups-2,
.runtime-view .htb-groups.groups-3,
.runtime-view .htb-groups.groups-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
.runtime-view .ppi-header {
  grid-template-columns: minmax(210px, 1fr) auto minmax(190px, 1fr);
}
.runtime-view .ppi-header > label {
  display: grid;
}
.runtime-view .ppi-leaders {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.runtime-view .ppi-skater-tables.columns-2,
.runtime-view .ppi-goalkeepers > div.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}
.runtime-view .ppi-goalie-team {
  grid-template-columns: minmax(90px, 18%) minmax(0, 1fr);
}
.runtime-view .ppi-goalie-team > strong {
  display: grid;
}
.runtime-view .hpd-tools-row--compact .hpd-penalty-tools {
  grid-template-columns: minmax(0, 1fr) 128px;
}

/* v24 — compact icon actions in the quick timer editor */
.timer-editor-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #c9d6e5;
  border: 1px solid #344c67;
  border-radius: 11px;
  background: linear-gradient(180deg, #1a2a3f, #101b2b);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 7px 16px rgba(0,0,0,.15);
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  transition: transform .14s ease, border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease;
}
.timer-editor-icon-btn:hover:not(:disabled),
.timer-editor-icon-btn:focus-visible:not(:disabled) {
  z-index: 8;
  transform: translateY(-2px);
  color: #fff;
  border-color: #6287ae;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 10px 23px rgba(0,0,0,.25);
  outline: none;
}
.timer-editor-icon-btn.is-apply {
  color: #7ff0d5;
  border-color: rgba(72,223,189,.38);
  background: linear-gradient(180deg, rgba(72,223,189,.15), rgba(20,54,48,.34));
}
.timer-editor-icon-btn.is-toggle {
  color: #8cc2ff;
  border-color: rgba(77,156,255,.38);
  background: linear-gradient(180deg, rgba(77,156,255,.14), rgba(23,48,78,.36));
}
.timer-editor-row.is-running .timer-editor-icon-btn.is-toggle {
  color: #ffd37a;
  border-color: rgba(245,196,81,.46);
  background: linear-gradient(180deg, rgba(245,196,81,.15), rgba(68,52,18,.36));
}
.timer-editor-icon-btn.is-reset {
  color: #ff9caf;
  border-color: rgba(255,95,121,.34);
  background: linear-gradient(180deg, rgba(255,95,121,.12), rgba(70,25,35,.34));
}
.timer-editor-icon-btn:disabled {
  cursor: not-allowed;
  filter: grayscale(.45);
  opacity: .36;
  box-shadow: none;
}
.timer-editor-icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  width: max-content;
  max-width: 230px;
  padding: 7px 9px;
  color: #edf5ff;
  border: 1px solid #3a526e;
  border-radius: 8px;
  background: rgba(7,15,25,.97);
  box-shadow: 0 12px 28px rgba(0,0,0,.33);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.timer-editor-icon-btn:hover::after,
.timer-editor-icon-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.timer-editor-main-list .timer-editor-actions .timer-editor-icon-btn {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  border-radius: 13px;
  font-size: 21px;
}

/* Five match/season leader cards always stay on one row in runtime. */
.runtime-view .ppi-leaders,
.runtime-view .ppi-leaders.leaders-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Match events and shots map */
.hockey-team-statistics.has-mode-tabs {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.hockey-team-statistics.has-mode-tabs.is-shot-map {
  grid-template-rows: auto minmax(0, 1fr);
}
.hts-mode-tabs {
  min-height: 34px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.hts-mode-tabs button {
  min-width: 128px;
  padding: 0 16px;
  color: #8095ad;
  border: 1px solid #29425d;
  border-radius: 10px;
  background: rgba(10, 24, 40, .92);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .03em;
}
.hts-mode-tabs button:hover { color: #edf5fc; border-color: #4d6f8e; }
.hts-mode-tabs button.active {
  color: #06140f;
  border-color: transparent;
  background: #48dfbd;
  box-shadow: 0 5px 18px rgba(72, 223, 189, .14);
}

.hockey-match-events {
  --hme-home: #4d9cff;
  --hme-away: #ff5f79;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 9px;
  padding: 14px;
  overflow: hidden;
  color: #eef4ff;
  border: 1px solid #263b55;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(72, 223, 189, .09), transparent 29%),
    linear-gradient(180deg, rgba(13, 27, 44, .98), rgba(7, 17, 29, .98));
}
.hme-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hme-header > div { min-width: 0; display: grid; gap: 2px; }
.hme-header span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.hme-header strong { color: #edf5fc; font-size: 20px; font-weight: 950; }
.hme-header small { color: #71869e; font-size: 8px; font-weight: 800; }
.hme-header > b {
  min-width: 52px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #06140f;
  border-radius: 10px;
  background: #48dfbd;
  font: 950 15px "Roboto Mono", Consolas, monospace;
}
.hme-periods {
  min-height: 31px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.hme-periods button {
  min-width: 88px;
  padding: 0 12px;
  color: #8398b0;
  border: 1px solid #29425d;
  border-radius: 8px;
  background: #0b192a;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
.hme-periods button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
.hme-table-scroll {
  min-height: 0;
  overflow: auto;
  border: 1px solid #213851;
  border-radius: 12px;
  background: rgba(5, 15, 26, .84);
}
.hme-table-scroll table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.hme-table-scroll th,
.hme-table-scroll td {
  min-height: 34px;
  padding: 7px 9px;
  border-bottom: 1px solid rgba(38, 59, 85, .62);
  color: #91a5ba;
  font: 800 9px "Roboto Mono", Consolas, monospace;
  vertical-align: middle;
}
.hme-table-scroll th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 31px;
  color: #7189a1;
  background: #0d1c2e;
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hme-table-scroll th:nth-child(1), .hme-table-scroll td:nth-child(1) { width: 86px; }
.hme-table-scroll th:nth-child(2), .hme-table-scroll td:nth-child(2) { width: 70px; text-align: center; }
.hme-table-scroll th:nth-child(3), .hme-table-scroll td:nth-child(3) { width: 32%; }
.hme-table-scroll th:nth-child(4), .hme-table-scroll td:nth-child(4) { width: 19%; }
.hme-table-scroll th:nth-child(5), .hme-table-scroll td:nth-child(5) { width: 27%; }
.hme-table-scroll th:nth-child(6), .hme-table-scroll td:nth-child(6) { width: 65px; text-align: center; }
.hme-table-scroll td strong { display: block; color: #e9f2fb; font-size: 10px; }
.hme-table-scroll td small { display: block; margin-top: 2px; color: #71869d; font-size: 7px; }
.hme-table-scroll tr.side-home td { background: color-mix(in srgb, var(--hme-home) 7%, transparent); }
.hme-table-scroll tr.side-away td { background: color-mix(in srgb, var(--hme-away) 7%, transparent); }
.hme-table-scroll tr.side-home td:first-child { box-shadow: inset 3px 0 var(--hme-home); }
.hme-table-scroll tr.side-away td:first-child { box-shadow: inset 3px 0 var(--hme-away); }
.hme-table-scroll tbody tr:hover td { filter: brightness(1.12); }
.hme-empty,
.hsm-empty {
  place-self: center;
  display: grid;
  gap: 7px;
  color: #71869f;
  text-align: center;
}
.hme-empty strong,
.hsm-empty strong { color: #bdcad9; font-size: 18px; }
.hme-empty span,
.hsm-empty span { font-size: 11px; }

.hockey-shots-map {
  --hsm-home: #4d9cff;
  --hsm-away: #ff5f79;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid #263b55;
  border-radius: 16px;
  background: rgba(7, 17, 29, .74);
}
.hockey-team-statistics > .hockey-shots-map { border: 0; padding: 0; border-radius: 0; background: transparent; }
.hsm-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hsm-header > div:first-child { min-width: 0; display: grid; gap: 2px; }
.hsm-header > div:first-child span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .16em; }
.hsm-header > div:first-child strong { color: #edf5fc; font-size: 18px; font-weight: 950; }
.hsm-summary { display: grid; grid-template-columns: repeat(6, auto); align-items: baseline; gap: 3px 7px; }
.hsm-summary b { color: #eaf3fb; font: 950 14px "Roboto Mono", Consolas, monospace; }
.hsm-summary span { color: #72889f; font-size: 7px; font-weight: 850; }
.hsm-filters {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(180px, .7fr);
  align-items: center;
  gap: 8px;
}
.hsm-periods,
.hsm-sides { min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.hsm-periods button,
.hsm-sides button {
  min-height: 29px;
  padding: 0 10px;
  color: #8095ad;
  border: 1px solid #29425d;
  border-radius: 8px;
  background: #0b192a;
  font-size: 7.5px;
  font-weight: 900;
  white-space: nowrap;
}
.hsm-periods button.active,
.hsm-sides button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
.hsm-player-filter {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #71869d;
  font-size: 7px;
  font-weight: 900;
}
.hsm-player-filter select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 25px 0 8px;
  color: #d2deea;
  border: 1px solid #29425d;
  border-radius: 8px;
  outline: none;
  background: #0b192a;
  font-size: 8px;
  font-weight: 850;
}
.hsm-map-wrap { position: relative; min-height: 0; display: grid; place-items: stretch; overflow: hidden; }
.hsm-rink {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  border: 3px solid rgba(198, 222, 235, .78);
  border-radius: 72px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 33%),
    linear-gradient(90deg, rgba(77,156,255,.035), transparent 32%, transparent 68%, rgba(255,95,121,.035)),
    #dbeaf0;
  box-shadow: inset 0 0 0 1px rgba(11, 34, 51, .24), 0 8px 24px rgba(0,0,0,.2);
}
.hsm-rink::before,
.hsm-rink::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 46px;
  border: 2px solid rgba(180, 33, 58, .75);
  border-radius: 50%;
  transform: translateY(-50%);
}
.hsm-rink::before { left: -9px; }
.hsm-rink::after { right: -9px; }
.hsm-center-line,
.hsm-blue-line,
.hsm-goal-line { position: absolute; top: 0; bottom: 0; width: 2px; }
.hsm-center-line { left: 50%; background: rgba(185, 37, 61, .75); }
.hsm-blue-line { width: 4px; background: rgba(34, 93, 187, .68); }
.hsm-blue-line.left { left: 34%; }
.hsm-blue-line.right { right: 34%; }
.hsm-goal-line { background: rgba(185, 37, 61, .52); }
.hsm-goal-line.left { left: 8%; }
.hsm-goal-line.right { right: 8%; }
.hsm-center-circle,
.hsm-faceoff,
.hsm-goal-crease {
  position: absolute;
  border: 2px solid rgba(185, 37, 61, .48);
  border-radius: 50%;
}
.hsm-center-circle { left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.hsm-faceoff { width: 48px; height: 48px; }
.hsm-faceoff.left-top { left: 19%; top: 20%; }
.hsm-faceoff.left-bottom { left: 19%; bottom: 20%; }
.hsm-faceoff.right-top { right: 19%; top: 20%; }
.hsm-faceoff.right-bottom { right: 19%; bottom: 20%; }
.hsm-goal-crease { top: 50%; width: 31px; height: 54px; border-color: rgba(39, 116, 190, .55); background: rgba(72, 156, 223, .13); transform: translateY(-50%); }
.hsm-goal-crease.left { left: -9px; }
.hsm-goal-crease.right { right: -9px; }
.hsm-point {
  position: absolute;
  z-index: 5;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 50%;
  background: var(--hsm-home);
  box-shadow: 0 2px 7px rgba(0,0,0,.45);
  transform: translate(-50%, -50%);
  cursor: help;
}
.hsm-point.side-away { background: var(--hsm-away); }
.hsm-point.is-goal { width: 17px; height: 17px; border-color: #fff4a8; box-shadow: 0 0 0 3px rgba(255, 205, 63, .25), 0 2px 8px rgba(0,0,0,.5); }
.hsm-point.is-goal span { color: #fff3a1; font-size: 9px; line-height: 1; }
.hsm-point.is-missed,
.hsm-point.is-blocked { background: transparent; border-style: dashed; border-color: color-mix(in srgb, currentColor 50%, #30445a); }
.hsm-point.is-shot { opacity: .72; }
.hsm-no-results { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; color: #31495d; font-size: 12px; font-weight: 950; }
.hsm-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 17px; color: #72879e; font-size: 7px; font-weight: 850; }
.hsm-legend .side-home { color: color-mix(in srgb, var(--hsm-home) 72%, white); }
.hsm-legend .side-away { color: color-mix(in srgb, var(--hsm-away) 72%, white); }
.hsm-legend .goal { color: #f2cf53; }
.hsm-legend .target { color: #b7c8d8; }
.hsm-legend .missed { color: #71869d; }

.ppi-player-shot-map {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #28415b;
  border-radius: 15px;
  background: rgba(8, 20, 33, .76);
}
.ppi-player-shot-map > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.ppi-player-shot-map > header > div { display: grid; gap: 2px; }
.ppi-player-shot-map > header span { color: #48dfbd; font-size: 7px; font-weight: 950; letter-spacing: .15em; }
.ppi-player-shot-map > header strong { color: #e8f1fa; font-size: 14px; font-weight: 950; }
.ppi-player-shot-map > header b { color: #8196ad; font: 900 9px "Roboto Mono", Consolas, monospace; }
.ppi-player-shot-map .hsm-rink.is-compact { height: 245px; min-height: 245px; border-radius: 56px; }
.ppi-player-shot-map .hsm-point.is-compact { width: 10px; height: 10px; }
.ppi-player-shot-map .hsm-point.is-compact.is-goal { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .hsm-filters { grid-template-columns: 1fr; }
  .hsm-summary { display: none; }
  .hsm-rink { min-height: 260px; }
  .hme-table-scroll table { min-width: 720px; }
}

/* Coaches in game rosters and overall team statistics. */
.hpd-roster-header{min-height:58px}
.hpd-roster-coach{display:block;max-width:230px;overflow:hidden;color:#7f94aa;font-size:8px;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.hts-team small{display:block;margin-top:3px;color:#7f94aa;font-size:8px;font-weight:800;line-height:1.2}
.hts-team.away small{text-align:right}

/* KHL-style play-by-play timeline. */
.hockey-match-events{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:9px;height:100%;padding:14px;overflow:hidden}
.hme-filter-row{display:grid;gap:5px;min-width:0}
.hme-types{display:flex;gap:4px;min-width:0;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.hme-types button{flex:0 0 auto;padding:5px 10px;color:#7890a7;border:1px solid #273d54;border-radius:999px;background:#0a1625;font-size:8px;font-weight:900;cursor:pointer}
.hme-types button.active{color:#07150f;border-color:transparent;background:#48dfbd}
.hme-timeline{position:relative;min-height:0;overflow:auto;padding:2px 5px 14px 1px;scrollbar-width:thin}
.hme-timeline::before{position:absolute;top:4px;bottom:12px;left:97px;width:2px;background:linear-gradient(#314b65,#172a3d);content:""}
.hme-event{position:relative;display:grid;grid-template-columns:76px 28px minmax(0,1fr) minmax(90px,150px);align-items:start;gap:9px;margin:0 0 7px;padding:9px 11px 9px 6px;border:1px solid #21364d;border-radius:12px;background:linear-gradient(100deg,rgba(14,28,45,.96),rgba(8,19,32,.98));box-shadow:0 6px 16px rgba(0,0,0,.16)}
.hme-event.side-home{border-left:3px solid var(--hme-home);background:linear-gradient(100deg,color-mix(in srgb,var(--hme-home) 12%,#0d1b2c),#081320 62%)}
.hme-event.side-away{border-left:3px solid var(--hme-away);background:linear-gradient(100deg,color-mix(in srgb,var(--hme-away) 12%,#0d1b2c),#081320 62%)}
.hme-event-time{display:grid;gap:2px;text-align:right}
.hme-event-time strong{color:#eef6ff;font:950 15px "Roboto Mono",Consolas,monospace}
.hme-event-time span{color:#688096;font-size:7px;font-weight:900}
.hme-event>i{position:relative;z-index:2;display:grid;width:28px;height:28px;place-items:center;color:#071522;border:2px solid #0a1420;border-radius:50%;background:#9bb0c4;box-shadow:0 0 0 2px #2b435a;font-size:11px;font-style:normal;font-weight:950}
.hme-event.category-goal>i{background:#f0cd4d}.hme-event.category-penalty>i{background:#ff7284}.hme-event.category-shot>i{background:#8dc9ff}.hme-event.category-shootout>i{background:#d6a7ff}.hme-event.category-period>i{background:#48dfbd}
.hme-event-body{min-width:0;display:grid;gap:2px;text-align:left}
.hme-event-body>span{color:#6f879e;font-size:7px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.hme-event-body>strong{color:#edf5fc;font-size:12px;font-weight:950}
.hme-event-body p{margin:1px 0 0;color:#a9bac9;font-size:9px;font-weight:700;line-height:1.35;white-space:normal}
.hme-event-body small{color:#8298ad;font-size:8px;font-weight:800}
.hme-event-team{display:grid;gap:4px;justify-items:end;text-align:right}
.hme-event-team strong{color:#aebfce;font-size:9px;font-weight:900}
.hme-event-team b{padding:3px 7px;color:#fff;border-radius:7px;background:#233a50;font:950 12px "Roboto Mono",Consolas,monospace}
.hme-no-results{display:grid;min-height:180px;place-items:center;color:#60788f;font-size:12px;font-weight:900}

/* Dedicated officials page. */
.hockey-referees{display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;height:100%;padding:24px;overflow:hidden;background:radial-gradient(circle at 50% 0,rgba(72,223,189,.08),transparent 40%)}
.hrf-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 18px;border-bottom:1px solid #263c53}
.hrf-header>div{display:grid;gap:4px}.hrf-header span{color:#48dfbd;font-size:9px;font-weight:950;letter-spacing:.16em}.hrf-header strong{color:#eff7ff;font-size:25px;font-weight:950}.hrf-header>b{display:grid;width:48px;height:48px;place-items:center;color:#091621;border-radius:15px;background:#48dfbd;font:950 18px "Roboto Mono",Consolas,monospace}
.hrf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:0}
.hrf-group{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-width:0;padding:17px;border:1px solid #263c54;border-radius:18px;background:rgba(8,19,32,.86)}
.hrf-group>header{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}.hrf-group>header span{grid-column:1;color:#718aa2;font-size:8px;font-weight:950;letter-spacing:.13em}.hrf-group>header strong{grid-column:1;color:#eaf4fd;font-size:18px;font-weight:950}.hrf-group>header b{grid-column:2;grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;color:#a9bdcf;border:1px solid #304961;border-radius:10px;background:#0c1928;font:950 12px "Roboto Mono",Consolas,monospace}
.hrf-group>div{display:grid;align-content:start;gap:9px;min-height:0;overflow:auto;padding-right:3px;scrollbar-width:thin}
.hrf-group article{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:13px;padding:14px;border:1px solid #263e56;border-radius:14px;background:linear-gradient(110deg,#11243a,#0a1726)}
.hrf-group article>b{display:grid;height:50px;place-items:center;color:#eef8ff;border-radius:12px;background:#24415e;font:950 20px "Roboto Mono",Consolas,monospace}.hrf-group.linesman article>b{background:#30435a}
.hrf-group article>div{display:grid;gap:3px;min-width:0}.hrf-group article span{color:#748ca3;font-size:8px;font-weight:900}.hrf-group article strong{overflow:hidden;color:#eff6fc;font-size:15px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}
.hrf-empty{display:grid;height:100%;place-items:center;align-content:center;gap:7px;color:#72889e;text-align:center}.hrf-empty strong{color:#c4d1dd;font-size:19px}.hrf-empty span{font-size:11px}

/* Existing CSS pseudo-tooltips are a fallback; the body portal is always on top. */
[data-tooltip]::before,[data-tooltip]::after{z-index:2147483646!important}

@media(max-width:900px){.hrf-grid{grid-template-columns:1fr}.hme-event{grid-template-columns:62px 24px minmax(0,1fr)}.hme-event-team{display:none}.hme-timeline::before{left:81px}}

/* v26 — richer player profiles, tied leaders and wider statistics tables */
.ppi-country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  margin-right: 5px;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
  vertical-align: -1px;
}
.ppi-player-name .ppi-country-flag,
.ppi-goalie-person .ppi-country-flag {
  min-width: 14px;
  margin-right: 3px;
  font-size: 11px;
}
.ppi-leader-names {
  min-width: 0;
  max-height: 31px;
  display: flex !important;
  flex-wrap: wrap;
  align-content: center;
  gap: 2px 7px;
  overflow: auto !important;
  color: #c2d0df;
  line-height: 1.18;
  text-overflow: clip !important;
  white-space: normal !important;
  scrollbar-width: thin;
}
.ppi-leader-names span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  white-space: nowrap;
}
.ppi-player-detail {
  width: min(1240px, calc(100% - 20px));
  max-height: calc(100% - 18px);
  padding: 27px;
}
.ppi-profile-bio {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.ppi-profile-bio > div {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid #29445f;
  border-radius: 11px;
  background: rgba(8, 20, 33, .7);
}
.ppi-profile-bio span {
  color: #70889f;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ppi-profile-bio strong {
  min-width: 0;
  overflow: hidden;
  color: #dce7f2;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Use the available canvas width instead of keeping decorative side gutters. */
.runtime-view .hockey-player-statistics,
.runtime-view .hockey-team-statistics,
.runtime-view .hockey-tournament-statistics,
.runtime-view .hockey-tournament-standings,
.runtime-view .hockey-match-events,
.runtime-view .hockey-referees {
  width: 100%;
  max-width: none;
  padding-left: 5px;
  padding-right: 5px;
}
.runtime-view .ppi-team-table table,
.runtime-view .htr-table-scroll table,
.runtime-view .htb-group table,
.runtime-view .hme-table-scroll table {
  width: 100%;
}
.runtime-view .ppi-team-table th:nth-child(2),
.runtime-view .ppi-team-table td:nth-child(2) {
  width: 38%;
}
.runtime-view .htr-table-scroll .htr-name {
  min-width: 260px;
}
.runtime-view .htb-groups {
  width: 100%;
}

@media (max-width: 1120px) {
  .ppi-profile-bio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ppi-country-flag:is(img) {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.ppi-player-name .ppi-country-flag:is(img),
.ppi-goalie-person .ppi-country-flag:is(img) {
  width: 14px;
  height: 10px;
}


/* Final responsive hockey refinements: play-by-play, player shot profile and tied leaders. */
.hpd-layout.has-play-by-play {
  grid-template-columns: minmax(245px, .82fr) minmax(510px, 1.55fr) minmax(245px, .82fr) minmax(250px, .82fr);
  gap: 10px;
}
.hpd-play-by-play {
  min-width: 0; max-height: 690px; display: grid; grid-template-rows: auto minmax(0,1fr);
  overflow: hidden; border: 1px solid #29445f; border-radius: 14px; background: rgba(5,15,25,.93);
}
.hpd-play-by-play > header { display:flex; align-items:center; justify-content:space-between; padding:12px 13px; border-bottom:1px solid #233d55; }
.hpd-play-by-play > header div { display:grid; gap:3px; }
.hpd-play-by-play > header span { color:#657f97; font-size:8px; font-weight:900; letter-spacing:.12em; }
.hpd-play-by-play > header strong { font-size:13px; }
.hpd-play-by-play > header b { min-width:28px; text-align:center; padding:5px; border-radius:8px; background:#17324a; }
.hpd-pbp-list { min-height:0; overflow:auto; padding:7px; display:grid; align-content:start; gap:5px; }
.hpd-pbp-list article { min-width:0; display:grid; grid-template-columns:27px 42px minmax(0,1fr); gap:7px; align-items:center; padding:7px; border:1px solid #20384e; border-radius:9px; background:#0b1c2b; }
.hpd-pbp-list article > i { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#17344c; font-style:normal; font-weight:950; }
.hpd-pbp-list article.category-penalty > i { color:#fff; background:#b62b3a; box-shadow:0 0 0 2px rgba(255,83,103,.22); }
.hpd-pbp-list article.side-home { border-left:3px solid var(--hpd-home); }
.hpd-pbp-list article.side-away { border-left:3px solid var(--hpd-away); }
.hpd-pbp-list time { color:#dce8f2; font-size:11px; font-weight:900; }
.hpd-pbp-list article > div { min-width:0; display:grid; gap:2px; }
.hpd-pbp-list article > div span,.hpd-pbp-list article > div small { color:#7890a5; font-size:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hpd-pbp-list article > div strong { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ppi-player-detail.has-shot-map { width:min(1340px,calc(100vw - 40px)); max-height:min(750px,calc(100vh - 36px)); }
.ppi-detail-layout { display:grid; grid-template-columns:minmax(0,1.35fr); min-width:0; min-height:0; gap:16px; }
.ppi-player-detail.has-shot-map .ppi-detail-layout { grid-template-columns:minmax(0,1.42fr) minmax(340px,.75fr); align-items:stretch; }
.ppi-detail-info { min-width:0; min-height:0; overflow:auto; padding-right:2px; }
.ppi-detail-info > header { display:flex; align-items:center; gap:16px; padding:2px 0 14px; border-bottom:1px solid #29445f; }
.ppi-detail-info > header > b { min-width:72px; height:72px; display:grid; place-items:center; border-radius:16px; background:#15344e; font-size:30px; }
.ppi-detail-info > header > div { display:grid; gap:4px; }
.ppi-detail-info > header span { color:#7d96ad; font-size:10px; font-weight:900; letter-spacing:.08em; }
.ppi-detail-info > header strong { font-size:24px; }
.ppi-detail-info > section { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.ppi-detail-info > section > div { min-height:59px; display:grid; align-content:center; gap:4px; padding:8px 10px; border:1px solid #29445f; border-radius:10px; background:rgba(8,20,33,.72); }
.ppi-detail-info > section span { color:#7890a5; font-size:8px; font-weight:900; text-transform:uppercase; }
.ppi-detail-info > section strong { font-size:14px; }
.ppi-player-shot-map { min-width:0; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); align-self:stretch; padding:12px; border:1px solid #29445f; border-radius:14px; background:rgba(6,18,29,.85); }
.ppi-player-shot-map > header { display:flex; justify-content:space-between; gap:10px; padding-bottom:10px; }
.ppi-player-shot-map > header div { display:grid; gap:3px; }
.ppi-player-shot-map > header span { color:#718ba3; font-size:8px; font-weight:950; letter-spacing:.12em; }
.ppi-player-shot-map > header strong { font-size:13px; }
.ppi-player-shot-map > header b { color:#a9bbcb; font-size:10px; }
.hsm-rink.is-profile-half { position:relative; width:min(100%,390px); height:500px; justify-self:center; align-self:center; overflow:hidden; border:2px solid #89a7bd; border-radius:18px 18px 90px 90px; background:linear-gradient(rgba(218,239,247,.95),rgba(190,220,233,.96)); }
.hsm-profile-goal { position:absolute; left:50%; top:1%; width:21%; height:5%; transform:translateX(-50%); border:3px solid #d44250; border-bottom:0; border-radius:12px 12px 0 0; }
.hsm-profile-crease { position:absolute; left:50%; top:4%; width:35%; height:12%; transform:translateX(-50%); border:2px solid #5ca1c5; border-radius:0 0 50% 50%; background:rgba(93,174,211,.18); }
.hsm-profile-goal-line { position:absolute; left:0; right:0; top:9%; border-top:2px solid #d74b55; }
.hsm-profile-blue-line { position:absolute; left:0; right:0; top:55%; border-top:4px solid #4386c6; }
.hsm-profile-faceoff { position:absolute; top:31%; width:18%; aspect-ratio:1; border:2px solid #d34b55; border-radius:50%; }
.hsm-profile-faceoff.left { left:18%; } .hsm-profile-faceoff.right { right:18%; }
.hsm-rink.is-profile-half .hsm-point { z-index:4; }

.ppi-leader-names { position:relative; display:block!important; max-height:none!important; overflow:visible!important; }
.ppi-leader-single,.ppi-leader-list summary,.ppi-leader-list > div > span { display:flex; align-items:center; gap:5px; min-width:0; }
.ppi-leader-single strong,.ppi-leader-list summary strong,.ppi-leader-list > div strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ppi-leader-list { position:relative; }
.ppi-leader-list summary { cursor:pointer; list-style:none; height:22px; }
.ppi-leader-list summary::-webkit-details-marker { display:none; }
.ppi-leader-list summary > b { margin-left:auto; padding:2px 5px; border-radius:6px; color:#cbe4f7; background:#1b405d; font-size:8px; }
.ppi-leader-list > div { position:absolute; z-index:100040; left:0; top:calc(100% + 4px); min-width:220px; max-width:310px; display:grid; gap:4px; padding:7px; border:1px solid #375874; border-radius:9px; background:#071724; box-shadow:0 14px 35px rgba(0,0,0,.48); }
.ppi-leader-list:not([open]) > div { display:none; }
.ppi-leader-list > div > span { min-height:24px; padding:3px 5px; border-radius:6px; background:#10273a; }

.hme-event.category-penalty > i { color:#fff; background:#b62b3a!important; border-color:#ec5364!important; }
[data-tooltip], [title] { --tooltip-z:1000000; }

@media (max-width:1180px) {
  .hpd-layout.has-play-by-play { grid-template-columns:minmax(220px,.8fr) minmax(460px,1.5fr) minmax(220px,.8fr); }
  .hpd-play-by-play { grid-column:1 / -1; max-height:220px; }
  .ppi-player-detail.has-shot-map .ppi-detail-layout { grid-template-columns:1fr; }
  .ppi-player-shot-map { min-height:470px; }
  .ppi-detail-info > section { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* v27 — standalone play-by-play window and exact KHL rink artwork. */
.runtime-view { position: relative; }

.hockey-pbp-window {
  --pbp-home: #4d9cff;
  --pbp-away: #ff5f79;
  position: absolute;
  z-index: 100200;
  top: 76px;
  right: 14px;
  width: min(390px, calc(100vw - 28px));
  max-height: calc(100vh - 94px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  color: #edf5fc;
  border: 1px solid #36546e;
  border-radius: 16px;
  background: rgba(5, 15, 25, .975);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255,255,255,.025) inset;
  backdrop-filter: blur(14px);
}
.hockey-pbp-window.is-collapsed { grid-template-rows: auto; }
.hockey-pbp-window.is-collapsed .hockey-pbp-window-periods,
.hockey-pbp-window.is-collapsed .hockey-pbp-window-list { display: none; }
.hockey-pbp-window-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px 10px 14px;
  border-bottom: 1px solid #243d54;
  background: linear-gradient(100deg, rgba(30, 63, 88, .8), rgba(8, 22, 35, .96));
}
.hockey-pbp-window-header > div:first-child { min-width: 0; display: grid; gap: 3px; }
.hockey-pbp-window-header span { color: #48dfbd; font-size: 8px; font-weight: 950; letter-spacing: .15em; }
.hockey-pbp-window-header strong { overflow: hidden; font-size: 14px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.hockey-pbp-window-actions { display: flex; align-items: center; gap: 7px; }
.hockey-pbp-window-actions b {
  min-width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #d7e5f0;
  border: 1px solid #38556d;
  border-radius: 9px;
  background: #10283b;
  font: 950 11px "Roboto Mono", Consolas, monospace;
}
.hockey-pbp-window-actions button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #b9cada;
  border: 1px solid #38556d;
  border-radius: 9px;
  background: #10283b;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}
.hockey-pbp-window-actions button:hover { color: #07150f; border-color: transparent; background: #48dfbd; }
.hockey-pbp-window-periods {
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  overflow-x: auto;
  border-bottom: 1px solid #20384e;
  scrollbar-width: thin;
}
.hockey-pbp-window-periods button {
  flex: 0 0 auto;
  min-width: 48px;
  height: 25px;
  padding: 0 8px;
  color: #7890a7;
  border: 1px solid #2a4359;
  border-radius: 7px;
  background: #0b1b2a;
  font-size: 7.5px;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}
.hockey-pbp-window-periods button.active { color: #06140f; border-color: transparent; background: #48dfbd; }
.hockey-pbp-window-list {
  min-height: 0;
  overflow: auto;
  padding: 7px;
  display: grid;
  align-content: start;
  gap: 5px;
  scrollbar-width: thin;
}
.hockey-pbp-window-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px 43px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #20384e;
  border-radius: 10px;
  background: #0a1a29;
}
.hockey-pbp-window-list article.side-home { border-left: 3px solid var(--pbp-home); }
.hockey-pbp-window-list article.side-away { border-left: 3px solid var(--pbp-away); }
.hockey-pbp-window-list time { color: #e4edf5; font: 950 10px "Roboto Mono", Consolas, monospace; }
.hockey-pbp-window-list article > div { min-width: 0; display: grid; gap: 2px; }
.hockey-pbp-window-list article > div span { color: #718aa1; font-size: 7px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.hockey-pbp-window-list article > div strong { color: #edf5fc; font-size: 10px; font-weight: 950; white-space: normal; }
.hockey-pbp-window-list article > div small { color: #8197ab; font-size: 8px; font-weight: 750; line-height: 1.25; white-space: normal; }
.hockey-pbp-score { padding: 3px 6px; color: #eff8ff; border-radius: 7px; background: #203b52; font: 950 10px "Roboto Mono", Consolas, monospace; }
.hockey-pbp-window-empty { min-height: 110px; display: grid; place-items: center; color: #6d8499; font-size: 10px; font-weight: 900; text-align: center; }

.hockey-event-icon {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #071522;
  border: 2px solid #0a1420;
  border-radius: 50%;
  background: #9bb0c4;
  box-shadow: 0 0 0 2px #2b435a;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}
.hockey-event-icon.is-compact { width: 25px; height: 25px; font-size: 9px; }
.hockey-event-icon.is-goal { background: #f0cd4d; }
.hockey-event-icon.is-shot { background: #8dc9ff; }
.hockey-event-icon.is-shootout { background: #d6a7ff; }
.hockey-event-icon.is-period { background: #48dfbd; }
.hockey-event-icon.is-penalty {
  color: #fff !important;
  border: 1px solid #ff7886 !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #d83b4b, #8d1727) !important;
  box-shadow: 0 0 0 2px rgba(255, 93, 110, .2), 0 4px 10px rgba(0,0,0,.35) !important;
}
.hockey-event-icon.is-penalty span { font: 950 9px "Roboto Mono", Consolas, monospace; letter-spacing: -.05em; }
.hme-event > .hockey-event-icon { width: 28px; height: 28px; }
.hme-event.category-penalty > .hockey-event-icon { border-radius: 7px !important; }

/* Use the original KHL rink drawing and preserve its real aspect ratio. */
.hsm-map-wrap { display: flex; align-items: center; justify-content: center; }
.hsm-rink.is-khl-image {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 2835 / 1417;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hsm-rink.is-khl-image::before,
.hsm-rink.is-khl-image::after { display: none; content: none; }
.hsm-rink-image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}
.hsm-rink.is-khl-image .hsm-point { z-index: 5; }
.hsm-rink.is-khl-image.is-profile-half {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1417 / 1418;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ppi-player-shot-map .hsm-rink.is-khl-image.is-profile-half { min-height: 0; }

@media (max-width: 980px) {
  .hockey-pbp-window { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 42vh; }
}


/* Build 2026.07.17.3: cache-safe runtime and independently positioned play-by-play. */
.runtime-title-line { display:flex; align-items:center; gap:8px; min-width:0; }
.runtime-title-line > strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.runtime-build-badge { flex:0 0 auto; padding:2px 5px; color:#48dfbd; border:1px solid rgba(72,223,189,.35); border-radius:5px; background:rgba(72,223,189,.08); font:800 7px/1.2 "Roboto Mono",Consolas,monospace; letter-spacing:.05em; }
.hockey-pbp-window { position:fixed; }


/* Build 2026.07.17.4: non-overlapping play-by-play side column, clear shot markers. */
.runtime-viewport {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
.runtime-viewport.has-hockey-pbp { gap: 14px; }
.runtime-viewport > .runtime-sizer { flex: 0 0 auto; margin: 0; }
.runtime-viewport:not(.has-hockey-pbp) > .runtime-sizer { margin-inline: auto; }

.hockey-pbp-window,
.hockey-pbp-window[style] {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 clamp(330px, 23vw, 410px);
  width: clamp(330px, 23vw, 410px);
  height: min(760px, 100%);
  max-height: 100%;
  align-self: flex-start;
  margin: 0;
}
.hockey-pbp-window.is-collapsed {
  flex-basis: 230px;
  width: 230px;
  height: auto;
}

/* Penalties never inherit the generic circular-dot appearance. */
.hockey-event-icon.is-penalty,
.hockey-pbp-window-list article.category-penalty > .hockey-event-icon,
.hme-event.category-penalty > .hockey-event-icon {
  width: 28px !important;
  height: 24px !important;
  color: #fff !important;
  border: 1px solid #ff7c8d !important;
  border-radius: 6px !important;
  background: linear-gradient(145deg, #f04b5f, #a7142d) !important;
  box-shadow: 0 0 0 2px rgba(255, 84, 106, .22), 0 5px 13px rgba(0,0,0,.4) !important;
}
.hockey-event-icon.is-penalty.is-compact { width: 26px !important; height: 23px !important; }
.hockey-event-icon.is-penalty::before,
.hockey-event-icon.is-penalty::after { display: none !important; content: none !important; }
.hockey-event-icon.is-penalty span { display:block; color:#fff; font:950 9px/1 "Roboto Mono",Consolas,monospace; }

/* High-contrast result colors on top of the photographic rink. */
.hsm-point.is-shot,
.hsm-point.is-target {
  opacity: 1 !important;
  background: #1bc8ff !important;
  border-color: #f2fdff !important;
  box-shadow: 0 0 0 3px rgba(12, 113, 170, .72), 0 0 12px rgba(27, 200, 255, .9), 0 3px 9px rgba(0,0,0,.72) !important;
}
.hsm-point.is-goal {
  width: 19px !important;
  height: 19px !important;
  opacity: 1 !important;
  color: #2b1b00 !important;
  background: #ffd43b !important;
  border: 2px solid #fff6bc !important;
  box-shadow: 0 0 0 4px rgba(140, 74, 0, .78), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
}
.hsm-point.is-goal span { color:#2b1b00 !important; font-size:11px !important; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.hsm-point.is-missed,
.hsm-point.is-blocked {
  opacity: 1 !important;
  background: rgba(9, 22, 34, .72) !important;
  border-color: #d7e1ea !important;
  box-shadow: 0 0 0 2px rgba(15,31,46,.85), 0 3px 8px rgba(0,0,0,.65) !important;
}
.hsm-legend .goal { color:#ffd43b !important; }
.hsm-legend .target { color:#1bc8ff !important; }

@media (max-width: 980px) {
  .runtime-viewport.has-hockey-pbp { gap: 8px; }
  .hockey-pbp-window,
  .hockey-pbp-window[style] {
    position: relative !important;
    inset: auto !important;
    flex-basis: 290px;
    width: 290px;
    height: min(760px, 100%);
    max-height: 100%;
  }
  .hockey-pbp-window.is-collapsed { flex-basis: 210px; width: 210px; }
}


/* Build 2026.07.17.6: real penalties stay separate; one tooltip per timer action. */
/* The body-level tooltip portal is the only tooltip implementation for timer buttons. */
.timer-editor-icon-btn::before,
.timer-editor-icon-btn::after {
  display: none !important;
  content: none !important;
}

/* Restore the dedicated penalty badge used before the generic-dot regression. */
.hockey-event-icon.is-penalty,
.hockey-pbp-window-list article.category-penalty > .hockey-event-icon,
.hme-event.category-penalty > .hockey-event-icon {
  width: 28px !important;
  height: 28px !important;
  color: #fff !important;
  border: 1px solid #ff7886 !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #d83b4b, #8d1727) !important;
  box-shadow: 0 0 0 2px rgba(255, 93, 110, .20), 0 4px 10px rgba(0, 0, 0, .35) !important;
}
.hockey-event-icon.is-penalty.is-compact {
  width: 25px !important;
  height: 25px !important;
}
.hockey-event-icon.is-penalty span {
  display: block !important;
  color: #fff !important;
  font: 950 9px/1 "Roboto Mono", Consolas, monospace !important;
  letter-spacing: -.05em !important;
}

/* Build 2026.07.17.8: settings are an exclusive workspace. */
body.hockey-admin-settings-open #hockeyStandalonePbp,
body:has(.hockey-directory-backdrop:not(.hidden)) #hockeyStandalonePbp {
  display: none !important;
}


/* Hockey schedule */
.hockey-schedule {
  --hsc-home: #4d9cff;
  --hsc-away: #ff5f79;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% -10%, rgba(77, 156, 255, .18), transparent 32%),
    radial-gradient(circle at 90% -10%, rgba(255, 95, 121, .15), transparent 32%),
    linear-gradient(180deg, #0b1727 0%, #07111e 100%);
}
.hsc-header {
  min-height: 112px;
  padding: 22px 26px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(112, 151, 190, .18);
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 60%);
}
.hsc-title { min-width: 0; display: grid; gap: 4px; text-align: left; }
.hsc-title > span { color: #55e0c1; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.hsc-title > strong { max-width: 760px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f8fc; font-size: 25px; line-height: 1.15; }
.hsc-title > small { color: #91a7bf; font-size: 13px; text-transform: capitalize; }
.hsc-summary { display: flex; gap: 8px; flex: 0 0 auto; }
.hsc-summary > div {
  min-width: 76px;
  padding: 10px 12px;
  display: grid;
  gap: 1px;
  text-align: center;
  border: 1px solid rgba(109, 145, 181, .22);
  border-radius: 12px;
  background: rgba(5, 14, 25, .54);
}
.hsc-summary b { color: #f4f8fc; font-size: 20px; line-height: 1; }
.hsc-summary span { color: #8299b2; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.hsc-summary .live { border-color: rgba(255, 78, 102, .55); background: rgba(122, 18, 38, .24); }
.hsc-summary .live b, .hsc-summary .live span { color: #ff7588; }
.hsc-grid {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  grid-auto-rows: minmax(235px, max-content);
  gap: 14px;
  overflow: auto;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: #304b68 transparent;
}
.hsc-card {
  position: relative;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #eef5fc;
  text-align: left;
  border: 1px solid rgba(96, 132, 168, .25);
  border-radius: 17px;
  background: linear-gradient(155deg, rgba(19, 34, 53, .96), rgba(8, 20, 34, .98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
  cursor: default;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hsc-card:hover { border-color: rgba(96, 132, 168, .34); }
.hsc-card.is-selected { border-color: #55e0c1; box-shadow: 0 0 0 1px rgba(85,224,193,.24), 0 18px 36px rgba(0,0,0,.26); }
.hsc-card.is-live { border-color: rgba(255, 79, 105, .55); }
.hsc-card.is-live::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #ff4f69; box-shadow: 0 0 12px rgba(255,79,105,.7); }
.hsc-card-top { min-height: 48px; padding: 12px 14px 10px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid rgba(96,132,168,.15); }
.hsc-card-top time { color: #f7fbff; font-size: 20px; font-weight: 900; letter-spacing: .02em; }
.hsc-card-top > small { margin-left: auto; color: #7189a3; font-size: 10px; font-weight: 800; }
.hsc-status { padding: 4px 7px; border-radius: 999px; color: #8fa7bf; background: rgba(110,142,175,.12); font-size: 9px; font-weight: 900; letter-spacing: .07em; }
.hsc-current { padding: 4px 7px; border-radius: 999px; color: #55e0c1; background: rgba(85,224,193,.10); border: 1px solid rgba(85,224,193,.22); font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.is-live .hsc-status { color: #fff; background: #e83959; box-shadow: 0 0 14px rgba(232,57,89,.3); }
.is-finished .hsc-status { color: #8fd9c8; background: rgba(66,180,154,.14); }
.hsc-matchup { position: relative; flex: 1; padding: 12px 14px; display: grid; gap: 6px; align-content: center; }
.hsc-team { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) 46px; gap: 10px; align-items: center; padding: 8px 9px; border-radius: 11px; background: rgba(255,255,255,.028); }
.hsc-team-home { border-left: 2px solid var(--hsc-home); }
.hsc-team-away { border-left: 2px solid var(--hsc-away); }
.hsc-monogram { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #eaf3fb; background: #17283b; border: 1px solid rgba(126,161,195,.19); font-size: 10px; font-weight: 900; }
.hsc-team-copy { min-width: 0; display: grid; gap: 1px; }
.hsc-team-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3f7fb; font-size: 14px; }
.hsc-team-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7189a2; font-size: 10px; }
.hsc-team > b { color: #fff; font-size: 26px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.hsc-versus { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%); padding: 1px 5px; border-radius: 5px; color: #5e748c; background: #0c1928; font-size: 8px; font-weight: 900; }
.hsc-periods { margin: -3px 14px 9px; display: flex; justify-content: center; gap: 5px; }
.hsc-periods span { min-width: 42px; padding: 4px 6px; display: flex; justify-content: center; gap: 5px; border-radius: 7px; color: #9aafc4; background: rgba(255,255,255,.035); font-size: 10px; }
.hsc-periods i { color: #60778f; font-style: normal; }
.hsc-periods b { color: #dce7f1; }
.hsc-card-footer { min-height: 49px; padding: 9px 13px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid rgba(96,132,168,.14); background: rgba(3,11,20,.28); }
.hsc-card-footer > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8399b0; font-size: 10px; }
.hsc-card-footer > small { color: #6f849a; font-size: 9px; }
.hsc-empty { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; text-align: center; }
.hsc-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #55e0c1; background: rgba(85,224,193,.09); font-size: 27px; }
.hsc-empty > strong { color: #edf5fc; font-size: 18px; }
.hsc-empty > small { max-width: 480px; color: #7f96ad; font-size: 12px; line-height: 1.5; }
@media (max-width: 980px) {
  .hsc-header { align-items: flex-start; padding: 17px; }
  .hsc-title > strong { font-size: 20px; }
  .hsc-summary > div { min-width: 58px; padding: 8px; }
  .hsc-grid { grid-template-columns: 1fr; padding: 12px; }
}


/* Build 2026.07.20.3: navigation-exclusive play-by-play and team schedules. */
body.hockey-navigation-open #hockeyStandalonePbp { display: none !important; }
body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 0 !important; }
body.hockey-navigation-open .runtime-viewport > .runtime-sizer { margin-inline: auto !important; }
.hsc-subnav {
  min-height: 58px;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(112,151,190,.15);
  background: rgba(4,12,22,.42);
}
.hsc-subnav > button {
  min-height: 36px;
  padding: 0 14px;
  color: #7f98b1;
  border: 1px solid rgba(105,142,179,.20);
  border-radius: 10px;
  background: rgba(16,31,48,.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
}
.hsc-subnav > button.active { color:#07131f; border-color:#55e0c1; background:#55e0c1; box-shadow:0 5px 16px rgba(85,224,193,.18); }
.hsc-filters { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hsc-filters label { display:grid; gap:2px; }
.hsc-filters label > span { color:#617a93; font-size:8px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hsc-filters select { min-width:138px; height:34px; padding:0 28px 0 10px; color:#dce8f3; border:1px solid rgba(104,143,181,.24); border-radius:9px; background:#102034; font-size:10px; font-weight:800; }
.hsc-content { flex:1; min-height:0; overflow:hidden; }
.hsc-content.is-day { display:flex; }
.hsc-content.is-day > .hsc-grid, .hsc-content.is-day > .hsc-empty { flex:1; }
.hsc-content.is-team-history { padding:14px 18px 18px; }
.hsc-history-grid { width:100%; height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.hsc-history-column { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(99,136,173,.22); border-radius:16px; background:rgba(7,17,29,.72); }
.hsc-history-column > header { min-height:62px; padding:11px 13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; border-bottom:1px solid rgba(99,136,173,.18); }
.hsc-history-column.side-home > header { box-shadow:inset 3px 0 0 var(--hsc-home); }
.hsc-history-column.side-away > header { box-shadow:inset 3px 0 0 var(--hsc-away); }
.hsc-history-column > header span { grid-column:1; color:#627d98; font-size:8px; font-weight:900; letter-spacing:.12em; }
.hsc-history-column > header strong { grid-column:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f1f7fc; font-size:16px; }
.hsc-history-column > header b { grid-column:2; grid-row:1 / 3; min-width:34px; padding:7px; color:#cce0f1; text-align:center; border-radius:10px; background:rgba(94,132,170,.14); }
.hsc-history-list { flex:1; min-height:0; padding:9px; display:grid; gap:7px; align-content:start; overflow:auto; scrollbar-width:thin; scrollbar-color:#304b68 transparent; }
.hsc-history-card { position:relative; min-width:0; min-height:72px; padding:9px 10px; display:grid; grid-template-columns:118px minmax(0,1fr) 92px; gap:10px; align-items:center; border:1px solid rgba(96,132,168,.18); border-radius:12px; background:linear-gradient(145deg,rgba(19,34,52,.86),rgba(8,20,34,.92)); }
.hsc-history-card.is-head-to-head { border-color:rgba(255,201,82,.72); background:linear-gradient(145deg,rgba(69,52,20,.72),rgba(20,27,35,.94)); box-shadow:inset 0 0 0 1px rgba(255,201,82,.12),0 0 18px rgba(255,186,45,.07); }
.hsc-history-card.is-selected { box-shadow:inset 0 0 0 1px rgba(85,224,193,.6); }
.hsc-history-card > em { position:absolute; right:9px; top:5px; color:#ffd56a; font-size:7px; font-style:normal; font-weight:950; letter-spacing:.09em; }
.hsc-history-date { display:grid; gap:2px; }
.hsc-history-date time { color:#8ba2b8; font-size:9px; text-transform:capitalize; }
.hsc-history-date b { color:#f5f9fd; font-size:17px; font-variant-numeric:tabular-nums; }
.hsc-history-main { min-width:0; display:grid; gap:2px; }
.hsc-history-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#edf5fc; font-size:12px; }
.hsc-history-main small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#657f98; font-size:9px; }
.hsc-history-venue { width:max-content; padding:2px 5px; color:#7fa6ca; border-radius:5px; background:rgba(94,139,181,.12); font-size:7px; font-weight:900; letter-spacing:.07em; }
.hsc-history-result { display:grid; justify-items:end; gap:5px; }
.hsc-history-result > b { color:#fff; font-size:22px; font-variant-numeric:tabular-nums; }
.hsc-history-empty { padding:32px 15px; color:#6f879f; text-align:center; font-size:11px; }
@media (max-width:1100px) {
  .hsc-subnav { flex-wrap:wrap; }
  .hsc-filters { width:100%; margin-left:0; }
  .hsc-filters label { flex:1; }
  .hsc-filters select { width:100%; min-width:0; }
  .hsc-history-card { grid-template-columns:96px minmax(0,1fr) 76px; }
}

/* BUILD 2026.07.20.4 — regular-season shootout control */
.hockey-shootout-control {
  --home: #4d9cff;
  --away: #ff5f79;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  overflow: hidden;
  color: #eaf2fb;
  border: 1px solid #253b53;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(72,223,189,.08), transparent 32%),
    linear-gradient(180deg, #0b1726, #07111d);
}
.hso-empty { height: 100%; display: grid; place-content: center; gap: 8px; color: #71869e; text-align: center; }
.hso-empty strong { color: #dce7f3; font-size: 22px; }
.hso-empty span { font-size: 12px; }
.hso-empty.is-loading strong { color: #83ecd4; }
.hso-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px; border-bottom: 1px solid #22364c; background: rgba(8,18,30,.82); }
.hso-header>div:first-child { min-width: 0; display: grid; gap: 3px; }
.hso-header>div:first-child span,
.hso-roster>header span,
.hso-journal>header span { color: #6c8299; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.hso-header>div:first-child strong { overflow: hidden; font-size: 18px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.hso-score { display: flex; align-items: center; gap: 12px; }
.hso-score span { max-width: 160px; overflow: hidden; color: #8ca0b6; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.hso-score strong { min-width: 92px; padding: 7px 12px; color: #fff; border: 1px solid #334b65; border-radius: 11px; background: #0e1d2d; font-size: 23px; font-weight: 950; text-align: center; font-variant-numeric: tabular-nums; }
.hso-setup { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #1d3147; background: rgba(255,255,255,.018); }
.hso-series-size { display: flex; align-items: center; gap: 5px; }
.hso-series-size>span { margin-right: 4px; color: #8296ad; font-size: 9px; font-weight: 850; }
.hso-series-size button,
.hso-start,
.hso-next-series { height: 31px; padding: 0 12px; color: #aabbd0; border: 1px solid #314861; border-radius: 8px; background: #0d1b2b; font-size: 10px; font-weight: 900; cursor: pointer; }
.hso-series-size button { min-width: 34px; padding: 0; }
.hso-series-size button.active { color: #07150f; border-color: #48dfbd; background: #48dfbd; }
.hso-start { color: #dbe8f5; }
.hso-next-series { color: #ffe2a3; border-color: rgba(240,189,101,.55); background: rgba(240,189,101,.09); }
.hso-series-size button:disabled,
.hso-start:disabled,
.hso-next-series:disabled { opacity: .45; cursor: default; }
.hso-series-info { margin-left: auto; display: flex; align-items: baseline; gap: 6px; color: #7388a0; }
.hso-series-info strong { color: #dce8f4; font-size: 17px; }
.hso-series-info span { font-size: 9px; }
.hso-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 7px 18px; border-bottom: 1px solid #1d3147; }
.hso-progress>div { min-width: 0; display: flex; align-items: center; gap: 10px; }
.hso-progress>div.side-away { justify-content: flex-end; }
.hso-progress strong { max-width: 180px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hso-progress .side-home strong { color: var(--home); }
.hso-progress .side-away strong { color: var(--away); order: 2; }
.hso-progress>div>div { display: flex; gap: 5px; }
.hso-slot { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #31475f; border-radius: 50%; color: #5e748d; background: #0c1928; font-size: 10px; font-weight: 950; }
.hso-slot.is-goal { color: #07140f; border-color: #5bf0c9; background: #5bf0c9; box-shadow: 0 0 10px rgba(91,240,201,.25); }
.hso-slot.is-miss { color: #fff; border-color: #ff6d82; background: #c63752; }
.hso-grid { min-height: 0; display: grid; grid-template-columns: minmax(260px, .85fr) minmax(430px, 1.35fr) minmax(260px, .85fr); gap: 10px; padding: 10px; }
.hso-roster,
.hso-center { min-height: 0; overflow: hidden; border: 1px solid #233850; border-radius: 14px; background: rgba(8,17,29,.75); }
.hso-roster { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hso-roster>header { min-height: 49px; display: grid; align-content: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid #24384e; }
.hso-roster.side-home>header { box-shadow: inset 3px 0 0 var(--home); }
.hso-roster.side-away>header { text-align: right; box-shadow: inset -3px 0 0 var(--away); }
.hso-roster>header strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hso-player-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
.hso-player { width: 100%; min-height: 37px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-bottom: 4px; padding: 5px 7px; color: #dce7f2; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; }
.hso-player:hover:not(:disabled) { border-color: #36536f; background: rgba(255,255,255,.05); }
.hso-roster.side-home .hso-player.is-selected { border-color: var(--home); background: rgba(77,156,255,.13); }
.hso-roster.side-away .hso-player.is-selected { border-color: var(--away); background: rgba(255,95,121,.13); }
.hso-player:disabled { opacity: .48; cursor: default; }
.hso-player>span { color: #8398ae; font-size: 10px; font-weight: 950; }
.hso-player strong { overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.hso-player small { color: #647990; font-size: 8px; }
.hso-no-roster { padding: 20px; color: #687e96; font-size: 10px; text-align: center; }
.hso-center { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hso-selected { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 2px 10px; padding: 10px 13px; border-bottom: 1px solid #253950; background: rgba(72,223,189,.025); }
.hso-selected>span { color: #7389a1; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hso-selected>strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.hso-selected>div { grid-row: 1 / 3; grid-column: 2; display: flex; align-items: center; gap: 7px; }
.hso-selected button { height: 36px; padding: 0 13px; border-radius: 9px; font-size: 10px; font-weight: 950; cursor: pointer; }
.hso-selected button.is-goal { color: #06150f; border: 1px solid #56e5bf; background: #56e5bf; }
.hso-selected button.is-miss { color: #fff; border: 1px solid #ff6b80; background: #b62f4a; }
.hso-selected button:disabled { opacity: .38; cursor: default; }
.hso-journal { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.hso-journal>header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; border-bottom: 1px solid #22364b; }
.hso-journal>header strong { min-width: 25px; height: 22px; display: grid; place-items: center; color: #93a8be; border-radius: 7px; background: rgba(255,255,255,.055); font-size: 10px; }
.hso-journal-list { min-height: 0; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
.hso-journal-empty { padding: 30px 10px; color: #61778f; font-size: 10px; text-align: center; }
.hso-attempt { --side: #8096ae; min-height: 49px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 68px 24px; align-items: center; gap: 7px; margin-bottom: 5px; padding: 5px 6px 5px 8px; border: 1px solid #263c54; border-left: 3px solid var(--side); border-radius: 9px; background: rgba(255,255,255,.025); }
.hso-attempt.side-home { --side: var(--home); }
.hso-attempt.side-away { --side: var(--away); }
.hso-attempt-order { display: grid; gap: 1px; }
.hso-attempt-order b { color: var(--side); font-size: 13px; }
.hso-attempt-order span { color: #647a91; font-size: 6px; line-height: 1.15; }
.hso-attempt-player { min-width: 0; display: grid; gap: 2px; }
.hso-attempt-player strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hso-attempt-player span { overflow: hidden; color: #748aa1; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.hso-attempt-result { display: grid; grid-template-columns: 19px 1fr; align-items: center; gap: 4px; }
.hso-attempt-result b { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
.hso-attempt.is-goal .hso-attempt-result b { color: #06150f; background: #55e4bd; }
.hso-attempt.is-miss .hso-attempt-result b { color: #fff; background: #bf3650; }
.hso-attempt-result span { color: #859bb1; font-size: 7px; font-weight: 950; }
.hso-attempt-delete { width: 22px; height: 22px; padding: 0; color: #7d91a7; border: 0; border-radius: 6px; background: transparent; font-size: 14px; cursor: pointer; }
.hso-attempt-delete:hover { color: #fff; background: rgba(255,95,121,.22); }
@media (max-width: 1100px) {
  .hso-grid { grid-template-columns: 240px minmax(360px, 1fr) 240px; }
  .hso-score span { display: none; }
}

/* BUILD 2026.07.20.5 — team colours stay visible on the KHL shot map. */
.hsm-point.side-home.is-shot,
.hsm-point.side-home.is-target {
  background: #1bc8ff !important;
  border-color: #f2fdff !important;
  box-shadow: 0 0 0 3px rgba(12, 113, 170, .72), 0 0 12px rgba(27, 200, 255, .9), 0 3px 9px rgba(0,0,0,.72) !important;
}
.hsm-point.side-away.is-shot,
.hsm-point.side-away.is-target {
  background: #ff4f68 !important;
  border-color: #fff1f4 !important;
  box-shadow: 0 0 0 3px rgba(151, 18, 45, .76), 0 0 12px rgba(255, 79, 104, .94), 0 3px 9px rgba(0,0,0,.72) !important;
}
.hsm-point.side-home.is-missed,
.hsm-point.side-home.is-blocked { border-color: #67d8ff !important; }
.hsm-point.side-away.is-missed,
.hsm-point.side-away.is-blocked { border-color: #ff7186 !important; }
.hsm-point.side-home.is-goal {
  box-shadow: 0 0 0 4px rgba(27, 156, 218, .78), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
}
.hsm-point.side-away.is-goal {
  box-shadow: 0 0 0 4px rgba(196, 30, 57, .82), 0 0 18px rgba(255, 212, 59, 1), 0 4px 11px rgba(0,0,0,.72) !important;
}

/* BUILD 2026.07.20.7 — quick player search in the shootout rosters. */
.hso-roster {
  grid-template-rows: auto auto minmax(0, 1fr);
}
.hso-player-search {
  min-height: 39px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 4px;
  margin: 7px 7px 1px;
  padding: 0 7px;
  border: 1px solid #2a4058;
  border-radius: 9px;
  background: #0a1827;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hso-player-search:focus-within {
  border-color: #4a7598;
  box-shadow: 0 0 0 2px rgba(74, 117, 152, .16);
}
.hso-player-search.side-home:focus-within {
  border-color: var(--home);
  box-shadow: 0 0 0 2px rgba(77, 156, 255, .14);
}
.hso-player-search.side-away:focus-within {
  border-color: var(--away);
  box-shadow: 0 0 0 2px rgba(255, 95, 121, .14);
}
.hso-player-search>span {
  color: #617890;
  font-size: 17px;
  line-height: 1;
  text-align: center;
  transform: translateY(-1px);
}
.hso-player-search input {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0;
  color: #e3edf7;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}
.hso-player-search input::placeholder { color: #586f87; }
.hso-player-search input::-webkit-search-cancel-button { display: none; }
.hso-player-search button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #8398ae;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.045);
  font-size: 14px;
  cursor: pointer;
}
.hso-player-search button:hover { color: #fff; background: rgba(255,255,255,.1); }
.hso-player[hidden],
.hso-search-empty[hidden],
.hso-player-search button[hidden] { display: none !important; }
.hso-search-empty {
  padding: 22px 8px;
  color: #6f849b;
  font-size: 9px;
  font-weight: 750;
  text-align: center;
}

/* Build34: global shortcut/action-sequence builder */
.modal-card:has(.shortcut-sequence-editor),
.modal-card:has(.shortcut-reference) {
  width: min(1260px, 96vw);
  max-height: 92vh;
}
.shortcut-sequence-editor,
.shortcut-reference { display: grid; gap: 14px; }
.shortcut-sequence-intro,
.shortcut-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(72,223,189,.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(72,223,189,.07), rgba(76,109,255,.055));
}
.shortcut-sequence-intro p,
.shortcut-reference-head p { margin: 5px 0 0; color: #91a5be; font-size: 12px; }
.shortcut-sequence-toolbar {
  position: sticky;
  top: -18px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  background: #111b2b;
}
.shortcut-sequence-toolbar span { color: #7f93ae; font-size: 11px; }
.shortcut-sequence-list { display: grid; gap: 14px; }
.shortcut-sequence-card {
  overflow: hidden;
  border: 1px solid #30445d;
  border-radius: 14px;
  background: #0b1421;
}
.shortcut-sequence-card.has-conflict { border-color: rgba(245,196,81,.72); box-shadow: 0 0 0 3px rgba(245,196,81,.06); }
.shortcut-sequence-head {
  display: grid;
  grid-template-columns: auto minmax(220px,1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border-bottom: 1px solid #26394f;
  background: #142033;
}
.shortcut-sequence-name { font-weight: 850; }
.shortcut-sequence-description {
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  resize: vertical;
}
.shortcut-sequence-key-row {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) auto minmax(210px,.9fr) auto auto;
  gap: 9px;
  align-items: end;
  padding: 12px;
}
.shortcut-sequence-key-row > label:not(.check-inline) { display: grid; gap: 5px; color: #91a6c0; font-size: 10px; }
.shortcut-sequence-key-row [data-sequence-combo] { font: 800 15px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
.shortcut-sequence-warning {
  margin: 0 12px 10px;
  padding: 8px 10px;
  color: #ffe6a5;
  border: 1px solid rgba(245,196,81,.30);
  border-radius: 9px;
  background: rgba(245,196,81,.09);
  font-size: 11px;
}
.shortcut-sequence-summary {
  margin: 0 12px 12px;
  padding: 9px 11px;
  color: #9eb1c9;
  border: 1px solid #23364c;
  border-radius: 9px;
  background: #0f1928;
  font-size: 11px;
  line-height: 1.45;
}
.shortcut-sequence-summary strong { color: #dce8f7; }
.shortcut-sequence-steps { display: grid; gap: 9px; padding: 0 12px 12px; }
.shortcut-step-card {
  overflow: hidden;
  border: 1px solid #26394f;
  border-radius: 11px;
  background: #101a29;
}
.shortcut-step-head {
  display: grid;
  grid-template-columns: 30px auto minmax(230px,1fr) auto auto auto;
  gap: 7px;
  align-items: center;
  padding: 8px 9px;
  border-bottom: 1px solid #223348;
  background: #121f31;
}
.shortcut-step-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #07130f;
  border-radius: 8px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
.shortcut-step-enabled { display: inline-flex; align-items: center; gap: 6px; color: #aebed2; font-size: 10px; white-space: nowrap; }
.shortcut-step-common,
.shortcut-step-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  padding: 9px;
}
.shortcut-step-common { border-bottom: 1px solid #1f3044; }
.shortcut-step-common label,
.shortcut-step-grid label { display: grid; gap: 5px; color: #8fa4bf; font-size: 10px; }
.shortcut-step-grid.vmix-command-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.shortcut-step-body code,
.shortcut-sequence-summary code { color: #8debd7; }
.shortcut-step-note { margin: 0; padding: 0 10px 10px; color: #7187a3; font-size: 10px; line-height: 1.45; }
.shortcut-sync-toggles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 0 10px 10px; }
.shortcut-sync-toggles label { display: flex; align-items: center; gap: 7px; color: #aebed2; font-size: 10px; }
.shortcut-add-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 11px 12px;
  border-top: 1px solid #26394f;
  background: #111d2d;
}
.shortcut-add-steps > span { margin-right: 3px; color: #7f93ad; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.shortcut-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.shortcut-reference-card {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #2c4058;
  border-radius: 12px;
  background: linear-gradient(145deg,#111d2d,#0c1624);
}
.shortcut-reference-card kbd {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  color: #ecf6ff;
  border: 1px solid #58708e;
  border-bottom-width: 4px;
  border-radius: 9px;
  background: #17263b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font: 900 17px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.shortcut-reference-card strong { display: block; margin: 2px 0 5px; font-size: 14px; }
.shortcut-reference-card p { margin: 0 0 7px; color: #a6b7cb; font-size: 11px; line-height: 1.45; }
.shortcut-reference-card small { display: block; color: #6f849f; font-size: 9px; line-height: 1.4; }
.shortcut-reference-empty { padding: 28px; color: #8295ae; text-align: center; border: 1px dashed #30445d; border-radius: 12px; }

@media (max-width: 980px) {
  .shortcut-sequence-head { grid-template-columns: auto 1fr auto; }
  .shortcut-sequence-head [data-sequence-test] { grid-column: 2; }
  .shortcut-sequence-key-row { grid-template-columns: 1fr auto; }
  .shortcut-step-head { grid-template-columns: 30px 1fr auto auto auto; }
  .shortcut-step-head > select { grid-column: 1 / -1; }
  .shortcut-step-common,
  .shortcut-step-grid,
  .shortcut-step-grid.vmix-command-grid,
  .shortcut-sync-toggles,
  .shortcut-reference-grid { grid-template-columns: 1fr; }
}
.shortcut-reference-kind {
  display: inline-block;
  margin-bottom: 3px;
  color: #65d9c0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Build35: shortcut editor usability + live vMix pickers */
.modal-card.modal-shortcuts-full,
.modal-card:has(.shortcut-sequence-editor) {
  width: calc(100vw - 20px);
  max-width: none;
  min-width: min(980px, calc(100vw - 20px));
  height: calc(100vh - 20px);
  max-height: none;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-backdrop.is-locked { padding: 10px; }
.modal-backdrop.is-locked .modal-card { box-shadow: 0 28px 100px rgba(0,0,0,.64), 0 0 0 1px rgba(72,223,189,.08); }
.modal-lock-hint {
  margin-left: auto;
  color: #6f849f;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.modal-shortcuts-full .modal-head {
  position: sticky;
  top: -14px;
  z-index: 30;
  margin: -14px -14px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #2a3d55;
  background: rgba(17,27,43,.97);
  backdrop-filter: blur(12px);
}
.shortcut-sequence-editor { min-width: 0; }
.shortcut-sequence-toolbar {
  top: 45px;
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(420px,1fr) minmax(220px,.55fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 0 -2px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(49,69,94,.7);
  background: rgba(17,27,43,.97);
  backdrop-filter: blur(12px);
}
.shortcut-toolbar-main,
.shortcut-toolbar-actions,
.shortcut-vmix-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.shortcut-toolbar-actions { justify-content: flex-end; }
.shortcut-vmix-status {
  justify-content: flex-end;
  min-width: 210px;
  color: #8ca2bc;
  font-size: 10px;
}
.shortcut-vmix-status [data-vmix-inventory-status] {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-search {
  display: grid;
  gap: 4px;
  color: #7f93ae;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.shortcut-search input { min-width: 0; }
.shortcut-sequence-list { gap: 9px; }
.shortcut-sequence-card.is-collapsed {
  overflow: visible;
  background: #0d1725;
}
.shortcut-sequence-compact {
  display: grid;
  grid-template-columns: auto 96px minmax(220px,1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 9px 11px;
}
.shortcut-sequence-compact kbd {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  color: #edf7ff;
  border: 1px solid #526b88;
  border-bottom-width: 3px;
  border-radius: 8px;
  background: #17263a;
  font: 900 14px ui-monospace, SFMono-Regular, Consolas, monospace;
}
.shortcut-sequence-compact-copy { min-width: 0; }
.shortcut-sequence-compact-copy strong,
.shortcut-sequence-compact-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-sequence-compact-copy strong { color: #dfeaf8; font-size: 13px; }
.shortcut-sequence-compact-copy small { margin-top: 4px; color: #7187a2; font-size: 10px; }
.shortcut-sequence-step-count {
  color: #6f849d;
  font-size: 9px;
  white-space: nowrap;
}
.compact-toggle { padding: 8px; }
.shortcut-sequence-card.is-expanded {
  border-color: rgba(72,223,189,.48);
  box-shadow: 0 0 0 2px rgba(72,223,189,.045);
}
.shortcut-sequence-head {
  grid-template-columns: auto minmax(260px,1fr) auto auto auto;
}
.shortcut-add-steps .mini-btn {
  width: auto;
  min-width: 82px;
  min-height: 32px;
  padding: 0 11px;
  white-space: nowrap;
}
.shortcut-add-steps > span { min-width: 92px; }
.shortcut-step-head > select { min-width: 230px; }
.shortcut-step-grid.vmix-command-grid {
  grid-template-columns: repeat(3,minmax(220px,1fr));
  align-items: start;
}
.shortcut-vmix-custom { margin-top: 6px; }
.shortcut-vmix-inventory-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 8px;
  color: #78d9c4;
  font-size: 10px;
}
.shortcut-vmix-inventory-note small { color: #7187a3; }
.shortcut-step-card .css-select-shell,
.shortcut-step-card .css-select-trigger { width: 100%; min-width: 0; }
.shortcut-step-card .css-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1250px) {
  .shortcut-sequence-toolbar { grid-template-columns: 1fr 1fr; top: 45px; }
  .shortcut-vmix-status { justify-content: flex-start; }
  .shortcut-toolbar-actions { justify-content: flex-end; }
  .shortcut-step-grid.vmix-command-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
}
@media (max-width: 980px) {
  .modal-card.modal-shortcuts-full,
  .modal-card:has(.shortcut-sequence-editor) { min-width: 0; width: calc(100vw - 8px); height: calc(100vh - 8px); }
  .shortcut-sequence-toolbar { grid-template-columns: 1fr; }
  .shortcut-sequence-compact { grid-template-columns: auto 78px minmax(0,1fr) auto; }
  .shortcut-sequence-compact .shortcut-sequence-step-count { display: none; }
  .shortcut-sequence-compact [data-sequence-test] { display: none; }
  .shortcut-step-grid.vmix-command-grid { grid-template-columns: 1fr; }
}

/* Build38: exact timer text targets + finish actions */
.shortcut-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 9px 0;
  padding: 9px 10px;
  color: #c9d7e8;
  border: 1px solid #263a52;
  border-radius: 9px;
  background: #101c2b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}
.shortcut-section-title-with-action { justify-content: space-between; }
.shortcut-section-title-with-action .mini-btn { width: auto; min-width: 130px; padding: 0 10px; }
.shortcut-penalty-target-list,
.shortcut-finish-action-list {
  display: grid;
  gap: 7px;
  margin: 7px 9px 10px;
}
.shortcut-penalty-target,
.shortcut-finish-action {
  display: grid;
  gap: 8px;
  align-items: end;
  align-self: start;
  height: max-content;
  padding: 9px;
  border: 1px solid #263a52;
  border-radius: 10px;
  background: #0d1826;
}
.shortcut-penalty-target { grid-template-columns: 74px minmax(220px,.8fr) minmax(260px,1fr) 34px; }
.shortcut-finish-action { grid-template-columns: 34px 90px minmax(210px,1fr) minmax(220px,1fr) 120px 130px 34px; }
.shortcut-penalty-target label,
.shortcut-finish-action label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #8fa4bf;
  font-size: 10px;
}
.shortcut-target-index {
  align-self: center;
  color: #72dec7;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.shortcut-inline-check {
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  padding-bottom: 8px;
  white-space: nowrap;
}
.shortcut-empty-targets {
  padding: 12px;
  color: #70869f;
  border: 1px dashed #30445d;
  border-radius: 9px;
  text-align: center;
  font-size: 10px;
}
@media (max-width: 1350px) {
  .shortcut-finish-action { grid-template-columns: 34px 90px repeat(2,minmax(220px,1fr)) 120px 130px 34px; }
}
@media (max-width: 1050px) {
  .shortcut-penalty-target { grid-template-columns: 64px 1fr 1fr 34px; }
  .shortcut-finish-action { grid-template-columns: 34px 90px 1fr 1fr; }
  .shortcut-finish-action > :nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 760px) {
  .shortcut-penalty-target,
  .shortcut-finish-action { grid-template-columns: 1fr; align-items: stretch; }
  .shortcut-target-index { align-self: start; }
  .shortcut-inline-check { padding-bottom: 0; }
}

/* Build43: strength/penalty runtime states + prematch buttons */
.hpd-team-name-block { min-width: 0; display: grid; gap: 5px; }
.hpd-team-state-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.hpd-team-state-btn {
  position: relative;
  width: auto !important;
  min-width: 132px;
  min-height: 38px;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr) 8px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  overflow: visible;
  border: 1px solid #324a65;
  border-radius: 10px;
  color: #a8bacd;
  background: linear-gradient(145deg,#0f1d2d,#0a1522);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;
}
.hpd-team-state-btn:hover {
  border-color: color-mix(in srgb,var(--team-column-color) 70%,#3b526c);
  color: #edf6ff;
  transform: translateY(-1px);
}
.hpd-team-state-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #304861;
  border-radius: 8px;
  color: #89a2ba;
  background: #122337;
}
.hpd-team-state-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hpd-team-state-icon svg .accent { stroke: #f5c451; }
.hpd-team-state-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}
.hpd-team-state-copy b {
  overflow: hidden;
  color: #dce7f4;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-team-state-copy small {
  color: #687f97;
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hpd-team-state-led {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #38506a;
  box-shadow: 0 0 0 2px rgba(56,80,106,.16);
}
.hpd-team-state-btn.is-active {
  border-color: color-mix(in srgb,var(--team-column-color) 82%,#dffaff);
  background: linear-gradient(145deg,color-mix(in srgb,var(--team-column-color) 20%,#102034),#0b1927);
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--team-column-color) 24%,transparent),0 0 15px color-mix(in srgb,var(--team-column-color) 13%,transparent);
}
.hpd-team-state-btn.is-active .hpd-team-state-icon {
  color: #07130f;
  border-color: var(--team-column-color);
  background: var(--team-column-color);
}
.hpd-team-state-btn.is-active .hpd-team-state-icon svg .accent { stroke: currentColor; }
.hpd-team-state-btn.is-active .hpd-team-state-copy b { color: #f4fbff; }
.hpd-team-state-btn.is-active .hpd-team-state-copy small { color: color-mix(in srgb,var(--team-column-color) 72%,white); }
.hpd-team-state-btn.is-active .hpd-team-state-led {
  background: var(--team-column-color);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--team-column-color) 18%,transparent),0 0 10px var(--team-column-color);
}
.hpd-team-state-btn:disabled { opacity: .6; cursor: wait; transform: none; }

.hockey-prematch-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 540px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 0;
  overflow: hidden;
  padding: 24px;
  color: #eef4ff;
  background: radial-gradient(circle at 12% 0%,rgba(72,223,189,.10),transparent 30%),#07111d;
}
.hockey-prematch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid #29415c;
  border-radius: 16px;
  background: #0b1828;
}
.hockey-prematch-head > div { display: grid; gap: 4px; }
.hockey-prematch-head small { color: #6f879f; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.hockey-prematch-head strong { font-size: 22px; font-weight: 950; }
.hockey-prematch-head span { color: #8ea4bc; font-size: 11px; }
.hockey-prematch-head .btn { width: auto; min-width: 170px; }
.hockey-prematch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
  gap: 12px;
}
.hockey-prematch-button {
  position: relative;
  min-height: 112px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "state title" "state desc" "state key";
  align-items: center;
  gap: 3px 11px;
  padding: 15px;
  text-align: left;
  border: 1px solid #2b425d;
  border-radius: 14px;
  color: #dce9f7;
  background: linear-gradient(145deg,#0f1c2c,#0a1522);
  cursor: pointer;
}
.hockey-prematch-button:hover { border-color: #4d718f; transform: translateY(-1px); }
.hockey-prematch-button.is-active { border-color: #48dfbd; box-shadow: inset 0 0 0 1px rgba(72,223,189,.28),0 0 18px rgba(72,223,189,.08); }
.hockey-prematch-button-state {
  grid-area: state;
  align-self: stretch;
  min-width: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #8fa4bd;
  background: #15273a;
  font-size: 10px;
  font-weight: 950;
}
.hockey-prematch-button.is-active .hockey-prematch-button-state { color: #06120f; background: #48dfbd; }
.hockey-prematch-button strong { grid-area: title; font-size: 14px; font-weight: 950; }
.hockey-prematch-button small { grid-area: desc; color: #7e94ac; font-size: 9px; line-height: 1.35; }
.hockey-prematch-button kbd { grid-area: key; justify-self: start; margin-top: 4px; padding: 3px 7px; border: 1px solid #334b65; border-radius: 6px; color: #a9bdd2; background: #101e2e; font-size: 9px; }
.hockey-prematch-empty { grid-column: 1/-1; min-height: 210px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed #304760; border-radius: 16px; color: #7188a1; text-align: center; }
.hockey-prematch-empty strong { color: #b8c8d9; font-size: 15px; }

.prematch-editor { display: grid; gap: 12px; min-width: min(1200px,calc(100vw - 70px)); }
.prematch-editor-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.prematch-editor-head p { max-width: 760px; margin: 0; color: #8fa4bc; font-size: 11px; line-height: 1.45; }
.prematch-editor-head .btn { width: auto; min-width: 120px; }
.prematch-editor-list { display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; max-height: calc(100vh - 300px); overflow: auto; }
.prematch-editor-row {
  display: grid;
  grid-template-columns: 32px 90px minmax(170px,.8fr) minmax(150px,.6fr) 170px minmax(230px,1fr) minmax(220px,1fr) 34px;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #293f57;
  border-radius: 10px;
  background: #0d1826;
}
.prematch-editor-row label { display: grid; gap: 5px; min-width: 0; color: #8fa4bf; font-size: 10px; }
.prematch-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.prematch-editor-actions .btn { width: auto; min-width: 145px; }

/* Build43 target editor has Overlay + automatic finish behaviour. */
.shortcut-penalty-target { grid-template-columns: 70px minmax(190px,.8fr) minmax(220px,1fr) 120px minmax(190px,.7fr) 34px; }
.shortcut-finish-action { grid-template-columns: 32px 84px minmax(180px,.9fr) minmax(200px,1fr) 105px 120px minmax(220px,.8fr) 34px; }
@media (max-width: 1250px) {
  .prematch-editor-row { grid-template-columns: 32px 90px repeat(3,minmax(170px,1fr)) 34px; }
  .prematch-editor-description { grid-column: 3 / span 3; }
  .shortcut-penalty-target,.shortcut-finish-action { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .shortcut-target-index,.shortcut-penalty-target .icon-btn,.shortcut-finish-action .icon-btn { align-self: center; }
}
@media (max-width: 720px) {
  .hockey-prematch-panel { padding: 12px; }
  .hockey-prematch-head { flex-direction: column; }
  .hockey-prematch-head .btn { width: 100%; }
  .hockey-prematch-grid { grid-template-columns: 1fr; }
  .prematch-editor { min-width: 0; }
  .prematch-editor-row,.shortcut-penalty-target,.shortcut-finish-action { grid-template-columns: 1fr; }
}

/* Build45: full-size prematch button editor */
.modal-card.modal-prematch-full,
.modal-card:has(.prematch-editor) {
  width: calc(100vw - 20px);
  max-width: none;
  min-width: min(1100px, calc(100vw - 20px));
  height: calc(100vh - 20px);
  max-height: none;
  padding: 14px;
  overflow: hidden;
}
.modal-prematch-full .modal-head,
.modal-card:has(.prematch-editor) .modal-head {
  position: sticky;
  top: -14px;
  z-index: 30;
  margin: -14px -14px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #2a3d55;
  background: rgba(17,27,43,.97);
  backdrop-filter: blur(12px);
}
.modal-prematch-full .prematch-editor,
.modal-card:has(.prematch-editor) .prematch-editor {
  min-width: 0;
  height: calc(100vh - 72px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.modal-prematch-full .prematch-editor-list,
.modal-card:has(.prematch-editor) .prematch-editor-list {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.modal-prematch-full .prematch-editor-actions,
.modal-card:has(.prematch-editor) .prematch-editor-actions {
  position: sticky;
  bottom: 0;
  z-index: 12;
  padding-top: 10px;
  border-top: 1px solid rgba(49,69,94,.7);
  background: rgba(17,27,43,.97);
  backdrop-filter: blur(12px);
}
@media (max-width: 980px) {
  .modal-card.modal-prematch-full,
  .modal-card:has(.prematch-editor) {
    min-width: 0;
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    padding: 10px;
  }
  .modal-prematch-full .prematch-editor,
  .modal-card:has(.prematch-editor) .prematch-editor {
    height: calc(100vh - 56px);
  }
}

/* BUILD48 — draggable grouped prematch buttons. */
.prematch-editor-head-actions { display:flex; gap:8px; align-items:center; }
.prematch-editor-head-actions .btn { width:auto; min-width:110px; }
.prematch-editor-list { display:grid; gap:12px; align-content:start; grid-auto-rows:max-content; }
.prematch-editor-group { border:1px solid #263d57; border-radius:12px; overflow:hidden; background:#0b1725; }
.prematch-editor-group-head { display:grid; grid-template-columns:34px minmax(220px,1fr) auto auto auto; gap:8px; align-items:center; padding:9px 10px; border-bottom:1px solid #263d57; background:#102033; }
.prematch-editor-group-head > strong { color:#dce8f5; }
.prematch-editor-group-head > small { color:#748aa2; }
.prematch-editor-group-head label { display:grid; gap:4px; color:#8298b0; font-size:10px; }
.prematch-editor-group-head input { min-height:34px; padding:0 9px; border:1px solid #304b67; border-radius:7px; background:#0c1928; color:#eef7ff; }
.prematch-group-mark { color:#61dfc4; font-weight:900; text-align:center; }
.prematch-editor-group-drop { display:grid; gap:8px; min-height:52px; padding:10px; transition:.15s ease; }
.prematch-editor-group-drop.is-over { background:rgba(72,223,189,.07); box-shadow:inset 0 0 0 2px rgba(72,223,189,.35); }
.prematch-group-empty { display:grid; place-items:center; min-height:44px; color:#60768d; border:1px dashed #2a425d; border-radius:8px; font-size:10px; }
.prematch-editor-row { grid-template-columns:28px 28px 92px minmax(150px,.8fr) minmax(120px,.65fr) minmax(135px,.7fr) minmax(145px,.75fr) minmax(220px,1.15fr) minmax(170px,.9fr) 34px; align-items:end; }
.prematch-editor-row.is-dragging { opacity:.45; }
.prematch-drag-handle { align-self:center; cursor:grab; color:#7890a8; font-size:16px; text-align:center; user-select:none; }
.prematch-drag-handle:active { cursor:grabbing; }
.prematch-editor-description { min-width:0; }
.hockey-prematch-groups {
  min-height: 0;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 8px 22px 2px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.hockey-prematch-groups::-webkit-scrollbar { width: 9px; }
.hockey-prematch-groups::-webkit-scrollbar-track { background: rgba(11,24,40,.72); border-radius: 999px; }
.hockey-prematch-groups::-webkit-scrollbar-thumb { background: #304b67; border: 2px solid #0b1828; border-radius: 999px; }
.hockey-prematch-groups::-webkit-scrollbar-thumb:hover { background: #456580; }

.hockey-prematch-group { display:grid; gap:8px; }
.hockey-prematch-group > h3 {
  position: sticky;
  top: -2px;
  z-index: 4;
  margin: 0;
  padding: 6px 4px;
  color: #8da4bc;
  border-bottom: 1px solid rgba(42,64,88,.48);
  background: rgba(7,17,29,.94);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hockey-prematch-group.is-ungrouped > h3 { display:none; }
@media (max-width:1200px) { .prematch-editor-row { grid-template-columns:28px 28px 92px repeat(3,minmax(150px,1fr)) 34px; } .prematch-editor-description { grid-column:4 / span 3; } }
@media (max-width:760px) { .prematch-editor-group-head { grid-template-columns:28px 1fr auto; } .prematch-editor-group-head .mini-btn { display:none; } .prematch-editor-row { grid-template-columns:1fr; } .prematch-drag-handle,.shortcut-target-index { display:none; } }

.shortcut-scoreboard-alternate { margin-top:10px; padding:10px; border:1px solid #29435e; border-radius:10px; background:rgba(9,20,33,.55); }
.shortcut-scoreboard-alternate .is-disabled { opacity:.55; }

/* BUILD51 — compact prematch buttons + per-button vMix delivery status. */
.hockey-prematch-grid {
  grid-template-columns: repeat(auto-fill,minmax(150px,220px));
  gap: 8px;
  align-items: stretch;
}
.hockey-prematch-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 38px 10px 12px;
  border-radius: 10px;
  line-height: 1.15;
}
.hockey-prematch-button strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.hockey-prematch-button-state,
.hockey-prematch-button > small,
.hockey-prematch-button > kbd { display: none !important; }
.hockey-prematch-button[data-prematch-busy="1"] { cursor: wait; opacity: .82; }
.hockey-prematch-runtime-status {
  position: absolute;
  right: 7px;
  bottom: 6px;
  min-width: 18px;
  min-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  border-radius: 999px;
  color: #8298af;
  background: rgba(9,20,32,.78);
  border: 1px solid transparent;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .01em;
  pointer-events: none;
  white-space: nowrap;
}
.hockey-prematch-runtime-status.is-idle:empty { display: none; }
.hockey-prematch-runtime-status.is-sending { color:#e6bc66; border-color:rgba(230,188,102,.38); }
.hockey-premmatch-runtime-status.is-ok,
.hockey-prematch-runtime-status.is-ok { color:#64e5c7; border-color:rgba(100,229,199,.30); }
.hockey-prematch-runtime-status.is-error { color:#ff7e91; border-color:rgba(255,126,145,.38); }
.hockey-prematch-button.is-active { background: linear-gradient(145deg,rgba(24,75,68,.72),#0a1821); }
@media (max-width:760px) {
  .hockey-prematch-grid { grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); }
}

/* BUILD53 — persistent bottom command dock. */
.runtime-button-dock {
  flex: 0 0 auto;
  min-height: 82px;
  display: grid;
  grid-template-rows: 31px minmax(45px, auto);
  overflow: hidden;
  border-top: 1px solid #243a52;
  background: rgba(7, 14, 23, .985);
  box-shadow: 0 -12px 34px rgba(0,0,0,.28);
  z-index: 45;
}
.runtime-button-dock.hidden { display: none !important; }
.quick-command-dock-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) 34px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 2px;
  border-bottom: 1px solid #1d3044;
}
.quick-command-tab-scroll {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.quick-command-tab-scroll::-webkit-scrollbar { height: 4px; }
.quick-command-tab-scroll::-webkit-scrollbar-thumb { background:#314a64; border-radius:999px; }
.quick-command-tab {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 10px;
  color: #8fa5be;
  border: 1px solid #283f58;
  border-radius: 7px;
  background: #0d1928;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.quick-command-tab.active { color:#07150f; border-color:#48dfbd; background:#48dfbd; }
.quick-command-settings {
  width: 30px;
  height: 25px;
  padding: 0;
  color:#a9bed3;
  border:1px solid #2c455f;
  border-radius:7px;
  background:#0d1a2a;
}
.quick-command-dock-buttons {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 10px 8px;
  scrollbar-width: thin;
}
.quick-command-dock-buttons::-webkit-scrollbar { height: 5px; }
.quick-command-dock-buttons::-webkit-scrollbar-thumb { background:#314a64; border-radius:999px; }
.quick-command-button {
  position: relative;
  flex: 0 0 auto;
  min-width: 104px;
  max-width: 220px;
  height: 34px;
  padding: 0 13px;
  overflow: hidden;
  color:#dce8f5;
  border:1px solid #30465e;
  border-radius:8px;
  background:linear-gradient(180deg,#132238,#0e1a2a);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .1s ease;
}
.quick-command-button:hover { border-color:#4d6b88; transform:translateY(-1px); }
.quick-command-button strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:900; }
.quick-command-button.is-sending { cursor:wait; opacity:.72; }
.quick-command-button.is-active { border-color:rgba(72,223,189,.48); background:linear-gradient(180deg,#17352f,#10231f); }
.quick-command-button.is-on-air {
  color:#07150f;
  border-color:#61efd0;
  background:linear-gradient(180deg,#62e9cc,#3fc9ac);
  box-shadow:0 0 0 1px rgba(97,239,208,.30), 0 0 18px rgba(72,223,189,.30);
}
.quick-command-button.is-on-air::after {
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#064c3e;
  box-shadow:0 0 0 2px rgba(255,255,255,.30);
}
.quick-command-no-tabs,.quick-command-empty { color:#657d96; font-size:9px; font-weight:800; white-space:nowrap; }
@media (max-width:760px) {
  .runtime-button-dock { min-height:76px; grid-template-rows:29px minmax(41px,auto); }
  .quick-command-button { min-width:92px; height:31px; padding-inline:10px; }
}


/* BUILD54 — fullscreen, locked settings workspaces + readable nested trigger paths. */
.modal-card.modal-settings-full {
  width: calc(100vw - 12px);
  max-width: none;
  min-width: 0;
  height: calc(100vh - 12px);
  max-height: none;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-card.modal-settings-full .modal-head {
  position: sticky;
  top: -14px;
  z-index: 50;
  margin: -14px -14px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #2a3d55;
  background: rgba(17,27,43,.985);
  backdrop-filter: blur(12px);
}
.modal-card.modal-settings-full .modal-head > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-card.modal-settings-full:has(.trigger-editor) {
  width: calc(100vw - 12px);
  height: calc(100vh - 12px);
  max-height: none;
}
.modal-settings-full .trigger-editor { min-width: 0; }
.modal-settings-full .trigger-toolbar {
  top: 42px;
  z-index: 35;
  padding: 10px 0;
  background: rgba(17,27,43,.985);
  backdrop-filter: blur(10px);
}
.modal-settings-full .trigger-flow {
  grid-template-columns: minmax(390px,1.18fr) minmax(300px,.82fr) minmax(390px,1.12fr);
}
.trigger-editor .css-select-trigger {
  min-height: 42px;
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}
.trigger-editor .css-select-value {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.32;
}
.css-select-popover-wide .css-select-options {
  max-height: min(650px, 72vh);
  padding: 8px;
}
.css-select-popover-wide .css-select-option {
  min-height: 42px;
  align-items: start;
  padding: 8px 10px;
}
.css-select-popover-wide .css-select-option-label {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.38;
}
.css-select-group-label {
  position: sticky;
  top: -1px;
  z-index: 2;
  margin: 6px 2px 4px;
  padding: 7px 9px;
  color: #67dbc4;
  border-top: 1px solid #2b425c;
  border-bottom: 1px solid #22364d;
  background: rgba(12,22,37,.97);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.css-select-group-label:first-child { margin-top: 0; border-top: 0; }
@media (max-width: 1180px) {
  .modal-settings-full .trigger-flow { grid-template-columns: 1fr; }
  .css-select-popover-wide { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}
@media (max-width: 760px) {
  .modal-card.modal-settings-full { width: calc(100vw - 4px); height: calc(100vh - 4px); padding: 10px; }
  .modal-card.modal-settings-full .modal-head { top: -10px; margin: -10px -10px 10px; padding: 10px; }
  .modal-lock-hint { display: none; }
}

/* BUILD 2026.08.19.13 — per-account events toggle */
.runtime-events-toggle {
  position: relative;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.runtime-events-toggle.is-on {
  color: #79e8c5;
  border-color: rgba(82, 216, 168, .45);
  background: rgba(28, 88, 70, .34);
}
.runtime-events-toggle.is-on::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #53d8a8;
  box-shadow: 0 0 6px rgba(83,216,168,.9);
}
.runtime-events-toggle.is-off {
  color: #72849a;
  border-color: #2b4055;
  background: #0c1825;
  opacity: .72;
}
.runtime-events-toggle.is-off::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #718196;
}
.trigger-account-events.is-on {
  color: #baf6e3;
  border-color: rgba(83,216,168,.45);
  background: rgba(27,92,72,.34);
}
.trigger-account-events.is-off {
  color: #91a0b2;
  border-color: #34475b;
  background: #101d2a;
}


/* BUILD56 — collapsible triggers + explicit save + stronger on-air button feedback. */
.trigger-card.is-collapsed { background:#0e1724; }
.trigger-card.is-collapsed .trigger-card-head { border-bottom:0; }
.trigger-card-head {
  grid-template-columns: 30px auto minmax(180px, .9fr) minmax(240px, 1.2fr) auto auto;
}
.trigger-collapse-btn {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #30465e;
  border-radius:8px;
  color:#b9cbe0;
  background:#0f1a29;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.trigger-collapse-btn:hover { border-color:#527092; color:#fff; }
.trigger-head-summary {
  min-width:0;
  color:#7894b1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.trigger-edit-btn { min-width:92px; }
.trigger-card-body.hidden { display:none !important; }
.trigger-toolbar [data-save-triggers] { border-color:#3d6278; }
.quick-command-button.is-on-air {
  outline:2px solid rgba(97,239,208,.42);
  outline-offset:1px;
}
.quick-command-button.is-on-air strong::before {
  content:"● ";
  color:#064c3e;
}
@media (max-width: 1200px) {
  .trigger-card-head { grid-template-columns:30px auto minmax(160px,1fr) auto auto; }
  .trigger-head-summary { display:none; }
}

/* BUILD57 — parameterised quick-panel controls + play-by-play under operator windows. */
.hockey-pbp-window,
#hockeyStandalonePbp {
  z-index: 8 !important;
}
/* Keep PBP mounted on Game while settings/navigation are open; those workspaces
   have higher stacking contexts and visually cover it instead of destroying it. */
body.hockey-admin-settings-open #hockeyStandalonePbp,
body:has(.hockey-directory-backdrop:not(.hidden)) #hockeyStandalonePbp,
body.hockey-navigation-open #hockeyStandalonePbp {
  display: grid !important;
}
body.hockey-navigation-open .runtime-viewport.has-hockey-pbp { gap: 14px !important; }

.quick-command-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.quick-command-item.is-selector-only { align-items: center; }
.quick-command-selector {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border: 1px solid #2b425c;
  border-radius: 8px;
  background: #0b1725;
}
.quick-command-selector > span {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #7188a1;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.quick-command-selector.is-segments > div {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.quick-command-selector.is-segments button {
  min-width: 25px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #314a64;
  border-radius: 6px;
  color: #a8bad0;
  background: #101f30;
  font-size: 9px;
  font-weight: 950;
}
.quick-command-selector.is-segments button:hover { border-color: #55728f; color:#eef7ff; }
.quick-command-selector.is-segments button.active {
  color: #07150f;
  border-color: #4be0bf;
  background: #4be0bf;
}
.quick-command-selector.is-select select {
  width: auto;
  min-width: 70px;
  height: 26px;
  padding: 0 24px 0 7px;
  border: 1px solid #314a64;
  border-radius: 6px;
  color: #d8e6f4;
  background: #101f30;
  font-size: 9px;
  font-weight: 900;
}
.quick-selector-editor-stack {
  display: grid;
  gap: 7px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px dashed #29425d;
}
.quick-selector-editor-title {
  color: #6f879f;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prematch-editor-selector-row {
  display: grid;
  grid-template-columns: 28px 28px 92px minmax(140px,.75fr) minmax(120px,.6fr) minmax(130px,.7fr) minmax(170px,.9fr) 145px minmax(260px,1.2fr) minmax(110px,.55fr) 34px;
  gap: 8px;
  align-items: end;
  padding: 9px;
  border: 1px solid #29445f;
  border-radius: 10px;
  background: #0b1b2a;
}
.prematch-editor-selector-row label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #8fa4bf;
  font-size: 10px;
}
.prematch-editor-selector-row label small { color:#5f7892; font-size:8px; }
.quick-selector-symbol { align-self:center; color:#5fe0c3; font-size:17px; font-weight:950; text-align:center; }
.quick-selector-options-field input { min-width: 240px; }
@media (max-width: 1350px) {
  .prematch-editor-selector-row { grid-template-columns: 28px 28px 92px repeat(3,minmax(145px,1fr)) 34px; }
  .quick-selector-options-field { grid-column: 4 / span 3; }
}
@media (max-width: 760px) {
  .prematch-editor-selector-row { grid-template-columns: 1fr; }
  .quick-selector-symbol { display:none; }
}

/* BUILD59 — account toast switch + denser adaptive runtime/F11 workspace. */
.runtime-events-toggle.is-on { color:#9ff2d8; }
.runtime-events-toggle.is-off { color:#73869b; }

/* The runtime should spend screen real estate on the actual control surface. */
.runtime-topbar {
  min-height: 62px;
  padding: 7px clamp(10px,1.2vw,20px) 0;
  column-gap: clamp(8px,1vw,16px);
}
.runtime-topbar > div:first-child #runtimeTitle { font-size: clamp(15px,1vw,18px); }
.runtime-tabs { gap: 6px; }
.runtime-tab {
  min-height: 37px;
  padding-inline: clamp(11px,.9vw,16px);
  font-size: clamp(11px,.72vw,13px);
  font-weight: 800;
}
.runtime-viewport {
  width: 100%;
  min-width: 0;
  padding: clamp(4px,.55vw,9px);
}
.runtime-sizer { max-width: 100%; }

/* Bigger, clearer controls while preserving the fixed logical canvas. */
.runtime-view button,
.runtime-view input,
.runtime-view select,
.runtime-view textarea { font-size: max(11px, 1em); }
.runtime-view .ui-label,
.runtime-view .field > label,
.runtime-view small { line-height: 1.35; }

/* Remove old decorative gutters from the major hockey pages. */
.runtime-view :is(
  .hockey-game-control,
  .hockey-penalty-dashboard,
  .hockey-player-statistics,
  .hockey-team-statistics,
  .hockey-tournament-statistics,
  .hockey-tournament-standings,
  .hockey-match-events,
  .hockey-referees,
  .hockey-schedule,
  .hockey-shootout-control
) {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* In F11 and tall desktop viewports the fixed 1440×760 canvas can now scale up.
   These sizes reduce empty chrome so the additional height is available to it. */
@media (min-width: 1500px) and (min-height: 850px) {
  .runtime-topbar { min-height: 58px; }
  .runtime-button-dock { min-height: 76px; grid-template-rows: 29px minmax(41px,auto); }
  .quick-command-dock-buttons { padding-block: 4px 6px; }
}
@media (min-width: 1900px) and (min-height: 1000px) {
  .runtime-topbar > div:first-child .eyebrow { font-size: 9px; }
  .runtime-topbar > div:first-child #runtimeTitle { font-size: 18px; }
  .runtime-tab { min-height: 39px; font-size: 13px; }
  .icon-btn { width: 38px; min-height: 38px; font-size: 18px; }
}
@media (max-width: 1050px) {
  .runtime-topbar { min-height: 58px; grid-template-columns:minmax(120px,.45fr) minmax(180px,1fr) max-content; padding-inline:8px; }
  .runtime-topbar > div:first-child .eyebrow { display:none; }
  .runtime-tab { min-height:34px; padding-inline:9px; font-size:10px; }
}


/* BUILD60 — active quick-panel editor tab, collapsible tabs, draggable selectors. */
.prematch-editor-group.is-editor-active {
  border-color: rgba(97,239,208,.62);
  box-shadow: 0 0 0 1px rgba(97,239,208,.16);
}
.prematch-editor-group-head {
  grid-template-columns: 28px 34px minmax(220px,1fr) auto auto auto;
  cursor: default;
}
.prematch-group-collapse {
  width: 28px; height: 28px; padding: 0; border: 1px solid #304b67; border-radius: 7px;
  background: #0c1928; color: #8ea7bf; font-weight: 950; cursor: pointer;
}
.prematch-group-collapse:hover { color:#dffcf5; border-color:#4b718f; }
.prematch-editor-group.is-collapsed .prematch-editor-group-drop { display:none; }
.prematch-editor-group.is-collapsed .prematch-editor-group-head { border-bottom:0; }
.prematch-editor-selector-row.is-dragging { opacity:.45; }
.prematch-editor-selector-row[draggable="true"] .quick-selector-symbol { cursor:grab; user-select:none; }
.prematch-editor-selector-row[draggable="true"] .quick-selector-symbol:active { cursor:grabbing; }
@media (max-width:760px) {
  .prematch-editor-group-head { grid-template-columns:28px 28px 1fr auto; }
}


/* BUILD63 — account logout action. */
.runtime-logout-btn {
  color: #9fb2c5;
  border-color: rgba(191, 210, 227, .18);
}
.runtime-logout-btn:hover,
.runtime-logout-btn:focus-visible {
  color: #ffd6d6;
  border-color: rgba(255, 112, 112, .42);
  background: rgba(126, 35, 47, .2);
}


/* BUILD71: side-specific penalty selection identifiers */
.hpd-team-penalty-card.is-preview-selected {
  outline: 2px solid rgba(255, 255, 255, .72);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.hpd-team-penalty-card.team-home.is-preview-selected {
  outline-color: color-mix(in srgb,var(--hpd-home) 82%,#fff);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hpd-home) 18%,transparent);
}
.hpd-team-penalty-card.team-away.is-preview-selected {
  outline-color: color-mix(in srgb,var(--hpd-away) 82%,#fff);
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--hpd-away) 18%,transparent);
}
.hpd-team-card-identifiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: rgba(0, 0, 0, .16);
  font-size: 10px;
  line-height: 1.25;
}
.hpd-team-card-identifiers span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hpd-team-card-identifiers b {
  display: block;
  margin-bottom: 1px;
  opacity: .58;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .035em;
}


/* BUILD80 — universal player-selection side panels + compact editor. */
.hockey-runtime-side-stack {
  flex: 0 0 clamp(330px, 23vw, 410px);
  width: clamp(330px, 23vw, 410px);
  max-height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  scrollbar-width: thin;
}
.hockey-runtime-side-stack > .hockey-pbp-window,
.hockey-runtime-side-stack > .hockey-pbp-window[style] {
  position: relative !important;
  inset: auto !important;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  height: min(560px, 70vh);
  max-height: 70vh;
  margin: 0;
}
.hockey-runtime-side-stack > .hockey-pbp-window.is-collapsed { width: 100% !important; height: auto; }
.hockey-player-select-panel {
  overflow: hidden;
  color: #edf5fc;
  border: 1px solid #36546e;
  border-radius: 13px;
  background: #071522;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.hockey-player-select-head {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px 8px 12px;
  border-bottom: 1px solid #243d54;
  background: linear-gradient(100deg, rgba(30,63,88,.8), rgba(8,22,35,.96));
}
.hockey-player-select-head > div:first-child { min-width:0; display:grid; gap:2px; }
.hockey-player-select-head span { color:#48dfbd; font-size:7px; font-weight:950; letter-spacing:.15em; }
.hockey-player-select-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:950; }
.hockey-player-select-head small { overflow:hidden; color:#6f8aa2; text-overflow:ellipsis; white-space:nowrap; font-size:7px; font-weight:800; }
.hockey-player-select-actions { display:flex; align-items:center; gap:5px; }
.hockey-player-select-actions b { min-width:31px; height:27px; display:grid; place-items:center; border:1px solid #38556d; border-radius:8px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-actions button { width:27px; height:27px; display:grid; place-items:center; padding:0; color:#b9cada; border:1px solid #38556d; border-radius:8px; background:#10283b; font-size:15px; font-weight:950; cursor:pointer; }
.hockey-player-select-actions button:hover { color:#07150f; border-color:transparent; background:#48dfbd; }
.hockey-player-select-panel.is-collapsed .hockey-player-select-body { display:none; }
.hockey-player-select-panel.is-collapsed .hockey-player-select-head { border-bottom:0; }
.hockey-player-select-body { display:grid; gap:6px; padding:7px; }
.hockey-player-select-rule { color:#6d859b; font-size:7px; font-weight:800; }
.hockey-player-select-rule code { color:#8db8d9; font:800 7px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slots { display:grid; gap:5px; }
.hockey-player-select-slot {
  min-height:45px;
  display:grid;
  grid-template-columns:27px minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  padding:6px 7px;
  border:1px dashed #38546d;
  border-radius:9px;
  background:#0a1a29;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hockey-player-select-slot.is-filled { border-style:solid; border-color:#2d5168; }
.hockey-player-select-slot.is-over { border-color:#48dfbd; background:#0e302a; box-shadow:0 0 0 2px rgba(72,223,189,.14) inset; }
.hockey-player-select-index { width:24px; height:24px; display:grid; place-items:center; color:#9fb3c4; border:1px solid #355169; border-radius:7px; background:#10283b; font:950 9px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slot > div { min-width:0; display:grid; gap:2px; }
.hockey-player-select-slot strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:950; }
.hockey-player-select-slot small { overflow:hidden; color:#6e879d; text-overflow:ellipsis; white-space:nowrap; font:750 7px "Roboto Mono",Consolas,monospace; }
.hockey-player-select-slot > i { color:#4c6980; font:900 7px "Roboto Mono",Consolas,monospace; font-style:normal; }
.hockey-player-select-slot > button { width:22px; height:22px; padding:0; color:#8ea2b4; border:1px solid #354b60; border-radius:7px; background:#102133; cursor:pointer; }
.hockey-player-select-slot > button:hover { color:#fff; border-color:#d45f6c; background:#772532; }
.hockey-player-select-clear { justify-self:end; padding:5px 8px; color:#8ca1b4; border:1px solid #30475c; border-radius:7px; background:#0d1e2d; font-size:7px; font-weight:900; cursor:pointer; }
.hockey-player-select-clear:hover { color:#fff; border-color:#516d85; }

.player-selection-editor { margin-top:14px; padding-top:14px; border-top:1px solid #263d53; }
.player-selection-editor > header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:8px; }
.player-selection-editor > header > div { display:grid; gap:3px; }
.player-selection-editor > header span { color:#48dfbd; font-size:8px; font-weight:950; letter-spacing:.12em; }
.player-selection-editor > header strong { font-size:13px; }
.player-selection-editor > header small { color:#738da4; font-size:8px; }
.player-selection-editor-list { display:grid; gap:6px; }
.player-selection-editor-row {
  display:grid;
  grid-template-columns:28px 82px minmax(135px,1fr) minmax(125px,.8fr) 65px minmax(145px,.9fr) 135px 135px minmax(160px,1fr) 62px 34px;
  gap:6px;
  align-items:end;
  padding:7px;
  border:1px solid #2b4359;
  border-radius:9px;
  background:#0b1a28;
}
.player-selection-editor-row label { min-width:0; display:grid; gap:3px; color:#7890a7; font-size:7px; font-weight:900; }
.player-selection-editor-row input,.player-selection-editor-row select { min-width:0; height:30px; }
.player-selection-editor-row .shortcut-inline-check { align-self:center; display:flex; align-items:center; gap:5px; }
.player-selection-editor-description { min-width:150px; }
.player-selection-editor-order { display:flex; gap:3px; }
@media (max-width: 1450px) {
  .player-selection-editor-row { grid-template-columns:28px 82px minmax(140px,1fr) minmax(120px,1fr) 65px minmax(140px,1fr) 130px 130px; }
  .player-selection-editor-description,.player-selection-editor-order,.player-selection-editor-row > .icon-btn { grid-column:auto; }
}
@media (max-width:980px) {
  .hockey-runtime-side-stack { flex-basis:290px; width:290px; }
  .player-selection-editor-row { grid-template-columns:1fr 1fr; }
}

/* Build82 — quick-panel settings tabs + reorderable player slots. */
.prematch-editor-tabs {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid #2a4058;
  border-radius:11px;
  background:#0b1725;
}
.prematch-editor-tab {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  color:#7890a8;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  font-size:10px;
  font-weight:950;
  cursor:pointer;
}
.prematch-editor-tab:hover { color:#c8d7e5; background:#102238; }
.prematch-editor-tab.active { color:#eaf5ff; border-color:#365a72; background:#14304a; box-shadow:inset 0 -2px 0 #48dfbd; }
.prematch-editor-tab span {
  min-width:20px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:9px;
  color:#a9c1d5;
  background:#203b53;
  font:900 8px "Roboto Mono",Consolas,monospace;
}
.prematch-editor-section { min-height:0; }
.player-selection-editor.prematch-editor-section {
  min-height:0;
  margin-top:0;
  padding-top:0;
  border-top:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
.player-selection-editor.prematch-editor-section .player-selection-editor-list {
  min-height:0;
  overflow:auto;
  padding-right:4px;
  overscroll-behavior:contain;
}

.hockey-player-select-slot { grid-template-columns:27px minmax(0,1fr) auto auto; }
.hockey-player-select-slot[draggable="true"] { cursor:grab; }
.hockey-player-select-slot[draggable="true"]:active { cursor:grabbing; }
.hockey-player-select-slot.is-dragging { opacity:.48; border-color:#48dfbd; }
.hockey-player-select-drag {
  width:16px;
  display:grid;
  place-items:center;
  color:#58748b;
  font-size:10px;
  font-weight:950;
  letter-spacing:-2px;
  user-select:none;
}
.hockey-player-select-slot:hover .hockey-player-select-drag { color:#9ab2c6; }

/* BUILD84 — compact, single-line player-block editor. */
.player-selection-editor.prematch-editor-section .player-selection-editor-list { gap:4px; }
.player-selection-editor-row {
  grid-template-columns:24px 66px minmax(150px,1fr) minmax(135px,.9fr) 52px minmax(135px,.9fr) 84px 82px minmax(150px,1fr) 56px 30px;
  gap:5px;
  align-items:center;
  min-height:48px;
  padding:4px 5px;
  border-radius:8px;
}
.player-selection-editor-row label { gap:2px; font-size:6.5px; line-height:1.05; }
.player-selection-editor-row input,
.player-selection-editor-row select { height:26px; padding-top:3px; padding-bottom:3px; font-size:9px; }
.player-selection-editor-row .shortcut-inline-check {
  align-self:center;
  justify-self:start;
  gap:4px;
  white-space:nowrap;
  font-size:7px;
}
.player-selection-editor-row .shortcut-inline-check input { width:16px; height:16px; padding:0; }
.player-selection-editor-description { min-width:120px; }
.player-selection-editor-order { align-items:center; }
.player-selection-editor-order .mini-btn,
.player-selection-editor-row > .icon-btn { width:26px; min-width:26px; height:26px; padding:0; }
@media (max-width:1450px) {
  .player-selection-editor-row {
    grid-template-columns:24px 64px minmax(130px,1fr) minmax(120px,.9fr) 50px minmax(120px,.9fr) 80px 78px minmax(130px,1fr) 54px 28px;
  }
}

/* BUILD84 — prepared vMix title workspace + player block handoff. */
.hockey-player-select-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  margin-top:7px;
}
.hockey-player-select-prepared {
  padding:5px 8px;
  color:#071a1d;
  border:1px solid #54e5c4;
  border-radius:7px;
  background:#48dfbd;
  font-size:7px;
  font-weight:950;
  cursor:pointer;
}
.hockey-player-select-prepared:hover { filter:brightness(1.08); }
.hockey-player-select-footer .hockey-player-select-clear { margin-left:auto; }

.hockey-prepared-workspace {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:9px;
  padding:14px;
  box-sizing:border-box;
  color:#dcecff;
  background:linear-gradient(180deg,#0a1522 0%,#09131f 100%);
  overflow:hidden;
}
.hockey-prepared-head,
.hockey-prepared-context,
.hockey-prepared-source,
.hockey-prepared-savebar,
.hockey-prepared-saved-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.hockey-prepared-head {
  min-height:52px;
  padding:0 12px;
  border:1px solid #263f56;
  border-radius:11px;
  background:#0c1b2a;
}
.hockey-prepared-head > div,
.hockey-prepared-context > div,
.hockey-prepared-source > div { min-width:0; display:grid; gap:2px; }
.hockey-prepared-head span,
.hockey-prepared-context span,
.hockey-prepared-source span,
.hockey-prepared-saved-head span {
  color:#56e3c1;
  font-size:7px;
  font-weight:950;
  letter-spacing:.08em;
}
.hockey-prepared-head strong { font-size:16px; line-height:1; }
.hockey-prepared-head small,
.hockey-prepared-context small,
.hockey-prepared-source small { color:#7891a8; font-size:8px; }
.hockey-prepared-head button,
.hockey-prepared-context button,
.hockey-prepared-source button,
.hockey-prepared-savebar button,
.hockey-prepared-saved article button {
  min-height:29px;
  padding:0 10px;
  border:1px solid #31516a;
  border-radius:7px;
  color:#cfe3f3;
  background:#10263a;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}
.hockey-prepared-head button:hover,
.hockey-prepared-source button:hover,
.hockey-prepared-saved article button:hover { border-color:#54dcbf; color:#fff; }
.hockey-prepared-head button:disabled,
.hockey-prepared-source button:disabled,
.hockey-prepared-savebar button:disabled { opacity:.5; cursor:default; }
.hockey-prepared-context {
  min-height:42px;
  padding:7px 10px;
  border:1px solid #31586a;
  border-radius:10px;
  background:#0d2431;
}
.hockey-prepared-context code { color:#86dfca; }
.hockey-prepared-context > button { width:29px; padding:0; color:#8ba3b8; }
.hockey-prepared-layout {
  min-height:0;
  display:grid;
  grid-template-columns:310px minmax(0,1fr) 310px;
  gap:9px;
}
.hockey-prepared-inputs,
.hockey-prepared-editor,
.hockey-prepared-saved {
  min-width:0;
  min-height:0;
  border:1px solid #263f56;
  border-radius:11px;
  background:#0b1927;
  overflow:hidden;
}
.hockey-prepared-inputs { display:grid; grid-template-rows:auto auto minmax(0,1fr); padding:9px; gap:7px; }
.hockey-prepared-search { display:grid; gap:4px; color:#7f98af; font-size:7px; font-weight:900; }
.hockey-prepared-search input,
.hockey-prepared-name input,
.hockey-prepared-field input[type="text"] {
  width:100%;
  min-width:0;
  height:30px;
  box-sizing:border-box;
  padding:0 9px;
  border:1px solid #2b465e;
  border-radius:7px;
  outline:0;
  color:#e5f2ff;
  background:#0c2133;
  font-size:9px;
  font-weight:700;
  font-family:inherit;
}
.hockey-prepared-search input:focus,
.hockey-prepared-name input:focus,
.hockey-prepared-field input[type="text"]:focus { border-color:#4ed9bd; box-shadow:0 0 0 1px rgba(78,217,189,.18); }
.hockey-prepared-input-list,
.hockey-prepared-saved-list { min-height:0; overflow:auto; display:grid; align-content:start; gap:4px; padding-right:2px; }
.hockey-prepared-input-list > button,
.hockey-prepared-recommended button {
  width:100%;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  min-height:37px;
  padding:5px 7px;
  text-align:left;
  border:1px solid #243d53;
  border-radius:7px;
  color:#a8bdd0;
  background:#0d2031;
  cursor:pointer;
}
.hockey-prepared-input-list > button:hover,
.hockey-prepared-input-list > button.active,
.hockey-prepared-recommended button:hover { border-color:#3e826f; background:#102b3c; }
.hockey-prepared-input-list > button.active { box-shadow:inset 3px 0 0 #4dddbc; }
.hockey-prepared-input-list b,
.hockey-prepared-recommended b { color:#61e0c2; font:900 8px "Roboto Mono",Consolas,monospace; }
.hockey-prepared-input-list span,
.hockey-prepared-recommended span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:900; color:#e0effb; }
.hockey-prepared-input-list small,
.hockey-prepared-recommended small { color:#6f879d; font-size:7px; white-space:nowrap; }
.hockey-prepared-recommended { display:grid; gap:4px; padding:6px; border:1px solid #2d554d; border-radius:8px; background:#0d2728; }
.hockey-prepared-recommended > span { color:#70bea9; font-size:7px; font-weight:900; }
.hockey-prepared-editor { display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:8px; padding:9px; }
.hockey-prepared-source { padding:7px 8px; border:1px solid #29475e; border-radius:8px; background:#0d2031; }
.hockey-prepared-source strong { font-size:10px; }
.hockey-prepared-name { display:grid; gap:4px; color:#8099ae; font-size:7px; font-weight:900; }
.hockey-prepared-fields { min-height:0; overflow:auto; display:grid; align-content:start; gap:4px; padding-right:3px; }
.hockey-prepared-field {
  min-height:42px;
  display:grid;
  grid-template-columns:minmax(160px,.8fr) minmax(220px,1.2fr);
  align-items:center;
  gap:10px;
  padding:5px 7px;
  border:1px solid #223b51;
  border-radius:7px;
  background:#0c1d2d;
}
.hockey-prepared-field > span { min-width:0; display:flex; align-items:baseline; gap:7px; }
.hockey-prepared-field > span b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:850 8px "Roboto Mono",Consolas,monospace; color:#cfe0ee; }
.hockey-prepared-field > span small { color:#52768e; font-size:6px; text-transform:uppercase; }
.hockey-prepared-field > div { min-width:0; display:flex; align-items:center; gap:5px; }
.hockey-prepared-field input[type="color"] { width:32px; min-width:32px; height:30px; padding:2px; border:1px solid #2b465e; border-radius:6px; background:#0c2133; }
.hockey-prepared-savebar { padding-top:7px; border-top:1px solid #21394d; }
.hockey-prepared-savebar small { max-width:520px; color:#70899f; font-size:7px; line-height:1.35; }
.hockey-prepared-savebar button { min-width:155px; color:#071a1d; border-color:#54e5c4; background:#48dfbd; }
.hockey-prepared-saved { display:grid; grid-template-rows:auto minmax(0,1fr); padding:9px; gap:7px; }
.hockey-prepared-saved-head { min-height:28px; padding:0 2px; }
.hockey-prepared-saved-head b { min-width:22px; height:18px; display:grid; place-items:center; border-radius:9px; color:#9ec1d8; background:#1b3850; font:900 8px "Roboto Mono",Consolas,monospace; }
.hockey-prepared-saved article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; padding:7px; border:1px solid #243e54; border-radius:8px; background:#0d2031; }
.hockey-prepared-saved article.editing { border-color:#4dddbc; box-shadow:inset 3px 0 0 #4dddbc; background:#102b34; }
.hockey-prepared-saved article > div:first-child { min-width:0; display:grid; gap:2px; }
.hockey-prepared-saved article span { color:#5c8ca6; font-size:6px; font-weight:950; text-transform:uppercase; }
.hockey-prepared-saved article strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:#e1eef8; }
.hockey-prepared-saved article small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#71899e; font-size:7px; }
.hockey-prepared-saved article > div:last-child { display:flex; gap:4px; }
.hockey-prepared-saved article button { min-height:25px; padding:0 7px; font-size:7px; }
.hockey-prepared-saved article button.danger { width:25px; min-width:25px; padding:0; color:#ff7d91; border-color:#593646; }
.hockey-prepared-empty,
.hockey-prepared-editor-empty { display:grid; place-items:center; align-content:center; gap:5px; min-height:90px; padding:16px; text-align:center; color:#637e94; font-size:8px; }
.hockey-prepared-editor-empty { height:100%; }
.hockey-prepared-editor-empty b { color:#b9cfdf; font-size:13px; }
@media (max-width:1100px) {
  .hockey-prepared-layout { grid-template-columns:250px minmax(0,1fr) 250px; }
  .hockey-prepared-field { grid-template-columns:1fr; gap:4px; }
}

/* BUILD119 — roster role counters + manual operational score. */
.hpd-roster-count-breakdown{
  flex:0 0 auto;
  min-width:0 !important;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 6px !important;
  white-space:nowrap;
}
.hpd-roster-count-breakdown b{
  min-width:20px;
  color:#dce8f6;
  font-size:10px;
  font-weight:950;
  text-align:center;
}
.hpd-roster-count-breakdown span{
  min-width:19px;
  padding-left:4px;
  border-left:1px solid #294059;
  color:#7f96b1;
  font-size:8px;
  font-weight:900;
  letter-spacing:0;
  text-align:center;
}

.quick-score-control{
  flex:0 0 auto;
  height:34px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:0 5px;
  color:#dce8f5;
  border:1px solid #30465e;
  border-radius:8px;
  background:linear-gradient(180deg,#132238,#0e1a2a);
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.quick-score-control.is-manual{
  border-color:#8d6c36;
  background:linear-gradient(180deg,#2d2619,#1d1a13);
}
.quick-score-team{
  max-width:68px;
  overflow:hidden;
  color:#8fa5be;
  font-size:8px;
  font-weight:900;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-score-team.side-away{text-align:right}
.quick-score-control button{
  width:25px;
  height:25px;
  padding:0;
  color:#cbd9e8;
  border:1px solid #314963;
  border-radius:6px;
  background:#0c1828;
  font-size:14px;
  font-weight:950;
  line-height:1;
}
.quick-score-control button:hover{color:#fff;border-color:#55718f;background:#14253a}
.quick-score-control strong{
  min-width:18px;
  color:#fff;
  font-family:"Roboto Mono","Cascadia Mono",Consolas,monospace;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  font-weight:950;
  text-align:center;
}
.quick-score-control i{color:#647d99;font-style:normal;font-size:13px;font-weight:950}
.quick-score-control .quick-score-sync{width:27px;color:#87a0bc;font-size:13px}
.quick-score-control small{
  min-width:29px;
  padding:3px 4px;
  color:#6fe0c5;
  border-radius:5px;
  background:rgba(72,223,189,.08);
  font-size:7px;
  font-weight:950;
  letter-spacing:.04em;
  text-align:center;
}
.quick-score-control.is-manual small{color:#e3bc72;background:rgba(227,188,114,.09)}
@media (max-width:920px){
  .quick-score-team{display:none}
  .quick-score-control{padding-inline:4px}
}

/* BUILD123 — roomier three-across hockey line/five sorter with persisted slot numbers. */
.hockey-lines-workspace{
  position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px;
  padding:8px;box-sizing:border-box;color:#dcecff;background:linear-gradient(180deg,#0a1522 0%,#09131f 100%);overflow:hidden;
}
.hockey-lines-intro{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 11px;
  border:1px solid #263f56;border-radius:10px;background:#0c1b2a;
}
.hockey-lines-intro>div{min-width:0;display:grid;gap:2px}.hockey-lines-intro strong{font-size:14px}.hockey-lines-intro span{color:#7f96ad;font-size:8px}.hockey-lines-intro small{color:#56e3c1;font-size:8px;font-weight:850;white-space:nowrap}
.hockey-lines-columns{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:hidden}
.hockey-lines-team{min-width:0;min-height:0;display:flex;flex-direction:column;gap:7px;padding:8px;border:1px solid #243a50;border-radius:11px;background:#0b1725;overflow-y:auto}
.hockey-lines-team.side-home{box-shadow:inset 3px 0 0 #4d9cff}.hockey-lines-team.side-away{box-shadow:inset -3px 0 0 #ff5f79}
.hockey-lines-team-header{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-8px;z-index:3;padding:6px 3px 7px;background:#0b1725}
.hockey-lines-team-header>div{min-width:0;display:grid;gap:2px}.hockey-lines-team-header span{color:#70879f;font-size:7px;font-weight:950;letter-spacing:.09em}.hockey-lines-team-header strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.hockey-lines-team-header em{padding:4px 8px;border:1px solid #2b475f;border-radius:999px;color:#80a0ba;background:#102235;font-size:7px;font-style:normal;font-weight:900}
.hockey-lines-actions{display:flex;gap:6px}.hockey-lines-actions button{min-height:28px;padding:0 10px;border:1px solid #31516a;border-radius:7px;color:#cfe3f3;background:#10263a;font-size:8px;font-weight:900;cursor:pointer}.hockey-lines-actions button:hover{border-color:#54dcbf;color:#fff}.hockey-lines-actions button:disabled{opacity:.45;cursor:default}
.hockey-line-card{display:grid;gap:5px;padding:7px;border:1px solid #22394f;border-radius:9px;background:#0e1d2c}.hockey-line-card.is-unassigned{border-style:dashed;background:#0a1622}
.hockey-line-card>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px}.hockey-line-card>header strong{font-size:9px}.hockey-line-card>header span{display:grid;place-items:center;min-width:22px;height:18px;padding:0 5px;border-radius:999px;color:#7e97af;background:#14283b;font-size:7px;font-weight:950}
.hockey-line-dropzone{min-height:42px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:3px;border:1px solid transparent;border-radius:8px;transition:border-color .12s,background .12s}
.hockey-line-dropzone>span{grid-column:1/-1;align-self:center;color:#4f6880;font-size:8px;text-align:center}.hockey-line-dropzone.is-over{border-color:#54dcbf;background:rgba(84,220,191,.06)}
.hockey-line-player{min-width:0;min-height:34px;display:grid;grid-template-columns:10px 30px minmax(0,1fr) auto 22px;gap:4px;align-items:center;padding:4px 5px;border:1px solid #29445c;border-radius:8px;background:#102235;cursor:grab;transition:transform .1s,border-color .1s,opacity .1s}.hockey-line-player:hover{border-color:#47708f;transform:translateY(-1px)}.hockey-line-player.is-dragging{opacity:.35}.hockey-line-player.is-drop-before{border-color:#54e5c4;box-shadow:inset 3px 0 0 #54e5c4}
.hockey-line-drag{color:#58738c;font-size:9px;letter-spacing:-2px;line-height:1}.hockey-line-player-number{display:grid;place-items:center;min-height:25px;border-radius:6px;color:#dcecff;background:#0a1724;font-size:8px}.hockey-line-player strong{min-width:0;overflow:hidden;font-size:8.5px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
.hockey-line-role{display:grid;place-items:center;min-width:22px;height:17px;padding:0 4px;border:1px solid transparent;border-radius:5px;font-size:6.5px;font-weight:950;line-height:1;white-space:nowrap}.hockey-line-role.is-goalkeeper{color:#ffe5a5;border-color:rgba(255,190,70,.38);background:rgba(255,190,70,.13)}.hockey-line-role.is-defender{color:#a9d4ff;border-color:rgba(82,162,255,.38);background:rgba(82,162,255,.13)}.hockey-line-role.is-forward{color:#aef2c7;border-color:rgba(67,211,123,.38);background:rgba(67,211,123,.13)}
.hockey-line-order{display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(84,229,196,.34);border-radius:999px;color:#07130f;background:#54e5c4;font-size:9px;font-weight:950;font-variant-numeric:tabular-nums}
.hockey-line-card.is-unassigned .hockey-line-player{grid-template-columns:10px 30px minmax(0,1fr) auto}
.hockey-lines-empty{position:absolute;inset:0;display:grid;place-content:center;gap:6px;color:#7890a8;text-align:center}.hockey-lines-empty strong{color:#d9e8f6;font-size:17px}.hockey-lines-empty span{font-size:9px}


/* BUILD125 — visible lower-panel selector parameters.
   Keep the option/value editor inside the card instead of clipping it past the right edge. */
.prematch-editor-selector-row {
  grid-template-columns: 28px 28px 92px minmax(160px,1fr) minmax(125px,.78fr) minmax(140px,.82fr) minmax(190px,1.05fr) 150px 34px;
  align-items: end;
}
.prematch-editor-selector-row .quick-selector-options-field {
  grid-column: 4 / 8;
  min-width: 0;
}
.prematch-editor-selector-row .quick-selector-options-field input {
  width: 100%;
  min-width: 0;
}
.prematch-editor-selector-row .quick-selector-default-field {
  grid-column: 8 / 9;
  min-width: 0;
}
@media (max-width: 1350px) {
  .prematch-editor-selector-row {
    grid-template-columns: 28px 28px 92px repeat(3,minmax(145px,1fr)) 34px;
  }
  .prematch-editor-selector-row .quick-selector-options-field { grid-column: 4 / 7; }
  .prematch-editor-selector-row .quick-selector-default-field { grid-column: 4 / 6; }
}
@media (max-width: 760px) {
  .prematch-editor-selector-row { grid-template-columns: 1fr; }
  .prematch-editor-selector-row .quick-selector-options-field,
  .prematch-editor-selector-row .quick-selector-default-field { grid-column: auto; }
}


/* BUILD126 — collapsed lower-panel editor, pinned footer, automatic match-period selector. */
.modal-card.modal-prematch-full,
.modal-card:has(.prematch-editor) {
  display: flex;
  flex-direction: column;
}
.modal-prematch-full .modal-head,
.modal-card:has(.prematch-editor) .modal-head {
  flex: 0 0 auto;
}
.modal-prematch-full .prematch-editor,
.modal-card:has(.prematch-editor) .prematch-editor {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.prematch-editor-section:not(.player-selection-editor) {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.prematch-editor-section:not(.player-selection-editor) > .prematch-editor-list {
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-prematch-full .prematch-editor-actions,
.modal-card:has(.prematch-editor) .prematch-editor-actions {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 0 0;
  box-shadow: 0 -10px 22px rgba(5, 12, 20, .18);
}
.quick-selector-auto-note input:disabled {
  color: #79a9d7;
  border-color: rgba(77, 156, 255, .28);
  background: rgba(77, 156, 255, .055);
  opacity: 1;
}
.quick-command-selector.is-match-periods {
  min-height: 38px;
  padding: 3px 6px;
  border-color: rgba(77, 156, 255, .34);
  background: rgba(77, 156, 255, .045);
}
.quick-command-selector.is-match-periods > span {
  color: #6f9bca;
}
.quick-command-selector.is-match-periods > div {
  gap: 3px;
}
.quick-command-selector.is-match-periods button {
  min-width: 31px;
  height: 29px;
  padding: 0 8px;
  border-color: #324f6d;
  border-radius: 7px;
  color: #c7d8e9;
  background: #0d1c2c;
  font-size: 9px;
}
.quick-command-selector.is-match-periods button:hover {
  border-color: #4d9cff;
  color: #fff;
}
.quick-command-selector.is-match-periods button.active {
  color: #eef7ff;
  border-color: #4d9cff;
  background: #245f9d;
  box-shadow: 0 0 0 1px rgba(77, 156, 255, .12), inset 0 -2px 0 rgba(117, 190, 255, .45);
}
