* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #070a11;
  color: #f5f7ff;
  font-family: Inter, Segoe UI, Arial, sans-serif;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: #0b0e17;
  border-right: 1px solid #1b2436;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo b {
  display: block;
  font-size: 18px;
}

.logo span {
  display: block;
  color: #66738c;
  font-size: 13px;
  margin-top: 4px;
}

.logo-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #246bff, #00d1ff);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav {
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: transparent;
  color: #74819a;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

.nav.active {
  background: #11234a;
  color: #58a5ff;
  outline: 1px solid #1c4388;
}

.sound-box {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 18px;
  padding: 16px;
}

.sound-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.sound-state {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 12px;
}

.sound-state.on {
  background: #0d2a18;
  color: #35e88e;
  border: 1px solid #174d2c;
}

.sound-state.off {
  background: #2a1520;
  color: #ff7f9a;
  border: 1px solid #623044;
}

.sound-volume {
  margin-top: 12px;
}

.status-card {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d2a18;
  border: 1px solid #174d2c;
  color: #47e58b;
  padding: 14px;
  border-radius: 14px;
}

.status-card span {
  display: block;
  color: #668774;
  margin-top: 5px;
  font-size: 13px;
}

.dot {
  width: 9px;
  height: 9px;
  background: #17e782;
  border-radius: 50%;
}

.main {
  margin-left: 260px;
  padding: 30px;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  gap: 20px;
}

.top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

h1 {
  margin: 0 0 8px;
  font-size: 30px;
}

h2 {
  margin: 0 0 8px;
  font-size: 19px;
}

p {
  margin: 0;
  color: #7f8aa3;
}

.global-range-card,
.blacklist-card,
.panel-card,
.account-card,
.mini-account,
.empty-box,
.stat-card {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
}

.global-range-card {
  padding: 20px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.range-row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.range-row.compact {
  min-width: 460px;
}

.range-row.mini {
  margin-top: 18px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #8390ab;
  font-size: 13px;
  flex: 1;
}

input {
  background: #070d1a;
  border: 1px solid #24334f;
  color: #f4f7ff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}

input[type="range"] {
  padding: 0;
}

input:focus {
  border-color: #2d74ff;
}

.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  white-space: nowrap;
}

.btn.full {
  width: 100%;
  margin-top: 8px;
}

.btn.primary {
  background: #2268ff;
}

.btn.ghost {
  background: #121a2b;
  border: 1px solid #253552;
  color: #b8c8e8;
}

.btn.danger {
  background: #2a0f18;
  border: 1px solid #702638;
  color: #ff6f88;
}

.btn.warning {
  background: #2b210d;
  border: 1px solid #76561d;
  color: #ffd36a;
}

.btn.success {
  background: #0d7f49;
  border: 1px solid #12b66a;
  color: #eafff4;
}

.btn.tiny {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
  font-size: 18px;
  flex: 0 0 auto;
}

.account-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.mini-account {
  padding: 18px;
}

.mini-account.active {
  border-color: #1d8f59;
}

.mini-account.paused {
  border-color: #704055;
}

.mini-top,
.card-head,
.section-head,
.payment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mini-top h3,
.card-head h3,
.payment-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.mini-range {
  margin: 18px 0;
  font-weight: 900;
  color: #d7e5ff;
  font-size: 20px;
}

.mini-actions {
  display: flex;
  justify-content: flex-end;
}

.state-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: #132037;
  color: #b8c8e8;
  font-size: 12px;
  font-weight: 900;
}

.state-pill.active {
  background: #0d2a18;
  color: #35e88e;
}

.state-pill.paused {
  background: #2a1520;
  color: #ff7f9a;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.5fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.panel-card {
  padding: 20px;
  min-height: 360px;
}

.badge {
  background: #132037;
  color: #8ca6d4;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
}

.active-payments {
  margin-top: 18px;
}

.empty-active,
.empty-box {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #68758c;
  padding: 24px;
}

.empty-active b {
  color: #d7e5ff;
  display: block;
  margin-bottom: 8px;
}

.empty-big {
  font-size: 44px;
  margin-bottom: 12px;
}

.payment-card {
  background: #0b1222;
  border: 1px solid #254674;
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 14px;
}

.payment-card.new-flash {
  animation: flashBorder 1.2s ease-out;
}

@keyframes flashBorder {
  0% {
    border-color: #2eff95;
    box-shadow: 0 0 0 0 rgba(46, 255, 149, 0.35);
  }
  100% {
    border-color: #254674;
    box-shadow: 0 0 0 18px rgba(46, 255, 149, 0);
  }
}


.payment-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

.qr-placeholder {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #111 12px, transparent 12px) 0 0 / 28px 28px,
    linear-gradient(#111 12px, transparent 12px) 0 0 / 28px 28px,
    #fff;
  color: transparent;
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding-top: 8px;
}

.payment-account {
  background: #122c58;
  color: #75b5ff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
}

.payment-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 14px;
}

.payment-meta div {
  background: #10182b;
  border: 1px solid #1e304e;
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}

.payment-meta span {
  display: block;
  color: #71809d;
  font-size: 12px;
  margin-bottom: 7px;
}

.payment-meta b {
  color: #e9f1ff;
}

.payment-card {
  overflow: visible;
}

.active-payments-card {
  overflow: visible;
}

.payment-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  align-items: center;
}

.payment-actions .paid-btn {
  flex: 1;
  min-height: 48px;
}

.payment-actions .cancel-qr-btn {
  opacity: 0.72;
}

.payment-actions .cancel-qr-btn:hover {
  opacity: 1;
}

.live-feed {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
}

.feed-empty {
  color: #68758c;
  padding: 20px;
  border: 1px dashed #2a3a5b;
  border-radius: 16px;
}

.feed-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 16px;
  padding: 12px;
}

.feed-item b {
  display: block;
  margin-bottom: 4px;
}

.feed-item span {
  display: block;
  color: #5f6e87;
  font-size: 12px;
  margin-top: 6px;
}

.feed-icon {
  width: 36px;
  height: 36px;
  background: #132037;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.feed-item.success {
  border-color: #155f3a;
}

.feed-item.warning {
  border-color: #76561d;
}

.feed-item.danger {
  border-color: #74314b;
}

.feed-item.payment {
  border-color: #235d9f;
}

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
}

.account-card {
  padding: 22px;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 11px 0;
  color: #7e8aa5;
}

.kv b {
  max-width: 55%;
  color: #b8c8e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.stat-card {
  padding: 22px;
}

.stat-card span {
  display: block;
  color: #7f8aa3;
  margin-bottom: 12px;
}

.stat-card b {
  font-size: 30px;
}

@media (max-width: 1200px) {
  .account-strip,
  .accounts-grid,
  .dashboard-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .global-range-card {
    align-items: stretch;
    flex-direction: column;
  }

  .range-row.compact {
    min-width: 0;
  }
}


@media (max-width: 820px) {
  .sidebar {
    position: static;
    width: auto;
  }

  .main {
    margin-left: 0;
    padding: 18px;
  }

  .payment-main {
    grid-template-columns: 1fr;
  }

  .qr-area,
  .qr-area:hover,
  .qr-area.qr-pinned {
    width: 220px;
    min-width: 220px;
  }

  .qr-hover-target {
    width: 100%;
  }

  .qr-lift-layer,
  .qr-area:hover .qr-lift-layer,
  .qr-area.qr-pinned .qr-lift-layer {
    width: 220px;
    height: 220px;
  }

  .payment-meta {
    grid-template-columns: 1fr;
  }

  .payment-actions {
    flex-direction: column;
  }
}

.merchant-stat-card {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
  padding: 22px;
}

.merchant-stat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.merchant-stat-head h3 {
  margin: 0 0 6px;
  font-size: 20px;
}

.merchant-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.merchant-stat-grid div {
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}

.merchant-stat-grid span {
  display: block;
  color: #7f8aa3;
  font-size: 13px;
  margin-bottom: 10px;
}

.merchant-stat-grid b {
  font-size: 24px;
  color: #f5f7ff;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .merchant-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.merchant-stat-card {
  min-width: 0;
  overflow: hidden;
}

.merchant-stat-grid span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .merchant-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.payment-warning {
  background: #241a0b;
  border: 1px solid #7a5317;
  color: #ffd37a;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
}

.qr-area {
  position: relative;
  width: 190px;
  min-width: 190px;
  transition: width 0.14s ease, min-width 0.14s ease;
}

.qr-area:hover,
.qr-area.qr-pinned {
  width: 340px;
  min-width: 340px;
}

.qr-hover-target {
  width: 100%;
  height: 36px;
  border: 1px solid #254674;
  background: #0d1729;
  color: #8fb7ff;
  border-radius: 14px;
  cursor: zoom-in;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
  transition: 0.12s ease;
}

.qr-hover-target:hover {
  background: #14305c;
  color: #ffffff;
  border-color: #377cff;
}

.qr-area.qr-pinned .qr-hover-target {
  background: #0d2a18;
  color: #35e88e;
  border-color: #1d8f59;
}

.qr-lift-layer {
  width: 190px;
  height: 190px;
  transition: width 0.14s ease, height 0.14s ease;
}

.qr-area:hover .qr-lift-layer,
.qr-area.qr-pinned .qr-lift-layer {
  width: 320px;
  height: 320px;
}

.qr-box {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.qr-box.has-qr {
  padding: 10px;
}

.qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-modal.hidden {
  display: none;
}

.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 28px;
}

.qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.qr-modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, 96vw);
  background: #0b1222;
  border: 1px solid #26446d;
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.qr-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #21101a;
  color: #ff7f9a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.qr-modal-head {
  padding-right: 56px;
  margin-bottom: 18px;
}

.qr-modal-head h2 {
  margin: 0 0 6px;
  font-size: 30px;
}

.qr-modal-body {
  display: grid;
  grid-template-columns: minmax(320px, 460px) 1fr;
  gap: 20px;
  align-items: stretch;
}

.qr-modal-img-wrap {
  background: #ffffff;
  border-radius: 24px;
  padding: 22px;
  display: grid;
  place-items: center;
  min-height: 460px;
}

