/* MonvexPay dark app shell — cabinet, provider, admin */
:root {
  --paper: #030712;
  --paper-2: #050a15;
  --ink: #f0f6ff;
  --muted: #8ba3c7;
  --line: rgba(0, 180, 255, 0.16);
  --navy: #007bff;
  --sea: #00f2ff;
  --moss: #00e5a0;
  --moss-soft: rgba(0, 229, 160, 0.12);
  --sand: #3a5068;
  --warn: #ffb347;
  --warn-soft: rgba(255, 179, 71, 0.12);
  --danger: #ff5c7a;
  --white: rgba(8, 16, 32, 0.92);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  --glow: 0 0 28px rgba(0, 180, 255, 0.22);
  --display: "Sora", system-ui, sans-serif;
  --body: "Sora", system-ui, sans-serif;
}

body.adm,
body.cab,
body.prov {
  color: var(--ink) !important;
  background:
    radial-gradient(900px 420px at 0% -5%, rgba(0, 123, 255, 0.18), transparent 58%),
    radial-gradient(700px 360px at 100% 100%, rgba(0, 242, 255, 0.08), transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%) !important;
}

.brand {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--ink) !important;
}

.brand em,
.brand span.brand-accent {
  font-style: normal !important;
  color: var(--sea) !important;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}

.brand-lockup img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 10px rgba(0, 242, 255, 0.25));
}

.brand-text {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-text em {
  font-style: normal;
  color: var(--sea);
}

.btn-primary {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 114, 255, 0.35) !important;
}

.btn-sea {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 114, 255, 0.28) !important;
}

.btn-ghost {
  background: rgba(8, 16, 32, 0.55) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.btn-danger {
  background: rgba(8, 16, 32, 0.55) !important;
  border-color: rgba(255, 92, 122, 0.35) !important;
  color: var(--danger) !important;
}

.sidebar,
.topbar,
.bottom-nav,
.login-card,
.panel,
.metric,
.modal,
.modal-card,
.row-menu-pop {
  background: var(--white) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

.sidebar {
  backdrop-filter: blur(14px);
}

.topbar {
  backdrop-filter: blur(14px);
}

.side-nav button .ico {
  background: rgba(0, 123, 255, 0.1) !important;
  color: var(--sea) !important;
}

.side-nav button.is-active {
  background: rgba(0, 123, 255, 0.14) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.18);
}

.side-nav button.is-active .ico {
  background: rgba(0, 242, 255, 0.18) !important;
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.2);
}

.side-nav button:hover {
  background: rgba(0, 123, 255, 0.08) !important;
  color: var(--ink) !important;
}

.metric .value,
.empty strong,
.topbar h1,
.panel-title,
.login-card h1 {
  color: var(--ink) !important;
  font-family: var(--display) !important;
}

.form input,
.form select,
.form textarea,
.field input,
.field select,
.field textarea,
.toolbar select {
  background: rgba(0, 8, 20, 0.55) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(0, 242, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.15) !important;
  outline: none;
}

table.data tr:hover td {
  background: rgba(0, 123, 255, 0.06) !important;
}

.chat-thread {
  background: rgba(0, 8, 20, 0.45) !important;
}

.chat-bubble.payer {
  background: rgba(0, 123, 255, 0.12) !important;
}

.chat-bubble.provider {
  background: rgba(0, 242, 255, 0.1) !important;
}

.badge.off {
  background: rgba(139, 163, 199, 0.12) !important;
  color: var(--muted) !important;
}

.bottom-nav {
  background: rgba(5, 10, 21, 0.96) !important;
}

.bottom-nav button.is-active {
  color: var(--sea) !important;
}

.code-block {
  background: rgba(0, 8, 20, 0.55) !important;
  color: var(--ink) !important;
}

.login-card {
  box-shadow: var(--shadow), var(--glow) !important;
}

.login-card a {
  color: var(--sea) !important;
}

