/* NEXAVERSE — the Games manager, and the artwork it puts on player surfaces.
   Built on the tokens in nexaverse.css; nothing here introduces a new colour
   system. */

/* ═══ player surfaces: operator artwork ═══════════════════════════════════ */

.card-art-img, .hero-art-img, .game-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-art[data-has-art] .card-art-mark { display: none; }
.card-art[data-has-art] .card-art-glow { opacity: .28; }
.card-flag, .card-badge {
  position: absolute; top: 9px; left: 9px; font-size: .58rem; letter-spacing: .12em; font-weight: 700;
  background: rgba(11,11,14,.78); border: 1px solid rgba(255,255,255,.16);
  padding: 2px 7px; border-radius: 4px; color: var(--gold); backdrop-filter: blur(4px); z-index: 1;
}
.card-badge { top: auto; bottom: 9px; left: 9px; color: var(--ice); text-transform: uppercase; }
.hero-art-img { opacity: .62; mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.hero[data-has-art] .hero-art { background: var(--void); }
.game-hero-art { position: relative; overflow: hidden; }
.game-hero[data-has-art] .game-hero-art span { display: none; }
.game-howto { color: var(--text-2); margin: 0 0 14px; white-space: pre-line; }
.game-sub { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 16px 0 8px; }
.game-rules { margin: 0; padding-left: 18px; color: var(--text-2); }
.game-rules li { margin: 4px 0; }
.game-extra-rewards { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: .84rem; color: var(--text-2); }
.portal-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); margin-bottom: 10px; display: block; }

/* ═══ Games manager: frame ════════════════════════════════════════════════ */

.gc-subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 var(--gap); }
.gc-subnav a {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2);
  font-size: .82rem; font-weight: 600; background: var(--surface);
}
.gc-subnav a:hover { color: var(--text); border-color: #33333F; }
.gc-subnav a.is-on { color: var(--lavender); border-color: var(--lavender); background: rgba(200,180,228,.1); }
.gc-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gc-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }
.gc-dash .gc-span { grid-column: 1 / -1; }
.gc-empty { padding: 26px; text-align: center; color: var(--text-3); border: 1px dashed var(--line); border-radius: var(--r); }
.gc-note { display: block; color: var(--warn); font-style: normal; font-size: .76rem; margin-top: 3px; }
.gc-bad { color: var(--danger); }
.gc-warnc { color: var(--warn); margin-left: 10px; }

/* thumbnails */
.gc-thumb {
  position: relative; width: 96px; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; flex: none;
  background: linear-gradient(140deg, var(--c1), var(--void) 78%); border: 1px solid var(--line);
  display: grid; place-items: center; font-weight: 700; font-size: 1.2rem;
  color: color-mix(in srgb, var(--c2) 82%, #FFF);
}
.gc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-thumb-lg { width: 168px; font-size: 2rem; }
.gc-thumb-missing::after {
  content: 'NO ART'; position: absolute; bottom: 4px; right: 4px; font-size: .5rem; letter-spacing: .1em;
  background: rgba(11,11,14,.8); color: var(--warn); padding: 1px 5px; border-radius: 3px;
}

/* game rows */
.gc-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.gc-toolbar .hub-search { flex: 1; min-width: 220px; max-width: 420px; margin: 0; }
.gc-games { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.gc-game-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); transition: var(--fast);
}
.gc-game-row:hover { border-color: #33333F; }
.gc-game-row.is-off { opacity: .72; }
.gc-game-row.is-dragging { opacity: .4; }
.gc-game-row.is-over { border-color: var(--lavender); }
.gc-game-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; }
.gc-game-main b { font-size: .98rem; }
.gc-game-sub { color: var(--text-3); font-size: .78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56ch; }
.gc-flags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.gc-row-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.gc-order-tools { display: flex; gap: 4px; }

/* switches (checkbox-backed, fully keyboard accessible) */
.gc-switch { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 10px 0; cursor: pointer; }
.gc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gc-switch-ui {
  grid-row: 1 / 3; width: 42px; height: 24px; border-radius: 999px; background: #2a2a34; border: 1px solid #3a3a46;
  position: relative; transition: var(--fast); margin-top: 1px;
}
.gc-switch-ui::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #8a8a98; transition: var(--fast);
}
.gc-switch input:checked + .gc-switch-ui { background: rgba(143,224,168,.25); border-color: var(--good); }
.gc-switch input:checked + .gc-switch-ui::after { left: 20px; background: var(--good); }
.gc-switch input:focus-visible + .gc-switch-ui { outline: 2px solid var(--lavender); outline-offset: 2px; }
.gc-switch-text b { display: block; font-size: .9rem; }
.gc-switch-text em { display: block; font-style: normal; color: var(--text-3); font-size: .8rem; margin-top: 2px; }
.gc-switch.is-disabled { cursor: not-allowed; opacity: .55; }
.gc-switch-inline { padding: 0; gap: 8px; align-items: center; grid-template-columns: auto auto; }
.gc-switch-inline .gc-switch-ui { grid-row: auto; }
.gc-switch-inline span:last-child { font-size: .78rem; color: var(--text-2); }

