:root {
    color-scheme: light dark;
    font: 14px/1.6 "Segoe UI", "Yu Gothic UI", sans-serif;
}

body {
    margin: 0;
    background: #161b22;
    color: #e6edf3;
}

main {
    padding: 22px;
    max-width: 1100px;
    margin: auto;
}

header {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

h2 {
    font-size: 17px;
    font-weight: 600;
    margin: 22px 0 10px;
}

#skill-count {
    color: #70dc96;
    font-variant-numeric: tabular-nums;
}

#skill-empty {
    color: #9baabb;
}

#skill-objects td:first-child, #skill-objects td:nth-child(3) {
    text-align: left;
}

#status {
    background: #263343;
    padding: 5px 12px;
    border-radius: 6px;
}

#map, .note, #empty {
    color: #9baabb;
}

.summary {
    margin: 15px 0;
    font-size: 16px;
}

.summary strong {
    color: #70dc96;
    font-size: 28px;
    margin-right: 6px;
}

#cells {
    margin-left: 18px;
    color: #70dc96;
}

.table-wrap {
    overflow: auto;
    border: 1px solid #344052;
    border-radius: 8px;
}

.overlay-adjustment {
    margin: 18px 0;
    padding: 12px 16px;
    border: 1px solid #344052;
    border-radius: 8px;
}

.overlay-adjustment label {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 600;
}

.overlay-adjustment output {
    color: #70dc96;
    font-variant-numeric: tabular-nums;
}

.adjustment-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.adjustment-controls input[type="range"] {
    flex: 1;
    min-width: 140px;
    accent-color: #70dc96;
}

.adjustment-controls button {
    padding: 5px 12px;
    border: 1px solid #536279;
    border-radius: 6px;
    background: #263343;
    color: #e6edf3;
    cursor: pointer;
}

.adjustment-controls button:disabled {
    opacity: 0.5;
    cursor: default;
}

