:root {
  color: #17201d;
  background: #f4f6f5;
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  --ink: #17201d;
  --muted: #68726e;
  --line: #dce2df;
  --line-strong: #c8d0cc;
  --surface: #ffffff;
  --surface-soft: #f8faf9;
  --nav: #18211e;
  --nav-hover: #25312d;
  --green: #237a57;
  --green-soft: #e7f3ed;
  --teal: #227582;
  --teal-soft: #e5f1f3;
  --amber: #a96713;
  --amber-soft: #fff3dc;
  --red: #b33d38;
  --red-soft: #fbe9e7;
  --blue: #3c65a3;
  --blue-soft: #eaf0f8;
  --shadow: 0 10px 30px rgba(24, 33, 30, 0.12);
}

* { box-sizing: border-box; letter-spacing: 0; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body { background: #f4f6f5; color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { letter-spacing: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(34, 117, 130, 0.24); outline-offset: 1px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.session-loading { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf1ef; }
.session-loading-card { width: min(100%, 388px); padding: 36px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); box-shadow: var(--shadow); border-radius: 6px; }
.session-loading-row { display: flex; align-items: center; gap: 11px; margin-top: 28px; }
.session-loading-row strong { font-size: 15px; }
.session-loading-card > p:last-child { margin: 9px 0 0 27px; color: var(--muted); font-size: 12px; }
.session-spinner { width: 16px; height: 16px; border: 2px solid #cdd8d3; border-top-color: var(--green); border-radius: 50%; animation: spin 700ms linear infinite; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #edf1ef; }
.login-panel { width: min(100%, 388px); padding: 36px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); box-shadow: var(--shadow); border-radius: 6px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 6px; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-mark.small { width: 34px; height: 34px; }
.brand-mark.small svg { width: 18px; height: 18px; }
.product-name, .eyebrow { margin: 18px 0 6px; color: var(--green); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.login-panel h1 { margin: 0 0 28px; font-size: 26px; line-height: 1.25; }
.login-panel .login-description { margin: -18px 0 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.login-panel form { display: grid; gap: 10px; }
.login-panel form > label, .login-panel form > div > label { margin-top: 4px; font-size: 12px; font-weight: 800; }
.login-panel .button.full { margin-top: 6px; }
label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.input-with-icon, .search-field { position: relative; }
.input-with-icon svg, .search-field svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
input, select, textarea { width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); color: var(--ink); }
input, select { padding: 8px 11px; }
.input-with-icon input, .search-field input { padding-left: 39px; }
textarea { min-height: 104px; padding: 10px 11px; resize: vertical; }
.text-button:disabled { color: #8f9994; cursor: not-allowed; opacity: .62; }
.form-error { min-height: 20px; margin: 8px 0; color: var(--red); font-size: 12px; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-weight: 700; transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease; }
.button svg { width: 17px; height: 17px; }
.button.primary { color: white; background: var(--green); }
.button.primary:hover { background: #1c6749; }
.button.danger { color: white; background: var(--red); }
.button.danger:hover { background: #742a27; }
.button.secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.button.secondary:hover { background: var(--surface-soft); border-color: #aab5b0; }
.button.ghost { color: var(--muted); background: transparent; }
.button.full { width: 100%; }
.button:disabled, .icon-button:disabled { opacity: 0.42; cursor: not-allowed; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.icon-button:hover { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.icon-button svg { width: 18px; height: 18px; }
.spinning { animation: spin 700ms linear infinite; }
.text-button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; color: var(--teal); background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.text-button svg { width: 16px; height: 16px; }
.text-button:hover { color: #185c67; }

.app-shell { min-height: 100vh; display: grid; grid-template: 56px 1fr / 216px 1fr; }
.topbar { position: sticky; top: 0; z-index: 20; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-brand { display: flex; align-items: center; gap: 10px; }
.topbar-brand strong, .topbar-brand span { display: block; }
.topbar-brand strong { font-size: 14px; }
.topbar-brand span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.current-admin { max-width: 210px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); display: flex; flex-direction: column; justify-content: space-between; padding: 14px 10px; background: var(--nav); color: #dce5e1; }
.sidebar nav { display: grid; gap: 4px; }
.nav-item { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; color: #b9c5c0; background: transparent; border: 0; border-radius: 5px; cursor: pointer; text-align: left; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: white; background: var(--nav-hover); }
.nav-item.active { color: white; background: #2b3a35; box-shadow: inset 3px 0 0 #4ba67e; }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 4px; color: #84958e; font-size: 11px; }
.sidebar-footer code { color: #b9c5c0; font-family: "Cascadia Mono", Consolas, monospace; }
.workspace { min-width: 0; padding: 28px clamp(18px, 3vw, 42px) 48px; }
.view { display: none; width: min(100%, 1480px); margin: 0 auto; }
.active-view { display: block; }
.page-heading { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading .eyebrow { margin: 0 0 5px; }
.page-heading h1 { margin: 0; font-size: 24px; line-height: 1.25; }
.muted { color: var(--muted); font-size: 12px; }

.status-pill, .source-badge, .count-badge, .state-badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-pill.neutral { color: #58625e; background: #edf0ef; }
.status-pill.good, .state-badge.succeeded, .state-badge.stored { color: #1f6b4d; background: var(--green-soft); }
.status-pill.warning, .state-badge.queued, .state-badge.running, .state-badge.pending, .state-badge.restoring { color: #8a5512; background: var(--amber-soft); }
.status-pill.bad, .state-badge.failed, .state-badge.error { color: #9c3732; background: var(--red-soft); }
.state-badge.withdrawn { color: #57625d; background: #edf0ef; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.source-badge { color: #255789; background: var(--blue-soft); }
.count-badge { min-width: 27px; color: var(--muted); background: #e9eeeb; }

.alert { width: min(100%, 1480px); min-height: 52px; display: flex; align-items: center; gap: 12px; margin: 0 auto 22px; padding: 10px 14px; border: 1px solid; border-radius: 5px; }
.alert svg { width: 20px; height: 20px; flex: 0 0 auto; }
.alert strong, .alert span { display: block; }
.alert strong { margin-bottom: 2px; font-size: 13px; }
.alert span { font-size: 12px; }
.alert.warning { color: #72480f; background: var(--amber-soft); border-color: #edcf9d; }

.status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.status-cell { min-width: 0; min-height: 84px; display: flex; align-items: center; gap: 12px; padding: 16px; border-right: 1px solid var(--line); }
.status-cell:last-child { border-right: 0; }
.status-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 5px; }
.status-icon svg { width: 18px; height: 18px; }
.status-cell .label, .status-cell strong, .status-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-cell .label { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }
.status-cell strong { font-size: 14px; }
.status-cell span { margin-top: 2px; color: var(--muted); font-size: 11px; }

.section-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }
.section-heading > div { display: flex; align-items: center; gap: 8px; }
.section-heading h2 { margin: 0; font-size: 15px; }
.playables-heading { margin-top: 0; }
.playable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.playable-card { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--surface-soft); border: 1px solid #e7ebe9; border-radius: 5px; }
.playable-card strong { font-size: 13px; }
.playable-card code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playable-empty { grid-column: 1 / -1; padding: 18px; color: var(--muted); font-size: 12px; text-align: center; }
.dinosaur-page-heading .field-note { max-width: 72ch; margin-top: 7px; line-height: 1.55; }
.dinosaur-management-notice { min-height: 60px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; color: #74470e; background: var(--amber-soft); border: 1px solid #edcf9d; border-radius: 6px; }
.dinosaur-management-notice > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.dinosaur-management-notice strong, .dinosaur-management-notice span { display: block; }
.dinosaur-management-notice strong { margin-bottom: 3px; font-size: 13px; }
.dinosaur-management-notice span { font-size: 11px; line-height: 1.55; }
.dinosaur-catalog-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.dinosaur-panel-heading { min-height: 80px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px; border-bottom: 1px solid var(--line); }
.dinosaur-panel-heading h2 { margin: 0; font-size: 17px; }
.dinosaur-panel-heading p { max-width: 56ch; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.dinosaur-panel-heading > span:not(.status-pill) { color: var(--muted); font-size: 11px; white-space: nowrap; }
.dinosaur-panel-heading > span:not(.status-pill) strong { color: var(--green); font-size: 18px; font-variant-numeric: tabular-nums; }
.dinosaur-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.dinosaur-catalog-toolbar .search-field { width: min(100%, 390px); }
.dinosaur-toolbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dinosaur-toolbar-actions .text-button { min-height: 34px; }
.dinosaur-catalog { display: grid; gap: 16px; max-height: 590px; padding: 14px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.dinosaur-category { min-width: 0; display: grid; gap: 8px; }
.dinosaur-category + .dinosaur-category { padding-top: 14px; border-top: 1px solid var(--line); }
.dinosaur-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px; }
.dinosaur-category-heading > div { min-width: 0; display: flex; align-items: baseline; gap: 9px; }
.dinosaur-category-heading h3 { margin: 0; color: var(--ink); font-size: 13px; }
.dinosaur-category-heading > div span { color: var(--muted); font-size: 10px; }
.dinosaur-category-heading > span { flex: 0 0 auto; color: var(--teal); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dinosaur-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.dinosaur-catalog-item { min-width: 0; overflow: hidden; background: var(--surface-soft); border: 1px solid #e4e9e6; border-radius: 6px; transition: background 120ms ease, border-color 120ms ease; }
.dinosaur-catalog-item.enabled { background: var(--green-soft); border-color: #b9d9ca; }
.dinosaur-catalog-item > label { min-height: 76px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 12px; cursor: pointer; }
.dinosaur-catalog-item input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--green); }
.dinosaur-catalog-item label span { min-width: 0; display: grid; gap: 4px; }
.dinosaur-catalog-item label strong, .dinosaur-catalog-item label code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dinosaur-catalog-item label strong { font-size: 13px; }
.dinosaur-catalog-item label code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; }
.dinosaur-catalog-item label small { color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.dinosaur-catalog-empty { grid-column: 1 / -1; min-height: 180px; display: grid; align-content: center; justify-items: center; gap: 6px; color: var(--muted); text-align: center; }
.dinosaur-catalog-empty svg { width: 24px; height: 24px; color: var(--teal); }
.dinosaur-catalog-empty strong { color: var(--ink); font-size: 14px; }
.dinosaur-catalog-empty span { font-size: 11px; }
.dinosaur-exchange-panel { min-width: 0; margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.dinosaur-exchange-rule { display: flex; min-height: 64px; padding: 13px 16px; align-items: flex-start; gap: 12px; color: #315a4f; background: #edf7f3; border-bottom: 1px solid #d5e9e1; }
.dinosaur-exchange-rule > svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--teal); }
.dinosaur-exchange-rule div { display: grid; gap: 3px; }
.dinosaur-exchange-rule strong { font-size: 12px; }
.dinosaur-exchange-rule span { color: #5a7169; font-size: 11px; line-height: 1.55; }
#dinosaur-exchange-save-status.unsaved { color: #9a5d0a; font-weight: 800; }
.dinosaur-exchange-table { max-height: 620px; border: 0; border-radius: 0; overflow: auto; }
.dinosaur-exchange-table table { min-width: 780px; }
.dinosaur-exchange-table th { position: sticky; z-index: 2; top: 0; background: var(--surface-soft); }
.dinosaur-exchange-table th:first-child { width: 92px; }
.dinosaur-exchange-table th:nth-child(2) { width: 28%; }
.dinosaur-exchange-table th:nth-child(3) { width: 220px; }
.dinosaur-exchange-row { transition: background-color 120ms ease; }
.dinosaur-exchange-row.enabled { background: #f4fbf8; }
.dinosaur-exchange-row td { vertical-align: middle; }
.exchange-enabled { display: inline-flex; margin: 0; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.exchange-enabled input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--green); }
.dinosaur-exchange-row.enabled .exchange-enabled { color: var(--green); }
.dinosaur-exchange-species { display: grid; gap: 3px; }
.dinosaur-exchange-species strong { font-size: 12px; }
.dinosaur-exchange-species code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; }
.dinosaur-exchange-table select, .dinosaur-exchange-table input[type="number"] { width: 100%; min-height: 36px; margin: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; font-size: 11px; }
.dinosaur-exchange-table select:focus, .dinosaur-exchange-table input[type="number"]:focus { border-color: var(--green); outline: 2px solid rgba(26, 128, 91, .12); outline-offset: 1px; }
.exchange-price { position: relative; min-width: 135px; }
.exchange-price input { padding-right: 32px !important; font-variant-numeric: tabular-nums; }
.exchange-price svg { position: absolute; top: 50%; right: 9px; width: 15px; height: 15px; color: #8b5cf6; pointer-events: none; transform: translateY(-50%); }
.exchange-price.prime svg { color: #b47712; }
.dinosaur-config-footer { margin: 0; padding: 14px; border-top: 1px solid var(--line); }
.toolbar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.toolbar.compact { justify-content: flex-start; }
.search-field { width: min(100%, 360px); }
.search-field.steam-search { width: min(100%, 430px); }
.context-line { min-height: 32px; display: flex; align-items: center; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.settings-grid.single { grid-template-columns: minmax(0, 1fr); }
.settings-card { min-height: 132px; display: flex; align-items: center; gap: 16px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.settings-card-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 6px; }
.settings-card-icon svg { width: 21px; height: 21px; }
.settings-card-content { min-width: 0; flex: 1; }
.settings-card-content label, .settings-card-content .label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 800; }
.settings-card-content input { max-width: 220px; }
.settings-card-content code { display: block; color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 20px; font-weight: 800; }
.admin-account-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-create-card, .admin-account-list-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.admin-create-card { display: grid; gap: 10px; box-shadow: inset 0 3px 0 var(--green); }
.admin-create-card h2 { margin: 3px 0 5px; font-size: 18px; }
.admin-create-card > div > p:last-child { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.admin-create-card label { margin-top: 2px; font-size: 12px; font-weight: 800; }
.admin-create-card .button { justify-self: start; margin-top: 4px; }
.admin-account-list-card .section-heading { margin-top: 0; }
.admin-account-identity { display: grid; gap: 2px; }
.admin-account-identity small { color: var(--muted); font-size: 10px; }
.admin-account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.protected-account { color: var(--muted); font-size: 11px; font-weight: 700; }
.vault-settings-card { min-height: 0; margin-bottom: 18px; }
.vault-settings-action { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.command-card { align-items: flex-start; }
.admin-command-notice { min-height: 54px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 14px; color: #1f5e68; background: var(--teal-soft); border: 1px solid #c5dfe3; border-radius: 6px; }
.admin-command-notice > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.admin-command-notice strong, .admin-command-notice span { display: block; }
.admin-command-notice strong { margin-bottom: 2px; font-size: 13px; }
.admin-command-notice span { font-size: 11px; line-height: 1.5; }
.admin-command-console { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.55fr); align-items: start; gap: 14px; }
.admin-command-catalog, .admin-command-workbench { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.admin-command-catalog { position: sticky; top: 74px; max-height: calc(100vh - 96px); overflow: hidden; }
.admin-command-filters { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.admin-command-search { width: 100%; }
.admin-command-catalog-summary { display: flex; align-items: baseline; gap: 5px; padding: 10px 12px 6px; color: var(--muted); font-size: 11px; }
.admin-command-catalog-summary strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-command-list { max-height: calc(100vh - 220px); padding: 0 8px 10px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.admin-command-list-item { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #edf0ef; border-radius: 5px; cursor: pointer; text-align: left; }
.admin-command-list-item:last-child { border-bottom-color: transparent; }
.admin-command-list-item:hover { background: var(--surface-soft); }
.admin-command-list-item.selected { background: var(--teal-soft); }
.admin-command-list-item.unavailable { color: var(--muted); }
.admin-command-list-item > span:first-child { min-width: 0; display: grid; gap: 4px; }
.admin-command-list-item code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-command-list-item small { font-size: 11px; font-weight: 700; }
.admin-command-list-meta { flex: 0 0 auto; display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: 10px; }
.admin-command-list-meta strong { padding: 2px 5px; color: #8a5512; background: var(--amber-soft); border-radius: 999px; font-size: 9px; }
.admin-command-list-empty { padding: 34px 18px; color: var(--muted); font-size: 12px; line-height: 1.6; text-align: center; }
.admin-command-workbench { min-height: 620px; padding: 22px; }
.admin-command-empty { min-height: 570px; display: grid; align-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.admin-command-empty svg { width: 34px; height: 34px; color: var(--teal); }
.admin-command-empty h2 { margin: 5px 0 0; color: var(--ink); font-size: 17px; }
.admin-command-empty p { margin: 0; font-size: 12px; }
.admin-command-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.admin-command-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.admin-command-title-row h2 { margin: 0; font-size: 20px; }
.admin-command-title-row code { padding: 4px 7px; color: var(--teal); background: var(--teal-soft); border-radius: 4px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.admin-command-detail-heading p { max-width: 72ch; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.admin-command-syntax { display: grid; gap: 7px; margin: 18px 0; padding: 12px 14px; background: #18211e; border-radius: 5px; }
.admin-command-syntax span { color: #91a59d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.admin-command-syntax code { color: #dce8e3; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.admin-command-form { display: grid; gap: 16px; }
.admin-command-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.admin-command-field.wide { grid-column: 1 / -1; }
.admin-command-field label { display: flex; align-items: baseline; gap: 7px; }
.admin-command-field label > span { color: var(--red); }
.admin-command-field label small { color: var(--muted); font-size: 10px; font-weight: 600; }
.admin-command-field textarea { min-height: 96px; font-family: inherit; }
.admin-command-no-arguments { grid-column: 1 / -1; min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; color: #1f6b4d; background: var(--green-soft); border-radius: 5px; font-size: 12px; font-weight: 700; }
.admin-command-no-arguments svg { width: 17px; height: 17px; }
.admin-command-unavailable { min-height: 58px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; color: #74470e; background: var(--amber-soft); border: 1px solid #edcf9d; border-radius: 5px; }
.admin-command-unavailable svg { width: 18px; height: 18px; flex: 0 0 auto; }
.admin-command-unavailable strong, .admin-command-unavailable span { display: block; }
.admin-command-unavailable strong { margin-bottom: 3px; font-size: 12px; }
.admin-command-unavailable span { font-size: 11px; line-height: 1.5; }
.admin-command-form-footer { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-command-response { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-command-response-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.admin-command-response-heading > div { display: grid; gap: 3px; }
.admin-command-response-heading h3 { margin: 0; font-size: 14px; }
.admin-command-response pre { min-height: 190px; max-height: 420px; margin: 0; padding: 15px; overflow: auto; color: #dce8e3; background: #18211e; border-radius: 5px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-color: #52645d #18211e; scrollbar-width: thin; }
.admin-command-response pre.error { color: #ffd5d1; background: #3a211f; }
.admin-command-confirm-summary { display: grid; gap: 8px; padding: 12px; background: var(--surface-soft); border-radius: 5px; }
.admin-command-confirm-summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 10px; }
.admin-command-confirm-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.admin-command-confirm-summary code { font-family: "Cascadia Mono", Consolas, monospace; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.feature-cost-form { display: grid; gap: 14px; }
.message-sender-card { min-height: 112px; }
.message-sender-card .settings-card-content input { max-width: 360px; }
.server-settings-form { display: grid; gap: 14px; }
.server-operations { margin-bottom: 24px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); overflow: hidden; }
.server-operations-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.server-operations-heading .eyebrow { margin: 0 0 4px; }
.server-operations-heading h2 { margin: 0; font-size: 18px; }
.server-operations-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.server-operations-list { display: grid; }
.server-operation-card { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.15fr) minmax(220px, 1.2fr) auto; align-items: center; gap: 20px; min-height: 126px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.server-operation-card:last-child { border-bottom: 0; }
.server-operation-card.selected { box-shadow: inset 3px 0 0 var(--green); background: #fbfdfc; }
.server-operation-identity { min-width: 0; display: grid; gap: 7px; }
.server-operation-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.server-operation-title .server-state-dot { width: 9px; height: 9px; flex: 0 0 auto; background: #9ba5a1; border-radius: 50%; box-shadow: 0 0 0 4px #eef1f0; }
.server-operation-title .server-state-dot.online { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.server-operation-title .server-state-dot.busy { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.server-operation-title .server-state-dot.failed { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.server-operation-title strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.server-operation-identity code { width: fit-content; padding: 2px 6px; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 4px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 10px; }
.server-operation-identity > span { color: var(--muted); font-size: 11px; }
.server-operation-version { min-width: 0; display: grid; gap: 7px; }
.server-operation-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.server-operation-version-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.server-operation-version-line strong { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.server-operation-version > small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.server-operation-progress { min-width: 0; display: grid; gap: 7px; }
.server-operation-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.server-operation-progress-heading strong { font-size: 12px; }
.server-operation-progress-heading span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.operation-progress-track { position: relative; height: 6px; overflow: hidden; background: #e7ece9; border-radius: 999px; }
.operation-progress-track > span { display: block; width: 0; height: 100%; background: var(--green); border-radius: inherit; }
.operation-progress-track.indeterminate > span { width: 34%; animation: operation-progress 1.2s ease-in-out infinite; }
.server-operation-progress small { min-height: 15px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.server-operation-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.server-operation-actions .button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.server-operation-empty { min-height: 128px; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 12px; text-align: center; }
.server-target-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.server-target-toolbar > div { display: grid; gap: 7px; min-width: min(360px, 100%); }
.server-target-toolbar label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
@media (max-width: 640px) { .server-target-toolbar { align-items: stretch; flex-direction: column; } }
.recovery-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.recovery-audience-card { min-height: 78px; padding: 14px 16px; }
.recovery-audience-card select, .recovery-audience-card .number-with-suffix { max-width: 360px; }
.server-startup-settings-form { display: grid; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.startup-settings-heading { margin: 0; }
.startup-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.startup-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.startup-toggle > span:first-child { display: grid; gap: 5px; }
.startup-toggle strong { font-size: 13px; }
.startup-toggle small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.toggle-control { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.toggle-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-control > span { position: absolute; inset: 0; background: #c7d1d0; border-radius: 999px; transition: background .16s ease; }
.toggle-control > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(24, 48, 46, .22); transition: transform .16s ease; }
.toggle-control input:checked + span { background: var(--green); }
.toggle-control input:checked + span::after { transform: translateX(18px); }
.toggle-control input:focus-visible + span { outline: 3px solid var(--teal-soft); outline-offset: 2px; }
.toggle-control input:disabled + span { opacity: .45; cursor: not-allowed; }
.startup-extra-arguments { display: grid; gap: 8px; }
.startup-extra-arguments > label { font-size: 12px; font-weight: 800; }
.startup-extra-arguments textarea { width: 100%; resize: vertical; font-family: "Cascadia Mono", Consolas, monospace; }
.server-capacity-card { align-items: flex-start; }
.server-capacity-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 18px; }
.server-capacity-content input { max-width: 100%; }
.server-capacity-content input[readonly] { color: var(--muted); background: var(--surface-soft); }
.number-with-suffix { position: relative; }
.number-with-suffix input { padding-right: 38px; }
.number-with-suffix span { position: absolute; right: 12px; top: 50%; color: var(--muted); font-size: 12px; font-weight: 800; transform: translateY(-50%); pointer-events: none; }
.restart-required-note { min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: #74470e; background: var(--amber-soft); border: 1px solid #edcf9d; border-radius: 6px; }
.restart-required-note > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.restart-required-note strong, .restart-required-note span { display: block; }
.restart-required-note strong { margin-bottom: 2px; font-size: 12px; }
.restart-required-note span { font-size: 11px; }
.game-server-restart-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin-top: 18px; padding: 18px; background: var(--surface); border: 1px solid #e2b5b2; border-radius: 6px; }
.game-server-restart-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--red); background: var(--red-soft); border-radius: 6px; }
.game-server-restart-icon svg { width: 21px; height: 21px; }
.game-server-restart-content h2 { margin: 0 0 5px; font-size: 14px; }
.game-server-restart-content p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.feature-cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.feature-cost-card { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.feature-cost-card > span { min-width: 0; display: grid; gap: 5px; }
.feature-cost-card strong { font-size: 13px; }
.feature-cost-card code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.feature-cost-card input { width: 112px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.feature-cost-card.danger-card code { color: var(--red); }
.form-footer { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.points-balance { color: var(--teal); font-variant-numeric: tabular-nums; }
.recharge-packages-table { margin-bottom: 22px; }
.package-points { color: var(--teal); font-variant-numeric: tabular-nums; }
.package-price { color: var(--green); font-variant-numeric: tabular-nums; }
.ledger-package { display: grid; gap: 2px; white-space: nowrap; }
.ledger-package strong { font-size: 12px; }
.ledger-package span { color: var(--green); font-size: 11px; font-variant-numeric: tabular-nums; }
.recharge-account-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; background: var(--surface-soft); border-radius: 5px; }
.recharge-account-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.recharge-account-summary strong { color: var(--teal); font-size: 13px; }
.recharge-account-summary code { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.consumption-total, .consumption-threshold { color: var(--amber); font-variant-numeric: tabular-nums; }
.consumption-levels-table { margin-bottom: 22px; }
.chat-presentation-form { display: grid; gap: 14px; margin-bottom: 8px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.chat-presentation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.chat-presentation-heading h2 { margin: 0 0 4px; font-size: 16px; }
.chat-presentation-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.chat-presentation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.chat-presentation-card { display: grid; align-content: start; gap: 8px; padding: 14px; background: var(--surface-soft); border: 1px solid #e7ebe9; border-radius: 5px; }
.chat-presentation-card > label:not(.checkbox-line) { margin-top: 3px; font-size: 12px; font-weight: 800; }
.chat-presentation-card input[type="text"] { width: 100%; }
.chat-template-help { padding: 10px 12px; color: var(--muted); background: var(--teal-soft); border-radius: 5px; font-size: 11px; line-height: 1.65; }
.chat-template-help code { color: var(--teal); font-family: "Cascadia Mono", Consolas, monospace; font-weight: 800; }
.chat-presentation-form .form-footer { min-height: 34px; }
.chat-style-badge { display: inline-flex; padding: 4px 8px; color: #4c5752; background: #edf0ef; border-radius: 999px; font-size: 11px; font-weight: 800; }
.chat-style-badge.admin { color: #89540f; background: var(--amber-soft); }
.chat-style-badge.developer { color: var(--teal); background: var(--teal-soft); }
.consumption-level-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 4px 9px; color: #89540f; background: var(--amber-soft); border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.consumption-level-badge svg { width: 13px; height: 13px; }
.consumption-level-badge.empty { color: var(--muted); background: #edf0ef; }
.level-rule-note { min-height: 64px; display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 13px 16px; color: #74470e; background: var(--amber-soft); border: 1px solid #edcf9d; border-radius: 6px; }
.level-rule-note > svg { width: 23px; height: 23px; flex: 0 0 auto; }
.level-rule-note strong, .level-rule-note span { display: block; }
.level-rule-note strong { margin-bottom: 3px; font-size: 13px; }
.level-rule-note span { font-size: 11px; line-height: 1.5; }
.level-description { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-amount { font-variant-numeric: tabular-nums; }
.points-amount.positive { color: var(--green); }
.points-amount.negative { color: var(--red); }
.ledger-note { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teleport-coordinate { font-variant-numeric: tabular-nums; }
.icon-button.danger { color: var(--red); }
.icon-button.danger:hover { background: var(--red-soft); }

.announcement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.announcement-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.announcement-card-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.announcement-card-heading h2 { margin: 0 0 3px; font-size: 16px; }
.announcement-card-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.announcement-card > label:not(.checkbox-line) { margin-bottom: -5px; font-size: 12px; font-weight: 800; }
.announcement-card textarea { min-height: 126px; resize: vertical; line-height: 1.65; }
.announcement-toggle { min-height: 34px; padding: 7px 10px; background: var(--surface-soft); border-radius: 5px; font-size: 12px; font-weight: 800; }
.announcement-target { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--teal-soft); border-radius: 5px; }
.announcement-target .label { color: var(--muted); font-size: 11px; font-weight: 800; }
.announcement-target strong { color: var(--teal); font-size: 13px; }
.announcement-form-footer { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-message-cell { max-width: 620px; }
.announcement-message-cell div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-language-note, .announcement-sender-note { min-height: 38px; display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 10px; border-radius: 5px; font-size: 11px; line-height: 1.45; }
.announcement-language-note { color: #74470e; background: var(--amber-soft); }
.announcement-language-note svg { width: 15px; height: 15px; flex: 0 0 auto; }
.announcement-sender-note { color: var(--muted); background: var(--surface-soft); }
.announcement-sender-note strong { color: var(--ink); }
.system-notification-card { border-color: #c6ddd5; }

.table-frame { width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: auto; }
th, td { height: 48px; padding: 9px 14px; border-bottom: 1px solid #e7ebe9; text-align: left; vertical-align: middle; }
th { height: 40px; color: var(--muted); background: var(--surface-soft); font-size: 11px; font-weight: 800; text-transform: uppercase; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfb; }
td code { color: #4c5752; font-family: "Cascadia Mono", Consolas, monospace; font-size: 12px; }
.actions-column { width: 270px; text-align: right; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.row-actions .button { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.task-admin-guide { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; padding: 14px 16px; color: #1f5d45; background: var(--green-soft); border: 1px solid #c8e2d6; border-radius: 8px; }
.task-admin-guide > svg { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.task-admin-guide div { display: grid; gap: 3px; }
.task-admin-guide span { color: #466b5c; font-size: 12px; line-height: 1.55; }
.task-admin-table { min-width: 980px; }
.task-definition-cell { display: grid; min-width: 170px; gap: 4px; }
.task-definition-cell span { max-width: 42ch; color: var(--muted); font-size: 11px; line-height: 1.45; }
.task-kind { display: grid; gap: 3px; }
.task-kind span { font-weight: 750; }
.task-kind small { color: var(--muted); font-size: 11px; }
.task-reward-stack { display: grid; min-width: 120px; gap: 5px; }
.task-reward-stack span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.task-reward-stack svg { width: 14px; height: 14px; color: var(--green); }
.task-dialog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.player-name { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.player-account-identity { display: grid; gap: 2px; }
.player-account-identity small { font-size: 11px; font-weight: 500; }
.combat-record { display: grid; min-width: 118px; gap: 3px; font-variant-numeric: tabular-nums; }
.combat-record span { display: grid; grid-template-columns: 30px minmax(24px, 1fr) auto; align-items: baseline; gap: 4px; }
.combat-record b { color: var(--muted); font-size: 10px; }
.combat-record-kills strong { color: var(--green); }
.combat-record-deaths strong { color: var(--red); }
.combat-record-kd strong { color: var(--blue); }
.combat-record small { color: var(--muted); font-size: 10px; }
.combat-report-heading { align-items: flex-start; }
.combat-report-toolbar { display: grid; grid-template-columns: 170px auto minmax(260px, 1fr) 150px auto; align-items: end; gap: 10px; margin-bottom: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.combat-date-control label { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.combat-report-search { width: 100%; }
.combat-report-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.combat-report-summary > div { min-width: 0; display: grid; gap: 4px; padding: 13px 16px; border-right: 1px solid var(--line); }
.combat-report-summary > div:last-child { border-right: 0; }
.combat-report-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.combat-report-summary strong { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.combat-report-summary > div:nth-child(2) strong { color: var(--green); }
.combat-report-summary > div:nth-child(4) strong { color: var(--red); }
.combat-quality-note { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 6px; }
.combat-quality-note > svg { width: 21px; height: 21px; flex: 0 0 auto; }
.combat-quality-note strong, .combat-quality-note span { display: block; }
.combat-quality-note strong { margin-bottom: 3px; font-size: 13px; }
.combat-quality-note span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.combat-quality-note.neutral { color: var(--teal); background: var(--teal-soft); border-color: #c8dfe2; }
.combat-quality-note.good { color: var(--green); background: var(--green-soft); border-color: #c7dfd3; }
.combat-quality-note.warning { color: #8a5512; background: var(--amber-soft); border-color: #edcf9d; }
.combat-detail-heading { margin-top: 20px; }
.combat-records-table table { min-width: 1420px; }
.combat-records-table th:nth-child(1) { width: 138px; }
.combat-records-table th:nth-child(2) { width: 92px; }
.combat-records-table th:nth-child(7) { width: 210px; }
.combat-records-table th:nth-child(8) { width: 90px; }
.combat-row-warning { background: #fffaf0; }
.combat-row-warning:hover { background: #fff7e7; }
.combat-participant { min-width: 166px; display: grid; gap: 2px; }
.combat-participant strong { font-size: 12px; }
.combat-participant code { color: var(--muted); font-size: 10px; }
.combat-participant small { color: var(--amber); font-size: 10px; }
.combat-species { min-width: 190px; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.combat-species svg { width: 14px; height: 14px; color: var(--muted); }
.combat-species span, .combat-species strong { font-size: 11px; }
.combat-species strong { color: var(--teal); }
.combat-cause { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-issue-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.combat-issue-list span { display: inline-flex; min-height: 22px; align-items: center; padding: 3px 7px; color: #8a5512; background: var(--amber-soft); border: 1px solid #edcf9d; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.combat-latency { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.combat-latency.warning { color: var(--red); font-weight: 800; }
.combat-event-ids { min-width: 260px; display: grid; gap: 3px; }
.combat-event-ids span { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: baseline; gap: 4px; }
.combat-event-ids b { color: var(--muted); font-size: 9px; }
.combat-event-ids code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-report-footnote { margin: 10px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.online-duration-history-toolbar { display: grid; grid-template-columns: 170px auto minmax(260px, 1fr) 150px auto; align-items: end; gap: 10px; margin-bottom: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.online-duration-date-control label { margin-bottom: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.online-duration-history-search { width: 100%; }
.online-duration-history-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.online-duration-history-summary > div { min-width: 0; display: grid; gap: 4px; padding: 13px 16px; border-right: 1px solid var(--line); }
.online-duration-history-summary > div:last-child { border-right: 0; }
.online-duration-history-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.online-duration-history-summary strong { overflow: hidden; color: var(--ink); font-size: 20px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.online-duration-history-summary > div:first-child strong { color: var(--teal); font-size: 17px; }
.online-duration-history-summary > div:last-child strong { color: var(--green); }
.online-duration-history-note { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 6px; }
.online-duration-history-note > svg { width: 21px; height: 21px; flex: 0 0 auto; }
.online-duration-history-note strong, .online-duration-history-note span { display: block; }
.online-duration-history-note strong { margin-bottom: 3px; font-size: 13px; }
.online-duration-history-note span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.online-duration-history-note.neutral { color: var(--teal); background: var(--teal-soft); border-color: #c8dfe2; }
.online-duration-history-note.good { color: var(--green); background: var(--green-soft); border-color: #c7dfd3; }
.online-duration-history-note.warning { color: #8a5512; background: var(--amber-soft); border-color: #edcf9d; }
.online-duration-history-heading { margin-top: 20px; }
.online-duration-history-table table { min-width: 1120px; }
.online-duration-history-table th:nth-child(1) { width: 220px; }
.online-duration-history-table th:nth-child(2) { width: 180px; }
.online-duration-history-table th:nth-child(3),
.online-duration-history-table th:nth-child(4) { width: 145px; }
.online-duration-history-time { display: grid; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.online-duration-history-time time { color: var(--ink); font-size: 12px; font-weight: 800; }
.online-duration-history-time small { color: var(--muted); font-size: 10px; }
.online-duration-history-value { color: var(--teal); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.online-duration-overview-heading { margin-top: 28px; }
.online-duration-overview-toolbar { min-height: 40px; margin-bottom: 10px; }
.online-duration { display: grid; min-width: 154px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.online-duration div { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 5px; }
.online-duration dt { color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.online-duration dd { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.online-duration div:last-child dd { color: var(--teal); }
.online-duration-table table { min-width: 980px; }
.online-duration-table th:nth-child(n+5),
.online-duration-table td:nth-child(n+5) { text-align: right; }
.online-duration-value { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.online-duration-table td:last-child .online-duration-value { color: var(--teal); }
.player-avatar { width: 28px; height: 28px; display: grid; place-items: center; color: var(--green); background: var(--green-soft); border-radius: 5px; font-size: 11px; font-weight: 800; }
.empty-row td { height: 126px; color: var(--muted); text-align: center; }
.empty-row svg { width: 22px; height: 22px; margin-bottom: 7px; }
.error-text { max-width: 320px; color: var(--red); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.species-transition { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.species-transition strong { color: var(--teal); font-size: 14px; }

dialog { width: min(calc(100% - 32px), 500px); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(16, 24, 21, 0.44); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.dialog-header .eyebrow { margin: 0 0 4px; }
.dialog-header h2 { margin: 0; font-size: 19px; }
.dialog-fields { display: grid; gap: 16px; padding: 20px 22px 8px; }
.coordinate-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.checkbox-line { display: flex; align-items: center; gap: 9px; }
.checkbox-line input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--green); }
.checkbox-line label { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 20px; }
dialog .form-error { padding: 0 22px; }
.progress-dialog { width: min(calc(100% - 32px), 420px); }
.progress-dialog-content { display: flex; align-items: flex-start; gap: 14px; padding: 24px; }
.progress-dialog-content .session-spinner { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; }
.progress-dialog-body { min-width: 0; flex: 1; }
.progress-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-dialog-heading > span { color: var(--green); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress-dialog-content h2 { margin: 0; font-size: 17px; }
.progress-dialog-content p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.progress-dialog-content .operation-progress-track { margin-top: 14px; }
.progress-dialog-content .progress-dialog-meta { min-height: 16px; margin-top: 7px; font-size: 10px; }
.confirmation-message { display: flex; align-items: flex-start; gap: 12px; }
.confirmation-message strong { display: block; margin-top: 1px; font-size: 14px; }
.confirmation-message p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.confirmation-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; }
.confirmation-icon svg { width: 20px; height: 20px; }
.danger-confirmation .confirmation-icon { color: var(--red); background: var(--red-soft); }
.confirmation-note { margin-top: -4px; padding: 11px 12px; background: var(--surface-soft); border-radius: 5px; line-height: 1.6; }

.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(calc(100% - 40px), 360px); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: white; background: #25302c; border-radius: 5px; box-shadow: var(--shadow); font-size: 13px; }
.toast.error { background: #87332f; }
.toast svg { width: 18px; height: 18px; flex: 0 0 auto; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes operation-progress { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

@media (max-width: 900px) {
  .app-shell { grid-template: 56px auto 1fr / 1fr; }
  .sidebar { position: static; height: auto; grid-row: 2; padding: 8px 12px; overflow-x: auto; }
  .announcement-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar nav { display: flex; min-width: max-content; }
  .nav-item { min-width: 44px; justify-content: center; }
  .nav-item span { display: none; }
  .sidebar-footer { display: none; }
  .workspace { grid-row: 3; padding-top: 20px; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-cell:nth-child(2) { border-right: 0; }
  .status-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .settings-grid { grid-template-columns: 1fr; }
  .admin-command-console { grid-template-columns: 1fr; }
  .admin-command-catalog { position: static; max-height: none; }
  .admin-command-list { max-height: 340px; }
  .chat-presentation-grid { grid-template-columns: 1fr; }
  .admin-account-layout { grid-template-columns: 1fr; }
  .game-server-restart-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .game-server-restart-card .button { grid-column: 1 / -1; justify-self: end; }
  .combat-report-toolbar { grid-template-columns: 170px auto minmax(220px, 1fr); }
  .combat-filter-control { grid-column: 1 / 3; }
  .combat-report-toolbar > .button.primary { grid-column: 3; }
  .online-duration-history-toolbar { grid-template-columns: 170px auto minmax(220px, 1fr); }
  .online-duration-history-filter { grid-column: 1 / 3; }
  .online-duration-history-toolbar > .button.primary { grid-column: 3; }
}

@media (max-width: 1100px) {
  .server-operation-card { grid-template-columns: minmax(180px, .8fr) minmax(190px, 1fr) minmax(220px, 1.2fr); }
  .server-operation-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .server-operations-heading { align-items: stretch; flex-direction: column; }
  .server-operations-heading .status-pill { width: fit-content; }
  .server-operation-card { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .server-operation-actions { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .operation-progress-track.indeterminate > span { animation-duration: 2.4s; }
}

@media (max-width: 560px) {
  .topbar { padding: 0 10px; }
  .topbar-brand span, #header-server-status { display: none; }
  .current-admin { max-width: 110px; }
  .workspace { padding: 18px 12px 36px; }
  .page-heading { min-height: 48px; }
  .page-heading h1 { font-size: 21px; }
  #view-tasks .page-heading { flex-direction: column; }
  #add-task { width: 100%; white-space: nowrap; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .section-heading > div { width: 100%; }
  .section-heading > .muted { max-width: 100%; }
  .status-strip { grid-template-columns: 1fr; }
  .status-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .status-cell:last-child { border-bottom: 0; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .task-dialog-grid { grid-template-columns: 1fr; }
  .dinosaur-page-heading, .dinosaur-panel-heading { align-items: flex-start; flex-direction: column; }
  .dinosaur-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .dinosaur-catalog-toolbar .search-field { width: 100%; }
  .dinosaur-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .dinosaur-toolbar-actions #dinosaur-discover { grid-column: 1 / -1; justify-content: center; }
  .dinosaur-catalog { max-height: none; }
  .dinosaur-category-heading { align-items: flex-start; }
  .dinosaur-category-heading > div { display: grid; gap: 3px; }
  .dinosaur-category-grid { grid-template-columns: 1fr; }
  .dinosaur-exchange-rule { padding: 12px 14px; }
  .dinosaur-exchange-table { max-height: 70vh; }
  .dinosaur-config-footer .button { width: 100%; }
  .dinosaur-config-footer { align-items: stretch; flex-direction: column; }
  .search-field, .search-field.steam-search { width: 100%; }
  .toolbar .button { width: 100%; }
  .combat-report-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .combat-date-control { min-width: 0; }
  .combat-report-search, .combat-filter-control, .combat-report-toolbar > .button.primary { grid-column: 1 / -1; }
  .combat-report-toolbar > .button.primary { width: 100%; }
  .combat-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .combat-report-summary > div { border-bottom: 1px solid var(--line); }
  .combat-report-summary > div:nth-child(2n) { border-right: 0; }
  .combat-report-summary > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .combat-quality-note { align-items: flex-start; }
  .online-duration-history-toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .online-duration-date-control { min-width: 0; }
  .online-duration-history-search, .online-duration-history-filter, .online-duration-history-toolbar > .button.primary { grid-column: 1 / -1; }
  .online-duration-history-toolbar > .button.primary { width: 100%; }
  .online-duration-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-duration-history-summary > div { border-bottom: 1px solid var(--line); }
  .online-duration-history-summary > div:nth-child(2n) { border-right: 0; }
  .online-duration-history-summary > div:nth-last-child(-n+2) { border-bottom: 0; }
  .online-duration-history-note { align-items: flex-start; }
  .settings-card { align-items: stretch; flex-direction: column; }
  .vault-settings-action { width: 100%; justify-content: space-between; }
  .admin-command-filters { grid-template-columns: 1fr; }
  .admin-command-workbench { min-height: 0; padding: 16px; }
  .admin-command-empty { min-height: 300px; }
  .admin-command-detail-heading { flex-direction: column; }
  .admin-command-fields { grid-template-columns: 1fr; }
  .admin-command-field.wide { grid-column: auto; }
  .admin-command-form-footer, .admin-command-response-heading { align-items: stretch; flex-direction: column; }
  .admin-command-form-footer .button, .admin-command-response-heading .button { width: 100%; }
  .admin-command-confirm-summary > div { grid-template-columns: 1fr; gap: 3px; }
  .startup-settings-grid { grid-template-columns: 1fr; }
  .recovery-settings-grid { grid-template-columns: 1fr; }
  .settings-card-content input, .settings-card .button { max-width: none; width: 100%; }
  .server-capacity-content { grid-template-columns: 1fr; }
  .game-server-restart-card { grid-template-columns: 1fr; }
  .game-server-restart-icon { display: none; }
  .game-server-restart-card .button { width: 100%; }
  .login-panel { padding: 28px 22px; }
  .coordinate-fields { grid-template-columns: 1fr; }
}