:root {
  color-scheme: dark;
  --bg: #0b0e0c;
  --surface: #121714;
  --surface-2: #18201b;
  --line: #29352d;
  --text: #eef5ef;
  --muted: #9aaba0;
  --gold: #d4a94f;
  --gold-dark: #765a20;
  --green: #66c38a;
  --red: #e27468;
  --orange: #e6a357;
  --radius: 10px;
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% -10%, #243428 0, var(--bg) 35%); color: var(--text); font-size: 16px; }
button, input, select { font: inherit; }
button { touch-action: manipulation; }
h1, h2, p { margin-top: 0; }
.muted { color: var(--muted); line-height: 1.55; }
.eyebrow { margin-bottom: .3rem; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .15em; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(11, 14, 12, .88); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.page-tabs { position: sticky; top: 76px; z-index: 9; display: flex; gap: .35rem; padding: .65rem clamp(1rem, 4vw, 3rem); overflow-x: auto; border-bottom: 1px solid var(--line); background: rgba(11, 14, 12, .94); scrollbar-width: thin; }
.tab-button { flex: 0 0 auto; min-height: 38px; padding: .5rem .9rem; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-size: .85rem; font-weight: 750; cursor: pointer; }
.tab-button:hover { color: var(--text); background: var(--surface-2); }
.tab-button.active { border-color: var(--gold-dark); color: var(--gold); background: rgba(212, 169, 79, .1); }
.tab-button:focus-visible { outline: 3px solid rgba(212,169,79,.35); outline-offset: 1px; }
.tab-button[hidden] { display: none; }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: panel-in .16s ease-out; }
@keyframes panel-in { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.brand, .top-actions, .control-group, .button-row, .status-line { display: flex; align-items: center; gap: .75rem; }
.brand h1 { margin: 0; font-size: 1.05rem; }
.brand .eyebrow { margin: 0; font-size: .66rem; }
.brand-mark { display: grid; place-items: center; width: 56px; height: 56px; color: #10140f; background: var(--gold); clip-path: polygon(50% 0, 95% 24%, 83% 84%, 50% 100%, 17% 84%, 5% 24%); font-family: Georgia, serif; font-size: 2rem; font-weight: 900; }
.brand-mark.small { width: 38px; height: 38px; font-size: 1.3rem; }
.user-label { color: var(--muted); font-size: .875rem; }
.dashboard { width: min(1500px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }
.server-hero { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--gold-dark); border-radius: var(--radius); background: linear-gradient(115deg, rgba(212,169,79,.13), rgba(18,23,20,.92) 48%); box-shadow: inset 4px 0 0 var(--gold); }
.server-hero h2 { margin: .55rem 0 .3rem; font-family: Georgia, "Noto Serif TC", serif; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.server-hero p { margin-bottom: 0; }
.status-line { font-weight: 750; }
.status-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgba(154,171,160,.12); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(102,195,138,.13), 0 0 18px rgba(102,195,138,.45); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 0 4px rgba(226,116,104,.13); }
.button { min-height: 42px; padding: .65rem 1rem; border: 1px solid transparent; border-radius: 7px; color: var(--text); background: var(--surface-2); font-weight: 750; cursor: pointer; transition: transform .15s ease, border-color .15s ease, filter .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); }
.button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(212,169,79,.35); outline-offset: 2px; }
.button:disabled { opacity: .45; cursor: wait; }
.button.primary { background: var(--gold); color: #15120a; }
.button.success { border-color: #397453; background: #193a27; }
.button.danger { border-color: #854740; background: #3b201d; }
.button.warning { border-color: #8a5b28; background: #422d17; }
.button.secondary { border-color: var(--line); background: var(--surface-2); }
.button.ghost { border-color: var(--line); background: transparent; }
.button.full { width: 100%; }
.button.compact { min-height: 34px; padding: .35rem .65rem; }
.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 1rem 0; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(18, 23, 20, .94); }
.metric-card { padding: 1.1rem 1.2rem; }
.metric-label { display: block; margin-bottom: .55rem; color: var(--muted); font-size: .8rem; letter-spacing: .04em; }
.metric-value { display: block; font-size: clamp(1.15rem, 2vw, 1.55rem); font-variant-numeric: tabular-nums; }
.metric-value.compact { font-size: .95rem; line-height: 1.5; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr); gap: 1rem; }
.main-stack { display: grid; gap: 1rem; min-width: 0; }
.panel { min-width: 0; padding: 1.25rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2 { margin: 0; font-size: 1.15rem; }
.map-panel { margin-bottom: 0; }
.map-actions, .map-footer, .map-legend { display: flex; align-items: center; gap: .55rem; }
.map-viewport { position: relative; height: min(68vh, 720px); min-height: 390px; overflow: hidden; border: 1px solid #253029; border-radius: 8px; background: #070a08; cursor: grab; touch-action: none; }
.map-viewport.dragging { cursor: grabbing; }
#world-map { display: block; width: 100%; height: 100%; }
.map-empty { position: absolute; inset: 0; display: grid; place-content: center; gap: .45rem; padding: 2rem; color: var(--muted); text-align: center; pointer-events: none; }
.map-empty strong { color: #dce8df; }
.map-empty.hidden { display: none; }
.map-footer { justify-content: space-between; margin-top: .75rem; font-size: .78rem; }
.map-footer .muted { margin: 0; }
.map-legend { color: var(--muted); white-space: nowrap; }
.map-legend i { width: 11px; height: 11px; border: 2px solid #f5e6b8; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(212,169,79,.22); }
.log-view { height: 430px; margin: 0; padding: 1rem; overflow: auto; border: 1px solid #253029; border-radius: 6px; background: #070a08; color: #bcd7c5; font: .8rem/1.6 "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-view { min-height: 110px; max-height: 230px; margin: 1rem 0 0; padding: 1rem; overflow: auto; border: 1px solid #253029; border-radius: 6px; background: #070a08; color: #dce8df; font: .82rem/1.55 "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.rcon-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.command-form { min-width: 0; }
.command-form label { display: block; margin-bottom: .55rem; color: #d5ddd7; font-size: .875rem; font-weight: 700; }
.input-action { display: flex; gap: .55rem; }
.input-action input { min-width: 0; flex: 1; min-height: 42px; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 7px; background: #090d0a; color: var(--text); }
.form-hint { margin: .55rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.give-form { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(9, 13, 10, .55); }
.give-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.give-heading h3 { margin: 0; font-size: 1rem; }
.give-fields { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 130px; gap: .75rem; }
.give-form label > span { display: block; margin-bottom: .45rem; color: #d5ddd7; font-size: .8rem; font-weight: 700; }
.give-form input, .give-form select { width: 100%; min-height: 42px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 7px; background: #090d0a; color: var(--text); }
.give-form select:disabled { color: var(--muted); opacity: .65; }
.item-picker { display: block; margin-top: .85rem; }
.item-category-tabs { display: flex; gap: .4rem; margin-bottom: .85rem; padding-bottom: .5rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.item-category-tab { flex: 0 0 auto; min-height: 36px; padding: .4rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: #111812; color: var(--muted); font-size: .8rem; font-weight: 700; cursor: pointer; }
.item-category-tab:hover, .item-category-tab.active { border-color: var(--gold-dark); background: rgba(212,169,79,.1); color: var(--gold); }
.item-category-tab:focus-visible { outline: 3px solid rgba(212,169,79,.35); outline-offset: 1px; }
.item-picker label { display: block; margin-bottom: .45rem; color: #d5ddd7; font-size: .8rem; font-weight: 700; }
.item-picker input { margin-bottom: .55rem; }
.item-picker #item-results { margin: 0 0 .55rem; }
.item-picker select { min-height: 220px; padding: .35rem; overflow-y: auto; }
.item-picker option { padding: .35rem .45rem; }
.players-list { max-height: 240px; overflow-y: auto; }
.player-item { padding: .7rem 0; border-bottom: 1px solid var(--line); color: #dce8df; font: .8rem/1.5 "Cascadia Mono", Consolas, monospace; overflow-wrap: anywhere; }
.chat-messages { height: 300px; overflow-y: auto; border: 1px solid #253029; border-radius: 7px; background: #090d0a; }
.chat-broadcast { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(9, 13, 10, .55); }
.chat-heading-actions { display: flex; align-items: center; gap: .6rem; }
.chat-message { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .45rem .65rem; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.chat-channel { align-self: start; padding: .15rem .35rem; border: 1px solid var(--gold-dark); border-radius: 4px; color: var(--gold); font-size: .68rem; font-weight: 800; }
.chat-channel.shout { border-color: #8a5b28; color: var(--orange); background: rgba(230, 163, 87, .08); }
.chat-author { color: #dce8df; font-size: .82rem; font-weight: 750; }
.chat-time { color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.chat-text { grid-column: 2 / -1; margin: 0; color: #c8d7cd; font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-delete { align-self: start; padding: .24rem .48rem; }
.side-stack { display: grid; align-content: start; gap: 1rem; }
.overview-players { margin-top: 1rem; }
.maintenance-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.badge { padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.badge.ok { border-color: #397453; color: var(--green); }
.badge.bad { border-color: #854740; color: var(--red); }
.badge.attention { border-color: #8a5b28; color: var(--orange); }
.backup-list { max-height: 265px; margin-top: 1rem; overflow-y: auto; }
.backup-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.backup-information { display: grid; min-width: 0; gap: .25rem; }
.backup-name { overflow: hidden; font-size: .875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.backup-meta { color: var(--muted); font-size: .75rem; }
.backup-actions, .backup-heading-actions { display: flex; align-items: center; gap: .5rem; }
.backup-actions .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.backup-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.backup-toolbar .form-hint { margin: 0; text-align: right; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; white-space: nowrap; }
.data-table th, .data-table td { padding: .8rem .75rem; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.data-table thead th { color: var(--muted); background: #0d120f; font-size: .75rem; letter-spacing: .03em; }
.table-sort-button { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.table-sort-button:hover { color: var(--gold); }
.table-sort-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.sort-indicator { min-width: .8rem; color: var(--gold); font-size: .68rem; text-align: center; }
.data-table tbody th { color: #dce8df; font-weight: 750; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.empty-cell { padding: 1.5rem !important; color: var(--muted); text-align: center !important; }
.player-actions { display: flex; min-width: 130px; gap: .4rem; }
.nowrap { white-space: nowrap; }
.ban-section { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.subsection-heading h3 { margin: 0; font-size: 1rem; }
.ban-list { display: grid; gap: .5rem; margin-top: .7rem; }
.ban-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: #0b100d; font-size: .82rem; }
.empty-state { margin: 1rem 0 0; color: var(--muted); font-size: .875rem; }
.alert { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid #397453; border-radius: 7px; background: #172c20; color: #c9efd7; }
.alert.error { border-color: #854740; background: #341d1a; color: #ffc7c1; }
.alert.hidden { display: none; }
.login-body { display: grid; place-items: center; padding: 1.25rem; }
.login-shell { width: min(430px, 100%); }
.login-card { padding: clamp(1.5rem, 6vw, 2.6rem); border: 1px solid var(--gold-dark); border-radius: var(--radius); background: rgba(18,23,20,.97); box-shadow: 0 24px 80px rgba(0,0,0,.42); }
.login-card .brand-mark { margin-bottom: 1.5rem; }
.login-card h1 { font-family: Georgia, "Noto Serif TC", serif; font-size: 2rem; }
.login-form { display: grid; gap: .7rem; margin-top: 1.5rem; }
.login-form label { margin-top: .3rem; color: #d5ddd7; font-size: .875rem; font-weight: 700; }
.login-form input { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 7px; background: #090d0a; color: var(--text); }
.login-form .button { margin-top: .7rem; }
.confirm-dialog { width: min(440px, calc(100% - 2rem)); padding: 1.4rem; border: 1px solid var(--gold-dark); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.confirm-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.confirm-dialog h2 { font-size: 1.2rem; }
.restore-confirm-label { display: block; margin: 1rem 0 .45rem; color: #d5ddd7; font-size: .875rem; }
.confirm-dialog input { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 7px; background: #090d0a; color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
  .rcon-grid { grid-template-columns: 1fr; }
  .give-fields { grid-template-columns: 1fr 1fr; }
  .give-fields label:first-child { grid-column: 1 / -1; }
  .log-view { height: 430px; }
  .map-viewport { height: min(62vh, 580px); min-height: 350px; }
  .maintenance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar { min-height: 66px; }
  .page-tabs { top: 66px; padding-block: .5rem; }
  .user-label { display: none; }
  .server-hero { align-items: stretch; flex-direction: column; }
  .control-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .button { padding-inline: .7rem; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .metric-card { padding: .9rem; }
  .button-row { display: grid; grid-template-columns: 1fr 1fr; }
  .input-action { align-items: stretch; flex-direction: column; }
  .give-heading { align-items: stretch; flex-direction: column; }
  .give-fields { grid-template-columns: 1fr 1fr; }
  .map-actions { flex-wrap: wrap; justify-content: flex-end; }
  .map-viewport { height: 58vh; min-height: 320px; }
  .map-footer { align-items: flex-start; flex-direction: column; }
  .chat-message { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chat-time { grid-column: 2; }
  .chat-delete { grid-column: 3; grid-row: 1 / span 2; }
  .chat-text { grid-column: 1 / -1; }
  .backup-item { grid-template-columns: 1fr; }
  .backup-actions { justify-content: flex-end; }
  .backup-toolbar { align-items: stretch; flex-direction: column; }
  .backup-toolbar .form-hint { text-align: left; }
}