.qr-modal-img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
}

.qr-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qr-modal-meta div {
  background: #10182b;
  border: 1px solid #1f2e49;
  border-radius: 16px;
  padding: 15px;
}

.qr-modal-meta span {
  display: block;
  color: #7f8aa3;
  font-size: 13px;
  margin-bottom: 8px;
}

.qr-modal-meta b {
  color: #f5f7ff;
  font-size: 16px;
  word-break: break-word;
}

@media (max-width: 850px) {
  .qr-modal-body {
    grid-template-columns: 1fr;
  }

  .qr-modal-img-wrap {
    min-height: 340px;
  }
}

.qr-area {
  position: relative;
  width: 190px;
  min-width: 190px;
  min-height: 228px;
  transition: width 0.14s ease;
}

.qr-area.qr-pinned {
  width: 340px;
  min-width: 340px;
}

.qr-lift-layer {
  width: 190px;
  height: 190px;
  transition: width 0.14s ease, height 0.14s ease;
}

.qr-area.qr-pinned .qr-lift-layer {
  width: 320px;
  height: 320px;
}

.qr-box {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  cursor: zoom-in;
}

.qr-area.qr-pinned .qr-box {
  cursor: default;
}

.qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-small-hint {
  margin-top: 8px;
  width: 190px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #254674;
  background: #0d1729;
  color: #8fb7ff;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.qr-unpin-btn {
  margin-top: 8px;
  width: 190px;
  height: 34px;
  border: 1px solid #1d8f59;
  background: #0d2a18;
  color: #35e88e;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.qr-unpin-btn:hover {
  background: #123f25;
}

.payment-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

.payment-card {
  overflow: visible;
}

.active-payments-card {
  overflow: visible;
}

.state-pill.offline {
  background: #2a1520;
  color: #ff7f9a;
  border: 1px solid #623044;
}

.state-pill.warning {
  background: #2b210d;
  color: #ffd36a;
  border: 1px solid #76561d;
}

.state-pill.cooldown {
  background: #10233d;
  color: #75b5ff;
  border: 1px solid #235d9f;
}

.mini-gateway {
  margin: -8px 0 16px;
  color: #71809d;
  font-size: 13px;
  min-height: 18px;
}

.history-toolbar {
  display: flex;
  gap: 14px;
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 18px;
}

.history-toolbar label {
  max-width: 260px;
}

select {
  background: #070d1a;
  border: 1px solid #24334f;
  color: #f4f7ff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  outline: none;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 18px;
  padding: 15px;
}

.history-item.qr_taken {
  border-color: #235d9f;
}

.history-item.payment_completed {
  border-color: #155f3a;
}

.history-item.payment_canceled {
  border-color: #76561d;
}

.history-item.error {
  border-color: #74314b;
}

.history-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 14px;
  font-size: 20px;
}

.history-main {
  min-width: 0;
}

.history-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.history-head b {
  color: #f5f7ff;
}

.history-head span {
  color: #71809d;
  font-size: 13px;
  white-space: nowrap;
}

.history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.history-meta span {
  background: #0b1222;
  border: 1px solid #1f2e49;
  color: #b8c8e8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.blacklist-card {
  padding: 20px;
  margin-bottom: 18px;
}

.blacklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.blacklist-editor {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.blacklist-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 42px;
}

.blacklist-empty {
  width: 100%;
  border: 1px dashed #2a3a5b;
  background: #0b1222;
  color: #71809d;
  border-radius: 14px;
  padding: 13px 14px;
}

.blacklist-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #76561d;
  background: #2b210d;
  color: #ffd36a;
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 900;
}

.blacklist-chip b {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: #4d3112;
  color: #ffd36a;
  border-radius: 50%;
  line-height: 1;
}

.blacklist-chip:hover {
  border-color: #b78024;
  background: #3a2a0f;
}

.history-item.blocklist_updated {
  border-color: #76561d;
}

@media (max-width: 820px) {
  .blacklist-editor {
    grid-template-columns: 1fr;
  }
}

.stats-summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.stats-summary-grid .stat-card {
  min-height: 116px;
}

.stats-summary-grid .stat-card b {
  font-size: 24px;
  line-height: 1.15;
  word-break: break-word;
}

.stat-card.primary-stat {
  border-color: #235d9f;
}

.stat-card.success-stat {
  border-color: #155f3a;
}

.stat-card.warning-stat {
  border-color: #76561d;
}

.stat-card.danger-stat {
  border-color: #74314b;
}

.merchant-stat-grid.wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.stats-top-list {
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}

.stats-top-list > span {
  display: block;
  color: #7f8aa3;
  font-size: 13px;
  margin-bottom: 10px;
}

.stats-top-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-top-list div:first-of-type {
  border-top: 0;
}

.stats-top-list b {
  color: #f5f7ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-top-list em {
  color: #8fb7ff;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.history-item.blacklist_skipped {
  border-color: #76561d;
}

@media (max-width: 1500px) {
  .stats-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .stats-summary-grid,
  .merchant-stat-grid.wide,
  .stats-details-grid {
    grid-template-columns: 1fr;
  }
}

/* Merchant management */
.merchant-add-wrap {
  margin-bottom: 18px;
}

.merchant-card,
.merchant-add-card {
  min-width: 0;
}

.merchant-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.merchant-form-grid.auto-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auto-complete-box {
  margin-top: 16px;
  background: #0b1222;
  border: 1px solid #253552;
  border-radius: 16px;
  padding: 14px;
}

.auto-complete-box.compact-auto {
  margin-top: 16px;
}

.checkbox-line {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: #d7e5ff;
  font-weight: 800;
  margin-bottom: 12px;
}

.checkbox-line input {
  width: 18px;
  height: 18px;
  padding: 0;
}

.danger-note {
  color: #ffd37a;
  margin-top: 10px;
  font-size: 13px;
}

.card-actions.wrap {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn.warning {
  background: #2b210d;
  border: 1px solid #76561d;
  color: #ffd36a;
}

.api-check {
  margin-top: 16px;
  background: #0b1222;
  border: 1px solid #253552;
  border-radius: 16px;
  padding: 14px;
}

.api-check.ok {
  border-color: #155f3a;
}

.api-check.error {
  border-color: #74314b;
}

.api-check.empty {
  color: #71809d;
}

.api-check-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.api-check-head span {
  color: #71809d;
  font-size: 12px;
}

.api-check-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  border-top: 1px solid #1f2e49;
  padding-top: 8px;
  margin-top: 8px;
}

.api-check-row.ok b {
  color: #35e88e;
}

.api-check-row.warning b {
  color: #ffd36a;
}

.api-check-row.error b {
  color: #ff7f9a;
}

.api-check-row span {
  color: #b8c8e8;
  word-break: break-word;
}

@media (max-width: 900px) {
  .merchant-form-grid,
  .merchant-form-grid.auto-grid,
  .api-check-row {
    grid-template-columns: 1fr;
  }
}

.secret-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}

.secret-status {
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.secret-status.ok {
  border-color: #155f3a;
}

.secret-status.missing {
  border-color: #74314b;
}

.secret-status span {
  display: block;
  color: #71809d;
  font-size: 12px;
  margin-bottom: 7px;
}

.secret-status b {
  display: block;
  color: #e9f1ff;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secret-status small {
  display: block;
  color: #5f6e87;
  font-size: 11px;
  margin-top: 6px;
}

@media (max-width: 820px) {
  .secret-status-grid {
    grid-template-columns: 1fr;
  }
}

.log-modal.hidden {
  display: none;
}

.log-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 28px;
}

.log-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.log-modal-card {
  position: relative;
  z-index: 1;
  width: min(1100px, 96vw);
  max-height: 90vh;
  background: #0b1222;
  border: 1px solid #26446d;
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.log-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-right: 54px;
}

.log-modal-head h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.log-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.log-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.log-meta span {
  background: #10182b;
  border: 1px solid #1f2e49;
  color: #b8c8e8;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.gateway-log-text {
  margin: 0;
  background: #050914;
  border: 1px solid #1f2e49;
  border-radius: 16px;
  color: #dbe8ff;
  padding: 16px;
  min-height: 420px;
  max-height: 62vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.45;
}

/* Strict gateway status binding */
.state-pill.danger {
  background: #2a0f18;
  color: #ff6f88;
  border: 1px solid #702638;
}

.mini-account.danger,
.account-card.danger {
  border-color: #74314b;
}

.gateway-status-box {
  margin: 14px 0;
  border-radius: 16px;
  padding: 14px;
  background: #0b1222;
  border: 1px solid #1f2e49;
}

.gateway-status-box b {
  display: block;
  margin-bottom: 6px;
  color: #f5f7ff;
}

.gateway-status-box p {
  margin: 0;
  color: #9aa8c0;
  line-height: 1.4;
}

.gateway-status-box span {
  display: block;
  margin-top: 8px;
  color: #71809d;
  font-size: 12px;
  font-weight: 800;
}

.gateway-status-box.warning {
  border-color: #76561d;
  background: #241a0b;
}

.gateway-status-box.warning b,
.gateway-status-box.warning p {
  color: #ffd37a;
}

.gateway-status-box.danger {
  border-color: #74314b;
  background: #2a0f18;
}

.gateway-status-box.danger b,
.gateway-status-box.danger p {
  color: #ff9aad;
}

.gateway-status-box.offline {
  border-color: #623044;
  background: #1b1118;
}

.gateway-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.btn.tiny-action {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 12px;
}

.btn.warning {
  background: #2b210d;
  border: 1px solid #76561d;
  color: #ffd36a;
}


.gateway-bulk-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gateway-control-center {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 18px;
}

.gateway-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.gateway-control-stats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.gateway-control-stats div {
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}

.gateway-control-stats span {
  display: block;
  color: #7f8aa3;
  font-size: 12px;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gateway-control-stats b {
  color: #f5f7ff;
  font-size: 22px;
}

.gateway-control-note {
  margin-top: 12px;
  color: #8fa0bd;
  font-size: 13px;
}

@media (max-width: 1500px) {
  .gateway-control-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .gateway-control-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gateway-bulk-actions {
    justify-content: stretch;
  }

  .gateway-bulk-actions .btn {
    flex: 1 1 100%;
  }
}

.hidden {
  display: none !important;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #11234a 0, #070a11 48%, #04060b 100%);
}

.login-shell {
  width: min(440px, calc(100vw - 32px));
}

.login-card {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38);
}

