.asset-matrix {
  overflow: visible;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
}
.asset-row {
  display: grid;
  grid-template-columns: 94px minmax(190px, 1fr) 140px 88px 72px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel-soft);
}
.asset-row:first-child { border-radius: 9px 9px 0 0; }
.asset-row:last-child { border-bottom: 0; border-radius: 0 0 9px 9px; }
.asset-row:only-child { border-radius: 9px; }
.asset-row.has-selection { background: linear-gradient(90deg, var(--accent-soft), transparent 24%), var(--panel-soft); }
.asset-name { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
a.asset-name { color: inherit; text-decoration: none; cursor: pointer; }
.asset-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.asset-row select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--panel-line);
  border-radius: 7px;
  background: var(--panel-raised);
  padding: 0 30px 0 9px;
  color: var(--text);
}
.asset-row select:disabled { opacity: 0.5; cursor: not-allowed; }
.bundle-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.bundle-toggle input { accent-color: var(--accent); }
.asset-toggle-stack {
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-content: center;
  justify-content: start;
  align-self: center;
  gap: 2px 10px;
}
.asset-toggle-stack .bundle-toggle { line-height: 1; font-size: 10.5px; }
/* Every collapsed asset row shares one exact height. */
.asset-row:not(.details-open) { height: 52px; }
.asset-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  margin-left: 15px;
  color: var(--text-faint);
  font-size: 11px;
}
.asset-row:not([data-category="tableFiles"]) .asset-status { align-self: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }
.asset-status.ready { color: var(--success); }
.asset-status.ready .status-dot { background: var(--success); }
.asset-status.bundled { color: var(--accent); }
.asset-status.bundled .status-dot { background: var(--accent); }
.asset-status.warning { color: var(--warning); }
.asset-status.warning .status-dot { background: var(--warning); }
.asset-status.required {
  color: var(--danger);
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.asset-status.required .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
.asset-info-button {
  justify-self: end;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--panel-line);
  border-radius: 7px;
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
}
.asset-info-button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
.asset-info-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}
.asset-thumbnail {
  position: relative;
  z-index: 2;
  display: inline-grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: visible;
}
.asset-thumbnail-frame {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--panel-line-strong);
  border-radius: 7px;
  background: var(--panel-raised);
}
.asset-thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.14s ease, filter 0.14s ease;
}
.asset-thumbnail-preview {
  position: absolute;
  z-index: 90;
  top: 100%;
  left: 50%;
  display: block;
  width: auto;
  min-width: 120px;
  max-width: 210px;
  max-height: 280px;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scale(0.96);
  transform-origin: top center;
  border: 2px solid var(--text);
  border-radius: 9px;
  background: #000;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}
.asset-thumbnail:hover,
.asset-thumbnail:focus-visible { z-index: 91; }
.asset-thumbnail:hover .asset-thumbnail-image,
.asset-thumbnail:focus-visible .asset-thumbnail-image {
  transform: scale(1.06);
  filter: brightness(1.08);
}
.asset-thumbnail:hover .asset-thumbnail-preview,
.asset-thumbnail:focus-visible .asset-thumbnail-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}
.asset-detail {
  grid-column: 2 / -1;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 14px;
  padding: 8px 10px 2px;
  border-top: 1px dashed var(--panel-line);
  color: var(--text-muted);
  font-size: 11.5px;
}
.asset-row.details-open .asset-detail { display: grid; }
.asset-detail strong { display: block; margin-bottom: 2px; color: var(--text-faint); font-size: 10px; text-transform: uppercase; }
.asset-comment { grid-column: 1 / -1; padding: 8px; border-radius: 7px; background: var(--panel-raised); }
.broken-option { color: var(--danger); }