/* fields */
.gc-field { margin-bottom: 6px; }
.gc-fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.gc-count { float: right; font-weight: 500; color: var(--text-3); }
.gc-count.is-over { color: var(--danger); }
.gc-num { max-width: 200px; }
.gc-color-row { display: inline-flex; align-items: center; gap: 10px; }
.gc-color { width: 48px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.gc-tags {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--black); min-height: 40px; align-items: center;
}
.gc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: 999px; background: rgba(200,180,228,.12); color: var(--lavender); font-size: .8rem; }
.gc-tag button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.gc-tag-input { flex: 1; min-width: 140px; border: 0; background: none; color: var(--text); outline: none; padding: 4px; }

/* row lists */
.gc-rowlist { margin: 6px 0 14px; }
.gc-rows { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.gc-row { display: flex; gap: 8px; align-items: center; }
.gc-row-cells { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.gc-row-head { display: flex; gap: 8px; font-size: .72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.gc-row-head span { flex: 1; }
.gc-row-head span:last-child { flex: 0 0 96px; }
.gc-row-tools { display: flex; gap: 3px; flex: none; }
.gc-mini { width: 28px; height: 28px; font-size: .9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.gc-mini:disabled { opacity: .35; }
.gc-danger:hover:not(:disabled) { color: var(--danger); border-color: rgba(240,122,122,.4); }
.gc-row-empty { color: var(--text-3); font-size: .84rem; padding: 6px 0; list-style: none; }

/* ═══ editor ══════════════════════════════════════════════════════════════ */

.gc-editor-head {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c1) 60%, var(--surface)), var(--surface) 60%);
}
.gc-editor-title { flex: 1; min-width: 220px; }
.gc-editor-title h1 { font-size: 1.6rem; margin: 0; }
.gc-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gc-savebar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--text-2);
  padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px;
}
.gc-savebar.is-dirty { border-color: rgba(233,185,107,.35); }
.gc-savebar.is-conflict { border-color: rgba(240,122,122,.45); color: var(--danger); }
.gc-savebar .gc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.gc-savebar.is-dirty .gc-dot { background: var(--warn); }
.gc-savebar.is-conflict .gc-dot { background: var(--danger); }
.gc-savebar .gc-spacer { flex: 1; }
.gc-changes { color: var(--text-3); }
.gc-checks { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-bottom: 12px; padding: 10px 14px; }
.gc-checks summary { cursor: pointer; font-size: .86rem; }
.gc-checks ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.gc-checks li { font-size: .84rem; display: flex; gap: 8px; align-items: baseline; }
.gc-checks li.is-bad { color: #FFBCBC; }
.gc-checks li.is-warn { color: var(--text-2); }
.gc-checks li button { flex: none; font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.gc-issue-box { margin-bottom: 10px; }
.gc-tabs button { position: relative; }
.gc-tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 6px; vertical-align: middle; }
.gc-tab-body { display: grid; gap: var(--gap); }
.gc-2col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .gc-2col { grid-template-columns: 1fr; } }
.gc-cap-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gc-cap-table td { padding: 7px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.gc-cap-table td:first-child { color: var(--text-2); width: 40%; }
.gc-yes { color: var(--good); font-weight: 600; }
.gc-no { color: var(--text-3); }
.gc-reason { display: block; color: var(--text-3); font-size: .76rem; margin-top: 3px; }

/* media */
.gc-media-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gc-media-slot { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: var(--surface-2); display: grid; gap: 8px; }
.gc-media-preview {
  position: relative; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--c1), var(--void) 78%); color: var(--text-3); font-size: .78rem;
}
.gc-media-preview.is-banner { aspect-ratio: 21 / 9; }
.gc-media-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-media-slot .field-hint { margin: 0; }
.gc-media-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.gc-file { position: relative; overflow: hidden; }
.gc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gc-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gc-lib-item { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); font-size: .74rem; }
.gc-lib-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.gc-lib-item div { padding: 6px 8px; display: grid; gap: 3px; color: var(--text-3); }
.gc-lib-item button { justify-self: start; }
.gc-lib-pick { cursor: pointer; border: 2px solid transparent; }
.gc-lib-pick:hover { border-color: var(--lavender); }
.gc-preview-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.gc-card-preview { width: 240px; pointer-events: none; }
.gc-sign {
  width: 260px; padding: 14px; border-radius: 10px; text-align: center; background: #0a0a12;
  border: 1px solid color-mix(in srgb, var(--c2) 60%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--c2) 35%, transparent);
}
.gc-sign b { display: block; font-size: 1.1rem; letter-spacing: .08em; color: color-mix(in srgb, var(--c2) 70%, #FFF); }
.gc-sign span { display: block; font-size: .66rem; letter-spacing: .14em; color: var(--text-3); margin-top: 4px; }
.gc-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gc-pad { border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; font-size: .78rem; background: var(--surface-2); }
.gc-pad b { display: block; font-size: .7rem; letter-spacing: .12em; color: var(--text-3); margin-bottom: 4px; }
.gc-pad.is-this { border-color: var(--lavender); box-shadow: var(--glow); }
.gc-pad.is-empty { color: var(--text-3); border-style: dashed; }

/* rewards */
.gc-ach-table { display: grid; gap: 8px; }
.gc-ach-row { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(5, minmax(88px, 1fr)) 90px; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line-soft); border-radius: 8px; }
.gc-ach-row.is-head { border: 0; padding: 0 10px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.gc-ach-row .field { width: 100%; }
.gc-ach-name b { display: block; }
.gc-ach-name small { color: var(--text-3); display: block; font-size: .74rem; }
@media (max-width: 1100px) {
  .gc-ach-row { grid-template-columns: 1fr 1fr; }
  .gc-ach-row.is-head { display: none; }
  .gc-ach-name { grid-column: 1 / -1; }
}
.gc-rw-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gc-rw-table th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 6px; }
.gc-rw-table td { padding: 8px 6px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.gc-scroll { overflow-x: auto; }

/* history */
.gc-versions { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gc-version { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--surface); }
.gc-version.is-live { border-color: rgba(143,224,168,.4); }
.gc-version header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gc-version ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: .84rem; }
.gc-version .gc-spacer { flex: 1; }

/* artwork page */
.gc-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gc-art-card { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); color: inherit; }
.gc-art-card .gc-thumb { width: 100%; border: 0; border-radius: 0; font-size: 2.4rem; }
.gc-art-card div.gc-art-meta { padding: 10px 12px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .86rem; }