.login-logo {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #246bff, #00d1ff);
  color: #fff;
  font-weight: 900;
  margin-bottom: 18px;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.login-error {
  background: #2a0f18;
  border: 1px solid #702638;
  color: #ff9bad;
  border-radius: 14px;
  padding: 12px;
  font-weight: 800;
}

.user-box {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 18px;
  padding: 16px;
}

.user-box b,
.user-box span {
  display: block;
}

.user-box span {
  color: #71809d;
  margin-top: 5px;
  font-size: 13px;
}

.users-create-card,
.user-card {
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
  padding: 22px;
}

.users-create-card {
  margin-bottom: 18px;
}

.users-form-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

.users-list {
  display: grid;
  gap: 14px;
}

.user-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 16px;
  align-items: center;
}

.user-card h3 {
  margin: 0 0 6px;
}

.user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-meta span {
  background: #0b1222;
  border: 1px solid #1f2e49;
  color: #b8c8e8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .users-form-grid,
  .user-card {
    grid-template-columns: 1fr;
  }

  .user-actions {
    justify-content: flex-start;
  }
}

.security-warnings {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.security-warnings.hidden {
  display: none;
}

.security-warning {
  background: #21170c;
  border: 1px solid #76561d;
  color: #ffd36a;
  border-radius: 16px;
  padding: 14px 16px;
}

.security-warning.danger {
  background: #2a0f18;
  border-color: #702638;
  color: #ff8aa0;
}

.security-warning.warning {
  background: #21170c;
  border-color: #76561d;
  color: #ffd36a;
}

.security-warning b {
  display: block;
  margin-bottom: 5px;
  color: inherit;
}

.security-warning p {
  color: inherit;
  opacity: 0.9;
}

.system-field {
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}

.system-field span,
.selected-send-account span {
  display: block;
  color: #8390ab;
  font-size: 13px;
  margin-bottom: 7px;
}

.system-field b,
.selected-send-account b {
  display: block;
  color: #f4f7ff;
  word-break: break-word;
}

.system-field small,
.selected-send-account small {
  display: block;
  margin-top: 7px;
  color: #71809d;
  line-height: 1.35;
}

.selected-send-account {
  margin: 14px 0;
  background: #0d2a18;
  border: 1px solid #1d8f59;
  border-radius: 16px;
  padding: 13px 15px;
}

.selected-send-account span,
.selected-send-account small {
  color: #82c9a6;
}

.simple-modal.hidden {
  display: none;
}

.simple-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 28px;
}

.simple-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.simple-modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, 96vw);
  max-height: min(820px, 92vh);
  overflow: auto;
  background: #0b1222;
  border: 1px solid #26446d;
  border-radius: 26px;
  padding: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.send-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.send-account-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  background: #10182b;
  border: 1px solid #1f2e49;
  border-radius: 18px;
  padding: 15px;
}

.send-account-item b {
  display: block;
  color: #f5f7ff;
  margin-bottom: 6px;
}

.send-account-item p {
  margin: 0 0 7px;
  color: #7f8aa3;
}

.send-account-item small {
  color: #5f6e87;
  word-break: break-all;
}

@media (max-width: 720px) {
  .send-account-item {
    grid-template-columns: 1fr;
  }
}

.stats-range-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #10182b;
  border: 1px solid #1c2b48;
  border-radius: 20px;
  padding: 14px;
  margin-bottom: 18px;
}

.stats-range-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-range-tabs .btn {
  padding: 10px 14px;
}

.stats-range-current {
  color: #7f8aa3;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .stats-range-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .stats-range-current {
    white-space: normal;
  }
}


/* === Operator cockpit redesign v1 === */
.topline {
  margin-bottom: 14px;
}

.operator-command-strip {
  margin-bottom: 14px;
}

.command-range.global-range-card {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 0;
  background: linear-gradient(135deg, rgba(16, 24, 43, 0.98), rgba(10, 18, 34, 0.98));
}

.command-range-title h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.command-range-title p {
  font-size: 12px;
}

.command-range .range-row.compact {
  min-width: 0;
  display: grid;
  grid-template-columns: 150px 150px auto auto;
  gap: 10px;
  align-items: end;
}

.command-range label {
  font-size: 11px;
  gap: 5px;
}

.command-range input {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 14px;
}

.command-range .btn {
  padding: 10px 14px;
}

.dashboard-gateway-toggle-wrap {
  display: inline-flex;
}

.operator-cockpit-grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(520px, 1fr) minmax(300px, 360px);
  gap: 14px;
  align-items: start;
}

.cockpit-merchants-card,
.active-payments-card,
.compact-blacklist-card,
.compact-feed-card {
  padding: 16px;
  min-height: 0;
}

.compact-head h2,
.active-head h2,
.blacklist-head h2 {
  font-size: 17px;
  margin-bottom: 4px;
}

.compact-head p,
.active-head p,
.blacklist-head p {
  font-size: 12px;
}

.cockpit-merchants-card .account-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
}

.cockpit-merchants-card .mini-account {
  padding: 12px;
  border-radius: 16px;
  background: #0b1222;
}

.cockpit-merchants-card .mini-top h3 {
  font-size: 15px;
  margin-bottom: 3px;
}

.cockpit-merchants-card .mini-top p {
  font-size: 12px;
}

.cockpit-merchants-card .state-pill {
  padding: 5px 8px;
  font-size: 11px;
}

.mini-range-edit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 7px;
  margin: 10px 0;
}

.mini-range-edit label {
  font-size: 10px;
  gap: 4px;
}

.mini-range-edit input {
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 13px;
}

.range-dash {
  color: #5f6e87;
  padding-bottom: 9px;
}

.cockpit-mini-actions {
  display: grid;
  grid-template-columns: 38px 1fr 1fr;
  gap: 7px;
  justify-content: stretch;
}

.cockpit-mini-actions .btn {
  padding: 9px 9px;
  font-size: 12px;
  border-radius: 10px;
}

.active-head {
  align-items: center;
}

.active-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.active-view-switch {
  display: flex;
  gap: 6px;
  background: #0b1222;
  border: 1px solid #1f2e49;
  border-radius: 12px;
  padding: 4px;
}

.active-view-switch .btn {
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.active-payments {
  margin-top: 14px;
}

.payment-card {
  background: radial-gradient(circle at 0 0, rgba(30, 105, 255, 0.13), transparent 35%), #0b1222;
  border-color: #20385d;
}

.payment-card.qr-unseen {
  border-color: #19a66b;
  box-shadow: 0 0 0 1px rgba(25, 166, 107, 0.2), 0 0 32px rgba(25, 166, 107, 0.08);
}

.payment-card.compact {
  padding: 12px;
  border-radius: 18px;
}

.payment-card.compact .payment-main {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.payment-card.compact .qr-area {
  width: 96px;
  min-width: 96px;
}

.payment-card.compact .qr-lift-layer {
  width: 96px;
  height: 96px;
}

.payment-card.compact .qr-area:hover,
.payment-card.compact .qr-area.qr-pinned {
  width: 260px;
  min-width: 260px;
  z-index: 20;
}

.payment-card.compact .qr-area:hover .qr-lift-layer,
.payment-card.compact .qr-area.qr-pinned .qr-lift-layer {
  width: 250px;
  height: 250px;
}

.payment-card.compact .qr-box {
  border-radius: 14px;
  padding: 6px;
}

.qr-small-hint {
  margin-top: 6px;
  color: #7fa5df;
  font-size: 11px;
  text-align: center;
  font-weight: 800;
}

.payment-card.qr-unseen .qr-small-hint {
  color: #35e88e;
}

.payment-card.compact .payment-info {
  padding-top: 0;
  gap: 9px;
}

.payment-card.compact .payment-head h3 {
  font-size: 20px;
  margin-bottom: 3px;
}

.payment-card.compact .payment-head p {
  font-size: 13px;
}

.payment-card.compact .payment-account {
  padding: 6px 8px;
  font-size: 12px;
}

.payment-currency-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #8fb7ff;
  font-size: 13px;
}

.payment-currency-line b {
  color: #d7e5ff;
}

.payment-card.compact .payment-meta {
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 7px;
}

.payment-card.compact .payment-meta div {
  padding: 8px;
  border-radius: 10px;
}

.payment-card.compact .payment-meta span {
  font-size: 10px;
  margin-bottom: 4px;
}

.payment-card.compact .payment-meta b {
  font-size: 12px;
}

.payment-card.compact .payment-actions {
  justify-content: flex-end;
  gap: 8px;
}

.payment-card.compact .payment-actions .paid-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 16px;
}

.payment-card.compact .payment-actions .cancel-qr-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 12px;
}

.active-view-expanded .payment-card .payment-main {
  grid-template-columns: auto 1fr;
}

.active-view-expanded .payment-card .payment-meta {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.cockpit-side-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.compact-blacklist-card .blacklist-head {
  margin-bottom: 12px;
}

.compact-blacklist-card .blacklist-editor {
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end;
  gap: 8px;
}

.compact-blacklist-card .blacklist-editor label {
  font-size: 11px;
}

.compact-blacklist-card .blacklist-editor input {
  padding: 9px 10px;
  font-size: 13px;
}

.compact-blacklist-card .blacklist-editor .btn {
  height: 40px;
  padding: 0;
  border-radius: 11px;
  font-size: 20px;
}

.compact-blacklist-card .blacklist-list {
  margin-top: 10px;
  gap: 6px;
}

.compact-blacklist-card .blacklist-chip {
  padding: 8px 9px;
  font-size: 12px;
}

.compact-feed-card .live-feed {
  margin-top: 12px;
  gap: 7px;
  max-height: 500px;
}

.compact-feed-card .feed-item {
  grid-template-columns: 22px 1fr;
  gap: 8px;
  border-radius: 12px;
  padding: 8px;
}

.compact-feed-card .feed-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  font-size: 12px;
}

