#open-live-stage-map.button,
.stage-map-screen .button[data-stage-back] {
    background: linear-gradient(120deg, #d5aa40 0%, #ffe28a 19%, #fff7bb 37%, #f2c75a 50%, #fff0a6 67%, #e5b242 82%, #ffdf79 100%);
    color: #4d1778;
    border-color: #bd8b26;
    font-weight: 650;
    box-shadow: inset 0 1px 0 #fff7ce, inset 0 -2px 3px #85530438, 0 2px 7px #d1a24252;
    text-shadow: 0 1px 0 #ffffdea6;
  }
  #open-live-stage-map.button:hover,
  .stage-map-screen .button[data-stage-back]:hover { filter: brightness(1.05); }
  #open-live-stage-map.button:focus-visible,
  .stage-map-screen .button[data-stage-back]:focus-visible { outline-color: #4d1778; }
  .stage-map-canvas {
    position: relative;
    --stage-wood-back: #dfc8ac;
    --stage-wood-middle: #eddfc8;
    --stage-wood-front: #d9c6aa;
    --stage-floor-back: #f5eadc;
    --stage-floor-middle: #fcf5e7;
    --stage-floor-front: #f5eddf;
    --stage-wood-joint: #beb2a3;
    --stage-wood-grain: #fff9ec;
    --stage-wood-side: #bcb0a4;
    --stage-curtain: #eae9e8;
    --stage-curtain-fold: #f7f6f4;
    --stage-curtain-shadow: #e1e1e1;
    --stage-riser-top: #efddbc;
    --stage-riser-front: #e3d0ac;
    --stage-riser-side: #b4a081;
    --stage-riser-ink: #524532;
    --stage-roster-placed: light-dark(#d6f58f, #d6f58f);
    --stage-roster-placed-ink: light-dark(#253512, #253512);
    --stage-provisional-fill: light-dark(#c13e38, #c13e38);
    --stage-provisional-ink: light-dark(#fff7f5, #fff7f5);
    --stage-provisional-border: light-dark(#982d28, #982d28);
    --stage-person-shadow: rgba(48, 40, 58, .38);
    --stage-sector-fill: #b6a18f;
    --stage-sector-border: #9d9185;
    --stage-sector-ink: #625868;
    --stage-metal: #918b95;
    --stage-metal-light: #e4e2e6;
    --stage-ivory: #f7f1e5;
    --stage-brass-light: #f4ead3;
    --stage-brass: #d9c7a0;
    --stage-brass-dark: #b9a789;
    --stage-drum: #af9cb6;
    --stage-light-blue: #adcbd8;
    --stage-light-pink: #d6c6d7;
    --stage-led-back: #c6bbd5;
    --stage-led-front: #ded4e6;
    --stage-led-text: #44384f;
    --stage-led-muted: #504557;
    --stage-led-gold: #594834;
    --stage-led-note: #803434;
  }
  .stage-map-canvas .stage-backdrop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .stage-map-canvas .led-screen { display: block; position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 1; }
  .stage-map-canvas .led-frame { fill: var(--stage-metal); }
  .stage-map-canvas .led-edge { fill: var(--stage-led-back); }
  .stage-map-canvas .led-top { fill: var(--stage-led-front); }
  .stage-map-canvas .led-support { stroke: var(--stage-metal); stroke-width: 3; }
  .stage-map-canvas .led-copy { fill: var(--stage-led-text); text-anchor: middle; }
  .stage-map-canvas .led-title { font-weight: 500; }
  .stage-map-canvas .led-show { fill: var(--stage-led-gold); font-weight: 500; }
  .stage-map-canvas .led-participants { font-size: max(11px, calc(var(--font-size-base) * .78)); }
  .stage-map-canvas .led-author { fill: var(--stage-led-muted); text-anchor: middle; font-size: max(11px, calc(var(--font-size-base) * .72)); }
  .stage-map-canvas .led-note-interaction { position: absolute; min-width: 0; pointer-events: auto; z-index: 4; }
  .stage-map-canvas .led-note-interaction [data-note-view] { display: flex; justify-content: center; }
  .stage-map-canvas .led-note-interaction .led-note-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; min-width: 0; padding: 4px 8px; border: 1px solid #ddd5e2; border-radius: 5px; background: #fff; font-size: 12px; line-height: 1.3; }
  .stage-map-canvas .led-note-pencil { flex-shrink: 0; font-size: 14px; line-height: 1; }
  .stage-map-canvas .led-note-interaction .led-note-button { overflow-y: auto; align-items: flex-start; }
  .stage-map-canvas #free-stage-note { overflow-y: auto; resize: none; }
  .stage-map-canvas .led-note-fields:not([hidden]) { display: grid; gap: 6px; }
  .stage-map-canvas .led-note-fields .viz-row { justify-content: center; }
  .stage-map-canvas .led-note-copy { display: block; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .stage-map-canvas .led-note-copy, .stage-map-canvas #free-stage-note { color: var(--stage-led-note); }
  .stage-map-canvas .led-note-print { fill: var(--stage-led-note); text-anchor: middle; }
  .stage-map-canvas .led-screen .led-note-print, .stage-map-canvas .led-screen .led-note-print-background { visibility: hidden; }
  .stage-map-canvas .a4-print-map .led-note-print, .stage-map-canvas .a4-print-map .led-note-print-background { visibility: visible; }
  .stage-map-canvas .stage-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stage-map-canvas .roster-area, .stage-map-canvas .map-area { min-width: 0; }
  .stage-map-canvas .roster-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
  .stage-map-canvas .roster-hint { font-size: 11px; white-space: nowrap; }
  .stage-map-canvas .roster-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 4px; margin-top: 6px; }
  .stage-map-canvas .roster-item { display: flex; min-width: 0; touch-action: none; }
  .stage-map-canvas .roster-item .btn[aria-pressed="true"] { --primary: var(--stage-roster-placed); --primary-foreground: var(--stage-roster-placed-ink); }
  .stage-map-canvas .roster-item[data-provisional="true"] .btn,
  .stage-map-canvas .person-marker[data-provisional="true"] .person-body .btn { --secondary: var(--stage-provisional-fill); --secondary-foreground: var(--stage-provisional-ink); --primary: var(--stage-provisional-fill); --primary-foreground: var(--stage-provisional-ink); --border: var(--stage-provisional-border); }
  .stage-map-canvas .roster-copy { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; max-width: 100%; }
  .stage-map-canvas .roster-name, .stage-map-canvas .roster-instrument, .stage-map-canvas .name-line, .stage-map-canvas .instrument { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .stage-map-canvas .roster-teacher { white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .stage-map-canvas .roster-solto { font-weight: 400; opacity: .85; }
  .stage-map-canvas .a4-map-sheet { display: flow-root; }
  .stage-map-canvas .a4-print-map { display: none; }
  .stage-map-canvas .stage-field { position: relative; width: 100%; touch-action: none; font-size: var(--font-size-base); }
  .stage-map-canvas .stage-scene { position: relative; }
  .stage-map-canvas .stage-outline, .stage-map-canvas .equipment-layer, .stage-map-canvas .sector-layer, .stage-map-canvas .person-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
  .stage-map-canvas .equipment-layer, .stage-map-canvas .sector-layer, .stage-map-canvas .person-layer { pointer-events: none; }
  .stage-map-canvas .equipment-layer { z-index: 1; }
  .stage-map-canvas .equipment-layer[data-editing="true"] { z-index: 4; }
  .stage-map-canvas .equipment-marker { position: absolute; pointer-events: auto; touch-action: none; }
  .stage-map-canvas .equipment-marker .btn { width: 100%; height: 100%; background: transparent; border-color: transparent; cursor: move; }
  .stage-map-canvas .equipment-marker .btn[aria-pressed="true"] { border-color: var(--purple); }
  .stage-map-canvas .equipment-marker .equipment-rotate, .stage-map-canvas .sector-marker .sector-rotate { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); width: 24px; height: 24px; min-width: 24px; padding: 0; border: 1px solid var(--purple); border-radius: 50%; background: #fff; color: var(--purple); font-size: 19px; line-height: 1; cursor: grab; pointer-events: auto; touch-action: none; }
  .stage-map-canvas .equipment-marker .equipment-rotate:active, .stage-map-canvas .sector-marker .sector-rotate:active { cursor: grabbing; }
  .stage-map-canvas .sector-layer { z-index: 2; }
  .stage-map-canvas .sector-layer[data-editing="true"] { z-index: 5; }
  .stage-map-canvas .person-layer { z-index: 3; }
  .stage-map-canvas .stage-floor { stroke: var(--stage-wood-joint); stroke-width: 1; }
  .stage-map-canvas .stage-grain, .stage-map-canvas .stage-washes, .stage-map-canvas .stage-footlights, .stage-map-canvas .sector-props { pointer-events: none; }
  .stage-map-canvas .stage-grain { opacity: .25; }
  .stage-map-canvas .sector-props { opacity: .28; }
  .stage-map-canvas .stage-front { fill: var(--stage-wood-side); pointer-events: none; }
  .stage-map-canvas .sector-guide { fill: var(--stage-sector-fill); fill-opacity: .24; stroke: var(--stage-sector-border); stroke-opacity: .92; stroke-width: 2.5; cursor: move; }
  .stage-map-canvas .sector-guide[data-sector-id="elevado"] { fill-opacity: 1; stroke: var(--stage-riser-side); stroke-opacity: 1; }
  .stage-map-canvas .sector-depth { fill: var(--stage-riser-side); pointer-events: none; }
  .stage-map-canvas .sector-guide[data-selected="true"] { stroke: var(--purple); stroke-opacity: 1; stroke-width: 3; }
  .stage-map-canvas .person-portrait { position: absolute; left: 50%; top: 0; transform: translate(-50%, -72%); width: 34px; height: 36px; pointer-events: none; }
  .stage-map-canvas .sector-marker { position: absolute; pointer-events: none; }
  .stage-map-canvas .sector-title { position: absolute; top: 0; left: 0; width: 100%; pointer-events: auto; touch-action: none; }
  .stage-map-canvas .sector-title .btn { background: transparent; border-color: transparent; color: var(--stage-sector-ink); }
  .stage-map-canvas .sector-title .btn[data-sector-id="elevado"] { color: var(--stage-riser-ink); }
  .stage-map-canvas .sector-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
  .stage-map-canvas .sector-corner { position: absolute; right: 0; bottom: 0; pointer-events: auto; touch-action: none; }
  .stage-map-canvas .sector-rename { position: absolute; left: 0; bottom: 0; pointer-events: auto; touch-action: manipulation; }
  .stage-map-canvas .sector-marker .sector-remove { position: absolute; top: -28px; right: 1px; width: 24px; height: 24px; padding: 3px; border: 1px solid #bdb4a6; border-radius: 5px; background: #fff; color: #4d1778; display: grid; place-items: center; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
  .stage-map-canvas .sector-marker .sector-remove:hover, .stage-map-canvas .sector-marker .sector-remove:focus-visible { background: #fff3ef; color: #8d251f; }
  .stage-map-canvas .person-marker { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; user-select: none; touch-action: none; }
  .stage-map-canvas .person-body { position: absolute; top: 0; left: 0; transform-origin: top left; }
  .stage-map-canvas .person-label { display: flex; flex-direction: column; gap: 2px; width: 100%; min-width: 0; max-width: 100%; }
  .stage-map-canvas .person-marker .person-remove { position: absolute; top: -30px; right: 1px; width: 24px; height: 24px; padding: 3px; border: 1px solid #bdb4a6; border-radius: 5px; background: #fff; color: #334c16; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
  .stage-map-canvas .person-marker .person-remove:hover, .stage-map-canvas .person-marker .person-remove:focus-visible { background: #fff9; color: #8d251f; }
  .stage-map-canvas .person-marker[data-provisional="true"] .person-remove { color: #982d28; }
  .stage-map-canvas .first-name { font-weight: 500; white-space: nowrap; }
  .stage-map-canvas .instrument { font-weight: 500; }
  .stage-map-canvas .instrument-solto, .stage-map-canvas .instrument-provisional { font-weight: 400; }
  .stage-map-canvas .instrument-solto { font-size: var(--solto-font-size, var(--font-size-small)); opacity: .85; }
  .stage-map-canvas .debut-star { font-weight: 400; }
  .stage-map-canvas .last-names { opacity: .85; }
  .stage-map-canvas .person-corner { position: absolute; left: 100%; top: 100%; transform: translate(-5px, -5px); }
  .stage-map-canvas .person-marker[data-edge-right="true"] .person-corner { left: auto; right: 0; transform: translate(0, -5px); }
  .stage-map-canvas .person-marker[data-edge-bottom="true"] .person-corner { top: auto; bottom: 0; transform: translate(-5px, 0); }
  .stage-map-canvas .person-marker[data-edge-right="true"][data-edge-bottom="true"] .person-corner { transform: none; }
  .stage-map-canvas .roster-ghost { position: absolute; z-index: 8; pointer-events: none; max-width: 200px; }
  @media (max-width: 560px) {
    .stage-map-canvas .stage-editor { grid-template-columns: minmax(0, 1fr); }
    .stage-map-canvas .roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @page setlist-stage-map { size: A4 landscape; margin: 3mm; }
  @media print {
    .stage-map-canvas > :not(.a4-print-map) { display: none !important; }
    .stage-map-canvas .a4-print-map { display: block; width: 291mm; height: 203mm; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .stage-map-canvas .print-direction { fill: var(--stage-metal); }
    .stage-map-canvas { margin: 0; padding: 0; }
  }

.stage-map-canvas { color-scheme: light; color: #253148; font-size: 14px; --font-size-base: 14px; --font-size-small: 12px; --foreground: #253148; --primary: #674180; --primary-foreground: #ffffff; --secondary: #f2f2f5; --secondary-foreground: #253148; --purple: #674180; --border: #cbd1db; --muted-foreground: #6d7482; }
.stage-map-canvas *, .stage-map-screen * { box-sizing: border-box; }
.stage-map-canvas [hidden], .stage-map-screen [hidden] { display: none !important; }
.stage-map-canvas .text-small { font-size: var(--font-size-small); }
.stage-map-canvas .text-muted { color: var(--muted-foreground); }
.stage-map-canvas .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stage-map-canvas .btn { font: inherit; font-weight: 400; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--secondary); color: var(--secondary-foreground); cursor: pointer; }
.stage-map-canvas .btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.stage-map-canvas .btn:focus-visible { outline: 3px solid #674180; outline-offset: 2px; }
.stage-map-canvas .btn:disabled { cursor: default; }
.stage-map-canvas .stage-history-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; min-width: 44px; min-height: 44px; }
.stage-map-canvas .stage-history-button:disabled { opacity: .4; }
.stage-map-canvas .stage-history-icon { display: block; width: 20px; height: 20px; }
.stage-map-canvas .btn-block { width: 100%; }
.stage-map-canvas .btn-ghost { background: transparent; border-color: transparent; }
.stage-map-canvas .btn[aria-pressed="true"].btn-ghost { background: transparent; }
.stage-map-canvas .roster-item .btn { background: #eeeeef; font-size: 12px; line-height: 1.1; padding: 4px 5px; min-height: 44px; border-radius: 6px; box-shadow: 0 1px 3px rgba(48, 40, 58, .12); }
.stage-map-canvas .roster-name { font-weight: 500; }
.stage-map-canvas .roster-instrument { font-size: 11px; }
.stage-map-canvas .roster-teacher { font-size: 10px; }
.stage-map-canvas .teacher-name { color: #b42318; }
.stage-map-canvas .roster-solto { font-size: 9px; }
.stage-map-canvas .roster-item .btn[aria-pressed="true"] { background: var(--stage-roster-placed); color: var(--stage-roster-placed-ink); }
.stage-map-canvas .roster-item[data-provisional="true"] .btn, .stage-map-canvas .person-marker[data-provisional="true"] .person-body .btn { background: var(--stage-provisional-fill); color: var(--stage-provisional-ink); border-color: var(--stage-provisional-border); }
.stage-map-canvas .person-body .btn { background: var(--stage-roster-placed); color: #253512; border-color: #79a13e; cursor: move; box-shadow: 0 3px 8px var(--stage-person-shadow); }
.stage-map-canvas .person-body .btn[aria-pressed="true"] { outline: 2px solid #674180; }
.stage-map-canvas .person-corner .btn, .stage-map-canvas .sector-corner .btn, .stage-map-canvas .sector-rename .btn { padding: 3px 6px; min-width: 24px; min-height: 24px; }
.stage-map-canvas .sector-title .btn { cursor: move; background: transparent; border-color: transparent; }
.stage-map-canvas .led-note-interaction .btn { color: var(--stage-led-note); }
.stage-map-canvas .form-control { width: 100%; font: inherit; background: #fff; color: #253148; border: 1px solid #bcc7d5; border-radius: 6px; padding: 6px; }
.stage-map-canvas .viz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.stage-map-canvas .viz-badge { display: block; padding: 6px 10px; border-radius: 8px; background: #674180; color: #fff; }
.stage-map-canvas i { font-style: normal; }
#stage-map-view.view { max-width: none; padding: 8px 12px 12px; }
.stage-map-screen { min-width: 0; width: 100%; margin-inline: auto; container: stage-map-workspace / inline-size; }
.stage-map-screen .stage-map-heading { margin-bottom: 8px; }
.stage-map-screen .stage-map-heading h1 { font-size: 20px; margin: 0; }
.stage-map-screen .stage-map-subtitle { color: #68748f; margin: 3px 0 8px; font-size: 12px; overflow-wrap: anywhere; }
.stage-map-screen .stage-map-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stage-map-screen .stage-map-actions .button { min-width: 0; font-size: 13px; padding: 7px 8px; }
.stage-map-screen [data-stage-back] { grid-column: 1 / -1; }
.stage-map-screen .stage-map-status { min-height: 22px; margin: 5px 0; font-size: 13px; color: #59647b; }
.stage-map-screen .stage-map-status.is-error { color: #ab2926; }
.stage-map-screen .stage-map-leave { padding: 12px; margin-bottom: 10px; background: #fff5de; border: 1px solid #c5a562; border-radius: 8px; }
.stage-map-screen .stage-map-leave p { margin: 0 0 9px; }
.stage-map-screen .stage-reference-photo { margin-top: 10px; }
.stage-map-screen .stage-reference-toggle { display: block; width: 100%; padding: 0; border: 1px solid #cbd1db; border-radius: 8px; background: #fff; overflow: hidden; cursor: zoom-in; box-shadow: 0 2px 5px #30283a1f; }
.stage-map-screen .stage-reference-toggle img { display: block; width: 100%; height: auto; }
.stage-map-screen .stage-reference-toggle:hover { border-color: #674180; }
.stage-map-screen .stage-reference-toggle:focus-visible { outline: 3px solid #674180; outline-offset: 2px; }
.stage-map-screen .stage-reference-dialog { position: fixed; inset: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; padding: 12px; border: 0; background: transparent; overflow: hidden; }
.stage-map-screen .stage-reference-dialog[open] { display: flex; }
.stage-map-screen .stage-reference-dialog:not([open]) { display: none; }
.stage-map-screen .stage-reference-dialog::backdrop { background: rgba(20, 16, 25, .88); backdrop-filter: blur(2px); }
.stage-map-screen .stage-reference-close { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-out; }
.stage-map-screen .stage-reference-close:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.stage-map-screen .stage-reference-close img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@container stage-map-workspace (min-width: 920px) {
  .stage-map-canvas { --stage-desktop-layout: 1; }
  .stage-map-canvas .stage-editor { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
  .stage-map-canvas .roster-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-map-canvas .map-area { position: sticky; top: 8px; align-self: start; }
}
#stage-map-print-root { display: none; }
@media print {
  .stage-map-screen .stage-reference-photo, .stage-map-screen .stage-reference-dialog { display: none !important; }
  html:has(body.stage-map-printing), body.stage-map-printing { display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body.stage-map-printing { page: setlist-stage-map; }
  body.stage-map-printing > * { display: none !important; }
  body.stage-map-printing > #stage-map-print-root { display: block !important; width: 291mm !important; height: 203mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; break-inside: avoid; }
  #stage-map-print-root .a4-print-map { display: block !important; width: 291mm !important; height: 203mm !important; max-width: none !important; margin: 0 !important; print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }
}