/* ═══ stage editor ════════════════════════════════════════════════════════ */

.se { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 960px) { .se { grid-template-columns: 1fr; } }
.se-list { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow: auto; }
.se-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.se-list-head b span { color: var(--text-3); font-weight: 500; font-size: .78rem; }
.se-stages { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.se-stage { display: flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; }
.se-stage.is-selected { background: rgba(200,180,228,.1); border-color: rgba(200,180,228,.4); }
.se-stage.is-off .se-name { color: var(--text-3); text-decoration: line-through; }
.se-stage.is-dragging { opacity: .35; }
.se-stage.is-over { border-color: var(--lavender); }
.se-grip { cursor: grab; color: var(--text-3); font-size: .7rem; letter-spacing: -2px; padding: 0 2px; user-select: none; }
.se-stage-main { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; color: inherit; text-align: left; padding: 6px 2px; cursor: pointer; }
.se-num { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); display: grid; place-items: center; font-size: .72rem; color: var(--text-2); flex: none; }
.se-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.se-flag { width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #1a0b0b; font-size: .66rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.se-off { font-size: .58rem; letter-spacing: .1em; color: var(--warn); border: 1px solid rgba(233,185,107,.4); padding: 1px 4px; border-radius: 3px; }
.se-stage-tools { display: flex; gap: 2px; opacity: .6; }
.se-stage:hover .se-stage-tools, .se-stage.is-selected .se-stage-tools { opacity: 1; }
.se-stage-tools .gc-mini { width: 24px; height: 24px; }
.se-main { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 16px; min-width: 0; }
.se-main-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.se-main-head h3 { margin: 2px 0 0; font-size: 1.25rem; }
.se-crumb { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.se-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.se-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; margin-bottom: 14px; }
.se-sub { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 12px 0 6px; }

.se-palette { display: grid; gap: 10px; align-content: start; }
.se-pal-group h4 { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 5px; }
.se-pal-items { display: flex; flex-wrap: wrap; gap: 5px; }
.se-pal {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: .78rem; cursor: pointer;
}
.se-pal:hover { color: var(--text); border-color: #3a3a48; }
.se-pal.is-on { border-color: var(--lavender); color: var(--text); background: rgba(200,180,228,.12); }
.se-pal i, .se-el-pick i, .se-insp-head i, .se-seq-items i {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-weight: 700;
  font-size: .72rem; background: color-mix(in srgb, var(--sw) 70%, #000); color: #fff; flex: none;
  border: 1px solid color-mix(in srgb, var(--sw) 80%, #fff);
}
.se-pal b { font-size: .7rem; color: var(--text-3); font-weight: 600; }

.se-tiles-wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .se-tiles-wrap { grid-template-columns: 1fr; } }
.se-tiles {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; padding: 8px; border-radius: 10px;
  background: #07070b; border: 1px solid var(--line); touch-action: none; user-select: none; max-width: 820px;
}
.se-tile {
  aspect-ratio: 1; border-radius: 3px; display: grid; place-items: center; font-weight: 700; font-size: .78rem; cursor: crosshair;
  background: color-mix(in srgb, var(--sw) 72%, #000); color: #fff; text-shadow: 0 1px 2px #000;
}
.se-tile.is-fill { background: #16121f; color: transparent; }
.se-tile:hover { outline: 2px solid var(--lavender); outline-offset: -1px; }

.se-canvas-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
@media (max-width: 1200px) { .se-canvas-wrap { grid-template-columns: 1fr; } }
.se-canvas { width: 100%; max-height: 62vh; background: #07070b; border: 1px solid var(--line); border-radius: 10px; touch-action: none; user-select: none; }
.se-canvas.is-placing { cursor: crosshair; }
.se-bounds { fill: #0e0c16; stroke: #2e2a40; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.se-grid line { stroke: rgba(255,255,255,.05); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.se-el, .se-fixed-el { cursor: grab; }
.se-el circle, .se-el rect, .se-el path, .se-fixed-el circle, .se-fixed-el rect, .se-fixed-el path {
  fill: color-mix(in srgb, var(--sw) 45%, transparent); stroke: var(--sw); stroke-width: 1.6px; vector-effect: non-scaling-stroke;
}
.se-fixed-el { cursor: default; opacity: .6; }
.se-fixed-el circle, .se-fixed-el rect, .se-fixed-el path { stroke-dasharray: 4 3; }
.se-el.is-sel circle, .se-el.is-sel rect, .se-el.is-sel path { stroke: #fff; stroke-width: 2.4px; fill: color-mix(in srgb, var(--sw) 65%, transparent); }
.se-el .se-handle { fill: #fff; stroke: #000; cursor: nwse-resize; }
.se-inspector { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 12px; min-width: 0; }
.se-insp-head { display: flex; align-items: center; gap: 8px; }
.se-insp-actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 6px; }
.se-el-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; max-height: 280px; overflow: auto; }
.se-el-pick { display: flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--text-2); font-size: .8rem; cursor: pointer; padding: 3px 0; }
.se-el-pick:hover { color: var(--text); }

.se-seq { display: grid; gap: 14px; }
.se-seq-views { border: 1px solid var(--line); border-radius: 10px; background: #07070b; padding: 10px; }
.se-seq-label { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 4px 0; }
.se-seq-svg { width: 100%; height: 70px; display: block; }
.se-seq-svg.is-top { height: 90px; }
.se-seq-block { fill: color-mix(in srgb, var(--sw) 60%, transparent); stroke: var(--sw); stroke-width: 1.2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.se-seq-block.is-sel { fill: color-mix(in srgb, var(--sw) 90%, #fff); stroke: #fff; stroke-width: 2px; }
.se-seq-mark { fill: var(--sw); stroke: #000; stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; }
.se-seq-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .se-seq-body { grid-template-columns: 1fr; } }
.se-seq-items { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 3px; max-height: 360px; overflow: auto; }
.se-seq-items li button { width: 100%; display: grid; grid-template-columns: 22px auto 1fr; gap: 8px; align-items: center; text-align: left; background: var(--surface-2); border: 1px solid transparent; border-radius: 7px; padding: 5px 8px; color: var(--text-2); cursor: pointer; font-size: .8rem; }
.se-seq-items li.is-sel button { border-color: var(--lavender); color: var(--text); }
.se-seq-items small { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.se-seq-add { margin: 6px 0 12px; }