.compact-feed-card .feed-item b {
  font-size: 12px;
  margin-bottom: 2px;
}

.compact-feed-card .feed-item p,
.compact-feed-card .feed-item span {
  font-size: 11px;
}

.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.help-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: #132037;
  border: 1px solid #2b4269;
  color: #8fb7ff;
  font-size: 12px;
  font-weight: 900;
  cursor: help;
}

.help-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(420px, 78vw);
  background: #08101f;
  color: #d7e5ff;
  border: 1px solid #2d4f81;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  border-radius: 16px;
  padding: 14px;
  line-height: 1.45;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
}

.help-popover code {
  color: #8fb7ff;
  background: #0e1b31;
  border: 1px solid #1f365a;
  border-radius: 8px;
  padding: 2px 5px;
}

.help-tip:hover .help-popover,
.help-tip:focus .help-popover {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1500px) {
  .operator-cockpit-grid {
    grid-template-columns: minmax(260px, 320px) minmax(480px, 1fr);
  }

  .cockpit-side-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1050px) {
  .operator-cockpit-grid,
  .cockpit-side-column,
  .command-range.global-range-card,
  .command-range .range-row.compact {
    grid-template-columns: 1fr;
  }

  .payment-card.compact .payment-main {
    grid-template-columns: 1fr;
  }

  .payment-card.compact .qr-area,
  .payment-card.compact .qr-lift-layer {
    width: 160px;
    min-width: 160px;
    height: 160px;
  }

  .payment-card.compact .payment-meta,
  .active-view-expanded .payment-card .payment-meta {
    grid-template-columns: 1fr 1fr;
  }
}


/* === Operator cockpit v2 polish === */
.main {
  padding: 18px 18px 24px;
}

.topline {
  align-items: center;
  margin-bottom: 12px;
}

.topline h1 {
  font-size: 26px;
  margin-bottom: 5px;
}

.topline p {
  font-size: 13px;
}

.top-actions .btn {
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 12px;
}

.command-range.global-range-card {
  min-height: 72px;
  grid-template-columns: minmax(210px, 1fr) minmax(520px, auto);
  border-radius: 18px;
}

.command-range .range-row.compact {
  grid-template-columns: 140px 140px auto auto;
  justify-content: end;
}

.command-range-title h2 {
  font-size: 15px;
}

.command-range-title p {
  font-size: 11px;
}

.operator-cockpit-grid {
  grid-template-columns: 360px minmax(620px, 1fr) 320px;
  gap: 14px;
}

.cockpit-merchants-card,
.active-payments-card,
.compact-blacklist-card,
.compact-feed-card {
  border-radius: 18px;
}

.cockpit-merchants-card {
  max-height: calc(100vh - 190px);
  overflow: auto;
}

.cockpit-side-column {
  max-height: calc(100vh - 190px);
  overflow: hidden;
}

.compact-feed-card {
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
}

.compact-feed-card .live-feed {
  max-height: calc(100vh - 610px);
  min-height: 160px;
}

.cockpit-merchants-card .account-strip {
  gap: 9px;
}

.cockpit-merchants-card .mini-account {
  padding: 11px;
  border-radius: 15px;
}

.mini-range-edit {
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  gap: 6px;
}

.mini-range-edit label {
  min-width: 0;
  flex: 0 1 auto;
}

.mini-range-edit input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
}

.cockpit-mini-actions {
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr);
}

.cockpit-mini-actions .btn {
  min-width: 0;
  padding: 8px 7px;
  font-size: 12px;
}

.active-payments-card {
  min-height: calc(100vh - 190px);
  overflow: visible;
}

.active-head {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(31, 46, 73, 0.75);
}

.active-payments {
  margin-top: 12px;
}

.empty-active {
  min-height: calc(100vh - 315px);
  border: 1px dashed rgba(64, 92, 139, 0.65);
  border-radius: 18px;
  background: rgba(5, 10, 20, 0.18);
}

.payment-card.compact .payment-main {
  grid-template-columns: 104px minmax(0, 1fr);
}

.payment-card.compact .payment-meta {
  grid-template-columns: repeat(5, minmax(74px, 1fr));
}

.payment-card.compact .payment-actions {
  margin-top: 2px;
}

.payment-card.compact .payment-actions .paid-btn,
.payment-card.compact .payment-actions .cancel-qr-btn {
  min-height: 36px;
}

.compact-blacklist-card {
  flex: 0 0 auto;
}

.compact-blacklist-card .blacklist-list {
  max-height: 150px;
  overflow: auto;
}

.compact-blacklist-card .blacklist-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.compact-blacklist-card .blacklist-chip b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-feed-card .feed-item {
  padding: 7px;
  font-size: 11px;
}

.compact-feed-card .feed-item b,
.compact-feed-card .feed-item p,
.compact-feed-card .feed-item span {
  line-height: 1.25;
}

/* Compact scrollbars for the cockpit */
.cockpit-merchants-card::-webkit-scrollbar,
.compact-feed-card .live-feed::-webkit-scrollbar,
.compact-blacklist-card .blacklist-list::-webkit-scrollbar {
  width: 7px;
}

.cockpit-merchants-card::-webkit-scrollbar-thumb,
.compact-feed-card .live-feed::-webkit-scrollbar-thumb,
.compact-blacklist-card .blacklist-list::-webkit-scrollbar-thumb {
  background: #1f365a;
  border-radius: 999px;
}

@media (max-width: 1650px) {
  .operator-cockpit-grid {
    grid-template-columns: 330px minmax(560px, 1fr) 300px;
  }

  .command-range.global-range-card {
    grid-template-columns: minmax(210px, 1fr) minmax(480px, auto);
  }

  .command-range .range-row.compact {
    grid-template-columns: 128px 128px auto auto;
  }
}

@media (max-width: 1380px) {
  .operator-cockpit-grid {
    grid-template-columns: 320px minmax(520px, 1fr);
  }

  .cockpit-side-column {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(420px, 1.25fr);
    max-height: none;
    overflow: visible;
  }

  .compact-feed-card .live-feed {
    max-height: 260px;
  }

  .command-range.global-range-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .command-range .range-row.compact {
    justify-content: start;
  }
}

