:root {
  --brand-night: #07111f;
  --brand-navy: #0b192b;
  --brand-surface-raised: #0d1c31;
  --brand-blue: #1677ff;
  --brand-blue-strong: #0f63d8;
  --brand-blue-hover: #0b57bd;
  --brand-cyan: #22c8d6;
  --brand-sky: #a9e8ef;
  --brand-mist: #edf5f7;
  --brand-text: #e8f1ff;
  --brand-muted: #9aacc3;
  --brand-border: #1c3553;
  --brand-warning: #f0a128;
}

html {
  accent-color: var(--brand-blue);
  scrollbar-color: #7389a3 #dfe9ec;
  scrollbar-width: thin;
}

body {
  background: var(--brand-mist);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-rendering: optimizeLegibility;
}

::selection {
  color: #ffffff;
  background: var(--brand-blue);
}

button,
.link-button,
input,
select,
textarea {
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

button:hover,
.link-button:hover,
.login-brand-mark:hover {
  transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.data-table-wrap:focus-visible,
.monthly-table-scroll:focus-visible {
  outline: 3px solid rgba(22, 119, 255, 0.38);
  outline-offset: 2px;
}

button:disabled,
.link-button[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.stats strong,
.metric-card strong,
.data-table,
.monthly-performance-table,
.trend-row strong,
.settlement-money-row dd {
  font-variant-numeric: tabular-nums;
}

.login {
  background:
    radial-gradient(circle at 16% 12%, rgba(34, 200, 214, 0.13), transparent 30%),
    var(--brand-night);
}

.login-shell {
  border-color: rgba(169, 232, 239, 0.48);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
}

.login-brand {
  background: linear-gradient(145deg, #0b2947, var(--brand-night));
  background-color: #0b2947;
}

.login-brand h1 {
  color: #ffffff !important;
}

.login-brand > div > p {
  color: #b7c9d8 !important;
}

.login-flow-label {
  color: var(--brand-sky) !important;
}

.login-flow-line i,
.login-brand-status i,
.desktop-system-state.is-online i {
  background: var(--brand-cyan) !important;
}

.login-brand-mark,
.login-brand > div:not(.login-brand-status):not(.login-brand-visual),
.login-card > * {
  animation: none;
}

.login-card input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.13);
  transform: none;
}

.login-card #loginButton {
  color: #ffffff;
  background: var(--brand-blue-strong);
  box-shadow: 0 10px 24px rgba(22, 119, 255, 0.22);
}

.login-card #loginButton:hover {
  background: var(--brand-blue-hover);
  box-shadow: 0 12px 28px rgba(22, 119, 255, 0.28);
  transform: none;
}

.login-card #loginButton:active {
  background: #084a9f;
  box-shadow: 0 5px 12px rgba(22, 119, 255, 0.2);
}

.desktop-sidebar {
  background: var(--brand-night) !important;
}

.desktop-nav button.active,
.desktop-nav button.active:not(.secondary):not(.danger),
#dashboardView .desktop-sidebar .desktop-nav button.active,
#dashboardView .desktop-sidebar .desktop-nav button.active:not(.secondary):not(.danger) {
  color: #ffffff !important;
  background: #102a47 !important;
}

.desktop-nav button.active::after {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--brand-cyan) !important;
  box-shadow: 0 0 10px rgba(34, 200, 214, 0.34);
}

.desktop-nav button[aria-current="page"] {
  font-weight: 750;
}

.stats article {
  border-top-width: 1px !important;
  border-top-color: inherit;
}

.topbar {
  border-bottom-color: #18304d !important;
}

@media (min-width: 1100px) {
  html {
    scrollbar-color: #405773 var(--brand-night);
  }

  body.dashboard-active,
  .dashboard:not(.hidden) {
    background: var(--brand-night);
  }

  .dashboard > .stats article {
    border-color: var(--brand-border);
    background: var(--brand-surface-raised);
    box-shadow: none !important;
  }

  .dashboard > .panel {
    border-color: var(--brand-border);
    background: var(--brand-navy);
    box-shadow: none;
  }

  .stats span,
  .metric-card span,
  .metric-card small,
  .panel-head .muted,
  .dashboard .muted,
  .dashboard .hint {
    color: var(--brand-muted);
  }

  .stats strong,
  .metric-card strong,
  .panel h2,
  .section-title,
  .dashboard label,
  .dashboard strong {
    color: var(--brand-text);
  }

  /* Keep the location editor inside the desktop command-center palette.
     Its light fallback surface otherwise makes the inherited light text
     nearly unreadable. */
  .store-location-editor {
    border-color: var(--brand-border);
    color: var(--brand-text);
    background: var(--brand-surface-raised);
  }

  .store-location-editor .store-location-help {
    color: var(--brand-muted);
  }

  .store-location-editor .location-status.ready {
    color: #83e3bd;
  }

  .store-location-editor .location-status.missing {
    color: #ffc778;
  }

  /* This account editor intentionally remains a light utility surface inside
     the dark user workspace; keep its form controls readable. */
  .balance-adjustment,
  .balance-adjustment label {
    color: #21313a;
  }

  .balance-adjustment input {
    border-color: #d9e2e8;
    color: #111827;
    background: #ffffff;
  }

  .dashboard input::placeholder,
  .dashboard textarea::placeholder {
    color: #879bb6;
    opacity: 1;
  }

  .topbar .link-button.secondary,
  .topbar button.secondary,
  .dashboard button.secondary,
  .dashboard .link-button.secondary {
    border-color: #294767;
    color: #d6e5f7;
    background: #10233a;
  }

  .topbar .link-button.secondary:hover,
  .topbar button.secondary:hover,
  .dashboard button.secondary:hover,
  .dashboard .link-button.secondary:hover {
    border-color: #3e638c;
    color: #ffffff;
    background: #173454;
  }

  .dashboard button:not(.secondary):not(.danger),
  .dashboard .link-button:not(.secondary) {
    background: var(--brand-blue-strong);
  }

  .dashboard button:not(.secondary):not(.danger):hover,
  .dashboard .link-button:not(.secondary):hover {
    background: var(--brand-blue-hover);
  }
}

@media (max-width: 1099px) {
  body.dashboard-active {
    background: var(--brand-mist);
  }

  .dashboard > .topbar,
  .admin-module-nav,
  .dashboard > .panel,
  .dashboard > .stats article {
    background: #ffffff;
  }

  .dashboard > .stats article {
    border-color: #d9e5ea;
    box-shadow: 0 6px 18px rgba(7, 27, 49, 0.06);
  }

  .admin-module-nav button.active,
  .admin-module-nav button[aria-current="page"] {
    color: #0f63d8;
    background: #eaf3ff;
  }
}

@media (max-width: 760px) {
  .website-return {
    display: none;
  }
}