:root {
  color-scheme: dark;
  --ink: #f5f0e9;
  --muted: #9da1ad;
  --muted-2: #6e7381;
  --page: #202735;
  --page-deep: #171c28;
  --panel: #aeb1b7;
  --panel-light: #c9c9c7;
  --panel-dark: #777c85;
  --panel-edge: #2d3340;
  --slot: #8c9096;
  --slot-light: #a6a9ad;
  --slot-dark: #555b66;
  --purple: #8e68b8;
  --purple-light: #c7a8eb;
  --aqua: #52e2cb;
  --green: #72cf63;
  --red: #e25757;
  --gold: #efc95a;
  --radius: 6px;
  --warehouse-visible-rows: 9;
  --warehouse-row-height: 72px;
  --font-pixel: "Trebuchet MS", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { min-width: 1120px; height: 100dvh; overflow: hidden; background: var(--page); }

body {
  margin: 0;
  min-width: 1120px;
  height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font-pixel);
  letter-spacing: 0;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

.app-shell {
  display: flex;
  flex-direction: column;
  width: min(1600px, calc(100vw - 44px));
  height: calc(100dvh - 20px);
  min-width: 1080px;
  margin: 10px auto;
  padding: 14px;
  overflow: hidden;
  border: 2px solid #0f131b;
  border-radius: 8px;
  background: #272e3c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.topbar, .overview-strip, .workspace, .content-toolbar, .fake-detail-header, .container-modal-heading {
  display: flex;
  align-items: center;
}

.topbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; min-height: 56px; justify-content: stretch; gap: 18px; }