@media (max-width: 920px) {
  .main {
    padding: 14px;
  }

  .operator-cockpit-grid,
  .cockpit-side-column {
    grid-template-columns: 1fr;
  }

  .cockpit-merchants-card,
  .active-payments-card {
    max-height: none;
    min-height: 0;
  }

  .command-range .range-row.compact {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Operator cockpit v3: active workspace and queue layout === */
.operator-cockpit-grid {
  grid-template-columns: 345px minmax(720px, 1fr) 300px;
}

.command-range.global-range-card {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.active-payments-card {
  background:
    radial-gradient(circle at 50% 0%, rgba(42, 111, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(16, 24, 43, 0.98), rgba(10, 18, 34, 0.98));
}

.active-main-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-card.featured {
  border-color: rgba(28, 197, 117, 0.48);
  box-shadow: 0 0 0 1px rgba(28, 197, 117, 0.12), 0 22px 70px rgba(0, 0, 0, 0.23);
}

.payment-card.compact.featured {
  padding: 14px;
}

.payment-card.compact.featured .payment-main {
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
}

.payment-card.compact.featured .qr-area,
.payment-card.compact.featured .qr-lift-layer {
  width: 128px;
  min-width: 128px;
  height: 128px;
}

.payment-card.compact.featured .qr-area:hover,
.payment-card.compact.featured .qr-area.qr-pinned {
  width: 300px;
  min-width: 300px;
}

.payment-card.compact.featured .qr-area:hover .qr-lift-layer,
.payment-card.compact.featured .qr-area.qr-pinned .qr-lift-layer {
  width: 290px;
  height: 290px;
}

.payment-card.compact.featured .payment-head h3 {
  font-size: 24px;
}

.payment-card.compact.featured .payment-actions .paid-btn {
  min-width: 150px;
  font-size: 14px;
}

.active-queue-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding: 12px 2px 4px;
  border-top: 1px solid rgba(31, 46, 73, 0.75);
  color: #d7e5ff;
}

.active-queue-head div {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.active-queue-head b {
  font-size: 14px;
}

.active-queue-head span,
.active-queue-head small {
  color: #7f8eab;
  font-size: 12px;
  font-weight: 700;
}

.active-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-row {
  display: grid;
  grid-template-columns: 62px minmax(170px, 1fr) minmax(105px, auto) minmax(145px, auto);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid #1f2e49;
  background: rgba(6, 13, 26, 0.82);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.payment-row:hover {
  border-color: #2a6fff;
  background: rgba(9, 20, 39, 0.92);
}

.payment-row.qr-unseen {
  border-color: rgba(28, 197, 117, 0.42);
  box-shadow: inset 3px 0 0 rgba(28, 197, 117, 0.9);
}

.payment-row-qr {
  width: 62px;
  min-width: 62px;
  height: 62px;
}

.payment-row-qr .qr-lift-layer {
  width: 62px;
  height: 62px;
}

.payment-row-qr .qr-box {
  padding: 4px;
  border-radius: 10px;
}

.payment-row-qr:hover,
.payment-row-qr.qr-pinned {
  width: 250px;
  min-width: 250px;
  z-index: 40;
}

.payment-row-qr:hover .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  width: 240px;
  height: 240px;
  transform: translateY(-86px);
}

.payment-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.payment-row-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.payment-row-title b {
  color: #ffffff;
  font-size: 16px;
  white-space: nowrap;
}

.payment-row-title span {
  color: #8fb7ff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-row-sub {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: #7f8eab;
  font-size: 11px;
  font-weight: 750;
}

.payment-row-sub span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-row-sub span:not(:last-child)::after {
  content: '•';
  margin-left: 8px;
  color: #40506d;
}

.payment-row-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #7f8eab;
  font-size: 11px;
  font-weight: 800;
}

.payment-row-status b {
  color: #ffffff;
  font-size: 13px;
}

.payment-row-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.payment-row-actions .btn {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.payment-row-actions .cancel-qr-btn {
  width: 34px;
  padding: 0;
  font-size: 18px;
}

.payments-expanded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 12px;
}

.active-view-expanded .payment-card.expanded-card {
  padding: 14px;
}

.active-view-expanded .payment-card.expanded-card .payment-main {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
}

.active-view-expanded .payment-card.expanded-card .qr-area,
.active-view-expanded .payment-card.expanded-card .qr-lift-layer {
  width: 150px;
  min-width: 150px;
  height: 150px;
}

.active-view-expanded .payment-card.expanded-card .qr-area:hover,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned {
  width: 310px;
  min-width: 310px;
}

.active-view-expanded .payment-card.expanded-card .qr-area:hover .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned .qr-lift-layer {
  width: 300px;
  height: 300px;
}

.active-view-expanded .payment-card.expanded-card .payment-meta {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.empty-active {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 8px;
}

.empty-active .empty-big {
  color: #445a7d;
  font-size: 32px;
  line-height: 1;
}

@media (max-width: 1650px) {
  .operator-cockpit-grid {
    grid-template-columns: 330px minmax(620px, 1fr) 300px;
  }

  .payment-row {
    grid-template-columns: 58px minmax(150px, 1fr) minmax(95px, auto) minmax(132px, auto);
  }
}

@media (max-width: 1380px) {
  .operator-cockpit-grid {
    grid-template-columns: 320px minmax(520px, 1fr);
  }
}

@media (max-width: 1100px) {
  .payment-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .payment-row-status,
  .payment-row-actions {
    grid-column: 2;
  }

  .payment-row-actions {
    justify-content: flex-start;
  }

  .payment-card.compact.featured .payment-main,
  .active-view-expanded .payment-card.expanded-card .payment-main {
    grid-template-columns: 1fr;
  }
}

/* === Operator cockpit v4: QR hover without layout jump === */
.payment-item,
.payment-card,
.payment-row,
.active-payments,
.active-main-stack,
.active-queue-list {
  overflow: visible !important;
}

.qr-small-hint {
  display: none !important;
}

.qr-area,
.payment-card.compact .qr-area,
.payment-card.compact.featured .qr-area,
.active-view-expanded .payment-card.expanded-card .qr-area,
.payment-row-qr {
  position: relative !important;
  width: var(--qr-size, 104px) !important;
  min-width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  min-height: var(--qr-size, 104px) !important;
  transition: none !important;
  flex: 0 0 var(--qr-size, 104px) !important;
  z-index: 2;
}

.payment-card.compact .qr-area { --qr-size: 104px; --qr-hover: 250px; }
.payment-card.compact.featured .qr-area { --qr-size: 128px; --qr-hover: 285px; }
.active-view-expanded .payment-card.expanded-card .qr-area { --qr-size: 150px; --qr-hover: 300px; }
.payment-row-qr { --qr-size: 58px; --qr-hover: 238px; }

.qr-lift-layer,
.payment-card.compact .qr-lift-layer,
.payment-card.compact.featured .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-lift-layer,
.payment-row-qr .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  transform: none !important;
  transform-origin: top left;
  transition: width .12s ease, height .12s ease, box-shadow .12s ease !important;
  z-index: 3;
}

.qr-area:hover,
.qr-area.qr-pinned,
.payment-card.compact .qr-area:hover,
.payment-card.compact .qr-area.qr-pinned,
.payment-card.compact.featured .qr-area:hover,
.payment-card.compact.featured .qr-area.qr-pinned,
.active-view-expanded .payment-card.expanded-card .qr-area:hover,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned,
.payment-row-qr:hover,
.payment-row-qr.qr-pinned {
  width: var(--qr-size, 104px) !important;
  min-width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  min-height: var(--qr-size, 104px) !important;
  z-index: 80 !important;
}

.qr-area:hover .qr-lift-layer,
.qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact .qr-area:hover .qr-lift-layer,
.payment-card.compact .qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact.featured .qr-area:hover .qr-lift-layer,
.payment-card.compact.featured .qr-area.qr-pinned .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area:hover .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned .qr-lift-layer,
.payment-row-qr:hover .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--qr-hover, 250px) !important;
  height: var(--qr-hover, 250px) !important;
  transform: none !important;
  z-index: 120 !important;
}

.qr-area:hover .qr-box,
.qr-area.qr-pinned .qr-box {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(42, 111, 255, 0.55) !important;
}

.payment-card.compact .payment-main {
  align-items: center;
}

.payment-card.compact.featured .payment-meta {
  grid-template-columns: repeat(5, minmax(90px, 1fr));
}

.payment-row {
  min-height: 76px;
}

.payment-row-main,
.payment-row-status,
.payment-row-actions {
  position: relative;
  z-index: 1;
}

.payment-row-qr:hover + .payment-row-main,
.payment-row-qr.qr-pinned + .payment-row-main {
  opacity: .28;
}

@media (max-width: 1650px) {
  .payment-card.compact.featured .payment-meta {
    grid-template-columns: repeat(3, minmax(95px, 1fr));
  }
}

/* === Operator cockpit v5: stable QR hover portal === */
.qr-area:hover .qr-lift-layer,
.qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact .qr-area:hover .qr-lift-layer,
.payment-card.compact .qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact.featured .qr-area:hover .qr-lift-layer,
.payment-card.compact.featured .qr-area.qr-pinned .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area:hover .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned .qr-lift-layer,
.payment-row-qr:hover .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  transform: none !important;
  z-index: 3 !important;
}

.qr-area:hover .qr-box,
.qr-area.qr-pinned .qr-box,
.payment-row-qr:hover .qr-box,
.payment-row-qr.qr-pinned .qr-box {
  box-shadow: 0 0 0 2px rgba(42, 111, 255, 0.44), 0 0 22px rgba(42, 111, 255, 0.16) !important;
}

.payment-row-qr:hover + .payment-row-main,
.payment-row-qr.qr-pinned + .payment-row-main {
  opacity: 1 !important;
}

.qr-hover-overlay {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: max-content;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .12s ease, transform .12s ease;
}

.qr-hover-overlay.hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(.985);
}

.qr-hover-card {
  width: calc(var(--qr-hover-size, 280px) + 18px);
  padding: 9px;
  border-radius: 18px;
  border: 1px solid rgba(56, 124, 255, .78);
  background: rgba(5, 13, 31, .96);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 255, 255, .04),
    0 0 46px rgba(42, 111, 255, .24);
  backdrop-filter: blur(12px);
}

.qr-hover-overlay.pinned .qr-hover-card {
  border-color: rgba(44, 214, 113, .78);
  box-shadow:
    0 26px 90px rgba(0, 0, 0, .64),
    0 0 0 1px rgba(255, 255, 255, .05),
    0 0 52px rgba(44, 214, 113, .26);
}

.qr-hover-img {
  display: block;
  width: var(--qr-hover-size, 280px);
  height: var(--qr-hover-size, 280px);
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 7px;
  image-rendering: crisp-edges;
}

.qr-hover-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 2px;
  color: var(--text);
}

.qr-hover-meta b {
  font-size: 15px;
  line-height: 1.15;
  white-space: nowrap;
}

.qr-hover-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.qr-hover-hint {
  color: var(--muted-2);
  font-size: 10px;
  padding: 3px 2px 0;
  text-align: center;
}

.qr-hover-close {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 95, 122, .55);
  background: rgba(70, 17, 31, .96);
  color: #ff9aaa;
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
}

.qr-hover-close:hover {
  background: rgba(255, 80, 110, .18);
  color: #fff;
}

@media (max-width: 1280px) {
  .qr-hover-card {
    width: calc(var(--qr-hover-size, 235px) + 16px);
  }

  .qr-hover-img {
    width: min(var(--qr-hover-size, 235px), 235px);
    height: min(var(--qr-hover-size, 235px), 235px);
  }
}


/* === Operator cockpit v6: sticky inline QR like old design === */
.qr-hover-overlay {
  display: none !important;
}

.qr-area,
.payment-card.compact .qr-area,
.payment-card.compact.featured .qr-area,
.active-view-expanded .payment-card.expanded-card .qr-area,
.payment-row-qr {
  cursor: zoom-in !important;
  overflow: visible !important;
}

.qr-area .qr-lift-layer,
.payment-card.compact .qr-area .qr-lift-layer,
.payment-card.compact.featured .qr-area .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area .qr-lift-layer,
.payment-row-qr .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  transform: none !important;
  transform-origin: top left !important;
  transition: width .12s ease, height .12s ease, box-shadow .12s ease !important;
  z-index: 3 !important;
}

.qr-area.qr-pinned,
.payment-row-qr.qr-pinned {
  z-index: 120 !important;
}

.qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact .qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact.featured .qr-area.qr-pinned .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card .qr-area.qr-pinned .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--qr-hover, 250px) !important;
  height: var(--qr-hover, 250px) !important;
  transform: none !important;
  z-index: 220 !important;
}

.qr-area.qr-pinned .qr-box,
.payment-row-qr.qr-pinned .qr-box {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(42, 111, 255, 0.58) !important;
}

.payment-row-qr.qr-pinned + .payment-row-main {
  opacity: .22 !important;
}

.payment-card.compact.featured .qr-area { --qr-size: 120px; --qr-hover: 300px; }
.payment-card.compact .qr-area { --qr-size: 96px; --qr-hover: 260px; }
.active-view-expanded .payment-card.expanded-card .qr-area { --qr-size: 142px; --qr-hover: 315px; }
.payment-row-qr { --qr-size: 56px; --qr-hover: 250px; }

@media (max-width: 1280px) {
  .payment-card.compact.featured .qr-area { --qr-hover: 260px; }
  .payment-row-qr { --qr-hover: 220px; }
}


/* === Operator cockpit v7: QR expands the card/row layout, not as a floating window === */
.active-queue-head small {
  display: none !important;
}

.payment-card.qr-expanded,
.payment-row.qr-expanded {
  overflow: visible !important;
}

.payment-card.compact.qr-expanded .payment-main,
.payment-card.compact.featured.qr-expanded .payment-main,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-main {
  grid-template-columns: var(--qr-hover, 260px) minmax(0, 1fr) !important;
  align-items: start !important;
}

