:root { color-scheme: dark; }
  body { margin: 0; padding: 2rem; background: #12131a; color: #e9e9ee;
         font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif; }
  main { max-width: 48rem; margin: 0 auto; }
  h1 { font-size: 1.6rem; margin: 0; }
  h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; color: #b7f000;
       scroll-margin-top: 6rem; }
  a { color: #c9ec77; }
  :is(a, button, input, select, summary):focus-visible { outline: 2px solid #b7f000; outline-offset: 3px; }
  .intro { margin: 0.4rem 0 1.5rem; color: #b5b6c4; }
  .admin-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1rem;
               background: #1a1c26; border: 1px solid #2c2e3c; border-radius: 10px; }
  .admin-nav :is(a, button) { padding: 0.4rem 0.65rem; border-radius: 6px; text-decoration: none;
                 background: #252735; color: #e9e9ee; }
  .admin-nav :is(a, button):hover { background: #36394b; }
  .admin-nav button { border: 0; font-size: inherit; font-weight: 400; }
  .admin-nav button[aria-selected="true"] { background: #b7f000; color: #12131a; }
  .admin-section { display: none; }
  .admin-section.active { display: block; }
  .feedback-filters { grid-template-columns: minmax(8rem, 0.6fr) minmax(12rem, 1.4fr) auto;
                      align-items: end; margin: 1.5rem 0; }
  .feedback-filters input, .feedback-filters select { width: 100%; box-sizing: border-box; }
  .feedback-list { gap: 0.8rem; }
  .feedback-list .feedback-card { display: block; padding: 1.1rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.18); border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035));
    box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
  .feedback-card-head { display: flex; align-items: center; justify-content: space-between;
                        gap: 0.7rem; color: #b5b6c4; font-size: 0.8rem; }
  .feedback-kind { color: #d6ff00; border: 1px solid rgba(214,255,0,0.4);
                   border-radius: 999px; padding: 0.15rem 0.65rem; text-transform: uppercase;
                   font-size: 0.7rem; letter-spacing: 0.08em; font-weight: 700; }
  .feedback-kind-issue { color: #ff768e; border-color: rgba(255,118,142,0.45); }
  .feedback-kind-other { color: #75eaf2; border-color: rgba(117,234,242,0.45); }
  .feedback-message { margin: 0.9rem 0; white-space: pre-wrap; overflow-wrap: anywhere;
                      font-size: 1rem; line-height: 1.55; }
  .feedback-author { color: #b5b6c4; font-size: 0.8rem; overflow-wrap: anywhere; }
  .feedback-pages { display: flex; gap: 0.6rem; margin-top: 1rem; }
  .feedback-list .feedback-empty { color: #b5b6c4; padding: 1.5rem; }
  @media (max-width: 40rem) { .feedback-filters { grid-template-columns: 1fr; } }
  .account-panel { padding: 1.25rem; margin: 2rem 0; border: 1px solid #3c4052;
                   border-radius: 10px; background: #161820; }
  .account-panel h2 { margin-top: 0; }
  .account-panel .hint { color: #b5b6c4; margin: 0.25rem 0 0.5rem; }
  .section-help { color: #b5b6c4; margin: 0 0 1rem; font-size: 0.85rem; }
  @media (max-width: 40rem) {
    body { padding: 1rem; }
    .account-panel { padding: 0.85rem; }
    .admin-nav { padding: 0.65rem; }
  }
  form { display: grid; gap: 0.6rem; margin: 0 0 1rem; }
  .oauth-login { display: grid; gap: 0.6rem; margin-top: 1rem; }
  .oauth-login p { margin: 0; color: #9a9aa8; font-size: 0.8rem; }
  .oauth-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .oauth-buttons button { background: #2c2e3c; color: #e9e9ee; }
  label { display: grid; gap: 0.25rem; font-size: 0.8rem; color: #9a9aa8; }
  input, select { padding: 0.55rem 0.7rem; border: 1px solid #2c2e3c; border-radius: 6px;
                  background: #1a1c26; color: inherit; font: inherit; }
  button { padding: 0.55rem 1rem; border: 0; border-radius: 6px; background: #b7f000;
           color: #12131a; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; }
  button:disabled { opacity: 0.5; cursor: default; }
  button.quiet { background: #2c2e3c; color: #e9e9ee; }
  button.danger { background: #3a1c20; color: #ffb4b4; }
  ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem;
       border: 1px solid #2c2e3c; border-radius: 8px; }
  li img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; background: #1a1c26; }
  li .none { width: 64px; height: 40px; border-radius: 4px; background: #1a1c26;
             display: grid; place-items: center; font-size: 0.65rem; color: #6a6a78; }
  li.stack { display: block; }
  .head { display: flex; align-items: center; gap: 0.75rem; }
  .grow { flex: 1; min-width: 0; }
  .slug { color: #9a9aa8; font-size: 0.8rem; }
  details { margin-top: 0.6rem; }
  summary { cursor: pointer; color: #9a9aa8; font-size: 0.8rem; }
  .pane { display: grid; gap: 0.6rem; padding: 0.75rem 0 0.25rem; }
  .pane form { margin: 0; }
  .row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .row button { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .field { font-size: 0.8rem; color: #9a9aa8; }
  /* The member picker under the award form's handle field. A native <datalist>
     cannot draw a face, and a face is most of what tells two similar handles
     apart — so the menu is ours, anchored to the field it fills in. */
  .picker { position: relative; }
  .picker input { width: 100%; min-width: 0; box-sizing: border-box; }
  .picker .slug { overflow-wrap: anywhere; }
  .picker li img, .picker li .none { flex-shrink: 0; }
  .picker ul { position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
               margin-top: 0.25rem; background: #16171f; border: 1px solid #2c2e3c;
               border-radius: 8px; padding: 0.35rem; max-height: 17rem; overflow-y: auto;
               box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
  .picker li { cursor: pointer; padding: 0.4rem 0.5rem; border-color: transparent; }
  .picker li:hover, .picker li[aria-selected="true"] { background: #23252f; }
  /* AFTER `ul { display: grid }` AND MORE SPECIFIC THAN IT. The browser's own
     `[hidden] { display: none }` loses to that rule, so the empty menu kept
     drawing its border as a grey strip under the field. */
  .picker ul[hidden] { display: none; }
  .picker li img, .picker li .none, .holders li img, .holders li .none,
  .people li img, .people li .none {
    width: 32px; height: 32px; border-radius: 50%; }
  .picker li .none, .holders li .none, .people li .none { font-size: 0.6rem; }
  .people .slug { overflow-wrap: anywhere; }
  /* The editor is the one thing on this page worth the whole window: the map wants
     height and the districts want to sit beside it rather than under it. */
  body.editing main { max-width: 76rem; }
  .editor { border: 1px solid #2c2e3c; border-radius: 8px; padding: 1rem; margin: 1rem 0;
            display: grid; gap: 0.75rem; }
  .editor h3 { font-size: 0.85rem; margin: 0.5rem 0 0; color: #9a9aa8; font-weight: 600; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(21rem, 1fr);
            gap: 1.25rem; align-items: start; }
  /* The map stays put while the controls beside it scroll, so a district's numbers
     are never being edited against a preview that has left the screen. */
  .stage-column { position: sticky; top: 1rem; }
  .controls { display: grid; gap: 0.75rem; align-content: start; }
  /* One column on a narrow window, where two would make both of them useless. */
  @media (max-width: 62rem) { .layout { grid-template-columns: minmax(0, 1fr); }
                              .stage-column { position: static; } }
  .stage { position: relative; margin: 0 auto; border-radius: 6px; overflow: hidden;
           touch-action: none; cursor: crosshair; }
  .stage .art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .mark, .pill { position: absolute; transform: translate(-50%, -50%); cursor: grab; }
  .mark img { width: 100%; height: 100%; display: block; pointer-events: none; }
  .mark.bare { border: 1px dashed #b7f000; border-radius: 4px; background: rgba(183, 240, 0, 0.14); }
  /* A marker whose district has a traced outline is no longer what a member taps,
     and it must stop looking like it: lime is the navigation area and nothing
     else, so this box goes quiet and reads as what it is — where the art sits. */
  .mark.bare.quiet { border-color: #6a6a78; background: rgba(154, 154, 168, 0.09); }
  .pill { white-space: nowrap; background: rgba(17, 19, 16, 0.82); border: 1px solid #2c2e3c;
          border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.7rem; line-height: 1.4; }
  .armed { outline: 2px solid #b7f000; outline-offset: 2px; }
  /* The traced navigation area. The SVG spans the artwork and is scaled to it, so
     a point is stored and drawn as the same fraction; the stroke opts out of that
     scaling so a wide map does not get a fatter outline than a tall one. */
  .area { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .area polygon { fill: rgba(183, 240, 0, 0.14); stroke: #b7f000; stroke-width: 2;
                  vector-effect: non-scaling-stroke; }
  .area.bad polygon { fill: rgba(255, 180, 180, 0.14); stroke: #ffb4b4; }
  .area.still polygon { fill: rgba(183, 240, 0, 0.07); stroke-dasharray: 5 4; }
  /* Handles are dp, not per cent: a point you drag has to stay the size of a
     fingertip whatever the preview has been resized to. */
  .vertex, .midpoint { position: absolute; transform: translate(-50%, -50%); padding: 0;
                       justify-self: auto; border-radius: 50%; }
  .vertex { width: 15px; height: 15px; background: #b7f000; border: 2px solid #12131a;
            cursor: grab; touch-action: none; }
  .vertex.on { background: #e9e9ee; }
  .vertex:focus-visible, .midpoint:focus-visible { outline: 2px solid #e9e9ee; outline-offset: 2px; }
  .midpoint { width: 17px; height: 17px; background: #12131a; color: #b7f000; border: 1px solid #b7f000;
              font-size: 0.7rem; line-height: 1; display: grid; place-items: center; }
  .problem { font-size: 0.75rem; color: #ffb4b4; }
  .district { border: 1px solid #2c2e3c; border-radius: 6px; padding: 0.5rem 0.6rem;
              display: grid; gap: 0.4rem; }
  .district.off { opacity: 0.5; }
  .district .head { gap: 0.5rem; }
  .district .sum { font-size: 0.75rem; color: #6a6a78; font-family: ui-monospace, monospace; }
  .chev { background: none; color: #9a9aa8; padding: 0.1rem 0.35rem; font-size: 0.8rem;
          line-height: 1; }
  .chev:hover { color: #e9e9ee; }
  .coords { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
  .coords input[type="number"] { width: 5rem; padding: 0.3rem 0.4rem; }
  /* The hero is drawn 412x300 in the app; the thumbnail holds that shape so what
     is previewed here is croppable the same way. The selector covers <video> as
     well as <img>: an animated hero has to be previewed MOVING, or the one thing
     an admin is choosing between is the one thing they cannot see. */
  .hero-thumb { width: 74px; height: 54px; object-fit: cover; border-radius: 4px;
    border: 1px solid #2c2e3c; display: block; }
  .hero-kind { font-size: 0.7rem; color: #b7f000; text-transform: uppercase;
    letter-spacing: 0.04em; }
  /* The worker's verdict on an upload this editor already called saved. It sits
     in the district's own row rather than the page-level message strip because
     by the time it can be read the admin has reloaded, and a strip at the top
     would not say WHICH district refused. */
  .hero-error { font-size: 0.75rem; color: #ffb4b4; flex-basis: 100%; }
  .working { color: #b7f000; font-size: 0.8rem; }
  .inline { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #9a9aa8; }
  .inline input[type="checkbox"] { width: auto; }
  .hint { font-size: 0.75rem; color: #6a6a78; }
  .switch { position: relative; display: inline-block; width: 2.4rem; height: 1.4rem; flex: none; }
  .switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
                  opacity: 0; cursor: pointer; }
  .switch span { position: absolute; inset: 0; border-radius: 999px; background: #2c2e3c;
                 transition: background 0.15s ease; pointer-events: none; }
  .switch span::after { content: ""; position: absolute; top: 0.18rem; left: 0.18rem;
                        width: 1.04rem; height: 1.04rem; border-radius: 50%; background: #e9e9ee;
                        transition: transform 0.15s ease, background 0.15s ease; }
  .switch input:checked + span { background: #b7f000; }
  .switch input:checked + span::after { transform: translateX(1rem); background: #12131a; }
  .switch input:focus-visible + span { outline: 2px solid #b7f000; outline-offset: 2px; }
  .hex { width: 6.5rem; text-transform: lowercase; font-family: ui-monospace, monospace; }
  .msg { padding: 0.6rem 0.8rem; border-radius: 6px; margin: 0 0 1rem; display: none;
         position: sticky; top: 0.75rem; z-index: 30; background: #252735;
         max-height: 7rem; overflow: auto; overflow-wrap: anywhere; }
  .msg:not(:empty) { display: block; }
  .msg.err { display: block; background: #3a1c20; color: #ffb4b4; }
  .msg.ok { display: block; background: #1c3a22; color: #b4ffc4; }
  .hide { display: none; }
  #recording-player { width: 100%; max-height: 26rem; background: #000; margin: 0.75rem 0; }
  .recording-detail { min-width: 0; overflow-wrap: anywhere; }
  .recording-pagination { margin-bottom: 0.75rem; }
  .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.65rem; margin: 1rem 0; }
  .analytics-card { background: #1b1d26; border: 1px solid #2c2e3c; border-radius: 8px; padding: 0.85rem; }
  .analytics-card strong { display: block; color: #b7f000; font-size: 1.45rem; font-weight: 700; }
  .analytics-card span { color: #9a9aa8; font-size: 0.78rem; }
  .analytics-region { display: grid; grid-template-columns: minmax(5rem, 1fr) 4rem 4rem; gap: 0.75rem; align-items: center; }
  .analytics-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.75rem 0; }
  .analytics-controls label { margin: 0; min-width: 8rem; }
  .analytics-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  .analytics-table th, .analytics-table td { text-align: right; padding: 0.45rem 0.35rem; border-bottom: 1px solid #2c2e3c; }
  .analytics-table th:first-child, .analytics-table td:first-child { text-align: left; }
  .analytics-note { color: #9a9aa8; font-size: 0.75rem; margin: 0.4rem 0; }
  footer { margin-top: 2.5rem; color: #6a6a78; font-size: 0.75rem; }

  .highlight-list-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
  .highlight-list-heading h3, .highlight-list-heading p { margin: 0; }
  .highlight-tree { gap: 0.7rem; margin-top: 1rem; }
  .highlight-tree li { display: block; min-width: 0; padding: 0; }
  .highlight-tree details { margin: 0; }
  .highlight-moment { background: #1a1c26; overflow: hidden; }
  .highlight-tree summary { display: flex; align-items: center; gap: 0.7rem; padding: 1rem; color: #e9e9ee; font-size: 0.9rem; list-style: none; }
  .highlight-tree summary::-webkit-details-marker { display: none; }
  .highlight-tree summary:hover { background: #232532; }
  .highlight-tree summary:focus-visible { outline-offset: -3px; }
  .highlight-tree summary > svg { flex: 0 0 18px; transition: transform 150ms ease; }
  .highlight-tree details[open] > summary > svg { transform: rotate(90deg); }
  .highlight-identity { display: grid; flex: 1; min-width: 0; gap: 0.2rem; }
  .highlight-identity > strong { font-size: 1rem; overflow-wrap: anywhere; }
  .highlight-meta { display: block; color: #a7a9b9; font-size: 0.75rem; overflow-wrap: anywhere; }
  .highlight-summary-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.35rem; font-size: 0.7rem; }
  .highlight-count { color: #a7a9b9; white-space: nowrap; }
  .highlight-status { display: inline-flex; align-items: center; padding: 0.15rem 0.45rem; border-radius: 5px; background: #2c2e3c; color: #c8cbd7; font-size: 0.7rem; }
  .highlight-status.failed { color: #ffc0c0; background: #43272e; }
  .highlight-status.active, .highlight-status:is(.queued,.importing,.analyzing,.planning,.preparing,.rendering) { color: #b8d4ff; background: #24334e; }
  .highlight-status:is(.review,.published) { color: #d6ff00; background: #2d361c; }
  .highlight-groups { margin: 0 1rem 1rem 1.6rem; padding-left: 0.8rem; border-left: 1px solid #45485b; gap: 0.65rem; }
  .highlight-group { background: #12131a; }
  .highlight-group > details > summary { padding: 0.7rem; }
  .highlight-group-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .highlight-recaps { margin: 0 0.7rem 0.7rem; gap: 0.6rem; }
  .highlight-tree .highlight-project { padding: 0.8rem; background: #1a1c26; }
  .highlight-recap-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.3rem; }
  .highlight-recap-heading strong { font-size: 0.85rem; overflow-wrap: anywhere; }
  .highlight-error { margin: 0.6rem 0; color: #ffc0c0; font-size: 0.8rem; overflow-wrap: anywhere; }
  .highlight-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.65rem; }
  .highlight-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
  .highlight-icon-button svg { pointer-events: none; }
  .highlight-preview { display: block; width: 100%; max-height: 480px; margin-top: 0.7rem; background: #090909; border-radius: 6px; }
  .highlight-pagination { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
  .highlight-pagination[hidden] { display: none; }
  .highlight-page-range { flex: 1; color: #a7a9b9; font-size: 0.8rem; }
  .highlight-page-number { font-size: 0.8rem; font-variant-numeric: tabular-nums; }
  .highlight-tree .highlight-empty { padding: 1.5rem; color: #a7a9b9; text-align: center; border-style: dashed; }
  @media (prefers-reduced-motion: reduce) { .highlight-tree summary > svg { transition: none; } }
  @media (max-width: 40rem) {
    .highlight-tree summary { flex-wrap: wrap; padding: 0.8rem; gap: 0.5rem; }
    .highlight-tree summary > .highlight-summary-badges { flex-basis: 100%; justify-content: flex-start; padding-left: 1.65rem; }
    .highlight-groups { margin: 0 0.5rem 0.6rem 0.8rem; padding-left: 0.5rem; }
    .highlight-recaps { margin: 0 0.4rem 0.4rem; }
    .highlight-icon-button { width: 40px; height: 40px; }
    .highlight-page-range { flex-basis: 100%; }
  }

  #highlight-editor { width: min(1420px, 95vw); max-width: 95vw; height: 90vh; padding: 1.25rem; box-sizing: border-box; border: 1px solid #3c4052; border-radius: 16px; color: #e9e9ee; background: #12131a; }
  #highlight-editor::backdrop { background: #000b; backdrop-filter: blur(4px); }
  #highlight-editor h2, #highlight-editor h3 { margin: 0.5rem 0; }
  .highlight-edit-layout { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr); gap: 1.5rem; }
  .highlight-edit-layout.timeline-only { grid-template-columns: minmax(0, 1fr); }
  .clip-bin[hidden], #highlight-editor button[hidden] { display: none; }
  fieldset.highlight-edit-layout { border: 0; padding: 0; margin: 0; min-width: 0; }
  #highlight-editor > header { flex-wrap: wrap; position: sticky; top: -1.25rem; background: #12131a; z-index: 2; padding: 0.5rem 0; }
  .clip-bin { min-width: 0; }
  .clip-bin > input, .clip-bin > select { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; }
  #editor-bin-items { max-height: 63vh; overflow: auto; display: grid; gap: 0.65rem; }
  .bin-clip, .timeline-clip { background: #1a1c26; border: 1px solid #3c4052; border-radius: 10px; padding: 0.9rem; overflow-wrap: anywhere; }
  .bin-clip.selected { border-color: #b7f000; }
  .editor-bin-parts { list-style: none; display: grid; gap: 0.35rem; padding: 0; margin: 0.7rem 0; }
  .editor-bin-parts > li { display: block; padding: 0; border: 0; background: none; }
  #highlight-editor .editor-bin-part { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; width: 100%; min-height: 40px; padding: 0.5rem; text-align: left; color: #c8cbd7; background: #12131a; border: 1px solid #3c4052; border-radius: 6px; }
  #highlight-editor .editor-bin-part:hover { background: #272a38; }
  #highlight-editor .editor-bin-part[aria-current="true"] { color: #d6ff00; background: #252c19; border-color: #b7f000; }
  #highlight-editor .editor-bin-part:focus-visible { outline: 2px solid #d6ff00; outline-offset: 2px; }
  .editor-bin-range { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
  .editor-bin-position { font-size: 0.7rem; color: #a1a5b9; }
  .clip-badge { font-size: 0.7rem; color: #b7f000; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
  #editor-timeline { display: grid; gap: 0.8rem; }
  .edit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.7rem; margin: 0.7rem 0; }
  .edit-fields input, .edit-fields select { min-width: 0; }
  .edit-fields .music-choice { grid-column: 1 / -1; }
  #highlight-editor input:invalid { border-color: #ffb4b4; }
  #highlight-editor .hint, #highlight-editor .problem { font-size: 0.8rem; }
  #highlight-editor .problem { color: #ffb4b4; }
  .edit-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0; white-space: pre-wrap; }
  .edit-check input { flex: 0 0 auto; }
  #editor-video { display: block; width: 100%; max-height: 38vh; background: #090909; border-radius: 10px; scroll-margin-top: 7rem; }
  #editor-video[hidden] { display: none; }
  .editor-footer { position: sticky; bottom: -1.25rem; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem 0; margin-top: 1rem; background: #12131a; border-top: 1px solid #3c4052; z-index: 2; }
  #editor-message { min-height: 1.5rem; flex-basis: 100%; margin: 0; }
  .edit-empty { padding: 2rem; text-align: center; border: 1px dashed #3c4052; border-radius: 10px; }
  #highlight-editor .editor-icon-button { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  #highlight-editor .editor-icon-button svg { pointer-events: none; }
  #highlight-editor .editor-icon-button[aria-busy="true"] svg { animation: editor-busy 1.2s ease-in-out infinite; }
  @keyframes editor-busy { 50% { opacity: 0.35; } }
  .editor-timeline-heading { flex-wrap: wrap; margin-top: 0.7rem; }
  .editor-mode-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #3c4052; border-radius: 9px; background: #090a10; }
  #highlight-editor .editor-mode-switch button { background: transparent; color: #9a9aa8; }
  #highlight-editor .editor-mode-switch button[aria-pressed="true"] { background: #2c2e3c; color: #d6ff00; }
  .editor-transport { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
  .editor-timecode { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; padding: 0 0.35rem; color: #e9e9ee; white-space: nowrap; }
  #editor-zoom { width: 80px; min-width: 50px; padding: 0; accent-color: #b7f000; }
  .editor-timeline-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid #3c4052; border-radius: 10px; background: #0c0d13; scrollbar-color: #45485b #12131a; padding: 0 0 18px; }
  .editor-timeline-surface { min-width: 100%; position: relative; padding-bottom: 14px; }
  .editor-ruler { height: 34px; position: relative; cursor: crosshair; border-bottom: 1px solid #343746; touch-action: none; overflow: hidden; }
  .editor-tick { position: absolute; height: 100%; box-sizing: border-box; padding: 5px 0 0 5px; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: #a1a5b9; border-left: 1px solid #3c4052; pointer-events: none; }
  .editor-track { display: flex; align-items: stretch; padding: 14px 0 0; min-height: 110px; }
  .editor-sequence-clip { position: relative; flex: 0 0 auto; min-width: 0; height: 110px; box-sizing: border-box; border: 1px solid #5d6073; border-radius: 6px; background: #242634; cursor: grab; color: #e9e9ee; outline-offset: -3px; overflow: hidden; }
  .editor-sequence-clip.selected { border-color: #d6ff00; box-shadow: inset 0 0 0 1px #d6ff00; }
  .editor-sequence-clip.drop-target { box-shadow: inset 5px 0 #e9e9ee; }
  .editor-filmstrip { position: absolute; inset: 25px 0 20px; overflow: hidden; pointer-events: none; }
  .editor-filmstrip-cell { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: #1a1c26; border-right: 1px solid #ffffff16; box-sizing: border-box; overflow: hidden; }
  .editor-filmstrip-cell img { width: 100%; height: 100%; object-fit: cover; }
  .editor-frame-status { padding: 4px; color: #a1a5b9; font-size: 9px; line-height: 1.2; text-align: center; }
  .editor-filmstrip-cell.failed { background: #30202a; }
  .editor-clip-body { position: relative; display: flex; height: 100%; box-sizing: border-box; flex-direction: column; justify-content: space-between; padding: 5px 12px; overflow: hidden; user-select: none; pointer-events: none; }
  .editor-clip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 600; }
  .editor-clip-duration { color: #bec5ab; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
  .editor-trim-handle { position: absolute; top: 0; bottom: 0; width: 10px; z-index: 1; cursor: ew-resize; touch-action: none; user-select: none; border-radius: 4px; }
  .editor-trim-handle.start { left: 0; }
  .editor-trim-handle.end { right: 0; }
  .editor-trim-handle::after { content: ''; position: absolute; width: 2px; height: 22px; left: 4px; top: calc(50% - 11px); background: #a0a5b7; border-radius: 2px; }
  .editor-sequence-clip.selected .editor-trim-handle::after { background: #d6ff00; }
  .editor-trim-handle:hover, .editor-trim-handle:focus-visible { background: #ffffff26; outline: 1px solid #d6ff00; outline-offset: -2px; }
  .editor-playhead { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #f4f6ef; pointer-events: none; z-index: 2; will-change: transform; }
  .editor-playhead::before { content: ''; position: absolute; left: -5px; top: 0; width: 11px; height: 12px; background: #f4f6ef; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
  .editor-timeline-help { margin: 0; }
  .editor-clip-actions { display: flex; align-items: center; gap: 5px; min-height: 38px; flex-wrap: wrap; }
  .editor-selected-trim { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9cdba; }
  #editor-timeline-feedback:empty { display: none; }
  @media(prefers-reduced-motion: reduce) { #highlight-editor .editor-icon-button[aria-busy="true"] svg { animation: none; } }
  #highlight-schedule { margin: 1rem 0; }
  @media(max-width: 700px) { .highlight-edit-layout { grid-template-columns: 1fr; } #editor-bin-items { max-height: 28vh; } #highlight-editor { padding: 0.8rem; } .timeline-clip > .head { flex-wrap: wrap; } }
  @media(max-width: 700px) { #highlight-editor > header { top: -0.8rem; justify-content: flex-end; } #highlight-editor > header .grow { flex-basis: 100%; } #highlight-editor > header p { margin: 0; } .editor-footer { bottom: -0.8rem; } }
  @media(max-width: 700px) { #highlight-editor .editor-icon-button { width: 40px; height: 40px; } .editor-transport { gap: 3px; } .editor-transport > .grow { flex-basis: 100%; } #editor-zoom { flex: 1; max-width: 160px; } .editor-trim-handle { width: 14px; } .editor-trim-handle::after { left: 6px; } .editor-timecode { margin-left: auto; } }
  .stream-live-list { margin: 1rem 0 1.5rem; padding: 1rem; background: #181b24; border: 1px solid #343949; border-radius: 12px; }
  .stream-live-list summary { margin-bottom: 0.75rem; cursor: pointer; }
  #stream-live-list { max-height: 260px; overflow: auto; }
  #stream-debug { width: min(1180px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid #43495b; border-radius: 18px; background: #12151d; color: #e9edf5; overflow: auto; }
  #stream-debug::backdrop { background: #05070dbf; backdrop-filter: blur(5px); }
  #stream-debug > header { position: sticky; top: -24px; padding: 12px 0; background: #12151df5; z-index: 2; border-bottom: 1px solid #303748; }
  #stream-debug h2 { margin: 0; color: #f2f6fa; font-size: 1.45rem; }
  #stream-debug h3 { font-size: 0.95rem; margin: 0 0 10px; }
  #stream-debug p { overflow-wrap: anywhere; }
  .stream-eyebrow { color: #b7f000; font: 600 10px/1.4 ui-monospace, monospace; letter-spacing: 0.16em; margin: 0 0 6px; }
  .stream-debug-toolbar { flex-wrap: wrap; padding: 18px 0 8px; }
  .stream-inline { display: flex; align-items: center; gap: 8px; color: #c6cede; }
  .stream-inline input { accent-color: #b7f000; }
  .stream-viewer { margin: 16px 0; padding: 18px; border: 1px solid #3d4b61; border-radius: 12px; background: #181e29; }
  .stream-viewer .head { flex-wrap: wrap; }
  .stream-viewer h3 { margin-bottom: 0 !important; }
  #stream-viewer-video { width: 100%; height: min(56vh, 560px); background: #05070b; object-fit: contain; border-radius: 8px; }
  #stream-viewer-metrics { font: 12px/1.6 ui-monospace, monospace; color: #c6d9ef; }
  #stream-viewer-feedback:empty, #stream-viewer-metrics:empty { display: none; }
  .stream-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; background: #303748; color: #c6cede; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
  .stream-chain-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid #303748; }
  .stream-chain-heading { color: #9cacbf; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 10px; }
  .stream-chain { display: flex; flex-wrap: wrap; gap: 8px; }
  button.stream-stage { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #343b4c; border-radius: 8px; background: #1a1f2a; color: #c6cede; font-size: 11px; font-weight: 500; text-align: left; }
  button.stream-stage[aria-pressed="true"] { border-color: #8192ad; background: #242e3d; }
  button.stream-stage:focus-visible { outline: 2px solid #b7f000; outline-offset: 3px; }
  .stream-stage-state { color: #9cacbf; font-weight: 400; }
  .stream-stage-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #748096; }
  .stream-stage[data-status="live"] .stream-stage-dot, .stream-stage[data-status="recording"] .stream-stage-dot { background: #b7f000; box-shadow: 0 0 0 3px #b7f00015; animation: stream-status-pulse 2s ease-in-out infinite; }
  .stream-stage[data-status="recent"] .stream-stage-dot { background: #b7f000; }
  .stream-stage[data-status="stale"] .stream-stage-dot, .stream-stage[data-status="waiting"] .stream-stage-dot, .stream-stage[data-status="processing"] .stream-stage-dot, .stream-stage[data-status="paused"] .stream-stage-dot { background: #eabd71; }
  .stream-stage[data-status="completed"] .stream-stage-dot, .stream-stage[data-status="captured"] .stream-stage-dot { background: #7ac8ff; }
  .stream-stage[data-status="failed"] .stream-stage-dot { background: #ff8e99; }
  .stream-stage[data-status="bypassed"] { border-style: dashed; }
  .stream-chain-detail { margin: 10px 0 0; font-size: 11px; line-height: 1.6; color: #9cacbf; }
  .stream-row-age { display: block; color: #eabd71; margin-top: 4px; font-size: 10px; }
  @keyframes stream-status-pulse { 50% { box-shadow: 0 0 0 4px #b7f00025; } }
  @media (prefers-reduced-motion: reduce) { .stream-stage-dot { animation: none !important; } }
  .stream-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin: 22px 0; align-items: start; }
  .stream-chart { min-width: 0; margin: 0; padding: 16px; background: #181e29; border: 1px solid #303a4d; border-radius: 12px; }
  .stream-chart figcaption { color: #bac6d8; font-size: 12px; line-height: 1.4; }
  .stream-chart-value { display: block; margin: 9px 0 0; font: 500 26px/1.3 ui-monospace, monospace; }
  .stream-chart svg { display: block; width: 100%; height: 70px; margin-top: 8px; }
  .stream-chart:has(.stream-chart-details[open]) svg { height: auto; }
  .stream-chart-grid { stroke: #364256; stroke-width: 1; }
  .stream-chart-tick { display: none; fill: #b3c1d5; font: 13px ui-monospace, monospace; }
  .stream-chart-axis { display: none; fill: #dce5f2; font: 12px system-ui, sans-serif; }
  .stream-chart:has(.stream-chart-details[open]) :is(.stream-chart-tick, .stream-chart-axis) { display: initial; }
  .stream-chart-details { margin-top: 7px; color: #aebed3; font-size: 11px; line-height: 1.5; }
  .stream-chart-details summary { cursor: pointer; }
  .stream-chart-details[open] > summary { margin-bottom: 10px; }
  .stream-chart-legend { display: grid; gap: 9px; margin: 0; padding: 10px 0 0; list-style: none; border-top: 1px solid #303a4d; }
  .stream-chart-legend li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 3px 7px; margin: 0; padding: 0; border: 0; background: none; font-size: 11px; line-height: 1.5; }
  .stream-chart-key { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; }
  .stream-chart-series { grid-column: 2 / 4; overflow-wrap: anywhere; color: #c5d3e7; }
  .stream-chart-legend strong { grid-column: 2; color: #f1f5fc; font-variant-numeric: tabular-nums; }
  .stream-chart-legend time { grid-column: 3; color: #9cacbf; font-variant-numeric: tabular-nums; }
  .stream-chart-window { margin-top: 10px; color: #aebed3; font-size: 11px; line-height: 1.5; }
  .stream-chart-window summary { cursor: pointer; }
  .stream-chart .hint { margin-bottom: 0; font-size: 11px; }
  .stream-notice { border-left: 3px solid #eabd71; background: #322b20; color: #ecd7b4; padding: 12px 16px; border-radius: 5px; }
  .stream-table-wrap { overflow: auto; margin-bottom: 22px; }
  .stream-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .stream-table th { color: #9cacbf; font-weight: 500; text-align: left; white-space: nowrap; }
  .stream-table :is(th,td) { padding: 10px; border-bottom: 1px solid #303748; }
  .stream-table td { font-variant-numeric: tabular-nums; min-width: 100px; }
  .stream-control { padding: 18px; margin: 20px 0; border: 1px solid #61752a; background: #21271b; border-radius: 10px; }
  .stream-control .head { flex-wrap: wrap; }
  .stream-events { max-height: 260px; overflow: auto; margin: 0 0 22px; padding: 0; list-style: none; }
  .stream-events li { font-size: 12px; border: 0; border-radius: 0; border-bottom: 1px solid #303748; flex-wrap: wrap; }
  .stream-events time { color: #aab8cd; min-width: 90px; font-variant-numeric: tabular-nums; }
  .stream-evidence { margin: 8px 0; border: 1px solid #303748; border-radius: 8px; padding: 12px; }
  .stream-evidence summary { cursor: pointer; color: #cbd6e8; font-size: 13px; }
  .stream-evidence pre { max-height: 350px; overflow: auto; padding: 12px; background: #0e1119; font-size: 11px; }
  @media(max-width: 600px) { #stream-debug { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 12px; } #stream-debug > header { top: -12px; } #recording-list > li { flex-wrap: wrap; } #recording-list .recording-detail { flex-basis: 100%; } .stream-debug-toolbar > .grow { flex-basis: 100%; } }

  body.reviewing-experiences main { max-width: 76rem; }
  .experience-layout { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .experience-queue { display: grid; gap: 0.65rem; }
  .experience-queue > .hint { margin: 0; }
  #experience-list li { padding: 0; overflow: hidden; }
  .experience-queue-item { display: grid; gap: 0.35rem; width: 100%; text-align: left; border-radius: 7px; background: #1a1c26; color: #e9e9ee; font-weight: 400; padding: 0.8rem; }
  .experience-queue-item strong { overflow-wrap: anywhere; }
  .experience-queue-item[aria-pressed="true"] { box-shadow: inset 3px 0 #b7f000; background: #252735; }
  .experience-queue-item:hover { background: #2c2e3c; }
  .experience-detail { min-width: 0; padding: 1.15rem; border: 1px solid #2c2e3c; border-radius: 10px; background: #161820; }
  .experience-detail .head { flex-wrap: wrap; }
  .experience-detail h3 { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
  .experience-detail h4 { margin: 1.3rem 0 0.65rem; }
  .experience-description { white-space: pre-wrap; overflow-wrap: anywhere; color: #b5b6c4; }
  .experience-badge { display: inline-block; padding: 0.15rem 0.5rem; background: #2c2e3c; color: #c6c8d3; border-radius: 5px; font-size: 0.75rem; font-weight: 500; }
  .experience-badge.approved { color: #c9ec77; background: #23301c; }
  .experience-badge.submitted, .experience-badge.changes_requested { color: #f1d096; background: #342b1c; }
  .experience-badge.rejected, .experience-badge.disabled { color: #ffb4b4; background: #3a1c20; }
  .experience-metadata { display: grid; gap: 0.6rem; margin: 1rem 0; font-size: 0.8rem; }
  .experience-metadata > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.65rem; }
  .experience-metadata dt { color: #9a9aa8; }
  .experience-metadata dd { margin: 0; overflow-wrap: anywhere; }
  .experience-checks { margin-top: 0.65rem; }
  .experience-checks li { display: block; padding: 0.5rem; font-size: 0.8rem; overflow-wrap: anywhere; }
  .experience-warning { color: #f1d096; }
  .experience-source { padding: 0.65rem 0.8rem; border: 1px solid #2c2e3c; border-radius: 6px; }
  .experience-source summary { color: #c6c8d3; }
  .experience-source pre { max-height: 24rem; overflow: auto; padding: 0.65rem; background: #12131a; font-size: 0.75rem; }
  .experience-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .experience-previews iframe { width: 100%; height: 28rem; box-sizing: border-box; border: 1px solid #3c4052; border-radius: 8px; background: white; }
  #experience-review-note { width: 100%; box-sizing: border-box; resize: vertical; padding: 0.65rem; color: #e9e9ee; background: #1a1c26; border: 1px solid #3c4052; border-radius: 6px; font: inherit; }
  #experience-review-note:focus-visible { outline: 2px solid #b7f000; outline-offset: 3px; }
  .experience-decisions { margin-top: 0.75rem; }
  .experience-history li { display: grid; gap: 0.25rem; font-size: 0.8rem; overflow-wrap: anywhere; }
  .experience-history p { margin: 0; white-space: pre-wrap; }
  .experience-empty { padding: 1rem; color: #b5b6c4; }
  @media (max-width: 58rem) { .experience-layout { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 40rem) { .experience-previews { grid-template-columns: minmax(0, 1fr); } .experience-metadata > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }
  .maintenance-fields { display: grid; gap: 0.6rem; }
  .maintenance-state { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid #2c2e3c; }
  .maintenance-state.running, .maintenance-state.queued { color: #b7f000; }
  .maintenance-state.failed { color: #ffb4b4; }
  .maintenance-result pre { max-height: 24rem; overflow: auto; padding: 0.65rem; background: #0e1119; font-size: 0.75rem; }