:root { color: var(--ink); font-family: var(--font); }
* { box-sizing: border-box; }
button, input, select { font: inherit; }
button { color: #123f88; background: #fff; border: 1px solid #b9c8e3; border-radius: 4px; min-height: 28px; padding: 3px 8px; font-weight: 750; cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
.cleanup-app { grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 28px); }
.cleanup-topbar { padding-right: 22px; }
.cleanup-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; overflow: hidden; padding: 14px; }
.cleanup-brand { color: var(--ink); text-decoration: none; }
.cleanup-topbar .nav-button.is-active { border-color: #80a4ee; background: #e8f0ff; }
.cleanup-toolbar, .cleanup-bulkbar { display: flex; align-items: end; gap: 8px; padding: 8px; background: #fff; border: 1px solid #cdd8e9; }
.cleanup-toolbar label { display: grid; gap: 3px; color: #58677f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cleanup-toolbar input, .cleanup-toolbar select, .cleanup-bulkbar input { min-width: 160px; height: 28px; border: 1px solid #bdc9dd; border-radius: 3px; background: #fff; padding: 3px 6px; }
.cleanup-search { flex: 1; }
.cleanup-search input { width: 100%; }
.cleanup-summary { margin-left: auto; color: #58677f; font-weight: 650; white-space: nowrap; }
.column-picker { position: relative; }
.column-picker summary { list-style: none; min-height: 28px; padding: 5px 8px; color: #123f88; border: 1px solid #b9c8e3; border-radius: 4px; background: #fff; cursor: pointer; font-weight: 750; }
.column-picker summary::-webkit-details-marker { display: none; }
.column-picker-options { position: absolute; z-index: 5; top: 32px; right: 0; width: 310px; max-height: min(70vh, 620px); padding: 9px; overflow: auto; border: 1px solid #b9c8e3; border-radius: 4px; background: #fff; box-shadow: 0 7px 18px rgb(25 45 80 / .17); }
.column-picker:not([open]) .column-picker-options { display: none; }
.column-picker-options > strong { display: block; margin-bottom: 7px; color: #53627a; font-size: 10px; text-transform: uppercase; }
.column-picker-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.column-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.column-picker-row > label { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 6px; color: #253247; font-size: 11px; font-weight: 650; text-transform: none; }
.column-picker-row .column-pin-toggle { grid-template-columns: 18px auto; color: #486384; font-size: 10px; }
.cleanup-bulkbar { min-height: 43px; border-top: 0; align-items: center; }
.cleanup-bulkbar input { min-width: 220px; }
#bulkMessage { color: #286246; font-weight: 650; }
.cleanup-grid-wrap { min-height: 0; overflow: auto; border: 1px solid #cdd8e9; border-top: 0; background: #fff; }
.cleanup-grid { width: max-content; min-width: 100%; border-collapse: collapse; table-layout: fixed; }
.cleanup-grid th { position: sticky; top: 0; z-index: 2; padding: 0; background: #eef3fa; color: #64738a; border-bottom: 1px solid #cbd6e7; font-size: 10px; letter-spacing: 0; text-align: left; text-transform: uppercase; }
.cleanup-grid th[draggable="true"] { cursor: grab; }
.cleanup-grid th[draggable="true"].is-dragging { opacity: .45; }
.cleanup-grid th > button { width: 100%; min-height: 34px; padding: 4px 6px; color: inherit; border: 0; border-radius: 0; background: transparent; font-size: inherit; text-align: left; text-transform: uppercase; }
.cleanup-grid th > button:hover { background: #dfeafe; }
.cleanup-header-cell { display: flex; flex-direction: column; align-items: stretch; min-height: 48px; }
.cleanup-header-label { display: block; min-width: 0; padding: 4px 6px 3px; color: inherit; font-size: inherit; font-weight: inherit; line-height: 1.1; text-align: left; text-transform: uppercase; }
button.cleanup-header-label { min-height: 25px; border: 0; border-radius: 0; background: transparent; }
button.cleanup-header-label:hover { background: #dfeafe; }
.cleanup-filter-button { width: 100%; min-height: 20px; padding: 2px 6px; color: #315e9f; border: 0; border-top: 1px solid #ccd9eb; border-radius: 0; background: #f8fbff; font-size: 9px; text-align: left; }
.cleanup-filter-button:hover { background: #dfeafe; }
.cleanup-grid td { width: 170px; min-width: 170px; max-width: 310px; padding: 4px 6px; border-right: 1px solid #e0e6f0; border-bottom: 1px solid #d9e1ed; vertical-align: top; }
.cleanup-grid tbody tr:hover { background: #f7faff; }
.cleanup-grid th:first-child, .cleanup-grid td:first-child { position: sticky; left: 0; z-index: 3; width: 32px; min-width: 32px; background: inherit; text-align: center; }
.cleanup-grid th:first-child { z-index: 4; background: #eef3fa; }
.cleanup-grid [data-column].is-pinned { position: sticky; left: var(--pinned-left); z-index: 3; background: #fff; box-shadow: 1px 0 0 #bfcde1, 3px 0 5px rgb(49 79 120 / .06); }
.cleanup-grid th[data-column].is-pinned { z-index: 4; background: #eef3fa; }
.cleanup-grid th[data-column="console"], .cleanup-grid td[data-column="console"] { width: 125px; }
.cleanup-grid th[data-column="gameTitle"], .cleanup-grid td[data-column="gameTitle"] { width: 220px; }
.cleanup-grid th[data-column="notes"], .cleanup-grid td[data-column="notes"] { width: 250px; }
.cleanup-grid th[data-column$=".front"], .cleanup-grid td[data-column$=".front"], .cleanup-grid th[data-column$=".back"], .cleanup-grid td[data-column$=".back"], .cleanup-grid th[data-column$=".pictures"], .cleanup-grid td[data-column$=".pictures"] { width: 88px; min-width: 88px; }
.cleanup-grid th[data-column="componentPhotos"], .cleanup-grid td[data-column="componentPhotos"] { width: 150px; min-width: 150px; }
.cleanup-grid th[data-column$=".delete"], .cleanup-grid td[data-column$=".delete"], .cleanup-grid th[data-column="actions"], .cleanup-grid td[data-column="actions"] { width: 94px; min-width: 94px; }
.cleanup-grid [data-column].is-hidden { display: none; }
.cleanup-edit-cell { min-width: 70px; min-height: 27px; border: 1px solid transparent; border-radius: 2px; }
.cleanup-edit-cell.is-selected { background: #dce9ff; border-color: #4f86e8; box-shadow: inset 0 0 0 1px #4f86e8; }
.cleanup-edit-cell input { width: 100%; min-width: 0; height: 25px; border: 1px solid transparent; border-radius: 2px; background: transparent; padding: 2px 3px; }
.cleanup-edit-cell input:focus { border-color: #70a0f0; background: #fff; outline: 0; }
.cleanup-edit-cell input.is-error { border-color: #b23742; background: #fff1f1; }
.game-title-input input { font-weight: 800; }
.cleanup-grid small, .cleanup-code { color: #738198; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.cleanup-component-id { min-height: 24px; padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: #315e9f; text-decoration: underline; text-underline-offset: 2px; }
.cleanup-component-id:hover { color: #123f88; }
.variant-cell { padding: 3px !important; }
.variant-list { display: flex; gap: 3px; overflow-x: auto; padding-right: 3px; }
.variant-block { flex: 0 0 360px; padding: 4px; border: 1px solid #ccd7e8; border-radius: 3px; background: #fbfcff; }
.variant-block.is-expanded { flex-basis: 820px; }
.variant-topline { display: grid; grid-template-columns: 42px minmax(125px, 1fr) 64px auto auto; align-items: center; gap: 3px; }
.variant-topline > strong { color: #1c4d92; font-size: 11px; }
.variant-fields, .variant-components { display: none; }
.variant-block.is-expanded .variant-fields { display: grid; grid-template-columns: repeat(4, minmax(115px, 1fr)); gap: 3px; margin-top: 4px; }
.variant-fields .cleanup-edit-cell::before { display: block; overflow: hidden; color: #72819a; font-size: 8px; font-weight: 850; line-height: 1; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.variant-fields .cleanup-edit-cell[data-cell-field="gameNameEnglish"]::before { content: "English name"; }
.variant-fields .cleanup-edit-cell[data-cell-field="gameNameJapanese"]::before { content: "Japanese name"; }
.variant-fields .cleanup-edit-cell[data-cell-field="printEdition"]::before { content: "Edition"; }
.variant-fields .cleanup-edit-cell[data-cell-field="packaging"]::before { content: "Packaging"; }
.variant-fields .cleanup-edit-cell[data-cell-field="regionalPublisher"]::before { content: "Publisher"; }
.variant-fields .cleanup-edit-cell[data-cell-field="releaseDate"]::before { content: "Release date"; }
.variant-fields .cleanup-edit-cell[data-cell-field="barcode"]::before { content: "Barcode"; }
.variant-fields .cleanup-edit-cell[data-cell-field="setKind"]::before { content: "Set kind"; }
.variant-fields .cleanup-edit-cell[data-cell-field="countryMarket"]::before { content: "Country / market"; }
.variant-fields .cleanup-edit-cell[data-cell-field="variantDescription"]::before { content: "Variant description"; }
.variant-fields .cleanup-edit-cell[data-cell-field="rarityAndArchivalNotes"]::before { content: "Rarity / archival notes"; }
.variant-block.is-expanded .variant-components { display: grid; max-height: 174px; gap: 2px; margin-top: 4px; overflow: auto; }
.component-line { display: grid; grid-template-columns: 110px 145px minmax(170px, 1fr) 38px auto 48px; align-items: center; gap: 3px; padding: 3px; background: #fff; border: 1px solid #e0e6f0; }
.cleanup-cover-pair, .cleanup-photo-cell { display: flex; align-items: center; gap: 2px; min-width: 54px; }
.cleanup-component-photos { display: flex; gap: 2px; max-width: 138px; max-height: 64px; overflow: visible; flex-wrap: wrap; }
.cleanup-cover { width: 52px; height: 64px; }
.cleanup-image { position: relative; display: inline-flex; width: 30px; height: 30px; overflow: visible; border: 1px solid #c4d0e1; background: #edf1f6; }
.cleanup-image-target { cursor: pointer; }
.cleanup-image-target.is-image-target { outline: 2px solid #397be0; outline-offset: 1px; }
.cleanup-empty-image { display: inline-flex; align-items: center; gap: 3px; min-width: 62px; min-height: 30px; padding: 3px; border: 1px dashed #9eb2d0; background: #f7faff; }
.cleanup-empty-image button { min-height: 20px; padding: 1px 4px; border-color: #afc1db; background: #fff; color: #2c568f; font-size: 9px; font-weight: 700; }
.cleanup-cover.cleanup-empty-image { width: 52px; height: 64px; flex-direction: column; justify-content: center; }
.cleanup-add-component { min-height: 24px; padding: 2px 6px; border-color: #afc1db; background: #f7faff; color: #2c568f; font-size: 10px; font-weight: 700; white-space: nowrap; }
.cleanup-image-empty-label { display: flex; align-items: center; justify-content: center; width: 100%; padding: 2px; color: #657794; font-size: 8px; font-weight: 750; }
.cleanup-image img { width: 100%; height: 100%; object-fit: contain; }
.cleanup-image:hover { z-index: 12; }
.cleanup-image:hover img { position: relative; z-index: 1; width: 180px; height: 180px; max-width: none; max-height: none; border: 1px solid #8fa8ca; background: #fff; box-shadow: 0 8px 20px rgb(21 43 78 / .28); transform: translate(-4px, -4px); }
.cleanup-cover:hover img { width: 200px; height: 250px; }
.cleanup-image.is-empty { align-items: center; justify-content: center; padding: 2px; color: #8995a7; font-size: 7px; line-height: 1; text-align: center; }
.cleanup-image button { position: absolute; top: 0; right: 0; width: 13px; min-height: 13px; padding: 0; border: 0; border-radius: 0; color: #a61f2b; background: #fff; font-size: 11px; line-height: 11px; }
.cleanup-boolean { display: flex; align-items: center; gap: 4px; min-height: 25px; padding: 2px 4px; color: #4f5f75; font-size: 10px; font-weight: 700; }
.cleanup-boolean input { width: auto; height: auto; }
.cleanup-photo-add { min-width: 22px; padding: 0; }
.cleanup-delete { min-height: 23px; padding: 1px 5px; color: #9f2531; border-color: #e7b7bd; background: #fff8f8; font-size: 10px; }
.variant-expand { min-height: 23px; padding: 1px 5px; font-size: 10px; }
.empty-components { color: #758298; font-style: italic; }
.cleanup-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 9px; border: 1px solid #cdd8e9; border-top: 0; background: #fff; }
.cleanup-pagination input, .cleanup-pagination select { width: 74px; height: 26px; border: 1px solid #bdc9dd; border-radius: 3px; background: #fff; text-align: center; }
.column-filter-popover { position: fixed; z-index: 20; width: 320px; max-height: 410px; padding: 10px; overflow: auto; border: 1px solid #9fb5d7; border-radius: 4px; background: #fff; box-shadow: 0 10px 24px rgb(25 45 80 / .2); }
.column-filter-popover > strong { display: block; margin-bottom: 8px; color: #465b78; font-size: 10px; text-transform: uppercase; }
.column-filter-actions, .column-filter-popover footer { display: flex; gap: 5px; }
.column-filter-actions { margin-bottom: 7px; }
.column-filter-values { display: grid; gap: 3px; max-height: 276px; overflow: auto; border-top: 1px solid #e0e6f0; border-bottom: 1px solid #e0e6f0; padding: 6px 0; }
.column-filter-values label { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; align-items: center; gap: 5px; color: #253247; font-size: 11px; }
.column-filter-values span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-filter-values small { color: #748197; text-align: right; }
.column-filter-popover footer { justify-content: flex-end; margin-top: 8px; }
.image-target-popover { position: fixed; z-index: 30; display: flex; gap: 4px; padding: 5px; border: 1px solid #9fb5d7; border-radius: 4px; background: #fff; box-shadow: 0 8px 20px rgb(25 45 80 / .2); }
.image-target-popover button { min-height: 24px; padding: 2px 6px; font-size: 10px; }
.image-target-popover [data-image-delete] { color: #9f2531; border-color: #e7b7bd; background: #fff8f8; }
.add-game-dialog { width: min(420px, calc(100vw - 28px)); padding: 0; border: 1px solid #9fb5d7; border-radius: 5px; box-shadow: 0 18px 48px rgb(25 45 80 / .25); }
.add-game-dialog::backdrop { background: rgb(20 35 60 / .26); }
.add-game-dialog form { display: grid; gap: 12px; padding: 14px; }
.add-game-dialog header, .add-game-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.add-game-dialog label { display: grid; gap: 4px; color: #58677f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.add-game-dialog input, .add-game-dialog select { width: 100%; min-height: 30px; border: 1px solid #bdc9dd; border-radius: 3px; padding: 4px 6px; text-transform: none; }
.add-game-error { min-height: 16px; margin: -4px 0 0; color: #a12632; font-size: 11px; }
.add-variant-game { margin: -4px 0 0; color: #53627a; font-size: 11px; font-weight: 700; }
@media (max-width: 800px) { .cleanup-app { height: 100vh; } .cleanup-topbar { align-items: flex-start; flex-direction: column; } .cleanup-topbar nav, .cleanup-toolbar { flex-wrap: wrap; } .cleanup-summary { margin-left: 0; } }