:root {
  --black: #050606;
  --panel: #101214;
  --panel-2: #171a1d;
  --line: rgba(255,255,255,.16);
  --text: #f8fafc;
  --muted: #b9c0ba;
  --accent: #d8f0b0;
  --gold: #f3c95b;
  --field: #166534;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--black);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}
button {
  min-height: 40px;
  border: 1px solid rgba(216,240,176,.28);
  border-radius: 6px;
  background: linear-gradient(#24282c, #101214);
  color: var(--text);
  padding: 7px 9px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
button:hover, button.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* 01 App Shell Layer */
.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 96px minmax(520px, 1fr) 204px;
  grid-template-rows: 96px minmax(0, 1fr);
  background: #111416;
}

/* 02 Top Left Logo Layer */
.top-left-logo {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  padding: 7px;
  background: #020303;
  border-right: 1px solid var(--line);
  border-bottom: 2px solid var(--gold);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}
.logo-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82px;
  object-fit: contain;
  filter: invert(1);
}

/* 03 Left Rail Layer */
.left-rail {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px 7px;
  background: #020303;
  border-right: 1px solid var(--line);
  z-index: 12;
}
.left-rail button {
  width: 100%;
  min-height: 44px;
  padding: 5px;
  text-align: center;
}
.left-rail button.coach-video-export-button,
.left-rail button.coach-custom-logo-button,
.left-rail button.coach-unlock-button {
  border-color: rgba(243,201,91,.68);
  background: linear-gradient(#302815, #171306);
  color: var(--gold);
}
.left-rail button.coach-video-export-button:hover,
.left-rail button.coach-video-export-button.active,
.left-rail button.coach-custom-logo-button:hover,
.left-rail button.coach-custom-logo-button.active,
.left-rail button.coach-unlock-button:hover,
.left-rail button.coach-unlock-button.active {
  border-color: var(--gold);
  color: #fff1b5;
}

/* 04 Floating Panel Host Layer */
.panel-host {
  position: fixed;
  left: 104px;
  top: 72px;
  width: 248px;
  max-height: calc(100vh - 92px);
  display: none;
  padding: 14px;
  overflow: auto;
  z-index: 50;
  background: linear-gradient(#121517, #090b0c);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
}
.panel-host.open { display: block; }
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.panel-title-row h1 {
  margin: 0;
  font-size: 20px;
}
.panel-close {
  min-height: 30px;
  padding: 4px 8px;
  border-color: rgba(255,255,255,.28);
  color: var(--muted);
  font-size: 12px;
}
.panel-actions {
  display: grid;
  gap: 9px;
}
.panel-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: #07090a;
}
.panel-segmented button {
  min-height: 34px;
  padding: 5px 7px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.panel-segmented button.active {
  border-color: var(--gold);
  background: #2a2414;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(243,201,91,.24);
}
.panel-actions button {
  width: 100%;
  text-align: left;
}
.panel-action-block {
  display: grid;
  gap: 8px;
}
.panel-info-block {
  display: grid;
  gap: 10px;
  padding: 3px 2px 7px;
}
.panel-info-title {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
}
.panel-text-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 3px 2px;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.panel-text-link:hover,
.panel-text-link:focus-visible {
  color: #fff;
}
.panel-notice {
  margin: 3px 2px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.profile-summary {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 2px 2px 5px 10px;
  border-left: 2px solid rgba(216,240,176,.42);
}
.profile-summary-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}
.profile-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.profile-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}
.profile-summary-row:last-child dd {
  color: var(--accent);
}
.panel-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* 05 Field Stage Layer */
.field-stage-layer {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) 58px;
  background: #1b1e21;
}
.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: #090b0c;
  border-bottom: 1px solid var(--line);
}
.board-title {
  color: var(--accent);
  font-weight: 950;
}
.board-status {
  display: flex;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}