@media (max-width: 860px) {
  body.cab-side-open::before,
  body.prov-side-open::before,
  body.adm-side-open::before {
    background: rgba(0, 5, 15, 0.72) !important;
  }
}

@media (max-width: 860px) {
  body.cab table.data tr,
  body.prov table.data tr {
    background: rgba(8, 16, 32, 0.78) !important;
    border-color: rgba(0, 180, 255, 0.14) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32) !important;
  }

  body.cab table.data td::before,
  body.prov table.data td::before {
    color: var(--sea) !important;
    opacity: 0.72;
  }

  body.cab .metric,
  body.prov .metric {
    box-shadow: none !important;
  }
}

.modal-backdrop {
  background: rgba(0, 5, 15, 0.75) !important;
}

.hint a,
.login-card a,
.meta a {
  color: var(--sea) !important;
}

.row-menu-item:hover {
  background: rgba(0, 123, 255, 0.1) !important;
}

.ex-history-table th,
.ex-history-table td {
  border-color: var(--line) !important;
}

.mp-row {
  border-color: var(--line) !important;
  background: rgba(0, 8, 20, 0.35) !important;
}

/* Ecosystem switcher + home profit cards — единый стиль Monvex */
.eco-label {
  color: var(--sea) !important;
}

.eco-btn {
  background: rgba(0, 123, 255, 0.12) !important;
  border-color: rgba(0, 180, 255, 0.28) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.08);
}

.eco-btn .eco-ico {
  background: rgba(0, 123, 255, 0.18) !important;
  color: var(--sea) !important;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.12);
}

.eco-btn:hover {
  transform: translateY(-1px);
  background: rgba(0, 123, 255, 0.18) !important;
  border-color: rgba(0, 242, 255, 0.42) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 22px rgba(0, 180, 255, 0.16) !important;
}

.eco-btn.is-active {
  background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%) !important;
  border-color: rgba(0, 198, 255, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 114, 255, 0.35) !important;
}

.eco-btn.is-active .eco-ico {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  box-shadow: none;
}

.eco-profit-card {
  background: var(--white) !important;
  border-color: rgba(0, 180, 255, 0.28) !important;
  box-shadow: var(--shadow) !important;
}

.eco-profit-card:hover {
  border-color: rgba(0, 242, 255, 0.45) !important;
  box-shadow: var(--shadow), 0 0 24px rgba(0, 180, 255, 0.12) !important;
}

.eco-profit-label {
  color: var(--sea) !important;
}

.eco-profit-value {
  color: var(--ink) !important;
}

.eco-profit-meta {
  color: var(--muted) !important;
}

.eco-profit-ico {
  background: rgba(0, 123, 255, 0.18) !important;
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.14);
}

.eco-total-panel {
  background: var(--white) !important;
  border-color: rgba(0, 180, 255, 0.28) !important;
}

.eco-total-value {
  color: var(--sea) !important;
}

.side-nav button {
  color: var(--ink) !important;
  opacity: 0.82;
}

.side-nav button.is-active {
  opacity: 1;
}

.side-nav button:hover {
  opacity: 1;
  color: var(--ink) !important;
}

/* Tariff chips — blend with dark shell, no bright pills */
body.adm .rate-chip {
  background: rgba(0, 180, 255, 0.05) !important;
  border-color: rgba(0, 180, 255, 0.1) !important;
  color: #9cb4d4 !important;
  box-shadow: none !important;
}
body.adm .rate-chip-more {
  background: transparent !important;
  border-color: rgba(0, 180, 255, 0.08) !important;
  color: var(--muted) !important;
}
body.adm .rate-inline {
  color: #9cb4d4 !important;
  font-weight: 600;
}
body.adm td[data-label="Тариф"] .rate-chips {
  opacity: 0.92;
}
body.adm .methods-modal-add-summary {
  background: rgba(0, 180, 255, 0.04) !important;
  border-color: rgba(0, 180, 255, 0.1) !important;
  color: var(--muted) !important;
}