:root {
  color-scheme:light;
  --bg: #000000;
  --panel: #0a0a0a;
  --border: #c9dcec;
  --muted: #a1a1aa;
  --gold: #ffffff;
  --text: #fafafa;
  --green: #34d399;
  --red: #f87171;
}

body {
  min-height: 100vh;
  background:
    
    var(--bg);
  font-family: Bahnschrift, "Segoe UI Variable", "Segoe UI", sans-serif;
}

h1 { letter-spacing: 0; }

button, input, select, textarea { transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

button { border-radius: 6px; }
button:hover { border-color: #c9dcec; background: var(--panel); }
.primary { background: var(--gold); border-color: var(--gold); }
.primary:hover { background: var(--panel); border-color: #c9dcec; }
input, select, textarea { background: var(--panel); border-color: #c9dcec; border-radius: 6px; }

.sidebar {
  width: 258px;
  padding: 25px 16px 18px;
  background: var(--panel);
  border-color: #c9dcec;
}
.brand { gap: 12px; padding: 4px 9px; }
.brand-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #c9dcec;
  border-radius: 8px;
  background: var(--panel);
  font-size: 23px;
}
.brand small { color: #244563; letter-spacing: 1.2px; }
.workspace { margin: 27px 0 22px; background: var(--panel); }
.nav-label { margin: 0 0 9px; }
.sidebar > nav { gap: 5px; }
.sidebar > nav button {
  min-height: 43px;
  padding: 9px 12px;
  border-radius: 6px;
  color: #244563;
}
.sidebar > nav button span { width: 30px; color: #244563; }
.sidebar > nav button.active {
  color: #244563;
  background: var(--panel);
  border-color: #c9dcec;
  box-shadow: inset 3px 0 #d3a95f;
}
.sidebar > nav button.active span { color: var(--gold); }
.system-chip { background: var(--panel); border-color: #c9dcec; border-radius: 6px; }

main { margin-left: 258px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  height: 68px;
  padding: 0 38px;
  background: #f1f7fceF;
  backdrop-filter: blur(14px);
  border-color: #c9dcec;
}
.local-pill { border-radius: 4px; }
.content { padding: 36px 38px 22px; max-width: 1580px; }
.page-heading { margin-bottom: 24px; }
.page-heading h1 { margin: 7px 0; font-size: 32px; }
.page-heading p { font-size: 13px; }
.page-heading button { font-size: 12px; }
.hero {
  min-height: 164px;
  margin-bottom: 18px;
  padding: 24px 27px;
  border-color: #c9dcec;
  border-radius: 7px;
  background: var(--panel);
}
.hero h2 { margin: 10px 0 6px; font-size: 24px; letter-spacing: 0; }
.hero p { max-width: 65%; margin-bottom: 15px; color: #244563; font-size: 13px; }
.hero .crown {
  top: -22px;
  right: 35px;
  color: #244563;
  font-family: Bahnschrift, "Segoe UI", sans-serif;
  font-size: 174px;
  font-weight: 700;
  opacity: .09;
  transform: none;
}
.hero-tags { gap: 9px; font-size: 10px; color: #244563; }
.hero-tags span {
  padding: 4px 9px;
  border: 1px solid #c9dcec;
  border-radius: 4px;
  background: #f1f7fc99;
}
.stats { gap: 12px; margin-bottom: 18px; }
.stat {
  min-width: 0;
  padding: 17px 18px;
  border-color: var(--border);
  border-radius: 7px;
  background: var(--panel);
}
.stat-top { color: #244563; }
.stat-icon { color: #244563; }
.stat strong { margin: 8px 0 3px; font-size: 29px; letter-spacing: 0; }
.stat small { font-size: 11px; }
.grid-two { grid-template-columns: minmax(0, 1.45fr) minmax(310px, 1fr); gap: 16px; margin-bottom: 16px; }
.card { border-radius: 7px; background: var(--panel); }
.card-head { min-height: 65px; padding: 15px 18px; border-color: #c9dcec; }
.card-head h3 { font-size: 15px; }
.card-pad { padding: 18px; }
.chart { gap: 12px; border-color: #c9dcec; }
.bar { background: var(--panel); }
.status-row { padding: 11px 0; }
.table-wrap { scrollbar-color: #f1f7fc #f1f7fc; }
table { font-size: 12px; }
th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: #244563;
  font-size: 10px;
  font-weight: 650;
}
td { padding: 13px 16px; border-color: #c9dcec; }
tr:hover td { background: var(--panel); }
.badge { border-radius: 4px; }
.toolbar { gap: 9px; }
.toolbar input { min-height: 42px; }
.toolbar button { min-height: 40px; }
.empty { padding: 42px 24px; }
.quick-actions button { border-radius: 6px; }
.notice { border-radius: 6px; }
footer { border-color: #c9dcec; }

.login-screen {
  min-height: 100vh;
  max-width: 1160px;
  gap: clamp(42px, 8vw, 112px);
  padding: 54px;
}
.login-art .crest { color: #244563; text-shadow: 0 0 60px #71805a66; }
.login-art h1 { letter-spacing: 0; line-height: 1.04; }
.login-art em { color: #244563; }
.login-art p { max-width: 370px; line-height: 1.8; }
.edition { color: #244563; }
.login-card {
  border-color: #c9dcec;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 28px 80px #f1f7fc55;
}
.login-card h2 { font-size: 25px; }
.login-card .primary { min-height: 47px; }
.local-note { color: #244563; }
dialog { border-color: #c9dcec; border-radius: 8px; background: var(--panel); }
dialog:has(.grant-modal), dialog:has(.grant-picker) { width: min(1040px, calc(100vw - 30px)); }
#toast { border-radius: 6px; }

#view > * { animation: panel-enter .24s ease-out both; }
@keyframes panel-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .sidebar { width: 220px; padding-inline: 12px; }
  main { margin-left: 220px; }
  .topbar { padding-inline: 25px; }
  .content { padding: 30px 25px 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-two { grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); }
  .login-screen { gap: 45px; padding: 35px; }
}

@media (max-width: 760px) {
  .sidebar {
    position: sticky;
    inset: 0 0 auto;
    z-index: 5;
    display: block;
    width: 100%;
    padding: 10px 14px 8px;
    border-right: 0;
    border-bottom: 1px solid #c9dcec;
    background: #f1f7fcf5;
    backdrop-filter: blur(14px);
  }
  .brand { width: fit-content; padding: 0 3px; font-size: 17px; }
  .brand-icon { width: 34px; height: 34px; font-size: 19px; }
  .brand small { margin-top: 4px; font-size: 7px; }
  .workspace, .nav-label, .sidebar-bottom { display: none; }
  .sidebar > nav {
    display: flex;
    gap: 5px;
    margin-top: 9px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .sidebar > nav button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  .sidebar > nav button span { width: 21px; font-size: 16px; }
  main { margin-left: 0; }
  .topbar { position: static; height: 54px; padding: 0 16px; }
  .top-right { gap: 8px; }
  .local-pill { margin-right: 2px; padding: 4px 6px; font-size: 8px; }
  .top-right .avatar { width: 29px; height: 29px; }
  .admin-label b { font-size: 11px; }
  .admin-label small { font-size: 9px; }
  .slash { margin-inline: 8px; }
  .content { padding: 24px 15px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 19px; }
  .page-heading h1 { font-size: 27px; }
  .page-heading button { align-self: flex-start; }
  .hero { min-height: 0; padding: 19px; }
  .hero h2 { max-width: 80%; font-size: 21px; }
  .hero p { max-width: 82%; font-size: 12px; }
  .hero .crown { top: 3px; right: 8px; font-size: 112px; }
  .hero-tags { gap: 6px; }
  .hero-tags span { font-size: 9px; }
  .stats { gap: 9px; }
  .stat { padding: 14px; }
  .stat-top { gap: 8px; font-size: 10px; }
  .stat strong { font-size: 24px; }
  .stat small { font-size: 10px; }
  .grid-two, .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card-head { padding: 13px 14px; }
  .card-pad { padding: 14px; }
  th { padding: 11px 12px; }
  td { padding: 12px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar input { flex: 1 1 100%; max-width: none; }
  .toolbar .primary { margin-left: auto; }
  .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-actions button { padding: 10px; }
  .quick-actions button span { font-size: 19px; }
  footer { gap: 10px; font-size: 8px; }
  .login-screen { display: block; max-width: 480px; padding: 30px 20px; }
  .login-art { margin-bottom: 28px; }
  .login-art .crest { float: right; font-size: 65px; }
  .login-art h1 { font-size: 34px; margin-top: 18px; }
  .login-art p, .edition { display: none; }
  .login-card { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 12px; font-size: 11px; }
  .admin-label { display: none; }
  .content { padding-inline: 12px; }
  .hero-tags span { padding: 4px 6px; font-size: 8px; }
  .stat { padding: 12px; }
  .stat-top { font-size: 9px; }
  .stat-icon { font-size: 15px; }
  .stat strong { font-size: 22px; }
  .quick-actions { grid-template-columns: 1fr; }
  .quick-actions button { display: flex; align-items: center; gap: 10px; }
  .quick-actions button span { margin: 0; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.item-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid #c9dcec;
  border-radius: 6px;
  background: var(--panel);
}
.item-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}
.item-icon-fallback {
  display: none;
  padding: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
}
.item-icon.is-missing .item-icon-fallback { display: block; }
.item-icon-id {
  color: var(--gold);
  font-size: 12px;
}
.item-name { min-width: 170px; }
.item-name b { display: block; min-width: 140px; }
.item-name small { display: block; max-width: 280px; }

.operation-summary { display: grid; gap: 14px; max-width: 940px; }
.operation-summary h3 { margin-bottom: 5px; }
.operation-summary p { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.operation-metrics { display: flex; align-items: center; gap: 34px; margin-top: 14px; }
.operation-metrics > div { display: grid; gap: 5px; }
.operation-metrics strong { font-size: 26px; }
.operation-controls { display: flex; align-items: end; gap: 12px; }
.operation-controls label { width: min(260px, 100%); margin: 0; }
.operation-danger { border-color: #c9dcec; }
.operation-danger-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.operation-danger-head p { margin-bottom: 0; }
.danger-button { border-color: #c9dcec; background: var(--panel); color: #244563; }
.danger-button:hover { border-color: #c9dcec; background: var(--panel); }
.online-player-list { margin-top: 16px; border-top: 1px solid #c9dcec; }
.online-player { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #c9dcec; }
.online-player b, .online-player small { display: block; }
.online-player small { margin-top: 2px; }
.online-player .danger-button { padding: 6px 11px; }
.rate-panel { display: grid; gap: 20px; max-width: 760px; }
.rate-panel h2 { margin: 8px 0; font-size: 23px; }
.rate-panel p { max-width: 610px; margin: 0; color: var(--muted); font-size: 13px; }
.rate-controls { display: flex; align-items: end; gap: 12px; max-width: 450px; }
.rate-controls label { flex: 1; margin: 0; }
.rate-note { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.grant-modal { display: grid; gap: 15px; }
.grant-modal-heading h2, .grant-picker h2 { margin: 5px 0; font-size: 22px; }
.grant-modal-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.grant-modal > label { margin: 0; }
.grant-recipient { display: grid; gap: 7px; color: #244563; font-size: 13px; }
.grant-recipient button { min-height: 42px; border-style: dashed; background: var(--panel); color: #244563; text-align: left; }
.grant-items-heading, .picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grant-items-heading button, .grant-option-heading button, .picker-heading button { padding: 7px 11px; font-size: 11px; }
.grant-builder-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(245px, .85fr); gap: 14px; align-items: start; }
.grant-rows { display: grid; gap: 10px; }
.grant-row, .grant-preview, .grant-picker { min-width: 0; border: 1px solid #c9dcec; border-radius: 7px; background: var(--panel); }
.grant-row { padding: 12px; }
.grant-row-main { display: grid; grid-template-columns: minmax(0, 1fr) 104px 34px; gap: 9px; align-items: end; }
.grant-item-select { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 54px; padding: 7px 10px; border: 1px dashed #c9dcec; background: var(--panel); color: #244563; text-align: left; }
.grant-item-select img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.grant-item-select span, .grant-item-select b, .grant-item-select small { display: block; min-width: 0; }
.grant-item-select b { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.grant-item-select small { margin-top: 2px; }
.grant-row-main label { margin: 0; }
.grant-row-main label input { min-height: 39px; padding: 8px 10px; }
.icon-remove, .grant-option button:last-child { width: 32px; height: 34px; padding: 0; border: 0; background: transparent; color: #244563; font-size: 19px; }
.grant-option-list { margin-top: 11px; padding-top: 9px; border-top: 1px solid #c9dcec; }
.grant-option-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #244563; font-size: 11px; }
.grant-option-heading button { min-height: 29px; }
.grant-option { display: grid; grid-template-columns: minmax(0, 1fr) 95px 28px; gap: 8px; align-items: center; padding: 5px 0; color: #244563; font-size: 11px; }
.grant-option input { min-height: 32px; padding: 5px 8px; }
.grant-option button:last-child { width: 26px; height: 28px; }
.grant-preview { position: sticky; top: 10px; min-height: 190px; padding: 13px; }
.grant-preview h3 { margin: 0 0 12px; font-size: 14px; }
.grant-preview-empty { display: grid; place-items: center; min-height: 130px; border: 1px dashed #c9dcec; border-radius: 6px; color: var(--muted); font-size: 11px; text-align: center; }
.grant-preview-item { display: flex; gap: 9px; padding: 8px 0; border-top: 1px solid #c9dcec; }
.grant-preview-item img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.grant-preview-item b, .grant-preview-item small { display: block; }
.grant-preview-item b { font-size: 11px; }
.grant-preview-item small { margin-top: 2px; }
.grant-modal textarea { min-height: 72px; }
.grant-picker { padding: 14px; }
.grant-picker-search { display: flex; gap: 8px; margin: 13px 0; }
.grant-picker-search input { min-width: 0; }
.grant-item-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-height: min(58vh, 570px); overflow: auto; padding: 1px; }
.grant-item-choice { display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0; min-height: 128px; padding: 9px 7px; border-color: #c9dcec; background: var(--panel); text-align: center; }
.grant-choice-image { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); }
.grant-choice-image img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.grant-item-choice b { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.grant-item-choice small { font-size: 9px; }
.grant-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: min(58vh, 570px); overflow: auto; }
.grant-option-choice { display: flex; align-items: center; gap: 9px; min-height: 56px; padding: 8px; text-align: left; }
.grant-option-choice b { font-size: 11px; font-weight: 550; }
.grant-choice-list { display: grid; gap: 6px; max-height: min(58vh, 570px); overflow: auto; }
.grant-choice-list > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.grant-choice-list b, .grant-choice-list small { display: block; }
.grant-choice-list small { margin-top: 2px; }

@media (max-width: 760px) {
  dialog:has(.grant-modal), dialog:has(.grant-picker) { padding: 14px; }
  .grant-builder-grid { grid-template-columns: minmax(0, 1fr); }
  .grant-preview { position: static; }
  .grant-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grant-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .grant-row-main { grid-template-columns: minmax(0, 1fr) 76px 28px; gap: 5px; }
  .grant-item-select { padding-inline: 6px; font-size: 10px; }
  .grant-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grant-option-grid { grid-template-columns: minmax(0, 1fr); }
  .grant-option { grid-template-columns: minmax(0, 1fr) 70px 25px; gap: 5px; }
}

@media (max-width: 760px) {
  .operation-controls { align-items: stretch; flex-direction: column; }
  .operation-controls label { width: 100%; }
  .operation-metrics { gap: 18px; }
  .operation-danger-head { align-items: flex-start; flex-direction: column; }
  .rate-controls { align-items: stretch; flex-direction: column; }
}

.shop-warning { margin-bottom: 14px; padding: 11px 14px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); color: #244563; font-size: 12px; }
.shop-warning.is-live { border-color: #c9dcec; background: var(--panel); color: #244563; }
.shop-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.shop-category-card { display: grid; justify-items: start; gap: 10px; min-height: 220px; padding: 24px; border-color: #c9dcec; background: var(--panel); text-align: left; }
.shop-category-card.special { border-color: #c9dcec; background: var(--panel); }
.shop-category-mark { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #c9dcec; border-radius: 8px; background: var(--panel); color: #244563; font-size: 25px; }
.shop-category-card.special .shop-category-mark { border-color: #c9dcec; background: var(--panel); color: var(--gold); }
.shop-category-card h2 { margin: 0; font-size: 23px; }
.shop-category-card p { max-width: 460px; margin: 0; color: var(--muted); font-size: 13px; }
.shop-category-count { margin-top: auto; color: #244563; font-size: 11px; }
.shop-section-heading { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px; }
.shop-section-heading > div { flex: 1; }
.shop-section-heading h2 { margin: 4px 0 0; font-size: 22px; }
.shop-section-heading h2 small { margin-left: 8px; font-size: 11px; font-weight: 400; }
.shop-npc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.shop-npc-card { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px; background: var(--panel); text-align: left; }
.shop-npc-card > span:nth-child(2) { flex: 1; min-width: 0; }
.shop-npc-card b, .shop-npc-card small { display: block; }
.shop-npc-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-npc-card small { margin-top: 3px; font-size: 10px; }
.shop-npc-avatar { position: relative; display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; overflow: hidden; border: 1px solid #c9dcec; border-radius: 7px; background: var(--panel); color: var(--gold); font-weight: 700; }
.shop-npc-avatar img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.shop-npc-fallback { display: none; }
.shop-npc-avatar.is-missing .shop-npc-fallback { display: block; }
.shop-tabs { display: flex; gap: 7px; margin: 0 0 13px; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.shop-tab { flex: 0 0 auto; padding: 7px 13px; background: var(--panel); }
.shop-tab.active { border-color: #c9dcec; background: var(--panel); color: #244563; }
.shop-tab small { display: block; margin-top: 2px; text-align: center; }
.shop-item-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.shop-item-icon img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.shop-currency-display { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.shop-currency-display img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.shop-item-preview, .shop-template-picked { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.shop-item-preview img, .shop-template-picked img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.shop-item-preview span, .shop-template-picked span { flex: 1; color: var(--muted); font-size: 11px; }
.shop-template-picked b, .shop-template-picked small { display: block; }
.shop-template-trigger { width: 100%; min-height: 46px; border-style: dashed; background: var(--panel); color: #244563; text-align: left; }
.shop-template-field { display: grid; gap: 6px; color: #244563; font-size: 13px; }

@media (max-width: 760px) {
  .shop-category-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-category-card { min-height: 180px; }
  .shop-npc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-section-heading { align-items: flex-start; flex-wrap: wrap; }
  .shop-section-heading > div { flex-basis: calc(100% - 150px); }
}

@media (max-width: 420px) {
  .shop-npc-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-section-heading { gap: 9px; }
  .shop-section-heading h2 { font-size: 18px; }
}

.map-warning { margin-bottom: 14px; padding: 11px 14px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); color: #244563; font-size: 12px; line-height: 1.55; }
.map-warning.is-live { border-color: #c9dcec; background: var(--panel); color: #244563; }
.map-table-card { min-width: 0; }
.map-table-card .table-wrap { overflow-x: auto; }
.map-table-card table { min-width: 960px; }
.map-preview-list, .map-npc-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; max-width: 340px; }
.map-mob-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #c9dcec; border-radius: 4px; background: var(--panel); color: #244563; font-size: 10px; }
.map-mob-chip small { color: #244563; white-space: nowrap; }
.map-more, .map-preview-count { color: #244563; font-size: 10px; white-space: nowrap; }
.map-npc-mini { display: inline-flex; align-items: center; gap: 4px; max-width: 120px; color: #244563; font-size: 10px; }
.map-npc-mini img { width: 25px; height: 25px; border: 1px solid #c9dcec; border-radius: 4px; background: var(--panel); object-fit: contain; image-rendering: pixelated; }
.map-npc-mini img.is-missing { display: none; }
.map-npc-mini small { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog:has(.map-editor) { width: min(1120px, calc(100vw - 32px)); max-height: 92vh; overflow-y: auto; }
.map-editor { display: grid; gap: 15px; }
.map-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.map-editor-heading h2 { margin: 5px 0; font-size: 23px; }
.map-editor-heading p { max-width: 660px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.map-editor > label { margin: 0; }
.map-basic-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.map-basic-fields label, .map-coordinate-grid label { margin: 0; }
.map-editor-section { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid #c9dcec; }
.map-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.map-section-heading h3 { margin: 0 0 3px; font-size: 15px; }
.map-section-heading small { color: var(--muted); font-size: 11px; }
.map-section-heading button { flex: 0 0 auto; }
.map-spawn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.map-spawn-row { min-width: 0; padding: 11px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); }
.map-row-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #244563; font-size: 11px; font-weight: 650; }
.map-row-title .icon-remove { flex: 0 0 30px; }
.map-spawn-row > label { margin: 0; }
.map-coordinate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 9px; }
.map-coordinate-grid input, .map-basic-fields input { min-width: 0; }
.map-npc-picker { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px; align-items: end; }
.map-npc-picker label { min-width: 0; margin: 0; }
.map-npc-portrait { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid #c9dcec; border-radius: 5px; background: var(--panel); }
.map-npc-portrait img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.map-npc-portrait img.is-missing { display: none; }
.map-editor .form-actions { justify-content: flex-end; }

.currency-warning { margin-bottom: 14px; padding: 11px 14px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); color: #244563; font-size: 12px; line-height: 1.6; }
.currency-warning b { color: #244563; }
.currency-table-card .table-wrap { overflow-x: auto; }
.currency-table-card table { min-width: 900px; }
.currency-editor { display: grid; gap: 16px; }
.currency-editor h2 { margin: 5px 0; font-size: 22px; }
.currency-editor > div:first-child p { margin: 0; color: var(--muted); font-size: 12px; }
.currency-current-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.currency-current-grid > div { min-width: 0; padding: 10px; border: 1px solid #c9dcec; border-radius: 6px; background: var(--panel); }
.currency-current-grid small, .currency-current-grid b { display: block; }
.currency-current-grid small { color: var(--muted); font-size: 10px; }
.currency-current-grid b { margin-top: 5px; overflow-wrap: anywhere; color: var(--gold); font-size: 14px; }
.currency-editor form { display: grid; gap: 13px; }
.currency-editor form > label { margin: 0; }
.currency-input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.currency-input-grid label { min-width: 0; margin: 0; }
.currency-input-grid small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.currency-editor textarea { min-height: 68px; }
.danap-note { padding: 9px 11px; border-left: 2px solid var(--gold); background: var(--panel); color: #244563; font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  dialog:has(.map-editor) { padding: 14px; }
  .map-spawn-list { grid-template-columns: minmax(0, 1fr); }
  .map-coordinate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-editor-heading h2 { font-size: 20px; }
  .currency-current-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .map-basic-fields { grid-template-columns: minmax(0, 1fr); }
  .map-section-heading { align-items: flex-start; }
  .map-section-heading button { padding: 7px 8px; font-size: 10px; }
  .map-editor-heading { gap: 8px; }
  .map-editor-heading > button { padding: 7px 8px; }
  .currency-input-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Shared layout and feedback across every management page. */
.refresh-tools { display: grid; justify-items: end; gap: 7px; flex-shrink: 0; }
.refresh-tools small { color: var(--muted); font-size: 11px; }
.mobile-logout { display: none; }
.load-error { padding: 28px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; background: var(--panel); }
.load-error .empty { padding: 20px; }
button:disabled { cursor: not-allowed; opacity: .55; }
#view[aria-busy="true"] > .empty::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 16px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: panel-spin .8s linear infinite; }
@keyframes panel-spin { to { transform: rotate(360deg); } }

/* Keep long tables inside their cards, including tablet widths. */
main, .content, #view, .card, .grid-two > *, .settings-grid > * { min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.sidebar { overflow-y: auto; }
.stat strong { overflow-wrap: anywhere; }
@media (min-width: 761px) and (max-width: 1100px) {
  .grid-two, .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mobile-logout { display: inline-flex; padding: 7px 9px; white-space: nowrap; font-size: 11px; }
  .topbar > div:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar > div:first-child > .muted, .topbar .slash { display: none; }
  .refresh-tools { justify-items: start; }
  .sidebar { overflow-y: visible; }
  .card-head, .operation-danger-head, .operation-controls, .rate-controls { flex-wrap: wrap; gap: 12px; }
  .form-actions { flex-wrap: wrap; }
  #toast { left: 15px; right: 15px; bottom: 15px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:root {
  --bg: #000000 !important;
  --panel: #0a0a0a !important;
  --border: #c9dcec !important;
  --gold: #ffffff !important;
}

body { background: #f1f7fc !important; color: #244563 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
.primary { background: #ffffff !important; color: #000000 !important; border-color: #c9dcec !important; }
.primary:hover { background: #e4e4e7 !important; }

/* Modal and cards */
dialog, .card, .stat, .hero, .login-card { background: #f1f7fc !important; border-color: #c9dcec !important; }
.sidebar, nav { background: #f1f7fc !important; border-color: #c9dcec !important; }
th, td, .status-row { border-color: #c9dcec !important; }
tr:hover td, .activity-icon, .badge.gold { background: #f1f7fc !important; color: #244563 !important; }

/* Inputs */
input, select, textarea { background: #f1f7fc !important; border: 1px solid #c9dcec !important; color: #244563 !important; }
input:focus, select:focus, textarea:focus { border-color: #c9dcec !important; box-shadow: 0 0 0 2px rgba(255,255,255,0.1) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f7fc; }
::-webkit-scrollbar-thumb { background: #f1f7fc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #52525b; }

.align-right{text-align:right}.gift-preview-spacing{margin-top:8px}.gift-fields-spacing{margin-top:10px;margin-bottom:20px}.detail-spacing{padding:10px}

/* ==================== CHỈNH TỈ LỆ ĐẬP ĐỒ ==================== */
.dapdo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}
.dapdo-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: linear-gradient(135deg, #181d24, #101318) !important;
  border: 1px solid #2b394a !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
}
.dapdo-mode-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.dapdo-mode-info h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #f3f4f6;
  letter-spacing: -0.3px;
}
.dapdo-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #9ca3af;
}
.dapdo-toggle-group {
  display: inline-flex;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.dapdo-toggle-btn {
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: #8b949e !important;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dapdo-toggle-btn.is-active.is-on {
  background: #238636 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(35, 134, 54, 0.4) !important;
}
.dapdo-toggle-btn.is-active.is-off {
  background: #da3633 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(218, 54, 51, 0.4) !important;
}
.dapdo-status-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.dapdo-status-pill small {
  color: #9ca3af;
  font-size: 12px;
}
.dapdo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) {
  .dapdo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .dapdo-grid {
    grid-template-columns: 1fr;
  }
}
.dapdo-star-card {
  background: #141820 !important;
  border: 1px solid #243040 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.dapdo-star-card:hover {
  border-color: #f59e0b !important;
  transform: translateY(-2px);
}
.dapdo-star-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #243040;
  padding-bottom: 10px;
}
.dapdo-star-title {
  font-size: 16px;
  font-weight: 700;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dapdo-tier-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.25);
}
.dapdo-card-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dapdo-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dapdo-field label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dapdo-field input {
  background: #0d1117 !important;
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  width: 100%;
}
.dapdo-field input:focus {
  border-color: #fbbf24 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2) !important;
}
.dapdo-input-percent {
  position: relative;
  display: flex;
  align-items: center;
}
.dapdo-input-percent input {
  padding-right: 28px !important;
}
.percent-suffix {
  position: absolute;
  right: 10px;
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  pointer-events: none;
}
.dapdo-gold-formatted {
  font-size: 11px;
  color: #eab308;
  font-weight: 600;
}
.dapdo-footer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 0;
}
.dapdo-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dapdo-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}
#dapdo-btn-save {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid #34d399 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}
#dapdo-btn-save:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
}
#dapdo-btn-cancel {
  background: #1f2937 !important;
  color: #e5e7eb !important;
  border: 1px solid #374151 !important;
}
#dapdo-btn-cancel:hover {
  background: #374151 !important;
}
#dapdo-btn-guide {
  background: #1e293b !important;
  color: #60a5fa !important;
  border: 1px solid #3b82f6 !important;
}
#dapdo-btn-guide:hover {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* ==========================================================================
   GIỚI HẠN CHỈ SỐ (POWER LIMITS)
   ========================================================================== */
.power-limits-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto;
}
.power-limits-header-card {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
}
.power-limits-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.power-limits-actions-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-power-nav {
  background: #1f2937 !important;
  color: #f3f4f6 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-power-nav:hover {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}
.power-limits-badge {
  background: #030712;
  border: 1px solid #374151;
  border-radius: 9999px;
  padding: 6px 20px;
  font-weight: 700;
  font-size: 14px;
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.power-limits-badge-icon {
  font-size: 16px;
}
.power-limits-status-pill {
  display: flex;
  align-items: center;
}
.power-limits-table-card {
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.power-limits-table-wrap {
  overflow-x: auto;
}
.power-limits-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}
.power-limits-table th {
  background: #1f2937;
  color: #9ca3af;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  border-bottom: 1px solid #374151;
  white-space: nowrap;
}
.power-limits-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.power-limits-table tbody tr:hover td {
  background: rgba(255,255,255,0.03);
}
.power-limits-table td.id-col {
  font-weight: 700;
  color: #60a5fa;
}
.power-limits-table td.power-col {
  font-weight: 700;
  color: #fbbf24;
}
.power-limits-table td.hp-col {
  color: #f87171;
  font-weight: 600;
}
.power-limits-table td.ki-col {
  color: #38bdf8;
  font-weight: 600;
}
.power-limits-table td.dame-col {
  color: #fb923c;
  font-weight: 600;
}
.power-limits-table td.def-col {
  color: #34d399;
  font-weight: 600;
}
.power-limits-table td.crit-col {
  color: #c084fc;
  font-weight: 600;
}
.btn-power-edit {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid #0284c7 !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-power-edit:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}
.power-edit-modal {
  padding: 8px;
}
.power-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 18px 0;
}
@media (max-width: 640px) {
  .power-edit-grid {
    grid-template-columns: 1fr;
  }
}
.power-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.power-edit-field label {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.power-edit-field input {
  background: #0d1117 !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  width: 100%;
}
.power-edit-field input:focus {
  border-color: #38bdf8 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
}
.power-edit-formatted {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 600;
  margin-top: 2px;
}