.brand-lockup { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-self: center; gap: 12px; min-width: 240px; transform: translateY(-10px); }
.brand-mark { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; align-items: end; width: 29px; height: 29px; padding: 4px; background: var(--aqua); border: 2px solid #112a33; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.brand-mark span { display: block; height: 9px; background: #1f4952; }
.brand-mark span:nth-child(2) { height: 16px; background: #2c7d7a; }
.brand-mark span:nth-child(3) { height: 21px; background: #c7f7e9; }
.eyebrow, .section-kicker { color: var(--aqua); font: 700 calc(10px * 1.5)/1 var(--font-mono); letter-spacing: .12em; }
.brand-lockup h1, h2, h3, p { margin: 0; }
.brand-lockup h1 { margin-top: 5px; font-size: calc(19px * 1.5); letter-spacing: .04em; }

.server-state { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-self: center; gap: 8px; color: var(--muted); font-size: calc(12px * 1.5); white-space: nowrap; }
.server-state .mono { color: #d9d6cd; }
.state-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(114, 207, 99, .14); }
.state-divider { width: 1px; height: 16px; background: #505869; margin: 0 5px; }
.mono { font-family: var(--font-mono); }

.top-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.toolbar-button, .account-button, .view-button, .dimension-chip, .minecraft-button { border: 1px solid #51596b; background: #333c4c; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.toolbar-button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 4px; color: #e9e6df; font-size: calc(12px * 1.5); }
.toolbar-button:hover, .account-button:hover, .view-button:hover, .dimension-chip:hover { border-color: var(--aqua); background: #3b4758; }
.toolbar-button:active, .account-button:active, .minecraft-button:active { transform: translateY(1px); }
.button-icon { color: var(--aqua); font-size: calc(18px * 1.5); line-height: 1; }
.account-button { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 4px 10px 4px 5px; border-radius: 5px; text-align: left; }
.account-avatar { display: grid; place-items: center; width: 31px; height: 31px; color: #1d242f; background: var(--gold); border: 2px solid #6d5420; font-weight: 800; }
.account-copy { display: grid; gap: 2px; }
.account-copy strong { font-size: calc(11px * 1.5); }
.account-copy small { color: var(--green); font-size: calc(10px * 1.5); }

.export-menu-wrap { position: relative; }
.export-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 116px; padding: 5px; border: 1px solid #586377; background: #242b39; box-shadow: 0 12px 24px rgba(0, 0, 0, .28); }
.export-menu button { display: block; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: #e8e4dc; text-align: left; cursor: pointer; font-size: calc(12px * 1.5); }
.export-menu button:hover { background: #384556; color: var(--aqua); }

.overview-strip { min-height: 78px; margin-top: 10px; padding: 8px 15px; gap: 0; border: 1px solid #3d4656; background: #222936; }
.overview-stat { display: grid; min-width: 128px; padding: 0 18px; border-right: 1px solid #3d4656; }
.overview-stat:first-child { padding-left: 2px; }
.overview-stat span, .overview-stat small, .last-sync { color: var(--muted); font-size: calc(11px * 1.5); }
.overview-stat strong { color: var(--ink); font: 700 calc(24px * 1.5)/1.15 var(--font-mono); }
.overview-stat small { color: var(--muted-2); margin-top: 3px; }
.last-sync { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 18px; white-space: nowrap; }
.last-sync strong { color: #d8d4cb; font: calc(13px * 1.5) var(--font-mono); }
.sync-line { width: 1px; height: 18px; background: #4a5362; }
.read-only { color: var(--aqua); }

.workspace { align-items: stretch; flex: 1; gap: 14px; margin-top: 10px; min-height: 0; }
.people-rail, .content-panel { border: 1px solid #4d5668; background: #2c3443; }
.people-rail { display: flex; flex: 0 0 260px; flex-direction: column; min-height: 0; padding: 14px; }
.content-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); min-width: 0; min-height: 0; flex: 1; padding: 14px; overflow: hidden; }
.rail-heading { display: flex; align-items: end; justify-content: space-between; padding-bottom: 14px; }
.rail-heading h2, .content-title-block h2 { margin-top: 5px; font-size: calc(20px * 1.5); letter-spacing: .02em; }
.rail-heading-actions { display: flex; align-items: center; gap: 6px; }
.rail-count { display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid #5b6677; background: #222a37; color: var(--aqua); font: calc(12px * 1.5) var(--font-mono); }
.clear-highlight-button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 1px solid #5b6677; color: #aeb8c7; background: #222a37; cursor: pointer; font-size: calc(17px * 1.5); line-height: 1; }
.clear-highlight-button:not(:disabled):hover { border-color: var(--red); color: #ffd8d8; background: #4a3036; }
.clear-highlight-button:disabled { opacity: .35; cursor: not-allowed; }

.search-box { display: flex; align-items: center; height: 38px; border: 1px solid #586377; background: #202733; }
.compact-search { width: 100%; }
.main-search { width: 320px; }
.search-symbol { width: 31px; color: #8f9aab; font-size: calc(23px * 1.5); line-height: 1; text-align: center; }
.search-box input { min-width: 0; flex: 1; height: 100%; padding: 0 7px; border: 0; outline: 0; color: #f4f0e9; background: transparent; font-size: calc(12px * 1.5); }
.search-box input::placeholder { color: #7b8594; }
.search-box kbd { margin-right: 8px; padding: 2px 5px; border: 1px solid #525d70; color: #929baa; font: calc(10px * 1.5) var(--font-mono); }
.dimension-filter { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 0; border-bottom: 1px solid #434d5e; }
.dimension-chip { padding: 5px 7px; border-color: transparent; background: #333c4c; color: #aeb7c4; font-size: calc(10px * 1.5); }
.dimension-chip.active { border-color: var(--aqua); color: #d6fff2; background: #2d5a5b; }

.player-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0; scrollbar-color: #707b8a #232b38; scrollbar-width: thin; }
.player-group-label { display: flex; align-items: center; gap: 7px; padding: 8px 2px 6px; color: var(--muted-2); font: calc(10px * 1.5) var(--font-mono); letter-spacing: .08em; }
.player-card { position: relative; display: grid; grid-template-columns: 33px 1fr auto; gap: 8px; align-items: center; min-height: 73px; margin: 3px 0; padding: 8px; border: 1px solid transparent; background: #303a4a; cursor: pointer; }
.player-card:hover { border-color: #718097; background: #364457; }
.player-card.selected { border-color: var(--aqua); background: #304f53; box-shadow: inset 3px 0 0 var(--aqua); }
.player-card.matching { border-color: var(--gold); background: #4c4734; box-shadow: inset 3px 0 0 var(--gold); }
.player-avatar { display: grid; place-items: center; width: 31px; height: 31px; border: 2px solid #596576; background: #626b7a; color: #e8e4dc; font-weight: 800; }
.player-card.online .player-avatar { border-color: var(--green); }
.player-card-copy { min-width: 0; }
.player-name { display: block; overflow: hidden; color: #f1eee8; font: calc(12px * 1.5) var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.player-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #98a2b1; font-size: calc(10px * 1.5); }
.player-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-meta .state-dot { width: 5px; height: 5px; flex-basis: 5px; box-shadow: none; }
.player-card.offline .player-meta .state-dot { background: #788292; }
.player-stats { display: grid; gap: 3px; color: #b9c0ca; font: calc(9px * 1.5) var(--font-mono); text-align: right; }
.player-stats span { white-space: nowrap; }
.rail-footer { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid #434d5e; color: #87919f; font-size: calc(10px * 1.5); }

.content-toolbar { align-items: flex-start; justify-content: space-between; gap: 18px; }
.content-title-block p { margin-top: 7px; color: var(--muted); font-size: calc(12px * 1.5); }
.content-controls { display: flex; align-items: center; gap: 8px; }
.view-switch { display: flex; gap: 4px; }
.view-button { display: grid; place-items: center; width: 38px; height: 38px; color: #aeb8c7; font-size: calc(19px * 1.5); }
.view-button.active { border-color: var(--aqua); color: #e3fff7; background: #315659; }

.category-tabs { display: flex; align-items: center; gap: 5px; margin-top: 12px; padding: 6px; overflow-x: auto; border: 1px solid #4a5567; background: #202733; scrollbar-color: #778394 #202733; }
.category-tab { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 112px; width: max-content; height: 62px; padding: 0 14px; overflow: hidden; border: 1px solid transparent; background: #2c3544; color: #b1b9c5; cursor: pointer; font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; font-size: calc(11px * 1.5); line-height: 1.05; text-align: center; }
.category-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-tab:hover { border-color: #718097; }
.category-tab.active { border-color: var(--aqua); background: #315658; color: #edfff9; }
.category-tab .tab-glyph { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border: 2px solid #5b6676; background: #777e89; color: #e8e5dc; }
.category-tab .tab-glyph img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.category-tab.active .tab-glyph { border-color: var(--aqua); background: #496d6e; }

.warehouse-summary { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 0 6px; color: var(--muted); font-size: calc(11px * 1.5); }
.summary-value { color: #e9e5dc; font: calc(13px * 1.5) var(--font-mono); }
.summary-separator { width: 1px; height: 16px; background: #536072; }
.summary-accent { color: var(--aqua); }
.owner-filter-note { margin-left: auto; color: var(--gold); font-size: calc(10px * 1.5); }

.creative-window { position: relative; display: grid; grid-template-columns: 1fr 14px; grid-template-rows: 26px minmax(0, 1fr); gap: 12px; min-height: 0; height: 100%; overflow: hidden; padding: 12px; border: 2px solid #151b26; background: var(--panel-light); box-shadow: inset 0 0 0 2px #575d65, inset 0 0 0 4px #e1e0dc; }
.creative-window-label { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 7px; color: #343941; font-size: calc(12px * 1.5); }
.creative-window-label .mono { color: #606671; font-size: calc(10px * 1.5); }
.creative-grid { display: grid; grid-row: 2; grid-template-columns: repeat(9, minmax(46px, 1fr)); grid-auto-rows: var(--warehouse-row-height); align-content: start; min-width: 0; min-height: 0; height: 100%; max-height: none; overflow-y: auto; padding: 2px; background: #6c7177; border: 2px solid #30363e; scrollbar-width: none; }
.creative-grid::-webkit-scrollbar { display: none; }
.scroll-rail { position: relative; grid-row: 2; align-self: stretch; width: 11px; height: 100%; border: 2px solid #565b63; background: #777c82; }
.scroll-thumb { position: absolute; left: -2px; right: -2px; top: 4px; height: 132px; border: 2px solid #494e56; background: #c6c7c4; box-shadow: inset 0 0 0 2px #9fa2a4; cursor: grab; touch-action: none; }
.scroll-thumb:hover { background: #e2e2dc; }
.scroll-thumb.dragging { background: #f1f1e8; cursor: grabbing; }

.item-slot { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; border: 2px solid #3e444b; background: var(--slot); box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark); cursor: pointer; }
.item-slot:hover { z-index: 3; background: #9a9da0; box-shadow: inset 2px 2px 0 #d7d7d2, inset -2px -2px 0 #454a52, 0 0 0 2px var(--aqua); }
.item-slot.empty { cursor: default; }
.item-slot.empty:hover { z-index: auto; box-shadow: inset 2px 2px 0 var(--slot-light), inset -2px -2px 0 var(--slot-dark); }
.item-slot.zero .pixel-item { filter: grayscale(1); opacity: .35; }
.item-slot.zero { background: #85888d; }
.pixel-item { position: relative; display: grid; place-items: center; width: 49px; height: 49px; color: #f4efe7; font: 700 calc(11px * 1.5) var(--font-mono); text-shadow: 1px 1px 0 #1b2028; user-select: none; }
.pixel-item::before, .pixel-item::after { content: ""; position: absolute; pointer-events: none; }
.pixel-item::before { inset: 0; border: 0; background-color: transparent; background-image: var(--item-image); background-position: center; background-repeat: no-repeat; background-size: contain; box-shadow: none; transform: none; image-rendering: pixelated; }
.pixel-item::after { display: none; }
.pixel-item span { position: relative; z-index: 1; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.pixel-item.tone-stone { --item-color: #b1b5b2; }
.pixel-item.tone-iron { --item-color: #d7e0dd; color: #303942; text-shadow: 1px 1px 0 #fff; }
.pixel-item.tone-diamond { --item-color: #55d4d6; }
.pixel-item.tone-emerald { --item-color: #48bd65; }
.pixel-item.tone-gold { --item-color: #e6bb3f; color: #49330b; text-shadow: 1px 1px 0 #ffe48a; }
.pixel-item.tone-red { --item-color: #b64e51; }
.pixel-item.tone-purple { --item-color: #9c63b5; }
.pixel-item.tone-green { --item-color: #6fae50; }
.pixel-item.tone-wood { --item-color: #9c6539; }
.pixel-item.tone-dark { --item-color: #3c4652; }
.pixel-item.tone-blue { --item-color: #5d87c9; }
.pixel-item.tone-food { --item-color: #dc9450; }
.pixel-item.enchanted::before { filter: drop-shadow(0 0 5px rgba(214, 139, 255, .9)); }
.pixel-item.container::before { filter: drop-shadow(0 0 3px rgba(240, 191, 247, .45)); }
.stack-count { position: absolute; right: 5px; bottom: 4px; z-index: 2; color: #fff; font: 700 calc(14px * 1.5) var(--font-mono); text-shadow: 2px 2px 0 #222832; }
.slot-status { position: absolute; right: 3px; top: 3px; z-index: 4; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #252b34; border-radius: 50%; color: #152018; font: 700 calc(11px * 1.5)/1 var(--font-mono); }
.slot-status.good { background: var(--green); }
.slot-status.zero { color: #fff; background: var(--red); }
.slot-status.empty-status { display: none; }
.durability-bar { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; background: #383d42; z-index: 2; }
.durability-bar span { display: block; height: 100%; background: var(--green); }
.container-badge { position: absolute; left: 4px; top: 4px; z-index: 4; padding: 2px 3px; color: #1e1524; background: #f1c8ff; font: 700 calc(8px * 1.5) var(--font-mono); }

.table-view { min-height: 570px; padding: 2px 0; border: 2px solid #151b26; background: var(--panel-light); box-shadow: inset 0 0 0 2px #575d65, inset 0 0 0 4px #e1e0dc; }
.table-head, .item-row { display: grid; grid-template-columns: minmax(210px, 270px) minmax(220px, 1fr) 150px 150px 90px; align-items: center; gap: 14px; }
.table-head { min-height: 40px; padding: 0 16px; border-bottom: 2px solid #777b81; color: #3e444c; font: calc(11px * 1.5) var(--font-mono); }
.item-table { max-height: 526px; overflow-y: auto; }
.item-row { min-height: 66px; padding: 5px 16px; border-bottom: 1px solid #85888c; color: #333943; }
.item-row:hover { background: #dddcd7; }
.table-item-name { display: flex; align-items: center; min-width: 0; gap: 10px; cursor: pointer; }
.table-item-name .pixel-item { flex: 0 0 46px; }
.table-item-copy { min-width: 0; }
.table-item-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * 1.5); }
.table-item-copy small { display: block; margin-top: 4px; overflow: hidden; color: #6b7077; font: calc(10px * 1.5) var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.table-item-id { min-width: 0; overflow: hidden; color: #2f77d0; font: 700 calc(11px * 1.5) var(--font-mono); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.table-number { color: #303841; font: 700 calc(13px * 1.5) var(--font-mono); }
.table-number small { display: block; margin-top: 3px; color: #767b84; font: calc(10px * 1.5) var(--font-mono); }
.table-status { display: flex; align-items: center; gap: 7px; color: #3d7a43; font: calc(11px * 1.5) var(--font-mono); }
.table-status.zero { color: #a53b3b; }
.status-badge { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #303640; border-radius: 50%; color: #17201a; font-weight: 800; background: var(--green); }
.table-status.zero .status-badge { color: #fff; background: var(--red); }

.empty-state { display: grid; justify-items: center; min-height: 430px; padding-top: 120px; color: #3e444b; background: var(--panel-light); border: 2px solid #151b26; box-shadow: inset 0 0 0 2px #575d65, inset 0 0 0 4px #e1e0dc; }
.empty-state[hidden] { display: none; }
.empty-glyph { display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid #6f747a; color: #6f747a; font-size: calc(29px * 1.5); }
.empty-state h3 { margin-top: 15px; font-size: calc(16px * 1.5); }
.empty-state p { margin-top: 7px; color: #71767d; font-size: calc(12px * 1.5); }

.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 30px; background: rgba(9, 13, 20, .72); }
.modal-backdrop[hidden] { display: none; }
#item-modal { z-index: 120; }
#container-modal { z-index: 110; }
.item-tooltip-modal, .container-modal, .fake-detail-modal { position: relative; width: min(580px, calc(100vw - 60px)); border: 3px solid #10151d; background: #0d1017; box-shadow: inset 0 0 0 2px #3e4b50, 0 24px 80px rgba(0, 0, 0, .6); }
.item-tooltip-modal { padding: 24px; }
.modal-close { position: absolute; z-index: 4; top: 9px; right: 9px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; overflow: hidden; border: 2px solid #a93c43; border-radius: 50%; color: transparent; background: var(--red); cursor: pointer; font-size: 0; line-height: 0; text-indent: -999px; }
.modal-close::before { content: "×"; display: block; width: 100%; height: 100%; color: #fff; font: 800 22px/28px Arial, sans-serif; text-align: center; text-indent: 0; transform: translateY(-1px); }
.modal-close:hover { background: #fa6868; }
.tooltip-heading { display: flex; align-items: center; gap: 15px; padding-right: 34px; }
.tooltip-icon-wrap { display: grid; place-items: center; width: 66px; height: 66px; border: 2px solid #5b6873; background: #58606b; }
.tooltip-icon-wrap .pixel-item { transform: scale(1.1); }
.tooltip-rarity { color: var(--purple-light); font: calc(11px * 1.5) var(--font-mono); }
.tooltip-heading h2 { margin-top: 4px; color: #f5f1eb; font-size: calc(21px * 1.5); }
.tooltip-heading p { margin-top: 5px; color: #778897; font-size: calc(10px * 1.5); }
.tooltip-detail-lines { display: grid; gap: 7px; margin-top: 18px; padding: 14px; border-top: 1px solid #273a3d; border-bottom: 1px solid #273a3d; color: #d9dedc; font-size: calc(12px * 1.5); }
.tooltip-detail-lines .accent { color: var(--aqua); }
.tooltip-detail-lines .enchant { color: #d2a7ff; }
.tooltip-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.minecraft-button { min-height: 37px; padding: 0 12px; color: #dedbd5; font-size: calc(11px * 1.5); }
.minecraft-button.primary { border-color: #51b9a9; background: #315c5e; color: #e4fff8; }

.container-modal { width: min(720px, calc(100vw - 60px)); padding: 22px; border-color: #0f1920; box-shadow: inset 0 0 0 3px var(--aqua), 0 24px 80px rgba(0, 0, 0, .72); }
.container-modal-heading { align-items: center; gap: 14px; padding: 6px 44px 16px 3px; }
.container-modal-icon { display: grid; place-items: center; width: 53px; height: 53px; border: 2px solid #647278; background: #4a5660; }
.container-modal-icon::after { content: none; }
.container-modal-icon .pixel-item { transform: scale(.94); }
.container-modal-heading h2 { margin-top: 4px; font-size: calc(20px * 1.5); }
.container-modal-heading p { margin-top: 5px; color: var(--aqua); font: calc(11px * 1.5) var(--font-mono); }
.container-grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 60px; gap: 3px; padding: 9px; border: 2px solid #4a5057; background: #666c73; }
.container-grid .item-slot { min-height: 0; }

.fake-detail-modal { width: min(1290px, calc(100vw - 60px)); max-height: calc(100vh - 60px); padding: 20px; overflow: auto; background: #252d3a; }
.fake-detail-header { justify-content: space-between; gap: 20px; padding: 2px 2px 16px; border-bottom: 1px solid #4a5668; }
.fake-detail-header h2 { margin-top: 6px; font-size: calc(21px * 1.5); }
.fake-detail-header p { margin-top: 5px; color: #a9b1bd; font-size: calc(11px * 1.5); }
.fake-detail-actions { display: flex; align-items: center; gap: 10px; padding-right: 35px; }
.fake-containers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.inventory-panel { padding: 12px; border: 2px solid #151b26; background: var(--panel-light); box-shadow: inset 0 0 0 2px #575d65, inset 0 0 0 4px #e1e0dc; }
.inventory-panel-heading { display: flex; align-items: end; justify-content: space-between; height: 42px; padding: 0 3px 8px; color: #333943; }
.inventory-panel-heading h3 { font-size: calc(16px * 1.5); }
.inventory-panel-heading span { color: #68717b; font: calc(10px * 1.5) var(--font-mono); }
.inventory-grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 56px; gap: 2px; padding: 6px; background: #6c7177; border: 2px solid #30363e; }
.inventory-panel.ender .inventory-grid { grid-auto-rows: 58px; }
.inventory-lower { margin-top: 10px; }
.inventory-caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: #646a73; font: calc(10px * 1.5) var(--font-mono); }
.inventory-grid .item-slot { min-height: 0; }
.inventory-grid .item-slot.selected-item, .container-grid .item-slot.selected-item { outline: 3px solid var(--gold); outline-offset: -3px; }
.inventory-grid .pixel-item { transform: scale(.86); }

.toast { position: fixed; z-index: 120; right: 28px; bottom: 24px; min-width: 180px; padding: 12px 14px; border: 1px solid #5ac3b1; background: #1b3539; color: #e5fff9; box-shadow: 0 12px 28px rgba(0, 0, 0, .32); font-size: calc(12px * 1.5); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1240px) {
  .app-shell { width: calc(100vw - 22px); margin: 11px auto; }
  .main-search { width: 260px; }
  .overview-stat { min-width: 112px; padding: 0 11px; }
  .fake-containers { grid-template-columns: 1fr; }
}

/* Minecraft world backdrop: the warehouse surfaces stay opaque gray; only the chrome follows the scene. */
:root {
  --ink: #f7f0fb;
  --muted: #c1b2c8;
  --muted-2: #8f7b98;
  --page: #1d142d;
  --page-deep: #100b19;
  --panel-edge: #3a2844;
  --purple: #a774d4;
  --purple-light: #e2b9f4;
  --aqua: #e8b1ed;
}

html { background: #160f22; }

body {
  position: relative;
  isolation: isolate;
  background: #1d142d url("assets/backgrounds/minecraft-world.png") center 34% / cover fixed no-repeat;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background: rgba(24, 12, 39, .24);
}

.app-shell {
  position: relative;
  z-index: 1;
  border-color: #1a1025;
  background: rgba(39, 25, 55, .84);
  box-shadow: 0 24px 70px rgba(13, 6, 22, .48), inset 0 0 0 1px rgba(255, 224, 255, .08);
  backdrop-filter: blur(3px);
}

.server-state .mono { color: #f0d9ee; }
.state-divider { background: #73577f; }

.toolbar-button, .account-button, .view-button, .dimension-chip, .minecraft-button {
  border-color: #765682;
  background: #3d2a4c;
}

.toolbar-button:hover, .account-button:hover, .view-button:hover, .dimension-chip:hover {
  border-color: var(--aqua);
  background: #563967;
}

.button-icon, .read-only { color: var(--aqua); }
.account-button { background: #382546; }
.account-copy small { color: var(--green); }

.export-menu { border-color: #765682; background: #281a36; }
.export-menu button:hover { background: #513465; color: var(--aqua); }

.overview-strip {
  border-color: #674b73;
  background: rgba(38, 25, 54, .88);
}

.overview-stat { border-right-color: #674b73; }
.sync-line { background: #6b4f76; }

.people-rail, .content-panel {
  border-color: #76577f;
  background: rgba(51, 33, 65, .94);
}

.rail-count, .clear-highlight-button { border-color: #76577f; background: #2e1d3b; }
.dimension-filter { border-bottom-color: #61466d; }
.dimension-chip.active { border-color: var(--aqua); background: #63436d; }
.player-list { scrollbar-color: #8d6b94 #281b35; }
.player-card { background: #3a274b; }
.player-card:hover { border-color: #a987af; background: #493157; }
.player-card.selected { border-color: var(--aqua); background: #523b61; box-shadow: inset 3px 0 0 var(--aqua); }
.player-card.matching { background: #554333; }
.rail-footer { border-top-color: #61466d; }

.content-title-block p { color: #c1b2c8; }
.category-tabs { border-color: #76577f; background: #291a37; scrollbar-color: #8d6b94 #291a37; }
.category-tab { background: #3b284b; color: #d2c2d8; }
.category-tab:hover { border-color: #af8ab5; }
.category-tab.active { border-color: var(--aqua); background: #62436d; color: #fff1ff; }
.category-tab .tab-glyph { border-color: #81618b; background: #73637a; }
.category-tab.active .tab-glyph { border-color: var(--aqua); background: #89618d; }
.summary-value { color: #f3e9f4; }
.summary-separator { background: #765780; }

.modal-backdrop { background: rgba(16, 7, 25, .78); }
.item-tooltip-modal, .container-modal { border-color: #28132f; background: #1c1226; box-shadow: inset 0 0 0 2px #62426d, 0 24px 80px rgba(10, 4, 17, .72); }
.fake-detail-modal { background: #281c37; }
.container-modal { box-shadow: inset 0 0 0 3px var(--aqua), 0 24px 80px rgba(10, 4, 17, .72); }
.toast { border-color: #d98bd7; background: #38213f; }