:root {
    font-family: "Segoe UI", sans-serif;
    font-size: 13px;
    color: #222;
    background: #e5e5e5;
    color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button, .file-button {
    border: 1px solid #aaa;
    border-radius: 2px;
    background: linear-gradient(#fff, #e9e9e9);
    padding: 5px 13px;
    cursor: pointer;
}
button:hover, .file-button:hover { background: #e5f1fb; border-color: #7eb4ea; }
button:active { background: #cce4f7; }
button:disabled, [aria-disabled="true"] { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #0078d4; outline-offset: 1px; }
input, select { border: 1px solid #aaa; background: white; padding: 5px 7px; min-height: 29px; border-radius: 0; }
input[type="number"] { width: 95px; }
input[type="checkbox"] { accent-color: #0078d4; width: 15px; height: 15px; min-height: 0; margin: 0; }
input:invalid { border-color: #bc2c2c; }
label { display: block; }
fieldset { border: 1px solid #b7b7b7; padding: 16px; margin: 0; min-width: 0; }
legend { padding: 0 6px; }
h1 { font-size: 23px; font-weight: 400; margin: 0 0 20px; }
h3 { font-size: 13px; font-weight: 600; margin: 24px 0 8px; }
p { line-height: 1.6; }
.muted, small { color: #666; }
.application { position: relative; max-width: 1440px; margin: 24px auto; background: #f0f0f0; border: 1px solid #999; box-shadow: 0 3px 16px #0002; }
.titlebar { display: flex; gap: 16px; align-items: center; background: white; border-bottom: 1px solid #d5d5d5; padding: 10px 14px; }
.titlebar strong { font-weight: 600; }
.titlebar span { color: #666; }
.titlebar .edition { margin-left: auto; font-size: 12px; }
.menubar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid #ccc; flex-wrap: wrap; }
.menubar > button, .menubar .file-button { background: transparent; border-color: transparent; }
.menubar > button:hover, .menubar .file-button:hover { background: #e5f1fb; border-color: #7eb4ea; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.file-button:focus-within { outline: 2px solid #0078d4; }
.language { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.language select { min-width: 130px; }
.tabs { display: flex; flex-wrap: wrap; align-items: end; padding: 12px 10px 0; border-bottom: 1px solid #aaa; }
.tabs button { border-radius: 3px 3px 0 0; border: 1px solid #bbb; margin-right: 2px; padding: 7px 20px; }
.tabs button.active { background: #fafafa; border-bottom-color: #fafafa; position: relative; top: 1px; }
.workspace { background: #fafafa; min-height: 630px; padding: 16px; }
[hidden] { display: none !important; }
.welcome { max-width: 680px; margin: 100px auto; padding: 0 24px; }
.player-header { display: grid; grid-template-columns: max-content minmax(0, 244px); align-items: center; gap: 12px; margin-bottom: 18px; }
.player-header input { width: 244px; max-width: 100%; min-width: 0; }
.player-sections { display: flex; grid-column: 2; }
.player-sections button { min-width: 116px; padding: 7px 18px; border-radius: 0; }
.player-sections button:first-child { border-radius: 3px 0 0 3px; }
.player-sections button:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.player-sections button[aria-pressed="true"] { position: relative; background: #cce8ff; border-color: #0078d4; color: #005a9e; }
.split { display: grid; grid-template-columns: minmax(320px, 1fr) 340px; gap: 18px; min-height: 580px; }
.list-pane { min-width: 0; display: flex; flex-direction: column; }
.filterbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.filterbar input[type="search"] { flex: 1; min-width: 160px; }
.table-scroll, .resident-list { border: 1px solid #aaa; background: white; height: 535px; overflow: auto; }
.inventory { width: 100%; border-collapse: collapse; }
.inventory th { position: sticky; top: 0; background: #f0f0f0; border-bottom: 1px solid #aaa; padding: 7px 10px; text-align: left; font-weight: 400; z-index: 1; }
.inventory td { border-bottom: 1px solid #eee; padding: 2px 10px; height: 38px; }
.inventory th:first-child { width: 55px; }
.inventory th:nth-child(2) { width: 45px; }
.inventory th:last-child { width: 65px; }
.inventory tr:hover { background: #edf5fb; }
.selected, .inventory tr.selected { background: #cce8ff; color: #111; }
.row-button { display: block; width: 100%; text-align: left; padding: 6px 0; border: 0; border-radius: 0; background: transparent; }
.row-button:hover { background: transparent; }
.ability-editor .inventory th:first-child { width: auto; }
.ability-editor .row-button { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.ability-editor .inventory th:nth-child(2), .ability-editor .inventory th:last-child { width: 85px; }
.ability-editor .details select { width: 100%; }
.wheel-slots option { padding: 5px 7px; }
.sprite { display: inline-block; width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.details { align-self: start; }
.details > label { margin: 14px 0 6px; }
.details .check { margin: 18px 0; }
.buttons { display: flex; gap: 8px; margin-top: 16px; }
.buttons button { min-width: 75px; }
.primary { border-color: #0078d4; }
.item-preview { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-bottom: 12px; }
.item-preview .sprite { width: 56px; height: 56px; }
.item-select label input { width: 100%; margin: 6px 0; }
.item-choices { height: 235px; overflow: auto; background: white; border: 1px solid #aaa; margin-bottom: 8px; }
.item-choice, .resident-row, .part-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 0; padding: 3px 7px; text-align: left; background: transparent; }
.item-choice.selected, .resident-row.selected, .part-row.selected { background: #cce8ff; }
.resident-row { height: 46px; }
.resident-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resident-row .sprite { width: 40px; height: 40px; }
.resident-row small { margin-left: 6px; }
.list-status { padding: 8px 0; color: #666; }
.portrait { text-align: center; }
.portrait .sprite { width: 156px; height: 156px; }
.check { display: flex; align-items: center; gap: 8px; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 24px; }
dt, dd { margin: 0; }
.map-toolbar label { display: flex; align-items: center; gap: 7px; }
.map-toolbar input[type="number"] { width: 65px; }
.map-toolbar select { max-width: 245px; }
.map-body { display: grid; grid-template-columns: minmax(350px, 1fr) 350px; gap: 18px; }
.map-view { min-width: 0; align-self: start; text-align: center; background: #e0e0e0; border: 1px solid #aaa; padding: 16px; }
.map { display: block; width: 100%; max-width: 680px; height: auto; aspect-ratio: 1; margin: 0 auto; border: 1px solid #777; overflow: hidden; touch-action: manipulation; }
.selected-footprint { fill: none; stroke: #4169e1; stroke-width: 3; pointer-events: none; }
.pending-footprint { fill: none; stroke-width: 3; stroke-dasharray: 7 4; pointer-events: none; }
.map-caption { font-size: 12px; }
.map-sidebar > input { width: 100%; margin-bottom: 7px; }
.part-list { height: 190px; overflow: auto; border: 1px solid #aaa; background: white; }
.part-row { height: 38px; font-size: 12px; }
.part-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-details { margin-top: 14px; padding: 12px; }
.map-details select { width: 100%; margin-top: 5px; }
.coordinates { display: flex; gap: 9px; margin: 12px 0; }
.coordinates label { flex: 1; min-width: 0; }
.coordinates input { display: block; width: 100%; margin-top: 4px; }
.map-details p { margin: 9px 0; font-size: 12px; }
.map-details .item-preview { min-height: 44px; margin-bottom: 10px; }
.map-details .item-preview .sprite { width: 44px; height: 44px; }
.statusbar { display: flex; justify-content: space-between; gap: 15px; padding: 6px 12px; border-top: 1px solid #bbb; font-size: 12px; }
.statusbar span:last-child { white-space: nowrap; color: #666; }
.error { display: flex; align-items: center; gap: 15px; padding: 10px 16px; background: #fff0ef; border-bottom: 1px solid #e8b3b0; color: #86231f; }
.error button { margin-left: auto; background: transparent; border: 0; font-size: 20px; padding: 0 5px; }
.busy { position: absolute; inset: 0; background: #ffffffc9; display: grid; place-items: center; font-size: 17px; cursor: wait; z-index: 5; }
.drop-target { display: none; position: fixed; inset: 12px; z-index: 6; pointer-events: none; align-items: center; justify-content: center; border: 3px dashed #0078d4; background: #ffffffdf; }
.drop-target span { padding: 20px; color: #005a9e; font-size: 20px; text-align: center; }
.file-drag .drop-target { display: flex; }
.empty-state { padding: 24px; color: #666; }
.loading { margin: 20vh auto; text-align: center; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff0c0; padding: 14px; z-index: 10; }
@media (max-width: 900px) {
    .application { margin: 0; border: 0; min-height: 100vh; box-shadow: none; }
    .split { grid-template-columns: minmax(250px, 1fr) 300px; gap: 12px; }
    .map-body { grid-template-columns: 1fr; }
    .map-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .map-sidebar > input, .map-sidebar > small { grid-column: 1; }
    .map-sidebar .map-details { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
    .part-list { height: 380px; }
}
@media (max-width: 620px) {
    .player-header { grid-template-columns: max-content minmax(0, 1fr); }
    .player-sections { grid-column: 1 / -1; width: 100%; }
    .player-sections button { flex: 1; }
    .workspace { padding: 10px; }
    .split { grid-template-columns: 1fr; }
    .table-scroll, .resident-list { height: 330px; }
    .language { margin-left: 0; }
    .tabs button { padding: 7px 14px; }
    .map-sidebar { display: block; }
    .part-list { height: 180px; margin-bottom: 10px; }
    .map-sidebar .map-details { margin-top: 14px; }
    .map-view { padding: 6px; }
    .statusbar { flex-wrap: wrap; }
    .welcome { margin: 60px auto; padding: 0 10px; }
}