:root {
  --atlas-ink: #e9dfce;
  --atlas-muted: #aaa092;
  --atlas-faint: #8f8170;
  --atlas-line: #584c3d;
  --atlas-line-strong: #d6af58;
  --atlas-panel: #211e1b;
  --atlas-panel-2: #2b2521;
  --atlas-input: #181614;
  --atlas-bg: #151312;
  --atlas-cyan: #e0bc76;
  --atlas-orange: #d4a46a;
  --atlas-green: #8fba97;
  --atlas-red: #de8b7b;
  --atlas-action: #713b33;
  --atlas-action-hover: #85483d;
  --atlas-action-border: #e2ba68;
  --atlas-action-ink: #f5e5c9;
  --atlas-series-warm: #d1ad72;
  --atlas-series-cool: #83a5a0;
  --atlas-heading: Georgia, "Songti SC", SimSun, serif;
  --atlas-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Microsoft YaHei UI", monospace;
}

body {
  background: var(--atlas-bg);
}

::selection {
  background: rgba(209, 173, 114, 0.24);
  color: var(--atlas-ink);
}

* {
  scrollbar-color: #826746 var(--atlas-input);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: var(--atlas-input);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid var(--atlas-input);
  background: #826746;
}

/* Campaign art remains separate from the interactive forms and data surfaces. */
.login-page {
  background: linear-gradient(90deg, #15131240, #151312c9), url("/_frontend/20261028-audit-overview-v6/assets/campaign-room.jpg") center / cover, var(--atlas-bg);
}

.login-visual {
  border-right: 1px solid var(--atlas-line);
  background: linear-gradient(105deg, #21160e20, #15131224);
}

.login-visual::before {
  background: linear-gradient(90deg, #15131220, #15131260);
}

.login-visual::after {
  position: absolute;
  inset: 20px;
  display: block;
  border: 0;
  content: none;
  pointer-events: none;
}

.login-heat-ring {
  border-color: rgba(209, 173, 114, 0.36);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(209, 173, 114, 0.04), inset 0 0 64px rgba(209, 173, 114, 0.05);
}

.login-heat-ring::before {
  border-color: rgba(209, 173, 114, 0.16);
  border-style: dashed;
}

.login-heat-ring::after {
  border-color: rgba(212, 164, 106, 0.46);
}

.login-visual-copy {
  gap: 20px;
  border-left: 0;
  background: linear-gradient(90deg, #151312c9, #15131210);
  box-shadow: none;
  padding: 24px;
}

.login-kicker {
  color: var(--atlas-cyan);
  font-family: var(--atlas-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-shadow: none;
}

.login-visual-copy h2 {
  color: var(--atlas-ink);
  font-family: var(--atlas-heading);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 760;
  letter-spacing: -0.055em;
  text-shadow: none;
}

.login-visual-copy h2 span:nth-child(2) {
  color: var(--atlas-muted);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 420;
}

.login-visual-copy p {
  color: var(--atlas-muted);
  line-height: 1.8;
}

.login-visual-tags span {
  border-color: var(--atlas-line);
  border-radius: 6px;
  background: var(--atlas-panel);
  color: var(--atlas-muted);
  font-family: var(--atlas-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.login-side {
  background: #15131294;
}

.login-side::before {
  background: radial-gradient(circle at 5% 28%, #a17f5612, transparent 23rem);
}

.login-panel {
  overflow: visible;
  border-color: var(--atlas-line);
  border-radius: 10px;
  background: #211e1bf5;
  box-shadow: 0 18px 56px #0006, inset 0 1px #e8c8930a;
}

.login-panel::before,
.login-panel::after {
  content: none;
}

.login-panel::before {
  content: none;
}

.login-panel::after {
  content: none;
}

.login-panel-head span {
  color: var(--atlas-cyan);
  font-family: var(--atlas-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.login-panel-head strong {
  color: var(--atlas-ink);
}

.login-form .field label {
  color: var(--atlas-muted);
  font-family: var(--atlas-mono);
  font-size: 11px;
}

.login-form .field input {
  border-color: var(--atlas-line);
  border-radius: 6px;
  background: var(--atlas-input);
  box-shadow: none;
  color: var(--atlas-ink);
}

.login-form .field input:focus {
  border-color: var(--atlas-line-strong);
  box-shadow: 0 0 0 2px #d1ad7220;
}

.login-submit,
.login-submit:hover {
  border: 1px solid var(--atlas-action-border);
  border-radius: 6px;
  background: var(--atlas-action);
  box-shadow: inset 0 1px #e8c89318, 0 2px 4px #0004;
  color: var(--atlas-ink);
}

.login-submit:hover {
  background: var(--atlas-action-hover);
}

.login-error {
  border-color: var(--atlas-red);
  background: rgba(222, 139, 123, 0.08);
  color: #ffb0b6;
}

.login-secondary {
  border: 1px solid var(--atlas-line);
  border-radius: 6px;
  background: var(--atlas-panel-2);
  color: var(--atlas-cyan);
}

.login-secondary:hover {
  border-color: var(--atlas-line-strong);
  background: rgba(209, 173, 114, 0.06);
}

.login-hint {
  color: var(--atlas-muted);
}

.login-success {
  border-color: var(--atlas-green);
  background: rgba(143, 186, 151, 0.08);
  color: var(--atlas-green);
}

.login-status {
  border-color: var(--atlas-line-strong);
  background: rgba(209, 173, 114, 0.06);
  color: var(--atlas-muted);
}

.login-form button:disabled,
.login-secondary:disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Console shell and shared control styling. Business modules retain their own layout. */
#app {
  --sidebar-width: 232px;
  --topbar-height: 64px;
  --color-primary: var(--atlas-cyan);
  --color-accent: var(--atlas-orange);
  --color-success: var(--atlas-green);
  --color-warning: var(--atlas-orange);
  --color-danger: var(--atlas-red);
  --console-nav-bg: #eae1d2;
  --console-hover: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  --console-active: color-mix(in srgb, var(--color-primary) 13%, var(--color-surface));
  font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", sans-serif;
  font-size: 13px;
}
#app.dark, #app:has(.login-page) {
  --color-bg: var(--atlas-bg);
  --color-surface: var(--atlas-panel);
  --color-surface-soft: var(--atlas-panel-2);
  --color-text: var(--atlas-ink);
  --color-muted: var(--atlas-muted);
  --color-border: var(--atlas-line);
  --console-nav-bg: #211a15;
  --shadow-panel: 0 8px 24px #0003, inset 0 1px #e8c89308;
  --shadow-soft: inset 0 1px #e8c89310, 0 3px 8px #0003;
  color: var(--color-text);
  color-scheme: dark;
}
#app:not(.dark):has(.app-shell) {
  --color-bg: #f0e9de;
  --color-surface: #f8f1e7;
  --color-surface-soft: #e9dfd0;
  --color-text: #3b3026;
  --color-muted: #746451;
  --color-border: #b6a087;
  --color-primary: #89633b;
  --color-accent: #9b6b40;
  --color-success: #447557;
  --color-warning: #99702e;
  --color-danger: #a24b3c;
  --atlas-ink: #3b3026;
  --atlas-muted: #746451;
  --atlas-faint: #8b7966;
  --atlas-line: #b6a087;
  --atlas-line-strong: #89633b;
  --atlas-panel: #f8f1e7;
  --atlas-panel-2: #e9dfd0;
  --atlas-input: #f0e8dc;
  --atlas-cyan: #89633b;
  --atlas-orange: #9b6b40;
  --atlas-green: #447557;
  --atlas-red: #a24b3c;
  --atlas-series-warm: #986f36;
  --atlas-series-cool: #4f7972;
}
#app:not(.dark) :is(.account-avatar, .tab-button.active, .tag, .sort-button.active) { color: color-mix(in srgb, var(--color-primary) 45%, #452f1f); }
#app:not(.dark) .button.danger, #app:not(.dark) .badge.failed { color: color-mix(in srgb, var(--color-danger) 55%, #701923); }
#app:not(.dark) .badge.completed, #app:not(.dark) .tag.completed { color: color-mix(in srgb, var(--color-success) 30%, #12583a); }
#app:not(.dark) .badge.running { color: color-mix(in srgb, var(--color-warning) 30%, #714200); }
#app:not(.dark) .badge.disconnected { color: #80621c; }
#app :where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
#app :where(.app-shell, .main, .content, .analysis-section, .section-head, .page-title, .panel, .topbar, .topbar-left) { min-width: 0; }
#app .app-shell { background: var(--color-bg); }
#app.dark .app-shell { background: linear-gradient(#1513124a, #15131270), url("/_frontend/20261028-audit-overview-v6/assets/campaign-room.jpg") right center / cover fixed, var(--color-bg); }
#app .sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  display: flex; flex-direction: column;
  width: var(--sidebar-width); height: 100dvh; padding: 20px 12px 14px; overflow-y: auto;
  border-right: 1px solid var(--color-border); border-bottom: 0;
  background: var(--console-nav-bg); box-shadow: 8px 0 28px #0003;
}
#app.dark .sidebar { background: linear-gradient(#211a150a, #211a151a), url("/_frontend/20261028-audit-overview-v6/assets/campaign-sidebar.jpg") center bottom / 100% 100% no-repeat, var(--console-nav-bg); }
#app .brand { flex-shrink: 0; gap: 10px; margin: 0 2px 24px; border: 0; border-radius: 0; background: transparent; padding: 0 8px; }
#app .brand > div:last-child { min-width: 0; }
#app .brand-mark { width: 32px; height: 32px; flex-basis: 32px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: none; }
#app .brand-name { color: var(--color-text); font-family: var(--atlas-heading); font-size: 17px; line-height: 1.5; letter-spacing: .02em; }
#app .brand-subtitle { margin-top: 2px; color: var(--color-muted); font-size: 10px; line-height: 1.5; }
#app .nav-section-label { display: block; margin: 20px 10px 8px; color: var(--color-muted); font-size: 10px; font-weight: 500; letter-spacing: .09em; }
#app .nav, #app .workspace-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
#app .nav-button, #app .workspace-nav-button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 11px;
  border: 2px solid transparent; border-radius: 7px; background: transparent; color: var(--color-muted);
  font: inherit; text-align: left; box-shadow: none; transform: none; transition: background-color .15s, color .15s, border-color .15s;
}
#app .nav-button:hover, #app .workspace-nav-button:hover { background: var(--color-surface-soft); color: var(--color-text); box-shadow: none; transform: none; }
#app .nav-button.active, #app .workspace-nav-button.active { border-color: var(--atlas-action-border); background: var(--atlas-action); color: #f5e5c9; font-weight: 600; box-shadow: inset 0 1px #e8c89318, 0 2px 7px #0004; }
#app .nav-icon { display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center; color: inherit; }
#app .nav-icon svg, #app .shell-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; }
#app .workspace-nav { margin-top: 12px; }
#app .sidebar-footer-label { margin-left: auto; font-size: 9px; letter-spacing: .06em; }
#app .status-dot.status-unknown { background: var(--color-muted); }
#app .sidebar-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding: 12px 10px; border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); border-radius: 7px; background: #151312a6; color: #d0bea4; font-size: 11px; }
#app .main { width: 100%; min-height: 100dvh; padding-left: var(--sidebar-width); }
#app .restricted-home-shell .main { padding-left: 0; }
#app .restricted-home-shell .topbar { justify-content: flex-end; margin: 0; padding: 16px 24px; background: transparent; border: 0; box-shadow: none; }
#app .restricted-home-shell .content { display: none; }
#app .topbar { min-height: var(--topbar-height); padding: 12px 28px; gap: 12px; border-color: var(--color-border); background: var(--color-surface); backdrop-filter: none; box-shadow: var(--shadow-soft); z-index: 20; }
#app .topbar-left { gap: 10px; color: var(--color-muted); font-size: 12px; }
#app .workspace-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--color-muted); font-size: 12px; }
#app .workspace-breadcrumb strong { color: var(--color-text); font-weight: 500; }
#app .workspace-breadcrumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
#app .topbar-actions { gap: 12px; flex-shrink: 0; }
#app .status-dot { flex: 0 0 6px; width: 6px; height: 6px; background: var(--color-success); box-shadow: none; }
#app .account-menu { position: relative; }
#app .account-menu > summary { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); box-shadow: var(--shadow-soft); color: var(--color-text); cursor: pointer; list-style: none; }
#app .account-menu > summary::-webkit-details-marker { display: none; }
#app .account-menu > summary:hover { background: var(--color-surface-soft); }
#app .account-menu-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: grid; gap: 4px; min-width: 210px; padding: 8px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); box-shadow: 0 16px 40px #0004; }
#app .account-menu-popover .button { justify-content: flex-start; min-height: 38px; border-color: transparent; text-align: left; }
#app .account-menu-popover > .muted { padding: 8px; font-size: 11px; }
#app .account-menu-heading { display: grid; gap: 4px; margin-bottom: 4px; padding: 8px; border-bottom: 1px solid var(--color-border); }
#app .account-menu-heading span { color: var(--color-muted); font-size: 11px; }
#app .account-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--console-active); color: var(--color-primary); font-size: 11px; }
#app .account-chevron { color: var(--color-muted); }
#app .button.mobile-nav-toggle, #app .button.sidebar-close, #app .sidebar-backdrop { display: none; }

#app .content, #app .content.game-content { padding: 26px 28px 36px; }
#app .workspace-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
#app .workspace-page-header h1 { margin: 4px 0 8px; color: var(--color-text); font-family: var(--atlas-heading); font-size: 26px; line-height: 1.35; letter-spacing: .02em; font-weight: 650; }
#app .workspace-page-header p { margin: 0; color: var(--color-muted); font-size: 12px; line-height: 1.7; }
#app .workspace-page-header .project-create-form { flex: 1 1 100%; }
#app .workspace-eyebrow { color: var(--color-muted); font-size: 11px; letter-spacing: .08em; }
#app .workspace-page-kicker { color: var(--color-muted); font-size: 11px; margin-bottom: 8px; }
#app .workspace-page-actions { display: flex; align-items: center; gap: 12px; }
#app .content.game-content.overview-content { padding-top: 14px; }
#app .map-detail-shell .topbar { min-height: 48px; padding-block: 7px; }
#app .map-detail-shell .sidebar { padding: 20px 18px 14px; }
#app .map-sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
#app .map-back-button { min-height: 32px; padding: 6px 10px; font-size: 11px; border-radius: 6px; }
#app .map-sidebar-project { min-width: 0; }
#app .map-sidebar-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-soft); }
#app .map-sidebar-placeholder { position: absolute; inset: 0; display: grid; place-content: center; color: var(--color-muted); opacity: .3; }
#app .map-sidebar-placeholder svg { width: 38px; height: 38px; }
#app .map-sidebar-cover [data-map-cover] { position: absolute; inset: 0; display: grid; place-content: stretch; }
#app .map-sidebar-cover .map-cover-preview { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; object-fit: cover; }
#app .map-sidebar-project h1 { margin: 17px 0 10px; font-family: var(--atlas-heading); font-size: 21px; line-height: 1.35; overflow-wrap: anywhere; }
#app .map-sidebar-id { display: block; margin-bottom: 22px; color: var(--color-muted); font-size: 11px; }
#app .map-sidebar-id strong { color: var(--color-text); font-weight: 400; margin-left: 5px; }
#app .map-environments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: -6px 0 22px; }
#app .map-environment-button { min-width: 0; min-height: 34px; padding: 7px 3px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-muted); font: inherit; font-size: 11px; line-height: 1.4; cursor: pointer; }
#app .map-environment-button:hover:not(:disabled), #app .map-environment-button:focus-visible { color: var(--color-text); background: var(--color-surface-soft); }
#app .map-environment-button.active { color: #f5e5c9; border-color: var(--atlas-action-border); background: var(--atlas-action); }
#app .map-environment-button:disabled { opacity: .45; cursor: default; }
#app .map-detail-shell .workspace-nav { gap: 9px; margin-top: 0; }
#app .map-detail-shell .workspace-nav-button { min-height: 44px; border-radius: 6px; border-color: var(--color-border); background: var(--color-surface); }
#app .map-detail-shell .workspace-nav-button.active { color: #f5e5c9; border-color: var(--atlas-action-border); background: var(--atlas-action); }
#app .map-detail-shell .workspace-nav-button:hover:not(.active) { border-color: var(--color-border); background: var(--color-surface-soft); }
#app .map-catalog-shell { min-height: 100dvh; }
#app .map-catalog-shell .main { display: flow-root; max-width: none; margin: 0; padding-left: var(--sidebar-width); }
#app .map-catalog-shell .topbar { margin: 24px 32px 0; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: 8px; min-height: 66px; }
#app .map-catalog-shell .content.game-content { min-height: 0; padding: 26px 32px 36px; }
#app .map-catalog-shell .map-catalog { max-width: none; margin: 0; }
/* Keep the cover tiles compact while the page header spans the workspace. */
#app .map-catalog-shell .map-catalog-grid { max-width: 1114px; }
#app .map-center-brand { display: grid; gap: 4px; }
#app .map-center-brand strong { color: var(--color-text); font-family: var(--atlas-heading); font-size: 20px; letter-spacing: .02em; }
@media (max-width: 1279px) and (min-width: 1025px) {
  #app .map-catalog-shell .map-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  #app .map-catalog-shell .main { padding-left: 0; }
  #app .map-catalog-shell .topbar { margin: 20px 20px 0; }
  #app .map-catalog-shell .content.game-content { padding: 24px 20px 32px; }
}
@media (max-width: 620px) {
  #app .map-catalog-shell .topbar { margin: 12px 14px 0; padding: 10px; gap: 6px; }
  #app .map-catalog-shell .content.game-content { padding: 20px 14px 28px; }
  #app .map-center-brand strong { font-size: 14px; }
  #app .map-catalog-shell .topbar-actions { gap: 5px; }
  #app .map-catalog-shell .topbar-actions > .button.icon { display: none; }
  #app .map-detail-shell .topbar { min-height: 54px; padding-inline: 12px; }
  #app :is(.map-detail-shell, .map-catalog-shell) .account-name { display: none; }
  #app .map-detail-shell .workspace-breadcrumb > span { display: none; }
}
#app .map-configuration { display: grid; gap: 24px; }
#app .map-configuration-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
#app .map-configuration-summary h2 { margin: 0 0 7px; font-size: 16px; }
#app .map-configuration-summary p { margin: 0; color: var(--color-muted); line-height: 1.7; }
#app .map-configuration-summary code { max-width: 100%; overflow-wrap: anywhere; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-muted); font-size: 12px; }
#app .map-configuration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
#app .map-configuration-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 22px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); }
#app .map-configuration-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 8px; background: var(--console-active); color: var(--color-primary); }
#app .map-configuration-icon svg { width: 19px; height: 19px; }
#app .map-configuration-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
#app .map-configuration-card p { margin: 0 0 24px; color: var(--color-muted); font-size: 12px; line-height: 1.8; }
#app .map-configuration-card > .button { width: 100%; justify-content: space-between; margin-top: auto; }
#app [data-player-configuration-panel] { scroll-margin-top: 84px; }
#app .page-title { align-items: center; border: 0; padding: 0; margin-bottom: 24px; }
#app .page-title h1 { color: var(--color-text); font-family: var(--atlas-heading); font-size: 26px; font-weight: 650; letter-spacing: .02em; }
#app .page-title p, #app .muted { color: var(--color-muted); }
#app :where(.panel, .metric-card, .analysis-section, .game-toolbar, .project-bar, .game-compact-bar, .table-wrap, .planner-card, .save-modal, .quick-edit-modal, .drawer, .toast-item, .chart-tooltip) { border-color: var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-panel); }
#app :where(.panel, .metric-card)::before, #app :where(.panel, .metric-card)::after { content: none; }
#app .analysis-section { padding: 20px; }
#app .section-head { flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 20px; border-bottom: 0; padding-bottom: 0; }
#app .section-head h2 { color: var(--color-text); font-size: 15px; font-weight: 600; }
#app .section-head h2 + .muted { display: inline-block; margin-top: 5px; font-size: 11px; }
#app .section-head > .row-actions { flex-wrap: wrap; gap: 6px; }
#app .metric-card { min-height: 116px; padding: 20px; }
#app .metric-label, #app .metric-foot { color: var(--color-muted); font: inherit; font-size: 12px; }
#app .metric-value { color: var(--color-text); font-size: 30px; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
#app :where(.project-pill, .account-project-history-row, .planner-edit-field, .field-filter-panel) { border-color: var(--color-border); background: var(--color-surface-soft); box-shadow: none; }
#app :where(.project-pill):hover,
#app :where(.project-pill).active { border-color: var(--atlas-line-strong); background: var(--console-hover); color: var(--color-primary); box-shadow: none; transform: none; }

#app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#app select, #app textarea { min-width: 0; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); box-shadow: none; }
#app.dark input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#app.dark select, #app.dark textarea { background: var(--atlas-input); }
#app input::placeholder, #app textarea::placeholder { color: var(--atlas-faint); }
#app input:focus, #app select:focus, #app textarea:focus { border-color: var(--atlas-line-strong); }
#app input[type="checkbox"], #app input[type="radio"] { accent-color: var(--color-primary); }
#app .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 7px 12px; border: 2px solid var(--color-border); border-radius: 6px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-soft); font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.4; white-space: nowrap; transition: background-color .15s, border-color .15s, transform .16s ease, box-shadow .16s ease; }
#app .button:hover { border-color: color-mix(in srgb, var(--atlas-line-strong) 40%, var(--color-border)); background: var(--color-surface-soft); color: var(--color-text); box-shadow: none; transform: none; }
#app .button.primary { border-color: var(--atlas-action-border); background: var(--atlas-action); color: var(--atlas-action-ink); font-weight: 600; }
#app .button.primary:hover { background: var(--atlas-action-hover); filter: none; }
#app .button.success { border-color: var(--color-success); background: var(--color-success); color: #0b2316; }
#app .button.danger { border-color: color-mix(in srgb, var(--color-danger) 24%, var(--color-border)); background: transparent; color: var(--color-danger); }
#app .button.danger:hover { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface)); }
#app .button:disabled { cursor: not-allowed; filter: none; opacity: .45; }
#app .button.icon { width: 34px; padding: 6px; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  #app .button:not(:disabled):hover { transform: scale(1.04); box-shadow: 0 3px 12px #0005; }
}
#app .button:not(:disabled):active { transform: scale(.95); box-shadow: inset 0 2px 5px #0005; }
#app .tabs { border-color: var(--color-border); }
#app .tab-button { color: var(--color-muted); font-family: inherit; font-size: 12px; }
#app .tab-button.active, #app .tab-button:hover { border-bottom-color: var(--color-primary); background: var(--console-hover); color: var(--color-primary); }
#app .tag, #app .badge, #app .account-project-chip { border: 1px solid var(--color-border); border-radius: 5px; background: transparent; font-family: inherit; font-size: 11px; line-height: 1.5; }
#app .tag, #app .account-project-chip { color: var(--color-primary); }
#app .badge.completed, #app .tag.completed { border-color: color-mix(in srgb, var(--color-success) 24%, transparent); background: color-mix(in srgb, var(--color-success) 7%, transparent); color: var(--color-success); }
#app .badge.running { border-color: color-mix(in srgb, var(--color-warning) 24%, transparent); background: color-mix(in srgb, var(--color-warning) 7%, transparent); color: var(--color-warning); }
#app .badge.failed { border-color: color-mix(in srgb, var(--color-danger) 24%, transparent); background: color-mix(in srgb, var(--color-danger) 7%, transparent); color: var(--color-danger); }
#app .badge.disconnected { color: #e6c77d; }

/* Filters wrap at their owner; wide records scroll inside the table, never the page. */
#app .player-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: 14px 12px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); }
#app .player-filter label { display: grid; gap: 7px; min-width: 0; color: var(--color-muted); font-size: 11px; }
#app .player-filter-advanced { grid-column: 1 / -1; min-width: 0; }
#app .player-filter-advanced > summary { width: fit-content; padding: 4px 0; color: var(--color-muted); cursor: pointer; font-size: 11px; }
#app .player-filter-advanced-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
#app .player-filter input, #app .player-filter select { width: 100%; min-height: 36px; padding: 8px 10px; font-size: 12px; }
#app .player-filter .button { min-height: 36px; }
#app .player-result-count { color: var(--color-muted); font-size: 11px; }
#app .field-filter-panel { padding: 10px; border: 0; background: transparent; }
#app .field-filter-buttons { gap: 6px; }
#app .field-filter-button { border-radius: 5px; }
#app .bulk-toolbar { padding: 10px 0; border: 0; background: transparent; }
#app .bulk-toolbar > .muted { font-size: 11px; line-height: 1.6; }
#app .bulk-toolbar.active { padding: 12px; border: 1px solid var(--color-border); background: var(--console-hover); }
#app .player-pagination { gap: 10px; flex-wrap: wrap; padding: 12px 0; border: 0; background: transparent; }
#app .player-pagination .muted { font-size: 11px; }
#app .table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow: auto; overscroll-behavior-x: contain; }
#app table { background: var(--color-surface); font-size: 12px; }
#app th, #app td { border-color: var(--color-border); padding: 12px 14px; }
#app th { background: var(--color-surface-soft); color: var(--color-muted); font-family: inherit; font-size: 11px; font-weight: 500; white-space: nowrap; }
#app table tbody td { color: var(--color-text); }
#app tbody tr:hover { background: var(--console-hover); }
#app .player-table-wrap table { min-width: 900px; }
#app .player-table-wrap th { height: 40px; }
#app .player-table-wrap td { height: 52px; }
#app .player-table-wrap td code { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--atlas-mono); font-size: 11px; }
#app .player-table-wrap td:last-child { white-space: nowrap; }
#app .player-table-wrap .button { min-height: 29px; padding: 5px 9px; font-size: 11px; }
#app .player-table-wrap .link-button { font-weight: 600; color: var(--color-text); }
#app .player-table-wrap .link-button:hover { color: var(--color-primary); }
#app .sort-button { font-weight: 500; }

/* Existing editors and dialogs retain their editing contracts and readable states. */
#app .drawer-backdrop, #app .modal-backdrop { background: #0b0806bd; backdrop-filter: blur(2px); }
#app .drawer-head, #app .modal-head, #app .modal-tools { border-color: var(--color-border); background: var(--color-surface); }
#app .drawer-body, #app .drawer-body > section { grid-template-columns: minmax(0, 1fr); }
#app .drawer-body > * { min-width: 0; }
#app .modal-body { border-color: var(--color-border); background: var(--color-bg); }
#app .json-editor { border-color: var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-text); font-family: var(--atlas-mono); }
#app .notice { border-color: var(--color-primary); background: var(--console-hover); }
#app .login-error { border-color: var(--atlas-red); background: color-mix(in srgb, var(--atlas-red) 10%, var(--atlas-input)); color: #ffd7ce; }
#app .login-success { border-color: var(--atlas-green); background: color-mix(in srgb, var(--atlas-green) 8%, var(--atlas-input)); color: var(--atlas-green); }
#app .empty { border-color: var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-muted); font-family: inherit; font-size: 13px; }
#app .pressure-track { border-radius: 4px; background: var(--color-surface-soft); }
#app .chart-grid-line { stroke: var(--color-border); }
#app .chart-axis-label, #app .chart-labels text { fill: var(--color-muted); font-family: inherit; }
#app .chart-tooltip { color: var(--color-text); font-family: inherit; }
#app .chart-tooltip span { color: var(--color-text); }
#app .pie-legend-item, #app .dictionary-table code, #app .field-add-row td { border-color: var(--color-border); background: var(--color-surface-soft); color: var(--color-text); }

@media (max-width: 1200px) and (min-width: 1025px) {
  #app .topbar { padding-inline: 22px; }
  #app .content, #app .content.game-content { padding-inline: 22px; }
  #app .player-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 118px auto; }
}
@media (max-width: 1080px) {
  .login-page { grid-template-columns: minmax(0, 1fr); }
  .login-visual { min-height: 300px; }
}
/* This breakpoint matches the navigation media query in app.js. */
@media (max-width: 1024px) {
  #app .main { padding-left: 0; }
  #app .sidebar { z-index: 72; width: min(296px, calc(100vw - 44px)); transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility .18s; }
  #app .shell-navigation-open .sidebar { transform: translateX(0); visibility: visible; }
  #app .button.mobile-nav-toggle, #app .button.sidebar-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; padding: 8px; }
  #app .sidebar-close { margin-left: auto; }
  #app .sidebar-backdrop { position: fixed; inset: 0; z-index: 71; width: 100%; height: 100%; padding: 0; border: 0; background: #040910aa; cursor: default; }
  #app .shell-navigation-open .sidebar-backdrop { display: block; }
  body:has(.shell-navigation-open) { overflow: hidden; }
  #app .topbar { padding: 10px 20px; }
  #app .content, #app .content.game-content { padding: 24px 20px; }
}
@media (max-width: 640px) {
  #app.dark .app-shell { background-attachment: scroll; background-size: auto, auto 900px, auto; background-position: 0 0, right top, 0 0; background-repeat: no-repeat; }
  .login-visual { min-height: 230px; padding: 28px; }
  .login-visual-copy h2 { font-size: 42px; }
  .login-side { min-height: auto; padding: 18px; }
  .login-panel { padding: 24px; }
  #app .topbar { min-height: 60px; padding: 10px 14px; gap: 8px; }
  #app .topbar-left { flex: 1; gap: 8px; }
  #app .workspace-breadcrumb { font-size: 11px; gap: 5px; }
  #app .workspace-breadcrumb > span { max-width: 130px; }
  #app .topbar-actions { gap: 6px; }
  #app .account-menu > summary { max-width: 114px; overflow: hidden; white-space: nowrap; }
  #app .content, #app .content.game-content { padding: 20px 14px 28px; }
  #app .workspace-page-header { margin-bottom: 18px; gap: 12px; }
  #app .workspace-page-header h1, #app .page-title h1 { font-size: 23px; }
  #app .analysis-section, #app .panel { padding: 14px; }
  #app .section-head { align-items: flex-start; gap: 12px; }
  #app .section-head > .row-actions { width: 100%; justify-content: flex-start; }
  #app .button { min-height: 40px; }
  #app .button.icon { width: 36px; min-height: 36px; }
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  #app select, #app textarea, .login-form .field input { font-size: 16px; }
  #app .player-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 12px; }
  #app .player-filter > .filter-field-search { grid-column: 1 / -1; }
  #app .player-filter label { font-size: 12px; }
  #app .player-filter-advanced-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .player-filter input, #app .player-filter select, #app .player-filter .button { min-height: 42px; }
  #app .field-filter-panel { padding: 4px 0; }
  #app .field-filter-buttons { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  #app .field-filter-buttons > * { flex-shrink: 0; }
  #app .field-key-menu { max-width: 100%; }
  #app .bulk-toolbar { align-items: stretch; gap: 10px; }
  #app .bulk-actions { gap: 6px; }
  #app .bulk-actions .button { flex: 1; padding-inline: 8px; }
  #app .player-pagination { padding-block: 8px; }
  #app .player-pagination form { min-width: 0; flex-wrap: wrap; }
  #app .player-pagination select { max-width: 100%; }
  #app .player-table-wrap .button { min-height: 36px; }
  #app .table-wrap { border-radius: 6px; }
  #app .table-wrap th, #app .table-wrap td { padding-inline: 12px; }
  #app .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .metric-card { padding: 14px; min-height: 100px; }
  #app .metric-value { font-size: 24px; }
  #app .drawer { top: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  #app .modal-head, #app .drawer-head { flex-wrap: wrap; }
  #app .drawer-head { position: relative; padding-right: 54px; }
  #app .drawer-head > .button.icon { position: absolute; top: 12px; right: 12px; }
  #app .save-modal { inset: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { animation-duration: .01ms; transition-duration: .01ms; scroll-behavior: auto; }
}