:root {
  --bg: #070b07;
  --field: #263f24;
  --panel: #11180f;
  --panel-2: #1a2416;
  --panel-3: #22311b;
  --text: #f2f7e8;
  --muted: #a9b59d;
  --line: #34472e;
  --gold: #e9b94e;
  --accent: #bde86f;
  --accent-2: #78d09b;
  --danger: #e36b5f;
  --stone: #4b4a3f;
  --stone-dark: #25251f;
  --parchment: #d8c89d;
  --ink: #2a2116;
  --shadow: 0 18px 60px rgb(0 0 0 / 44%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Admin Studio — one focused workspace, not a stack of debug forms. */
.adminWindow {
  inset: 0 !important;
  z-index: 82;
  width: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0c100c !important;
  box-shadow: none !important;
}

.adminWindow > .windowHead {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 18px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.adminWindow > .windowHead h2 { display: none; }
.adminWindow > .windowHead .iconBtn {
  width: 38px;
  height: 38px;
  border-color: rgb(255 255 255 / 12%);
  background: #181d17;
}

.adminPanel,
.adminShell { height: 100%; min-height: 0; }

.adminShell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  color: #eef1e7;
  background: #0c100c;
}

.adminNav {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 24px;
  padding: 24px 14px;
  border-right: 1px solid rgb(255 255 255 / 8%);
  background: #111510;
}

.adminBrand { display: grid; gap: 4px; padding: 0 10px; }
.adminBrand strong { font-size: 19px; letter-spacing: -.02em; }
.adminBrand small { color: #8e9887; font-size: 11px; text-transform: capitalize; }
.adminBrand .eyebrow,
.adminPageHead .eyebrow { color: #b7d66c; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }

.adminNav nav { display: grid; gap: 3px; }
.adminNav button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  color: #c5ccbe;
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.adminNav button:hover { color: #f4f7ed; background: rgb(255 255 255 / 5%); }
.adminNav button.active { color: #f4f7ed; background: #20271d; box-shadow: inset 3px 0 #b7d66c; }
.adminNav button span { font-size: 13px; font-weight: 750; }
.adminNav button small { color: #7f8978; font-size: 10px; }
.adminNav button.active small { color: #aeb8a5; }

.adminWorkspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 30px clamp(24px, 4vw, 58px) 64px;
  scrollbar-gutter: stable;
}

.adminView { display: none; width: min(1180px, 100%); margin: 0 auto; }
.adminView.active { display: block; }

.adminPageHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 52px 28px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}
.adminPageHead h2 { margin: 4px 0 5px; color: #f3f5ed; font-size: 25px; letter-spacing: -.035em; }
.adminPageHead p { max-width: 650px; margin: 0; color: #98a191; font-size: 13px; line-height: 1.55; }

.adminMetrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; background: rgb(255 255 255 / 8%); }
.adminMetrics article { display: grid; gap: 5px; padding: 18px; background: #141913; }
.adminMetrics span { color: #8f9988; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.adminMetrics strong { color: #f1f4eb; font-size: 26px; }
.adminMetrics small { color: #808a79; font-size: 11px; }

.adminStartGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.adminStartGrid button { display: grid; gap: 5px; min-height: 88px; padding: 16px 18px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; color: #edf1e6; background: #141913; text-align: left; box-shadow: none; }
.adminStartGrid button:hover { border-color: rgb(183 214 108 / 30%); background: #192017; }
.adminStartGrid strong { font-size: 14px; }
.adminStartGrid span { color: #8d9786; font-size: 12px; }

.adminView .adminSection {
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 9px;
  background: #131812;
}
.adminView .adminSection + .adminSection { margin-top: 14px; }

.adminPlayerToolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; color: #818b7a; font-size: 11px; }
.adminPlayerSearch { display: flex; align-items: center; gap: 9px; width: min(440px, 100%); height: 40px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 8px; background: #131812; }
.adminPlayerSearch:focus-within { border-color: rgb(183 214 108 / 48%); box-shadow: 0 0 0 3px rgb(183 214 108 / 8%); }
.adminPlayerSearch > span { color: #98a68e; font-size: 19px; }
.adminPlayerSearch input { width: 100%; height: 100%; padding: 0; border: 0; color: #edf1e8; background: transparent; outline: 0; }
.adminPlayerList { display: grid; gap: 2px; padding: 6px !important; }
.adminPlayerRow { display: grid; grid-template-columns: minmax(220px, 1fr) 120px 100px; align-items: center; gap: 18px; width: 100%; min-height: 62px; padding: 10px 14px; border: 0; border-radius: 6px; color: #e8ede3; background: transparent; text-align: left; box-shadow: none; }
.adminPlayerRow:hover { background: #1b2119; }
.adminPlayerIdentity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.adminPlayerIdentity > span, .adminPlayerMeta { display: grid; gap: 3px; min-width: 0; }
.adminPlayerIdentity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.adminPlayerIdentity small, .adminPlayerMeta small { color: #7f8978; font-size: 10px; }
.adminPlayerMeta { justify-items: end; }
.adminPlayerMeta strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.adminPlayerOpen { justify-self: end; color: #a9bd7b; font-size: 11px; font-weight: 750; }
.adminPresence { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #50594c; box-shadow: 0 0 0 3px rgb(255 255 255 / 4%); }
.adminPresence.online { background: #a9d85a; box-shadow: 0 0 0 3px rgb(169 216 90 / 12%); }

.adminPlayerDrawer { position: fixed; inset: 0; z-index: 12000; display: flex; justify-content: flex-end; }
.adminPlayerBackdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgb(0 0 0 / 62%); box-shadow: none; cursor: default; }
.adminPlayerDrawer > aside { position: relative; width: min(620px, 94vw); height: 100%; padding: 24px; overflow-y: auto; border-left: 1px solid rgb(255 255 255 / 11%); color: #edf1e8; background: #10140f; box-shadow: -24px 0 60px rgb(0 0 0 / 45%); }
.adminPlayerDrawerHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.adminPlayerDrawerHead h2 { margin: 4px 0 5px; font-size: 24px; letter-spacing: -.035em; }
.adminPlayerDrawerHead p { display: flex; align-items: center; gap: 7px; margin: 0; color: #929c8b; font-size: 12px; }
.iconButton { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgb(255 255 255 / 10%); border-radius: 7px; color: #cdd4c7; background: #181d17; box-shadow: none; font-size: 20px; }
.adminPlayerSummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 18px 0; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: rgb(255 255 255 / 8%); }
.adminPlayerSummary article { display: grid; gap: 4px; padding: 13px 14px; background: #171c16; }
.adminPlayerSummary span { color: #818b7b; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.adminPlayerSummary strong { font-size: 18px; }
.adminPlayerActionCard { margin-top: 10px; padding: 14px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: #151a14; }
.adminPlayerActionCard > header { display: grid; gap: 3px; margin-bottom: 11px; }
.adminPlayerActionCard > header strong { font-size: 13px; }
.adminPlayerActionCard > header span { color: #879080; font-size: 11px; }
.adminPlayerActionCard form { display: grid; grid-template-columns: minmax(0, 1fr) 82px auto; gap: 7px; }
.adminPlayerActionCard form[data-admin-player-gold] { grid-template-columns: minmax(0, 1fr) auto; }
.adminPlayerActionCard select, .adminPlayerActionCard input { min-width: 0; }
.adminPlayerDataGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.adminPlayerDataGrid > div { min-width: 0; }
.adminPlayerDataGrid h3 { margin: 0 0 8px; color: #9ca694; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.adminPlayerDataGrid ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.adminPlayerDataGrid li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 4px; color: #c8cfc2; background: #161b15; font-size: 10px; }
.adminPlayerDataGrid li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adminPlayerDataGrid li strong { color: #eef2e8; }
.adminPlayerDataGrid li.empty { color: #70796a; font-style: italic; }
.adminPlayerModeration { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 9%); }
.adminPlayerModeration header { display: grid; gap: 3px; margin-bottom: 10px; }
.adminPlayerModeration header strong { font-size: 13px; }
.adminPlayerModeration header span { color: #828c7b; font-size: 11px; }
.adminPlayerModeration > div { display: flex; flex-wrap: wrap; gap: 7px; }
.mini.danger { border-color: rgb(225 91 82 / 30%); color: #f3a49e; background: rgb(225 91 82 / 8%); }

@media (max-width: 720px) {
  .adminPlayerRow { grid-template-columns: minmax(0, 1fr) auto; }
  .adminPlayerMeta { display: none; }
  .adminPlayerDrawer > aside { width: 100%; padding: 18px; }
  .adminPlayerDataGrid { grid-template-columns: 1fr; }
  .adminPlayerActionCard form { grid-template-columns: minmax(0, 1fr) 70px; }
  .adminPlayerActionCard form button { grid-column: 1 / -1; }
}
.adminSectionTitle { display: grid; gap: 3px; margin-bottom: 15px; }
.adminSectionTitle strong { color: #eef1e8; font-size: 14px; }
.adminSectionTitle span,
.adminHelp { color: #8f9988; font-size: 11px; line-height: 1.5; }

.equippedItemBuilder { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.itemWorkflow { display: flex; gap: 3px; overflow-x: auto; margin: 0 0 8px; padding: 4px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: #0d110d; }
.itemWorkflow button { position: relative; flex: 1 0 auto; min-width: 92px; padding: 9px 24px 9px 9px; border: 0; border-radius: 5px; color: #778071; background: transparent; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-align: left; text-transform: uppercase; cursor: pointer; }
.itemWorkflow button span { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 5px; border: 1px solid #3d4638; border-radius: 50%; }
.itemWorkflow button i { position: absolute; right: 8px; color: #b7d66c; font-style: normal; }
.itemWorkflow button.active { color: #f0f6e7; background: #28351d; }
.itemWorkflow button.done { color: #dff3a7; }
.itemWorkflowGuide { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 11px 13px; border: 1px solid rgb(183 214 108 / 18%); border-radius: 8px; background: #11170f; }
.itemWorkflowGuide > div:first-child { display: grid; gap: 2px; }
.itemWorkflowGuide strong { color: #e8efe1; }
.itemWorkflowGuide small { color: #8f9a87; }
.itemWorkflowActions { display: flex; gap: 6px; flex: 0 0 auto; }
.equippedItemBuilder .adminSectionTitle,
.equippedItemBuilder .assetMetaLine { grid-column: 1 / -1; }
.itemPreviewPane { position: sticky; top: 0; padding: 12px; border-radius: 8px; background: #0d110d; }
.itemPreviewHead { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.itemPreviewHead > div { display: grid; gap: 3px; }
.itemPreviewHead button { align-self: center; }
body.itemPreviewOpen { overflow: hidden; }
.itemPreviewPane.expanded { position: fixed; inset: 14px; z-index: 10000; display: grid; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px; padding: 16px; overflow: auto; border: 1px solid rgb(183 214 108 / 32%); box-shadow: 0 24px 80px rgb(0 0 0 / 78%); }
.itemPreviewPane.expanded .itemPreviewHead { grid-column: 1 / -1; }
.itemPreviewPane.expanded .itemPreviewCanvas { grid-column: 1; grid-row: 2 / span 6; width: 100%; height: calc(100vh - 100px); min-height: 480px; }
.itemPreviewPane.expanded .itemFitToolbar,
.itemPreviewPane.expanded .itemPreviewControls,
.itemPreviewPane.expanded .itemMediaTools,
.itemPreviewPane.expanded .adminHelp { grid-column: 2; margin-top: 0; align-self: start; }
.itemPreviewPane.expanded .itemFitToolbar { display: grid; }
.itemPreviewPane.expanded .itemFitModes,
.itemPreviewPane.expanded .itemFitActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itemPreviewPane.expanded .itemPreviewControls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.itemPreviewCanvas { height: 390px; border-color: rgb(255 255 255 / 9%); border-radius: 6px; background: radial-gradient(circle at 50% 38%, #253020, #080b08 72%); }
.itemMediaTools { display: grid; gap: 9px; margin-top: 10px; }
.itemPreviewControls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.itemFitToolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 7px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: #151b13; }
.itemFitCopy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; flex: 1 0 100%; }
.itemFitCopy select { min-width: 0; }
.itemFitModes,.itemFitActions { display: flex; flex-wrap: wrap; gap: 5px; }
.itemFitToolbar button.active { border-color: #b7d66c; color: #eaffb8; background: #28351d; }
.itemFitToolbar kbd { margin-left: 3px; color: #7e8a75; font: 9px/1 ui-monospace,monospace; }
.bodyMaskGrid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 9px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: #0c100c; }
.bodyMaskGrid .checkLine { min-height: 30px; margin: 0; }
.assetImportReport { display: grid; gap: 8px; padding: 11px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: #0c100c; color: #929c8a; font-size: 10px; }
.assetReportHead { display: flex; justify-content: space-between; gap: 10px; }
.assetImportReport strong.ok { color: #b7d66c; }
.assetImportReport strong.warn { color: #e4bf67; }
.assetImportReport strong.bad { color: #ff877b; }
.assetReportMetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.assetReportMetrics span { padding: 6px; border-radius: 4px; background: rgb(255 255 255 / 4%); }
.assetImportReport ul,.assetImportReport p { margin: 0; padding-left: 16px; line-height: 1.45; }
.assetImportReport p { padding-left: 0; }
.itemMediaTools form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; padding: 10px; background: #151b13; border-radius: 6px; }
.itemUploadStatus { grid-column: 1 / -1; color: #899482; font-size: 10px; line-height: 1.35; }
.itemUploadStatus[data-state="pending"] { color: #e4bf67; }
.itemUploadStatus[data-state="ok"] { color: #b7d66c; }
.itemUploadStatus[data-state="error"] { color: #ff877b; }
.itemMediaTools label { display: grid; gap: 5px; color: #aab3a3; font-size: 11px; }
.itemMediaTools input[type="file"] { min-width: 0; max-width: 100%; color: #dbe3d4; font-size: 11px; }
.itemIconPreview { width: 72px; height: 72px; padding: 6px; object-fit: contain; image-rendering: auto; border: 1px solid rgb(255 255 255 / 12%); border-radius: 6px; background: #090d09; }
.itemIcon { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 45%)); }
.itemIcon.small { width: 30px; height: 30px; }
.itemIconFallback { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; color: #d7c27e; background: #20271c; border-radius: 4px; font-weight: 850; }
.slot .itemIcon { display: block; margin: 0 auto 3px; }
.tradeRow { align-items: center; }
.lootLabel.hasItemIcon { padding-left: 34px; background-repeat: no-repeat; background-position: 7px center; background-size: 22px 22px; }

.adminItemForm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
.adminItemForm > label:not(.checkLine) { display: grid; align-content: start; gap: 5px; color: #9ca594; font-size: 10px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.adminItemForm input,
.adminItemForm select,
.adminItemForm textarea,
.socketTunerForm input,
.socketTunerForm select {
  min-height: 39px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 6px;
  color: #eef1e8;
  background: #0c100c;
}
.adminItemForm input:focus,
.adminItemForm select:focus,
.socketTunerForm input:focus,
.socketTunerForm select:focus { outline: 2px solid rgb(183 214 108 / 35%); outline-offset: 1px; border-color: #8fa850; }
.adminSpan2,
.adminFieldGroup { grid-column: 1 / -1; }
.adminFieldGroup { display: grid; gap: 2px; margin-top: 5px; padding: 12px 0 2px; border-top: 1px solid rgb(255 255 255 / 7%); }
.adminFieldGroup strong { color: #dfe5d8; font-size: 12px; }
.adminFieldGroup span { color: #7f8978; font-size: 10px; }
.adminItemForm [data-item-types] { display: none; }
.adminItemForm [hidden] { display: none !important; }
.adminItemForm[data-item-kind="weapon"] [data-item-types~="weapon"],
.adminItemForm[data-item-kind="armour"] [data-item-types~="armour"],
.adminItemForm[data-item-kind="tool"] [data-item-types~="tool"] { display: grid; }
.adminItemForm[data-item-kind="resource"] [data-item-types~="resource"],
.adminItemForm[data-item-kind="food"] [data-item-types~="food"],
.adminItemForm[data-item-kind="junk"] [data-item-types~="junk"] { display: grid; }
.adminItemForm .checkLine[data-item-types] { display: none; }
.adminItemForm[data-item-kind="weapon"] .checkLine[data-item-types~="weapon"],
.adminItemForm[data-item-kind="armour"] .checkLine[data-item-types~="armour"],
.adminItemForm[data-item-kind="tool"] .checkLine[data-item-types~="tool"] { display: flex; }
.itemFitAdvancedToggle { grid-column: 1 / -1; }
.itemFitAdvanced { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 10px; padding: 10px; border: 1px dashed rgb(255 255 255 / 12%); border-radius: 8px; }
.itemFitAdvanced[hidden] { display: none !important; }
.itemPublishChecklist { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgb(255 92 77 / 30%); border-radius: 8px; background: rgb(255 92 77 / 7%); }
.itemPublishChecklist.ready { border-color: rgb(183 214 108 / 30%); background: rgb(183 214 108 / 7%); }
.itemPublishChecklist strong { color: #f0d9d5; font-size: 11px; }
.itemPublishChecklist.ready strong { color: #dff3a7; }
.itemPublishChecklist span { color: #c8a29c; font-size: 11px; line-height: 1.45; }
.itemPublishChecklist.ready span { color: #a9bd84; }
.adminItemForm label small { color: #758078; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.legacyToolBuilder { display: none !important; }
.contentCard [data-recipe-types] { display: none; }
.contentCard[data-recipe-kind="cooking"] [data-recipe-types~="cooking"] { display: grid; }
.itemBalancePreview { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgb(91 141 239 / 22%); border-radius: 8px; background: rgb(91 141 239 / 7%); }
.attackModeEditor { gap: 8px; padding: 12px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: #0f130f; }
.attackModeEditorHead { display: grid; gap: 2px; }
.attackModeEditorHead strong { color: #dfe5d8; font-size: 12px; }
.attackModeEditorHead span { color: #7f8978; font-size: 10px; }
.attackModeRow { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: 7px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / 6%); }
.attackModeRow label { display: grid; gap: 4px; color: #889183; font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.equipmentFamilyOverview { overflow: visible; }
.equipmentFamilyGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.equipmentFamilyCard { display: grid; gap: 10px; padding: 13px; border-radius: 7px; background: #0f130f; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%); }
.equipmentFamilyCard > div:first-child { display: grid; gap: 2px; }
.equipmentFamilyCard > div:first-child strong { color: #e3eadc; font-size: 14px; }
.equipmentFamilyCard small { color: #84907d; font-size: 10px; }
.equipmentFamilyStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.equipmentFamilyStats span { display: grid; gap: 2px; padding: 7px; border-radius: 5px; color: #778272; background: rgb(255 255 255 / 3%); font-size: 9px; text-transform: uppercase; }
.equipmentFamilyStats strong { color: #dce8ce; font-size: 12px; }
.equipmentFamilySlots { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itemBalancePreview strong { color: #dce7ff; font-size: 11px; }
.itemBalancePreview span { color: #9aabc8; font-size: 11px; line-height: 1.45; }
.adminSave { grid-column: 1 / -1; min-height: 42px !important; color: #12170f !important; background: #b7d66c !important; border-color: #b7d66c !important; font-weight: 850; }
.adminEmpty { padding: 22px; color: #858f7e; text-align: center; }

.adminRegistry { max-height: 470px; overflow: auto; }
.adminRegistry .adminRow { border: 0; border-radius: 5px; background: #0f130f; }
.adminRegistry .adminRow + .adminRow { border-top: 1px solid rgb(255 255 255 / 6%); }
.adminOpsGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Mob Builder — one guided definition, with loot as part of the mob. */
.mobWorkflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin-bottom: 12px; padding: 4px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; background: #0a0e0a; }
.mobWorkflow button { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 7px 9px; border: 0; border-radius: 6px; color: #788172; background: transparent; box-shadow: none; font-size: 10px; text-align: left; text-transform: uppercase; }
.mobWorkflow button span { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto; border: 1px solid #3b4437; border-radius: 50%; font-size: 9px; }
.mobWorkflow button.active { color: #f0f5e8; background: #27331e; }
.mobWorkflow button.active span { border-color: #b7d66c; color: #dff3a7; }
.mobBuilder { display: grid; grid-template-columns: minmax(0, 1fr) 286px; align-items: start; gap: 14px; margin-bottom: 14px; }
.mobBuilderMain { min-width: 0; }
.mobStep { display: none; min-height: 460px; padding: 22px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 9px; background: #131812; }
.mobBuilder[data-mob-step="0"] [data-mob-panel="0"],.mobBuilder[data-mob-step="1"] [data-mob-panel="1"],.mobBuilder[data-mob-step="2"] [data-mob-panel="2"],.mobBuilder[data-mob-step="3"] [data-mob-panel="3"],.mobBuilder[data-mob-step="4"] [data-mob-panel="4"] { display: block; }
.mobStep > header { margin-bottom: 22px; padding-bottom: 15px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.mobStep > header > span { color: #b7d66c; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.mobStep h3 { margin: 4px 0; color: #f0f3eb; font-size: 21px; letter-spacing: -.025em; }
.mobStep header p { margin: 0; color: #909a89; font-size: 12px; line-height: 1.5; }
.mobFieldGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 11px; }
.mobFieldGrid > label { display: grid; align-content: start; gap: 5px; color: #aab3a3; font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.mobFieldGrid input,.mobFieldGrid select,.mobLootRow input,.mobLootRow select { min-width: 0; min-height: 41px; border: 1px solid rgb(255 255 255 / 11%); border-radius: 6px; color: #eef1e8; background: #0b0f0b; }
.mobFieldGrid input:focus,.mobFieldGrid select:focus,.mobLootRow input:focus,.mobLootRow select:focus { outline: 2px solid rgb(183 214 108 / 35%); outline-offset: 1px; border-color: #8fa850; }
.mobFieldGrid small,.mobModelNotice small { color: #758078; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.mobFieldGrid [hidden] { display: none !important; }
.mobModelNotice { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; margin-top: 5px; padding: 14px; border-left: 3px solid #788b4b; border-radius: 5px; background: #0d110d; }
.mobModelNotice b { color: #dce4d5; font-size: 12px; }.mobModelNotice span { color: #b7d66c; font-size: 11px; }.mobModelNotice small { grid-column: 1 / -1; }
.mobAssetEditor { grid-column: 1 / -1; display: grid; gap: 12px; margin-top: 5px; }
.mobAssetEditor > label,.mobTransformGrid label,.mobAnimationMap label { display: grid; gap: 5px; color: #aab3a3; font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.mobAssetEditor select,.mobAssetEditor input { min-width: 0; min-height: 41px; border: 1px solid rgb(255 255 255 / 11%); border-radius: 6px; color: #eef1e8; background: #0b0f0b; }
.mobAssetEditor small { color: #758078; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.mobVisualHead { display: grid; grid-template-columns: minmax(0,1fr); align-items: end; gap: 10px; }
.mobVisualHead label { display: grid; gap: 5px; color: #aab3a3; font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.mobVisualHead button { min-height: 41px; }
.mobVisualLayout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); gap: 12px; align-items: start; }
.mobPreviewPane,.mobVisualControls { display: grid; gap: 9px; min-width: 0; }
.mobVisualControls .mobAssetValidation { order: -1; }
.mobVisualAdvanced { margin: 0; background: #0d110d; }
.mobVisualAdvanced summary { display: flex; justify-content: space-between; gap: 12px; }
.mobVisualAdvanced summary span { color: #7f8978; font-size: 9px; font-weight: 600; }
.mobVisualAdvanced > p { margin: 9px 0 0; color: #7f8978; font-size: 10px; line-height: 1.45; }
.mobVisualAdvanced .mobTransformGrid,.mobVisualAdvanced .mobAnimationMap { margin-top: 11px; }
.assetStatus { padding: 4px 7px; border-radius: 999px; color: #c7d3bd; background: rgb(255 255 255 / 7%); font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.assetStatus.ready { color: #c8df8d; background: rgb(183 214 108 / 12%); }.assetStatus.blocked { color: #efae9e; background: rgb(224 96 74 / 12%); }
.assetManagerToolbar{display:grid;grid-template-columns:minmax(220px,1fr) 190px;gap:8px;margin-bottom:10px}.assetManagerToolbar input,.assetManagerToolbar select{min-height:42px;border:1px solid rgb(255 255 255/10%);border-radius:7px;color:#edf2e8;background:#0b0f0b}.assetManagerLayout{display:grid;grid-template-columns:minmax(270px,.72fr) minmax(440px,1.28fr);gap:12px;align-items:start}.assetManagerList{display:grid;gap:5px;max-height:76vh;overflow:auto}.assetManagerRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:10px;border:1px solid rgb(255 255 255/7%);border-radius:7px;color:#dce3d7;background:#0d120d;text-align:left}.assetManagerRow:hover,.assetManagerRow.active{border-color:rgb(183 214 108/24%);background:#151c13}.assetManagerRow>span:nth-child(2){display:grid;gap:3px;min-width:0}.assetManagerRow b,.assetManagerRow small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assetManagerRow small,.assetManagerRow em{color:#788273;font-size:9px;font-style:normal}.assetManagerDetail{display:grid;gap:14px;padding:16px;border:1px solid rgb(183 214 108/14%);border-radius:9px;background:#10150f}.assetManagerDetail>header{display:flex;justify-content:space-between;gap:12px}.assetManagerDetail h3{margin:2px 0;color:#eff3ea;font-size:19px}.assetManagerDetail header small{color:#778171}.assetManagerDetail h4{margin:0 0 7px;color:#cbd4c3;font-size:10px;letter-spacing:.07em;text-transform:uppercase}#adminAssetPreviewCanvas{width:100%;height:300px;border:1px solid rgb(255 255 255/7%);border-radius:8px;background:radial-gradient(circle at 50% 35%,#202a1d,#090c09 72%)}.assetManagerStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid rgb(255 255 255/7%);border-radius:7px;background:rgb(255 255 255/7%)}.assetManagerStats span{display:grid;gap:3px;padding:9px;background:#151b13}.assetManagerStats small{color:#778171;font-size:8px;letter-spacing:.06em;text-transform:uppercase}.assetManagerStats b{color:#e6ece0;font-size:12px}.assetUsageList,.assetVersionList{display:grid;gap:4px}.assetUsageList span,.assetVersionList span{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:5px;color:#aeb8a7;background:rgb(255 255 255/4%);font-size:10px}.assetVersionList small,.assetManagerEmpty{color:#788273;font-size:9px}.assetReplace{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.assetReplace output{grid-column:1/-1;color:#d4a95f;font-size:10px}.assetReplaceReview{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px solid rgb(183 214 108/14%);border-radius:7px;background:#0b100b}.assetReplaceReview>span{color:#83907b;font-size:10px}.assetReplaceClips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.assetReplaceClips label{display:grid;gap:4px;color:#8f9988;font-size:9px}.assetReplaceClips select{min-width:0}@media(max-width:980px){.assetManagerLayout{grid-template-columns:1fr}.assetManagerList{max-height:320px}}@media(max-width:700px){.assetManagerToolbar,.assetManagerStats,.assetReplaceClips{grid-template-columns:1fr}.assetReplace{grid-template-columns:1fr}#adminAssetPreviewCanvas{height:240px}}
#mobPreviewCanvas { display: block; width: 100%; height: 330px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 7px; background: radial-gradient(circle at 50% 38%, #253020, #080b08 72%); }
.mobTransformGrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mobAnimationMap { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 0; border: 0; background: transparent; }
.mobAnimationMap header { grid-column: 1 / -1; display: grid; gap: 2px; margin-bottom: 3px; }.mobAnimationMap header b { color: #e3e9dd; font-size: 12px; }.mobAnimationMap header span { color: #7d8776; font-size: 10px; }
.mobAnimationMap [hidden] { display: none !important; }.mobPreviewActions { display: flex; flex-wrap: wrap; gap: 6px; }
.mobAssetValidation { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid rgb(224 173 73 / 24%); border-radius: 7px; color: #d8b875; background: rgb(224 173 73 / 7%); font-size: 10px; line-height: 1.4; }.mobAssetValidation.valid { border-color: rgb(183 214 108 / 26%); color: #b9d681; background: rgb(183 214 108 / 7%); }.mobAssetValidation b,.mobAssetValidation span { display: block; }
.mobChoiceGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.mobChoice { position: relative; display: grid; gap: 3px; min-height: 92px; padding: 13px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: #0e120e; cursor: pointer; }
.mobChoice:has(input:checked) { border-color: rgb(183 214 108 / 42%); background: #20291a; box-shadow: inset 0 0 0 1px rgb(183 214 108 / 10%); }
.mobChoice input { position: absolute; top: 10px; right: 10px; accent-color: #b7d66c; }.mobChoice b { color: #e2e8dd; font-size: 12px; }.mobChoice span { color: #838d7d; font-size: 10px; line-height: 1.4; }
.mobPresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }.mobAdvanced { margin-top: 16px; padding: 11px 13px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: #0d110d; }.mobAdvanced summary { color: #aeb8a8; font-size: 11px; font-weight: 750; cursor: pointer; }.mobAdvanced .mobFieldGrid { margin-top: 13px; }
.mobBuilderRail { position: sticky; top: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid rgb(183 214 108 / 16%); border-radius: 9px; background: #10150f; }.mobBuilderRail h3 { margin: -5px 0 2px; color: #f0f4ea; font-size: 18px; }.mobSummaryStats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; background: rgb(255 255 255 / 7%); }.mobSummaryStats span { display: grid; gap: 2px; padding: 10px; background: #171d15; }.mobSummaryStats small { color: #7f8978; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }.mobSummaryStats b { color: #edf2e7; font-size: 15px; }.mobBalanceNote { display: grid; gap: 3px; padding: 10px; border-radius: 6px; color: #9eb279; background: rgb(183 214 108 / 7%); font-size: 10px; line-height: 1.4; }.mobBalanceNote.warn { color: #dbbd78; background: rgb(221 175 75 / 8%); }.mobBalanceNote span { display: block; }.mobRailActions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin-top: 4px; }.mobRailActions button { min-height: 40px; }
.mobLootGroup { margin-bottom: 14px; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 8px; background: #0c100c; }.mobLootGroup > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 11px 12px; background: #171d15; }.mobLootGroup > div:first-child b { color: #e5eadf; font-size: 12px; }.mobLootGroup > div:first-child span { color: #7e8877; font-size: 10px; }.mobLootGroup > div:first-child button { grid-column: 2; grid-row: 1 / 3; }.mobLootEmpty { padding: 14px; color: #717b6c; font-size: 10px; text-align: center; }.mobLootRow { display: grid; grid-template-columns: minmax(140px, 2fr) repeat(2, minmax(55px, .5fr)) minmax(70px, .7fr) 58px 34px; align-items: end; gap: 6px; padding: 9px; border-top: 1px solid rgb(255 255 255 / 6%); }.mobLootRow label { display: grid; gap: 4px; color: #7f8978; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.mobLootRow output { align-self: center; color: #b7d66c; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }.mobLootRow .iconButton { width: 34px; height: 41px; }.mobSimulation { display: grid; gap: 2px; margin-top: 8px; padding: 11px; border-radius: 6px; color: #818b7a; background: #0c100c; font-size: 10px; }.mobSimulation span { display: flex; justify-content: space-between; gap: 10px; }.mobSimulation b { color: #cdd5c7; }.mobReview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }.mobReview > div { display: grid; gap: 3px; padding: 14px; border-radius: 7px; background: #0d110d; }.mobReview span { color: #7d8777; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.mobReview b { color: #e6ece0; font-size: 13px; }.mobReview small { color: #818b7a; font-size: 10px; }.mobPublishHelp { margin: 7px 0 0; color: #7f8978; font-size: 10px; }

.adminView .contentStudio { padding: 0; border: 0; background: transparent; box-shadow: none; }
.adminView .contentStudioHead { margin-right: 52px; padding-bottom: 20px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.adminView .contentCard,
.adminView .contentInventory { background: #131812; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); }

@media (max-width: 980px) {
  .adminShell { grid-template-columns: 190px minmax(0, 1fr); }
  .adminWorkspace { padding: 24px 18px 50px; }
  .equippedItemBuilder { grid-template-columns: 1fr; }
  .itemPreviewPane { position: static; }
  .itemPreviewPane.expanded { position: fixed; inset: 8px; grid-template-columns: 1fr; grid-template-rows: auto minmax(420px, 1fr) auto; }
  .itemPreviewPane.expanded .itemPreviewHead,
  .itemPreviewPane.expanded .itemPreviewCanvas,
  .itemPreviewPane.expanded .itemFitToolbar,
  .itemPreviewPane.expanded .itemPreviewControls,
  .itemPreviewPane.expanded .itemMediaTools,
  .itemPreviewPane.expanded .adminHelp { grid-column: 1; grid-row: auto; }
  .itemPreviewPane.expanded .itemPreviewCanvas { height: 62vh; min-height: 420px; }
  .adminMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobBuilder { grid-template-columns: 1fr; }.mobBuilderRail { position: static; }.mobRailActions { max-width: 360px; }.mobVisualLayout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .mobWorkflow { grid-template-columns: repeat(5, minmax(68px, 1fr)); overflow-x: auto; }.mobWorkflow button { display: grid; justify-items: center; gap: 3px; text-align: center; }.mobFieldGrid,.mobChoiceGrid,.mobReview,.mobTransformGrid,.mobAnimationMap { grid-template-columns: 1fr; }.mobAnimationMap header { grid-column: 1; }.mobVisualHead { grid-template-columns: 1fr; }.mobVisualHead button { justify-self: start; }#mobPreviewCanvas { height: 240px; }.mobLootRow { grid-template-columns: minmax(0, 1fr) repeat(2, 58px); }.mobLootRow label:nth-of-type(n+4),.mobLootRow output,.mobLootRow .iconButton { grid-row: 2; }.mobLootRow label:first-child { grid-column: 1 / -1; }
  .attackModeRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adminShell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .adminNav { gap: 10px; padding: 10px 48px 10px 10px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .adminBrand { display: none; }
  .adminNav nav { display: flex; overflow-x: auto; }
  .adminNav button { min-width: 130px; min-height: 46px; }
  .adminNav button.active { box-shadow: inset 0 -3px #b7d66c; }
  .adminPageHead { margin-right: 0; }
  .adminMetrics,
  .adminStartGrid,
  .adminOpsGrid,
  .contentBuilderGrid { grid-template-columns: 1fr; }
  .adminItemForm { grid-template-columns: 1fr; }
  .adminSpan2,
  .adminFieldGroup,
  .adminSave { grid-column: 1; }
}

/* World Studio release and test workspaces */
.studioMode-publish .editorWorkbench { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); }
.studioMode-test .editorWorkbench { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); }
.studioMode-publish .editorInspector,.studioMode-test .editorInspector { display: none; }
.studioMode-publish .editorLibrary,.studioMode-test .editorLibrary { overflow-y: auto; }
.studioMode-publish .editorToolbar { display: none; }
.studioMode-publish { grid-template-rows: 56px auto minmax(0, 1fr); }
.studioPublishWorkspace,.studioTestLab { display: grid; align-content: start; gap: 12px; min-width: 0; }
.studioPublishHero,.studioTestHero { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--studio-line); }
.studioPublishHero h3,.studioTestHero h3 { margin: 3px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.studioPublishHero p,.studioTestHero p { margin: 0; max-width: 40ch; color: var(--studio-muted); font-size: 11px; line-height: 1.5; }
.studioPublishState { flex: 0 0 auto; padding: 6px 8px; border-radius: 4px; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.studioPublishState.ready { background: #263b22; color: #c8eeaa; }
.studioPublishState.blocked { background: #3a2420; color: #efb0a8; }
.studioReleaseDiff { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.studioReleaseDiffCard { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 7px; padding: 9px; border-radius: 5px; background: #171b16; color: #7f887b; }
.studioReleaseDiffCard.changed { background: #22291d; color: var(--studio-text); box-shadow: inset 2px 0 0 var(--studio-accent); }
.studioReleaseDiffCard strong { grid-row: 1 / span 2; font-size: 20px; line-height: 1; }
.studioReleaseDiffCard span { font-size: 10px; font-weight: 800; }
.studioReleaseDiffCard small { overflow: hidden; color: var(--studio-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.studioReleaseNote { display: grid; gap: 5px; color: var(--studio-text); font-size: 11px; font-weight: 750; }
.studioReleaseNote b { color: #d99a88; font-size: 9px; text-transform: uppercase; }
.studioReleaseNote textarea { box-sizing: border-box; width: 100%; resize: vertical; border: 1px solid var(--studio-line); border-radius: 5px; padding: 9px; background: #0f120e; color: var(--studio-text); font: inherit; }
.studioReleaseNote small { color: var(--studio-muted); font-weight: 500; }
.studioPublishButton { width: 100%; min-height: 38px; }
.studioReleaseHistoryHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 5px; border-top: 1px solid var(--studio-line); }
.studioReleaseHistoryHead > div { display: grid; gap: 2px; }
.studioReleaseHistoryHead span { color: var(--studio-muted); font-size: 10px; }
.studioReleaseHistory { display: grid; gap: 4px; }
.studioReleaseRow { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; padding: 5px; border-radius: 5px; background: #171b16; }
.studioReleaseRow.active { outline: 1px solid rgb(183 217 125 / 45%); background: #20271c; }
.studioReleaseInspect { display: grid; gap: 5px; min-width: 0; padding: 4px; border: 0; background: transparent; color: var(--studio-text); text-align: left; cursor: pointer; }
.studioReleaseInspect > span:first-child { display: flex; justify-content: space-between; gap: 8px; }
.studioReleaseInspect > span:last-child { overflow: hidden; color: var(--studio-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.studioReleaseInspect small { color: #788272; font-size: 9px; font-weight: 500; }
.studioReleaseCompare,.studioRuntimeProbe { display: grid; gap: 3px; padding: 10px; border-left: 2px solid var(--studio-gold); background: #211e16; }
.studioReleaseCompare span,.studioRuntimeProbe span { color: var(--studio-muted); font-size: 10px; }
.studioTestMetrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.studioTestMetric { display: grid; gap: 2px; padding: 9px; border-radius: 5px; background: #171b16; box-shadow: inset 2px 0 0 #667060; }
.studioTestMetric.good { box-shadow: inset 2px 0 0 #6c9d67; }.studioTestMetric.warn { box-shadow: inset 2px 0 0 #d0ad53; }.studioTestMetric.bad { box-shadow: inset 2px 0 0 #d96b62; }
.studioTestMetric span,.studioTestMetric small { color: var(--studio-muted); font-size: 9px; }.studioTestMetric strong { font-size: 18px; }
.studioTestControls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }.studioTestControls > span { color: var(--studio-muted); font-size: 9px; }
.studioRuntimeProbe { gap: 9px; }.studioRuntimeProbe > div { display: grid; gap: 2px; }
.studioTestGroups { display: grid; gap: 5px; }.studioTestGroups details { border-bottom: 1px solid var(--studio-line); }.studioTestGroups summary { display: flex; justify-content: space-between; padding: 8px 4px; cursor: pointer; }.studioTestGroups summary span { color: var(--studio-muted); font-size: 9px; }
@media (max-width: 900px) {
  .studioMode-publish .editorWorkbench,.studioMode-test .editorWorkbench { grid-template-columns: minmax(250px,45vw) minmax(0,1fr); }
  .studioReleaseDiff,.studioTestMetrics { grid-template-columns: 1fr; }
  .studioModeButton { padding-inline: 8px; }
}


* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, #142015, #070b07 58%);
  background-size: 36px 36px, 36px 36px, auto;
}

button,
input,
select {
  font: inherit;
}

button {
  min-height: 40px;
  border: 1px solid #8cb752;
  border-radius: 7px;
  padding: 0 14px;
  background: linear-gradient(180deg, #d9f58a, #a8d85f);
  color: #16220e;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%);
}

button:hover {
  filter: brightness(1.05);
}

button:active {
  transform: translateY(1px);
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 12px;
  background: #0b110a;
  color: var(--text);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(189 232 111 / 16%);
}

.hidden {
  display: none !important;
}

.login {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: min(430px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  padding: 24px;
  border: 1px solid rgb(189 232 111 / 28%);
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(20 28 16 / 97%), rgb(10 15 9 / 96%));
  box-shadow: var(--shadow);
}

.login::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -100vh;
  background: rgb(2 5 3 / 42%);
  backdrop-filter: blur(2px);
}

.mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 22%);
  background: linear-gradient(180deg, var(--accent), #86bf48);
  color: #17220f;
  font-weight: 950;
}

.login h1 {
  margin: 16px 0 8px;
  font-size: 42px;
  line-height: 1;
}

.login p,
.hint,
#status,
.muted {
  color: var(--muted);
}

.login label {
  display: block;
  margin: 20px 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.wideBtn {
  width: 100%;
  margin-top: 18px;
}

.loginHint {
  min-height: 22px;
  margin: 14px 0 0;
  font-size: 14px;
}

.appearanceBuilder {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.appearanceBuilder fieldset {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgb(189 232 111 / 16%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
}

.appearanceBuilder legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.appearanceBuilder label {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  margin: 0;
  padding: 7px 4px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 7px;
  background: rgb(0 0 0 / 14%);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.appearanceBuilder input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.appearanceBuilder span {
  width: 24px;
  height: 24px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
}

.appearanceBuilder label:has(input:checked) {
  border-color: var(--accent);
  background: rgb(189 232 111 / 13%);
  color: var(--text);
}

.game,
.layout,
.worldWrap {
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
}

.layout {
  display: block;
}

.worldWrap {
  position: relative;
  overflow: hidden;
  padding: 8px;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  border: 1px solid rgb(189 232 111 / 24%);
  border-radius: 8px;
  background: var(--field);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 28%), 0 18px 40px rgb(0 0 0 / 22%);
  cursor: pointer;
}

.topbar {
  position: absolute;
  z-index: 6;
  top: 18px;
  left: 18px;
  right: 350px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 2px solid rgb(35 29 20 / 74%);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgb(80 75 59 / 92%), rgb(36 35 29 / 94%)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 2px, transparent 2px 9px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 12px 30px rgb(0 0 0 / 28%);
}

.topbar strong {
  margin-right: 10px;
}

.currencies {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.currencies span {
  padding: 7px 10px;
  border: 1px solid rgb(27 22 15 / 88%);
  border-radius: 7px;
  background: rgb(18 17 13 / 78%);
}

#gold {
  color: var(--gold);
}

.osrsDock {
  position: absolute;
  z-index: 7;
  right: 18px;
  top: 18px;
  width: 314px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.minimapFrame {
  position: relative;
  min-height: 222px;
  border: 3px solid #1e1b15;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(180deg, #5d5748, #282720 72%, #171611),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 3px, transparent 3px 13px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 16px 38px rgb(0 0 0 / 32%);
  pointer-events: auto;
}

.minimapFrame::before {
  content: "";
  position: absolute;
  inset: 10px 14px 16px 90px;
  border: 3px solid #1c1913;
  border-radius: 999px;
  background: #11170f;
  box-shadow: inset 0 0 0 5px rgb(92 86 68 / 78%), inset 0 0 28px rgb(0 0 0 / 70%);
}

.compass {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 2px solid #1d1a13;
  border-radius: 999px;
  background: radial-gradient(circle, #d8d0af, #817456 62%, #2b271c);
  color: #7d1c18;
  font-family: Georgia, serif;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%);
}

.minimapGrid {
  position: absolute;
  inset: 19px 25px 25px 101px;
  display: grid;
  overflow: hidden;
  border-radius: 999px;
  clip-path: circle(50% at 50% 50%);
}

.minimapGrid i {
  min-width: 2px;
  min-height: 2px;
}

.minimapPlayer {
  box-shadow: inset 0 0 0 2px #fff, 0 0 6px #fff;
  z-index: 2;
}

.minimapNpc {
  box-shadow: inset 0 0 0 2px #f1d241;
}

.minimapObject {
  filter: saturate(1.4) brightness(1.12);
}

.orbStack {
  position: absolute;
  left: 16px;
  top: 72px;
  display: grid;
  gap: 7px;
}

.orb {
  --pct: 100;
  width: 58px;
  min-height: 42px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  border: 2px solid #17140f;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 18%), transparent 26%),
    conic-gradient(var(--orb-color) calc(var(--pct) * 1%), #171611 0),
    #27231b;
  color: #f7edd0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.orb strong {
  font-size: 16px;
}

.orb span {
  color: #d4c28d;
  font-size: 9px;
}

.hpOrb {
  --orb-color: #b82524;
}

.combatOrb {
  --orb-color: #3e8ec7;
}

.coinOrb {
  --orb-color: #d4aa37;
}
.runOrb {
  --orb-color: #d2b33e;
  color:inherit;
  cursor:pointer;
  font:inherit;
}
.runOrb.active { --orb-color:#52b96a; filter:brightness(1.08); }
.runOrb:disabled { cursor:not-allowed; opacity:.55; }

.quickbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 7px;
  border: 3px solid #1e1b15;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(180deg, #514b3e, #24231d);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 14px 32px rgb(0 0 0 / 28%);
  pointer-events: auto;
}

.quickbar button {
  width: 100%;
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid #17140f;
  border-radius: 4px;
  background: linear-gradient(180deg, #746b54, #373328);
  color: #f1e6bf;
  font-size: 11px;
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%);
}

.quickbar button.active {
  border-color: #e0b447;
  background: linear-gradient(180deg, #9d7836, #53371c);
  color: #fff4c4;
}

.gameWindow {
  position: absolute;
  z-index: 8;
  width: 314px;
  max-height: calc(100vh - 282px);
  overflow: auto;
  border: 3px solid #1e1b15;
  border-radius: 6px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgb(71 65 51 / 94%), rgb(31 30 24 / 96%)),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 4%) 0 3px, transparent 3px 12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), var(--shadow);
}

.inventoryWindow,
.economyWindow,
.characterWindow,
.skillsWindow {
  right: 18px;
  top: 284px;
}

.adminWindow {
  right: 350px;
  top: 84px;
  width: min(520px, calc(100vw - 386px));
  max-height: min(76vh, 650px);
}

.logWindow {
  left: 18px;
  right: 350px;
  bottom: 58px;
  top: auto;
  width: auto;
  max-height: 190px;
  border-color: #211b13;
  background: linear-gradient(180deg, rgb(92 78 55 / 93%), rgb(47 39 28 / 95%));
}

.economyWindow {
  width: 314px;
}

.editorWindow {
  right: 350px;
  top: 84px;
  bottom: 18px;
  width: min(980px, calc(100vw - 386px));
  max-height: none;
  padding: 10px;
}

.editorWindow .windowHead {
  margin-bottom: 8px;
}

.windowHead {
  position: sticky;
  top: -12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -12px -12px 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgb(21 17 12 / 68%);
  background: rgb(43 38 29 / 98%);
}

.windowHead h2 {
  margin: 0;
  color: #f1dfad;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.iconBtn {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-color: rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 7%);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.stat,
.slot,
.tradeRow,
.logLine {
  border: 1px solid rgb(28 23 16 / 82%);
  border-radius: 4px;
  padding: 10px;
  background: rgb(34 31 24 / 86%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.stat + .stat,
.logLine + .logLine {
  margin-top: 8px;
}

.stat strong {
  display: block;
  margin-bottom: 4px;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  margin-top: 7px;
  background: #0d130c;
}

.fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.bar.danger .fill {
  background: linear-gradient(90deg, #e36b5f, #e9b94e);
}

.characterWindow,
.skillsWindow { scrollbar-color: #8d7948 #181611; }

#character,
#skills { display: grid; gap: 9px; }

.characterSummary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #1a1710;
  border-radius: 4px;
  background: linear-gradient(180deg, #393428, #211f19);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%);
}
.characterCrest { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #352810; border-radius: 50%; color: #fff0b7; background: radial-gradient(circle at 38% 30%, #c59b43, #59401d 62%, #17130e 64%); font-family: Georgia, serif; font-size: 20px; font-weight: 900; text-shadow: 0 2px #2b1806; box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 2px 5px #000; }
.characterSummary strong { display: block; color: #fff0bb; font-family: Georgia, serif; font-size: 15px; text-shadow: 1px 1px #000; }
.characterSummary span { color: #b7aa8b; font-size: 10px; }
.characterHp { text-align: right; }
.characterHp span, .characterHp b { display: block; }
.characterHp b { color: #eddaac; font-size: 14px; }
.characterHp small { color: #978e79; font-size: 9px; }
.characterSummary .bar { grid-column: 1 / -1; height: 7px; margin: 0; border: 1px solid #0d0c09; }

.equipmentPaper {
  position: relative;
  height: 260px;
  border: 2px solid #17140e;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 42%, rgb(129 111 72 / 18%), transparent 44%), linear-gradient(180deg, #302c22, #201e18);
  box-shadow: inset 0 0 0 1px #514833, inset 0 0 24px rgb(0 0 0 / 38%);
}
.equipmentPaper::before { content: "EQUIPMENT"; position: absolute; top: 9px; left: 50%; translate: -50% 0; color: #bca66c; font-family: Georgia, serif; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-shadow: 1px 1px #000; }
.equipmentFigure { position: absolute; inset: 46px 90px 24px; opacity: .55; filter: drop-shadow(0 4px 4px #000); }
.equipmentFigure i { position: absolute; display: block; border: 1px solid #75674a; background: linear-gradient(90deg, #343127, #69604a 48%, #302d24); }
.figureHead { top: 0; left: 50%; width: 37px; height: 39px; translate: -50% 0; border-radius: 45% 45% 38% 38%; }
.figureBody { top: 42px; left: 50%; width: 64px; height: 76px; translate: -50% 0; clip-path: polygon(18% 0,82% 0,100% 100%,0 100%); }
.figureArms { top: 49px; left: 50%; width: 104px; height: 18px; translate: -50% 0; border-radius: 12px; }
.figureLegs { top: 116px; left: 50%; width: 55px; height: 69px; translate: -50% 0; clip-path: polygon(0 0,100% 0,90% 100%,58% 100%,50% 36%,42% 100%,10% 100%); }
.equipmentSlot { position: absolute; z-index: 1; width: 45px; height: 45px; display: grid; place-items: center; border: 2px solid #17140d; border-radius: 4px; color: #cbbd91; background: radial-gradient(circle at 45% 38%, #484234, #27241d 72%); box-shadow: inset 0 0 0 1px #5f553e, 0 2px 5px rgb(0 0 0 / 45%); }
.equipmentSlot::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 4%); pointer-events: none; }
.equipmentSlot img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.equipmentSlot small { position: absolute; right: 1px; bottom: 0; left: 1px; overflow: hidden; color: #95886a; font-size: 7px; line-height: 9px; text-align: center; text-overflow: ellipsis; text-shadow: 1px 1px #000; white-space: nowrap; }
.equipmentSlot.filled { border-color: #715b2c; background: radial-gradient(circle at 45% 38%, #55482c, #272119 72%); box-shadow: inset 0 0 0 1px #a1813a, 0 2px 6px #000; }
.equipmentGlyph { color: #a99b77; font-family: Georgia, serif; font-size: 21px; opacity: .55; }
.equipmentSlot-head { top: 31px; left: calc(50% - 22px); }
.equipmentSlot-cape { top: 45px; left: 18px; }
.equipmentSlot-amulet { top: 84px; left: calc(50% - 22px); }
.equipmentSlot-ammo { top: 45px; right: 18px; }
.equipmentSlot-weapon { top: 101px; left: 18px; }
.equipmentSlot-body { top: 137px; left: calc(50% - 22px); }
.equipmentSlot-shield { top: 101px; right: 18px; }
.equipmentSlot-hands { top: 157px; left: 18px; }
.equipmentSlot-legs { top: 190px; left: calc(50% - 22px); }
.equipmentSlot-ring { top: 157px; right: 18px; }
.equipmentSlot-feet { right: 18px; bottom: 14px; }

.combatReadout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #18150f; border-radius: 4px; background: #211f19; box-shadow: inset 0 1px #4b4435; }
.combatReadout div { min-width: 0; padding: 7px 5px; text-align: center; }
.combatReadout div + div { border-left: 1px solid #403929; }
.combatReadout div:nth-child(3n + 1) { border-left: 0; }
.combatReadout div:nth-child(n + 4) { border-top: 1px solid #403929; }
.combatReadout span, .combatReadout strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combatReadout span { color: #968b72; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.combatReadout strong { margin-top: 2px; color: #e7dab6; font-size: 11px; }
.toolBelt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.toolBelt .equipmentSlot { position: relative; width: auto; height: 48px; }
.panelLabel { margin-bottom: 5px; color: #c6ae70; font-family: Georgia, serif; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.styleGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.combatStyles .mini {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a4435, #28251d);
  text-align: left;
}

.combatStyles .mini strong,
.combatStyles .mini span {
  display: block;
}

.combatStyles .mini small {
  display: block;
  color: var(--muted);
  font-size: 8px;
}
.styleIcon { display: grid !important; place-items: center; width: 23px; height: 23px; border: 1px solid #17140f; border-radius: 50%; color: #d7c58f; background: #242119; font-size: 14px; }

.combatStyles .mini.active {
  border-color: #d7b35f;
  background: linear-gradient(180deg, rgb(103 82 38 / 92%), rgb(55 45 28 / 96%));
  color: #fff4c7;
}
.combatStyles .mini:hover { border-color: #9a824b; filter: brightness(1.08); }
.combatStyles .mini:focus-visible, .skillTile:focus-visible { outline: 2px solid #f0c864; outline-offset: 1px; }

.skillsSummary { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 8px 10px; border: 1px solid #17140e; border-radius: 4px; background: linear-gradient(180deg, #3c372a, #242119); box-shadow: inset 0 1px #5f5744; }
.skillsSummary span { color: #c7b77f; font-family: Georgia, serif; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.skillsSummary strong { grid-row: 1 / 3; grid-column: 2; color: #fff0b0; font-family: Georgia, serif; font-size: 25px; line-height: 1; text-shadow: 1px 2px #000; }
.skillsSummary small { color: #8f866f; font-size: 9px; }
.skillsGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.skillTile { --skill-color: #b48a46; position: relative; min-width: 0; height: 72px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: 1fr 1fr 4px; align-items: center; column-gap: 5px; overflow: hidden; padding: 6px; border: 1px solid #17140e; border-radius: 3px; color: #e9dfc4; background: radial-gradient(circle at 24px 25px, color-mix(in srgb, var(--skill-color) 16%, transparent), transparent 45%), linear-gradient(180deg, #39352a, #24211a); box-shadow: inset 0 1px #514a39, 0 1px 2px #000; transition: border-color 150ms, filter 150ms, translate 150ms; }
.skillTile:hover, .skillTile:focus { z-index: 2; border-color: #a98b4a; filter: brightness(1.12); translate: 0 -1px; }
.skillIcon { grid-row: 1 / 3; display: grid; place-items: center; width: 29px; height: 29px; color: var(--skill-color); font-family: Georgia, serif; font-size: 22px; font-weight: 900; text-shadow: 0 2px 2px #000; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--skill-color) 25%, transparent)); }
.skillName { align-self: end; overflow: hidden; color: #cfc4a6; font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.skillLevel { align-self: start; color: #fff1be; font-family: Georgia, serif; font-size: 19px; line-height: 1; text-shadow: 1px 2px #000; }
.skillProgress { grid-column: 1 / -1; align-self: end; height: 4px; overflow: hidden; border: 1px solid #0c0b08; background: #11100d; }
.skillProgress i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--skill-color) 68%, #8fc85b), var(--skill-color)); box-shadow: 0 0 4px var(--skill-color); }
.skillTile small { position: absolute; right: 4px; bottom: 7px; left: 4px; padding: 2px 3px; color: #eee4c8; background: rgb(13 12 9 / 92%); font-size: 8px; text-align: center; opacity: 0; translate: 0 4px; transition: opacity 150ms, translate 150ms; pointer-events: none; }
.skillTile:hover small, .skillTile:focus small { opacity: 1; translate: 0 0; }
.skill-attack, .skill-strength { --skill-color: #d86c50; }
.skill-defence { --skill-color: #76a9d4; }
.skill-hitpoints { --skill-color: #d95858; }
.skill-woodcutting { --skill-color: #b88746; }
.skill-mining, .skill-smithing { --skill-color: #aeb6b2; }
.skill-fishing { --skill-color: #63b6c7; }
.skill-cooking, .skill-firemaking { --skill-color: #dd8d43; }
.skill-crafting { --skill-color: #d2b165; }
.skillsLegend { padding: 2px 4px; color: #8e856f; font-size: 8px; text-align: center; }

.inventory {
  display: block;
}

.inventoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  padding: 6px 4px 5px;
  border: 1px solid #17150f;
  border-radius: 4px;
  color: #eee6cf;
  background: linear-gradient(180deg, rgb(36 34 27 / 92%), rgb(24 23 18 / 96%));
  box-shadow: inset 0 1px 2px rgb(255 255 255 / 5%), inset 0 -2px 4px rgb(0 0 0 / 24%);
  font-size: 10px;
  text-align: center;
}
.slot:hover { border-color: #75643b; background: linear-gradient(180deg, #353126, #242119); }
.slot.selected { border-color: #d5ad49; background: linear-gradient(180deg, #40371f, #292318); box-shadow: inset 0 0 0 1px rgb(255 218 119 / 24%), 0 0 0 1px rgb(0 0 0 / 55%); }
.slot .itemIcon { width: 35px; height: 35px; margin: 0; }
.slot .itemIconFallback { width: 34px; height: 34px; margin: 0; }
.slotLabel { display: block; width: 100%; overflow: hidden; color: #d9d2bf; font-size: 9px; font-weight: 750; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.slotQty { position: absolute; right: 4px; bottom: 16px; min-width: 16px; padding: 1px 3px; border-radius: 7px; color: #fff4c8; background: rgb(15 14 11 / 86%); font-size: 9px; font-weight: 850; line-height: 1.4; text-shadow: 0 1px #000; }

.slot.empty {
  background:
    linear-gradient(180deg, rgb(23 22 18 / 78%), rgb(16 15 13 / 82%)),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 4%) 0 2px, transparent 2px 8px);
  box-shadow: inset 0 1px 4px rgb(0 0 0 / 38%);
}

.inventoryHint { margin-top: 8px; padding: 9px 10px; border-top: 1px solid rgb(255 255 255 / 8%); color: #9d9684; font-size: 10px; text-align: center; }
.inventorySelected { display: grid; gap: 9px; margin-top: 8px; padding: 10px; border: 1px solid #403921; border-radius: 5px; background: linear-gradient(180deg, rgb(45 41 31 / 96%), rgb(28 27 21 / 98%)); }
.inventorySelectedInfo { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-width: 0; }
.inventorySelectedInfo .itemIcon, .inventorySelectedInfo .itemIconFallback { width: 36px; height: 36px; margin: 0; }
.inventorySelectedInfo > div { display: grid; gap: 3px; min-width: 0; }
.inventorySelectedInfo strong { overflow: hidden; color: #f2ead4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inventorySelectedInfo span { overflow: hidden; color: #aaa18d; font-size: 9px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.inventorySelectedInfo b { color: #d9c786; font-size: 11px; }
.inventorySelectedActions { display: flex; flex-wrap: wrap; gap: 5px; }
.inventorySelectedActions .mini { flex: 1 1 72px; }
.inventoryEquipped { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 8px; border: 1px solid rgb(157 196 86 / 26%); border-radius: 6px; color: #cce59b; background: rgb(104 135 51 / 10%); font-size: 10px; font-weight: 750; }

.slotActions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.mini {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
}

.mini:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.log {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  color: #261f15;
  font-size: 13px;
}

.logLine {
  background: rgb(219 201 156 / 90%);
  color: #2d2418;
}

.economy {
  display: grid;
  gap: 10px;
}

.economyGrid {
  display: grid;
  gap: 10px;
}

.economy h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 13px;
}

.tradeRow {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tradeRow strong,
.tradeRow span {
  display: block;
}

.tradeRow span {
  color: var(--muted);
  font-size: 12px;
}

.adminSection + .adminSection {
  margin-top: 14px;
}

.adminInspect {
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid rgb(120 208 155 / 24%);
  border-radius: 7px;
  background: rgb(120 208 155 / 8%);
}

.adminSection h3,
.adminInspect h3,
.editorGroup h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.adminItemForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.equippedItemBuilder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 12px;
  align-items: start;
}

.equippedItemBuilder h3,
.equippedItemBuilder .assetMetaLine {
  grid-column: 1 / -1;
}

.itemPreviewPane {
  min-width: 0;
}

.itemPreviewCanvas {
  width: 100%;
  height: 260px;
  display: block;
  border: 1px solid rgb(189 232 111 / 16%);
  border-radius: 7px;
  background: linear-gradient(180deg, rgb(16 24 13 / 96%), rgb(5 8 5 / 96%));
}

.socketTunerForm {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) repeat(6, minmax(72px, 1fr)) auto auto;
  gap: 8px;
  align-items: end;
}

.socketTunerForm label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.socketTunerForm input,
.socketTunerForm select {
  min-height: 34px;
}

.socketTunerForm .assetMetaLine {
  grid-column: 1 / -1;
}

.adminItemForm input,
.adminItemForm select {
  min-height: 34px;
}

.adminItemForm input[name="description"] {
  grid-column: span 2;
}

.checkLine {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 5px;
  color: var(--muted);
  background: rgb(255 255 255 / 4%);
  font-size: 12px;
}

.checkLine input {
  width: auto;
  min-height: auto;
}

.itemRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.adminDropTable {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.adminDropTable + .adminDropTable {
  margin-top: 6px;
}

.adminDropTable span {
  color: var(--muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 14%);
  color: var(--muted);
  background: rgb(255 255 255 / 5%);
  font-size: 11px;
}

.badge.ok {
  color: #dff996;
  border-color: rgb(189 232 111 / 28%);
  background: rgb(126 161 64 / 18%);
}

.badge.bad {
  color: #ffc1ae;
  border-color: rgb(255 116 86 / 36%);
  background: rgb(132 35 20 / 28%);
}

.contentStudio {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgb(189 232 111 / 22%);
  border-radius: 9px;
  background: linear-gradient(145deg, rgb(19 27 17 / 98%), rgb(7 10 7 / 98%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 12px 30px rgb(0 0 0 / 22%);
}

.contentStudioHead,
.contentPublish,
.contentRow,
.contentRelease,
.contentInventory summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.contentStudioHead h3 {
  margin: 2px 0;
  font-size: 20px;
}

.contentStudioHead p,
.contentStudioHead .eyebrow,
.contentCard header span,
.contentRow span,
.contentRelease span {
  color: var(--muted);
  font-size: 12px;
}

.contentStudioHead .eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contentPublish { flex-wrap: wrap; justify-content: flex-end; }
.contentPublish .primary { min-height: 36px; color: #10170d; background: var(--accent); border-color: var(--accent); font-weight: 900; }
.contentPublish .primary:disabled { opacity: .42; cursor: not-allowed; }

.contentBuilderGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.contentCard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.contentCard header,
.contentCard textarea,
.contentCard button { grid-column: 1 / -1; }
.contentCard header { display: grid; gap: 2px; margin-bottom: 2px; }
.contentCard input,
.contentCard select,
.contentCard textarea { min-height: 35px; }
.contentCard textarea { min-height: 72px; resize: vertical; }
.contentCard label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.contentIssues,
.contentRows { display: grid; gap: 6px; }
.contentIssue,
.contentHealthy { padding: 9px 10px; border-radius: 7px; }
.contentIssue { display: grid; gap: 2px; border-left: 3px solid #f4b044; background: rgb(244 176 68 / 10%); }
.contentIssue.error { border-left-color: #ff7456; background: rgb(255 116 86 / 10%); }
.contentIssue span { color: var(--muted); font-size: 12px; }
.contentHealthy { color: #def69d; background: rgb(126 161 64 / 13%); }

.contentInventory { padding: 10px; border-radius: 8px; background: rgb(0 0 0 / 18%); }
.contentInventory summary { cursor: pointer; }
.contentInventory summary span { color: var(--muted); font-size: 12px; }
.contentInventory[open] summary { margin-bottom: 9px; }
.contentRow,
.contentRelease { min-height: 44px; padding: 7px 8px; border-radius: 6px; background: rgb(255 255 255 / 3%); }
.contentRow > div:first-child,
.contentRelease > div { display: grid; gap: 2px; min-width: 0; }
.contentRowActions { display: flex; align-items: center; gap: 6px; }
.contentManagedLabel { color: var(--muted); font-size: 10px; white-space: nowrap; }

@media (max-width: 900px) {
  .contentBuilderGrid { grid-template-columns: 1fr; }
  .contentStudioHead { align-items: flex-start; flex-direction: column; }
  .contentPublish { justify-content: flex-start; }
}

.editorActive {
  cursor: crosshair;
}

.editorActive.editorCamera {
  cursor: grab;
}

.editorActive.editorCamera:active {
  cursor: grabbing;
}

.editorPanel,
.editorShell {
  display: grid;
  gap: 12px;
}

.editorShell {
  color-scheme: dark;
}

.editorTopline,
.editorToolbar,
.editorSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.editorTopline {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px;
  background: linear-gradient(180deg, rgb(20 27 19 / 96%), rgb(8 11 8 / 96%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  flex-wrap: wrap;
}

.editorTopline strong,
.editorSelectedName {
  display: block;
  font-size: 16px;
}

.editorTopline span,
.editorSectionHead span,
.assetMetaLine,
.assetEmpty {
  color: var(--muted);
  font-size: 12px;
}

.editorCommit,
.editorToolbar {
  display: flex;
  gap: 6px;
}

.editorCommit {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editorToolbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 12%));
}

.editorToolGroup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 7px;
  background: rgb(5 8 5 / 42%);
}

.editorToolGroup span {
  padding: 0 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editorToolbar .active,
.editorBrushes .active {
  border-color: var(--accent);
  background: rgb(189 232 111 / 18%);
  color: var(--text);
}

.editorShortcutStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 8px;
  border: 1px solid rgb(189 232 111 / 12%);
  border-radius: 7px;
  background: rgb(0 0 0 / 16%);
}

.editorShortcutStrip span {
  padding: 3px 7px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.dangerMini {
  border-color: rgb(227 107 95 / 40%);
}

.editorDraftState {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgb(189 232 111 / 16%);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.editorDraftState.saved {
  border-color: rgb(120 208 155 / 26%);
  color: #a7e6bc;
}

.editorDraftState.unsaved {
  border-color: rgb(233 185 78 / 40%);
  background: rgb(233 185 78 / 12%);
  color: #f2d37c;
}

.editorDraftState.saving {
  border-color: rgb(116 178 255 / 38%);
  background: rgb(116 178 255 / 12%);
  color: #a9ccff;
}

.editorWorkbench {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.editorQualityBar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.editorQualityCard {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.editorQualityCard span,
.editorQualityCard small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorQualityCard span {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.editorQualityCard strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.editorQualityBar.ready .editorQualityCard:first-child {
  border-color: rgb(120 208 155 / 34%);
  background: rgb(120 208 155 / 9%);
}

.editorQualityBar.pending .editorQualityCard:first-child,
.editorQualityBar.warning .editorQualityCard:first-child {
  border-color: rgb(233 185 78 / 36%);
  background: rgb(233 185 78 / 10%);
}

.editorWindow .editorWorkbench {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.editorWindow .editorTopline {
  align-items: center;
  flex-direction: row;
}

.editorWindow .editorCommit {
  width: 100%;
  flex-wrap: wrap;
}

.editorWindow .editorToolScroller {
  max-height: min(30vh, 260px);
}

.editorWindow .assetPreviewCanvas {
  height: 190px;
}

.editorWindow .assetStats,
.editorWindow .assetUploadGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editorLibrary,
.editorInspector,
.editorPreviewPanel,
.editorSelectionPanel {
  display: grid;
  gap: 10px;
}

.editorLibrary,
.editorInspector {
  min-width: 0;
}

.editorLibraryPanel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgb(189 232 111 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.editorTabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(0 0 0 / 20%);
}

.editorTabButton {
  min-width: 0;
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  margin-top: 0;
  padding: 8px 7px;
  border-color: rgb(255 255 255 / 9%);
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  text-align: left;
}

.editorTabButton:hover {
  border-color: rgb(189 232 111 / 30%);
  background: rgb(255 255 255 / 7%);
  color: var(--text);
}

.editorTabButton.active {
  border-color: rgb(189 232 111 / 45%);
  background: rgb(189 232 111 / 14%);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.editorTabButton strong,
.editorTabButton span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorTabButton strong {
  font-size: 12px;
  line-height: 1.1;
}

.editorTabButton span {
  font-size: 10px;
  font-weight: 800;
}

.editorPreviewPanel,
.editorSelectionPanel {
  padding: 10px;
  border: 1px solid rgb(189 232 111 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.editorPreviewPanel {
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(0 0 0 / 10%));
}

.editorSectionHead strong {
  color: var(--text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.editorBrushes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editorTransformTools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.editorMinimap {
  display: grid;
  width: 100%;
  max-height: 128px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #050805;
}

.editorMinimap i {
  display: block;
  min-width: 1px;
  min-height: 1px;
}

.editorToolScroller {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.editorGroup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.editorGroup h3 {
  grid-column: 1 / -1;
}

.uploadedAssetsGroup {
  border-color: rgb(120 208 155 / 26%);
  background: rgb(120 208 155 / 7%);
}

.stampScroller {
  max-height: 190px;
}

.stampGroup {
  grid-template-columns: 1fr;
  border-color: rgb(233 185 78 / 20%);
  background: rgb(233 185 78 / 6%);
}

.editorStamp {
  width: 100%;
  min-height: 54px;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 8px 10px;
  border-color: rgb(233 185 78 / 20%);
  background: rgb(255 255 255 / 5%);
  color: var(--text);
  text-align: left;
}

.editorStamp b {
  font-size: 13px;
}

.editorStamp span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.editorStamp.active {
  border-color: var(--gold);
  background: rgb(233 185 78 / 16%);
}

.editorSpawnList,
.editorSpawnEditor {
  display: grid;
  gap: 7px;
}

.editorSpawnRow {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgb(189 232 111 / 16%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  color: var(--text);
  text-align: left;
}

.editorSpawnRow:hover,
.editorSpawnRow.active {
  border-color: var(--gold);
  background: rgb(233 185 78 / 13%);
}

.editorSpawnRow strong {
  font-size: 13px;
}

.editorSpawnRow span {
  color: var(--muted);
  font-size: 11px;
}

.editorSpawnEditor label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.assetLibraryItem small {
  max-width: 46%;
}

.assetLibraryRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.assetLibraryRow .mini {
  min-width: 52px;
  margin-top: 0;
}

.editorEmptyBlock {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px dashed rgb(189 232 111 / 22%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.editorEmptyBlock strong {
  font-size: 13px;
}

.editorEmptyBlock span {
  color: var(--muted);
  font-size: 12px;
}

.editorOpsHint {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgb(116 178 255 / 18%);
  border-radius: 7px;
  background: rgb(116 178 255 / 7%);
}

.editorOpsHint strong {
  font-size: 12px;
}

.editorOpsHint span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.editorSwatch {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  border-color: rgb(189 232 111 / 18%);
  background: rgb(255 255 255 / 5%);
  color: var(--text);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.editorSwatch:hover {
  border-color: rgb(189 232 111 / 38%);
  background: rgb(255 255 255 / 8%);
  transform: translateY(-1px);
}

.editorSwatch b {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorSwatch small {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.15;
  max-width: 54%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorSwatch.active {
  border-color: var(--accent);
  background: rgb(189 232 111 / 18%);
  box-shadow: 0 0 0 1px rgb(189 232 111 / 10%);
}

.editorSwatch span {
  width: 16px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 4px;
}

.assetUpload {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(120 208 155 / 20%);
  border-radius: 7px;
  background: rgb(120 208 155 / 7%);
}

.worldOps {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgb(233 185 78 / 22%);
  border-radius: 7px;
  background: rgb(233 185 78 / 7%);
}

.worldOps label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.worldResizeGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
}

.editorHealth,
.editorWarnings {
  display: grid;
  gap: 7px;
}

.editorWarning,
.editorOk {
  display: block;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 750;
}

.editorWarning {
  border: 1px solid rgb(233 185 78 / 30%);
  background: rgb(233 185 78 / 10%);
  color: #f2d37c;
}

.editorOk {
  border: 1px solid rgb(120 208 155 / 30%);
  background: rgb(120 208 155 / 10%);
  color: #a7e6bc;
}

.assetResourceFields {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(7 12 6 / 42%);
}

.assetUploadStatus {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.assetUploadStatus[data-state="pending"] {
  border-color: rgb(233 185 78 / 34%);
  color: #f2d37c;
}

.assetUploadStatus[data-state="ok"] {
  border-color: rgb(120 208 155 / 36%);
  color: #a7e6bc;
}

.assetUploadStatus[data-state="error"] {
  border-color: rgb(227 107 95 / 40%);
  color: #f3a49b;
}

.assetUpload label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.assetUploadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.assetCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.assetPreviewCanvas {
  width: 100%;
  height: 220px;
  display: block;
  border: 1px solid rgb(189 232 111 / 16%);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgb(16 24 13 / 96%), rgb(5 8 5 / 96%));
}

.assetStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.assetStats span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 4%);
  color: var(--muted);
  font-size: 11px;
}

.assetStats strong {
  color: var(--text);
  font-size: 13px;
}

.assetGameplayCard {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgb(189 232 111 / 18%);
  border-radius: 7px;
  background: rgb(189 232 111 / 8%);
}

.assetGameplayCard strong {
  color: var(--text);
  font-size: 13px;
}

.assetGameplayCard span {
  color: var(--muted);
  font-size: 12px;
}

.assetCheck input {
  width: auto;
  min-height: auto;
}

.adminRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgb(189 232 111 / 14%);
  border-radius: 7px;
  background: rgb(255 255 255 / 3%);
}

.adminRow + .adminRow {
  margin-top: 6px;
}

.adminRow strong,
.adminRow span {
  display: block;
}

.adminRow span {
  color: var(--muted);
  font-size: 12px;
}

.hint {
  position: absolute;
  z-index: 6;
  left: 18px;
  bottom: 18px;
  max-width: min(680px, calc(100% - 386px));
  padding: 8px 10px;
  border: 2px solid #211b13;
  border-radius: 6px;
  background: rgb(219 201 156 / 92%);
  color: #2d2418;
  font-size: 13px;
}

.dialogue {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 58px;
  width: min(520px, calc(100% - 36px));
  transform: translateX(-50%);
  border: 1px solid rgb(233 185 78 / 42%);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgb(9 14 8 / 88%);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgb(0 0 0 / 34%);
  font-size: 13px;
}

.dialogue strong {
  display: block;
  color: var(--gold);
  margin-bottom: 3px;
}

.dialogueBtn {
  float: right;
  margin-left: 10px;
}

.labels-layer {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  overflow: hidden;
}

.nameplate {
  position: absolute;
  padding: 2px 7px 3px;
  border: 1px solid rgb(0 0 0 / 30%);
  border-radius: 6px;
  background: rgb(9 14 8 / 76%);
  color: #dbe9ff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 1px rgb(0 0 0 / 70%);
  white-space: nowrap;
}

.nameplate.mine {
  color: #dff996;
}

.healthBar {
  position: absolute;
  width: 46px;
  height: 8px;
  border: 1px solid rgb(0 0 0 / 74%);
  border-radius: 2px;
  background: #821d1a;
  box-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.healthBar i {
  display: block;
  width: calc(var(--hp, 1) * 100%);
  height: 100%;
  border-radius: 1px;
  background: linear-gradient(180deg, #8ef16f, #3ea842);
}

.hitsplat {
  position: absolute;
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid #3a130e;
  border-radius: 999px;
  background: radial-gradient(circle, #fff5cc 0 30%, #d34e38 32% 70%, #7d1d16 72%);
  color: #fff6d6;
  font: 950 14px/1 Georgia, serif;
  text-shadow: 0 1px 1px rgb(0 0 0 / 85%);
  pointer-events: none;
  animation: hitsplat-pop 1.1s ease-out forwards;
}

.hitsplat.miss {
  border-color: #142138;
  background: radial-gradient(circle, #f1f7ff 0 30%, #5e7fa7 32% 70%, #26364f 72%);
  color: #f6fbff;
}

.hitsplat.heal {
  border-color: #123a1c;
  background: radial-gradient(circle, #f4ffe8 0 30%, #5faf49 32% 70%, #2b6b2c 72%);
  color: #faffef;
}

@keyframes hitsplat-pop {
  0% {
    opacity: 0;
    margin-top: 8px;
    scale: 0.72;
  }
  18% {
    opacity: 1;
    scale: 1.08;
  }
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    margin-top: -22px;
    scale: 0.92;
  }
}

.lootLabel {
  position: absolute;
  pointer-events: auto;
  border: 1px solid rgb(255 238 170 / 55%);
  border-radius: 6px;
  background: rgb(18 13 6 / 84%);
  color: #ffe08a;
  font: 800 11px/1.1 system-ui, sans-serif;
  padding: 3px 7px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgb(0 0 0 / 70%);
  cursor: pointer;
}

.lootLabel:hover {
  background: rgb(58 42 16 / 92%);
}

.action-menu {
  position: absolute;
  z-index: 18;
  min-width: 168px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 4px;
  border: 2px solid rgb(33 25 15 / 88%);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgb(39 32 22 / 96%), rgb(17 14 10 / 98%)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 5px);
  box-shadow: 0 12px 30px rgb(0 0 0 / 46%), inset 0 1px 0 rgb(255 255 255 / 12%);
}

.action-menu button {
  width: 100%;
  min-height: 26px;
  display: block;
  border: 0;
  border-radius: 2px;
  padding: 3px 8px;
  background: transparent;
  box-shadow: none;
  color: #f3df9d;
  font: 800 12px/1.2 system-ui, sans-serif;
  text-align: left;
  text-shadow: 0 1px 1px rgb(0 0 0 / 80%);
}

.action-menu button:hover,
.action-menu button:focus-visible {
  outline: none;
  background: rgb(214 173 73 / 20%);
  color: #fff5bf;
  filter: none;
}

@media (max-width: 760px) {
  .worldWrap {
    padding: 0;
  }

  canvas {
    border-radius: 0;
  }

  .topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    align-items: flex-start;
    flex-direction: column;
  }

  .currencies {
    flex-wrap: wrap;
  }

  .osrsDock {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 8px;
    width: auto;
    grid-template-columns: 118px 1fr;
    align-items: end;
  }

  .minimapFrame {
    min-height: 104px;
  }

  .minimapFrame::before {
    inset: 9px 8px 9px 42px;
  }

  .compass {
    left: 8px;
    top: 9px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .minimapGrid {
    inset: 17px 16px 17px 50px;
  }

  .orbStack {
    display: none;
  }

  .quickbar {
    position: static;
    top: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quickbar button {
    width: auto;
  }

  .gameWindow,
  .inventoryWindow,
  .economyWindow,
  .logWindow,
  .characterWindow,
  .skillsWindow,
  .adminWindow,
  .editorWindow {
    left: 8px;
    right: 8px;
    top: 126px;
    bottom: 126px;
    width: auto;
    max-height: none;
  }

  .hint {
    left: 8px;
    right: 8px;
    bottom: 118px;
    max-width: none;
  }

  .dialogue {
    bottom: 102px;
  }

  .editorWorkbench {
    grid-template-columns: 1fr;
  }

  .editorTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .appearanceBuilder fieldset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editorQualityBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editorTopline,
  .editorSectionHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .editorCommit {
    width: 100%;
    flex-wrap: wrap;
  }

  .editorToolScroller {
    max-height: 220px;
  }

  .assetPreviewCanvas {
    height: 170px;
  }

  .equippedItemBuilder {
    grid-template-columns: 1fr;
  }

  .itemPreviewCanvas {
    height: 220px;
  }

  .socketTunerForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .assetStats,
  .assetUploadGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* World Studio — purpose-built editor shell */
.editorWindow {
  inset: 0 !important;
  position: fixed !important;
  z-index: 80;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}

.editorWindow > .windowHead { display: none; }
.editorWindow .editorPanel,
.editorWindow .editorShell { height: 100%; min-height: 0; overflow: hidden; }

.editorStudio {
  --studio-bg: #11140f;
  --studio-panel: rgb(20 24 18 / 97%);
  --studio-panel-2: #191e16;
  --studio-line: rgb(211 225 187 / 14%);
  --studio-text: #eef3e6;
  --studio-muted: #a0aa95;
  --studio-accent: #b9df72;
  --studio-gold: #e0b866;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 60px 54px minmax(0, 1fr);
  gap: 0;
  color: var(--studio-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
}

.editorCommandBar,
.editorToolbar,
.studioModeNav,
.editorSidePanel { pointer-events: auto; }

.editorCommandBar {
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(520px, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--studio-line);
  background: rgb(13 16 12 / 98%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
}

.editorBrandBlock {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.editorBrandMark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgb(185 223 114 / 34%);
  border-radius: 8px;
  background: #20291a;
  color: var(--studio-accent);
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}

.editorBrandBlock div { min-width: 0; }
.editorBrandBlock strong,
.editorBrandBlock span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editorBrandBlock strong { font-size: 14px; letter-spacing: -.01em; }
.editorBrandBlock span { margin-top: 2px; color: var(--studio-muted); font-size: 11px; }

.editorCommandStatus { display: flex; justify-content: center; }
.editorCommit { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; }

.editorAction,
.editorIconAction,
.editorTool {
  min-height: 34px;
  margin: 0;
  border: 1px solid var(--studio-line);
  border-radius: 6px;
  background: #20251d;
  color: var(--studio-text);
  font: 750 11px/1 system-ui, sans-serif;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
}

.editorAction { padding: 0 11px; }
.editorAction:hover:not(:disabled), .editorTool:hover:not(:disabled) { border-color: rgb(185 223 114 / 42%); background: #293124; }
.editorAction:active:not(:disabled), .editorTool:active:not(:disabled) { transform: translateY(1px); }
.editorAction.primary { border-color: rgb(185 223 114 / 34%); background: #2c3824; color: #e9f7ce; }
.editorAction.publish { border-color: rgb(224 184 102 / 42%); background: #43361f; color: #f6d797; }
.editorAction:disabled, .editorTool:disabled { opacity: .38; cursor: not-allowed; }

.editorIconAction {
  width: 34px;
  padding: 0;
  color: var(--studio-muted);
  font-size: 20px;
}

.editorToolbar {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 7px 14px;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--studio-line);
  border-radius: 0;
  background: rgb(17 20 15 / 97%);
}

.editorToolGroup {
  min-width: max-content;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 8px;
  background: rgb(255 255 255 / 2%);
}

.editorToolGroup > span {
  display: grid;
  place-items: center;
  padding: 0 7px;
  color: #75806f;
  font-size: 9px;
  letter-spacing: .1em;
}

.editorTool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  background: transparent;
}

.editorTool b {
  min-width: 18px;
  min-height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  color: #aab4a0;
  font: 800 9px/1 ui-monospace, monospace;
}

.editorTool.active { border-color: rgb(185 223 114 / 48%); background: #334126; color: #effbd8; }
.editorTool.active b { border-color: rgb(185 223 114 / 34%); background: rgb(185 223 114 / 12%); color: var(--studio-accent); }
.editorTool.danger.active { border-color: rgb(229 111 96 / 48%); background: #412520; }

.editorWorkbench {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 316px minmax(260px, 1fr) 350px;
  gap: 0;
  align-items: stretch;
  pointer-events: none;
}

.editorSidePanel {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--studio-panel);
  scrollbar-width: thin;
  scrollbar-color: #3f4938 transparent;
}

.editorLibrary {
  height: 100%;
  max-height: 100%;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.editorLibrary { padding: 12px; border-right: 1px solid var(--studio-line); }
.editorInspector { padding: 12px; border-left: 1px solid var(--studio-line); }

.editorViewportStage {
  position: relative;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.worldStudioCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  outline: none;
}

.editorViewportStage::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 10px;
  box-shadow: inset 0 0 70px rgb(0 0 0 / 15%);
}

.editorViewportBadge {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  max-width: min(360px, calc(100% - 52px));
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 7px;
  background: rgb(11 14 10 / 78%);
  backdrop-filter: blur(10px);
}

.editorViewportBadge span { color: var(--studio-accent); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; }
.editorViewportBadge strong { font-size: 13px; }
.editorViewportBadge small { overflow: hidden; color: #a4ad9b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.editorViewportHelp {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 999px;
  background: rgb(11 14 10 / 76%);
  color: #9da796;
  font-size: 10px;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}

.editorViewportHelp kbd { color: #e0e8d7; font: 800 9px/1 ui-monospace, monospace; }

.editorTabs {
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: #10130e;
}

.editorTabButton {
  min-height: 46px;
  padding: 6px 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  text-align: center;
}
.editorTabButton span { display: none; }
.editorTabButton.active { background: #2c3724; box-shadow: none; }

.editorLibraryPanel,
.editorPreviewPanel,
.editorSelectionPanel,
.editorDisclosure {
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-panel-2);
  box-shadow: none;
}

.editorLibraryPanel,
.editorPreviewPanel,
.editorSelectionPanel { padding: 11px; }

.editorToolScroller { max-height: calc(100vh - 260px); }
.editorGroup { grid-template-columns: 1fr; padding: 0; border: 0; background: transparent; box-shadow: none; }
.editorGroup h3 { padding: 9px 2px 3px; color: #798374; font-size: 9px; letter-spacing: .1em; }
.editorSwatch { min-height: 40px; border-radius: 6px; background: #20251d; }
.editorSwatch:hover { transform: none; }

.editorDisclosure { display: block; overflow: hidden; }
.editorDisclosure > summary {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  cursor: pointer;
  list-style: none;
}
.editorDisclosure > summary::-webkit-details-marker { display: none; }
.editorDisclosure > summary strong { font-size: 12px; }
.editorDisclosure > summary span { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: rgb(255 255 255 / 6%); color: var(--studio-muted); font-size: 10px; text-align: center; }
.editorDisclosure[open] > summary { border-bottom: 1px solid var(--studio-line); }
.editorDisclosure > :not(summary) { margin: 10px; }
.editorDisclosure > form { padding: 0; border: 0; background: transparent; }

.editorWorkbench.editorContentMode {
  grid-template-columns: 300px minmax(0, 1fr);
}

.editorContentMode .editorInspector { display: none; }

.editorContentStage {
  overflow: auto;
  padding: 18px;
  background: #10130e;
  pointer-events: auto;
}

.editorContentStage::after { display: none; }
.editorContentStage > .worldStudioCanvas { visibility: hidden; pointer-events: none; }

.contentStudioEmbedded {
  width: min(1180px, 100%);
  margin: 0 auto;
  border-color: var(--studio-line);
  background: var(--studio-panel);
  box-shadow: none;
}

.editorContentOverview { display: grid; gap: 12px; }
.editorContentOverview > p { margin: 0; color: var(--studio-muted); font-size: 12px; line-height: 1.5; }

.editorContentStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.editorContentStats span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border-radius: 6px;
  background: rgb(255 255 255 / 4%);
  color: var(--studio-muted);
  font-size: 10px;
}

.editorContentStats strong { color: var(--studio-text); font-size: 17px; }
.editorContentStats .warn strong { color: var(--studio-gold); }
.editorContentStats .bad strong { color: #ff9b83; }

@media (max-width: 980px) {
  .editorWorkbench.editorContentMode { grid-template-columns: 240px minmax(0, 1fr); }
  .editorContentStage { padding: 10px; }
}

.editorQualityBar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.editorQualityCard { padding: 8px; }
.editorQualityCard strong { font-size: 15px; }
.editorMinimap { max-height: 105px; }
.assetPreviewCanvas { height: 180px; }

.studioPropertyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.studioPropertyGrid label {
  display: grid;
  gap: 5px;
  color: #aab4a0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
}
.studioPropertyGrid label.wide { grid-column: 1 / -1; }
.studioPropertyGrid input,
.studioPropertyGrid select {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgb(211 225 187 / 16%);
  border-radius: 5px;
  background: #0f120d;
  color: #eef3e6;
  font: 700 11px/1 ui-monospace, monospace;
}
.studioPropertyGrid input:focus-visible { outline: 2px solid rgb(185 223 114 / 65%); outline-offset: 1px; }

.editorHierarchy { margin-top: 10px; }
.editorHierarchyList { max-height: 260px; overflow-y: auto; }
.editorHierarchyRow {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  border-radius: 0;
  background: transparent;
  color: #e8eee1;
  text-align: left;
}
.editorHierarchyRow:hover { background: rgb(255 255 255 / 4%); }
.editorHierarchyRow.active { background: rgb(185 223 114 / 10%); color: #effbd8; }
.editorHierarchyRow > span:last-child { min-width: 0; display: grid; gap: 2px; }
.editorHierarchyRow strong,
.editorHierarchyRow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editorHierarchyRow strong { font-size: 11px; }
.editorHierarchyRow small { color: #889282; font-size: 9px; }
.editorHierarchyKind {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(185 223 114 / 18%);
  border-radius: 5px;
  background: #20271c;
  color: #b9df72;
  font: 800 8px/1 ui-monospace, monospace;
}

.studioSearch { display: grid; gap: 5px; margin: 8px 0; color: #8f9989; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.studioSearch input { width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 1px solid var(--studio-line); border-radius: 6px; background: #0e110c; color: var(--studio-text); }
.studioLayerList, .studioVersionList { display: grid; gap: 4px; }
.studioLayerRow { min-height: 38px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px; border-bottom: 1px solid rgb(255 255 255 / 5%); }
.studioLayerRow strong { font-size: 11px; }
.studioZoneCard { display: grid; gap: 8px; margin-top: 8px; padding: 9px; border: 1px solid var(--studio-line); border-radius: 6px; background: #121610; }
.studioZoneCard.active { border-color: rgb(185 223 114 / 42%); }
.studioVersionRow { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgb(255 255 255 / 5%); }
.studioVersionRow span { min-width: 0; display: grid; gap: 2px; }
.studioVersionRow strong { font-size: 10px; }
.studioVersionRow small { color: var(--studio-muted); font-size: 9px; }
.studioValidation { display: grid; gap: 4px; margin: 8px 0; padding: 9px; border-left: 3px solid #769e55; background: rgb(118 158 85 / 8%); }
.studioValidation.hasErrors { border-left-color: #d76d5d; background: rgb(215 109 93 / 8%); }
.studioValidation strong { font-size: 11px; }
.studioValidation span { color: var(--studio-muted); font-size: 9px; line-height: 1.45; }
.favoriteAsset { width: 32px; padding: 0 !important; color: #778071; }
.favoriteAsset.active { color: #e0b866; }
.editorTool.playtest { border-color: rgb(185 223 114 / 38%); background: #2b3822; color: #effbd8; }
.editorDisclosure kbd { color: #dbe5d2; font: 800 9px/1 ui-monospace, monospace; }
.studioShortcutGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.studioShortcutGrid label { display: grid; gap: 3px; color: var(--studio-muted); font-size: 8px; text-align: center; }
.studioShortcutGrid input { width: 100%; min-height: 30px; margin: 0; padding: 0; border: 1px solid var(--studio-line); border-radius: 5px; background: #0e110c; color: var(--studio-accent); font: 800 12px/1 ui-monospace, monospace; text-align: center; text-transform: uppercase; }

@media (max-width: 1100px) {
  .editorCommandBar { grid-template-columns: minmax(200px, 1fr) auto; }
  .editorCommandStatus { display: none; }
  .editorWorkbench { grid-template-columns: 280px minmax(240px, 1fr) 310px; }
  .editorAction.secondary { display: none; }
}

@media (max-width: 820px) {
  .editorStudio { grid-template-rows: 58px 50px minmax(0, 1fr); }
  .editorCommandBar { grid-template-columns: 1fr auto; padding: 0 8px; }
  .editorBrandBlock span { display: none; }
  .editorCommit .editorAction:not(.primary):not(.publish) { display: none; }
  .editorWorkbench { grid-template-columns: minmax(220px, 44vw) 1fr; }
  .editorInspector { display: none; }
  .editorToolbar { padding-inline: 8px; }
  .editorToolGroup > span { display: none; }
  .editorViewportHelp { display: none; }
}
.studioLogicList,.studioInteractionList,.studioStepList{display:grid;gap:10px;margin-top:10px}.studioLogicCard,.studioInteractionCard{display:grid;gap:9px;padding:12px;background:#182016;border:1px solid #34452d;border-radius:6px}.studioLogicCard>.editorSectionHead span{display:grid;gap:2px}.studioLogicCard>.editorSectionHead small{color:#9fab91;font-weight:500}.studioStepCard{display:grid;gap:6px;padding:9px;background:#11170f;border-left:3px solid #b89b52;border-radius:3px}.studioStepKind{color:#d7c27e;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.studioQuestTrack{display:flex;flex-wrap:wrap;gap:6px}.studioQuestTrack span{padding:5px 7px;background:#252d20;color:#cbd5c3;border-radius:3px;font-size:11px}.studioLogicCard textarea{width:100%;resize:vertical}.studioInteractionCard .assetCheck{align-items:center;display:flex;gap:8px}@media(max-width:900px){.studioLogicCard,.studioInteractionCard{padding:10px}}
.studioPlaytestDebug{display:grid;gap:6px;padding:11px;margin:10px 0;background:#202815;border-left:3px solid #d0ad53;border-radius:4px}.studioPlaytestDebug p{margin:0;color:#bcc8b2}.studioPlaytestDebug>span{font-size:12px;color:#dbe2d4}

/* World Studio clarity pass — one workspace, one context, one inspector */
.studioModeNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#20261f;border-bottom:1px solid #303a2f;padding:0 14px}.studioModeButton{display:grid;gap:2px;min-width:0;padding:10px 14px;text-align:left;border:0;border-bottom:3px solid transparent;background:transparent;color:#abb5a5;cursor:pointer}.studioModeButton strong{font-size:13px;color:#e0e6dc}.studioModeButton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.studioModeButton:hover{background:#202a20}.studioModeButton.active{background:#273126;border-bottom-color:#d0ad53}.studioModeButton.active strong{color:#f3ddb0}.studioProblemsList{display:grid;gap:5px;padding:8px}.studioProblem{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:7px;width:100%;padding:9px;text-align:left;background:#171c17;border:1px solid #303930;border-left-width:3px;color:#d7ded3;cursor:pointer}.studioProblem:hover{background:#202820}.studioProblem-error{border-left-color:#d96b62}.studioProblem-warning{border-left-color:#d0ad53}.studioProblem-info{border-left-color:#6599b7}.studioProblemSeverity{text-transform:uppercase;font-size:9px;letter-spacing:.08em}.studioProblem strong{font-size:11px;font-weight:600}.studioProblem small{font-size:9px;color:#94a08f}.studioProblemsEmpty{display:grid;gap:3px;margin:8px;padding:12px;background:#19231a;border-left:3px solid #6c9d67}.studioProblemsEmpty span{font-size:11px;color:#aab5a5}@media(max-width:900px){.studioModeNav{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 6px}.studioModeButton span{display:none}}
.studioHierarchyGroup{border-bottom:1px solid #2b332b}.studioHierarchyGroup>summary{display:flex;justify-content:space-between;padding:8px 9px;color:#bac5b5;cursor:pointer}.studioHierarchyGroup>summary span{font-size:10px;color:#7f8c7b}.studioHierarchyGroup .editorHierarchyRow{padding-left:calc(8px + var(--hierarchy-depth,0)*14px)}
.editorStudio {
  --studio-bg: #0d100c;
  --studio-panel: #151914;
  --studio-panel-2: #1a1f18;
  --studio-line: rgb(219 231 201 / 11%);
  --studio-text: #edf2e8;
  --studio-muted: #98a291;
  --studio-accent: #b7d97d;
  grid-template-rows: 56px auto 46px minmax(0, 1fr);
  background: var(--studio-bg);
}
.editorCommandBar { grid-template-columns: minmax(250px, 1fr) auto auto; gap: 12px; padding-inline: 12px; box-shadow: none; }
.editorBrandMark { width: 30px; height: 30px; border-radius: 6px; }
.editorBrandBlock strong { font-size: 13px; }
.editorCommit { gap: 4px; }
.editorAction,.editorIconAction,.editorTool { min-height: 32px; border-radius: 5px; }
.editorAction.secondary { color: var(--studio-muted); background: transparent; }
.editorToolbar { gap: 6px; padding: 5px 10px; background: #11150f; }
.editorToolGroup { height: 35px; padding: 2px; border: 0; border-radius: 5px; background: transparent; }
.editorToolGroup > span { padding-inline: 5px; }
.editorTool { padding-inline: 8px; }
.editorTool b { border: 0; background: rgb(255 255 255 / 4%); }
.editorToolGroup:last-child .editorTool:not(.playtest) { display: none; }
.editorTab-content .editorToolbar { display: none; }
.editorTab-content { grid-template-rows: 56px auto minmax(0, 1fr); }
.editorTab-world .editorToolGroup:nth-child(1),
.editorTab-world .editorToolGroup:nth-child(4) { display: none; }
.editorTab-assets .editorToolGroup:nth-child(4),
.editorTab-assets .editorToolGroup:nth-child(5),
.editorTab-stamps .editorToolGroup:nth-child(4),
.editorTab-stamps .editorToolGroup:nth-child(5),
.editorTab-objects .editorToolGroup:nth-child(4),
.editorTab-objects .editorToolGroup:nth-child(5) { display: none; }

.editorWindow .editorWorkbench {
  position: relative;
  grid-template-columns: 248px minmax(0, 1fr) 292px;
  gap: 0;
  align-items: stretch;
}
.editorLibrary,.editorInspector { padding: 10px; }
.editorSidePanel { background: #141813; }
.editorLibraryPanel,.editorPreviewPanel,.editorSelectionPanel,.editorDisclosure { border-color: var(--studio-line); border-radius: 6px; background: transparent; }
.editorLibraryPanel,.editorPreviewPanel,.editorSelectionPanel { padding: 0; }
.editorLibraryPanel > .editorSectionHead,.editorSelectionPanel > .editorSectionHead,.editorPreviewPanel > .editorSectionHead { padding: 10px 10px 8px; }
.editorSelectionPanel > :not(.editorSectionHead),.editorPreviewPanel > :not(.editorSectionHead) { margin-inline: 10px; }
.editorSelectedName { font-size: 15px; line-height: 1.2; }
.editorTabs { grid-template-columns: 1fr; gap: 2px; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--studio-line); border-radius: 0; background: transparent; }
.editorTabButton { min-height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-radius: 5px; text-align: left; }
.editorTabButton span { display: block; color: #737d6e; font-size: 9px; }
.editorTabButton.active { background: #283220; color: #f1f8e7; box-shadow: inset 2px 0 0 var(--studio-accent); }
.editorTabButton.active span { color: #aebaa4; }
.editorToolScroller { max-height: calc(100vh - 190px); padding: 4px 0; }
.editorGroup h3 { padding: 11px 4px 4px; }
.editorSwatch { min-height: 38px; border: 0; border-radius: 5px; background: #1c211a; }
.editorSwatch.active { outline: 1px solid rgb(183 217 125 / 55%); background: #293322; }
.editorViewportStage::after { inset: 10px; border-radius: 6px; }
.editorViewportBadge { top: 18px; left: 18px; padding: 7px 9px; border-radius: 5px; }
.editorViewportHelp { bottom: 14px; border-radius: 5px; }
.studioPropertyGrid { gap: 7px; }
.studioPropertyGrid label { color: #8f9988; }
.studioPropertyGrid input,.studioPropertyGrid select,.studioPropertyGrid textarea { border-color: var(--studio-line); border-radius: 4px; background: #10130f; }
.editorEmptyBlock { border: 1px dashed var(--studio-line); background: transparent; }

.studioWorldPanel { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
.studioWorldNav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--studio-line); }
.studioWorldNavItem { min-height: 42px; display: grid; align-content: center; gap: 2px; margin: 0; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--studio-muted); text-align: left; }
.studioWorldNavItem:hover { background: rgb(255 255 255 / 4%); color: var(--studio-text); }
.studioWorldNavItem.active { background: #293322; color: #eef7df; box-shadow: inset 2px 0 0 var(--studio-accent); }
.studioWorldNavItem span { font-size: 11px; font-weight: 800; }
.studioWorldNavItem small { color: #788272; font-size: 9px; }
.studioFocusSection { min-width: 0; display: grid; align-content: start; gap: 10px; }
.studioFocusSection > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--studio-line); }
.studioFocusSection h3 { margin: 2px 0 0; font-size: 14px; letter-spacing: -.01em; }
.studioFocusSection .eyebrow { color: #798374; font-size: 8px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.studioInlineActions { display: flex; gap: 4px; }
.studioLogicCard,.studioInteractionCard,.studioZoneCard { padding: 9px; border-color: var(--studio-line); border-radius: 5px; background: #181d16; }
.studioLogicList,.studioInteractionList,.studioStepList { gap: 7px; margin-top: 0; }
.studioStepCard { padding: 8px; border-left-width: 2px; background: #11150f; }
.editorQualityBar { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.editorQualityCard { padding: 7px; border: 0; background: #1b2118; }
.editorQualityCard strong { font-size: 14px; }
.editorDisclosure > summary { min-height: 38px; }
.editorDisclosure > summary strong { text-transform: none; letter-spacing: 0; }
.editorInspector > .editorDisclosure { margin-top: 2px; }

@media (max-width: 1279px) {
  .editorWindow .editorWorkbench { grid-template-columns: 224px minmax(0,1fr); }
  .editorInspector { display: none; }
  .editorInspector.hasSelection {
    position: absolute;
    z-index: 8;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: min(292px, calc(100% - 254px));
    display: block;
    border: 1px solid var(--studio-line);
    border-radius: 7px;
    box-shadow: 0 18px 50px rgb(0 0 0 / 48%);
  }
  .editorCommandBar { grid-template-columns: minmax(220px,1fr) auto; }
  .editorCommandStatus { display:none; }
  .editorAction.secondary { display:none; }
}
@media (max-width: 860px) {
  .editorWindow .editorWorkbench { grid-template-columns: minmax(190px,34vw) minmax(0,1fr); }
  .editorInspector.hasSelection { width: min(280px, calc(100% - 24px)); }
  .editorTabButton span,.editorToolGroup > span { display:none; }
}

/* Keep Admin Studio authoritative over legacy in-game panel rules above. */
.adminView .adminItemForm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 10px; }
.adminView .equippedItemBuilder { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.adminView .itemPreviewCanvas { height: 390px; }
@media (max-width: 980px) {
  .adminView .equippedItemBuilder { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .adminView .adminItemForm { grid-template-columns: 1fr; }
  .adminView .itemPreviewCanvas { height: 260px; }
  .itemFitToolbar { align-items: stretch; flex-direction: column; }
  .bodyMaskGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Keep mode layout overrides after the base editor responsive rules. */
.editorWindow .studioMode-publish .editorWorkbench { grid-template-columns: minmax(360px,440px) minmax(0,1fr); }
.editorWindow .studioMode-test .editorWorkbench { grid-template-columns: minmax(340px,400px) minmax(0,1fr); }
@media (max-width:900px) {
  .editorWindow .studioMode-publish .editorWorkbench,.editorWindow .studioMode-test .editorWorkbench { grid-template-columns:minmax(250px,45vw) minmax(0,1fr); }
}
.editorStudio.studioMode-publish { grid-template-rows:56px auto minmax(0,1fr); }
.studioGraphCanvas { display:grid; gap:7px; }
.studioGraphNode { display:grid; gap:8px; padding:9px; border-left:2px solid #697463; border-radius:4px; background:#10140f; }
.studioGraphNode-dialogue { border-left-color:#d0ad53; }.studioGraphNode-condition { border-left-color:#7ca4bd; }.studioGraphNode-set_flag { border-left-color:#8fad78; }.studioGraphNode-teleport { border-left-color:#b486bf; }
.studioGraphNode > header { display:flex; align-items:center; justify-content:space-between; gap:8px; }.studioGraphNode > header > span { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:1px 7px; align-items:center; }.studioGraphNode > header b { grid-row:1 / span 2; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#252c22; color:#bbc6b4; font-size:9px; }.studioGraphNode > header strong { text-transform:capitalize; font-size:11px; }.studioGraphNode > header small { color:var(--studio-muted); font-size:9px; }
.studioGraphLinks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding-top:6px; border-top:1px solid var(--studio-line); }.studioGraphLinks label { display:grid; gap:3px; color:var(--studio-muted); font-size:9px; }.studioGraphLinks select { min-width:0; border:1px solid var(--studio-line); border-radius:4px; padding:5px; background:#171c15; color:var(--studio-text); font-size:10px; }.studioGraphLinks > span { color:var(--studio-muted); font-size:9px; }
.studioGraphAdd { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding-top:8px; border-top:1px solid var(--studio-line); }.studioGraphAdd > span { margin-right:3px; color:var(--studio-muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.studioSculptSettings { display:grid; gap:6px; padding:8px 2px; border-bottom:1px solid var(--studio-line); }.studioSculptSettings label { display:grid; grid-template-columns:1fr 90px; align-items:center; gap:8px; color:var(--studio-muted); font-size:9px; }.studioSculptSettings input { width:100%; accent-color:var(--studio-accent); }
.studioFloorSwitcher { display:flex; flex-wrap:wrap; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--studio-line); }
.editorStudio small,.editorStudio p,.editorStudio label,.editorStudio .assetMetaLine,.editorStudio .editorHint { font-size:11px !important; line-height:1.42; }
.editorStudio .eyebrow,.editorStudio .studioProblemSeverity { font-size:10px !important; }
.studioInspectorToggle { display:none; }
@media (max-width:1279px) {
  .studioInspectorToggle { display:block; }
  .editorInspector.forceOpen { position:absolute; z-index:9; top:10px; right:10px; bottom:10px; width:min(320px,calc(100% - 24px)); display:block; overflow-y:auto; border:1px solid var(--studio-line); border-radius:7px; box-shadow:0 18px 50px rgb(0 0 0 / 55%); }
}

/* World Studio polish — resizable rails, contextual inspector and compact chrome */
.editorStudio { grid-template-rows: 52px 34px 40px minmax(0,1fr); }
.studioModeNav { display:flex; align-items:stretch; gap:2px; padding:3px 10px; background:#11150f; }
.studioModeButton { display:flex; align-items:center; justify-content:center; min-height:27px; padding:3px 14px; border:0; border-radius:5px; }
.studioModeButton strong { font-size:11px; letter-spacing:.015em; }
.studioModeButton span { display:none; }
.studioModeButton.active { border:0; background:#293322; box-shadow:inset 0 -2px 0 var(--studio-accent); }
.editorToolbar { min-width:0; overflow-x:auto; scrollbar-width:thin; }
.editorToolGroup { flex:0 0 auto; height:31px; }
.editorTool { min-height:27px; padding-inline:7px; font-size:10px; }
.editorTool b { width:19px; height:19px; }
.editorWindow .editorWorkbench { grid-template-columns:var(--studio-library-width,304px) 5px minmax(0,1fr) 5px var(--studio-inspector-width,324px); }
.editorWindow .studioMode-publish .editorWorkbench,.editorWindow .studioMode-test .editorWorkbench { grid-template-columns:minmax(340px,var(--studio-library-width,400px)) 5px minmax(0,1fr); }
.studioMode-publish .studioPanelResizer-right,.studioMode-test .studioPanelResizer-right,.studioMode-publish .editorInspector,.studioMode-test .editorInspector { display:none; }
.editorWindow .editorWorkbench.editorContentMode { grid-template-columns:var(--studio-library-width,304px) 5px minmax(0,1fr); }
.editorContentMode .studioPanelResizer-right { display:none; }
.editorLibrary,.editorInspector { min-width:0; }
.studioPanelResizer { position:relative; z-index:6; cursor:col-resize; background:#10140f; touch-action:none; }
.studioPanelResizer::after { content:""; position:absolute; inset:0 1px; background:transparent; transition:background .15s ease; }
.studioPanelResizer:hover::after,.studioResizing .studioPanelResizer::after { background:rgb(183 217 125 / 45%); }
.studioResizing,.studioResizing * { cursor:col-resize !important; user-select:none !important; }
.studioInspectorTabs { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin:-10px -10px 10px; padding:8px 8px 7px; border-bottom:1px solid var(--studio-line); background:#141813; }
.studioInspectorTabs button { position:relative; min-width:0; min-height:31px; padding:5px 6px; border:0; border-radius:4px; background:transparent; color:var(--studio-muted); font-size:10px; font-weight:750; cursor:pointer; }
.studioInspectorTabs button:hover { background:rgb(255 255 255 / 4%); color:var(--studio-text); }
.studioInspectorTabs button.active { background:#293322; color:#eef7df; box-shadow:inset 0 -2px 0 var(--studio-accent); }
.studioInspectorTabs button b { position:absolute; top:2px; right:3px; min-width:14px; padding:1px 3px; border-radius:8px; background:#b84d48; color:#fff; font-size:8px; }
.studioInspectorPane { display:none; align-content:start; gap:7px; }
.studioInspector-inspector .studioInspectorPane-inspector,.studioInspector-world .studioInspectorPane-world,.studioInspector-problems .studioInspectorPane-problems { display:grid; }
.studioInspectorPane > .editorSectionHead { padding:4px 2px 8px; border-bottom:1px solid var(--studio-line); }
.editorViewportActions { position:absolute; z-index:3; top:17px; right:17px; display:flex; gap:4px; padding:3px; border:1px solid rgb(255 255 255 / 8%); border-radius:6px; background:rgb(11 14 10 / 78%); backdrop-filter:blur(8px); }
.editorViewportActions .mini { min-height:27px; background:rgb(255 255 255 / 5%); }
.assetLibraryRow { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:7px; padding:5px; border-radius:6px; }
.assetLibraryRow:hover { background:rgb(255 255 255 / 3%); }
.assetLibraryItem { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:9px; min-width:0; padding:3px !important; }
.assetLibraryThumb { position:relative; display:grid !important; place-items:center; width:42px !important; height:42px !important; border:1px solid rgb(255 255 255 / 9%); border-radius:5px !important; box-shadow:inset 0 0 20px rgb(0 0 0 / 28%); }
.assetLibraryThumb i { font-style:normal; color:rgb(255 255 255 / 62%); font-size:9px; font-weight:900; letter-spacing:.08em; }
.assetLibraryCopy { min-width:0; display:grid !important; gap:2px; text-align:left; }
.assetLibraryCopy b,.assetLibraryCopy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.assetLibraryCopy b { font-size:11px; color:var(--studio-text); }
.assetLibraryCopy small { color:var(--studio-muted); font-size:9px !important; }
.assetLibraryActions { display:grid; grid-template-columns:auto 28px; gap:3px; }
.assetLibraryActions .mini { min-height:28px; padding:4px 6px; font-size:9px; }
.favoriteAsset { padding-inline:0 !important; }
.editorLibrary .studioSearch { margin-block:3px 8px; }
.editorLibrary .editorToolScroller { max-height:calc(100vh - 205px); }
.editorStudio small,.editorStudio p,.editorStudio label,.editorStudio .assetMetaLine,.editorStudio .editorHint { font-size:11px !important; line-height:1.48; }
.editorSectionHead strong,.editorDisclosure > summary strong { letter-spacing:.005em; }
.editorAction:focus-visible,.editorTool:focus-visible,.studioModeButton:focus-visible,.studioInspectorTabs button:focus-visible,.editorTabButton:focus-visible { outline:2px solid var(--studio-accent); outline-offset:1px; }
@media (max-width:1279px) {
  .editorWindow .editorWorkbench { grid-template-columns:minmax(240px,var(--studio-library-width,304px)) 5px minmax(0,1fr); }
  .studioPanelResizer-right { display:none; }
  .editorInspector.hasSelection:not(.forceOpen) { display:none; }
  .editorInspector.forceOpen { width:min(var(--studio-inspector-width,324px),calc(100% - 24px)); }
}
@media (max-width:860px) {
  .editorWindow .editorWorkbench { grid-template-columns:minmax(210px,38vw) 4px minmax(0,1fr); }
  .editorViewportActions { top:10px; right:10px; }
  .editorViewportActions .mini { font-size:0; width:30px; }
  .editorViewportActions .mini::after { content:"◎"; font-size:13px; }
}

/* Saltvale game HUD — coastal fantasy frame */
.game:not(:has(.adminWindow:not(.hidden))):not(:has(.editorWindow:not(.hidden))) {
  --hud-ink: #16130e;
  --hud-iron: #302b22;
  --hud-stone: #625a48;
  --hud-gold: #d8b760;
  --hud-paper: #e9ddba;
}

.gameIdentity { display:flex; align-items:center; gap:10px; min-width:0; }
.gameCrest { width:34px; height:34px; display:grid; place-items:center; border:1px solid #17130d; border-radius:50% 50% 46% 46%; background:linear-gradient(145deg,#d2b35e,#795722 58%,#302213); color:#fff1bc; font:900 10px/1 Georgia,serif; letter-spacing:.05em; text-shadow:0 1px 2px #000; box-shadow:inset 0 1px 0 rgb(255 255 255 / 32%),0 2px 5px rgb(0 0 0 / 40%); }
.gameIdentityCopy { display:grid; gap:1px; min-width:0; }
.gameIdentityCopy strong { margin:0; color:#fff0c5; font:700 18px/1 Georgia,serif; letter-spacing:.035em; }
.gameIdentityCopy small { color:#bdb299; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.serverState { display:inline-flex; align-items:center; gap:5px; margin-left:5px; padding:4px 7px; border:1px solid rgb(0 0 0 / 35%); border-radius:10px; background:rgb(12 12 9 / 42%); color:#c8c1ad; font-size:9px; text-transform:capitalize; }
.serverState i { width:6px; height:6px; border-radius:50%; background:#d4ad57; box-shadow:0 0 6px #d4ad57; }
.serverState[data-status="online"] i { background:#91b95d; box-shadow:0 0 6px #91b95d; }
.serverState[data-status="offline"] i { background:#c95f55; box-shadow:0 0 6px #c95f55; }
.serverState[data-status="reconnecting"] i,
.serverState[data-status="connecting"] i { animation:server-state-pulse 1.2s ease-in-out infinite; }
@keyframes server-state-pulse { 50% { opacity:.35; } }

.topbar { right:366px; min-height:48px; border-color:#211c14; border-radius:5px; background:linear-gradient(180deg,rgb(69 63 50 / 93%),rgb(31 29 23 / 96%)); box-shadow:inset 0 1px 0 rgb(255 255 255 / 15%),0 8px 24px rgb(0 0 0 / 28%); }
.currencies span { padding:6px 9px; border-color:#1d1811; border-radius:4px; background:rgb(15 14 11 / 67%); font-size:10px; font-weight:800; text-shadow:0 1px #000; }
.currencies button { min-height:30px; border-radius:4px; font-size:10px; }

.osrsDock { right:14px; top:14px; width:330px; gap:0; filter:drop-shadow(0 12px 20px rgb(0 0 0 / 33%)); }
.minimapFrame { min-height:230px; border:4px solid #1c1812; border-radius:12px 12px 2px 2px; background:linear-gradient(155deg,#6e6654,#403b30 50%,#242119); box-shadow:inset 0 0 0 2px #817660,inset 0 1px 0 rgb(255 255 255 / 22%); }
.minimapFrame::before { inset:12px 15px 14px 91px; border:4px solid #191610; box-shadow:0 0 0 2px #857a62,inset 0 0 0 4px #2b291f,inset 0 0 30px #000; }
.minimapGrid { inset:25px 28px 27px 104px; }
.compass { left:17px; top:13px; width:50px; height:50px; border:3px solid #211b13; background:radial-gradient(circle at 45% 35%,#f0e5bd,#a29268 54%,#403724 78%); color:#9a2822; font-size:18px; box-shadow:0 0 0 2px #71664f,inset 0 2px 1px rgb(255 255 255 / 34%); }
.compass::after { content:""; position:absolute; bottom:6px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:7px solid #9a2822; }
.orbStack { left:12px; top:72px; grid-template-columns:repeat(2,34px); gap:7px 6px; }
.orb { width:34px; min-height:34px; border-width:2px; box-shadow:0 0 0 1px #6c624e,inset 0 1px 3px rgb(255 255 255 / 22%),inset 0 -5px 9px rgb(0 0 0 / 34%); }
.orb strong { font-size:12px; }
.orb span { font-size:7px; }
.orb strong { font:800 16px/1 Georgia,serif; }
.orb span { margin-top:-2px; color:#e0d3ad; letter-spacing:.06em; }

.quickbar { grid-template-columns:repeat(5,1fr); gap:2px; padding:5px 7px 7px; border:4px solid #1c1812; border-top:0; border-radius:0 0 8px 8px; background:linear-gradient(180deg,#4f493c,#29261f); box-shadow:inset 0 0 0 2px #6d6451; }
.quickbar button { min-height:47px; display:grid; place-items:center; align-content:center; gap:2px; padding:3px; border-color:#211c14; border-radius:3px; background:linear-gradient(180deg,#68604d,#363127); color:#d8cda9; transition:filter .15s ease,transform .1s ease; }
.quickbar button:hover { filter:brightness(1.16); }
.quickbar button:active { transform:translateY(1px); }
.quickbar button > span { font:700 18px/1 Georgia,serif; }
.quickbar button > small { font-size:8px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.quickbar button.active { border-color:#e0b447; background:linear-gradient(180deg,#a27c39,#5b3b1d); box-shadow:inset 0 0 0 1px rgb(255 237 174 / 20%); }

.inventoryWindow,.economyWindow,.characterWindow,.skillsWindow { right:14px; top:298px; width:330px; }
.gameWindow:not(.adminWindow):not(.editorWindow) { border-color:#1c1812; border-radius:5px; padding:11px; background:linear-gradient(165deg,rgb(76 69 54 / 97%),rgb(35 32 25 / 98%)); box-shadow:inset 0 0 0 2px #6e6450,inset 0 1px 0 rgb(255 255 255 / 18%),0 18px 38px rgb(0 0 0 / 42%); scrollbar-color:#75684d #252119; scrollbar-width:thin; }
.windowHead { margin:-11px -11px 10px; padding:9px 11px; border-bottom-color:#1c1812; background:linear-gradient(180deg,#4a4131,#2b271f); }
.windowHead h2 { color:#f0dfae; font-family:Georgia,serif; font-size:13px; letter-spacing:.1em; text-shadow:0 1px #000; }
.iconBtn { width:27px; min-height:27px; border:1px solid #18130e; border-radius:50%; background:linear-gradient(#7b6d52,#3d3528); }

.inventoryGrid { gap:4px; padding:4px; border:1px solid #211c14; border-radius:4px; background:rgb(18 16 12 / 48%); }
.slot { min-height:66px; border-color:#17130e; border-radius:2px; background:radial-gradient(circle at 50% 36%,rgb(83 76 60 / 58%),transparent 48%),linear-gradient(145deg,#302c23,#1b1914); }
.slot:hover { border-color:#b2934b; background:radial-gradient(circle at 50% 36%,rgb(113 95 55 / 55%),transparent 48%),linear-gradient(145deg,#3b3527,#201d16); }
.slot .itemIcon { width:42px; height:42px; filter:drop-shadow(0 3px 2px rgb(0 0 0 / 55%)); transition:transform .15s ease; }
.slot:hover .itemIcon { transform:translateY(-1px) scale(1.06); }
.slotLabel { color:#cfc6ae; font-size:8px; }
.slotQty { right:3px; bottom:13px; padding:0 2px; border-radius:2px; background:rgb(9 8 6 / 84%); color:#fff1a9; }
.slot.empty { background:linear-gradient(145deg,rgb(27 25 20 / 82%),rgb(16 15 12 / 86%)); }
.stat { border-color:#241f17; background:linear-gradient(180deg,rgb(49 45 35 / 88%),rgb(31 29 23 / 90%)); }
.bar { border:1px solid #15120d; background:#151710; box-shadow:inset 0 1px 3px #000; }
.bar .fill { box-shadow:inset 0 1px 0 rgb(255 255 255 / 22%); }

@media (max-width:760px) {
  .gameIdentityCopy small,.serverState { display:none; }
  .topbar { right:8px; }
  .osrsDock { left:6px; right:6px; bottom:6px; width:auto; grid-template-columns:112px minmax(0,1fr); }
  .orbStack { display:grid; left:5px; top:42px; grid-template-columns:repeat(2,27px); gap:4px; }
  .orb { width:27px; min-height:27px; }
  .orb strong { font-size:9px; }
  .orb span { font-size:6px; }
  .quickbar { grid-template-columns:repeat(5,1fr); border-top:4px solid #1c1812; border-radius:6px; }
  .quickbar button { min-height:44px; }
  .quickbar button > small { display:none; }
  .gameWindow:not(.adminWindow):not(.editorWindow) { left:8px; right:8px; top:118px; bottom:124px; width:auto; }
}
.assetLodGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.assetLodGrid article{display:grid;gap:3px;padding:9px;border:1px solid rgb(183 214 108/13%);border-radius:7px;background:#151b13}.assetLodGrid article span{color:#9eb77f;font-size:8px;font-weight:800;letter-spacing:.08em}.assetLodGrid article b{color:#e6ece0;font-size:11px}.assetLodGrid article small{color:#788273;font-size:8px;line-height:1.35}.assetLodGrid.compact{margin-top:2px}@media(max-width:700px){.assetLodGrid{grid-template-columns:1fr}}
.assetHeadActions{display:flex;align-items:center;gap:8px}.assetCreateScrim{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;background:rgb(3 6 3/82%);backdrop-filter:blur(8px)}.assetCreateFlow{width:min(980px,96vw);max-height:92vh;overflow:auto;border:1px solid rgb(183 214 108/20%);border-radius:12px;background:#0d120d;box-shadow:0 30px 90px #000}.assetCreateFlow>header{display:flex;justify-content:space-between;gap:24px;padding:22px 24px 18px;border-bottom:1px solid rgb(255 255 255/7%)}.assetCreateFlow h3{margin:3px 0 5px;color:#f0f4eb;font-size:24px}.assetCreateFlow header p{max-width:600px;margin:0;color:#929d8c;font-size:11px;line-height:1.5}.assetCreateClose{align-self:start;border:0;color:#abb5a5;background:transparent;font-size:28px;line-height:1;cursor:pointer}.assetCreateStart{display:grid;gap:18px;padding:24px}.assetKindSwitch{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid rgb(255 255 255/8%);border-radius:8px;background:rgb(255 255 255/8%)}.assetKindSwitch button{display:grid;gap:4px;padding:15px;border:0;color:#b2bca9;background:#111710;text-align:left;cursor:pointer}.assetKindSwitch button.active{color:#eff6e8;background:#202b1b;box-shadow:inset 0 -2px #b7d66c}.assetKindSwitch span{color:#7e8977;font-size:9px}.assetCreateDrop{display:flex;align-items:center;justify-content:center;min-height:210px;border:1px dashed rgb(183 214 108/28%);border-radius:9px;background:#10160f;cursor:pointer}.assetCreateDrop input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.assetCreateDrop>span{display:grid;gap:6px;text-align:center}.assetCreateDrop b{color:#e9eee4;font-size:15px}.assetCreateDrop small{color:#7f8a78}.assetCreateStart>output,.assetCreateForm>output{min-height:16px;color:#d5ad67;font-size:10px}.assetCreateAnalyze{justify-self:end;min-width:160px;padding:11px 16px;border:0;border-radius:7px;color:#15200d;background:#b7d66c;font-weight:800;cursor:pointer}.assetCreateReview{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);min-height:560px}.assetCreateVisual{display:grid;grid-template-rows:1fr auto;min-width:0;border-right:1px solid rgb(255 255 255/7%);background:#090d09}#assetCreatePreviewCanvas{width:100%;height:100%;min-height:430px}.assetCreateLods{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgb(255 255 255/7%)}.assetCreateLods button{display:flex;align-items:baseline;justify-content:center;gap:5px;padding:10px;border:0;color:#87917f;background:#111710;cursor:pointer}.assetCreateLods button.active{color:#edf4e7;background:#20291c}.assetCreateLods span,.assetCreateLods small{font-size:8px}.assetCreateForm{display:flex;flex-direction:column;gap:18px;padding:22px}.assetCreateForm label{display:grid;gap:6px;color:#909a89;font-size:9px}.assetCreateForm input,.assetCreateForm select{min-height:39px}.assetCreateName input{font-size:15px;font-weight:700}.assetCreateFields{display:grid;grid-template-columns:1fr 1fr;gap:11px}.assetCreatePair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:5px}.assetCreatePair i{color:#697361;font-style:normal}.assetCreateCheck{display:flex!important;align-items:center;align-self:end;min-height:39px}.assetCreateCheck input{min-height:auto}.assetCreateClips{display:grid;grid-template-columns:1fr 1fr;gap:9px}.assetCreateClips>strong{grid-column:1/-1;color:#dce5d5;font-size:11px}.assetCreateTechnical{padding-top:3px;border-top:1px solid rgb(255 255 255/7%);color:#7f8a78;font-size:9px}.assetCreateTechnical summary{padding:9px 0;color:#aeb8a7;cursor:pointer}.assetCreateTechnical p{line-height:1.5}.assetCreateTechnical span{display:block;color:#d2a15d}.assetCreateForm footer{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}@media(max-width:760px){.assetCreateScrim{padding:0}.assetCreateFlow{width:100vw;max-height:100vh;min-height:100vh;border:0;border-radius:0}.assetKindSwitch,.assetCreateReview{grid-template-columns:1fr}.assetCreateVisual{border-right:0;border-bottom:1px solid rgb(255 255 255/7%)}#assetCreatePreviewCanvas{min-height:300px}.assetCreateFields,.assetCreateClips{grid-template-columns:1fr}}
/* Keep the visually hidden file input scoped to its upload target. */
.assetCreateDrop{position:relative}
.assetCreateCanvas{position:relative;min-height:430px}
.assetCreateCanvas #assetCreatePreviewCanvas{display:block;min-height:430px}
.assetCreatePreviewState{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:#cbd5c4;background:rgb(9 13 9/76%);font-size:12px;font-weight:700;letter-spacing:.01em;text-align:center;backdrop-filter:blur(2px);transition:opacity .15s}
.assetCreatePreviewState.hidden{pointer-events:none;opacity:0}
.assetCreatePreviewState.error{color:#e5a48d}
.assetScaleLegend{position:absolute;right:14px;bottom:14px;display:flex;gap:12px;padding:7px 9px;border-radius:6px;color:#aeb8a7;background:rgb(9 13 9/82%);font-size:9px;backdrop-filter:blur(4px)}
.assetTypeWarning{display:grid;gap:5px;padding:12px 14px;border-left:3px solid #d5ad67;color:#d8c9a8;background:rgb(213 173 103/8%)}.assetTypeWarning b{color:#f0d7a8;font-size:11px}.assetTypeWarning span{font-size:9px;line-height:1.5}
.assetSizeSetup{display:grid;grid-template-columns:1fr 120px;gap:14px 18px;padding:15px 0;border-block:1px solid rgb(255 255 255/7%)}.assetSizeSetup>div{display:grid;gap:4px}.assetSizeSetup strong{color:#e6eee0;font-size:12px}.assetSizeSetup>div>span{color:#87917f;font-size:9px;line-height:1.5}.assetMeasureInput{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px}.assetMeasureInput i{color:#8f9988;font-style:normal}.assetSizeSetup dl{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.assetSizeSetup dl>div{display:grid;gap:3px}.assetSizeSetup dt{color:#687262;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.assetSizeSetup dd{margin:0;color:#cdd6c7;font-size:10px;font-weight:700}
@media(max-width:760px){.assetCreateCanvas{min-height:300px}.assetCreateCanvas #assetCreatePreviewCanvas{min-height:300px}}