.field-zone {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 14px;
  background: radial-gradient(circle at top left, rgba(216,240,176,.08), transparent 30%), #1c2023;
}
.field {
  position: relative;
  width: min(100%, 1130px);
  aspect-ratio: 111 / 74;
  overflow: hidden;
  border: 0;
  background: #16833d;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  outline: 1px solid rgba(0,0,0,.45);
  outline-offset: 0;
}
.field-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 9%, rgba(0,0,0,.04) 9% 18%);
}
.field-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  pointer-events: none;
}
.field-overlay-art {
  z-index: 2;
}
.pitch-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.pitch-goal {
  stroke-width: 1.75;
}
.pitch-net {
  fill: none;
  stroke: currentColor;
  stroke-width: .55;
  opacity: .5;
  vector-effect: non-scaling-stroke;
}
.pitch-fill {
  fill: currentColor;
  stroke: none;
}
.pitch-arc {
  stroke-linecap: round;
}
.channel-line {
  fill: none;
  stroke: #d8f0b0;
  stroke-width: 1.35;
  stroke-dasharray: 8 8;
  opacity: .82;
  vector-effect: non-scaling-stroke;
}
.thirds-line {
  fill: none;
  stroke: #d8f0b0;
  stroke-width: 1.35;
  stroke-dasharray: 8 8;
  opacity: .82;
  vector-effect: non-scaling-stroke;
}