.overlay-adjustment .note {
    margin: 8px 0 0;
    font-size: 12px;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

th, td {
    text-align: right;
    padding: 9px 14px;
    white-space: nowrap;
    border-bottom: 1px solid #293446;
}

th {
    color: #acb8c9;
    background: #202a38;
    font-weight: 500;
}

tbody tr:last-child td {
    border-bottom: none;
}

.archive-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 18px 0; }
.archive-controls label { display: flex; flex-direction: column; gap: 4px; }
.archive-controls select { max-width: 320px; }
.archive-search-label { flex: 1; min-width: 240px; }
.archive-table td { text-align: left; white-space: nowrap; }
.archive-table th button { padding: 0; width: 100%; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.archive-table th button:hover { color: white; }
.archive-table th button:focus-visible { outline: 2px solid #8ebcff; outline-offset: 4px; }
.archive-sort-indicator { margin-left: 6px; color: #8c9aaf; }
.archive-table th[aria-sort="ascending"], .archive-table th[aria-sort="descending"] { color: white; }
.archive-item-name { min-width: 220px; }
.archive-item-name button { margin-left: 12px; vertical-align: middle; }
.archive-item-name img, .archive-icon-placeholder { display: inline-block; vertical-align: middle; margin-right: 8px; width: 24px; height: 24px; object-fit: contain; }
.archive-icon-placeholder { text-align: center; color: #8c9aaf; }
.archive-pagination { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 15px; }
#archive-error { color: #ffb4ab; }
#archive-feedback:empty { display: none; }
#archive-containers { max-height: 240px; overflow: auto; }

[hidden] { display: none !important; }
.tabs { display: flex; gap: 4px; margin: 18px 0; border-bottom: 1px solid #485466; }
.tabs button { padding: 9px 24px; border: 1px solid #485466; border-bottom: 0; border-radius: 6px 6px 0 0; color: #b9c4d2; background: #202733; cursor: pointer; }
.tabs button[aria-selected="true"] { color: white; background: #374458; }
.game-panel { background: #ededed; color: #253344; border: 1px solid #9aa5b4; border-radius: 5px; padding: 12px; margin: 12px 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { margin: 0; font-size: 15px; }
.panel-heading h2 span { font-size: 12px; font-weight: normal; }
.status-help { font-size: 12px; color: #586679; margin: 9px 0; }
.game-panel select, .game-panel input { color: #253344; background: white; border: 1px solid #9da6b4; border-radius: 3px; padding: 4px 6px; font: inherit; font-size: 12px; }
.shortcut-scroll { overflow-x: auto; }
.shortcut-grid, .shift-enchant-grid { display: grid; grid-template-columns: repeat(9, minmax(42px, 1fr)); gap: 5px; max-width: 600px; min-width: 418px; }
.shortcut-grid.extra-keys, .shift-enchant-grid.extra-keys { grid-template-columns: repeat(11, minmax(42px, 1fr)); max-width: 734px; min-width: 512px; }
.shortcut-grid.f12-key, .shift-enchant-grid.f12-key { grid-template-columns: repeat(12, minmax(42px, 1fr)); max-width: 801px; min-width: 559px; }
.shift-enchant-grid { margin-bottom: 5px; }
.shift-enchant-grid label { display: flex; justify-content: center; align-items: center; gap: 2px; font-size: 11px; }
.shift-enchant-grid input { margin: 0; }
.shortcut-slot { min-width: 0; }
.icon-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; box-sizing: border-box; background: #fafafa; border: 1px solid #b4bdc9; border-radius: 3px; padding: 3px; color: #253344; cursor: default; user-select: none; }
.icon-tile[draggable="true"] { cursor: grab; }
.icon-tile[draggable="true"]:active { cursor: grabbing; }
.icon-tile:focus-visible, .level-button:focus-visible, .tabs button:focus-visible { outline: 2px solid #3084d4; outline-offset: 2px; }
.icon-tile.drop-target { background: #d6eaff; border-color: #3383c7; box-shadow: inset 0 0 0 1px #3383c7; }
.icon-tile img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.icon-placeholder { font-size: 9px; color: #8997a8; overflow: hidden; max-width: 35px; }
.icon-count { position: absolute; right: 2px; bottom: 1px; max-width: 100%; font-size: 10px; font-weight: bold; color: #253344; text-shadow: 1px 1px #fff, -1px -1px #fff; pointer-events: none; }
.icon-equipped { position: absolute; top: 1px; right: 2px; color: #28729b; font-size: 9px; pointer-events: none; }
.icon-passive { opacity: .55; }
.shortcut-label { position: absolute; top: 0; left: 2px; color: #8793a1; font-size: 9px; pointer-events: none; }
.level-controls { display: flex; gap: 2px; margin-top: 2px; }
.level-button { width: 50%; height: 20px; padding: 0; border: 1px solid #b4bdc9; border-radius: 3px; background: #fff; color: #253344; font-size: 13px; cursor: pointer; }
.level-button:disabled { color: #bbc1ca; background: #e5e7eb; cursor: default; }
#shortcut-feedback { font-size: 12px; min-height: 1.4em; margin: 8px 0 0; }
.status-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.status-lists .game-panel { min-width: 0; margin-top: 0; }
.list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.list-controls input { flex: 1; min-width: 100px; }
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 42px);
    grid-auto-rows: 42px;
    align-content: start;
    gap: 3px;
    overflow-y: auto;
    max-height: 384px;
    min-height: 130px;
    padding: 5px;
    border: 1px solid #c3c9d2;
    background: #dedfe2;
}
@media (max-width: 620px) { .status-lists { grid-template-columns: 1fr; gap: 0; } .tabs button { padding: 9px 18px; } }

.ground-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #d0d7de;
    border-radius: 3px;
    vertical-align: middle;
}

tbody tr:nth-child(even) {
    background: #1b2430;
}