.accordion-stack { display: grid; gap: 8px; }
.config-accordion {
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: var(--panel-soft);
}
.config-accordion[open] { border-color: var(--panel-line-strong); }
.config-accordion.disabled { opacity: 0.58; }
.config-accordion summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 7px 11px;
  cursor: pointer;
  list-style: none;
}
.config-accordion summary::-webkit-details-marker { display: none; }
.accordion-chevron {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--text-faint);
  transition: transform 0.16s ease;
}
.config-accordion[open] .accordion-chevron { transform: rotate(90deg); }
.accordion-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.accordion-title strong {
  flex: 0 0 auto;
  font-family: "Chakra Petch", sans-serif;
  font-size: 14px;
  white-space: nowrap;
}
.accordion-title small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accordion-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-raised);
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.accordion-state.ready { color: var(--success); background: var(--success-soft); }
.accordion-state.warning { color: var(--warning); background: var(--warning-soft); }
.accordion-state.disabled { color: var(--text-faint); }
.accordion-body { padding: 4px 12px 14px 45px; border-top: 1px solid var(--panel-line); }
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding-top: 12px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-placeholder-only { gap: 4px; }
.field-control-meta {
  display: flex;
  justify-content: flex-end;
  min-height: 18px;
}
.field-placeholder-only input::placeholder,
.field-placeholder-only textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}
.field-wide { grid-column: 1 / -1; }
.field > label, .field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
.field-hint { color: var(--text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input[type="text"], .field input[type="url"], .field textarea, .field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--panel-line);
  border-radius: 7px;
  background: var(--panel-raised);
  padding: 8px 9px;
  color: var(--text);
  font: 12.5px "JetBrains Mono", monospace;
}
.field textarea { min-height: 70px; resize: none; font-family: "Inter", sans-serif; }
.field input:disabled, .field textarea:disabled, .field select:disabled { opacity: 0.45; cursor: not-allowed; }
.readonly-id { min-height: 36px; padding: 8px 9px; border: 1px dashed var(--panel-line); border-radius: 7px; color: var(--text-faint); font: 12px "JetBrains Mono", monospace; }
.checkbox-row, .array-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--panel-line);
  border-radius: 7px;
  background: var(--panel-raised);
  color: var(--text-muted);
  font-size: 12px;
}
.checkbox-row input, .array-option input, .toggle-check input { accent-color: var(--accent); }
.array-options { display: flex; flex-wrap: wrap; gap: 7px; }
.array-option.checked { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.toggle-check { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.advanced-fields {
  grid-column: 1 / -1;
  margin-top: 3px;
  border-top: 1px dashed var(--panel-line);
}
.advanced-fields summary { min-height: 36px; padding: 7px 0; color: var(--text-faint); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.advanced-fields .field-grid { padding-top: 2px; }
.section-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.clear-section-btn { min-height: 30px; padding: 0 9px; border: 1px solid var(--panel-line); border-radius: 7px; background: transparent; color: var(--text-faint); font-size: 11px; }
.clear-section-btn:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 760px) {
  .asset-row { grid-template-columns: 72px minmax(0, 1fr) auto auto; }
  .asset-row:not(.details-open) { height: auto; }
  .asset-thumbnail-preview {
    right: 0;
    left: auto;
    max-width: min(210px, calc(100vw - 32px));
    transform: scale(0.96);
    transform-origin: top right;
  }
  .asset-thumbnail:hover .asset-thumbnail-preview,
  .asset-thumbnail:focus-visible .asset-thumbnail-preview {
    transform: scale(1);
  }
  .asset-select-wrap { grid-column: 2; }
  .asset-toggle-stack { grid-column: 2; }
  .asset-status { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .asset-info-button { grid-column: 4; grid-row: 1 / span 2; }
  .asset-detail { grid-column: 1 / -1; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .advanced-fields { grid-column: auto; }
  .accordion-body { padding-left: 12px; }
}

@media (max-width: 520px) {
  .asset-row { grid-template-columns: 1fr auto auto; }
  .asset-name { grid-column: 1; }
  .asset-select-wrap { grid-column: 1 / -1; grid-row: 2; }
  .asset-toggle-stack { grid-column: 1; grid-row: 3; }
  .asset-status { grid-column: 2; grid-row: 1; align-self: center; margin-top: 0; }
  .asset-info-button { grid-column: 3; grid-row: 1; }
  .config-accordion summary { grid-template-columns: 22px minmax(0, 1fr); }
  .accordion-state { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .asset-thumbnail-image,
  .asset-thumbnail-preview { transition: none; }
}

/* Compact tabbed configuration layout */
.configuration-tabs {
  min-width: 0;
}
.config-tab-list {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  overflow-x: auto;
  padding: 0 2px;
  scrollbar-width: thin;
}
.config-tab {
  flex: 1 0 auto;
  min-width: 82px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--panel-line);
  border-bottom-color: var(--panel-line-strong);
  border-radius: 8px 8px 0 0;
  background: var(--panel-soft);
  color: var(--text-muted);
  font-family: "Chakra Petch", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.config-tab:hover:not(:disabled) {
  background: var(--panel-raised);
  color: var(--text);
}
.config-tab.active {
  position: relative;
  z-index: 2;
  border-color: var(--panel-line-strong);
  border-bottom-color: var(--panel-raised);
  background: var(--panel-raised);
  color: var(--text);
  box-shadow: inset 0 3px 0 var(--success);
}
.config-tab:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.config-tab-panel {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  margin-top: -1px;
  padding: 0 12px 12px;
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 0 10px 10px 10px;
  background: var(--panel-soft);
}
.config-tab-description {
  min-height: 36px;
  margin: 0 -12px 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--panel-line);
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.35;
}
.config-tab-panel > .field-grid {
  flex: 0 0 auto;
}
.field-grid {
  grid-template-columns: minmax(110px, 0.7fr) minmax(120px, 1fr);
  gap: 10px;
  padding-top: 0;
}
.field-grid-main {
  grid-template-columns: minmax(140px, 1fr) 72px minmax(150px, 0.8fr);
  grid-template-areas:
    "game fps enabled"
    "tagline tagline tagline"
    "notes notes testers";
}
.field-main-id { grid-area: game; }
.field-main-fps { grid-area: fps; }
.field-main-enabled { grid-area: enabled; align-self: end; }
.field-main-tagline { grid-area: tagline; }
.field-main-notes { grid-area: notes; }
.field-main-testers { grid-area: testers; }
.field-compact-id { grid-column: 1; }
.field-checksum { grid-column: 2; }
.field-textarea-three textarea,
.field-grid-main textarea {
  min-height: 92px;
  height: 92px;
  resize: none;
}
.field-main-tagline input { min-height: 36px; }
@media (max-width: 520px) {
  .field-main-tagline input { min-height: 64px; }
}
.field-main-enabled .checkbox-row {
  min-height: 36px;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.checkbox-label-stacked {
  white-space: pre-line;
  line-height: 1.15;
  font-size: 10.5px;
}
.readonly-id {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-advanced {
  margin: 12px -12px 0;
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
  background: color-mix(in srgb, var(--panel-raised) 55%, transparent);
}
.compact-advanced > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  list-style: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compact-advanced > summary::-webkit-details-marker { display: none; }
.advanced-chevron {
  display: inline-grid;
  place-items: center;
  width: 16px;
  color: var(--text-faint);
  font-size: 16px;
  transition: transform 0.15s ease;
}
.compact-advanced[open] .advanced-chevron { transform: rotate(90deg); }
.advanced-grid {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--panel-line);
}
.section-actions {
  margin-top: auto;
  padding-top: 10px;
}

@media (max-width: 760px) {
  .config-tab-panel { min-height: 430px; border-radius: 0 0 10px 10px; }
  .field-grid-main {
    grid-template-columns: minmax(110px, 1fr) 64px;
    grid-template-areas:
      "game fps"
      "enabled enabled"
      "tagline tagline"
      "notes notes"
      "testers testers";
  }
  .field-grid-main .field-main-enabled .checkbox-row { justify-content: flex-start; }
  .field-compact-id, .field-checksum { grid-column: auto; }
}


/* Round 4 checksum drag-and-drop */
.checksum-drop-field {
  position: relative;
  padding: 5px;
  margin: -5px;
  border: 1px dashed transparent;
  border-radius: 9px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checksum-drop-field.checksum-drop-active {
  border-color: var(--success);
  background: var(--success-soft);
}
.checksum-drop-status {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.checksum-drop-hint {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.25;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Overflowing hint text gets a hover tooltip with the full message
   (data-tooltip is set on the status row only when the hint is truncated). */
.checksum-drop-status[data-tooltip] .checksum-drop-hint { cursor: help; }
.checksum-drop-status[data-tooltip]::after {
  position: absolute;
  z-index: 520;
  bottom: calc(100% + 6px);
  left: 0;
  display: none;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: 5px 7px;
  border: 1px solid var(--panel-line-strong);
  border-radius: 6px;
  background: var(--panel-raised);
  box-shadow: var(--shadow-lift);
  color: var(--text);
  content: attr(data-tooltip);
  font: 600 10.5px/1.35 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.checksum-drop-status[data-tooltip]:hover::after { display: block; }
.checksum-drop-hint.error { color: var(--danger); }
.checksum-loading-track {
  display: none;
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 8px;
  overflow: hidden;
}
.checksum-loading-dot {
  position: absolute;
  top: 2px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: checksum-dot-slide 0.85s ease-in-out infinite alternate;
}
.checksum-is-loading .checksum-loading-track { display: inline-block; }
@keyframes checksum-dot-slide {
  from { transform: translateX(0); }
  to { transform: translateX(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .checksum-loading-dot { animation-duration: 1.8s; }
}


/* Responsive Tagline control */
.responsive-text-control input { display: block; }
.responsive-text-control textarea { display: none; min-height: 64px; height: 64px; resize: none; }
@media (max-width: 520px) {
  .responsive-text-control input { display: none; }
  .responsive-text-control textarea { display: block; }
}

/* Round 5 asset states */
.asset-status.state-green { color: var(--success); }
.asset-status.state-green .status-dot { background: var(--success); }
.asset-status.state-yellow { color: var(--warning); }
.asset-status.state-yellow .status-dot { background: var(--warning); }
.asset-status.state-orange { color: var(--accent); font-weight: 700; }
.asset-status.state-orange .status-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.asset-status.state-red {
  color: var(--danger);
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.asset-status.state-red .status-dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.asset-status.state-neutral { color: var(--text-faint); opacity: 0.62; }

/* Tab issue notifications */
.config-tab { position: relative; }
.config-tab-alert {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.config-tab.has-error {
  color: var(--danger);
  box-shadow: inset 0 3px 0 var(--danger);
}
.config-tab.has-error .config-tab-alert { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.config-tab.has-warning {
  color: var(--accent);
  box-shadow: inset 0 3px 0 var(--accent);
}
.config-tab.has-warning .config-tab-alert { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* A tab with every required field complete stays green whether or not it's
   the active tab — completion is a property of the tab, not of focus. */
.config-tab.has-ready { box-shadow: inset 0 3px 0 var(--success); }
/* The active tab's top strip stays green whenever it has no errors —
   warnings keep their dot marker but don't recolor the strip. */
.config-tab.active.has-warning { box-shadow: inset 0 3px 0 var(--success); }

/* Descriptions were removed; keep the fixed panel comfortably padded. */
.config-tab-panel > .field-grid { padding-top: 12px; }

/* Plain inline checkbox fields */
.field-checkbox-plain .checkbox-row,
.field-main-enabled .checkbox-row,
.field-pup-required .checkbox-row {
  min-height: 36px;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: nowrap;
}
.field-main-enabled .checkbox-row { justify-content: center; }

/* PUP Pack corrected layout — the root field (input + directory select)
   spans two rows; Required sits to the right of the directory select. */
.field-grid-pup {
  grid-template-columns: minmax(140px, 0.8fr) minmax(190px, 1.2fr);
  grid-template-areas:
    "pup-id pup-checksum"
    "pup-notes pup-notes"
    "pup-version pup-url"
    "pup-root pup-format"
    "pup-root pup-required";
}
.field-pup-id { grid-area: pup-id; }
.field-pup-checksum { grid-area: pup-checksum; }
.field-pup-notes { grid-area: pup-notes; }
.field-pup-url { grid-area: pup-url; }
.field-pup-version { grid-area: pup-version; }
.field-pup-format { grid-area: pup-format; }
.field-pup-root { grid-area: pup-root; }
.field-pup-required { grid-area: pup-required; align-self: center; }
.field-textarea-two textarea,
.field-pup-notes textarea {
  min-height: 72px;
  height: 72px;
  resize: none;
}

/* Advanced Config layout */
.compact-advanced > summary { min-height: 24px; }
.advanced-grid-main {
  grid-template-columns: minmax(0, 1fr) 110px;
  grid-template-areas:
    "table-name table-name"
    "manufacturer year";
}
.advanced-grid-main .field-main-name-override { grid-area: table-name; }
.advanced-grid-main .field-main-manufacturer-override { grid-area: manufacturer; }
.advanced-grid-main .field-main-year-override { grid-area: year; }
.advanced-grid-b2s,
.advanced-grid-rom,
.advanced-grid-coloredRom,
.advanced-grid-vpuPatch,
.advanced-grid-altSound { grid-template-columns: 1fr; }
.advanced-grid-b2s .field-wide,
.advanced-grid-rom .field-wide,
.advanced-grid-coloredRom .field-wide,
.advanced-grid-vpuPatch .field-wide,
.advanced-grid-altSound .field-wide { grid-column: 1; }

@media (max-width: 760px) {
  .field-grid-pup {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pup-id"
      "pup-checksum"
      "pup-notes"
      "pup-version"
      "pup-url"
      "pup-root"
      "pup-format"
      "pup-required";
  }
  .advanced-grid-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "table-name"
      "manufacturer"
      "year";
  }
  .field-main-enabled .checkbox-row { justify-content: flex-start; }
}

/* Round 6 themed checkboxes */
input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--checkbox-border);
  border-radius: 4px;
  background: var(--checkbox-bg);
  color: var(--checkbox-check);
  cursor: pointer;
}
input[type="checkbox"]::before {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: '';
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.7);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent);
}
input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }
.checkbox-row input,
.array-option input,
.toggle-check input,
.bundle-toggle input { accent-color: unset; }

/* Match ID and checksum field proportions across configuration tabs. */
.field-grid:not(.field-grid-main):not(.field-grid-pup):not(.advanced-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field-id-standard,
.field-checksum-standard { min-width: 0; }
.field-id-standard .readonly-id,
.field-checksum-standard input {
  width: 100%;
  min-height: 36px;
  height: 36px;
}

/* Color ROM PAL/VNI row */
.field-grid-coloredRom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "color-id color-checksum"
    "color-pin color-secondary"
    "color-notes color-notes";
}
.field-color-id { grid-area: color-id; }
.field-color-checksum { grid-area: color-checksum; }
.field-color-pin2dmd { grid-area: color-pin; align-self: center; }
.field-color-secondary { grid-area: color-secondary; }
.field-color-notes { grid-area: color-notes; }
.field-color-pin2dmd .checkbox-row {
  min-height: 36px;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}

/* PUP archive directory browser */
.archive-directory-select {
  width: 100%;
  min-height: 32px;
  margin-top: 6px;
  border: 1px solid var(--panel-line);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 5px 30px 5px 9px;
  color: var(--text-muted);
  font-size: 11.5px;
}
.archive-directory-select:disabled { opacity: 0.55; cursor: not-allowed; }

/* State colors remain readable in both themes. */
.asset-status.state-green { color: var(--state-green); }
.asset-status.state-green .status-dot { background: var(--state-green); box-shadow: 0 0 0 3px var(--state-green-soft); }
.asset-status.state-yellow { color: var(--state-yellow); }
.asset-status.state-yellow .status-dot { background: var(--state-yellow); box-shadow: 0 0 0 3px var(--state-yellow-soft); }
.asset-status.state-orange { color: var(--state-orange); }
.asset-status.state-orange .status-dot { background: var(--state-orange); box-shadow: 0 0 0 3px var(--state-orange-soft); }
.asset-status.state-red { color: var(--state-red); }
.asset-status.state-red .status-dot { background: var(--state-red); box-shadow: 0 0 0 3px var(--state-red-soft); }

@media (max-width: 760px) {
  .field-grid-coloredRom {
    grid-template-columns: 1fr;
    grid-template-areas:
      "color-id"
      "color-checksum"
      "color-pin"
      "color-secondary"
      "color-notes";
  }
}

/* Keep the PUP Pack ID and checksum columns equal in the desktop grid. */
.field-grid-pup {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mirror checksum drop-zone spacing on ID fields so the visible controls match exactly. */
.field-id-standard {
  padding: 5px;
  margin: -5px;
  border: 1px solid transparent;
  border-radius: 9px;
}