/* 24 Field Watermark Layer */
.field-watermark-layer {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: clamp(42px, 9.2%, 104px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  opacity: .34;
  pointer-events: none;
  user-select: none;
}
.field-watermark-layer.custom {
  width: clamp(48px, 14%, 156px);
  opacity: .5;
}
.field-watermark-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border: 0;
  background: transparent;
}
.field[data-field-view="half-horizontal"] .field-watermark-layer {
  top: 10%;
  width: clamp(36px, 7%, 82px);
  opacity: .3;
}
.field[data-field-view="half-horizontal"] .field-watermark-layer.custom {
  width: clamp(42px, 10%, 110px);
  opacity: .5;
}
.bottom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  overflow-x: auto;
  background: #070809;
  border-top: 1px solid var(--line);
}
.bottom-tool-slot {
  min-width: 0;
}
.bottom-tool-slot:empty {
  display: none;
}
.bottom-frame-slot {
  flex: 1 1 auto;
}
.bottom-notes-slot {
  flex: 0 0 auto;
}
.bottom-object-slot {
  flex: 0 0 auto;
}
.object-command-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.object-delete-button {
  min-width: 66px;
  white-space: nowrap;
  border-color: #e89791;
  background: linear-gradient(#a92c2c, #641414);
}
.note-command-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.note-command-group button {
  min-width: 66px;
  white-space: nowrap;
}
.note-add-button {
  border-color: #78b9ef;
  background: linear-gradient(#176eb6, #0a477c);
}
.note-delete-button {
  border-color: #e89791;
  background: linear-gradient(#a92c2c, #641414);
}
.note-command-group button:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.frame-controls {
  width: 100%;
  min-width: 680px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.frame-command-group,
.frame-navigation {
  display: flex;
  align-items: center;
  gap: 6px;
}
.frame-command-group {
  flex: 0 0 auto;
}
.frame-navigation {
  min-width: 190px;
  flex: 1 1 auto;
}
.frame-controls button {
  flex: 0 0 auto;
  text-align: center;
  white-space: nowrap;
}
.frame-play-button {
  min-width: 58px;
  border-color: #81d29b;
  background: linear-gradient(#1f8b4c, #0c542b);
}
.frame-delete-button {
  border-color: #e89791;
  background: linear-gradient(#a92c2c, #641414);
}
.frame-clear-button {
  border-color: #e2b763;
  background: linear-gradient(#8b641c, #533807);
}
.frame-icon-button {
  width: 40px;
  min-width: 40px;
  padding-inline: 0;
  font-size: 17px;
}
.frame-tabs {
  min-width: 54px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.frame-tab {
  min-width: 42px;
  border-color: #78b9ef;
  background: linear-gradient(#176eb6, #0a477c);
}
.frame-tab.active {
  border-color: #e5f5ff;
  background: linear-gradient(#42a6eb, #1769a5);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.frame-duration {
  flex: 0 0 auto;
  min-width: 46px;
  color: var(--accent);
  text-align: center;
  font-weight: 950;
}
.frame-timing-popover {
  position: fixed;
  z-index: 50;
  min-width: 150px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(216,240,176,.55);
  border-radius: 6px;
  background: #090b0c;
  box-shadow: 0 10px 28px rgba(0,0,0,.58);
}
.frame-timing-popover[hidden] {
  display: none;
}
.frame-timing-label {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.frame-timing-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.frame-timing-buttons button {
  width: 36px;
  min-width: 36px;
  min-height: 34px;
  padding: 4px;
  font-size: 16px;
}
.frame-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* 10 Basic Notes Layer */
.note-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.note-box {
  position: absolute;
  min-width: 90px;
  max-width: 56%;
  min-height: 38px;
  padding: .45em .75em;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 8px;
  background: rgba(0,0,0,.74);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 2px #000;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: move;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}
.note-box.selected {
  outline: 3px solid #ffd36b;
  outline-offset: 1px;
  box-shadow: 0 0 10px rgba(255,211,107,.8);
}
.note-box.editing,
.note-box[contenteditable="true"] {
  cursor: text;
  user-select: text;
  touch-action: auto;
  outline: 3px solid #ffe664;
  box-shadow: 0 0 12px rgba(255,230,100,.62);
}
.note-size-panel {
  position: absolute;
  z-index: 35;
  display: flex;
  gap: 5px;
  transform: translate(-50%, -100%);
  pointer-events: auto;
}
.note-size-panel[hidden] {
  display: none;
}
.note-size-panel button {
  width: 40px;
  min-width: 40px;
  min-height: 30px;
  padding: 4px;
  border-color: rgba(255,255,255,.72);
  background: rgba(15,23,42,.96);
  font-size: 13px;
}
.note-size-panel button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* 11 Right Tray Host Layer */
.right-tray-layer {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  background: #070809;
  border-left: 1px solid var(--line);
}
.right-tray-header {
  display: none;
}
.right-tray-scroll {
  min-height: 0;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.right-tray-slot:empty {
  display: none;
}

/* 12 Player Object Layer */
.player-object-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.field-player,
.player-token,
.player-drag-ghost {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, #4b91ff 0 18%, #126bff 54%, #0648bd 100%);
  color: #fff;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.field-player {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}
.field-player:active {
  cursor: grabbing;
}
.field-player.player-label-position,
.player-token.player-label-position,
.player-drag-ghost.player-label-position {
  font-size: 9px;
}
.field-player.player-label-wide,
.player-token.player-label-wide,
.player-drag-ghost.player-label-wide {
  font-size: 8px;
}
.field-player.player-goalkeeper,
.player-token.player-goalkeeper,
.player-drag-ghost.player-goalkeeper {
  background: radial-gradient(circle at 32% 24%, #4b4b4b 0 18%, #111 58%, #000 100%);
}
.field-player.selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 11px rgba(243,201,91,.92);
}

/* 13 Blue Player Tray Layer */
.player-tray-section {
  padding: 7px 4px 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 7px;
  background: linear-gradient(#171a1d, #0d0f11);
}
.player-tray-title {
  display: none;
}
.player-tray-group + .player-tray-group {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.player-tray-label {
  display: none;
}
.player-token-grid {
  display: grid;
  grid-template-columns: repeat(6, 24px);
  gap: 4px;
  align-items: center;
}
.player-token {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  cursor: grab;
  touch-action: none;
}
.player-token:hover,
.player-token:focus-visible {
  color: #fff;
  transform: scale(1.1);
  filter: brightness(1.08);
}
.player-token:active {
  cursor: grabbing;
}
.field-player.player-team-orange,
.player-token.player-team-orange,
.player-drag-ghost.player-team-orange {
  border-color: #050505;
  background: radial-gradient(circle at 32% 24%, #ffad6a 0 18%, #ff7a1a 54%, #ca4e00 100%);
  color: #050505;
  text-shadow: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 2px 5px rgba(0,0,0,.5);
}
.field-player.player-team-orange.player-goalkeeper,
.player-token.player-team-orange.player-goalkeeper,
.player-drag-ghost.player-team-orange.player-goalkeeper {
  border-color: #050505;
  background: radial-gradient(circle at 32% 24%, #fff 0 18%, #d9dde1 58%, #aeb4ba 100%);
  color: #050505;
  text-shadow: none;
}
.field-player.player-team-official,
.player-token.player-team-official,
.player-drag-ghost.player-team-official {
  border-color: #ffe600;
  background: radial-gradient(circle at 32% 24%, #383838 0 18%, #111 58%, #000 100%);
  color: #ffe600;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.field-player.player-team-blue.player-coach,
.player-token.player-team-blue.player-coach,
.player-drag-ghost.player-team-blue.player-coach {
  border-color: #126bff;
  background: radial-gradient(circle at 32% 24%, #fff 0 18%, #eef4ff 58%, #c8d8f5 100%);
  color: #126bff;
  text-shadow: none;
}
.field-player.player-team-orange.player-coach,
.player-token.player-team-orange.player-coach,
.player-drag-ghost.player-team-orange.player-coach {
  border-color: #ff7a1a;
  background: radial-gradient(circle at 32% 24%, #3a3a3a 0 18%, #111 58%, #000 100%);
  color: #ff7a1a;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  box-shadow: 0 0 0 1px rgba(255,122,26,.35), 0 2px 5px rgba(0,0,0,.5);
}
.player-drag-ghost {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  opacity: .92;
  box-shadow: 0 0 12px rgba(255,255,255,.72);
}

/* 14 Orange Player Tray Layer */
.orange-player-tray-section {
  margin-top: 8px;
}

/* 15 Official Tray Layer */
.official-tray-section,
.yellow-ball-tray-section {
  margin-top: 8px;
}
.official-token-grid {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 18 Coach Token Layer */
.coach-token-row {
  display: flex;
  align-items: center;
}

/* 16 Ball Object Layer */
.ball-object-layer {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
}
.field-ball,
.ball-drag-ghost,
.ball-disc {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1.5px solid #111;
  border-radius: 50%;
  background: #ffe600;
  color: #d71920;
  font-family: Arial Black, Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(0,0,0,.55);
}
.field-ball {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}
.field-ball:active {
  cursor: grabbing;
}
.field-ball.selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 11px rgba(243,201,91,.92);
}
.ball-drag-ghost {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  opacity: .94;
}

/* 17 Yellow Ball Tray Layer */
.ball-token {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: rgba(255,230,0,.45);
  background: #0d0f11;
  cursor: grab;
  touch-action: none;
}
.ball-token .ball-disc {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
.ball-token:hover,
.ball-token:focus-visible {
  border-color: #ffe600;
  color: #d71920;
}
.ball-token:active {
  cursor: grabbing;
}

/* 19 Arrow Object Layer */
.arrow-object-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.arrow-line {
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.58));
  pointer-events: none;
}
.arrow-line-zigzag {
  stroke-width: 4.5;
}
.arrow-head {
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.58));
  pointer-events: all;
  cursor: move;
}
.arrow-hit {
  fill: none;
  stroke: rgba(0,0,0,.001);
  stroke-width: 20;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: move;
}
.field-arrow.selected .arrow-line,
.field-arrow.selected .arrow-head {
  filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(1px 2px 1px rgba(0,0,0,.58));
}
.arrow-handle {
  fill: var(--gold);
  stroke: #111;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: crosshair;
}
.arrow-control-panel {
  position: absolute;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  transform: translate(-50%, -100%);
  border: 1px solid rgba(216,240,176,.55);
  border-radius: 6px;
  background: #090b0c;
  box-shadow: 0 8px 24px rgba(0,0,0,.58);
  pointer-events: auto;
}
.arrow-control-panel.below {
  transform: translate(-50%, 0);
}
.arrow-control-panel[hidden] {
  display: none;
}
.arrow-control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.arrow-control-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.2);
}
.arrow-control-panel button {
  width: 32px;
  min-width: 32px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 3px;
  font-size: 17px;
}
.arrow-style-controls button {
  color: #fff;
}
.arrow-style-controls button.active {
  border-color: var(--gold);
  color: var(--gold);
  background: #2a2414;
  box-shadow: inset 0 0 0 1px rgba(243,201,91,.26);
}
.arrow-style-controls svg {
  width: 26px;
  height: 16px;
  overflow: visible;
}

/* 20 Arrow Tray Layer */
.arrow-tray-section {
  margin-top: 8px;
}
.arrow-tray-group + .arrow-tray-group {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.arrow-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 4px;
}
.arrow-template-button {
  width: 52px;
  min-width: 52px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 2px;
  border-color: rgba(255,255,255,.28);
  background: #4a514c;
  cursor: grab;
  touch-action: none;
}
.arrow-template-button svg,
.arrow-drag-ghost svg {
  display: block;
  width: 52px;
  height: 30px;
  overflow: visible;
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,.62));
}
.arrow-template-button svg {
  width: 46px;
  height: 26px;
}
.arrow-template-button:hover,
.arrow-template-button:focus-visible {
  border-color: var(--accent);
  background: #5c665f;
}
.arrow-template-button:active {
  cursor: grabbing;
}
.arrow-drag-ghost {
  position: fixed;
  z-index: 100;
  width: 58px;
  height: 38px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(1.08);
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: #4a514c;
  pointer-events: none;
  opacity: .94;
}
/* 08 Basic New Project Layer */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
}
.app-dialog-backdrop[hidden] {
  display: none;
}
.app-dialog {
  width: min(420px, 100%);
  padding: 18px;
  border: 1px solid rgba(216,240,176,.5);
  border-radius: 8px;
  background: #0c0e10;
  box-shadow: 0 20px 56px rgba(0,0,0,.65);
}
.app-dialog h1 {
  margin: 0 0 8px;
  font-size: 21px;
}
.app-dialog p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.4;
}
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.danger-action {
  border-color: #e57a72;
  color: #ffd5d0;
}
.clear-data-status {
  margin-top: -8px !important;
  color: var(--accent) !important;
  font-weight: 800;
}
.clear-data-status[hidden] {
  display: none;
}
.project-toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  z-index: 80;
  transform: translateX(-50%);
  padding: 9px 13px;
  border: 1px solid rgba(216,240,176,.45);
  border-radius: 6px;
  background: #080a0b;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.project-toast[hidden] {
  display: none;
}

.coach-project-file-dialog {
  width: min(520px, calc(100vw - 28px));
}

.coach-project-file-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.coach-project-file-summary {
  display: grid;
  gap: 1px;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.16);
}

.coach-project-file-summary > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 12px;
  background: #171a1d;
}

.coach-project-file-summary dt {
  color: #aeb8c1;
  font-weight: 800;
}

.coach-project-file-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-weight: 800;
}

.coach-project-file-warning {
  padding: 11px 12px;
  border-left: 3px solid #f3c95b;
  background: rgba(243,201,91,.1);
  color: #f7edcf !important;
}

/* 28 Storage Health Layer */
.storage-health-dialog {
  width: min(500px, 100%);
}
.storage-health-dialog .storage-health-summary {
  margin-bottom: 10px;
  color: #fff;
  font-weight: 800;
}
.storage-health-dialog .storage-health-detail {
  margin-bottom: 18px;
  padding-left: 12px;
  border-left: 3px solid #f0b43c;
  color: #d8d8d8;
}

/* 30 Legal Notices Layer */
.legal-notice-dialog {
  width: min(760px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
}
.legal-notice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.legal-notice-header p {
  margin: 4px 0 0;
}
.legal-effective-date {
  color: var(--accent) !important;
  font-size: 12px;
  font-weight: 800;
}
.legal-notice-content section + section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.legal-notice-content h2 {
  margin: 0 0 7px;
  font-size: 16px;
}
.legal-notice-content p {
  margin: 0;
  color: #d8d8d8;
}
.legal-notice-content p + p {
  margin-top: 8px;
}
.legal-notice-content ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: #d8d8d8;
}
.legal-notice-content li + li {
  margin-top: 7px;
}
.legal-notice-content li::marker {
  color: var(--gold);
}
.legal-notice-actions {
  position: sticky;
  bottom: -18px;
  margin: 20px -18px -18px;
  padding: 12px 18px 18px;
  border-top: 1px solid var(--line);
  background: linear-gradient(rgba(12,14,16,.94), #0c0e10 35%);
}

/* 35 License Info Layer */
.license-info-dialog {
  width: min(900px, 100%);
}
.license-info-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.license-info-header h1,
.license-location-section h2 {
  margin: 0;
}
.license-info-header p {
  margin: 4px 0 0;
}
.license-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}
.license-status-grid section {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: #15191b;
}
.license-status-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.license-status-grid strong {
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 15px;
}
.license-status-grid strong[data-active="true"] {
  color: var(--gold);
}
.license-feature-boundary {
  margin-bottom: 18px;
}
.license-info-dialog .edition-feature-boundary-heading h2 {
  font-size: 19px;
}
.license-info-dialog .edition-feature-table th,
.license-info-dialog .edition-feature-table td {
  padding: 9px 10px;
}
.license-location-section {
  padding: 14px;
  border: 1px solid rgba(243,201,91,.42);
  border-radius: 6px;
  background: #211d12;
}
.license-location-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}
.license-location-section h2 {
  font-size: 17px;
}
.license-location-section p {
  margin: 6px 0 0;
  color: #eee7d2;
  font-size: 13px;
  line-height: 1.45;
}
.license-location-limit {
  display: grid;
  justify-items: center;
  min-width: 76px;
  padding: 7px 10px;
  border: 1px solid rgba(243,201,91,.52);
  border-radius: 6px;
  background: #0d0f10;
}
.license-location-limit strong {
  color: var(--gold);
  font-size: 25px;
  line-height: 1;
}
.license-location-limit span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.license-purchase-rules {
  display: grid;
  gap: 8px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(243,201,91,.3);
}
.license-purchase-rules div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.license-purchase-rules dt {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}
.license-purchase-rules dd {
  margin: 0;
  color: #eee7d2;
  font-size: 12px;
  line-height: 1.4;
}
.license-security-note {
  margin: 14px 0 18px !important;
  padding-left: 11px;
  border-left: 3px solid rgba(216,240,176,.5);
  font-size: 13px;
}
.license-info-actions {
  justify-content: space-between;
}

@media (max-width: 520px) {
  .license-status-grid { grid-template-columns: 1fr; }
  .license-location-heading { grid-template-columns: 1fr; }
  .license-location-limit { justify-self: start; }
  .license-purchase-rules div { grid-template-columns: 1fr; gap: 3px; }
}

/* 36 Custom Logo Entry Layer */
.branding-dialog {
  width: min(620px, 100%);
}
.branding-dialog [hidden] {
  display: none !important;
}
.branding-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.branding-dialog-header h1 {
  margin: 0;
}
.branding-dialog-header p {
  margin: 4px 0 0;
}
.branding-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.branding-preview section {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: #15191b;
  text-align: center;
}
.branding-preview section.coach {
  border-color: rgba(243,201,91,.58);
  background: #211d12;
}
.branding-edition-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.branding-preview section.coach .branding-edition-label {
  color: var(--gold);
}
.branding-logo-stage {
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 2px solid rgba(255,255,255,.68);
  border-radius: 50%;
  background: #176437;
}
.branding-logo-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.branding-logo-stage.custom {
  border-color: var(--gold);
  background: #13502f;
}
.branding-logo-stage.custom span {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}
.branding-preview strong {
  min-height: 32px;
  color: #f3f3f3;
  font-size: 13px;
  line-height: 1.25;
}
.branding-description {
  margin-bottom: 14px !important;
  color: #e5e5e5 !important;
}
.branding-status {
  margin: -4px 0 14px !important;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: var(--accent) !important;
  font-weight: 800;
}
.branding-status[data-error="true"] {
  border-left-color: #e57a72;
  color: #ffd5d0 !important;
}
.branding-coach-actions {
  flex-wrap: wrap;
}
.coach-upgrade-action {
  border-color: rgba(243,201,91,.72);
  background: #302815;
  color: var(--gold);
}
.coach-upgrade-action:hover {
  border-color: var(--gold);
  color: #fff1b5;
}

@media (max-width: 540px) {
  .branding-preview { grid-template-columns: 1fr; }
  .branding-coach-actions { justify-content: stretch; }
  .branding-coach-actions button { width: 100%; }
}

/* 37 Coach Unlock Entry Layer */
.coach-unlock-dialog {
  width: min(520px, 100%);
}
.coach-unlock-dialog [hidden] {
  display: none !important;
}
.coach-unlock-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.coach-unlock-header h1 {
  margin: 0;
}
.coach-unlock-header p {
  margin: 4px 0 0;
}
.coach-unlock-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(243,201,91,.42);
  border-radius: 6px;
  background: #211d12;
}
.coach-unlock-status-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.coach-unlock-status-card strong {
  color: var(--gold);
  font-size: 14px;
}
.coach-unlock-dialog form {
  display: grid;
  gap: 7px;
}
.coach-unlock-dialog label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.coach-unlock-dialog input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 5px;
  background: #080a0b;
  color: var(--text);
  font: inherit;
}
.coach-unlock-dialog input[readonly] {
  color: #c4c8ca;
  background: #15191b;
}
.coach-unlock-privacy {
  margin: 5px 0 8px !important;
  color: var(--muted) !important;
  font-size: 12px;
}
.coach-unlock-message {
  margin: 0 0 8px !important;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
  color: var(--accent) !important;
  font-size: 13px;
  font-weight: 800;
}
.coach-unlock-message[data-error="true"] {
  border-left-color: #e57a72;
  color: #ffd5d0 !important;
}
.coach-unlock-active {
  padding: 14px;
  border: 1px solid rgba(216,240,176,.45);
  border-radius: 6px;
  background: #142017;
}
.coach-unlock-active > strong {
  color: var(--accent);
}
.coach-unlock-active p {
  margin: 6px 0 16px;
}

/* 26 Basic Project Check Layer */
.project-check-dialog {
  width: min(640px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  overflow: auto;
}
.project-check-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.project-check-header p {
  margin-bottom: 14px;
}
.project-check-totals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
  border-block: 1px solid var(--border);
}
.project-check-totals > div {
  min-width: 0;
  padding: 10px;
  text-align: center;
}
.project-check-totals > div + div {
  border-left: 1px solid var(--border);
}
.project-check-totals dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.project-check-totals dd {
  margin: 3px 0 0;
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}
.project-check-table-wrap {
  overflow-x: auto;
}
.project-check-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.project-check-table th,
.project-check-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
.project-check-table thead th {
  color: var(--accent);
  font-size: 12px;
}
.project-check-table tbody th {
  text-align: left;
}
.project-check-empty {
  color: var(--muted);
}
@media (max-width: 520px) {
  .project-check-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-check-totals > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .project-check-totals > div:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}

/* 27 Basic PNG Current Layer */
.png-current-dialog {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
}
.png-current-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.png-current-header p {
  margin-bottom: 12px;
}
.png-current-preview {
  display: block;
  width: 100%;
  aspect-ratio: 111 / 74;
  object-fit: contain;
  border: 1px solid var(--border);
  background: #16833d;
}
.png-current-preview:not([src]) {
  display: none;
}
.png-current-actions {
  margin-top: 12px;
}
.png-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #14532d;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.png-download-link:not([href]) {
  display: none;
}

/* 39 Coach Video Export Layer */
.coach-video-dialog {
  width: min(760px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  overflow: auto;
}
.coach-video-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.coach-video-header p {
  margin-bottom: 12px;
}
.coach-video-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.coach-video-summary > div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--border);
}
.coach-video-summary > div:last-child {
  border-right: 0;
}
.coach-video-summary dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.coach-video-summary dd {
  margin: 3px 0 0;
  color: #fff;
  font-weight: 900;
}
.coach-video-progress {
  display: block;
  width: 100%;
  height: 10px;
  margin: 0 0 12px;
  accent-color: var(--accent);
}
.coach-video-preview {
  display: block;
  width: 100%;
  aspect-ratio: 111 / 74;
  border: 1px solid var(--border);
  background: #050607;
}
.coach-video-preview[hidden] {
  display: none;
}
.coach-video-note {
  margin: 10px 0 0 !important;
  font-size: 12px;
}
[data-coach-video-status].is-success {
  padding: 9px 10px;
  border: 1px solid rgba(216,240,176,.5);
  border-radius: 6px;
  background: rgba(20,83,45,.45);
  color: #d8f0b0;
  font-weight: 900;
}
.coach-video-actions {
  margin-top: 12px;
}
.coach-video-save-button {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  border-color: var(--accent);
  background: #14532d;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.coach-video-save-button[aria-disabled="true"] {
  cursor: wait;
  opacity: .55;
}

@media (max-width: 520px) {
  .coach-video-summary {
    grid-template-columns: 1fr;
  }
  .coach-video-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .coach-video-summary > div:last-child {
    border-bottom: 0;
  }
}

/* 21 Training Disc Object Layer */
.training-disc-object-layer {
  position: absolute;
  inset: 0;
  z-index: 21;
  pointer-events: none;
}
.training-disc-artwork {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  display: block;
  border: 1px solid rgba(0,0,0,.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 43% 38%, rgba(255,255,255,.92) 0 5%, transparent 6%),
    radial-gradient(circle, #242424 0 8%, var(--disc-light) 9% 24%, var(--disc-dark) 25% 34%, var(--disc-color) 35% 72%, var(--disc-dark) 73% 83%, var(--disc-color) 84% 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.55);
}
.field-training-disc {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  pointer-events: auto;
}
.field-training-disc:active {
  cursor: grabbing;
}
.field-training-disc.selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 11px rgba(243,201,91,.92);
}
.training-disc-drag-ghost {
  position: fixed;
  z-index: 100;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  opacity: .94;
}

/* 22 Training Disc Tray Layer */
.training-disc-tray-section {
  margin-top: 8px;
}
.training-disc-token-grid {
  display: flex;
  align-items: center;
  gap: 6px;
}
.training-disc-token {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: rgba(255,255,255,.28);
  background: #4a514c;
  cursor: grab;
  touch-action: none;
}
.training-disc-token .training-disc-artwork {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}
.training-disc-token:hover,
.training-disc-token:focus-visible {
  border-color: var(--accent);
  background: #5c665f;
}
.training-disc-token:active {
  cursor: grabbing;
}

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 82px minmax(0, 1fr) 190px; }
  .logo-image { max-height: 68px; }
  .panel-host {
    left: 90px;
    top: 72px;
    width: min(248px, calc(100vw - 104px));
  }
}