:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090b0a; color: #edf4ee; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0, #283629 0, transparent 32rem), #090b0a; }
header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 3rem clamp(1.25rem, 5vw, 5rem) 2rem; border-bottom: 1px solid #29302b; }
.eyebrow, .kind { margin: 0 0 .55rem; color: #93cf83; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.055em; }
.lede { color: #98a49b; margin-bottom: 0; }
.total { display: grid; min-width: 8rem; text-align: right; }
.total strong { color: #d5fd75; font-size: 2.5rem; line-height: 1; }
.total span { color: #7e8981; font-size: .8rem; }
main { padding: 1.5rem clamp(1.25rem, 5vw, 5rem) 5rem; }
nav { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: 1rem; }
.section-tabs { margin-bottom: 1rem; border-bottom: 1px solid #29302b; }
.section-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: .95rem; }
.section-tabs button.active { border-color: #b5e775; color: #efffdc; }
button, .inspect { border: 1px solid #354139; border-radius: .65rem; background: #121713; color: #b7c1b9; padding: .65rem 1rem; cursor: pointer; }
nav button { border-radius: 999px; }
nav button.active { border-color: #99ce60; background: #263423; color: #e9ffd3; }
nav button span { margin-left: .45rem; color: #758078; }
.toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 16rem) auto auto; align-items: end; gap: 1rem; margin: .5rem 0 1.5rem; }
label { display: grid; gap: .4rem; color: #8d998f; font-size: .75rem; }
input, select { width: 100%; border: 1px solid #303a33; border-radius: .75rem; background: #0e120f; color: #edf4ee; padding: .8rem .9rem; }
.primary { border-color: #a2d85f; background: #334525; color: #efffdc; }
.danger { border-color: #79453f; color: #ffbbb0; }
.compact { width: 100%; margin-top: .55rem; padding: .42rem .6rem; font-size: .7rem; }
.notice { position: sticky; top: 1rem; z-index: 5; padding: .8rem 1rem; border: 1px solid #4d633f; border-radius: .7rem; background: #1a2817; }
.notice.error, .error-text { color: #ffaba1; border-color: #6e3834; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 1rem; }
.card { overflow: hidden; border: 1px solid #29332c; border-radius: 1rem; background: #111512; box-shadow: 0 18px 40px #0005; }
.preview { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #202a22, #0d110e); }
.preview img { width: 100%; height: 100%; object-fit: contain; }
.placeholder::before { content: "3D"; color: #566259; font-size: 2.5rem; font-weight: 900; letter-spacing: -.08em; }
.status { position: absolute; top: .7rem; right: .7rem; border: 1px solid #ffffff24; border-radius: 999px; background: #080a08cc; padding: .25rem .5rem; color: #c9d1cb; font-size: .68rem; }
.card-body { padding: 1rem; }
.card h2 { margin: 0; font-size: 1.2rem; }
.identity { color: #829087; font-family: ui-monospace, monospace; font-size: .75rem; }
.tags { min-height: 1.5rem; display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.tags span { border-radius: .35rem; background: #202721; color: #aab5ad; padding: .2rem .4rem; font-size: .68rem; }
.inspect { width: 100%; border-radius: .65rem; }
.empty { padding: 4rem 0; color: #758078; text-align: center; }
.icon-imports { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr); gap: 1rem; margin: .5rem 0 2.5rem; }
.import-card, .collection-card { border: 1px solid #29332c; border-radius: 1rem; background: #111512; padding: 1.15rem; }
.import-card h2, .icons-heading h2 { margin: 0; }
.import-card button { margin-top: 1rem; }
.single-icon-fields { display: grid; grid-template-columns: 1.5fr 1.2fr .55fr 1fr; gap: .7rem; }
.single-icon-fields label:last-child { grid-column: 1 / -1; }
.icons-heading, .collection-title { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 1.5rem 0 .8rem; }
.collection-title { align-items: start; margin: 0 0 1rem; }
.collection-title h3 { margin: 0; font-size: 1.35rem; }
.collection-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .55rem; }
.download { border: 1px solid #40513f; border-radius: .6rem; color: #b8e78e; padding: .55rem .75rem; text-decoration: none; }
.collection-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .7rem; }
.icon-library { display: grid; gap: 1rem; }
.icon-tile { min-width: 0; border: 1px solid #29332c; border-radius: .75rem; background: #0c100d; padding: .55rem; }
.icon-image { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .55rem; background: radial-gradient(circle, #263329, #080b09 72%); }
.icon-image img { width: 100%; height: 100%; object-fit: contain; }
.player-admin { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1rem; }
.player-list, .player-detail { min-width: 0; border: 1px solid #29332c; border-radius: 1rem; background: #111512; padding: 1rem; }
.player-list { display: grid; align-content: start; gap: .55rem; }
.player-row { display: grid; gap: .2rem; text-align: left; }
.player-row small, .player-row span { color: #78847b; }
.player-detail form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .65rem; margin: .8rem 0; }
.player-detail form[data-item] { grid-template-columns: 1fr 1fr auto; }
.ownership-callout { margin: 1rem 0; border: 1px solid #52674a; border-radius: .75rem; background: linear-gradient(135deg, #1b2919, #111712); padding: .8rem 1rem; }
.ownership-callout strong { color: #d7ffad; }
.ownership-callout p { margin: .3rem 0 0; color: #a5b3a7; font-size: .78rem; line-height: 1.45; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: .55rem; margin: 1rem 0; }
.admin-stats span { padding: .8rem; border-radius: .7rem; background: #182019; color: #d5fd75; font-size: 1.3rem; }
.admin-stats small { display: block; color: #78847b; font-size: .65rem; }
.icon-tile strong, .icon-tile small { display: block; overflow: hidden; margin-top: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.icon-tile strong { font-size: .76rem; }
.icon-tile small { color: #78847b; font-size: .66rem; }
dialog { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid #3a473e; border-radius: 1rem; background: #101411; color: #eef4ef; box-shadow: 0 30px 100px #000c; }
dialog::backdrop { background: #020302c9; backdrop-filter: blur(6px); }
.detail-preview { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; margin: 1rem 0; border: 1px solid #29332c; border-radius: .8rem; background: radial-gradient(circle, #263329, #090c0a 70%); }
.detail-preview img { width: 100%; height: 100%; object-fit: contain; }
.close { position: sticky; top: 0; float: right; border: 0; background: transparent; color: #aab4ac; font-size: 2rem; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.muted { color: #89958c; }
.part a { color: #9ed477; word-break: break-all; }
.solution-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.solution-grid > div { border: 1px solid #29332c; border-radius: .7rem; padding: .8rem; }
.solution-grid small { display: block; color: #7e8981; }
textarea { width: 100%; min-height: 55vh; resize: vertical; border: 1px solid #303a33; border-radius: .75rem; background: #080b09; color: #bfe4bd; padding: 1rem; font: .78rem/1.5 ui-monospace, monospace; tab-size: 2; }
.settings { margin: 1rem 0; padding: 1rem; border: 1px solid #3a473e; border-radius: .8rem; background: #0c100d; }
.settings summary { cursor: pointer; color: #ccecaa; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.form-grid .wide { grid-column: 1 / -1; }
.small-editor { min-height: 9rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .65rem; }
.detail-grid div, .part { border: 1px solid #29332c; border-radius: .65rem; padding: .75rem; background: #151a16; }
.detail-grid small, .part small { display: block; color: #768179; }
pre { overflow: auto; padding: 1rem; border-radius: .7rem; background: #090b0a; color: #b9d9bd; font-size: .73rem; }
.player-hero, .ownership-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.player-hero h2, .ownership-heading h3, .owned-character-card h4 { margin: 0; }
.player-revision { border: 1px solid #54714a; border-radius: .65rem; background: #1b2919; color: #b7e792; padding: .45rem .65rem; font: 700 .62rem/1.25 ui-monospace, monospace; text-align: center; }
.boss-progress { display: grid; grid-template-columns: minmax(135px, 1.3fr) repeat(6, minmax(58px, .55fr)); gap: .45rem; align-items: stretch; margin: .8rem 0 1rem; }
.boss-progress > div, .boss-progress > span { border: 1px solid #344038; border-radius: .65rem; background: #121813; padding: .55rem; }
.boss-progress > span { display: grid; place-items: center; color: #b6c1b8; font-size: 1.05rem; font-weight: 900; }
.boss-progress small { display: block; color: #778279; font-size: .47rem; font-weight: 700; }
.boss-progress .defeated { border-color: #56834b; background: #20301c; color: #d4ff9c; }
.boss-progress .available { border-color: #526159; }
.boss-progress .locked { opacity: .4; }
.admin-grants { margin: 1rem 0 1.5rem; border: 1px solid #344038; border-radius: .8rem; background: #0d120e; padding: .8rem; }
.admin-grants summary, .raw-player-json summary { cursor: pointer; color: #ccecaa; font-weight: 700; }
.grant-grid { display: grid; grid-template-columns: .8fr .9fr 1.4fr; gap: .75rem; margin-top: .8rem; }
.grant-grid form, .grant-grid form[data-item] { grid-template-columns: 1fr; margin: 0; padding: .75rem; border-radius: .65rem; background: #151b16; }
.ownership-section { margin-top: 1.6rem; }
.ownership-heading { align-items: end; margin-bottom: .7rem; }
.ownership-heading > span { color: #7f8b82; font-size: .72rem; text-align: right; }
.character-coverage { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .65rem; }
.coverage-card { min-width: 0; border: 1px solid #334038; border-radius: .8rem; background: linear-gradient(145deg, #182019, #0d110e); padding: .6rem; }
.coverage-card.missing { opacity: .42; filter: saturate(.2); }
.coverage-card strong, .coverage-card small { display: block; overflow: hidden; margin-top: .4rem; text-overflow: ellipsis; white-space: nowrap; }
.coverage-card small { color: #7e8981; font-size: .68rem; }
.coverage-slots { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .45rem; }
.coverage-slots span { border-radius: 999px; background: #253026; color: #aebcaf; padding: .18rem .35rem; font-size: .55rem; }
.coverage-image, .owned-item-icon { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .65rem; background: radial-gradient(circle, #314332, #090c0a 72%); }
.coverage-image img, .owned-item-icon .main-item-icon { width: 100%; height: 100%; object-fit: contain; }
.coverage-image .placeholder { color: #617066; font-size: 1.4rem; font-weight: 900; }
.coverage-image b { position: absolute; top: .35rem; right: .35rem; border-radius: 999px; background: #0a0d0bcc; color: #bdf38d; padding: .18rem .35rem; font-size: .55rem; }
.coverage-card.missing .coverage-image b { color: #9aa29c; }
.owned-item-icon span { color: #617066; font-size: 1rem; font-weight: 900; }
.owned-characters { display: grid; gap: .8rem; }
.owned-character-card { border: 1px solid #344139; border-radius: .9rem; background: linear-gradient(135deg, #151d16, #0b0f0c); padding: .85rem; }
.character-summary { display: grid; grid-template-columns: 104px 1fr; gap: .85rem; align-items: center; }
.character-portrait { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .75rem; background: radial-gradient(circle, #2e3f30, #080b09); }
.character-portrait img { width: 100%; height: 100%; object-fit: contain; }
.character-portrait .placeholder { color: #58645b; font-weight: 900; }
.character-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.character-description { margin: .3rem 0; color: #9daa9f; font-size: .72rem; }
.side-badge, .owned-badge { display: inline-block; border-radius: 999px; background: #202a21; color: #aab7ac; padding: .25rem .45rem; font-size: .65rem; }
.owned-badge { border: 1px solid #54714a; background: #1b2919; color: #caff9c; font-weight: 800; }
.composition-heading { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; color: #b9c8bb; font-size: .72rem; }
.composition-heading span { color: #7f8c82; }
.part-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-top: .7rem; }
.character-part { min-width: 0; overflow: hidden; border: 1px solid #35443a; border-radius: .55rem; background: linear-gradient(145deg, #182019, #0d120e); padding: .45rem; }
.character-part small, .character-part strong, .character-part code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-part small { color: #8b9a8e; font-size: .58rem; }
.character-part strong { margin-top: .22rem; color: #d3e2d5; font-size: .68rem; }
.character-part code { margin-top: .28rem; color: #6f7e73; font-size: .53rem; }
.loadout-title { margin: .9rem 0 .45rem; color: #a8b5aa; font-size: .72rem; font-weight: 700; }
.loadout-grid { display: grid; grid-template-columns: repeat(8, minmax(72px, 1fr)); gap: .4rem; }
.equipment-empty { aspect-ratio: .82; display: grid; place-items: center; align-content: center; border: 1px dashed #39443d; border-radius: .55rem; background: #0a0d0b; color: #5d6860; }
.equipment-empty b { font-size: .72rem; }.equipment-empty span { font-size: .58rem; }
.owned-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .55rem; }
.owned-item { min-width: 0; display: grid; grid-template-columns: 66px 1fr; gap: .65rem; border: 1px solid #354138; border-radius: .7rem; background: #0d120e; padding: .55rem; box-shadow: inset 0 0 18px #ffffff05; }
.loadout-grid .owned-item { display: block; padding: .35rem; }
.loadout-grid .owned-item > div:last-child { display: none; }
.owned-item-icon { aspect-ratio: 1; border: 1px solid #354138; }
.owned-item-icon .item-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.owned-item-icon .item-element-badge { position: absolute; left: 5%; bottom: 5%; z-index: 3; width: 25%; height: 25%; object-fit: contain; filter: drop-shadow(0 1px 3px #000); pointer-events: none; }
.owned-item-icon b { position: absolute; right: .25rem; bottom: .25rem; z-index: 4; border-radius: .3rem; background: #080a08e8; color: #d4ddd6; padding: .13rem .25rem; font-size: .52rem; }
.owned-item-icon b.free-marker { color: #c8f79f; }
.owned-item strong, .owned-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owned-item small { margin-top: .2rem; color: #8d998f; font-size: .66rem; }
.owned-item p { margin: .35rem 0 0; color: #aeb9b0; font-size: .64rem; line-height: 1.35; }
.presentation-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin-top: .5rem; }
.presentation-stats span { display: flex; justify-content: space-between; gap: .4rem; border-radius: .3rem; background: #172019; padding: .25rem .35rem; }
.presentation-stats small { margin: 0; color: #87958a; }
.presentation-stats strong { color: #d7e6d9; font-size: .66rem; }
.character-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: .8rem 0; }
.element-description { color: #c7d9c9 !important; }
.compact-empty { grid-column: 1 / -1; padding: 1.5rem; }
.raw-player-json { margin-top: 1.5rem; padding: .8rem; border-top: 1px solid #29332c; }
@media (max-width: 1100px) { .loadout-grid { grid-template-columns: repeat(4, 1fr); } .grant-grid { grid-template-columns: 1fr; } .boss-progress { grid-template-columns: repeat(3, 1fr); } .boss-progress > div { grid-column: 1 / -1; } }
@media (max-width: 760px) { header { align-items: start; } .toolbar, .solution-grid, .form-grid, .icon-imports, .single-icon-fields, .player-admin, .player-detail form, .player-detail form[data-item] { grid-template-columns: 1fr; } .form-grid .wide, .single-icon-fields label:last-child { grid-column: auto; } .total { min-width: auto; } .admin-stats { grid-template-columns: repeat(2, 1fr); } .part-strip { grid-template-columns: repeat(3, 1fr); } .character-summary { grid-template-columns: 80px 1fr; } }

/* Admin grants retain their inputs while ownership panels refresh. */
.grant-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.grant-tabs .active { background: #b2da82; color: #121a0d; }
.admin-grants form[data-grant-pane] { display: block; margin: 0; }
.admin-grants [hidden] { display: none !important; }
.grant-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; max-height: 420px; overflow: auto; padding: .3rem; }
.grant-item-choice, .grant-part-choice { position: relative; display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; padding: .7rem; border: 1px solid #384436; border-radius: .65rem; background: #151d16; cursor: pointer; }
.grant-item-choice:has(input:checked), .grant-part-choice:has(input:checked) { border-color: #b2da82; background: #253522; box-shadow: 0 0 0 1px #b2da82; }
.grant-item-choice:focus-within, .grant-part-choice:focus-within { outline: 2px solid #dcefc9; outline-offset: 2px; }
.grant-item-choice > input, .grant-part-choice > input { position: absolute; top: .5rem; left: .5rem; width: auto; }
.grant-item-choice strong { font-size: .8rem; min-height: 2rem; }
.grant-item-choice input[type=number] { width: 4.5rem; padding: .35rem; }
.grant-item-choice > span:last-child { font-size: .75rem; }
.grant-preview { display: grid; place-items: center; width: 72px; height: 72px; }
.grant-preview img { width: 100%; height: 100%; object-fit: contain; }
.grant-element { position: absolute; width: 24px; height: 24px; top: 50px; right: 12px; }
.grant-rarities { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; border: 0; padding: 0; }
.grant-rarities legend { margin-bottom: .5rem; }
.grant-rarities label { display: flex; gap: .35rem; padding: .5rem; border: 1px solid currentColor; border-radius: .5rem; }
.grant-rarities input { width: auto; }
.grant-rarities [data-rarity=uncommon] { color: #8ad28d; }
.grant-rarities [data-rarity=rare] { color: #85baf5; }
.grant-rarities [data-rarity=epic] { color: #c39afa; }
.grant-rarities [data-rarity=legendary] { color: #f3c478; }
.grant-part-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
.grant-part-grid fieldset { min-width: 0; border: 1px solid #384436; border-radius: .65rem; }
.grant-part-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.grant-part-choice { font-size: .75rem; }
.grant-part-choice .grant-preview { width: 60px; height: 60px; }
.delete-owned-item { grid-column: 1 / -1; font-size: .75rem; color: #ffb7ae; border-color: #75443d; margin-top: .35rem; }
.loadout-grid .owned-item > .owned-item-copy { display: none; }
.loadout-grid .delete-owned-item { width: 100%; padding: .35rem .1rem; font-size: .65rem; }
@media (max-width: 760px) { .grant-part-grid { grid-template-columns: 1fr; } }

.grant-preview .placeholder::before { content: none; }

.battle-table-wrap { overflow-x: auto; margin: 20px 0; }
.battle-table { width: 100%; border-collapse: collapse; text-align: left; }
.battle-table th, .battle-table td { padding: 12px; border-bottom: 1px solid #33424a; white-space: nowrap; }
.battle-builds { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 24px 0; }
[data-battle-detail] { margin-top: 28px; }
[data-battle-detail] details { padding: 16px; border: 1px solid #33424a; border-radius: 8px; }
[data-battle-detail] summary { cursor: pointer; }
[data-battle-filters] { flex-wrap: wrap; }

.console-login { width: min(420px, calc(100% - 40px)); margin: 12vh auto; }
.console-login form { display: grid; gap: 20px; margin-top: 32px; }
.console-login label { display: grid; gap: 10px; }
.console-login input { width: 100%; box-sizing: border-box; }
.console-login [data-error] { color: #e9a5a5; min-height: 1.5em; }