@font-face { font-family: 'Noto Sans'; src: url('/media/NotoSans-Regular.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; font-family: 'Noto Sans', sans-serif; background: #090d12; color: #e7eef8; }
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #52637c #111923; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% 0, #223149, transparent 40rem), #090d12; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 2rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid #293648; }
main { padding: 1.5rem clamp(1rem, 4vw, 4rem) 4rem; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); } h2, h3 { margin: .5rem 0; }
.eyebrow, .kind { color: #deb966; font-size: .7rem; letter-spacing: .12em; }
.lede, .muted, small { color: #98a8be; } .identity { color: #98a8be; font: .75rem monospace; overflow-wrap: anywhere; }
button { border: 1px solid #42536c; border-radius: .55rem; background: #172231; color: #e7eef8; padding: .65rem .85rem; cursor: pointer; font: inherit; font-size: .85rem; }
button:hover, button.active { border-color: #deb966; background: #293246; } button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #deb966; outline-offset: 2px; }
input, select { width: 100%; border: 1px solid #42536c; border-radius: .5rem; background: #0d1622; color: #e7eef8; padding: .65rem; font: inherit; }
input[type=checkbox] { width: auto; } label { display: grid; gap: .4rem; font-size: .8rem; color: #adbad0; }
.section-tabs, .actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-heading, .player-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; }
.player-admin { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; }
.player-list { display: grid; align-content: start; gap: .5rem; max-height: 80vh; overflow: auto; }
.player-row { display: grid; gap: .35rem; text-align: left; } .player-row span { font-size: .8rem; } .player-row small { overflow-wrap: anywhere; }
.player-detail { min-width: 0; } .panel { padding: 1rem; border: 1px solid #293648; border-radius: .8rem; background: #111a26; margin-bottom: 1rem; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; }
.admin-stats span { background: #182435; border: 1px solid #32465e; border-radius: .7rem; padding: 1rem; font-size: 1.4rem; color: #ebc778; } .admin-stats small { display: block; font-size: .7rem; }
form[data-wallet], .toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; gap: .75rem; }
.equipped-grid, .house-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.equipped-grid article, .house-grid article { display: grid; align-content: start; gap: .6rem; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .75rem; max-height: 650px; overflow: auto; }
.cosmetic-card { display: grid; align-content: start; gap: .5rem; padding: .75rem; border: 1px solid #34445b; border-radius: .7rem; background: #0c1420; }
.cosmetic-preview { aspect-ratio: 1; display: grid; place-items: center; padding: .5rem; overflow: hidden; background: radial-gradient(circle, #24364e, #0d1622); border-radius: .5rem; text-align: center; }
.cosmetic-preview img { width: 100%; height: 100%; object-fit: contain; } .cosmetic-preview strong { font-size: 1.1rem; overflow-wrap: anywhere; }
pre { overflow: auto; max-height: 550px; background: #080e17; border-radius: .5rem; padding: 1rem; font-size: .75rem; }
summary { cursor: pointer; color: #e1c589; padding: .5rem 0; } .empty { color: #8798b0; padding: 2rem; text-align: center; grid-column: 1 / -1; }
.notice { position: sticky; top: .75rem; z-index: 2; background: #233b2c; border: 1px solid #4f855e; border-radius: .5rem; padding: .8rem; }
.notice.error { background: #3c2027; border-color: #955160; }
.console-login { width: min(420px, calc(100% - 2rem)); margin: 10vh auto; padding: 0; } .console-login form { display: grid; gap: 1rem; } .console-login [data-error] { color: #f2a8ad; }
.storage-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:1.5rem; }
.storage-sidebar { display:flex; flex-direction:column; gap:.8rem; border-right:1px solid #44404b; padding-right:1.5rem; }
.storage-editor { min-width:0; } .storage-editor label { display:grid; gap:.5rem; }
.storage-editor textarea { width:100%; box-sizing:border-box; background:#17181f; color:#e4e2ee; border:1px solid #4d475c; border-radius:10px; padding:1rem; resize:vertical; tab-size:2; font:14px/1.6 ui-monospace,Consolas,monospace; }
.storage-key { display:flex; flex-direction:column; text-align:left; gap:.4rem; width:100%; margin:.4rem 0; overflow-wrap:anywhere; }
.storage-key small,.muted { color:#b4afc4; } .eyebrow { color:#d2b678; letter-spacing:.16em; font-size:.7rem; margin-bottom:.4rem; }
.storage-actions,.storage-pages { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:.8rem 0; }
.storage-status { min-height:1.8rem; color:#a4cfb2; font-size:.85rem; } .storage-status.error { color:#efa5a9; }
.file-button { padding:.6rem .85rem; background:#35313f; border:1px solid #5d526a; border-radius:7px; cursor:pointer; } .file-button input { position:absolute; width:1px; height:1px; opacity:0; }
.json-preview { border:1px solid #40394b; border-radius:10px; margin:1rem 0; background:#1c1b23; } .json-preview summary { padding:.9rem; cursor:pointer; color:#dbc591; overflow-wrap:anywhere; }
.json-preview pre { margin:0; padding:1rem; overflow:auto; max-height:520px; background:#15151c; font:13px/1.7 ui-monospace,Consolas,monospace; }
.json-key { color:#d4bb83; } .json-string { color:#a7d0ab; } .json-literal { color:#b6a6ea; }
.storage-busy .storage-editor { pointer-events:none; opacity:.65; }
@media(max-width:850px) { .storage-layout {grid-template-columns:1fr;} .storage-sidebar {border-right:0;padding-right:0;} }
@media (max-width: 850px) { .player-admin { grid-template-columns: 1fr; } .player-list { max-height: 260px; } .admin-stats { grid-template-columns: repeat(2, 1fr); } .section-heading { flex-wrap: wrap; } header { align-items: start; } }