.payment-card.compact.qr-expanded .qr-area,
.payment-card.compact.featured.qr-expanded .qr-area,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-area,
.payment-card.compact.qr-expanded .qr-lift-layer,
.payment-card.compact.featured.qr-expanded .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-lift-layer {
  width: var(--qr-hover, 260px) !important;
  min-width: var(--qr-hover, 260px) !important;
  height: var(--qr-hover, 260px) !important;
  min-height: var(--qr-hover, 260px) !important;
  flex-basis: var(--qr-hover, 260px) !important;
}

.payment-card.compact.qr-expanded .qr-lift-layer,
.payment-card.compact.featured.qr-expanded .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-lift-layer,
.payment-row.qr-expanded .qr-lift-layer,
.qr-area.qr-pinned .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 4 !important;
}

.payment-card.compact.qr-expanded .payment-info,
.payment-card.compact.featured.qr-expanded .payment-info,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-info {
  min-width: 0 !important;
  align-self: stretch;
}

.payment-card.compact.qr-expanded .payment-meta,
.payment-card.compact.featured.qr-expanded .payment-meta,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-meta {
  grid-template-columns: repeat(5, minmax(72px, 1fr)) !important;
}

.payment-card.compact.qr-expanded .payment-meta b,
.payment-card.compact.featured.qr-expanded .payment-meta b,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-meta b {
  font-size: 11px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-card.compact.qr-expanded .payment-head,
.payment-card.compact.featured.qr-expanded .payment-head,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-head,
.payment-card.compact.qr-expanded .payment-currency-line,
.payment-card.compact.featured.qr-expanded .payment-currency-line,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-currency-line {
  min-width: 0;
}

.payment-card.compact.qr-expanded .payment-head h3,
.payment-card.compact.featured.qr-expanded .payment-head h3,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-head h3 {
  white-space: nowrap;
}

.payment-row.qr-expanded {
  --row-qr-hover: 220px;
  grid-template-columns: var(--row-qr-hover) minmax(130px, 1fr) minmax(76px, auto) minmax(122px, auto) !important;
  min-height: calc(var(--row-qr-hover) + 22px) !important;
  align-items: center !important;
}

.payment-row.qr-expanded .payment-row-qr,
.payment-row.qr-expanded .qr-lift-layer {
  width: var(--row-qr-hover) !important;
  min-width: var(--row-qr-hover) !important;
  height: var(--row-qr-hover) !important;
  min-height: var(--row-qr-hover) !important;
  flex-basis: var(--row-qr-hover) !important;
}

.payment-row.qr-expanded .payment-row-main,
.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub {
  min-width: 0;
}

.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub {
  flex-wrap: wrap;
}

.payment-row.qr-expanded .payment-row-title b {
  font-size: 15px;
}

.payment-row.qr-expanded .payment-row-title span,
.payment-row.qr-expanded .payment-row-sub {
  font-size: 10px;
}

.payment-row.qr-expanded .payment-row-actions {
  flex-direction: column;
  align-items: stretch;
}

.payment-row.qr-expanded .payment-row-actions .btn {
  min-height: 34px;
}

.payment-item:not(.qr-expanded) .qr-area:hover .qr-lift-layer,
.payment-item:not(.qr-expanded) .payment-row-qr:hover .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-size, 104px) !important;
  min-width: var(--qr-size, 104px) !important;
  height: var(--qr-size, 104px) !important;
  min-height: var(--qr-size, 104px) !important;
  transform: none !important;
}

.qr-area[title],
.payment-row-qr[title] {
  pointer-events: auto;
}

@media (max-width: 1380px) {
  .payment-card.compact.qr-expanded .payment-main,
  .payment-card.compact.featured.qr-expanded .payment-main,
  .active-view-expanded .payment-card.expanded-card.qr-expanded .payment-main {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) !important;
  }

  .payment-row.qr-expanded {
    --row-qr-hover: 190px;
    grid-template-columns: var(--row-qr-hover) minmax(0, 1fr) !important;
  }

  .payment-row.qr-expanded .payment-row-status,
  .payment-row.qr-expanded .payment-row-actions {
    grid-column: 2;
  }

  .payment-row.qr-expanded .payment-row-actions {
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* === Operator cockpit v8: stable instant QR expansion inside layout === */
.qr-hover-overlay {
  display: none !important;
}

.payment-item,
.payment-card,
.payment-row,
.qr-area,
.payment-row-qr,
.qr-lift-layer {
  transition: width .14s ease, min-width .14s ease, height .14s ease, min-height .14s ease, grid-template-columns .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease !important;
}

/* Hover alone never changes geometry. Only .qr-expanded does. This removes shaking. */
.payment-item:not(.qr-expanded) .qr-area,
.payment-item:not(.qr-expanded) .payment-row-qr {
  width: var(--qr-size, 96px) !important;
  min-width: var(--qr-size, 96px) !important;
  height: var(--qr-size, 96px) !important;
  min-height: var(--qr-size, 96px) !important;
  flex: 0 0 var(--qr-size, 96px) !important;
  z-index: 2 !important;
}

.payment-item:not(.qr-expanded) .qr-lift-layer,
.payment-item:not(.qr-expanded) .qr-area:hover .qr-lift-layer,
.payment-item:not(.qr-expanded) .payment-row-qr:hover .qr-lift-layer,
.payment-item:not(.qr-expanded) .qr-area.qr-pinned .qr-lift-layer,
.payment-item:not(.qr-expanded) .payment-row-qr.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-size, 96px) !important;
  min-width: var(--qr-size, 96px) !important;
  height: var(--qr-size, 96px) !important;
  min-height: var(--qr-size, 96px) !important;
  transform: none !important;
  z-index: 3 !important;
}

.payment-item:not(.qr-expanded) .qr-box {
  box-shadow: 0 0 0 1px rgba(42, 111, 255, 0.16) !important;
}

.payment-card.compact.featured .qr-area { --qr-size: 116px; --qr-hover: 255px; }
.payment-card.compact .qr-area { --qr-size: 96px; --qr-hover: 230px; }
.active-view-expanded .payment-card.expanded-card .qr-area { --qr-size: 142px; --qr-hover: 270px; }
.payment-row-qr { --qr-size: 54px; --qr-hover: 205px; }

.payment-card.qr-expanded {
  overflow: visible !important;
  border-color: rgba(28, 197, 117, .64) !important;
  box-shadow: 0 0 0 1px rgba(28, 197, 117, .16), 0 24px 72px rgba(0,0,0,.28) !important;
}

.payment-card.compact.qr-expanded .payment-main,
.payment-card.compact.featured.qr-expanded .payment-main,
.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-main {
  display: grid !important;
  grid-template-columns: var(--qr-hover, 245px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.payment-card.compact.qr-expanded .qr-area,
.payment-card.compact.featured.qr-expanded .qr-area,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-area,
.payment-card.compact.qr-expanded .qr-lift-layer,
.payment-card.compact.featured.qr-expanded .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-lift-layer,
.payment-card.compact.qr-expanded .qr-area.qr-pinned .qr-lift-layer,
.payment-card.compact.featured.qr-expanded .qr-area.qr-pinned .qr-lift-layer,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-area.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--qr-hover, 245px) !important;
  min-width: var(--qr-hover, 245px) !important;
  height: var(--qr-hover, 245px) !important;
  min-height: var(--qr-hover, 245px) !important;
  flex: 0 0 var(--qr-hover, 245px) !important;
  transform: none !important;
  z-index: 5 !important;
}

.payment-card.qr-expanded .qr-box,
.payment-row.qr-expanded .qr-box {
  border-radius: 16px !important;
  box-shadow: 0 0 0 2px rgba(42,111,255,.52), 0 18px 54px rgba(0,0,0,.42) !important;
}

.payment-card.qr-expanded .payment-info {
  min-width: 0 !important;
  align-self: stretch !important;
  padding-top: 2px !important;
}

.payment-card.qr-expanded .payment-head,
.payment-card.qr-expanded .payment-currency-line {
  min-width: 0 !important;
}

.payment-card.qr-expanded .payment-head h3 {
  white-space: nowrap !important;
  font-size: clamp(18px, 1.35vw, 24px) !important;
}

.payment-card.qr-expanded .payment-meta {
  grid-template-columns: repeat(5, minmax(72px, 1fr)) !important;
  gap: 7px !important;
}

.payment-card.qr-expanded .payment-meta div {
  min-width: 0 !important;
}

.payment-card.qr-expanded .payment-meta b,
.payment-card.qr-expanded .payment-meta span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.payment-card.qr-expanded .payment-actions {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.payment-row.qr-expanded {
  --row-qr-hover: 205px;
  display: grid !important;
  grid-template-columns: var(--row-qr-hover) minmax(0, 1fr) minmax(82px, auto) minmax(118px, auto) !important;
  min-height: calc(var(--row-qr-hover) + 20px) !important;
  align-items: center !important;
  overflow: visible !important;
  border-color: rgba(42,111,255,.68) !important;
  background: rgba(7, 16, 31, .96) !important;
  transform: none !important;
}

.payment-row.qr-expanded .payment-row-qr,
.payment-row.qr-expanded .payment-row-qr.qr-pinned,
.payment-row.qr-expanded .payment-row-qr .qr-lift-layer,
.payment-row.qr-expanded .payment-row-qr.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--row-qr-hover) !important;
  min-width: var(--row-qr-hover) !important;
  height: var(--row-qr-hover) !important;
  min-height: var(--row-qr-hover) !important;
  flex: 0 0 var(--row-qr-hover) !important;
  transform: none !important;
  z-index: 5 !important;
}

.payment-row.qr-expanded .payment-row-main,
.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub,
.payment-row.qr-expanded .payment-row-status,
.payment-row.qr-expanded .payment-row-actions {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  min-width: 0 !important;
}

.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub {
  flex-wrap: wrap !important;
}

.payment-row.qr-expanded .payment-row-title b {
  font-size: 15px !important;
}

