@layer pages {
  .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
  .summary-card { position: relative; min-width: 0; min-height: 134px; padding: var(--space-5); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface)); }
  .summary-card::after { content: ""; position: absolute; inset: auto -32px -48px auto; width: 108px; height: 108px; border: 1px solid rgb(102 217 239 / 0.12); border-radius: 50%; }
  .summary-card span, .summary-card small { display: block; color: var(--color-text-muted); font-size: 0.75rem; }
  .summary-card strong { display: block; margin: 10px 0 7px; color: var(--color-text); font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight: 720; letter-spacing: -0.045em; }
  .status-definitions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: var(--space-6); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-deep); }
  .status-definitions div { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--color-border); }
  .status-definitions div:last-child { border-right: 0; }
  .status-definitions strong, .status-definitions span { display: block; }
  .status-definitions strong { color: var(--color-text); font-size: 0.7rem; }
  .status-definitions span { margin-top: 3px; color: var(--color-text-faint); font-size: 0.67rem; line-height: 1.4; }

  .facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .fact { min-width: 0; padding: 13px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgb(7 11 17 / 0.58); }
  .fact > span:first-child { display: block; color: var(--color-text-faint); font: 690 0.62rem/1.3 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
  .fact > strong, .fact > .state-badge { display: block; max-width: 100%; margin-top: 7px; overflow: hidden; color: var(--color-text); text-overflow: ellipsis; white-space: nowrap; }
  .fact > .state-badge { display: inline-flex; }

  .compact-list { display: grid; gap: var(--space-2); }
  .capacity-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgb(7 11 17 / 0.46); }
  .capacity-row strong, .capacity-row small { display: block; }
  .capacity-row small { margin-top: 3px; color: var(--color-text-muted); }
  .capacity-numbers { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); color: var(--color-text-muted); font-size: 0.75rem; }

  .legend { display: flex; flex-wrap: wrap; align-items: center; color: var(--color-text-muted); font-size: 0.72rem; }
  .legend-dot { display: inline-block; width: 7px; height: 7px; margin: 0 5px 0 12px; border-radius: 50%; }
  .legend-dot.healthy { background: var(--color-success); }
  .legend-dot.warning { background: var(--color-warning); }
  .legend-dot.danger { background: var(--color-danger); }

  .detail-card { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); border-color: var(--color-border-strong); }
  .settings-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)) auto; gap: var(--space-3); align-items: end; }
  .settings-row { display: flex; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
  .settings-row label { width: 210px; flex: 0 0 auto; }
  .settings-row > span { color: var(--color-text-muted); font-size: 0.76rem; }

  .resource-stack { min-width: 140px; }
  .resource-meter { margin: 5px 0; }
  .meter-label { display: flex; justify-content: space-between; color: var(--color-text-muted); font-size: 0.66rem; }
  .meter-label strong { font-weight: 520; }
  .meter-track { display: block; height: 4px; margin-top: 3px; overflow: hidden; border-radius: 999px; background: #273448; }
  .meter-track i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }

  .port-summary { display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-6) 0 var(--space-3); color: var(--color-text-muted); font-size: 0.75rem; }
  .port-summary strong { color: var(--color-text); }
  .port-chip { display: inline-block; width: 9px; height: 9px; min-height: 0; margin: 0 3px 0 10px; padding: 0; border: 0; }
  .port-chip.free, .port-entry.free { border-color: #2d7757; background: var(--color-success-bg); color: var(--color-success); }
  .port-chip.used, .port-entry.used { border-color: #88424b; background: var(--color-danger-bg); color: var(--color-danger); }
  .port-chip.retired, .port-entry.retired { border-color: #526176; background: #202b3a; color: var(--color-text-muted); }
  .port-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; }
  .port-entry { min-height: 34px; padding: 7px 5px; font: 0.7rem/1 var(--font-mono); }

  .hash-cell { font: 0.68rem/1.45 var(--font-mono); overflow-wrap: anywhere; white-space: normal; }
  .digest-stack { display: grid; gap: 7px; min-width: 225px; max-width: 420px; white-space: normal; }
  .digest-stack span { display: block; color: var(--color-text-muted); font-size: 0.68rem; }
  .source-file-list { max-height: 240px; margin: var(--space-2) 0; padding-left: var(--space-5); overflow: auto; }
  .source-file-list li { margin: 5px 0; color: #ced8e5; }

  .file-browser { max-height: 360px; margin-top: var(--space-4); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-deep); }
  .file-browser-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 6px 11px; border-bottom: 1px solid var(--color-border); }
  .file-browser-row:last-child { border-bottom: 0; }
  .file-browser-row input { flex: 0 0 auto; accent-color: var(--color-accent-strong); }
  .file-browser-row button { flex: 1; justify-content: flex-start; min-height: 34px; border-color: transparent; background: transparent; text-align: left; }
  .file-browser-row span { flex: 1; overflow-wrap: anywhere; }
  .file-browser-row small { color: var(--color-text-muted); }
  .game-log-output { max-height: 440px; min-height: 96px; overflow: auto; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #05080d; color: #d7e0ea; font: 0.75rem/1.55 var(--font-mono); overflow-wrap: anywhere; white-space: pre-wrap; }

  .update-flow { display: grid; gap: var(--space-4); }
  .update-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-4); margin: 0; }
  .step-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(226 44 44 / .68); border-radius: 50%; background: rgb(150 12 12 / .22); color: #fff; font: 800 .82rem/1 var(--font-mono); }
  .update-step h2 { margin-top: 4px; }
  .update-picker { grid-template-columns: repeat(3,minmax(180px,1fr)); }
  .detected-build { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; margin-top: var(--space-4); padding: 12px 14px; border-left: 3px solid var(--color-success); background: rgb(31 157 93 / .08); }
  .detected-build span,.detected-build small { color: var(--color-text-muted); }
  .detected-build strong { color: var(--color-success); }
  .detected-build small { grid-column: 1 / -1; }
  .manager-details { margin: var(--space-4) 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgb(10 15 23 / .55); }
  .manager-details > summary,.editor-advanced > summary { padding: 15px 18px; color: var(--color-text); font-weight: 680; cursor: pointer; }
  .manager-details > summary:hover,.editor-advanced > summary:hover { color: var(--color-accent); }
  .details-content { padding: 0 var(--space-4) var(--space-2); border-top: 1px solid var(--color-border); }
  .editor-advanced { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .editor-advanced .editor-section { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; }

  .playlist-workbench { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr); gap: var(--space-4); align-items: start; }
  .playlist-editor { min-width: 0; }
  .playlist-review-stack { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
  .editor-review { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: linear-gradient(120deg, rgb(102 217 239 / 0.08), rgb(7 11 17 / 0.5)); }
  .editor-review strong, .editor-review span { display: block; }
  .editor-review span { margin-top: 4px; color: var(--color-text-muted); font-size: 0.72rem; }
  .map-picker-toolbar { display: grid; grid-template-columns: minmax(180px,1fr) minmax(150px,.7fr) auto auto; gap: 10px; align-items: end; margin-bottom: 12px; }
  .map-picker-toolbar label { min-width: 0; }
  .map-selected-filter { display: flex; align-items: center; gap: 7px; min-height: 42px; color: var(--color-text-muted); }
  .map-selected-filter input { width: auto; }
  .map-picker-count { align-self: center; color: var(--color-text-faint); font: .68rem/1.3 var(--font-mono); white-space: nowrap; }
  .map-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 10px; max-height: 500px; overflow: auto; }
  .manager-card button.map-card { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 10px; align-items: center; min-height: 70px; padding: 5px; border: 1px solid var(--color-border); background: #090d13; text-align: left; }
  .manager-card button.map-card:hover { border-color: #92534b; }
  .manager-card button.map-card.selected { border-color: #e2382e; box-shadow: inset 3px 0 #e2382e; background: #1a0c0d; }
  .map-card-visual { position: relative; display: grid; place-items: center; width: 86px; aspect-ratio: 3/2; overflow: hidden; background: linear-gradient(145deg,#261214,#090b10); color: var(--color-text-faint); }
  .map-card-visual img { width: 100%; height: 100%; object-fit: cover; }
  .map-card-index { position: absolute; top: 4px; left: 4px; min-width: 20px; padding: 3px 5px; background: rgb(0 0 0 / .82); color: #fff; font: 800 .62rem/1 var(--font-mono); text-align: center; }
  .map-card-copy { min-width: 0; }
  .map-card-copy strong,.map-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
  .map-card-copy small { margin-top: 5px; color: var(--color-text-faint); font: .62rem/1.2 var(--font-mono); }
  .playlist-table-maps { display: flex; flex-wrap: wrap; gap: 5px; min-width: 240px; }
  .mini-map-chip { display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid var(--color-border); background: #0a0f16; }
  .mini-map-chip img { width: 40px; height: 25px; object-fit: cover; }
  .mini-map-chip span { font-size: .66rem; }
  .playlist-player-preview { min-height: 330px; overflow: hidden; border: 1px solid #6e2624; border-radius: var(--radius-md); background: #090606; }
  .game-preview-frame { min-height: 330px; padding: 15px; background: radial-gradient(circle at 60% 40%,rgb(120 8 8 / .3),transparent 55%),linear-gradient(130deg,#150505,#060708); color:#fff; }
  .game-preview-header { padding-bottom: 10px; border-bottom: 1px solid rgb(255 255 255 / .14); }
  .game-preview-header strong,.game-preview-header span { display:block; }
  .game-preview-header strong { font-size: 1.1rem; letter-spacing: .04em; }
  .game-preview-header span { margin-top: 3px; color:#b8b7b2; font-size:.72rem; }
  .game-preview-body { display:grid; grid-template-columns: minmax(130px,.8fr) minmax(180px,1.2fr); gap:12px; padding:10px 0; }
  .game-preview-list,.game-preview-detail { padding:8px; background:rgb(0 0 0 / .58); border:1px solid rgb(255 255 255 / .10); }
  .game-preview-label { color:#aaa; font:.62rem/1 var(--font-mono); }
  .game-preview-row { display:grid; gap:3px; margin-top:8px; padding:10px; border-left:4px solid #ef3226; background:rgb(90 6 6 / .5); }
  .game-preview-row small { color:#bbb; }
  .game-preview-art { display:grid; place-items:center; aspect-ratio:3/1.35; overflow:hidden; background:#130708; color:#777; font:.62rem var(--font-mono); }
  .game-preview-art img { width:100%; height:100%; object-fit:cover; }
  .game-preview-detail h3 { margin:10px 0 5px; font-size:1rem; text-transform:uppercase; }
  .game-preview-detail p { min-height:30px; margin:0 0 8px; color:#c2c0bb; font-size:.7rem; }
  .game-preview-settings { display:block; color:#e5c24a; font-size:.65rem; }
  .game-preview-detail > span { display:block; margin-top:4px; color:#bbb; font-size:.62rem; }
  .game-preview-rotation { display:flex; gap:5px; margin-top:8px; overflow:auto; }
  .game-preview-rotation > span { flex:0 0 78px; }
  .game-preview-rotation img { display:block; width:78px; height:48px; object-fit:cover; }
  .game-preview-rotation small { display:block; margin-top:3px; color:#c8c6c0; font-size:.56rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .game-preview-footer { padding-top:7px; border-top:1px solid rgb(255 255 255 / .14); color:#ccc; font:.62rem/1 var(--font-mono); white-space:pre; }
  .playlist-preview-heading { padding: var(--space-5) var(--space-4) var(--space-3); border-bottom: 1px solid rgb(102 217 239 / 0.14); }
  .playlist-preview-heading h3 { margin: 5px 0 0; color: #f3f8fc; font-size: 1.25rem; letter-spacing: -0.02em; }
  .playlist-preview-description { min-height: 42px; color: var(--color-text-muted); line-height: 1.55; }
  .playlist-preview-meta, .playlist-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--space-3); }
  .playlist-chip { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 5px; background: #111b27; color: #cbd7e4; font: 0.66rem/1.2 var(--font-mono); }
  .playlist-chip.muted { color: var(--color-text-faint); }
  .playlist-diff { display: grid; gap: 8px; }
  .playlist-diff-row { display: grid; grid-template-columns: minmax(82px, 0.6fr) minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgb(7 11 17 / 0.48); font-size: 0.7rem; }
  .playlist-diff-row strong { color: var(--color-text); }
  .playlist-diff-before { color: var(--color-danger); text-decoration: line-through; overflow-wrap: anywhere; }
  .playlist-diff-after { color: var(--color-success); overflow-wrap: anywhere; }
  .playlist-diff-arrow { color: var(--color-text-faint); }
  .playability-cell { display: grid; gap: 5px; min-width: 190px; max-width: 310px; white-space: normal; }
  .playability-cell .state-badge { width: max-content; }
  .playability-cell small { color: var(--color-text-muted); line-height: 1.4; }

  @media (max-width: 1280px) {
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-definitions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .status-definitions div:nth-child(3) { border-right: 0; }
    .status-definitions div:nth-child(n+4) { border-top: 1px solid var(--color-border); }
    .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .playlist-workbench { grid-template-columns: 1fr; }
    .playlist-review-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  }
  @media (max-width: 760px) {
    .status-definitions { grid-template-columns: 1fr; }
    .status-definitions div { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .status-definitions div:nth-child(n+4) { border-top: 0; }
    .status-definitions div:last-child { border-bottom: 0; }
    .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-row { align-items: stretch; flex-direction: column; }
    .settings-row label { width: 100%; }
    .capacity-row { align-items: flex-start; flex-direction: column; }
    .capacity-numbers { justify-content: flex-start; }
    .playlist-review-stack { grid-template-columns: 1fr; }
    .editor-review { align-items: stretch; flex-direction: column; }
    .playlist-diff-row { grid-template-columns: 1fr; }
    .playlist-diff-arrow { transform: rotate(90deg); width: max-content; }
    .update-step { grid-template-columns: 1fr; }
    .update-picker,.game-preview-body { grid-template-columns: 1fr; }
    .map-picker-toolbar,.map-picker { grid-template-columns: 1fr; }
    .map-picker-count { white-space: normal; }
  }
  @media (max-width: 500px) {
    .summary-grid, .facts-grid, .settings-grid { grid-template-columns: 1fr; }
    .summary-card { min-height: 116px; }
  }
}
/* Only the side grip captures pointer movement; normal row actions remain clickable. */
.playlist-drag-handle {
  min-width: 38px; min-height: 42px; cursor: grab; touch-action: none;
  user-select: none; font-size: 26px; line-height: 1; border: 1px solid var(--color-border);
  border-radius: 8px; background: transparent; color: inherit;
}
.playlist-drag-handle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.playlist-reordering, .playlist-reordering .playlist-drag-handle { cursor: grabbing; user-select: none; }
.playlist-moving { opacity: .65; outline: 2px solid currentColor; outline-offset: -2px; }
#playlistOrderStatus { min-height: 1.5em; }

.manager-form .playlist-visibility { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.manager-form .playlist-visibility input { width: auto; }
.manager-form .playlist-visibility .field-error { flex-basis: 100%; }