.payment-row.qr-expanded .payment-row-title span,
.payment-row.qr-expanded .payment-row-sub {
  font-size: 10px !important;
}

.payment-row.qr-expanded .payment-row-actions {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.payment-row.qr-expanded .payment-row-actions .btn {
  min-height: 34px !important;
}

@media (max-width: 1500px) {
  .payment-card.compact.featured .qr-area { --qr-hover: 230px; }
  .payment-card.compact .qr-area { --qr-hover: 210px; }
  .payment-row-qr { --qr-hover: 185px; }

  .payment-card.qr-expanded .payment-meta {
    grid-template-columns: repeat(3, minmax(74px, 1fr)) !important;
  }

  .payment-row.qr-expanded {
    --row-qr-hover: 185px;
    grid-template-columns: var(--row-qr-hover) minmax(0, 1fr) !important;
  }

  .payment-row.qr-expanded .payment-row-status,
  .payment-row.qr-expanded .payment-row-actions {
    grid-column: 2 !important;
  }

  .payment-row.qr-expanded .payment-row-actions {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
}

/* === Operator cockpit v9: focused QR workflow ===
   Compact mode now works like an operator queue:
   hover any queued QR -> that payment becomes the featured card with full info. */
.payment-card.compact.featured .qr-area {
  --qr-size: 136px;
  --qr-hover: 360px;
}

.payment-card.compact .qr-area {
  --qr-size: 112px;
  --qr-hover: 320px;
}

.payment-card.compact.featured.qr-expanded {
  min-height: 340px;
}

.payment-card.compact.featured.qr-expanded .payment-main {
  grid-template-columns: 360px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

.payment-card.compact.featured.qr-expanded .qr-area,
.payment-card.compact.featured.qr-expanded .qr-lift-layer {
  width: 360px !important;
  min-width: 360px !important;
  height: 360px !important;
  min-height: 360px !important;
}

.payment-card.compact.featured.qr-expanded .payment-head h3 {
  font-size: 26px !important;
}

.payment-card.compact.featured.qr-expanded .payment-head p,
.payment-card.compact.featured.qr-expanded .payment-currency-line {
  font-size: 14px !important;
}

.payment-card.compact.featured.qr-expanded .payment-meta {
  grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}

.payment-card.compact.featured.qr-expanded .payment-meta div {
  padding: 11px !important;
}

.payment-card.compact.featured.qr-expanded .payment-meta span {
  font-size: 11px !important;
}

.payment-card.compact.featured.qr-expanded .payment-meta b {
  font-size: 13px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-card.compact.featured.qr-expanded .payment-actions {
  margin-top: 8px;
  gap: 10px;
}

.payment-card.compact.featured.qr-expanded .payment-actions .paid-btn {
  min-width: 160px;
  min-height: 44px;
}

.payment-row {
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

.payment-row:hover {
  border-color: rgba(42, 111, 255, 0.82) !important;
  background: rgba(15, 30, 56, 0.56) !important;
  transform: translateX(2px);
}

.payment-row.qr-expanded {
  grid-template-columns: 66px minmax(0, 1fr) minmax(76px, auto) minmax(122px, auto) !important;
  min-height: 62px !important;
}

.payment-row.qr-expanded .payment-row-qr,
.payment-row.qr-expanded .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  width: 66px !important;
  min-width: 66px !important;
  height: 66px !important;
  min-height: 66px !important;
}

.payment-row.qr-expanded .payment-row-main,
.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub {
  opacity: 1 !important;
}

.payment-row-title b {
  font-size: 14px;
}

.payment-row-title span,
.payment-row-sub {
  font-size: 11px;
}

/* Expanded mode: less crowded, readable detailed list instead of dense grid. */
.payments-expanded-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.active-view-expanded .payment-card.expanded-card {
  min-height: auto;
  padding: 14px !important;
}

.active-view-expanded .payment-card.expanded-card .payment-main {
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

.active-view-expanded .payment-card.expanded-card .qr-area {
  --qr-size: 160px;
  --qr-hover: 300px;
}

.active-view-expanded .payment-card.expanded-card .payment-meta {
  grid-template-columns: repeat(5, minmax(110px, 1fr)) !important;
  gap: 8px !important;
}

.active-view-expanded .payment-card.expanded-card.qr-expanded .payment-main {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}

.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-area,
.active-view-expanded .payment-card.expanded-card.qr-expanded .qr-lift-layer {
  width: 300px !important;
  min-width: 300px !important;
  height: 300px !important;
  min-height: 300px !important;
}

@media (max-width: 1450px) {
  .payment-card.compact.featured.qr-expanded .payment-main {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }
  .payment-card.compact.featured.qr-expanded .qr-area,
  .payment-card.compact.featured.qr-expanded .qr-lift-layer {
    width: 320px !important;
    min-width: 320px !important;
    height: 320px !important;
    min-height: 320px !important;
  }
  .payment-card.compact.featured.qr-expanded .payment-meta {
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  }
}

/* === Operator cockpit v10: stable selected-payment workflow ===
   Hover по QR только выключает звук. Выбор заявки наверх — только кликом. */
.payment-card.compact.featured.selected-payment.qr-expanded {
  min-height: 315px !important;
  padding: 16px !important;
  border-color: rgba(28, 197, 117, .68) !important;
  box-shadow: 0 0 0 1px rgba(28, 197, 117, .16), 0 22px 72px rgba(0,0,0,.26) !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-main {
  display: grid !important;
  grid-template-columns: 315px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .qr-area,
.payment-card.compact.featured.selected-payment.qr-expanded .qr-lift-layer,
.payment-card.compact.featured.selected-payment.qr-expanded .qr-area.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 315px !important;
  min-width: 315px !important;
  height: 315px !important;
  min-height: 315px !important;
  flex: 0 0 315px !important;
  transform: none !important;
  z-index: 5 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .qr-box {
  border-radius: 18px !important;
  box-shadow: 0 0 0 2px rgba(42,111,255,.50), 0 18px 54px rgba(0,0,0,.38) !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-info {
  padding-top: 2px !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-head > div {
  min-width: 0 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-head h3 {
  font-size: 25px !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-head p {
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-currency-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-meta {
  grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
  gap: 10px !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-meta div {
  padding: 11px !important;
  min-width: 0 !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-meta span {
  font-size: 11px !important;
  margin-bottom: 6px !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-meta b {
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-actions {
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.payment-card.compact.featured.selected-payment.qr-expanded .payment-actions .paid-btn {
  flex: 0 0 auto !important;
  min-width: 170px !important;
  min-height: 44px !important;
  font-size: 14px !important;
}

/* Очередь теперь стабильная: hover не меняет геометрию, только подсвечивает QR и гасит звук. */
.payment-row,
.payment-row.qr-expanded {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) minmax(88px, auto) minmax(128px, auto) !important;
  min-height: 74px !important;
  align-items: center !important;
  cursor: pointer !important;
}

.payment-row:hover {
  border-color: rgba(42, 111, 255, 0.82) !important;
  background: rgba(15, 30, 56, 0.62) !important;
  transform: none !important;
}

.payment-row-qr,
.payment-row.qr-expanded .payment-row-qr,
.payment-row-qr.qr-pinned,
.payment-row-qr .qr-lift-layer,
.payment-row.qr-expanded .payment-row-qr .qr-lift-layer,
.payment-row-qr.qr-pinned .qr-lift-layer {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 66px !important;
  min-width: 66px !important;
  height: 66px !important;
  min-height: 66px !important;
  flex: 0 0 66px !important;
  transform: none !important;
  z-index: 3 !important;
}

.payment-row-qr:hover .qr-box,
.payment-row-qr.qr-pinned .qr-box {
  box-shadow: 0 0 0 2px rgba(42,111,255,.58), 0 0 24px rgba(42,111,255,.22) !important;
}

.payment-row-main,
.payment-row-title,
.payment-row-sub,
.payment-row-status,
.payment-row-actions,
.payment-row.qr-expanded .payment-row-main,
.payment-row.qr-expanded .payment-row-title,
.payment-row.qr-expanded .payment-row-sub,
.payment-row.qr-expanded .payment-row-status,
.payment-row.qr-expanded .payment-row-actions {
  opacity: 1 !important;
  min-width: 0 !important;
}

.payment-row-title b,
.payment-row.qr-expanded .payment-row-title b {
  font-size: 15px !important;
}

.payment-row-title span,
.payment-row-sub,
.payment-row.qr-expanded .payment-row-title span,
.payment-row.qr-expanded .payment-row-sub {
  font-size: 12px !important;
}

.payment-row-actions,
.payment-row.qr-expanded .payment-row-actions {
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.active-queue-head span {
  color: #8ea3c7 !important;
}

@media (max-width: 1500px) {
  .payment-card.compact.featured.selected-payment.qr-expanded .payment-main {
    grid-template-columns: 285px minmax(0, 1fr) !important;
  }
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-area,
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-lift-layer,
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-area.qr-pinned .qr-lift-layer {
    width: 285px !important;
    min-width: 285px !important;
    height: 285px !important;
    min-height: 285px !important;
    flex-basis: 285px !important;
  }
  .payment-card.compact.featured.selected-payment.qr-expanded .payment-meta {
    grid-template-columns: repeat(2, minmax(112px, 1fr)) !important;
  }
}

@media (max-width: 1200px) {
  .payment-card.compact.featured.selected-payment.qr-expanded .payment-main {
    grid-template-columns: 1fr !important;
  }
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-area,
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-lift-layer,
  .payment-card.compact.featured.selected-payment.qr-expanded .qr-area.qr-pinned .qr-lift-layer {
    width: 260px !important;
    min-width: 260px !important;
    height: 260px !important;
    min-height: 260px !important;
    flex-basis: 260px !important;
  }
  .payment-row,
  .payment-row.qr-expanded {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
  .payment-row-status,
  .payment-row-actions,
  .payment-row.qr-expanded .payment-row-status,
  .payment-row.qr-expanded .payment-row-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }
}

/* === Operator cockpit v11: selected payment + full active list === */
.active-queue-list {
  gap: 9px;
  padding-left: 0;
  overflow: visible;
}

.payment-row.selected-row {
  position: relative;
  transform: none !important;
  padding-left: 34px !important;
  border-color: rgba(28, 197, 117, 0.72) !important;
  background: linear-gradient(90deg, rgba(18, 120, 72, 0.20), rgba(6, 13, 26, 0.88)) !important;
  box-shadow: inset 18px 0 0 rgba(18, 120, 72, 0.16), 0 0 0 1px rgba(28, 197, 117, 0.10) !important;
}

.payment-row.selected-row::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #20d37a;
  box-shadow: 0 0 0 4px rgba(32, 211, 122, 0.14), 0 0 14px rgba(32, 211, 122, 0.42);
  transform: translateY(-50%);
  z-index: 2;
}

.payment-row.selected-row .payment-row-title b {
  color: #ffffff;
}

.payment-row.selected-row .payment-row-title span {
  color: #bdebd0;
}

/* In compact mode the list always shows every active payment, including selected one. */
.active-queue-head span {
  color: #9cadc9;
}

.payment-card.compact.featured .payment-main {
  grid-template-columns: 330px minmax(0, 1fr) !important;
  align-items: center !important;
}

.payment-card.compact.featured .qr-area,
.payment-card.compact.featured .qr-lift-layer {
  --qr-size: 300px;
  width: 300px !important;
  min-width: 300px !important;
  height: 300px !important;
  min-height: 300px !important;
}

.payment-card.compact.featured .qr-box {
  border-radius: 18px;
  padding: 10px;
}

.payment-card.compact.featured .payment-info {
  min-width: 0;
}

.payment-card.compact.featured .payment-head h3 {
  font-size: 28px;
}

.payment-card.compact.featured .payment-currency-line {
  gap: 10px;
  flex-wrap: wrap;
}

.payment-card.compact.featured .payment-meta {
  grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
}

.payment-card.compact.featured .payment-meta div {
  min-width: 0;
}

.payment-card.compact.featured .payment-meta b {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1500px) {
  .payment-card.compact.featured .payment-main {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  .payment-card.compact.featured .qr-area,
  .payment-card.compact.featured .qr-lift-layer {
    --qr-size: 260px;
    width: 260px !important;
    min-width: 260px !important;
    height: 260px !important;
    min-height: 260px !important;
  }

  .payment-card.compact.featured .payment-meta {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 1100px) {
  .payment-card.compact.featured .payment-main {
    grid-template-columns: 1fr !important;
  }
}

/* === Operator cockpit v13: selected row pocket + sticky expanded QR === */
.active-view-expanded .payment-card.expanded-card.qr-expanded {
  border-color: rgba(28, 197, 117, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(28, 197, 117, 0.14), 0 16px 46px rgba(0, 0, 0, 0.16) !important;
}

.payment-row.selected-row {
  width: 100%;
  box-sizing: border-box;
}


/* === Operator cockpit v14: dashboard shell polish === */
.main {
  padding-top: 18px;
}

.topline {
  align-items: center;
  gap: 14px;
}

.topline h1 {
  letter-spacing: -0.02em;
}

.top-actions {
  gap: 8px;
}

.command-range.global-range-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(42, 111, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 14px 42px rgba(0,0,0,0.10);
}

.command-range.global-range-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2a6fff, #1cd27b);
  opacity: .8;
}

.command-range .range-row.compact {
  grid-template-columns: 132px 132px auto auto;
}

.range-presets {
  display: flex;
  gap: 6px;
  align-items: center;
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin-top: -2px;
}

.range-preset {
  border: 1px solid #263957;
  background: rgba(9, 20, 39, 0.88);
  color: #8fb7ff;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.range-preset:hover {
  border-color: #2a6fff;
  color: #ffffff;
}

.cockpit-merchants-card .mini-account {
  border-color: #1e2f4d;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.cockpit-merchants-card .mini-account:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 111, 255, 0.58);
  background: #0d172b;
}

.cockpit-merchants-card .mini-top {
  align-items: flex-start;
}

.cockpit-merchants-card .state-pill {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-blacklist-card {
  padding-bottom: 14px;
}

.compact-blacklist-card .blacklist-editor {
  margin-top: 6px;
}

.compact-blacklist-card .blacklist-chip {
  border-radius: 999px;
}

.compact-feed-card .feed-item {
  border-color: #1d3154;
  background: rgba(7, 16, 31, 0.72);
}

.compact-feed-card .feed-item.success {
  border-color: rgba(28, 197, 117, 0.32);
}

.compact-feed-card .feed-item.warning {
  border-color: rgba(245, 167, 35, 0.36);
}

.compact-feed-card .feed-item.danger {
  border-color: rgba(255, 82, 116, 0.36);
}

.active-head p {
  max-width: 720px;
}

@media (max-width: 1500px) {
  .command-range .range-row.compact {
    grid-template-columns: 120px 120px auto auto;
  }

  .range-presets {
    display: none;
  }
}

/* === Operator cockpit v15: compact global range strip === */
.operator-command-strip {
  margin-bottom: 14px !important;
}

.command-range.global-range-card {
  position: relative !important;
  min-height: 72px !important;
  padding: 14px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(210px, 340px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;
}

.command-range-title {
  align-self: center !important;
  min-width: 0 !important;
}

.command-range-title h2 {
  font-size: 16px !important;
  line-height: 1.15 !important;
  margin: 0 0 5px !important;
}

.command-range-title p {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.command-range .range-row.compact {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 120px 120px auto auto minmax(250px, auto) !important;
  gap: 8px !important;
  align-items: end !important;
  justify-content: end !important;
}

.command-range .range-row.compact label {
  min-width: 0 !important;
  flex: none !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

.command-range .range-row.compact input {
  width: 100% !important;
  height: 36px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
}

.command-range .range-row.compact .btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
}

.dashboard-gateway-toggle-wrap {
  display: inline-flex !important;
}

.dashboard-gateway-toggle-wrap .btn {
  min-width: 72px !important;
}

.range-presets {
  grid-column: auto !important;
  justify-content: flex-start !important;
  align-self: end !important;
  margin-top: 0 !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.range-preset {
  height: 26px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

@media (max-width: 1500px) {
  .command-range.global-range-card {
    grid-template-columns: minmax(190px, 280px) minmax(0, 1fr) !important;
  }

  .command-range .range-row.compact {
    grid-template-columns: 112px 112px auto auto !important;
  }

  .range-presets {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
    margin-top: -1px !important;
  }
}

@media (max-width: 980px) {
  .command-range.global-range-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .command-range .range-row.compact {
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  .command-range .range-row.compact .btn,
  .dashboard-gateway-toggle-wrap,
  .dashboard-gateway-toggle-wrap .btn {
    width: 100% !important;
  }

  .range-presets {
    justify-content: flex-start !important;
  }
}

/* === Operator cockpit v16: merchant mini cards + edit modal === */
.cockpit-merchants-card .cockpit-merchant {
  padding: 12px !important;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(12, 22, 40, 0.98), rgba(8, 15, 29, 0.98)) !important;
  border: 1px solid rgba(36, 55, 87, 0.92) !important;
}

.cockpit-merchants-card .cockpit-merchant:hover {
  border-color: rgba(42, 111, 255, 0.62) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}

.cockpit-merchant-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start !important;
}

.mini-title-wrap {
  min-width: 0;
}

.mini-title-wrap h3,
.mini-title-wrap p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mini-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(42, 111, 255, 0.38);
  background: rgba(12, 26, 50, 0.88);
  color: #bcd2ff;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mini-icon-btn:hover {
  color: #ffffff;
  border-color: rgba(42, 111, 255, 0.82);
  background: rgba(42, 111, 255, 0.18);
}

.mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 9px 0 2px;
}

.mini-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(18, 28, 48, 0.92);
  border: 1px solid rgba(64, 80, 109, 0.72);
  color: #8fa2c3;
  font-size: 10px;
  font-weight: 900;
}

.mini-badge.ok {
  color: #79f0ad;
  border-color: rgba(28, 197, 117, 0.38);
  background: rgba(20, 108, 66, 0.14);
}

.mini-badge.missing {
  color: #ff8da3;
  border-color: rgba(255, 91, 125, 0.35);
  background: rgba(255, 91, 125, 0.12);
}

.cockpit-range-edit {
  margin-top: 8px !important;
}

.merchant-edit-modal .simple-modal-card,
.merchant-edit-card {
  width: min(980px, calc(100vw - 34px));
  max-height: min(86vh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(42, 111, 255, 0.32);
  background: linear-gradient(135deg, rgba(16, 24, 43, 0.98), rgba(7, 13, 26, 0.98));
}

.merchant-edit-head {
  flex-shrink: 0;
}

.merchant-edit-body {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.merchant-edit-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.merchant-edit-summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  background: rgba(7, 13, 26, 0.62);
  border: 1px solid rgba(36, 55, 87, 0.78);
}

.merchant-edit-summary h3 {
  margin: 0 0 4px;
  font-size: 22px;
}

.merchant-edit-summary p {
  margin: 0;
  color: #7f8eab;
  font-weight: 750;
}

.merchant-edit-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.merchant-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.merchant-edit-grid .system-field {
  grid-column: 1 / -1;
}

.merchant-edit-grid.secrets-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.merchant-edit-section-title {
  margin: 2px 0 -6px;
  color: #f4f7ff;
  font-size: 14px;
  font-weight: 950;
}

.modal-range-row {
  min-width: 0 !important;
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.modal-auto-box {
  margin-top: 0;
}

.merchant-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 0 0;
  background: linear-gradient(180deg, rgba(10, 18, 34, 0), rgba(10, 18, 34, 0.96) 28%);
}

.merchant-edit-actions .btn {
  min-height: 38px;
  padding: 9px 13px;
}

@media (max-width: 980px) {
  .merchant-edit-status-grid,
  .merchant-edit-grid,
  .merchant-edit-grid.secrets-grid,
  .modal-range-row {
    grid-template-columns: 1fr;
  }

  .merchant-edit-actions {
    justify-content: stretch;
  }

  .merchant-edit-actions .btn {
    flex: 1 1 140px;
  }
}