:root {
  --ink: #17252b;
  --muted: #66777b;
  --line: #e3ebec;
  --surface: #ffffff;
  --canvas: #f5f8f7;
  --brand: #16859a;
  --brand-dark: #0f6678;
  --brand-soft: #edf8f9;
  --green: #12b76a;
  --red: #f04438;
  --shadow-sm: 0 3px 12px rgba(22, 72, 82, 0.055);
  --shadow-md: 0 12px 32px rgba(22, 72, 82, 0.085);
}

/* Dedicated batch refund */
.batch-refund-dialog {
  width: min(980px, calc(100% - 28px));
  max-width: 980px;
}

.batch-refund-modal {
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .86);
  border-radius: 25px;
  background:
    radial-gradient(circle at 7% 0, rgba(209, 250, 229, .92), transparent 30%),
    radial-gradient(circle at 94% 5%, rgba(254, 226, 226, .58), transparent 31%),
    rgba(255, 255, 255, .98);
  box-shadow: 0 30px 80px rgba(15, 23, 42, .2);
}

.batch-refund-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  gap: 13px;
  align-items: center;
  padding: 21px 25px 17px;
}

.batch-refund-title-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #047857;
  border: 1px solid rgba(16, 185, 129, .2);
  border-radius: 15px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 9px 20px rgba(5, 150, 105, .12);
}

.batch-refund-title-icon svg,
.batch-refund-close svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-refund-header span {
  color: #059669;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.batch-refund-header h2 {
  margin: 2px 0 0;
  color: #172033;
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.025em;
}

.batch-refund-header p {
  margin: 3px 0 0;
  color: #7b879a;
  font-size: 11px;
}

.batch-refund-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #8793a5;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  transition: .16s ease;
}

.batch-refund-close:hover {
  color: #b42318;
  border-color: rgba(248, 113, 113, .28);
  background: #fff7f7;
  transform: translateY(-1px);
}

.batch-refund-review,
.batch-refund-result {
  min-height: 0;
  padding: 0 25px 23px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.batch-refund-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(190px, 1.25fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(167, 243, 208, .72);
  border-radius: 18px;
  background: rgba(167, 243, 208, .48);
  box-shadow: 0 12px 28px rgba(5, 150, 105, .06);
}

.batch-refund-overview > span,
.batch-refund-overview > div {
  min-height: 75px;
  padding: 14px 16px;
  background: rgba(250, 255, 253, .95);
}

.batch-refund-overview small {
  display: block;
  color: #829087;
  font-size: 10px;
}

.batch-refund-overview strong {
  display: block;
  margin-top: 5px;
  color: #284438;
  font-size: 16px;
}

.batch-refund-overview > div {
  text-align: right;
  background: linear-gradient(135deg, #064e3b, #059669);
}

.batch-refund-overview > div small {
  color: rgba(255, 255, 255, .68);
}

.batch-refund-overview > div strong {
  margin-top: 2px;
  color: #fff;
  font-size: 18px;
}

.batch-refund-overview > div b {
  font-size: 27px;
  letter-spacing: -.03em;
}

.batch-refund-detail-section {
  margin-top: 15px;
}

.batch-refund-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 8px;
}

.batch-refund-section-heading strong,
.batch-refund-section-heading small {
  display: block;
}

.batch-refund-section-heading strong {
  color: #344054;
  font-size: 13px;
}

.batch-refund-section-heading small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 10px;
}

.batch-refund-section-heading > span {
  padding: 5px 9px;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  background: #ecfdf5;
  font-size: 10px;
  font-weight: 750;
}

.batch-refund-table-wrap {
  max-height: 292px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  scrollbar-gutter: stable;
}

.batch-refund-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
}

.batch-refund-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  color: #758296;
  border-bottom: 1px solid #e7edf2;
  background: rgba(246, 249, 251, .98);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.batch-refund-table td {
  padding: 11px 12px;
  color: #617084;
  border-bottom: 1px solid #edf1f4;
  font-size: 11px;
  vertical-align: middle;
}

.batch-refund-table tbody tr:last-child td {
  border-bottom: 0;
}

.batch-refund-table tbody tr:hover {
  background: rgba(236, 253, 245, .48);
}

.batch-refund-table tbody tr.is-unavailable {
  background: rgba(248, 250, 252, .78);
}

.batch-refund-table td strong,
.batch-refund-table td small {
  display: block;
}

.batch-refund-table td strong {
  color: #344054;
  font-size: 12px;
}

.batch-refund-table td small {
  margin-top: 2px;
  color: #98a2b3;
  font-size: 9px;
  line-height: 1.45;
}

.batch-refund-machine-id strong {
  color: #047857 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px !important;
}

.batch-refund-amount strong {
  color: #047857 !important;
  font-size: 14px !important;
}

.batch-refund-status {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #047857 !important;
  background: #ecfdf5;
  font-size: 10px !important;
}

.batch-refund-status.is-unavailable,
.batch-refund-status.is-failed {
  color: #b42318 !important;
  background: #fff1f1;
}

.batch-refund-status.is-pending {
  color: #b54708 !important;
  background: #fff7e8;
}

.batch-refund-loading-row td {
  height: 96px;
  color: #748196;
  text-align: center;
}

.batch-refund-warning {
  display: flex;
  gap: 10px;
  margin-top: 13px;
  padding: 11px 13px;
  color: #7a5b18;
  border: 1px solid #f5dfa8;
  border-radius: 14px;
  background: #fffbeb;
}

.batch-refund-warning svg {
  width: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: #d08a12;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-refund-warning strong,
.batch-refund-warning span {
  display: block;
}

.batch-refund-warning strong {
  font-size: 11px;
}

.batch-refund-warning span {
  margin-top: 2px;
  color: #947032;
  font-size: 10px;
}

.batch-refund-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 11px;
  padding: 11px 13px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  cursor: pointer;
}

.batch-refund-confirm input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #059669;
}

.batch-refund-confirm strong,
.batch-refund-confirm small {
  display: block;
}

.batch-refund-confirm strong {
  color: #344054;
  font-size: 11px;
}

.batch-refund-confirm small {
  margin-top: 2px;
  color: #8a96a8;
  font-size: 10px;
}

.batch-refund-manual-offer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin-top: 11px;
  padding: 11px 13px;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0f9ff, #f7fcff);
}

.batch-refund-manual-offer[hidden],
.batch-refund-manual-form[hidden] {
  display: none;
}

.batch-refund-manual-offer-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #0369a1;
  border-radius: 11px;
  background: #e0f2fe;
  font-size: 17px;
  font-weight: 850;
}

.batch-refund-manual-offer strong,
.batch-refund-manual-offer small {
  display: block;
}

.batch-refund-manual-offer strong {
  color: #284456;
  font-size: 11px;
}

.batch-refund-manual-offer small {
  margin-top: 2px;
  color: #678194;
  font-size: 10px;
}

.batch-refund-manual-offer button {
  padding: 8px 12px;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  border-radius: 10px;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.batch-refund-manual-offer button:hover {
  border-color: #38bdf8;
  background: #eaf8ff;
}

.batch-refund-manual-form {
  margin-top: 13px;
  padding: 14px;
  border: 1px solid #bae6fd;
  border-radius: 16px;
  background: rgba(248, 252, 255, .94);
}

.batch-refund-manual-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.batch-refund-manual-heading span,
.batch-refund-manual-heading strong,
.batch-refund-manual-heading small {
  display: block;
}

.batch-refund-manual-heading span {
  color: #0284c7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .08em;
}

.batch-refund-manual-heading strong {
  margin-top: 2px;
  color: #263b4a;
  font-size: 13px;
}

.batch-refund-manual-heading small {
  color: #71879a;
  font-size: 9px;
}

.batch-refund-manual-rows {
  display: grid;
  gap: 7px;
  max-height: 218px;
  margin-top: 10px;
  overflow-y: auto;
}

.batch-refund-manual-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto 132px;
  gap: 11px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #e0edf4;
  border-radius: 12px;
  background: #fff;
}

.batch-refund-manual-row > div strong,
.batch-refund-manual-row > div small,
.batch-refund-manual-row > small {
  display: block;
}

.batch-refund-manual-row > div strong {
  color: #0369a1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.batch-refund-manual-row > div small,
.batch-refund-manual-row > small {
  margin-top: 2px;
  color: #8596a5;
  font-size: 9px;
}

.batch-refund-manual-money {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cbdce7;
  border-radius: 10px;
  background: #fff;
}

.batch-refund-manual-money span {
  padding-left: 10px;
  color: #64798a;
  font-size: 11px;
}

.batch-refund-manual-money input {
  width: 100%;
  min-width: 0;
  padding: 8px 9px 8px 4px;
  color: #17384a;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.batch-refund-manual-money:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}

.batch-refund-manual-money.is-invalid {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .1);
}

.batch-refund-manual-reason {
  display: block;
  margin-top: 10px;
}

.batch-refund-manual-reason > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.batch-refund-manual-reason strong {
  color: #3b4d5b;
  font-size: 10px;
}

.batch-refund-manual-reason small {
  color: #8a9aa7;
  font-size: 9px;
}

.batch-refund-manual-reason textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 10px 11px;
  color: #344054;
  border: 1px solid #d7e3ea;
  border-radius: 11px;
  outline: 0;
  background: #fff;
  font-size: 11px;
  line-height: 1.55;
}

.batch-refund-manual-reason textarea:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .11);
}

.batch-refund-manual-note {
  margin: 7px 1px 0;
  color: #718495;
  font-size: 9px;
}

.batch-refund-error {
  margin-top: 10px;
  padding: 9px 11px;
  color: #b42318;
  border: 1px solid #fecaca;
  border-radius: 11px;
  background: #fff5f5;
  font-size: 10px;
}

.batch-refund-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 13px;
}

.batch-refund-cancel {
  display: inline-flex;
  min-width: 118px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 15px;
  color: #536071;
  border: 1px solid #d9dfe7;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #f7f8fa);
  box-shadow: 0 2px 7px rgba(15, 23, 42, .055);
  font-size: 12px;
  font-weight: 750;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.batch-refund-cancel svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.batch-refund-cancel:hover {
  color: #344054;
  border-color: #bcc5d0;
  background: #f2f4f7;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

.batch-refund-cancel:active {
  box-shadow: none;
  transform: translateY(0);
}

.batch-refund-cancel:focus-visible {
  outline: 3px solid rgba(100, 116, 139, .16);
  outline-offset: 2px;
}

.batch-refund-submit,
.batch-refund-complete {
  min-width: 190px;
  padding: 11px 17px;
  color: #fff;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #047857, #10b981);
  box-shadow: 0 10px 22px rgba(5, 150, 105, .18);
  font-size: 12px;
  font-weight: 800;
}

.batch-refund-submit:disabled {
  color: #9aa5b5;
  background: #e9eef2;
  box-shadow: none;
  cursor: not-allowed;
}

.batch-refund-result {
  padding-top: 2px;
}

.batch-refund-result-summary {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px 17px;
  color: #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(110, 231, 183, .28), transparent 34%),
    linear-gradient(135deg, #064e3b, #047857);
}

.batch-refund-result-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

.batch-refund-result-icon svg {
  width: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-refund-result-summary span,
.batch-refund-result-summary p {
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
}

.batch-refund-result-summary h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.batch-refund-result-summary p {
  margin: 3px 0 0;
}

.batch-refund-result-summary > strong {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  white-space: nowrap;
  font-size: 18px;
}

.batch-refund-result-summary > strong small {
  margin-bottom: 1px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 700;
}

.batch-refund-result-summary > strong b {
  font-size: 28px;
}

.batch-refund-result-table-wrap {
  max-height: 330px;
  margin-top: 14px;
}

.batch-refund-result-note {
  margin-top: 11px;
  padding: 9px 11px;
  color: #8a6114;
  border-radius: 11px;
  background: #fffbeb;
  font-size: 10px;
}

.batch-refund-complete {
  display: block;
  margin: 13px 0 0 auto;
}

@media (max-width: 700px) {
  .batch-refund-dialog {
    width: calc(100% - 16px);
    margin: 8px auto;
  }

  .batch-refund-modal {
    max-height: calc(100vh - 16px);
    border-radius: 21px;
  }

  .batch-refund-header {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    padding: 16px;
  }

  .batch-refund-review,
  .batch-refund-result {
    padding: 0 16px 17px;
  }

  .batch-refund-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-refund-overview > div {
    text-align: left;
  }

  .batch-refund-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .batch-refund-result-summary {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .batch-refund-result-summary > strong {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    text-align: right;
  }

  .batch-refund-actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }

  .batch-refund-manual-offer {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .batch-refund-manual-offer button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .batch-refund-manual-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .batch-refund-manual-row {
    grid-template-columns: 1fr 120px;
  }

  .batch-refund-manual-row > small {
    grid-column: 1 / -1;
  }

  .batch-refund-submit,
  .batch-refund-complete,
  .batch-refund-cancel {
    min-width: 0;
    width: 100%;
  }
}

/* Profile purchase orders */
.profile-orders-panel {
  margin-top: 1.2rem;
  overflow: hidden;
  border: 1px solid #e3e7ef;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(103, 91, 255, 0.07), transparent 28%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(38, 46, 74, 0.07);
}

.profile-orders-heading {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid #edf0f5;
}

.profile-orders-heading span {
  display: block;
  margin-bottom: 0.18rem;
  color: #766ef0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.profile-orders-heading h2 {
  margin: 0;
  color: #202738;
  font-size: 1.12rem;
  font-weight: 780;
}

.profile-orders-heading p {
  margin: 0.25rem 0 0;
  color: #8b94a5;
  font-size: 0.78rem;
}

.profile-orders-heading > a {
  padding: 0.66rem 0.92rem;
  color: #5c55d9;
  border: 1px solid #d4e8ea;
  border-radius: 11px;
  background: #f5f8fb;
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
}

.profile-order-list {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.profile-order-item {
  padding: 1rem 1.05rem;
  border: 1px solid #e7eaf1;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #fbfcff);
  box-shadow: 0 5px 15px rgba(42, 51, 78, 0.04);
}

.profile-order-main,
.profile-order-number,
.profile-order-actions,
.profile-order-pagination {
  display: flex;
  align-items: center;
}

.profile-order-main {
  justify-content: space-between;
  gap: 0.8rem;
}

.profile-order-number {
  min-width: 0;
  gap: 0.55rem;
}

.profile-order-number > span,
.profile-order-details span {
  color: #98a1b2;
  font-size: 0.7rem;
  font-weight: 650;
}

.profile-order-number strong {
  overflow: hidden;
  color: #343b4d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-order-number button {
  flex: 0 0 auto;
  padding: 0.3rem 0.5rem;
  color: #625bd7;
  border: 0;
  border-radius: 7px;
  background: #f0f4f9;
  font-size: 0.68rem;
  font-weight: 750;
}

.profile-order-status {
  flex: 0 0 auto;
  padding: 0.36rem 0.62rem;
  color: #687386;
  border: 1px solid #e0e4eb;
  border-radius: 999px;
  background: #f7f8fa;
  font-size: 0.7rem;
  font-weight: 750;
}

.profile-order-status.is-success {
  color: #147a55;
  border-color: #bdebd8;
  background: #edfbf5;
}

.profile-order-status.is-refunded {
  color: #386c9b;
  border-color: #cfe4f5;
  background: #f0f8ff;
}

.profile-order-status.is-processing,
.profile-order-status.is-pending {
  color: #96661e;
  border-color: #f0dfb5;
  background: #fff9e9;
}

.profile-order-status.is-error {
  color: #b34343;
  border-color: #f2caca;
  background: #fff3f3;
}

.profile-order-details {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(130px, 0.65fr);
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0.85rem 0;
  border-top: 1px solid #eff1f5;
  border-bottom: 1px solid #eff1f5;
}

.profile-order-details > div {
  display: grid;
  min-width: 0;
  gap: 0.16rem;
}

.profile-order-details strong {
  overflow: hidden;
  color: #2c3445;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-order-details small {
  overflow: hidden;
  color: #9aa3b2;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-order-price {
  color: #5f57df !important;
  font-size: 0.94rem !important;
}

.profile-order-message {
  margin: 0.72rem 0 0;
  padding: 0.62rem 0.72rem;
  color: #9c4747;
  border-radius: 9px;
  background: #fff5f5;
  font-size: 0.72rem;
}

.profile-order-actions {
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.profile-order-actions a {
  padding: 0.42rem 0.68rem;
  color: #667085;
  border: 1px solid #e0e4eb;
  border-radius: 8px;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.profile-order-actions a.is-support {
  color: #5d56d8;
  border-color: #d4e8ea;
  background: #f5f8fb;
}

.profile-orders-empty {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #9099a9;
  flex-direction: column;
  text-align: center;
}

.profile-orders-empty strong {
  color: #31394a;
}

.profile-orders-empty span {
  margin-top: 0.25rem;
  font-size: 0.78rem;
}

.profile-orders-empty a {
  margin-top: 0.8rem;
  color: #625bd9;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.profile-order-pagination {
  justify-content: center;
  gap: 0.8rem;
  padding: 0 1rem 1.15rem;
}

.profile-order-pagination a,
.profile-order-pagination span {
  padding: 0.45rem 0.7rem;
  color: #626b7a;
  border: 1px solid #e2e6ed;
  border-radius: 8px;
  background: #fff;
  font-size: 0.72rem;
  text-decoration: none;
}

.profile-order-pagination span {
  color: #8179e7;
  border-color: #e1defe;
  background: #f8fbfb;
}

.profile-order-pagination a.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}

@media (max-width: 700px) {
  .profile-order-main {
    align-items: flex-start;
  }

  .profile-order-number {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-order-number strong {
    width: calc(100% - 3.8rem);
  }

  .profile-order-details {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .profile-order-actions {
    justify-content: stretch;
  }

  .profile-order-actions a {
    flex: 1;
    text-align: center;
  }
}

/* Account center redesign */
.account-hub {
  display: grid;
  gap: 1rem;
  padding-bottom: 1rem;
}

.account-hero {
  position: relative;
  display: flex;
  min-height: 190px;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 2.15rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 25px;
  background:
    linear-gradient(120deg, rgba(28, 37, 76, 0.98), rgba(75, 67, 211, 0.94) 62%, rgba(104, 94, 238, 0.91));
  box-shadow: 0 20px 50px rgba(56, 54, 150, 0.2);
  isolation: isolate;
}

.account-hero::after {
  position: absolute;
  z-index: -1;
  right: 18%;
  bottom: -72px;
  width: 260px;
  height: 160px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.account-hero-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.account-hero-orb-one {
  top: -95px;
  right: -45px;
  width: 250px;
  height: 250px;
  background: rgba(116, 222, 255, 0.2);
}

.account-hero-orb-two {
  bottom: -100px;
  left: 35%;
  width: 200px;
  height: 200px;
  background: rgba(184, 140, 255, 0.19);
}

.account-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1.25rem;
}

.account-avatar {
  display: grid;
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  color: rgba(69, 74, 96, 0.72);
  border: 4px solid rgba(255, 255, 255, 0.88);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(228, 232, 244, 0.96));
  box-shadow: 0 16px 30px rgba(12, 17, 50, 0.28);
  object-fit: cover;
}

.account-avatar svg {
  width: 44px;
  height: 44px;
}

.account-identity-copy {
  min-width: 0;
}

.account-kicker {
  color: rgba(218, 224, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.account-identity-copy h1 {
  max-width: 520px;
  overflow: hidden;
  margin: 0.35rem 0 0.28rem;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 790;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-identity-copy p {
  margin: 0;
  color: rgba(232, 235, 255, 0.76);
  font-size: 0.82rem;
}

.account-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}

.account-badges > span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.55rem;
  color: rgba(255, 255, 255, 0.87);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.67rem;
  font-weight: 650;
  backdrop-filter: blur(9px);
}

.account-badges i,
.account-online-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #78e6b7;
  box-shadow: 0 0 0 3px rgba(120, 230, 183, 0.14);
}

.account-badges .is-warning i {
  background: #ffc96c;
  box-shadow: 0 0 0 3px rgba(255, 201, 108, 0.14);
}

.account-hero-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.65rem;
}

.account-hero-actions a,
.account-hero-actions button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  padding: 0.68rem 0.86rem;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  font-weight: 740;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease;
}

.account-hero-actions a:hover,
.account-hero-actions button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.account-hero-actions a.is-primary,
.account-hero-actions button.is-primary {
  color: #514ac7;
  border-color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.94);
}

.account-hero-actions svg {
  width: 17px;
  height: 17px;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.account-stats article {
  display: flex;
  min-height: 88px;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(223, 227, 237, 0.88);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(40, 49, 75, 0.055);
}

.account-stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #557bd7;
  border-radius: 13px;
  background: #edf4ff;
}

.account-stat-icon.is-violet {
  color: #6d59dd;
  background: #f2efff;
}

.account-stat-icon.is-green {
  color: #29966b;
  background: #eaf9f2;
}

.account-stat-icon svg {
  width: 21px;
  height: 21px;
}

.account-stats article > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.32rem;
  flex-wrap: wrap;
}

.account-stats small {
  width: 100%;
  color: #8b95a7;
  font-size: 0.7rem;
  font-weight: 650;
}

.account-stats strong {
  color: #242b3a;
  font-size: 1.28rem;
  line-height: 1.1;
}

.account-stats em {
  color: #a0a8b6;
  font-size: 0.68rem;
  font-style: normal;
}

.account-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(265px, 0.75fr);
  gap: 1rem;
}

.account-content-grid.account-content-single {
  grid-template-columns: 1fr;
}

.account-panel,
.account-orders-card {
  overflow: hidden;
  border: 1px solid rgba(224, 228, 237, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 10px 30px rgba(38, 47, 72, 0.06);
}

.account-panel-heading {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #eff1f5;
}

.account-panel-heading span:not(.account-online-pill) {
  color: #766ee8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.account-panel-heading h2 {
  margin: 0.12rem 0 0;
  color: #242b3a;
  font-size: 1rem;
}

.account-panel-heading p {
  margin: 0.2rem 0 0;
  color: #98a1b1;
  font-size: 0.7rem;
}

.account-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.34rem 0.56rem;
  color: #237c5c;
  border: 1px solid #ccebdd;
  border-radius: 999px;
  background: #f0fbf6;
  font-size: 0.68rem;
  font-weight: 700;
}

.account-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.85rem;
}

.account-info-grid > article {
  display: flex;
  min-width: 0;
  min-height: 86px;
  justify-content: center;
  padding: 0.85rem 0.92rem;
  border: 1px solid #eceff4;
  border-radius: 13px;
  background: #fbfcfe;
  flex-direction: column;
}

.account-info-grid article > span,
.account-phone-tile > div > span {
  color: #929cab;
  font-size: 0.67rem;
  font-weight: 650;
}

.account-info-grid article > strong {
  overflow: hidden;
  margin-top: 0.25rem;
  color: #2c3444;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-info-grid article > small,
.account-phone-tile > div > small {
  margin-top: 0.14rem;
  color: #a3abb8;
  font-size: 0.65rem;
}

.account-phone-tile {
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between !important;
  gap: 1rem;
  flex-direction: row !important;
}

.account-phone-tile > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.account-phone-tile .phone-bind-status {
  margin-top: 0.25rem;
  font-size: 0.82rem;
}

.account-phone-action {
  flex: 0 0 auto;
  padding: 0.56rem 0.72rem;
  color: #6058d8;
  border: 1px solid #d4e8ea;
  border-radius: 9px;
  background: #f6f5ff;
  font-size: 0.7rem;
  font-weight: 750;
}

.account-phone-action:disabled {
  opacity: 0.46;
}

.account-shortcuts nav {
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
}

.account-shortcuts nav > a,
.account-shortcuts nav form > button {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: center;
  gap: 0.68rem;
  padding: 0.62rem 0.68rem;
  color: #303848;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.account-shortcuts nav > a:hover,
.account-shortcuts nav form > button:hover {
  border-color: #e6e5fa;
  background: #f9f9ff;
  transform: translateX(2px);
}

.account-shortcuts nav > a > span,
.account-shortcuts nav form span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #685ee2;
  border-radius: 11px;
  background: #f0f4f9;
}

.account-shortcuts nav span.is-amber {
  color: #ae741d;
  background: #fff6df;
}

.account-shortcuts nav span.is-blue {
  color: #477fc3;
  background: #edf6ff;
}

.account-shortcuts nav span.is-red {
  color: #c45b55;
  background: #fff0ef;
}

.account-shortcuts nav svg {
  width: 19px;
  height: 19px;
}

.account-shortcuts nav div {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
  flex: 1;
}

.account-shortcuts nav strong {
  font-size: 0.76rem;
}

.account-shortcuts nav small {
  color: #a0a8b5;
  font-size: 0.65rem;
}

.account-shortcuts nav b {
  color: #b5bcc7;
  font-size: 1rem;
}

.account-orders-card {
  margin-top: 0;
}

.account-orders-card.profile-orders-panel {
  border-color: rgba(224, 228, 237, 0.9);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(38, 47, 72, 0.06);
}

.account-orders-card .profile-orders-empty {
  min-height: 145px;
}

.account-orders-dialog {
  width: min(900px, calc(100% - 1.5rem));
  max-width: 900px;
}

.account-orders-modal {
  overflow: hidden;
  border: 1px solid rgba(226, 229, 239, 0.9);
  border-radius: 22px;
  background: #f7f8fb;
  box-shadow: 0 28px 75px rgba(30, 38, 68, 0.22);
}

.account-orders-modal-header {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e9ecf2;
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 93, 238, 0.11), transparent 35%),
    #fff;
}

.account-orders-modal-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.account-orders-modal-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  color: #675ee0;
  border-radius: 13px;
  background: #f0eeff;
}

.account-orders-modal-icon svg {
  width: 21px;
  height: 21px;
}

.account-orders-modal-title > div > span {
  color: #766ee8;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.account-orders-modal-title h2 {
  margin: 0.12rem 0 0;
  color: #252c3c;
  font-size: 1.05rem;
}

.account-orders-modal-title p {
  margin: 0.16rem 0 0;
  color: #929cab;
  font-size: 0.69rem;
}

.account-orders-close {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #737d8d;
  border: 1px solid #e3e6ec;
  border-radius: 11px;
  background: #f8f9fb;
}

.account-orders-close:hover {
  color: #4d46bb;
  border-color: #d9d5ff;
  background: #f2f0ff;
}

.account-orders-close svg {
  width: 17px;
  height: 17px;
}

.account-orders-modal-body {
  padding: 0.85rem;
}

.account-order-filters {
  position: sticky;
  z-index: 3;
  top: -0.85rem;
  display: flex;
  gap: 0.4rem;
  margin: -0.15rem -0.1rem 0.75rem;
  padding: 0.55rem 0.1rem;
  overflow-x: auto;
  background: rgba(247, 248, 251, 0.94);
  backdrop-filter: blur(12px);
  scrollbar-width: none;
}

.account-order-filters::-webkit-scrollbar {
  display: none;
}

.account-order-filters button,
.account-order-filters a {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.34rem;
  padding: 0 0.72rem;
  color: #687386;
  border: 1px solid #dfe3ea;
  border-radius: 999px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 720;
  text-decoration: none;
}

.account-order-filters button.is-active,
.account-order-filters a.is-active {
  color: #fff;
  border-color: #625add;
  background: linear-gradient(135deg, #7269e8, #5851cb);
  box-shadow: 0 7px 16px rgba(98, 90, 221, 0.2);
}

.account-order-filters a > span {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 0.25rem;
  color: #8a93a2;
  border-radius: 999px;
  background: #f1f3f7;
  font-size: 0.58rem;
}

.account-order-filters a.is-active > span {
  color: #5d56ce;
  background: rgba(255, 255, 255, 0.92);
}

.account-modal-order-list {
  display: grid;
  gap: 0.7rem;
}

.account-modal-order {
  padding: 0.9rem;
  border: 1px solid #e4e7ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(38, 47, 72, 0.04);
}

.account-modal-order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.account-modal-order-top > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.account-modal-order-top > div > span,
.account-modal-order-content span {
  color: #99a2b1;
  font-size: 0.66rem;
  font-weight: 650;
}

.account-modal-order-top strong {
  overflow: hidden;
  color: #333b4b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-modal-order-top button {
  flex: 0 0 auto;
  padding: 0.27rem 0.46rem;
  color: #625bd8;
  border: 0;
  border-radius: 7px;
  background: #f0f4f9;
  font-size: 0.65rem;
  font-weight: 750;
}

.account-modal-order-content {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.72rem;
  padding: 0.7rem 0;
  border-top: 1px solid #eff1f5;
  border-bottom: 1px solid #eff1f5;
}

.account-modal-order-content > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.account-modal-order-content strong {
  overflow: hidden;
  color: #303747;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-modal-order-content small {
  overflow: hidden;
  color: #a1a9b6;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-modal-order-price {
  color: #625add !important;
  font-size: 0.86rem !important;
}

.account-order-finance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.account-order-finance > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  background: #fafbfc;
}

.account-order-finance span {
  color: #8993a2;
  font-size: 0.62rem;
  font-weight: 650;
}

.account-order-finance strong {
  color: #343c4c;
  font-size: 0.88rem;
  font-weight: 800;
}

.account-order-finance small {
  overflow: hidden;
  color: #a0a8b4;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-finance .is-refunded {
  border-color: #cfe4f5;
  background: #f3f9fe;
}

.account-order-finance .is-refunded strong {
  color: #386c9b;
}

.account-order-finance .is-net {
  border-color: #cce9dc;
  background: #f2faf6;
}

.account-order-finance .is-net strong {
  color: #147a55;
}

.account-order-machines {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  margin-top: 0.65rem;
  padding: 0.6rem 0.68rem;
  border: 1px solid #e2ece7;
  border-radius: 10px;
  background: #f8fbf9;
}

.account-order-machines > span {
  color: #718078;
  font-size: 0.65rem;
  font-weight: 700;
}

.account-order-machines > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.account-order-machines a {
  padding: 0.18rem 0.45rem;
  color: #147a55;
  border: 1px solid #c9e8d9;
  border-radius: 7px;
  background: #edfaf4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  font-weight: 750;
  text-decoration: none;
}

.account-order-refunds {
  margin-top: 0.68rem;
  overflow: hidden;
  border: 1px solid #dbe8f2;
  border-radius: 11px;
  background: #f8fbfe;
}

.account-order-refunds-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.72rem;
  border-bottom: 1px solid #e3edf5;
  background: #f2f8fd;
}

.account-order-refunds-heading strong {
  color: #385c7b;
  font-size: 0.72rem;
}

.account-order-refunds-heading span {
  color: #68839a;
  font-size: 0.62rem;
}

.account-order-refund-list {
  display: grid;
}

.account-order-refund {
  display: grid;
  grid-template-columns:
    minmax(105px, 0.9fr)
    minmax(90px, 0.7fr)
    minmax(145px, 1fr)
    auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.72rem;
  border-top: 1px dashed #dce8f1;
}

.account-order-refund:first-child {
  border-top: 0;
}

.account-order-refund > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.account-order-refund > div > span {
  color: #8a9cad;
  font-size: 0.59rem;
}

.account-order-refund > div > strong {
  overflow: hidden;
  color: #43566a;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-refund-machine strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account-order-refund .account-order-refund-amount {
  color: #386c9b;
  font-size: 0.76rem;
}

.account-order-refund-status {
  align-items: flex-end;
}

.account-order-refund-status > span {
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  font-size: 0.59rem !important;
  font-weight: 750;
}

.account-order-refund-status > span.is-success {
  color: #147a55;
  background: #e7f8f0;
}

.account-order-refund-status > span.is-processing {
  color: #96661e;
  background: #fff5d9;
}

.account-order-refund-status > span.is-error {
  color: #b34343;
  background: #ffeded;
}

.account-order-refund-status button {
  padding: 0;
  color: #68839a;
  border: 0;
  background: transparent;
  font-size: 0.58rem;
}

.account-orders-filter-empty {
  padding: 2rem 1rem;
  color: #8c96a6;
  text-align: center;
  font-size: 0.72rem;
}

.account-modal-order-message {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  color: #a34848;
  border-radius: 8px;
  background: #fff3f3;
  font-size: 0.68rem;
}

.account-modal-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.account-modal-order-actions a {
  padding: 0.38rem 0.58rem;
  color: #687284;
  border: 1px solid #e1e4ea;
  border-radius: 8px;
  background: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  text-decoration: none;
}

.account-modal-order-actions a.is-support {
  color: #5e57d5;
  border-color: #d4e8ea;
  background: #f5f8fb;
}

.account-orders-empty {
  display: flex;
  min-height: 250px;
  align-items: center;
  justify-content: center;
  color: #939cab;
  flex-direction: column;
  text-align: center;
}

.account-orders-empty-icon {
  display: grid;
  width: 50px;
  height: 50px;
  margin-bottom: 0.7rem;
  place-items: center;
  color: #746ce5;
  border-radius: 15px;
  background: #efedff;
}

.account-orders-empty-icon svg {
  width: 24px;
  height: 24px;
}

.account-orders-empty strong {
  color: #313849;
}

.account-orders-empty > span:not(.account-orders-empty-icon) {
  margin-top: 0.22rem;
  font-size: 0.72rem;
}

.account-orders-empty a {
  margin-top: 0.72rem;
  color: #625bd8;
  font-size: 0.72rem;
  font-weight: 750;
  text-decoration: none;
}

.account-orders-limit-note {
  margin: 0.8rem 0 0;
  color: #929bab;
  font-size: 0.67rem;
  text-align: center;
}

.account-orders-modal-title p {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.account-orders-modal-title p i {
  padding: 0.12rem 0.33rem;
  color: #778194;
  border-radius: 999px;
  background: #f1f3f8;
  font-size: 0.57rem;
  font-style: normal;
  font-weight: 700;
}

.order-center-list {
  display: grid;
  gap: 0.7rem;
}

.order-center-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(39, 48, 73, 0.055);
}

.order-center-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: #6579df;
}

.order-center-item.is-renewal::before {
  background: #825dd8;
}

.order-center-item.is-refund::before {
  background: #4e9b80;
}

.order-center-item-header {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 63px;
  padding: 0.68rem 0.85rem 0.68rem 1rem;
  border-bottom: 1px solid #edf0f5;
  background: #fbfcfe;
}

.order-center-kind {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.order-center-kind-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: #5570d2;
  border-radius: 10px;
  background: #edf2ff;
  font-size: 0.94rem;
  font-weight: 850;
}

.is-renewal .order-center-kind-icon {
  color: #7750c7;
  background: #f3edff;
}

.is-refund .order-center-kind-icon {
  color: #258064;
  background: #eaf8f2;
}

.order-center-kind > div {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.order-center-kind strong {
  color: #303849;
  font-size: 0.75rem;
}

.order-center-kind time {
  color: #98a1b0;
  font-size: 0.6rem;
}

.order-center-number {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
}

.order-center-number > span {
  color: #9aa3b2;
  font-size: 0.61rem;
}

.order-center-number strong {
  overflow: hidden;
  color: #485064;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-center-number button,
.order-center-refund-summary button {
  flex: 0 0 auto;
  padding: 0.2rem 0.42rem;
  color: #625bd3;
  border: 0;
  border-radius: 6px;
  background: #efedff;
  font-size: 0.59rem;
  font-weight: 750;
}

.profile-order-status.is-closed {
  color: #77808e;
  border-color: #dde1e7;
  background: #f4f5f7;
}

.order-center-title,
.order-center-refund-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem 0.7rem;
}

.order-center-title > div:first-child,
.order-center-refund-summary > div:first-child {
  display: grid;
  min-width: 0;
  gap: 0.13rem;
}

.order-center-title small,
.order-center-refund-summary small,
.order-center-amount small {
  color: #929cab;
  font-size: 0.61rem;
  font-weight: 680;
}

.order-center-title > div:first-child > strong,
.order-center-refund-summary > div:first-child > strong {
  overflow: hidden;
  color: #2f3747;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-center-title > div:first-child > span,
.order-center-refund-summary > div:first-child > span {
  color: #8993a3;
  font-size: 0.64rem;
}

.order-center-refund-summary > div:first-child > span {
  display: flex;
  align-items: center;
  gap: 0.33rem;
  flex-wrap: wrap;
}

.order-center-refund-summary b {
  color: #586176;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.63rem;
}

.order-center-amount {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 0.08rem;
  text-align: right;
}

.order-center-amount strong {
  color: #4f60c9;
  font-size: 1.08rem;
  line-height: 1.15;
}

.order-center-amount.is-renewal strong {
  color: #7352c2;
}

.order-center-amount.is-refund strong {
  color: #1d8061;
}

.order-center-amount > span {
  color: #9aa3b0;
  font-size: 0.59rem;
}

.order-center-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0 1rem 0.78rem;
}

.order-center-metrics > div {
  display: grid;
  gap: 0.13rem;
  padding: 0.56rem 0.62rem;
  border: 1px solid #eaedf2;
  border-radius: 10px;
  background: #fafbfc;
}

.order-center-metrics span {
  color: #959ead;
  font-size: 0.59rem;
}

.order-center-metrics strong {
  overflow: hidden;
  color: #414a5b;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-center-machines {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  margin: 0 1rem 0.62rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid #e8e1f5;
  border-radius: 10px;
  background: #fbf9ff;
}

.order-center-machines > span {
  padding-top: 0.2rem;
  color: #84779a;
  font-size: 0.61rem;
  font-weight: 700;
}

.order-center-machines > div {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.order-center-machines a {
  padding: 0.18rem 0.42rem;
  color: #7352b8;
  border: 1px solid #ddd1f0;
  border-radius: 7px;
  background: #f5efff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.61rem;
  font-weight: 740;
  text-decoration: none;
}

.order-center-machines em {
  color: #9a92a7;
  font-size: 0.62rem;
  font-style: normal;
}

.order-center-expiry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin: 0 1rem 0.75rem;
  padding: 0.58rem 0.68rem;
  border-radius: 10px;
  background: #f5f2fb;
}

.order-center-expiry > div {
  display: grid;
  gap: 0.1rem;
}

.order-center-expiry > div:last-child {
  text-align: right;
}

.order-center-expiry span {
  color: #9389a5;
  font-size: 0.57rem;
}

.order-center-expiry strong {
  color: #554c65;
  font-size: 0.65rem;
}

.order-center-expiry i {
  color: #9b82cd;
  font-size: 0.8rem;
  font-style: normal;
}

.order-center-expiry.is-batch {
  grid-template-columns: 1fr;
}

.order-center-expiry.is-batch > div:last-child {
  text-align: left;
}

.order-center-calculation {
  margin: 0 1rem 0.78rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid #cfe9df;
  border-radius: 10px;
  background: #f2faf7;
}

.order-center-calculation > span {
  color: #3c836c;
  font-size: 0.6rem;
  font-weight: 760;
}

.order-center-calculation p {
  margin: 0.23rem 0 0;
  color: #45685c;
  font-size: 0.68rem;
  line-height: 1.55;
}

.order-center-refund-parts {
  margin: 0 1rem 0.78rem;
  overflow: hidden;
  border: 1px solid #e2e7ec;
  border-radius: 11px;
  background: #fbfcfd;
}

.order-center-refund-parts-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.58rem 0.68rem;
  border-bottom: 1px solid #e8ebef;
  background: #f6f8fa;
}

.order-center-refund-parts-heading > div {
  display: grid;
  gap: 0.06rem;
}

.order-center-refund-parts-heading strong {
  color: #465164;
  font-size: 0.75rem;
}

.order-center-refund-parts-heading span {
  color: #929dab;
  font-size: 0.68rem;
}

.order-center-refund-parts-heading > em {
  padding: 0.17rem 0.4rem;
  color: #527262;
  border-radius: 999px;
  background: #eaf5ef;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
}

.order-center-refund-parts-list {
  display: grid;
}

.order-center-refund-parts-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 45px;
  padding: 0.5rem 0.68rem;
  border-top: 1px dashed #e3e7eb;
}

.order-center-refund-parts-list article:first-child {
  border-top: 0;
}

.order-center-refund-source {
  min-width: 44px;
  padding: 0.19rem 0.36rem;
  color: #687285;
  border-radius: 6px;
  background: #edf0f4;
  font-size: 0.68rem;
  font-weight: 720;
  text-align: center;
}

.order-center-refund-parts-list article > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.34rem;
}

.order-center-refund-parts-list article > div strong {
  overflow: hidden;
  color: #566074;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-center-refund-parts-list article button {
  flex: 0 0 auto;
  padding: 0;
  color: #6b64d1;
  border: 0;
  background: transparent;
  font-size: 0.65rem;
}

.order-center-refund-parts-list article > b {
  color: #267d63;
  font-size: 0.78rem;
}

.order-center-refund-parts-list article > em {
  padding: 0.18rem 0.36rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 720;
}

.order-center-refund-parts-list article > em.is-success {
  color: #187457;
  background: #e9f8f1;
}

.order-center-refund-parts-list article > em.is-processing {
  color: #93651e;
  background: #fff5d9;
}

.order-center-refund-parts-list article > em.is-error {
  color: #aa4343;
  background: #ffeded;
}

.order-center-message {
  margin: 0 1rem 0.7rem;
  padding: 0.54rem 0.65rem;
  color: #a34848;
  border-radius: 9px;
  background: #fff2f2;
  font-size: 0.65rem;
}

.order-center-item-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.58rem 0.85rem 0.58rem 1rem;
  border-top: 1px solid #edf0f4;
  background: #fcfcfd;
}

.order-center-item-footer > span {
  color: #939cab;
  font-size: 0.6rem;
  line-height: 1.4;
}

.order-center-item-footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.order-center-item-footer a {
  padding: 0.34rem 0.52rem;
  color: #697386;
  border: 1px solid #dfe3e9;
  border-radius: 8px;
  background: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-decoration: none;
}

.order-center-item-footer a.is-support {
  color: #5f58d0;
  border-color: #dcd8fb;
  background: #f6f5ff;
}

.order-center-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.order-center-pagination > span {
  color: #8b95a5;
  font-size: 0.66rem;
}

.order-center-pagination > span strong {
  color: #515a6c;
}

.order-center-pagination a {
  padding: 0.38rem 0.68rem;
  color: #5e57d1;
  border: 1px solid #ddd9f8;
  border-radius: 9px;
  background: #fff;
  font-size: 0.65rem;
  font-weight: 720;
  text-decoration: none;
}

.order-center-pagination a.is-disabled {
  pointer-events: none;
  color: #b2b7c1;
  border-color: #e7e9ed;
  background: #f3f4f6;
}

.account-orders-filter-empty {
  display: grid;
  min-height: 200px;
  place-content: center;
  gap: 0.2rem;
  color: #939cab;
  text-align: center;
}

.account-orders-filter-empty strong {
  color: #41495a;
  font-size: 0.82rem;
}

.account-orders-filter-empty span {
  font-size: 0.67rem;
}

@media (max-width: 900px) {
  .account-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-hero-actions {
    width: 100%;
  }

  .account-hero-actions a,
  .account-hero-actions button {
    flex: 1;
  }

  .account-content-grid {
    grid-template-columns: 1fr;
  }

  .account-shortcuts nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .account-hub {
    gap: 0.75rem;
  }

  .account-hero {
    min-height: auto;
    gap: 1.1rem;
    padding: 1.2rem;
    border-radius: 20px;
  }

  .account-identity {
    width: 100%;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .account-avatar {
    width: 66px;
    height: 66px;
    border-width: 3px;
    border-radius: 20px;
  }

  .account-avatar svg {
    width: 33px;
    height: 33px;
  }

  .account-identity-copy {
    width: calc(100% - 78px);
  }

  .account-identity-copy h1 {
    margin-top: 0.25rem;
    font-size: 1.28rem;
  }

  .account-identity-copy p {
    font-size: 0.72rem;
  }

  .account-badges {
    gap: 0.35rem;
    margin-top: 0.68rem;
  }

  .account-badges > span {
    min-height: 24px;
    padding: 0.2rem 0.42rem;
    font-size: 0.61rem;
  }

  .account-hero-actions {
    gap: 0.5rem;
  }

  .account-hero-actions a,
  .account-hero-actions button {
    min-height: 39px;
    padding: 0.58rem;
    font-size: 0.7rem;
  }

  .account-stats {
    gap: 0.55rem;
  }

  .account-stats article {
    min-height: 78px;
    gap: 0.48rem;
    padding: 0.72rem 0.62rem;
    border-radius: 14px;
  }

  .account-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .account-stat-icon svg {
    width: 17px;
    height: 17px;
  }

  .account-stats strong {
    font-size: 1.05rem;
  }

  .account-stats em {
    display: none;
  }

  .account-panel,
  .account-orders-card {
    border-radius: 17px;
  }

  .account-panel-heading {
    min-height: 74px;
    padding: 0.85rem 0.95rem;
  }

  .account-info-grid {
    gap: 0.5rem;
    padding: 0.65rem;
  }

  .account-info-grid > article {
    min-height: 74px;
  }

  .account-shortcuts nav {
    gap: 0.25rem;
    padding: 0.55rem;
  }

  .account-shortcuts nav > a,
  .account-shortcuts nav form > button {
    min-height: 57px;
  }

  .account-orders-card .profile-orders-heading {
    gap: 0.7rem;
    padding: 1rem;
  }

  .account-orders-dialog {
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
  }

  .account-orders-modal {
    border-radius: 18px;
  }

  .account-orders-modal-header {
    min-height: 80px;
    padding: 0.9rem;
  }

  .account-orders-modal-body {
    padding: 0.65rem;
  }

  .account-modal-order-content {
    grid-template-columns: 1fr;
    gap: 0.52rem;
  }

  .account-modal-order-top {
    align-items: flex-start;
  }

  .account-modal-order-top > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .account-modal-order-top strong {
    width: calc(100% - 3.5rem);
  }

  .order-center-item-header {
    grid-template-columns: minmax(115px, auto) minmax(0, 1fr);
  }

  .order-center-item-header > .profile-order-status {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }

  .order-center-number {
    padding-right: 5.5rem;
  }

  .order-center-item-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .account-order-finance {
    grid-template-columns: 1fr;
  }

  .account-order-finance small {
    white-space: normal;
  }

  .account-order-refund {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .account-order-refund-status {
    align-items: flex-start;
  }

  .account-order-machines {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }

  .account-stats {
    grid-template-columns: 1fr;
  }

  .account-stats article {
    min-height: 68px;
  }

  .account-info-grid,
  .account-shortcuts nav {
    grid-template-columns: 1fr;
  }

  .account-phone-tile {
    grid-column: auto;
    align-items: flex-start;
    flex-direction: column !important;
  }

  .account-phone-action {
    width: 100%;
  }

  .profile-orders-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-orders-card .profile-orders-heading > a {
    align-self: stretch;
    text-align: center;
  }

  .account-orders-modal-title p i {
    display: none;
  }

  .order-center-item-header {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-right: 0.8rem;
  }

  .order-center-number {
    padding-right: 0;
  }

  .order-center-number strong {
    max-width: calc(100% - 5.3rem);
  }

  .order-center-title,
  .order-center-refund-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-center-amount {
    width: 100%;
    justify-items: start;
    text-align: left;
  }

  .order-center-metrics {
    grid-template-columns: 1fr;
  }

  .order-center-machines {
    grid-template-columns: 1fr;
  }

  .order-center-item-footer > div {
    width: 100%;
  }

  .order-center-item-footer a {
    flex: 1;
    text-align: center;
  }

  .order-center-refund-parts-list article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .order-center-refund-parts-list article > em {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

html {
  position: relative;
  min-height: 100%;
  font-size: 15px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

button,
input {
  font: inherit;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.btn:focus,
.btn:active:focus,
.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(22, 133, 154, 0.2);
  outline-offset: 2px;
  box-shadow: none;
}

.app-header {
  position: sticky;
  z-index: 1030;
  top: 0;
  border-bottom: 1px solid rgba(231, 234, 240, 0.88);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
  backdrop-filter: blur(18px);
}

.app-header .navbar {
  min-height: 74px;
  padding: 0.65rem 0;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: 2rem;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.navbar-brand:hover {
  color: var(--ink);
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(135deg, #3995a5, #0f6678);
  box-shadow: 0 7px 16px rgba(15, 102, 120, 0.26);
}

.brand-mark svg {
  width: 23px;
  height: 23px;
  stroke-width: 2;
}

.app-nav {
  display: flex;
  gap: 0.4rem;
}

.app-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 0.85rem !important;
  color: #5f6b7c;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 650;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.app-nav .nav-link svg {
  width: 19px;
  height: 19px;
}

.app-nav .nav-link:hover {
  color: var(--brand-dark);
  background: #f2f8f8;
  transform: translateY(-1px);
}

.app-nav .nav-link.active {
  color: var(--brand-dark);
  background: var(--brand-soft);
}

.account-area {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.account-chip:hover {
  color: var(--ink);
  border-color: #cbc8ff;
  box-shadow: var(--shadow-sm);
}

.account-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(145deg, #2a3348, #101828);
  font-size: 0.84rem;
  font-weight: 750;
}

.account-avatar-image {
  display: block;
  object-fit: cover;
  border: 2px solid #dcfae6;
  background: #ecfdf3;
}

.account-avatar-unbound {
  color: #7b8493;
  border: 1px solid #d8dde5;
  background: #eef1f5;
  box-shadow: none;
}

.account-avatar-unbound svg {
  width: 19px;
  height: 19px;
}

.wechat-bound-text {
  color: #079455 !important;
}

.wechat-unbound-text {
  color: #d97706 !important;
}

.account-copy {
  display: flex;
  min-width: 70px;
  flex-direction: column;
  line-height: 1.15;
}

.account-copy small {
  margin-bottom: 0.2rem;
  color: #98a2b3;
  font-size: 0.65rem;
}

.account-copy strong {
  overflow: hidden;
  max-width: 105px;
  color: #344054;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #667085;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  transition: all 0.18s ease;
}

.icon-button:hover {
  color: var(--red);
  border-color: #fecdca;
  background: #fff5f4;
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.navbar-toggler {
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 9px;
}

.app-main {
  min-height: calc(100vh - 150px);
  padding: 2rem 0 3.5rem;
}

.app-footer {
  padding: 1.4rem 0;
  color: #98a2b3;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: 0.8rem;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  padding: 2.15rem 2.3rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: linear-gradient(118deg, #111827 0%, #222752 58%, #4439a7 100%);
  box-shadow: 0 20px 44px rgba(21, 25, 54, 0.16);
}

.hero-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}

.hero-glow-one {
  top: -110px;
  right: 8%;
  width: 270px;
  height: 270px;
  background: rgba(117, 110, 255, 0.28);
}

.hero-glow-two {
  right: -80px;
  bottom: -140px;
  width: 290px;
  height: 290px;
  border: 60px solid rgba(255, 255, 255, 0.06);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.eyebrow {
  display: block;
  margin-bottom: 0.8rem;
  color: #a9d4da;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.eyebrow-dark {
  margin-bottom: 0.55rem;
  color: var(--brand);
}

.dashboard-hero h1,
.page-heading h1 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.dashboard-hero p {
  max-width: 620px;
  margin: 0;
  color: #cdd2df;
  font-size: 0.95rem;
}

.match-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.48rem 0.72rem;
  color: #dfe2eb;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

.match-pill strong {
  color: #fff;
}

.match-dot,
.online-text i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #32d583;
  box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.14);
}

.hero-action,
.btn-brand {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1rem;
  color: var(--ink);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hero-action:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 11px 25px rgba(0, 0, 0, 0.16);
}

.hero-action svg {
  width: 18px;
  height: 18px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}

.stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-icon,
.quick-icon {
  display: grid;
  width: 43px;
  height: 43px;
  grid-row: span 2;
  place-items: center;
  border-radius: 12px;
}

.stat-icon svg,
.quick-icon svg {
  width: 22px;
  height: 22px;
}

.stat-icon-blue {
  color: #2e68f0;
  background: #edf3ff;
}

.stat-icon-green {
  color: #039855;
  background: #ecfdf3;
}

.stat-icon-purple {
  color: #6938ef;
  background: #f3f8f8;
}

.stat-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.stat-card span:not(.stat-icon) {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.stat-card strong {
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
}

.stat-card small {
  color: #98a2b3;
  font-size: 0.72rem;
}

.content-panel,
.profile-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.3rem 1.45rem;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2,
.section-title-row h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 750;
}

.panel-heading p,
.section-title-row p {
  margin: 0;
  color: #98a2b3;
  font-size: 0.76rem;
}

.panel-heading p strong {
  color: var(--brand-dark);
  font-weight: 650;
}

.machine-search {
  display: flex;
  width: min(100%, 330px);
  min-height: 42px;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.65rem 0 0.8rem;
  color: #98a2b3;
  border: 1px solid #dfe3e9;
  border-radius: 11px;
  background: #fafbfc;
  transition: all 0.18s ease;
}

.machine-search:focus-within {
  color: var(--brand);
  border-color: #a9d4da;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.1);
}

.machine-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.machine-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink);
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.79rem;
}

.machine-search input::placeholder {
  color: #98a2b3;
}

.search-shortcut {
  padding: 0.18rem 0.35rem;
  color: #98a2b3;
  border: 1px solid #e4e7ec;
  border-radius: 5px;
  background: #fff;
  font-size: 0.6rem;
  white-space: nowrap;
}

.machine-table-wrap {
  position: relative;
  max-height: clamp(360px, calc(100vh - 300px), 900px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #cfd4dc transparent;
  scrollbar-width: thin;
}

.machine-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.machine-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.machine-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #cfd4dc;
  background-clip: padding-box;
}

.machine-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #aeb6c2;
  background-clip: padding-box;
}

.machine-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

.machine-table th {
  padding: 0.72rem 1.25rem;
  color: #7b8494;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-align: left;
  text-transform: uppercase;
}

.machine-table td {
  padding: 1rem 1.25rem;
  color: #475467;
  border-bottom: 1px solid #eff1f4;
  font-size: 0.8rem;
}

.machine-table tbody tr:last-child td {
  border-bottom: 0;
}

.machine-table tbody tr {
  transition: background 0.16s ease;
}

.machine-table tbody tr:hover {
  background: #f8fafc;
}

.machine-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.machine-avatar {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  place-items: center;
  color: #475467;
  border: 1px solid #e4e7ec;
  border-radius: 11px;
  background: #f8fafc;
}

.machine-avatar svg {
  width: 21px;
  height: 21px;
}

.machine-identity div,
.date-stack {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.machine-identity strong {
  color: #1d2939;
  font-size: 0.84rem;
}

.machine-identity span,
.date-stack small {
  color: #98a2b3;
  font-size: 0.7rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 0.58rem;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: currentColor;
}

.status-success {
  color: #027a48;
  background: #ecfdf3;
}

.status-danger {
  color: #b42318;
  background: #fef3f2;
}

.status-primary {
  color: #0f6678;
  background: #edf8f9;
}

.status-muted {
  color: #667085;
  background: #f2f4f7;
}

.package-tag {
  display: inline-flex;
  padding: 0.32rem 0.55rem;
  color: #344054;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 650;
}

.date-stack > span {
  color: #344054;
  white-space: nowrap;
}

.remark-cell {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty,
.empty-state {
  padding: 4rem 1rem;
  color: #98a2b3;
  text-align: center;
}

.empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 1rem;
  place-items: center;
  color: var(--brand);
  border-radius: 16px;
  background: var(--brand-soft);
}

.empty-icon svg {
  width: 29px;
  height: 29px;
}

.empty-state h3 {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-size: 1.05rem;
}

.empty-state p {
  margin: 0 0 1.2rem;
  font-size: 0.82rem;
}

.btn-brand {
  color: #fff;
  background: var(--brand);
  box-shadow: 0 8px 18px rgba(22, 133, 154, 0.2);
}

.btn-brand:hover {
  color: #fff;
  background: var(--brand-dark);
}

.notice-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid;
  border-radius: 13px;
}

.notice-danger {
  color: #912018;
  border-color: #fecdca;
  background: #fff6f5;
}

.notice-success {
  color: #05603a;
  border-color: #abefc6;
  background: #f6fef9;
}

.notice-success .notice-icon {
  background: #039855;
}

.notice-warning {
  color: #93370d;
  border-color: #fedf89;
  background: #fffcf5;
}

.notice-warning .notice-icon {
  background: #f79009;
}

.notice-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 99px;
  background: var(--red);
  font-weight: 800;
}

.notice-card p {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.7rem;
}

.page-heading h1 {
  margin-bottom: 0.35rem;
}

.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.heading-badge {
  padding: 0.52rem 0.75rem;
  color: #0f6678;
  border: 1px solid #cfe4e7;
  border-radius: 99px;
  background: #f3f8f8;
  font-size: 0.72rem;
  font-weight: 700;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 1.1rem;
}

.plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 1.6rem;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.plan-featured {
  border-color: #a9d4da;
  box-shadow: 0 16px 38px rgba(22, 133, 154, 0.12);
}

.popular-ribbon {
  position: absolute;
  top: 0;
  right: 1.4rem;
  padding: 0.4rem 0.65rem;
  color: #fff;
  border-radius: 0 0 8px 8px;
  background: var(--brand);
  font-size: 0.66rem;
  font-weight: 750;
}

.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.plan-icon {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 13px;
}

.plan-icon svg {
  width: 23px;
  height: 23px;
}

.plan-icon-blue {
  color: #2e68f0;
  background: #edf3ff;
}

.plan-icon-purple {
  color: #6938ef;
  background: #f3f8f8;
}

.plan-icon-orange {
  color: #dc6803;
  background: #fff6ed;
}

.plan-label {
  color: #98a2b3;
  font-size: 0.68rem;
  font-weight: 650;
}

.plan-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.25rem;
  font-weight: 760;
}

.plan-card > p {
  min-height: 42px;
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.65;
}

.price-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #eef0f3;
}

.price-line strong {
  font-size: 1.3rem;
  font-weight: 780;
}

.price-line span {
  color: #98a2b3;
  font-size: 0.75rem;
}

.feature-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.2rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 1.45rem;
  color: #475467;
  font-size: 0.79rem;
}

.feature-list li::before {
  position: absolute;
  top: 0.05rem;
  left: 0;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #027a48;
  border-radius: 99px;
  background: #dcfae6;
  content: "✓";
  font-size: 0.62rem;
  font-weight: 900;
}

.plan-button {
  width: 100%;
  margin-top: auto;
  padding: 0.72rem 1rem;
  color: #344054;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 720;
  transition: all 0.18s ease;
}

.plan-button:hover {
  color: var(--brand-dark);
  border-color: #a9d4da;
  background: #f8fbfb;
}

.plan-button-primary {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
}

.plan-button-primary:hover {
  color: #fff;
  border-color: var(--brand-dark);
  background: var(--brand-dark);
}

.service-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(110deg, #1d2939, #303b55);
}

.service-strip div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.service-strip span {
  color: #cfd4dc;
  font-size: 0.77rem;
}

.service-strip button {
  padding: 0.68rem 0.9rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
}

.custom-modal {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(16, 24, 40, 0.22);
}

.modal-success-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: auto;
  place-items: center;
  color: var(--brand);
  border-radius: 16px;
  background: var(--brand-soft);
}

.modal-success-icon svg {
  width: 27px;
  height: 27px;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 1.15rem;
}

.profile-summary {
  grid-row: span 2;
}

.profile-cover {
  height: 110px;
  background: linear-gradient(125deg, #1d2939, #0f6678);
}

.profile-content {
  display: flex;
  padding: 0 1.5rem 1.8rem;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.profile-avatar {
  display: grid;
  width: 82px;
  height: 82px;
  margin-top: -41px;
  place-items: center;
  color: #fff;
  border: 5px solid #fff;
  border-radius: 22px;
  background: linear-gradient(145deg, #4aa0ad, #0f6678);
  box-shadow: 0 8px 20px rgba(15, 102, 120, 0.22);
  font-size: 1.65rem;
  font-weight: 780;
}

.profile-avatar-image {
  display: block;
  object-fit: cover;
  background: #ecfdf3;
}

.profile-avatar-unbound {
  color: #7b8493;
  background: linear-gradient(145deg, #e7eaf0, #cfd5de);
  box-shadow: 0 8px 20px rgba(52, 64, 84, 0.15);
}

.profile-avatar-unbound svg {
  width: 38px;
  height: 38px;
}

.profile-content h2 {
  margin: 1rem 0 0.22rem;
  font-size: 1.2rem;
}

.profile-content p {
  margin: 0 0 0.8rem;
  color: #98a2b3;
  font-size: 0.77rem;
}

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.35rem 0.58rem;
  color: #027a48;
  border-radius: 99px;
  background: #ecfdf3;
  font-size: 0.68rem;
  font-weight: 700;
}

.verified-pill i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--green);
}

.verified-pill-unbound {
  color: #b54708;
  background: #fffaeb;
}

.verified-pill-unbound i {
  background: #f79009;
}

.account-details,
.quick-actions-card {
  padding: 1.4rem;
}

.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.security-badge {
  padding: 0.32rem 0.5rem;
  color: #475467;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  background: #f9fafb;
  font-size: 0.64rem;
  font-weight: 650;
}

.detail-list {
  margin: 0;
}

.detail-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.83rem 0;
  border-top: 1px solid #eff1f4;
}

.detail-list dt {
  color: #667085;
  font-size: 0.76rem;
  font-weight: 550;
}

.detail-list dd {
  margin: 0;
  color: #344054;
  font-size: 0.77rem;
  font-weight: 680;
}

.detail-list code {
  padding: 0.24rem 0.4rem;
  color: var(--brand-dark);
  border-radius: 5px;
  background: var(--brand-soft);
  font-size: 0.68rem;
}

.phone-detail-row dd {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.phone-bind-status {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-variant-numeric: tabular-nums;
}

.phone-bind-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px #ecfdf3;
}

.phone-bind-status.is-unbound {
  color: #98a2b3;
  font-weight: 600;
}

.phone-bind-status.is-unbound i {
  background: #f79009;
  box-shadow: 0 0 0 3px #fffaeb;
}

.phone-bind-entry {
  padding: 0.35rem 0.58rem;
  color: #0f6678;
  border: 1px solid #cfe4e7;
  border-radius: 7px;
  background: #f8fbfb;
  font-size: 0.66rem;
  font-weight: 720;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.phone-bind-entry:hover {
  color: #3730a3;
  border-color: #bdb7fc;
  background: #f0f4f9;
}

.phone-bind-entry:disabled {
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #f9fafb;
  cursor: not-allowed;
}

.phone-binding-modal {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.2);
}

.phone-binding-modal .modal-header {
  align-items: flex-start;
  padding: 1.35rem 1.4rem 1.1rem;
  border-bottom: 1px solid #eef0f4;
  background: linear-gradient(130deg, #fbfbff, #f7f9ff);
}

.phone-modal-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.phone-modal-heading > div {
  display: flex;
  flex-direction: column;
}

.phone-modal-heading > div > span {
  margin-bottom: 0.08rem;
  color: #16859a;
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.phone-modal-heading h2 {
  margin: 0;
  color: #1d2939;
  font-size: 1.05rem;
  font-weight: 780;
}

.phone-modal-heading p {
  margin: 0.18rem 0 0;
  color: #8a94a4;
  font-size: 0.68rem;
}

.phone-modal-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 13px;
  background: linear-gradient(145deg, #3995a5, #0f6678);
  box-shadow: 0 9px 20px rgba(15, 102, 120, 0.2);
}

.phone-modal-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.phone-binding-modal .modal-body {
  padding: 1.3rem 1.4rem 1rem;
}

.phone-field-label {
  display: block;
  margin: 0 0 0.42rem;
  color: #344054;
  font-size: 0.72rem;
  font-weight: 700;
}

.phone-field-label:not(:first-child) {
  margin-top: 1rem;
}

.phone-input-shell,
.phone-code-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid #dfe3e9;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.phone-input-shell:focus-within,
.phone-code-row:focus-within {
  border-color: #8179ff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.1);
}

.phone-input-shell > span {
  padding: 0 0.72rem;
  color: #667085;
  border-right: 1px solid #eaecf0;
  font-size: 0.75rem;
  font-weight: 700;
}

.phone-input-shell input,
.phone-code-row input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 0.75rem;
  color: #1d2939;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.78rem;
}

.phone-code-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.phone-code-row button {
  min-width: 104px;
  height: 32px;
  margin-right: 6px;
  padding: 0 0.7rem;
  color: #0f6678;
  border: 0;
  border-radius: 7px;
  background: #f0efff;
  font-size: 0.67rem;
  font-weight: 740;
}

.phone-code-row button:hover:not(:disabled) {
  color: #3730a3;
  background: #e6e3ff;
}

.phone-code-row button:disabled {
  color: #98a2b3;
  background: #f2f4f7;
}

.phone-binding-message {
  display: none;
  margin-top: 0.8rem;
  padding: 0.62rem 0.72rem;
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.5;
}

.phone-binding-message.is-visible {
  display: block;
}

.phone-binding-message.is-error {
  color: #b42318;
  border: 1px solid #fecdca;
  background: #fef3f2;
}

.phone-binding-message.is-success {
  color: #027a48;
  border: 1px solid #abefc6;
  background: #ecfdf3;
}

.phone-security-note {
  margin: 0.8rem 0 0;
  color: #98a2b3;
  font-size: 0.63rem;
  line-height: 1.55;
}

.phone-binding-modal .modal-footer {
  gap: 0.55rem;
  padding: 0.9rem 1.4rem 1.25rem;
  border-top: 0;
}

.phone-modal-cancel,
.phone-modal-confirm {
  min-width: 88px;
  height: 39px;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 720;
}

.phone-modal-cancel {
  color: #667085;
  border: 1px solid #dfe3e8;
  background: #fff;
}

.phone-modal-confirm {
  color: #fff;
  border: 1px solid #0f6678;
  background: #0f6678;
  box-shadow: 0 7px 16px rgba(15, 102, 120, 0.18);
}

.phone-modal-confirm:hover {
  background: #115c6c;
}

.phone-modal-confirm:disabled {
  opacity: 0.65;
}

.purchase-phone-confirm {
  position: relative;
  min-width: 118px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(92, 80, 221, 0.78);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(135deg, #8177ef 0%, #6257dc 54%, #5146c7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px rgba(82, 70, 199, 0.26);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.purchase-phone-confirm::after {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  content: "→";
  transition: transform 160ms ease;
}

.purchase-phone-confirm:hover:not(:disabled) {
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.4), transparent 42%),
    linear-gradient(135deg, #887ef5 0%, #655ae1 54%, #5146c7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 13px 27px rgba(82, 70, 199, 0.32);
  filter: saturate(1.04);
  transform: translateY(-1px);
}

.purchase-phone-confirm:hover:not(:disabled)::after {
  transform: translateX(3px);
}

.purchase-phone-confirm:active:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 14px rgba(82, 70, 199, 0.22);
  transform: translateY(0);
}

.purchase-phone-confirm:disabled::after {
  opacity: 0;
}

.purchase-phone-confirm:focus-visible {
  outline: 3px solid rgba(112, 103, 231, 0.24);
  outline-offset: 3px;
}

.online-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #027a48;
}

.quick-action-list {
  display: grid;
  gap: 0.55rem;
}

.quick-action-list a,
.quick-action-list button {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.72rem;
  color: var(--ink);
  border: 1px solid #eff1f4;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  transition: all 0.16s ease;
}

.quick-action-list a:hover,
.quick-action-list button:hover {
  border-color: #cfe4e7;
  background: #f8fafc;
  transform: translateX(2px);
}

.quick-action-list .quick-icon {
  width: 38px;
  height: 38px;
}

.quick-action-list div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.quick-action-list strong {
  font-size: 0.76rem;
}

.quick-action-list small {
  color: #98a2b3;
  font-size: 0.68rem;
}

.quick-action-list b {
  color: #98a2b3;
  font-size: 1.2rem;
  font-weight: 400;
}

.quick-icon-red {
  color: var(--red);
  background: #fef3f2;
}

.login-shell {
  display: grid;
  min-height: calc(100vh - 190px);
  padding: 2rem 0;
  place-items: center;
}

.login-card {
  overflow: hidden;
  width: min(100%, 440px);
  border: 1px solid rgba(231, 234, 240, 0.88);
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(16, 24, 40, 0.12);
}

.login-logo {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  place-items: center;
  color: #fff;
  border-radius: 15px;
  background: linear-gradient(135deg, #3995a5, #0f6678);
  box-shadow: 0 10px 22px rgba(15, 102, 120, 0.23);
}

.login-logo svg {
  width: 29px;
  height: 29px;
}

.login-card h1 {
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 780;
  letter-spacing: -0.03em;
}

.login-card .form-label {
  color: #344054;
  font-size: 0.76rem;
  font-weight: 680;
}

.login-card .form-control {
  min-height: 48px;
  color: var(--ink);
  border-color: #dce0e6;
  border-radius: 10px;
  background: #fbfcfd;
  font-size: 0.87rem;
}

.login-card .form-control:focus {
  border-color: #a9d4da;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.1);
}

.login-submit {
  min-height: 48px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(115deg, #16859a, #0f6678);
  box-shadow: 0 9px 20px rgba(15, 102, 120, 0.22);
  font-size: 0.86rem;
  font-weight: 750;
}

.login-submit:hover {
  color: #fff;
  background: linear-gradient(115deg, #554cff, #115c6c);
  transform: translateY(-1px);
}

.login-method-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  color: #b0b7c3;
  font-size: 0.64rem;
}

.login-method-divider::before,
.login-method-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: #eaecf0;
}

.wechat-login-button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: #fff;
  border: 1px solid #07a84f;
  border-radius: 10px;
  background: linear-gradient(115deg, #14b866, #079447);
  box-shadow: 0 8px 18px rgba(7, 148, 71, 0.16);
  font-size: 0.82rem;
  font-weight: 750;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wechat-login-button:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(7, 148, 71, 0.22);
}

.wechat-login-button.disabled {
  color: #98a2b3;
  border-color: #dfe3e8;
  background: #f5f6f8;
  box-shadow: none;
}

.wechat-login-button.disabled:hover {
  transform: none;
}

.wechat-login-icon {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.wechat-login-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.wechat-login-button.disabled .wechat-login-icon {
  background: #e8eaee;
}

.wechat-bind-card {
  width: min(100%, 460px);
}

.wechat-bind-heading {
  margin-bottom: 1.5rem;
  text-align: center;
}

.wechat-bind-heading > .wechat-login-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 0.85rem;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, #19bd69, #079447);
  box-shadow: 0 10px 22px rgba(7, 148, 71, 0.2);
}

.wechat-bind-heading > .wechat-login-icon svg {
  width: 31px;
  height: 31px;
}

.wechat-bind-heading h1 {
  margin: 0.25rem 0 0.4rem;
}

.wechat-bind-heading p {
  margin: 0;
  color: #7b8493;
  font-size: 0.72rem;
  line-height: 1.65;
}

.wechat-bind-cancel {
  display: block;
  margin-top: 1rem;
  color: #7b8493;
  font-size: 0.7rem;
  font-weight: 650;
  text-align: center;
}

.wechat-first-card {
  width: min(100%, 470px);
  border-color: #e4eee8;
  box-shadow: 0 24px 70px rgba(16, 92, 55, 0.11);
}

.wechat-first-heading {
  display: flex;
  align-items: center;
  margin-bottom: 1.45rem;
  flex-direction: column;
  text-align: center;
}

.wechat-hero-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin-bottom: 0.85rem;
  place-items: center;
  color: #fff;
  border-radius: 20px;
  background: linear-gradient(145deg, #20c875, #079447);
  box-shadow: 0 13px 28px rgba(7, 148, 71, 0.24);
}

.wechat-hero-icon svg {
  width: 36px;
  height: 36px;
}

.wechat-heading-badge,
.wechat-verified-label {
  display: inline-flex;
  margin-bottom: 0.45rem;
  padding: 0.25rem 0.52rem;
  color: #067647;
  border-radius: 99px;
  background: #ecfdf3;
  font-size: 0.64rem;
  font-weight: 750;
}

.wechat-first-heading h1 {
  margin: 0 0 0.38rem;
  font-size: 1.7rem;
}

.wechat-first-heading p {
  margin: 0;
  color: #7a8492;
  font-size: 0.78rem;
}

.login-alert {
  margin-bottom: 1rem;
  font-size: 0.75rem;
}

.wechat-primary-action {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.85rem;
  color: #fff;
  border: 1px solid #079447;
  border-radius: 14px;
  background: linear-gradient(115deg, #18b866, #078f46);
  box-shadow: 0 11px 25px rgba(7, 148, 71, 0.18);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wechat-primary-action:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 29px rgba(7, 148, 71, 0.24);
}

.wechat-primary-action .wechat-login-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.wechat-primary-action .wechat-login-icon svg {
  width: 25px;
  height: 25px;
}

.wechat-primary-action > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.wechat-primary-action strong {
  font-size: 0.88rem;
}

.wechat-primary-action small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.66rem;
}

.wechat-primary-action b {
  font-size: 1.45rem;
  font-weight: 400;
}

.wechat-primary-action.disabled {
  color: #98a2b3;
  border-color: #e1e5e9;
  background: #f4f6f7;
  box-shadow: none;
}

.wechat-primary-action.disabled small {
  color: #a7aeb8;
}

.wechat-register-entry {
  margin: 0.9rem 0 1.15rem;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.wechat-register-entry[open] {
  padding: 0.8rem;
  border-color: #dceee3;
  background: #f8fbf9;
}

.wechat-register-entry summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #7b8493;
  cursor: pointer;
  font-size: 0.74rem;
  list-style: none;
}

.wechat-register-entry summary::-webkit-details-marker {
  display: none;
}

.wechat-register-entry summary strong {
  color: #078f46;
  font-weight: 750;
}

.wechat-register-entry summary:hover strong {
  color: #056b36;
}

.wechat-register-entry[open] summary {
  justify-content: flex-start;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #e2eee6;
}

.wechat-register-start-form {
  padding-top: 0.8rem;
}

.wechat-register-start-form label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  color: #344054;
  font-size: 0.72rem;
  font-weight: 700;
}

.wechat-register-start-form label small {
  padding: 0.12rem 0.35rem;
  color: #667085;
  border-radius: 99px;
  background: #e9edeb;
  font-size: 0.56rem;
  font-weight: 650;
}

.wechat-register-start-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.wechat-register-start-input input {
  min-width: 0;
  height: 42px;
  padding: 0 0.75rem;
  color: #344054;
  border: 1px solid #d7dfda;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  font-size: 0.75rem;
}

.wechat-register-start-input input:focus {
  border-color: #62ba89;
  box-shadow: 0 0 0 3px rgba(7, 148, 71, 0.09);
}

.wechat-register-start-input button {
  padding: 0 0.8rem;
  color: #fff;
  border: 0;
  border-radius: 9px;
  background: #078f46;
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.wechat-register-start-input button:hover {
  background: #067a3c;
}

.wechat-register-start-form p {
  margin: 0.48rem 0 0;
  color: #8a9490;
  font-size: 0.61rem;
}

@media (max-width: 575.98px) {
  .wechat-register-start-input {
    grid-template-columns: 1fr;
  }

  .wechat-register-start-input button {
    min-height: 42px;
  }
}

/* =========================================================
   Fresh application theme
   Keep the immersive login page untouched; these overrides
   only apply to the signed-in application shell.
   ========================================================= */
:root {
  --ink: #243a35;
  --muted: #71827d;
  --line: #dfeae6;
  --surface: #ffffff;
  --canvas: #f4f9f7;
  --brand: #4b9588;
  --brand-dark: #34766b;
  --brand-soft: #eaf6f2;
  --green: #2da978;
  --red: #e45d5d;
  --shadow-sm: 0 4px 14px rgba(54, 94, 84, 0.055);
  --shadow-md: 0 14px 38px rgba(54, 94, 84, 0.09);
}

body.sidebar-layout {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 2%, rgba(151, 216, 199, 0.18), transparent 25rem),
    radial-gradient(circle at 98% 8%, rgba(159, 207, 225, 0.16), transparent 29rem),
    linear-gradient(145deg, #f7fbfa 0%, #f2f8f6 55%, #f8fbfc 100%);
}

.sidebar-layout .app-main {
  position: relative;
}

.sidebar-layout .content-container {
  width: min(100%, 1480px);
}

.sidebar-layout .app-sidebar {
  border-right: 1px solid rgba(196, 218, 211, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 252, 250, 0.96)),
    #ffffff;
  box-shadow: 8px 0 28px rgba(57, 91, 82, 0.055);
}

@media (min-width: 992px) {
  .sidebar-layout .app-sidebar {
    border-right: 1px solid rgba(196, 218, 211, 0.82) !important;
  }
}

.sidebar-layout .sidebar-brand {
  border-bottom-color: #e6efec;
}

.sidebar-layout .brand-mark {
  background: linear-gradient(145deg, #78b8ab, #418b80);
  box-shadow: 0 8px 20px rgba(75, 149, 136, 0.2);
}

.sidebar-layout .sidebar-brand strong,
.sidebar-layout .sidebar-user-info strong,
.sidebar-layout .sidebar-link {
  color: #2b403b;
}

.sidebar-layout .sidebar-brand span,
.sidebar-layout .sidebar-user-info small,
.sidebar-layout .sidebar-group-title,
.sidebar-layout .sidebar-link small {
  color: #81908c;
}

.sidebar-layout .sidebar-user-card {
  border-color: #dcebe6;
  background: linear-gradient(135deg, #ffffff, #eff8f5);
  box-shadow: 0 8px 22px rgba(66, 109, 98, 0.06);
}

.sidebar-layout .sidebar-link {
  border-color: transparent;
}

.sidebar-layout .sidebar-link:hover {
  color: #34766b;
  border-color: #dfeee9;
  background: #f0f8f5;
  transform: translateX(2px);
}

.sidebar-layout .sidebar-link.active {
  color: #2f7569;
  border-color: #cee5de;
  background: linear-gradient(90deg, #e9f6f1, #f5fbf9);
  box-shadow: inset 3px 0 0 #5aa395;
}

.sidebar-layout .sidebar-link-icon,
.sidebar-layout .sidebar-link.active .sidebar-link-icon {
  color: #4b8f83;
  background: #e7f3ef;
}

.sidebar-layout .sidebar-link.active small {
  color: #6f8e86;
}

.sidebar-layout .mobile-header {
  border-bottom-color: #dceae5;
  background: rgba(251, 254, 253, 0.92);
  box-shadow: 0 8px 24px rgba(52, 91, 81, 0.07);
}

.sidebar-layout :is(
  .content-panel,
  .purchase-room-picker,
  .market-plan-card,
  .promotion-stat-card,
  .promotion-wallet-card,
  .promotion-ledger-panel,
  .promotion-share-panel,
  .account-panel,
  .account-stat,
  .patrol-page,
  .patrol-toolbar,
  .patrol-monitor
) {
  border-color: #dfeae6;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(56, 94, 84, 0.07);
}

.sidebar-layout :is(
  .content-panel,
  .promotion-wallet-card,
  .promotion-ledger-panel,
  .promotion-share-panel,
  .account-panel,
  .patrol-toolbar
):hover {
  border-color: #d5e6e0;
}

.sidebar-layout :is(
  .btn-brand,
  .market-select-button.primary,
  .purchase-now-button.primary,
  .machine-connect-button,
  .account-phone-action
) {
  color: #ffffff;
  border-color: #4b9588;
  background: linear-gradient(135deg, #5ca798, #438b80);
  box-shadow: 0 7px 17px rgba(75, 149, 136, 0.18);
}

.sidebar-layout :is(
  .btn-brand,
  .market-select-button.primary,
  .purchase-now-button.primary,
  .machine-connect-button,
  .account-phone-action
):hover {
  color: #ffffff;
  border-color: #34766b;
  background: linear-gradient(135deg, #4f9c8e, #367d72);
  box-shadow: 0 9px 21px rgba(75, 149, 136, 0.22);
}

.sidebar-layout :is(.btn-soft, .patrol-tool-button, .machine-more-button) {
  color: #47645d;
  border-color: #d8e7e2;
  background: #f7fbfa;
  box-shadow: none;
}

.sidebar-layout :is(.btn-soft, .patrol-tool-button, .machine-more-button):hover {
  color: #31766a;
  border-color: #bddbd2;
  background: #edf7f4;
}

.sidebar-layout :is(input, select, textarea):focus {
  border-color: #78b6aa;
  box-shadow: 0 0 0 0.22rem rgba(75, 149, 136, 0.13);
}

/* Machine list: quiet rows, clear hierarchy, soft action colors. */
.sidebar-layout .content-panel:has(.machine-table-rows) {
  border: 1px solid #dde9e5;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(55, 91, 82, 0.075);
}

.sidebar-layout .machine-table-rows thead {
  color: #6f817c;
  background: rgba(240, 247, 245, 0.96);
}

.sidebar-layout .machine-table-rows thead th {
  border-bottom-color: #dce9e5;
}

.sidebar-layout .machine-table-rows tbody tr,
.sidebar-layout .machine-card-row.is-offline {
  border-color: #e2ebe8;
  background: #ffffff;
  box-shadow: 0 5px 15px rgba(59, 91, 83, 0.055);
}

.sidebar-layout .machine-table-rows tbody tr:hover {
  border-color: #c7dfd8;
  background: #fbfefd;
  box-shadow: 0 10px 24px rgba(59, 100, 89, 0.1);
  transform: translateY(-1px);
}

.sidebar-layout .machine-table-rows tbody tr.row-selected {
  border-color: #91c3b7;
  background: linear-gradient(90deg, #f2faf7, #ffffff);
  box-shadow: 0 8px 22px rgba(75, 149, 136, 0.12);
}

.sidebar-layout .machine-card-symbol,
.sidebar-layout .machine-card-row.is-offline .machine-card-symbol {
  color: #3c8579;
  border-color: #cfe4de;
  background: #edf7f4;
}

.sidebar-layout .machine-card-stat,
.sidebar-layout .machine-card-field,
.sidebar-layout .machine-card-actions-wrap {
  color: #334a44;
}

.sidebar-layout .machine-card-field .local-remark {
  border-color: #e0eae7;
  background: #f8fbfa;
}

.sidebar-layout .machine-card-field .local-remark:hover,
.sidebar-layout .machine-card-field .local-remark:focus-within {
  border-color: #a9d0c6;
  background: #ffffff;
}

.sidebar-layout .machine-card-actions-wrap .machine-connect-button {
  color: #ffffff;
  border-color: #4b9588;
  background: #4b9588;
}

.sidebar-layout .machine-card-actions-wrap .machine-support-button {
  color: #3f7890;
  border-color: #cfe2e9;
  background: #f0f8fb;
}

.sidebar-layout .machine-card-actions-wrap .machine-more-button {
  color: #60746e;
  border-color: #dce8e4;
  background: #f7faf9;
}

/* Purchase: room cards use airy white surfaces and one clear selection color. */
.sidebar-layout .purchase-room-picker {
  background:
    linear-gradient(135deg, rgba(237, 248, 244, 0.94), rgba(247, 251, 252, 0.96)),
    #ffffff;
}

.sidebar-layout .purchase-room-total {
  color: #2f766b;
  border-color: #cde4dd;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(61, 108, 96, 0.07);
}

.sidebar-layout .purchase-room-picker .purchase-room-track .server-room-option {
  border-color: #dce9e5;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 20px rgba(55, 92, 82, 0.065);
}

.sidebar-layout .purchase-room-picker .purchase-room-track .server-room-option:hover {
  border-color: #b9d9d0;
  box-shadow: 0 12px 28px rgba(60, 107, 95, 0.11);
}

.sidebar-layout .purchase-room-picker .purchase-room-track .server-room-option.active {
  border-color: #78b6aa;
  background: linear-gradient(145deg, #ffffff, #ecf7f3);
  box-shadow: 0 13px 30px rgba(75, 149, 136, 0.14);
}

.sidebar-layout .purchase-room-selected,
.sidebar-layout .purchase-room-picker .server-room-option.active .purchase-room-arrow {
  color: #397e73;
  border-color: #c8e2da;
  background: #e8f5f1;
}

.sidebar-layout .market-catalog-heading {
  border-color: #e0ebe7;
  background: rgba(255, 255, 255, 0.72);
}

.sidebar-layout .market-available-total.has-stock {
  color: #267a5a;
  border-color: #cce7db;
  background: #edf8f3;
}

.sidebar-layout .market-plan-card {
  border-color: #dfe9e6;
  background: #ffffff;
}

.sidebar-layout .market-plan-card:hover {
  border-color: #bcdad2;
  box-shadow: 0 16px 36px rgba(55, 98, 87, 0.11);
}

.sidebar-layout .market-plan-card.market-plan-featured {
  border-color: #9bc9be;
  background: linear-gradient(155deg, #ffffff 55%, #f0f8f5 100%);
}

.sidebar-layout :is(.market-recommend, .duration-option.active, .duration-option:has(input:checked)) {
  color: #34776b;
  border-color: #9bc9be;
  background: #eaf6f2;
}

/* Personal center: replace the heavy purple hero with fresh daylight colors. */
.sidebar-layout .account-hero {
  color: #29423c;
  border: 1px solid #d8e9e3;
  background:
    radial-gradient(circle at 92% 5%, rgba(116, 183, 201, 0.2), transparent 19rem),
    radial-gradient(circle at 8% 100%, rgba(129, 202, 181, 0.24), transparent 20rem),
    linear-gradient(135deg, #ffffff, #eff8f5);
  box-shadow: 0 15px 38px rgba(56, 98, 87, 0.1);
}

.sidebar-layout .account-hero :is(h1, h2, strong),
.sidebar-layout .account-identity-copy h1 {
  color: #28423b;
}

.sidebar-layout .account-kicker {
  color: #4a8e82;
}

.sidebar-layout .account-badges > span,
.sidebar-layout .account-hero-actions > * {
  color: #45625b;
  border-color: rgba(155, 196, 184, 0.62);
  background: rgba(255, 255, 255, 0.72);
}

.sidebar-layout .account-stat {
  border-color: #dfeae6;
  background: #ffffff;
}

.sidebar-layout .account-stat-icon.is-violet,
.sidebar-layout .account-profile-group-icon {
  color: #3f8b7e;
  background: #e8f5f1;
}

.sidebar-layout .account-profile-group,
.sidebar-layout .account-profile-row {
  border-color: #e2ece8;
  background: #fbfdfc;
}

.sidebar-layout .account-panel-heading span:not(.account-online-pill),
.sidebar-layout .account-orders-modal-title > div > span,
.sidebar-layout .account-orders-empty a,
.sidebar-layout .account-modal-order-top button {
  color: #438b7f;
}

.sidebar-layout .account-orders-modal-icon {
  color: #3f8b7e;
  background: #e8f5f1;
}

.sidebar-layout .profile-order-price,
.sidebar-layout .account-modal-order-price {
  color: #2f7f70 !important;
}

.account-application-count {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  padding: 0 0.3rem;
  color: #fff;
  border-radius: 999px;
  background: #ef7d6b;
  font-size: 0.62rem;
  line-height: 1;
}

.account-applications-dialog {
  width: min(820px, calc(100% - 1.5rem));
  max-width: 820px;
}

.account-applications-modal {
  overflow: hidden;
  border: 1px solid #dfeae6;
  border-radius: 22px;
  background: #f6faf8;
  box-shadow: 0 28px 75px rgba(35, 71, 62, 0.2);
}

.account-applications-header {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid #e3ede9;
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 181, 161, 0.16), transparent 38%),
    #fff;
}

.account-applications-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.account-applications-icon,
.account-applications-empty-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #397f70;
  background: #e6f4ef;
}

.account-applications-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
}

.account-applications-icon svg,
.account-applications-empty-icon svg {
  width: 21px;
  height: 21px;
}

.account-applications-title > div > span {
  color: #438b7f;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.account-applications-title h2 {
  margin: 0.12rem 0 0;
  color: #273d37;
  font-size: 1.08rem;
}

.account-applications-title p {
  margin: 0.16rem 0 0;
  color: #7d918b;
  font-size: 0.7rem;
}

.account-applications-title p i {
  margin-left: 0.45rem;
  color: #c36352;
  font-style: normal;
  font-weight: 750;
}

.account-applications-body {
  padding: 0.85rem;
}

.account-applications-list {
  display: grid;
  gap: 0.72rem;
}

.account-application-item {
  overflow: hidden;
  border: 1px solid #e0eae6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(38, 75, 66, 0.045);
}

.account-application-item > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid #edf2f0;
}

.account-application-kind {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.58rem;
}

.account-application-kind > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #397f70;
  border-radius: 10px;
  background: #e9f5f1;
}

.account-application-item.is-refund .account-application-kind > span {
  color: #337e91;
  background: #e8f5f8;
}

.account-application-kind svg {
  width: 18px;
  height: 18px;
}

.account-application-kind div {
  display: grid;
  gap: 0.08rem;
}

.account-application-kind strong {
  color: #2e403b;
  font-size: 0.8rem;
}

.account-application-kind time {
  color: #899992;
  font-size: 0.63rem;
}

.account-application-status {
  flex: 0 0 auto;
  padding: 0.3rem 0.58rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 760;
}

.account-application-status.is-pending {
  color: #9a681e;
  background: #fff4da;
}

.account-application-status.is-approved {
  color: #287365;
  background: #e5f5f0;
}

.account-application-status.is-complete {
  color: #34725f;
  background: #e6f5ec;
}

.account-application-status.is-rejected {
  color: #b34e45;
  background: #fff0ee;
}

.account-application-status.is-cancelled {
  color: #737f7b;
  background: #eef1f0;
}

.account-application-main {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(190px, 1.35fr) minmax(105px, 0.7fr);
  gap: 0.55rem;
  padding: 0.78rem 0.9rem;
}

.account-application-main > div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 0.14rem;
}

.account-application-main span,
.account-application-reason > span,
.account-application-reply > span {
  color: #899891;
  font-size: 0.61rem;
  font-weight: 650;
}

.account-application-main strong {
  overflow: hidden;
  color: #344740;
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-application-main .is-amount strong {
  color: #317c6d;
  font-size: 0.9rem;
}

.account-application-main button {
  width: max-content;
  margin-top: 0.15rem;
  padding: 0;
  color: #438b7f;
  border: 0;
  background: transparent;
  font-size: 0.61rem;
}

.account-application-refund-values {
  display: flex;
  gap: 1rem;
  margin: 0 0.9rem 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: #f1f7f5;
}

.account-application-refund-values span {
  color: #70847e;
  font-size: 0.64rem;
}

.account-application-refund-values strong {
  margin-left: 0.28rem;
  color: #2e6f62;
  font-size: 0.72rem;
}

.account-application-reason,
.account-application-reply {
  margin: 0 0.9rem 0.72rem;
  padding: 0.62rem 0.7rem;
  border-radius: 10px;
  background: #f7f9f8;
}

.account-application-reason p,
.account-application-reply p {
  margin: 0.22rem 0 0;
  color: #53645f;
  font-size: 0.69rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.account-application-reply {
  border: 1px solid #dbeae5;
  background: #eef7f4;
}

.account-application-reply.is-rejected {
  border-color: #f0d9d5;
  background: #fff5f3;
}

.account-application-waiting {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: 0 0.9rem 0.8rem;
  color: #7b8b85;
  font-size: 0.65rem;
}

.account-application-waiting i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4a84b;
  box-shadow: 0 0 0 4px rgba(228, 168, 75, 0.13);
}

.account-application-action {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin: 0 0.9rem 0.82rem;
  padding: 0.45rem 0.72rem;
  color: #fff;
  border-radius: 9px;
  background: #438b7f;
  font-size: 0.67rem;
  font-weight: 720;
  text-decoration: none;
}

.account-application-action:hover {
  color: #fff;
  background: #35786d;
}

.account-applications-empty {
  display: grid;
  min-height: 280px;
  place-content: center;
  justify-items: center;
  gap: 0.28rem;
  color: #81928c;
  text-align: center;
}

.account-applications-empty-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 0.35rem;
  border-radius: 15px;
}

.account-applications-empty strong {
  color: #344b44;
  font-size: 0.85rem;
}

.account-applications-empty > span:not(.account-applications-empty-icon) {
  font-size: 0.67rem;
}

@media (max-width: 700px) {
  .account-applications-dialog {
    width: calc(100% - 1rem);
    margin: 0.5rem auto;
  }

  .account-applications-modal {
    border-radius: 18px;
  }

  .account-applications-header {
    min-height: 80px;
    padding: 0.9rem;
  }

  .account-applications-body {
    padding: 0.65rem;
  }

  .account-application-main {
    grid-template-columns: 1fr 1fr;
    padding: 0.7rem 0.75rem;
  }

  .account-application-main > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 520px) {
  .account-applications-title p i {
    display: block;
    margin: 0.15rem 0 0;
  }

  .account-application-item > header {
    align-items: flex-start;
  }

  .account-application-refund-values {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Promotion and patrol reuse the same calm visual language. */
.sidebar-layout .promotion-heading-badges > *,
.sidebar-layout .promotion-balance-stat,
.sidebar-layout .promotion-fee-summary {
  border-color: #d6e8e2;
  background: #edf8f4;
}

.sidebar-layout .promotion-ledger-table thead,
.sidebar-layout .batch-renewal-table thead,
.sidebar-layout .batch-refund-table thead {
  color: #657a74;
  background: #f0f7f5;
}

.sidebar-layout .promotion-ledger-table tbody tr:hover {
  background: #f5faf8;
}

.sidebar-layout .patrol-header {
  color: #2b433d;
  border-color: #dce9e5;
  background:
    radial-gradient(circle at 88% 5%, rgba(124, 190, 207, 0.18), transparent 18rem),
    linear-gradient(135deg, #ffffff, #eff8f5);
}

.sidebar-layout .patrol-title-icon,
.sidebar-layout .patrol-layout-button.active {
  color: #ffffff;
  border-color: #4b9588;
  background: #4b9588;
  box-shadow: 0 6px 15px rgba(75, 149, 136, 0.17);
}

.sidebar-layout .patrol-layout-button:not(.active) {
  color: #667a74;
  border-color: #dce8e4;
  background: #f8fbfa;
}

.sidebar-layout .patrol-card {
  border-color: #dce8e4;
  background: #ffffff;
  box-shadow: 0 7px 20px rgba(55, 93, 83, 0.07);
}

.sidebar-layout .patrol-card:hover {
  border-color: #b9d9d0;
  box-shadow: 0 12px 28px rgba(54, 99, 87, 0.11);
}

.sidebar-layout .modal-content {
  border-color: #dce8e4;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(42, 71, 64, 0.18);
}

.sidebar-layout .modal-header {
  border-bottom-color: #e2ece8;
  background: #f9fcfb;
}

@media (max-width: 991.98px) {
  body.sidebar-layout {
    background:
      radial-gradient(circle at 100% 0, rgba(157, 207, 223, 0.14), transparent 21rem),
      #f4f9f7;
  }

  .sidebar-layout .app-main {
    padding-top: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-layout .sidebar-link,
  .sidebar-layout .machine-table-rows tbody tr,
  .sidebar-layout .market-plan-card,
  .sidebar-layout .patrol-card {
    transition: none;
  }
}

/* Batch browser-local remark */
.machine-command-dialog {
  max-width: 520px;
}

.machine-command-modal {
  overflow: hidden;
  border: 1px solid #e2e9e6;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(47, 72, 64, 0.18);
}

.machine-command-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.35rem 1.05rem;
  border-bottom: 1px solid #edf1ef;
  background: linear-gradient(135deg, #f8fbfa, #f2f7f5);
}

.machine-command-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #46766a;
  border: 1px solid #d6e6e1;
  border-radius: 14px;
  background: #fff;
}

.machine-command-icon.is-power-on {
  color: #287458;
  border-color: #cce8dc;
  background: #f3fbf7;
}

.machine-command-icon svg,
.machine-command-close svg,
.machine-command-warning svg,
.machine-command-result-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.machine-command-header > div > span {
  display: block;
  margin-bottom: 0.12rem;
  color: #82928d;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.machine-command-header h2 {
  margin: 0;
  color: #273b35;
  font-size: 1.15rem;
  font-weight: 800;
}

.machine-command-header p {
  margin: 0.18rem 0 0;
  color: #7b8985;
  font-size: 0.74rem;
}

.machine-command-close {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: #7d8b87;
  border: 1px solid #e0e7e4;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.85);
  transition: 0.18s ease;
}

.machine-command-close:hover {
  color: #324b43;
  border-color: #cad8d3;
  background: #fff;
  transform: translateY(-1px);
}

.machine-command-body {
  padding: 1.25rem 1.35rem;
}

.machine-command-selection {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid #e3ebe8;
  border-radius: 14px;
  background: #f9fbfa;
}

.machine-command-selection span {
  color: #7b8c86;
  font-size: 0.72rem;
  font-weight: 700;
}

.machine-command-selection strong {
  grid-row: span 2;
  color: #2e5c50;
  font-size: 1.02rem;
  font-weight: 850;
}

.machine-command-selection small {
  color: #98a49f;
  font-size: 0.68rem;
}

.machine-command-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  color: #91682a;
  border: 1px solid #f0dfbd;
  border-radius: 14px;
  background: #fffaf0;
}

.machine-command-warning.is-power-on {
  color: #34705e;
  border-color: #d6e9e2;
  background: #f5fbf8;
}

.machine-command-warning svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.machine-command-warning div {
  display: grid;
  gap: 0.14rem;
}

.machine-command-warning strong {
  color: inherit;
  font-size: 0.76rem;
}

.machine-command-warning span {
  color: #8c877d;
  font-size: 0.69rem;
}

.machine-command-warning.is-power-on span {
  color: #748b83;
}

.machine-command-error {
  margin-top: 0.85rem;
  padding: 0.72rem 0.85rem;
  color: #a54747;
  border: 1px solid #efd2d2;
  border-radius: 11px;
  background: #fff7f7;
  font-size: 0.72rem;
  font-weight: 700;
}

.machine-command-result {
  display: grid;
  gap: 0.85rem;
}

.machine-command-result-summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid #dcebe5;
  border-radius: 14px;
  background: #f5fbf8;
}

.machine-command-result-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #277256;
  border-radius: 50%;
  background: #dff3e9;
}

.machine-command-result-summary.has-failure {
  border-color: #f0dfbd;
  background: #fffaf0;
}

.machine-command-result-summary.has-failure .machine-command-result-icon {
  color: #936728;
  background: #faeacb;
}

.machine-command-result-summary > div {
  display: grid;
  gap: 0.12rem;
}

.machine-command-result-summary strong {
  color: #2d453d;
  font-size: 0.9rem;
}

.machine-command-result-summary span {
  color: #74827d;
  font-size: 0.7rem;
}

.machine-command-result-list {
  display: grid;
  max-height: 220px;
  gap: 0.45rem;
  overflow-y: auto;
}

.machine-command-result-item {
  display: grid;
  grid-template-columns: minmax(90px, 0.7fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid #e6ecea;
  border-radius: 11px;
  background: #fbfcfc;
}

.machine-command-result-item strong {
  overflow: hidden;
  color: #344b44;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-command-result-item b {
  padding: 0.18rem 0.45rem;
  color: #277256;
  border-radius: 999px;
  background: #e6f5ee;
  font-size: 0.62rem;
}

.machine-command-result-item.is-failed b {
  color: #a44848;
  background: #fdecec;
}

.machine-command-result-item span {
  color: #7e8c87;
  font-size: 0.66rem;
  text-align: right;
}

.machine-command-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0 1.35rem 1.25rem;
}

.machine-command-cancel,
.machine-command-submit,
.machine-command-complete {
  min-width: 104px;
  min-height: 40px;
  padding: 0.55rem 1rem;
  border-radius: 11px;
  font-size: 0.76rem;
  font-weight: 800;
  transition: 0.18s ease;
}

.machine-command-cancel {
  color: #61716c;
  border: 1px solid #dce4e1;
  background: #fff;
}

.machine-command-submit,
.machine-command-complete {
  color: #fff;
  border: 1px solid #426f64;
  background: #426f64;
  box-shadow: 0 8px 20px rgba(66, 111, 100, 0.2);
}

.machine-command-submit:hover:not(:disabled),
.machine-command-complete:hover {
  border-color: #345d53;
  background: #345d53;
  transform: translateY(-1px);
}

.machine-command-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

@media (max-width: 575.98px) {
  .machine-command-header,
  .machine-command-body {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .machine-command-actions {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .machine-command-result-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .machine-command-result-item span {
    grid-column: 1 / -1;
    text-align: left;
  }
}

.batch-remark-dialog {
  width: min(500px, calc(100% - 28px));
  max-width: 500px;
}

.batch-remark-modal {
  overflow: hidden;
  border: 1px solid rgba(213, 224, 226, 0.9);
  border-radius: 22px;
  background:
    radial-gradient(circle at 5% 0, rgba(219, 244, 247, 0.72), transparent 34%),
    #fff;
  box-shadow: 0 28px 70px rgba(23, 50, 56, 0.18);
}

.batch-remark-header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  gap: 13px;
  align-items: center;
  padding: 22px 23px 17px;
}

.batch-remark-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #0f7487;
  border: 1px solid rgba(22, 133, 154, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 22px rgba(22, 133, 154, 0.1);
}

.batch-remark-icon svg,
.batch-remark-close svg {
  width: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-remark-header > div > span {
  display: block;
  color: #16859a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.batch-remark-header h2 {
  margin: 2px 0 0;
  color: #17252b;
  font-size: 21px;
  font-weight: 800;
}

.batch-remark-header p {
  margin: 3px 0 0;
  color: #78878b;
  font-size: 12px;
}

.batch-remark-close {
  display: grid;
  width: 37px;
  height: 37px;
  padding: 0;
  place-items: center;
  color: #78878b;
  border: 1px solid #e2eaeb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  transition: 0.16s ease;
}

.batch-remark-close:hover {
  color: #0f6678;
  border-color: #bfdee3;
  background: #f5fbfc;
  transform: translateY(-1px);
}

.batch-remark-body {
  padding: 0 23px;
}

.batch-remark-selection {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: #617176;
  border: 1px solid #dcebed;
  border-radius: 13px;
  background: rgba(245, 251, 252, 0.86);
  font-size: 12px;
}

.batch-remark-selection strong {
  color: #0f6678;
  font-size: 14px;
}

.batch-remark-selection small {
  margin-left: auto;
  color: #91a0a4;
  font-size: 11px;
}

.batch-remark-field {
  display: block;
  margin-top: 15px;
}

.batch-remark-field > span {
  display: block;
  margin-bottom: 7px;
  color: #34464b;
  font-size: 13px;
  font-weight: 750;
}

.batch-remark-field textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 12px 13px;
  resize: vertical;
  color: #26383d;
  border: 1px solid #d9e3e5;
  border-radius: 13px;
  outline: 0;
  background: #fbfcfc;
  font-size: 14px;
  line-height: 1.55;
  transition: 0.16s ease;
}

.batch-remark-field textarea:focus {
  border-color: #80bfca;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(22, 133, 154, 0.09);
}

.batch-remark-field > small {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  color: #8a999d;
  font-size: 11px;
}

.batch-remark-field b {
  flex: 0 0 auto;
  color: #647579;
  font-weight: 650;
}

.batch-remark-note {
  margin-top: 12px;
  color: #7c8d91;
  font-size: 11px;
  line-height: 1.55;
}

.batch-remark-error {
  margin-top: 11px;
  padding: 9px 11px;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: 10px;
  background: #fff6f5;
  font-size: 12px;
}

.batch-remark-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 19px 23px 22px;
}

.batch-remark-cancel,
.batch-remark-submit {
  min-width: 92px;
  height: 39px;
  padding: 0 17px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  transition: 0.16s ease;
}

.batch-remark-cancel {
  color: #5e6e72;
  border: 1px solid #dce4e6;
  background: #fff;
}

.batch-remark-cancel:hover {
  color: #34464b;
  background: #f6f8f8;
}

.batch-remark-submit {
  color: #fff;
  border: 1px solid #16859a;
  background: linear-gradient(135deg, #16859a, #0f7487);
  box-shadow: 0 8px 18px rgba(22, 133, 154, 0.18);
}

.batch-remark-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #11788b, #0e6474);
  transform: translateY(-1px);
}

.batch-remark-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

@media (max-width: 575.98px) {
  .batch-remark-header {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    padding: 19px 17px 15px;
  }

  .batch-remark-header p {
    display: none;
  }

  .batch-remark-body {
    padding: 0 17px;
  }

  .batch-remark-selection {
    flex-wrap: wrap;
  }

  .batch-remark-selection small {
    width: 100%;
    margin-left: 0;
  }

  .batch-remark-actions {
    padding: 17px;
  }

  .batch-remark-cancel,
  .batch-remark-submit {
    flex: 1;
  }
}

/* Promotion and referral */
.promotion-heading {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1rem;
  padding: 1.2rem 1.3rem;
  color: #344054;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% -15%, rgba(22, 133, 154, 0.14), transparent 36%),
    linear-gradient(120deg, #fff 0%, #f5f8fb 100%);
  box-shadow: var(--shadow-sm);
}

.promotion-heading::after {
  position: absolute;
  top: -58px;
  right: 12%;
  width: 124px;
  height: 124px;
  border: 24px solid rgba(22, 133, 154, 0.045);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.promotion-heading-copy,
.promotion-heading-badges {
  position: relative;
  z-index: 1;
}

.promotion-eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  color: #16859a;
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.08em;
}

.promotion-heading h1 {
  margin: 0 0 0.28rem;
  color: #1d2939;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.promotion-heading p {
  max-width: 690px;
  margin: 0;
  color: #7b8494;
  font-size: 0.72rem;
  line-height: 1.6;
}

.promotion-heading-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.48rem;
}

.promotion-member-id,
.promotion-rate-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.68rem;
  color: #667085;
  border: 1px solid #dedcfa;
  border-radius: 9px;
  background: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
}

.promotion-member-id strong,
.promotion-rate-badge strong {
  color: #0f6678;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.promotion-rate-badge {
  color: #287054;
  border-color: #bce8d4;
  background: #f2fcf7;
}

.promotion-rate-badge strong {
  color: #087a4b;
}

.promotion-rule-panel {
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 16px;
  background: var(--theme-panel, #fff);
  box-shadow: var(--shadow-sm);
}

.promotion-rule-heading {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.82rem 1rem;
  border-bottom: 1px solid var(--theme-border, #e2e6ea);
  background: color-mix(in srgb, var(--theme-soft, #edf0f2) 42%, white);
}

.promotion-rule-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--theme-primary, #46505b);
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 11px;
  background: var(--theme-panel, #fff);
}

.promotion-rule-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promotion-rule-heading > span:last-child {
  display: grid;
  gap: 0.12rem;
}

.promotion-rule-heading h2,
.promotion-rule-heading p {
  margin: 0;
}

.promotion-rule-heading h2 {
  color: var(--theme-text, #29313a);
  font-size: 1rem;
  font-weight: 820;
}

.promotion-rule-heading p {
  color: var(--theme-muted, #757d85);
  font-size: 0.74rem;
  line-height: 1.5;
}

.promotion-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.9rem 1rem 0.78rem;
}

.promotion-rule-grid article {
  display: flex;
  min-width: 0;
  gap: 0.55rem;
  padding: 0.05rem 0.85rem;
  border-right: 1px solid var(--theme-border, #e2e6ea);
}

.promotion-rule-grid article:first-child {
  padding-left: 0;
}

.promotion-rule-grid article:last-child {
  padding-right: 0;
  border-right: 0;
}

.promotion-rule-grid article > b {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--theme-primary, #46505b);
  border-radius: 8px;
  background: var(--theme-soft, #edf0f2);
  font-size: 0.59rem;
  font-weight: 820;
}

.promotion-rule-grid article > span {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.28rem;
}

.promotion-rule-grid strong {
  color: var(--theme-text, #29313a);
  font-size: 0.8rem;
  font-weight: 800;
}

.promotion-rule-grid small {
  color: color-mix(in srgb, var(--theme-text, #29313a) 70%, white);
  font-size: 0.71rem;
  line-height: 1.72;
}

.promotion-rule-footnote {
  margin: 0 1rem 0.82rem;
  padding: 0.58rem 0.7rem;
  color: color-mix(in srgb, var(--theme-text, #29313a) 72%, white);
  border-radius: 8px;
  background: var(--theme-canvas-alt, #fafafa);
  font-size: 0.7rem;
  line-height: 1.65;
}

.promotion-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.promotion-stat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 116px;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.promotion-stat-card:hover {
  border-color: #d8d5f2;
  box-shadow: 0 9px 24px rgba(40, 35, 92, 0.08);
  transform: translateY(-1px);
}

.promotion-stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #16859a;
  border: 1px solid #d8eaec;
  border-radius: 12px;
  background: #f3f2ff;
}

.promotion-stat-icon svg {
  width: 21px;
  height: 21px;
}

.promotion-stat-copy {
  display: grid;
  min-width: 0;
  gap: 0.14rem;
}

.promotion-stat-copy > span,
.promotion-stat-copy > small {
  color: #98a2b3;
  font-size: 0.67rem;
}

.promotion-stat-copy > span {
  color: #667085;
  font-weight: 700;
}

.promotion-stat-copy > strong {
  color: #1d2939;
  font-size: 1.34rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.2;
  white-space: nowrap;
}

.promotion-stat-copy > strong em {
  color: #667085;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 680;
  letter-spacing: 0;
}

.promotion-stat-copy > small b {
  color: #667085;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.promotion-balance-stat {
  border-color: #cde4e7;
  background:
    radial-gradient(circle at 100% 0%, rgba(22, 133, 154, 0.12), transparent 42%),
    linear-gradient(135deg, #fcfbff, #f3f1ff);
  box-shadow: 0 9px 24px rgba(22, 117, 138, 0.08);
}

.promotion-balance-stat::after {
  position: absolute;
  right: -18px;
  bottom: -32px;
  width: 86px;
  height: 86px;
  border: 17px solid rgba(22, 133, 154, 0.055);
  border-radius: 50%;
  content: "";
}

.promotion-balance-stat .promotion-stat-copy,
.promotion-balance-stat .promotion-stat-icon {
  position: relative;
  z-index: 1;
}

.promotion-balance-stat .promotion-stat-copy > strong {
  color: #16758a;
  font-size: 1.46rem;
}

.promotion-today-stat .promotion-stat-icon {
  color: #087a4b;
  border-color: #c9ebda;
  background: #eefbf5;
}

.promotion-pending-stat .promotion-stat-icon {
  color: #b54708;
  border-color: #fedf89;
  background: #fffaeb;
}

.promotion-invite-stat .promotion-stat-icon {
  color: #175cd3;
  border-color: #c7d7fe;
  background: #eff4ff;
}

.promotion-ledger-panel {
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid #e4e7ec;
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.promotion-ledger-heading {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e8eaee;
  background:
    radial-gradient(circle at 96% -30%, rgba(22, 133, 154, 0.08), transparent 34%),
    #fff;
}

.promotion-ledger-heading > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.promotion-ledger-heading > div > span:last-child {
  min-width: 0;
}

.promotion-section-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #16859a;
  border: 1px solid #d8eaec;
  border-radius: 11px;
  background: #f3f8f8;
}

.promotion-section-icon svg {
  width: 19px;
  height: 19px;
}

.promotion-ledger-heading h2 {
  margin: 0;
  color: #1d2939;
  font-size: 0.92rem;
  font-weight: 790;
}

.promotion-ledger-heading p {
  margin: 0.18rem 0 0;
  overflow: hidden;
  color: #8b95a5;
  font-size: 0.62rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-ledger-count {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.24rem;
  padding: 0 0.56rem;
  color: #667085;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #fafbfc;
  font-size: 0.62rem;
  white-space: nowrap;
}

.promotion-ledger-count strong {
  color: #16758a;
  font-variant-numeric: tabular-nums;
}

.promotion-ledger-table-wrap {
  overflow-x: auto;
  scrollbar-color: #cfd4dc transparent;
  scrollbar-width: thin;
}

.promotion-ledger-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  table-layout: fixed;
}

.promotion-ledger-table th {
  padding: 0.68rem 0.8rem;
  color: #7b8494;
  border-bottom: 1px solid #e8eaee;
  background: #fafbfc;
  font-size: 0.61rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: nowrap;
}

.promotion-ledger-table th:nth-child(1) {
  width: 12%;
}

.promotion-ledger-table th:nth-child(2) {
  width: 15%;
}

.promotion-ledger-table th:nth-child(3) {
  width: 23%;
}

.promotion-ledger-table th:nth-child(4) {
  width: 9%;
}

.promotion-ledger-table th:nth-child(5) {
  width: 11%;
}

.promotion-ledger-table th:nth-child(6) {
  width: 10%;
}

.promotion-ledger-table th:nth-child(7) {
  width: 20%;
}

.promotion-ledger-table td {
  padding: 0.78rem 0.8rem;
  color: #475467;
  border-bottom: 1px solid #eff1f4;
  font-size: 0.68rem;
  vertical-align: middle;
}

.promotion-ledger-table tbody tr:last-child td {
  border-bottom: 0;
}

.promotion-ledger-table tbody tr {
  transition: background 0.16s ease;
}

.promotion-ledger-table tbody tr:hover {
  background: #fcfcff;
}

.promotion-ledger-date,
.promotion-ledger-source,
.promotion-ledger-order,
.promotion-ledger-result {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.13rem;
}

.promotion-ledger-date strong,
.promotion-ledger-source strong,
.promotion-ledger-order strong {
  overflow: hidden;
  color: #344054;
  font-size: 0.68rem;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-ledger-date small,
.promotion-ledger-source small,
.promotion-ledger-order small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.57rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-ledger-order strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.61rem;
}

.promotion-ledger-quantity,
.promotion-ledger-money,
.promotion-ledger-rate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.promotion-ledger-quantity strong {
  color: #344054;
  font-size: 0.78rem;
}

.promotion-ledger-money {
  color: #344054;
  font-weight: 700;
}

.promotion-ledger-rate {
  display: inline-flex;
  padding: 0.24rem 0.42rem;
  color: #16758a;
  border: 1px solid #dedbff;
  border-radius: 6px;
  background: #f6f5ff;
  font-size: 0.61rem;
  font-weight: 720;
}

.promotion-ledger-result {
  align-items: flex-start;
}

.promotion-ledger-result > strong {
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.promotion-ledger-result > small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.56rem;
  font-weight: 700;
  white-space: nowrap;
}

.promotion-ledger-result > small i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.promotion-ledger-result .is-credited {
  color: #087a4b;
}

.promotion-ledger-result .is-stopped {
  color: #b42318;
}

.promotion-ledger-result .is-pending {
  color: #b54708;
}

.promotion-ledger-empty {
  display: flex;
  min-height: 190px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(22, 133, 154, 0.055), transparent 38%),
    #fff;
}

.promotion-ledger-empty > span {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 0.6rem;
  place-items: center;
  color: #756ee5;
  border-radius: 13px;
  background: #f0efff;
}

.promotion-ledger-empty svg {
  width: 23px;
  height: 23px;
}

.promotion-ledger-empty strong {
  color: #344054;
  font-size: 0.78rem;
}

.promotion-ledger-empty p {
  max-width: 440px;
  margin: 0.28rem 0 0;
  color: #98a2b3;
  font-size: 0.64rem;
}

.promotion-pagination {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-top: 1px solid #e8eaee;
  background: #fcfcfd;
}

.promotion-pagination > span {
  color: #7b8494;
  font-size: 0.61rem;
  white-space: nowrap;
}

.promotion-pagination > span strong {
  color: #344054;
  font-variant-numeric: tabular-nums;
}

.promotion-pagination > div {
  display: flex;
  align-items: center;
  gap: 0.24rem;
}

.promotion-pagination > div > a,
.promotion-pagination > div > span:not(.promotion-pagination-ellipsis) {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 0.35rem;
  place-items: center;
  color: #667085;
  border: 1px solid #e1e4e9;
  border-radius: 8px;
  background: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.promotion-pagination > div > a:hover {
  color: #16758a;
  border-color: #c9c5ff;
  background: #f5f8fb;
}

.promotion-pagination > div > .active {
  color: #fff;
  border-color: #16859a;
  background: #16859a;
}

.promotion-pagination > div > .disabled {
  color: #b7bdc7;
  background: #f5f6f8;
}

.promotion-pagination svg {
  width: 14px;
  height: 14px;
}

.promotion-pagination-ellipsis {
  min-width: 18px;
  color: #98a2b3;
  font-size: 0.68rem;
  text-align: center;
}

.promotion-share-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.6fr);
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: 17px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.promotion-qr-column {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
  flex-direction: column;
  border-right: 1px solid #e7e8ee;
  background: #f8f8fc;
  text-align: center;
}

.promotion-qr-frame {
  display: grid;
  width: 210px;
  height: 210px;
  margin-bottom: 0.8rem;
  padding: 0.65rem;
  place-items: center;
  border: 1px solid #dedcf5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(51, 45, 120, 0.08);
}

.promotion-qr-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.promotion-qr-fallback {
  color: #756ee5;
  border-style: dashed;
  background:
    radial-gradient(circle, rgba(22, 133, 154, 0.1), transparent 66%),
    #fff;
}

.promotion-qr-fallback svg {
  width: 68px;
  height: 68px;
  opacity: 0.75;
}

.promotion-qr-column > strong {
  color: #344054;
  font-size: 0.88rem;
}

.promotion-qr-column > p {
  margin: 0.2rem 0 0.75rem;
  color: #98a2b3;
  font-size: 0.67rem;
}

.promotion-download-button {
  padding: 0.48rem 0.76rem;
  color: #0f6678;
  border: 1px solid #d4d0ff;
  border-radius: 8px;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.promotion-download-button:hover {
  color: #115c6c;
  background: #f3f8f8;
}

.promotion-link-column {
  display: flex;
  justify-content: center;
  padding: 2rem;
  flex-direction: column;
}

.promotion-step {
  color: #16859a;
  font-size: 0.68rem;
  font-weight: 760;
}

.promotion-link-column h2 {
  margin: 0.35rem 0 0.3rem;
  color: #1d2939;
  font-size: 1.16rem;
}

.promotion-link-column > p {
  margin: 0 0 1rem;
  color: #7b8494;
  font-size: 0.74rem;
}

.promotion-url-box {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #f8f9fb;
}

.promotion-url-box input {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  flex: 1;
  color: #475467;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

.promotion-url-box button {
  padding: 0 1rem;
  color: #fff;
  border: 0;
  background: #16859a;
  font-size: 0.72rem;
  font-weight: 720;
  white-space: nowrap;
}

.promotion-url-box button:hover {
  background: #16758a;
}

.promotion-rule-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.promotion-rule-list span {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: #667085;
  font-size: 0.67rem;
}

.promotion-rule-list i {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: #0f6678;
  border-radius: 99px;
  background: #edf8f9;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 750;
}

.promotion-settlement-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding: 0.65rem 0.72rem;
  color: #667085;
  border: 1px solid #e7e8ec;
  border-radius: 9px;
  background: #fafbfc;
  font-size: 0.67rem;
}

.promotion-settlement-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #7c74e8;
}

.promotion-settlement-note strong {
  color: #16758a;
  font-weight: 760;
}

@media (max-width: 991.98px) {
  .promotion-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.85rem;
  }

  .promotion-rule-grid article:nth-child(2) {
    padding-right: 0;
    border-right: 0;
  }

  .promotion-rule-grid article:nth-child(3) {
    padding-left: 0;
  }

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

  .promotion-share-panel {
    grid-template-columns: 1fr;
  }

  .promotion-qr-column {
    border-right: 0;
    border-bottom: 1px solid #e7e8ee;
  }
}

@media (max-width: 767.98px) {
  .promotion-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .promotion-heading-badges {
    width: 100%;
    justify-content: flex-start;
  }

  .promotion-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .promotion-stat-card {
    min-height: 104px;
    gap: 0.6rem;
    padding: 0.78rem;
  }

  .promotion-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .promotion-stat-icon svg {
    width: 18px;
    height: 18px;
  }

  .promotion-stat-copy > strong,
  .promotion-balance-stat .promotion-stat-copy > strong {
    font-size: 1.12rem;
  }

  .promotion-rule-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promotion-link-column {
    padding: 1.2rem;
  }

  .promotion-url-box {
    flex-direction: column;
  }

  .promotion-url-box button {
    min-height: 42px;
  }

  .promotion-ledger-heading {
    align-items: flex-start;
  }

  .promotion-ledger-heading p {
    white-space: normal;
  }

  .promotion-ledger-count {
    margin-top: 0.25rem;
  }

  .promotion-ledger-table-wrap {
    overflow: visible;
    padding: 0.65rem;
    background: #f7f8fb;
  }

  .promotion-ledger-table,
  .promotion-ledger-table tbody {
    display: block;
    min-width: 0;
  }

  .promotion-ledger-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .promotion-ledger-table tbody {
    display: grid;
    gap: 0.6rem;
  }

  .promotion-ledger-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e5ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04);
  }

  .promotion-ledger-table td {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.58rem 0.68rem;
    border: 0;
    border-top: 1px solid #f0f1f4;
    font-size: 0.64rem;
  }

  .promotion-ledger-table td::before {
    color: #98a2b3;
    content: attr(data-label);
    font-size: 0.53rem;
    font-weight: 680;
  }

  .promotion-ledger-table .promotion-ledger-source-cell,
  .promotion-ledger-table .promotion-ledger-amount-cell {
    padding-top: 0.68rem;
    padding-bottom: 0.68rem;
    border-top: 0;
    border-bottom: 1px solid #e8eaee;
    background: #fcfcff;
  }

  .promotion-ledger-source-cell {
    grid-column: 1;
    grid-row: 1;
  }

  .promotion-ledger-amount-cell {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end !important;
    text-align: right;
  }

  .promotion-ledger-date-cell {
    grid-column: 1;
    grid-row: 2;
  }

  .promotion-ledger-order-cell {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .promotion-ledger-order-cell > span {
    align-items: flex-end;
  }

  .promotion-ledger-table td:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }

  .promotion-ledger-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    align-items: flex-end;
    text-align: right;
  }

  .promotion-ledger-table td:nth-child(6) {
    grid-column: 1 / -1;
    grid-row: 4;
    align-items: center;
    flex-direction: row;
  }

  .promotion-ledger-result {
    align-items: flex-end;
  }

  .promotion-pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .promotion-heading {
    padding: 0.9rem;
  }

  .promotion-rule-heading {
    padding: 0.72rem 0.78rem;
  }

  .promotion-rule-heading p {
    line-height: 1.45;
  }

  .promotion-rule-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.35rem 0.78rem;
  }

  .promotion-rule-grid article,
  .promotion-rule-grid article:first-child,
  .promotion-rule-grid article:nth-child(2),
  .promotion-rule-grid article:nth-child(3),
  .promotion-rule-grid article:last-child {
    padding: 0.68rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--theme-border, #e2e6ea);
  }

  .promotion-rule-grid article:last-child {
    border-bottom: 0;
  }

  .promotion-rule-footnote {
    margin: 0 0.78rem 0.72rem;
  }

  .promotion-member-id,
  .promotion-rate-badge {
    padding: 0.4rem 0.55rem;
    font-size: 0.62rem;
  }

  .promotion-stat-copy > span,
  .promotion-stat-copy > small {
    font-size: 0.58rem;
  }

  .promotion-qr-column {
    padding: 1.2rem;
  }

  .promotion-qr-frame {
    width: min(190px, 65vw);
    height: auto;
    aspect-ratio: 1;
  }

  .promotion-ledger-heading {
    flex-direction: column;
    gap: 0.55rem;
  }

  .promotion-ledger-count {
    align-self: flex-start;
    margin: 0;
  }

  .promotion-pagination {
    justify-content: center;
  }

  .promotion-pagination > span {
    width: 100%;
    text-align: center;
  }

  .promotion-pagination > div {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

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

.wechat-flow-hint {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  padding: 0.65rem;
  border: 1px solid #e9efeb;
  border-radius: 11px;
  background: #f8fbf9;
}

.wechat-flow-hint span {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  color: #5f6f65;
  font-size: 0.65rem;
}

.wechat-flow-hint i {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  color: #078f46;
  border-radius: 7px;
  background: #dcfae6;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
}

.password-login-panel {
  border-top: 1px solid #edf0f2;
}

.password-login-panel summary {
  padding: 0.95rem 0 0.1rem;
  color: #7b8493;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 650;
  text-align: center;
  list-style: none;
}

.password-login-panel summary::-webkit-details-marker {
  display: none;
}

.password-login-panel summary::after {
  margin-left: 0.35rem;
  content: "⌄";
}

.password-login-panel[open] summary::after {
  content: "⌃";
}

.password-login-form {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid #e8ebef;
  border-radius: 12px;
  background: #fafbfc;
}

.password-login-form .form-control {
  min-height: 42px;
  background: #fff;
}

.password-login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.password-login-footer .form-check-label {
  color: #667085;
  font-size: 0.7rem;
}

.password-login-submit {
  padding: 0.55rem 0.9rem;
  color: #0f6678;
  border: 1px solid #d5d2ff;
  border-radius: 8px;
  background: #f3f8f8;
  font-size: 0.7rem;
  font-weight: 750;
}

.password-login-submit:hover {
  color: #fff;
  border-color: #0f6678;
  background: #0f6678;
}

.wechat-register-card {
  width: min(100%, 480px);
}

.wechat-register-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.wechat-register-avatar {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border: 4px solid #ecfdf3;
  border-radius: 18px;
  box-shadow: 0 8px 19px rgba(7, 148, 71, 0.13);
}

.wechat-register-avatar-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  background: linear-gradient(145deg, #20c875, #079447);
  font-size: 1.25rem;
  font-weight: 800;
}

.wechat-register-heading .wechat-verified-label {
  margin-bottom: 0.28rem;
}

.wechat-register-heading h1 {
  margin: 0 0 0.2rem;
  font-size: 1.35rem;
}

.wechat-register-heading p {
  margin: 0;
  color: #7b8493;
  font-size: 0.7rem;
}

.wechat-existing-account-warning {
  margin-bottom: 1rem;
  padding: 1rem;
  color: #593f18;
  border: 1px solid #f3d59b;
  border-radius: 14px;
  background: linear-gradient(145deg, #fffdf6, #fff8e8);
  box-shadow: 0 9px 24px rgba(151, 103, 22, 0.08);
}

.wechat-existing-account-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.wechat-existing-account-title > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #d68a16;
  font-size: 1rem;
  font-weight: 850;
  box-shadow: 0 5px 12px rgba(214, 138, 22, 0.2);
}

.wechat-existing-account-title strong,
.wechat-existing-account-title small {
  display: block;
}

.wechat-existing-account-title strong {
  color: #6c4811;
  font-size: 0.82rem;
}

.wechat-existing-account-title small {
  margin-top: 0.08rem;
  color: #a0722f;
  font-size: 0.68rem;
}

.wechat-existing-account-warning p {
  margin: 0.8rem 0 0.55rem;
  color: #72562c;
  font-size: 0.72rem;
  line-height: 1.65;
}

.wechat-existing-account-warning ol {
  margin: 0 0 0.85rem;
  padding-left: 1.15rem;
  color: #80643a;
  font-size: 0.69rem;
  line-height: 1.7;
}

.wechat-existing-account-action {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  color: #795014;
  border: 1px solid #e8c57f;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.73rem;
  font-weight: 750;
  text-decoration: none;
}

.wechat-existing-account-action:hover {
  color: #5e3b08;
  border-color: #d9aa50;
  background: #fff;
}

.wechat-registration-choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.2rem 0 1rem;
  color: #7b8493;
  font-size: 0.67rem;
  line-height: 1.45;
}

.wechat-registration-choice::before,
.wechat-registration-choice::after {
  height: 1px;
  background: #e7e9ee;
  content: "";
  flex: 1;
}

.wechat-registration-choice span {
  max-width: 245px;
  text-align: center;
}

.register-note {
  display: flex;
  margin-bottom: 1.2rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid #dff2e7;
  border-radius: 12px;
  background: #f5fbf7;
  flex-direction: column;
  gap: 0.22rem;
}

.register-note strong {
  color: #176b43;
  font-size: 0.75rem;
}

.register-note span {
  color: #667b6e;
  font-size: 0.68rem;
  line-height: 1.55;
}

.wechat-global-id {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 0.45rem;
  padding: 0.55rem 0.65rem;
  color: #176b43;
  border: 1px dashed #b8dec8;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  line-height: 1.45;
}

.invite-id-input {
  position: relative;
}

.invite-id-input > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.85rem;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #078f46;
  border-radius: 7px;
  background: #e8f8ee;
  transform: translateY(-50%);
  pointer-events: none;
}

.invite-id-input > span svg {
  width: 15px;
  height: 15px;
}

.invite-id-input .form-control {
  padding-left: 3.15rem;
}

.wechat-register-submit {
  min-height: 48px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(115deg, #18b866, #078f46);
  box-shadow: 0 9px 20px rgba(7, 148, 71, 0.18);
  font-size: 0.8rem;
  font-weight: 750;
}

.wechat-register-submit:hover {
  color: #fff;
  background: linear-gradient(115deg, #10a95b, #067a3c);
}

.login-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: #98a2b3;
  font-size: 0.68rem;
}

.login-trust svg {
  width: 14px;
  height: 14px;
}

.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  padding: 0.7rem 0.9rem;
  border: 1px solid #fecdca;
  border-radius: 9px;
  background: #fff6f5;
  font-size: 0.75rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1rem;
}

@media (max-width: 991.98px) {
  .app-header .navbar-collapse {
    margin-top: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
  }

  .app-nav {
    gap: 0.2rem;
  }

  .account-area {
    justify-content: space-between;
    margin-top: 0.65rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
  }

  .account-chip {
    flex: 1;
  }

  .stats-grid,
  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-card > p {
    min-height: auto;
  }
}

/* Machine list columns and browser-local remarks */
.machine-table-six {
  min-width: 1080px;
}

.machine-table-six th:nth-child(1) { width: 15%; }
.machine-table-six th:nth-child(2) { width: 11%; }
.machine-table-six th:nth-child(3) { width: 25%; }
.machine-table-six th:nth-child(4) { width: 19%; }
.machine-table-six th:nth-child(5) { width: 19%; }
.machine-table-six th:nth-child(6) { width: 11%; }

.compact-identity strong {
  color: #1d2939;
  font-size: 0.86rem;
}

.configuration-text {
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.remaining-time {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.remaining-time strong {
  color: #344054;
  font-size: 0.79rem;
  font-weight: 750;
}

.remaining-time small {
  color: #98a2b3;
  font-size: 0.65rem;
  white-space: nowrap;
}

.remaining-time.remaining-expired strong {
  color: #d92d20;
}

.local-remark {
  display: flex;
  width: 100%;
  min-width: 165px;
  min-height: 38px;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.65rem;
  color: #98a2b3;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f7f8fa;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.local-remark:focus-within {
  color: var(--brand);
  border-color: #c7c3ff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.08);
}

.local-remark svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.local-remark-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #344054;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.73rem;
}

.local-remark-input::placeholder {
  color: #aeb5c1;
}

.server-room-name {
  display: inline-flex;
  padding: 0.32rem 0.55rem;
  color: #475467;
  border: 1px solid #e4e7ec;
  border-radius: 7px;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.server-room-name svg {
  width: 14px;
  height: 14px;
  margin-right: 0.35rem;
  color: #7f75ef;
}

.machine-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.machine-remote-toolbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.machine-remote-selector {
  position: relative;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 0.45rem;
  padding: 0 2rem 0 0.7rem;
  color: #667085;
  border: 1px solid #e1e5eb;
  border-radius: 9px;
  background: #fff;
}

.machine-remote-selector > span {
  padding-right: 0.55rem;
  border-right: 1px solid #e4e7ec;
  font-size: 0.62rem;
  font-weight: 680;
  white-space: nowrap;
}

.machine-remote-selector select {
  min-width: 86px;
  padding: 0;
  color: #344054;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 740;
  cursor: pointer;
}

.machine-remote-selector > svg {
  position: absolute;
  right: 0.6rem;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #98a2b3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.remote-agent-status {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  text-align: left;
  border: 1px solid #e1e5eb;
  border-radius: 9px;
  background: #fff;
}

.remote-agent-status > i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #98a2b3;
  box-shadow: 0 0 0 3px #f2f4f7;
}

.remote-agent-status > i.online {
  background: #12b76a;
  box-shadow: 0 0 0 3px #dcfae6;
}

.remote-agent-status > i.offline {
  background: #f79009;
  box-shadow: 0 0 0 3px #fef0c7;
}

.remote-agent-status > span {
  display: grid;
  gap: 0.02rem;
}

.remote-agent-status strong {
  color: #344054;
  font-size: 0.61rem;
}

.remote-agent-status small {
  color: #98a2b3;
  font-size: 0.53rem;
}

.remote-agent-status.is-online {
  border-color: #abefc6;
  background: #f6fef9;
}

.remote-agent-status.is-offline {
  border-color: #fedf89;
  background: #fffaeb;
}

.machine-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem;
  border: 1px solid #e6e8ed;
  border-radius: 10px;
  background: #f3f5f8;
}

.machine-filter {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 0.38rem;
  padding: 0.35rem 0.65rem;
  color: #667085;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 680;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.machine-filter:hover {
  color: #344054;
  background: rgba(255, 255, 255, 0.7);
}

.machine-filter.active {
  color: #0f6678;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 24, 40, 0.08);
}

.machine-filter span {
  display: inline-grid;
  min-width: 19px;
  height: 19px;
  padding: 0 0.28rem;
  place-items: center;
  color: #7e8797;
  border-radius: 99px;
  background: #eaecf0;
  font-size: 0.6rem;
}

.machine-filter.active span {
  color: #0f6678;
  background: #edf8f9;
}

.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
}

.online-dot {
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.1);
}

.offline-dot {
  background: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.09);
}

.expiring-dot {
  background: #f79009;
  box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.11);
}

.local-data-tip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #98a2b3;
  font-size: 0.67rem;
}

.local-data-tip svg {
  width: 15px;
  height: 15px;
  color: #7f75ef;
}

.machine-table-cards {
  padding: 0 0.9rem 0.9rem;
  border-spacing: 0 9px;
  border-collapse: separate;
  background: #f7f8fb;
}

.machine-table-cards thead th {
  padding-top: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 0;
  background: transparent;
}

.machine-table-cards tbody td {
  padding-top: 0.82rem;
  padding-bottom: 0.82rem;
  border-top: 1px solid #e9ebf0;
  border-bottom: 1px solid #e9ebf0;
  background: #fff;
  transition: border-color 0.17s ease, background 0.17s ease, box-shadow 0.17s ease;
}

.machine-table-cards tbody td:first-child {
  border-left: 1px solid #e9ebf0;
  border-radius: 12px 0 0 12px;
}

.machine-table-cards tbody td:last-child {
  border-right: 1px solid #e9ebf0;
  border-radius: 0 12px 12px 0;
}

.machine-table-cards tbody tr:hover td {
  border-color: #cfe4e7;
  background: #fdfdff;
  box-shadow: 0 7px 18px rgba(16, 24, 40, 0.035);
}

.machine-table-cards .machine-avatar {
  color: #655be8;
  border-color: #d8eaec;
  background: linear-gradient(145deg, #f3f8f8, #eaf1f8);
}

.panel-heading-machines {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.panel-heading-machines h2 {
  margin: 0;
}

.machine-table-simple {
  min-width: 1000px;
}

.machine-table-simple th {
  padding: 0.72rem 1rem;
  color: #667085;
  background: #f8f9fb;
  text-transform: none;
  letter-spacing: 0;
}

.machine-table-simple td {
  padding: 0.82rem 1rem;
  vertical-align: middle;
}

.machine-table-simple tbody tr:hover {
  background: #f9fafb;
}

.machine-number {
  color: #1d2939;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 750;
}

.machine-configuration {
  display: block;
  overflow: hidden;
  max-width: 285px;
  color: #344054;
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-table-simple .local-remark {
  min-height: 36px;
  padding: 0 0.6rem;
  border-color: #e4e7ec;
  background: #fff;
}

.machine-table-simple .server-room-name {
  border: 0;
  background: #f2f4f7;
}

.machine-table-simple .remaining-time strong {
  font-size: 0.76rem;
}

.machine-table-actions {
  min-width: 1120px;
  table-layout: fixed;
}

.machine-table-actions .machine-col-primary { width: 17%; }
.machine-table-actions .machine-col-configuration { width: 18%; }
.machine-table-actions .machine-col-remaining { width: 11%; }
.machine-table-actions .machine-col-remark { width: 18%; }
.machine-table-actions .machine-col-room { width: 10%; }
.machine-table-actions .machine-col-actions { width: 26%; }

.machine-table-rows {
  padding: 0 0.65rem 0.75rem;
  border-spacing: 0 8px;
  border-collapse: separate;
  background:
    radial-gradient(circle at 94% 2%, rgba(22, 133, 154, 0.055), transparent 27%),
    #f5f7fa;
}

.machine-table-rows thead th {
  position: sticky;
  z-index: 8;
  top: 0;
  padding: 0.62rem 0.65rem 0.4rem;
  color: #667085;
  border: 0;
  background: rgba(245, 247, 250, 0.96);
  box-shadow: inset 0 -1px 0 #e7eaf0, 0 5px 10px rgba(16, 24, 40, 0.035);
  text-transform: none;
  letter-spacing: 0;
}

.machine-table-sort-button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 0.3rem;
  margin: -0.25rem -0.4rem;
  padding: 0.25rem 0.4rem;
  color: inherit;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  text-align: inherit;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease;
}

.machine-table-sort-button:hover,
.machine-table-sort-button:focus-visible {
  color: #344054;
  background: rgba(52, 64, 84, 0.07);
  outline: 0;
}

.machine-table-sort-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  opacity: 0.42;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.machine-table-sort-button.active {
  color: var(--brand, #357f72);
}

.machine-table-sort-button.active svg {
  opacity: 1;
}

.machine-table-sort-button.active[data-direction="asc"] svg {
  transform: rotate(180deg);
}

.machine-table-rows tbody td {
  padding: 0.72rem 0.65rem;
  vertical-align: middle;
  border-top: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
  background: linear-gradient(180deg, #fff, #fdfefe);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.machine-table-rows th:first-child,
.machine-table-rows td:first-child {
  padding-left: 0.78rem;
}

.machine-table-rows th:nth-child(3),
.machine-table-rows td:nth-child(3),
.machine-table-rows th:nth-child(5),
.machine-table-rows td:nth-child(5) {
  text-align: center;
}

.machine-table-rows th:last-child,
.machine-table-rows td:last-child {
  padding-right: 0.78rem;
  text-align: left;
}

.machine-table-rows tbody td:first-child {
  border-left: 1px solid #e3e7ed;
  border-radius: 14px 0 0 14px;
}

.machine-table-rows tbody td:last-child {
  border-right: 1px solid #e3e7ed;
  border-radius: 0 14px 14px 0;
}

.machine-table-rows tbody tr {
  filter: drop-shadow(0 3px 7px rgba(16, 24, 40, 0.065));
  transform: translateY(0);
  transition: filter 0.2s ease, transform 0.2s ease;
}

.machine-table-rows tbody tr:hover td {
  border-color: #d2cffc;
  background: linear-gradient(180deg, #fff, #f8fafc);
}

.machine-table-rows tbody tr:hover {
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(15, 102, 120, 0.12));
  transform: translateY(-2px);
}

.machine-primary {
  display: grid;
  min-width: 0;
  grid-template-columns: 16px 52px minmax(0, 1fr);
  align-items: center;
  gap: 0.48rem;
}

.machine-primary .status-badge {
  min-width: 52px;
  justify-content: center;
  padding: 0.28rem 0.38rem;
  font-size: 0.63rem;
}

.machine-table-rows .machine-number {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-table-rows .machine-configuration {
  max-width: 100%;
}

.machine-table-rows .local-remark {
  min-width: 0;
  min-height: 34px;
  padding: 0 0.52rem;
  border-color: #e4e7ec;
  background: #f8f9fb;
}

.machine-table-rows .server-room-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  background: #f2f4f7;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.machine-table-rows .remaining-time strong {
  justify-content: center;
  font-size: 0.74rem;
}

.machine-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.34rem;
  white-space: nowrap;
}

.machine-connect-button,
.machine-renew-button,
.machine-more-button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.56rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.machine-connect-button {
  color: #475467;
  border: 1px solid #d8dce3;
  background: #f8f9fb;
  box-shadow: none;
}

.machine-connect-button:hover {
  color: #344054;
  border-color: #c5cad3;
  background: #f1f3f6;
}

.machine-connect-button.is-connecting {
  cursor: progress;
  opacity: 0.72;
}

.machine-renew-button {
  color: #0f6678;
  border: 1px solid #cfe4e7;
  background: #f3f8f8;
}

.machine-renew-button:hover {
  color: #115c6c;
  border-color: #c7c3ff;
  background: #eaf1f8;
}

.machine-more-button {
  color: #475467;
  border: 1px solid #dfe3e8;
  background: #fff;
}

.machine-more-button:hover,
.machine-more-button[aria-expanded="true"] {
  color: #344054;
  border-color: #c9c5fb;
  background: #f8fbfb;
}

.machine-connect-button svg {
  width: 14px;
  height: 14px;
}

.machine-more-button svg {
  width: 12px;
  height: 12px;
}

.machine-action-menu {
  min-width: 138px;
  padding: 0.38rem;
  border-color: #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.13);
}

.machine-action-menu-portal {
  z-index: 1088;
}

.machine-table-rows tbody tr.dropdown-active {
  filter: none;
  transform: none;
}

.machine-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.62rem;
  color: #475467;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
}

.machine-action-menu .dropdown-item:hover {
  color: #0f6678;
  background: #f3f8f8;
}

.machine-action-menu .dropdown-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.machine-action-menu .dropdown-divider {
  margin: 0.3rem 0;
  border-color: #eef0f3;
}

.machine-action-notice {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1080;
  display: flex;
  max-width: min(360px, calc(100vw - 2rem));
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0.9rem;
  color: #344054;
  border: 1px solid #cfe4e7;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.15);
  font-size: 0.74rem;
  font-weight: 600;
}

.machine-action-notice[hidden] {
  display: none;
}

.machine-action-notice svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #16859a;
}

.machine-filter-bar:has(.machine-filters:only-child) {
  justify-content: flex-start;
}

.remote-agent-dialog {
  max-width: 540px;
}

.remote-agent-modal {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 24, 40, 0.2);
}

.remote-agent-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.35rem;
  border-bottom: 1px solid #e6eee9;
  background:
    radial-gradient(circle at 90% 0%, rgba(39, 138, 105, 0.14), transparent 42%),
    linear-gradient(135deg, #f4fbf8, #fff);
}

.remote-agent-hero-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #267b61;
  border: 1px solid #cce4db;
  border-radius: 13px;
  background: #e5f4ef;
}

.remote-agent-hero-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.remote-agent-hero > div {
  min-width: 0;
}

.remote-agent-hero > div > span {
  display: block;
  margin-bottom: 0.15rem;
  color: #328269;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.remote-agent-hero h2 {
  margin: 0;
  color: #1f3931;
  font-size: 1.08rem;
  font-weight: 780;
}

.remote-agent-hero p {
  margin: 0.22rem 0 0;
  color: #70807b;
  font-size: 0.72rem;
}

.remote-agent-close {
  display: grid;
  width: 35px;
  height: 35px;
  align-self: start;
  margin: 0;
  padding: 0;
  place-items: center;
  color: #62736e;
  border: 1px solid rgba(205, 221, 215, 0.92);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 248, 0.92));
  box-shadow:
    inset 0 1px 0 #fff,
    0 5px 14px rgba(31, 57, 49, 0.08);
  backdrop-filter: blur(10px);
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.remote-agent-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.15;
  transition: transform 0.18s ease;
}

.remote-agent-close:hover {
  color: #21715a;
  border-color: #a9d1c3;
  background: #eef9f5;
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 16px rgba(38, 123, 97, 0.14);
  transform: translateY(-1px);
}

.remote-agent-close:hover svg {
  transform: scale(1.1);
}

.remote-agent-close:active {
  box-shadow: 0 2px 6px rgba(31, 57, 49, 0.08);
  transform: translateY(0) scale(0.96);
}

.remote-agent-close:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(45, 128, 104, 0.14),
    0 6px 16px rgba(38, 123, 97, 0.12);
}

.remote-agent-body {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 1.15rem 1.35rem 1.25rem;
}

.remote-agent-current {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
}

.remote-agent-current > div {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e4ebe8;
  border-radius: 12px;
  background: #fafcfb;
}

.remote-agent-current > div:last-child {
  display: grid;
  align-content: center;
  gap: 0.18rem;
}

.remote-agent-current-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 9px;
  background: #f0f3f2;
}

.remote-agent-current-icon i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98a2b3;
  box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.13);
}

.remote-agent-current-icon i.online {
  background: #12b76a;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.13);
}

.remote-agent-current-icon i.offline {
  background: #f79009;
  box-shadow: 0 0 0 4px rgba(247, 144, 9, 0.13);
}

.remote-agent-current span:not(.remote-agent-current-icon) {
  display: grid;
  gap: 0.12rem;
}

.remote-agent-current small {
  color: #98a2b3;
  font-size: 0.65rem;
}

.remote-agent-current code,
#remoteAgentModalStatus {
  overflow: hidden;
  max-width: 100%;
  color: #344054;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#remoteAgentModalStatus.online {
  color: #027a48;
}

#remoteAgentModalStatus.offline {
  color: #b54708;
}

.remote-agent-steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.95rem;
  padding: 0.75rem;
  border: 1px solid #e5eeea;
  border-radius: 13px;
  background: #f6faf8;
}

.remote-agent-steps > i {
  width: 28px;
  height: 1px;
  background: #ccddd6;
}

.remote-agent-step {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.remote-agent-step > span {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: #31836a;
  font-size: 0.68rem;
  font-weight: 800;
}

.remote-agent-step > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.remote-agent-step strong {
  color: #344a43;
  font-size: 0.72rem;
}

.remote-agent-step small {
  color: #82908c;
  font-size: 0.66rem;
  line-height: 1.4;
}

.remote-agent-step a {
  margin-left: 0.2rem;
  color: #267b61;
  font-weight: 750;
}

.remote-agent-token-field {
  display: grid;
  gap: 0.5rem;
}

.remote-agent-token-field > label {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.remote-agent-token-field > label strong {
  color: #344054;
  font-size: 0.75rem;
}

.remote-agent-token-field > label small {
  color: #98a2b3;
  font-size: 0.66rem;
  font-weight: 500;
}

.remote-agent-token-field > div {
  display: flex;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid #cfdad6;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.remote-agent-token-field > div:focus-within {
  border-color: #63a892;
  box-shadow: 0 0 0 4px rgba(45, 128, 104, 0.1);
}

.remote-agent-token-field input {
  min-width: 0;
  flex: 1;
  padding: 0 0.85rem;
  color: #1d2939;
  border: 0;
  outline: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.remote-agent-token-field button {
  margin: 5px;
  padding: 0 1rem;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: #2d8068;
  font-size: 0.72rem;
  font-weight: 760;
  transition: background 0.18s ease, transform 0.18s ease;
}

.remote-agent-token-field button:hover {
  background: #246c58;
  transform: translateY(-1px);
}

.remote-agent-privacy-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  color: #7c8b86;
  font-size: 0.65rem;
}

.remote-agent-inline-message {
  margin-top: 0.65rem;
  padding: 0.58rem 0.7rem;
  color: #315f51;
  border: 1px solid #cce3da;
  border-radius: 9px;
  background: #f0f8f5;
  font-size: 0.68rem;
  line-height: 1.45;
}

.remote-agent-inline-message.error {
  color: #a33a32;
  border-color: #f0cec9;
  background: #fff7f6;
}

.remote-agent-inline-message[hidden] {
  display: none;
}

.remote-agent-privacy-note svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #439178;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.remote-agent-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #edf1ef;
}

.remote-agent-unbind {
  padding: 0;
  color: #b42318;
  border: 0;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 680;
}

.remote-agent-dismiss {
  display: inline-flex;
  min-width: 108px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.9rem;
  color: #48665c;
  border: 1px solid #d3e2dd;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #f4faf8 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 12px rgba(31, 57, 49, 0.07);
  font-size: 0.7rem;
  font-weight: 750;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.remote-agent-dismiss svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.remote-agent-dismiss:hover {
  color: #236f58;
  border-color: #abd2c4;
  background: #edf8f4;
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 17px rgba(38, 123, 97, 0.12);
  transform: translateY(-1px);
}

.remote-agent-dismiss:active {
  box-shadow: 0 2px 7px rgba(31, 57, 49, 0.08);
  transform: translateY(0) scale(0.98);
}

.remote-agent-dismiss:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(45, 128, 104, 0.13),
    0 5px 14px rgba(31, 57, 49, 0.09);
}

.machine-batch-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.35rem;
  border-bottom: 1px solid #e7e9ed;
  background: #fff;
}

.machine-batch-selection {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.machine-select-all,
.machine-row-selector {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.machine-select-all {
  gap: 0.45rem;
  color: #475467;
  font-size: 0.72rem;
  font-weight: 650;
}

.machine-select-all input,
.machine-row-selector input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #16859a;
  cursor: pointer;
}

.machine-selected-count {
  padding-left: 0.75rem;
  color: #98a2b3;
  border-left: 1px solid #e4e7ec;
  font-size: 0.69rem;
}

.machine-selected-count.has-selection {
  color: #0f6678;
  font-weight: 700;
}

.machine-batch-button {
  display: inline-flex;
  height: 34px;
  align-items: center;
  gap: 0.38rem;
  padding: 0 0.72rem;
  color: #475467;
  border: 1px solid #d8dce3;
  border-radius: 8px;
  background: #f8f9fb;
  font-size: 0.7rem;
  font-weight: 700;
}

.machine-batch-button:hover:not(:disabled),
.machine-batch-button[aria-expanded="true"] {
  color: #115c6c;
  border-color: #c9c5fb;
  background: #f3f8f8;
}

.machine-batch-button svg {
  width: 12px;
  height: 12px;
}

.machine-row-selector {
  flex: 0 0 auto;
}

.machine-table-rows tbody tr.row-selected td {
  border-color: #c9c5fb;
  background: linear-gradient(180deg, #fdfcff, #f8fbfb);
}

.machine-table-rows tbody tr.row-selected {
  filter: drop-shadow(0 7px 13px rgba(22, 133, 154, 0.14));
}

.online-status-stack {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.28rem;
}

.online-status-stack small {
  padding-left: 0.15rem;
  color: #a0a7b2;
  font-size: 0.62rem;
}

.configuration-stack {
  display: flex;
  max-width: 265px;
  flex-direction: column;
  gap: 0.23rem;
}

.configuration-stack strong {
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 750;
}

.configuration-stack span {
  overflow: hidden;
  color: #8a93a2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.64rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remaining-time strong {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.remaining-time strong svg {
  width: 15px;
  height: 15px;
  color: #7f75ef;
}

.remaining-time.remaining-expired strong svg {
  color: #f04438;
}

.remark-local-badge {
  padding: 0.18rem 0.3rem;
  color: #8d85e9;
  border-radius: 5px;
  background: #edf8f9;
  font-size: 0.56rem;
  font-weight: 700;
}

.local-remark.remark-saved {
  color: #079455;
  border-color: #a9efc6;
  background: #f6fef9;
}

.local-remark.remark-saved .remark-local-badge {
  color: #027a48;
  background: #dcfae6;
}

@media (max-width: 767.98px) {
  .machine-table-wrap {
    max-height: min(58vh, 560px);
  }

  .machine-filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .machine-filters {
    width: 100%;
  }

  .machine-filter {
    justify-content: center;
    flex: 1;
  }

  .machine-remote-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .machine-remote-selector {
    flex: 1;
  }
}

@media (max-width: 575.98px) {
  .machine-remote-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .remote-agent-status {
    width: 100%;
  }

  .remote-agent-current {
    grid-template-columns: 1fr;
  }

  .remote-agent-hero {
    grid-template-columns: auto 1fr;
    padding: 1rem;
  }

  .remote-agent-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }

  .remote-agent-hero p {
    padding-right: 1.5rem;
  }

  .remote-agent-body {
    padding: 1rem;
  }

  .remote-agent-steps {
    grid-template-columns: 1fr;
  }

  .remote-agent-steps > i {
    width: 1px;
    height: 12px;
    margin-left: 12px;
  }

  .remote-agent-token-field > label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.18rem;
  }

  .remote-agent-token-field > div {
    min-height: 46px;
  }
}

/* Database-backed machine purchase */
.database-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #027a48;
  border-color: #abefc6;
  background: #ecfdf3;
}

.database-source-badge i,
.purchase-plan-room i {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: #12b76a;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.1);
}

.server-room-selector-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.15rem;
  padding: 1rem 1.1rem;
  border: 1px solid #e4e4f2;
  border-radius: 16px;
  background: linear-gradient(120deg, #fff 0%, #f8fafc 100%);
  box-shadow: var(--shadow-sm);
}

.server-room-selector-title {
  display: flex;
  min-width: 235px;
  align-items: center;
  gap: 0.75rem;
}

.purchase-step-number {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #3995a5, #16758a);
  box-shadow: 0 4px 10px rgba(22, 133, 154, 0.2);
  font-size: 0.64rem;
  font-weight: 800;
}

.server-room-selector-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #1b7488;
  border: 1px solid #d5e9eb;
  border-radius: 11px;
  background: #f1f0ff;
}

.server-room-selector-icon svg,
.room-option-mark svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.server-room-selector-title > div,
.server-room-option > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.server-room-selector-title strong {
  color: #344054;
  font-size: 0.78rem;
}

.server-room-selector-title small {
  color: #98a2b3;
  font-size: 0.63rem;
}

.server-room-options {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.server-room-option {
  position: relative;
  display: flex;
  min-width: 138px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 2rem 0.65rem 0.75rem;
  color: #667085;
  text-align: left;
  border: 1px solid #e4e7ec;
  border-radius: 11px;
  background: #fff;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.server-room-option:hover {
  border-color: #bfdde1;
  background: #f8fafc;
}

.server-room-option.active {
  color: #16758a;
  border-color: #a9d4da;
  background: #f2f8f8;
  box-shadow: 0 6px 18px rgba(22, 133, 154, 0.1);
}

.room-option-mark {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #f2f4f7;
}

.server-room-option.active .room-option-mark {
  background: #e7e5ff;
}

.server-room-option strong {
  color: #344054;
  font-size: 0.72rem;
}

.server-room-option small {
  color: #98a2b3;
  font-size: 0.6rem;
}

.server-room-option > i {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 8px;
  height: 8px;
  border: 2px solid #d0d5dd;
  border-radius: 50%;
  transform: translateY(-50%);
}

.server-room-option.active > i {
  border-color: #16859a;
  background: #16859a;
  box-shadow: 0 0 0 3px #e5e3ff;
}

.room-no-plans {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  color: #98a2b3;
  border: 1px dashed #d8d9e6;
  border-radius: 16px;
  background: #f8fafc;
}

.room-no-plans strong {
  color: #475467;
  font-size: 0.8rem;
}

.room-no-plans small {
  font-size: 0.65rem;
}

.purchase-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 0.85rem;
  padding: 0 0.15rem;
}

.purchase-catalog-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.purchase-catalog-title > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.purchase-catalog-title strong {
  color: #1d2939;
  font-size: 0.9rem;
}

.purchase-catalog-title small {
  color: #98a2b3;
  font-size: 0.64rem;
}

.purchase-catalog-title small b {
  color: #16859a;
}

.purchase-catalog-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #667085;
  font-size: 0.66rem;
}

.purchase-catalog-meta > span {
  padding: 0.38rem 0.65rem;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #fff;
}

.purchase-catalog-meta b {
  color: #16758a;
}

.purchase-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: 0.9rem 1.1rem;
  color: #667085;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 0.72rem;
}

.purchase-summary-bar > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.purchase-summary-bar > span strong {
  color: #0f6678;
}

.purchase-summary-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #1b7488;
  border-radius: 10px;
  background: #edf8f9;
}

.purchase-summary-icon svg {
  width: 18px;
  height: 18px;
}

.purchase-summary-bar > div > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.purchase-summary-bar strong {
  color: #344054;
}

.purchase-summary-bar small {
  color: #98a2b3;
  font-size: 0.65rem;
}

.purchase-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.purchase-plan-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.purchase-plan-card:hover {
  transform: translateY(-3px);
  border-color: #d5d2ff;
  box-shadow: 0 15px 36px rgba(16, 24, 40, 0.09);
}

.purchase-plan-featured {
  border-color: #a9d4da;
  box-shadow: 0 13px 34px rgba(22, 133, 154, 0.1);
}

.purchase-plan-featured .purchase-plan-head {
  padding-top: 0.65rem;
}

.purchase-recommend {
  position: absolute;
  top: 0;
  right: 1.4rem;
  padding: 0.4rem 0.75rem;
  color: #fff;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(115deg, #16859a, #0f6678);
  font-size: 0.63rem;
  font-weight: 750;
}

.purchase-plan-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0 1.05rem;
  border-bottom: 1px solid #eef0f4;
}

.purchase-plan-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 13px;
}

.purchase-plan-icon svg {
  width: 23px;
  height: 23px;
}

.purchase-plan-identity {
  min-width: 0;
  flex: 1;
}

.purchase-plan-head h2 {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 780;
}

.purchase-plan-identity > small {
  display: block;
  margin-top: 0.18rem;
  color: #b0b7c3;
  font-size: 0.56rem;
}

.purchase-plan-room {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #98a2b3;
  font-size: 0.65rem;
}

.purchase-plan-room i {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.09);
}

.purchase-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0 0.3rem 0 auto;
  color: #1d2939;
}

.purchase-price > span {
  color: #0f6678;
  font-size: 1rem;
  font-weight: 750;
}

.purchase-price strong {
  font-size: 2rem;
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1;
}

.purchase-price small {
  color: #98a2b3;
  font-size: 0.72rem;
}

.purchase-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.55rem;
}

.purchase-section-heading strong {
  color: #475467;
  font-size: 0.69rem;
}

.purchase-section-heading small {
  color: #b0b7c3;
  font-size: 0.58rem;
}

.duration-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid #e7e9ee;
  border-radius: 11px;
  background: #f5f6f8;
}

.duration-option {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.1rem;
  color: #667085;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  transition: all 0.16s ease;
}

.duration-option span {
  color: #98a2b3;
  font-size: 0.59rem;
  font-weight: 600;
}

.duration-option:hover {
  color: #0f6678;
  background: rgba(255, 255, 255, 0.75);
}

.duration-option.active {
  color: #0f6678;
  border-color: #cfe4e7;
  background: #fff;
  box-shadow: 0 3px 9px rgba(16, 24, 40, 0.07);
}

.duration-option.active span {
  color: #7b73df;
}

.hardware-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.25rem 0 0.65rem;
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hardware-title i {
  height: 1px;
  flex: 1;
  background: #eceef2;
}

.hardware-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 1.2rem;
}

.hardware-list > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  background: #fafbfc;
}

.hardware-list dt {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: #98a2b3;
  font-size: 0.63rem;
  font-weight: 600;
}

.hardware-mark {
  display: inline-grid;
  width: 27px;
  height: 22px;
  place-items: center;
  color: #6961df;
  border-radius: 6px;
  background: #edf8f9;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hardware-list dd {
  overflow: hidden;
  margin: 0;
  color: #344054;
  font-size: 0.7rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-now-button {
  display: flex;
  width: 100%;
  min-height: 45px;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0 0.9rem;
  color: #344054;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  background: #fff;
  font-size: 0.76rem;
  font-weight: 750;
  transition: all 0.18s ease;
}

.purchase-now-button > small {
  margin-left: auto;
  color: #817ae2;
  font-size: 0.62rem;
  font-weight: 650;
}

.purchase-now-button > small b {
  font-size: 0.74rem;
}

.purchase-now-button > small em {
  font-style: normal;
}

.purchase-now-button svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.purchase-now-button:hover {
  color: #0f6678;
  border-color: #a9d4da;
  background: #f8fbfb;
}

.purchase-now-button:hover svg {
  transform: translateX(2px);
}

.purchase-now-button.primary {
  color: #fff;
  border-color: #16859a;
  background: linear-gradient(115deg, #16859a, #0f6678);
  box-shadow: 0 8px 19px rgba(15, 102, 120, 0.18);
}

.purchase-now-button.primary > small {
  color: rgba(255, 255, 255, 0.82);
}

.purchase-help-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #e4e2ff;
  border-radius: 13px;
  background: #f8fbfb;
}

.purchase-help-icon {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  place-items: center;
  color: #1b7488;
  border-radius: 10px;
  background: #e8e6ff;
}

.purchase-help-icon svg {
  width: 18px;
  height: 18px;
}

.purchase-help-strip > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.purchase-help-strip strong {
  color: #344054;
  font-size: 0.74rem;
}

.purchase-help-strip small {
  color: #7e8797;
  font-size: 0.65rem;
}

.confirm-plan-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid #e4e2ff;
  border-radius: 12px;
  background: #f8fbfb;
}

.confirm-plan-title > div {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.confirm-plan-title strong {
  color: #1d2939;
  font-size: 0.88rem;
}

.confirm-plan-title small {
  color: #7e8797;
  font-size: 0.67rem;
}

.confirm-order-list {
  margin: 1rem 0 0;
}

.confirm-order-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #eff1f4;
}

.confirm-order-list dt {
  color: #98a2b3;
  font-size: 0.7rem;
  font-weight: 600;
}

.confirm-order-list dd {
  max-width: 70%;
  margin: 0;
  color: #344054;
  font-size: 0.72rem;
  font-weight: 680;
  text-align: right;
}

.confirm-order-list .confirm-total {
  align-items: baseline;
  border-bottom: 0;
}

.confirm-total dd {
  color: #0f6678;
  font-size: 0.9rem;
}

.confirm-total dd strong {
  font-size: 1.4rem;
}

.payment-pending-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  color: #9a6700;
  border: 1px solid #fedf89;
  border-radius: 9px;
  background: #fffaeb;
  font-size: 0.65rem;
  line-height: 1.5;
}

.payment-pending-note svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 0.05rem;
}

.purchase-confirm-modal {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.18);
}

.purchase-confirm-dialog {
  max-width: 630px;
}

.purchase-count-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.purchase-count-field {
  display: flex;
  min-width: 0;
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.62rem;
  padding: 0.78rem;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(22, 133, 154, 0.075), transparent 52%),
    #fafbfc;
}

.purchase-count-heading {
  display: grid;
  min-width: 0;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 0.56rem;
}

.purchase-count-heading > b {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #16758a;
  border: 1px solid #dbd8ff;
  border-radius: 9px;
  background: #eef3f9;
  font-size: 0.7rem;
  font-weight: 820;
}

.purchase-count-heading label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}

.purchase-count-heading strong {
  color: #344054;
  font-size: 0.82rem;
  font-weight: 780;
}

.purchase-count-heading small {
  display: -webkit-box;
  min-height: 1.75em;
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.64rem;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.purchase-count-control {
  display: flex;
  min-height: 40px;
  align-items: stretch;
}

.purchase-stepper {
  display: grid;
  width: 100%;
  overflow: hidden;
  grid-template-columns: 36px minmax(45px, 1fr) 36px auto;
  border: 1px solid #d8dbe2;
  border-radius: 9px;
  background: #fff;
}

.purchase-stepper button {
  display: grid;
  min-height: 38px;
  padding: 0;
  place-items: center;
  color: #16758a;
  border: 0;
  background: #f2f8f8;
  font-size: 1rem;
  font-weight: 720;
}

.purchase-stepper button:hover {
  background: #eaf1f8;
}

.purchase-stepper button:disabled {
  color: #b3b8c2;
  cursor: not-allowed;
  background: #f4f5f7;
}

.purchase-stepper input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #1d2939;
  border: 0;
  border-right: 1px solid #e7e9ee;
  border-left: 1px solid #e7e9ee;
  outline: 0;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 760;
  text-align: center;
  appearance: textfield;
}

.purchase-stepper-unit {
  display: grid;
  min-width: 38px;
  padding: 0 0.55rem;
  place-items: center;
  color: #667085;
  background: #f8f9fb;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.duration-fixed-value {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.35rem 0 0.7rem;
  color: #344054;
  border: 1px solid #cde4e7;
  border-radius: 9px;
  background: #f3f8f8;
}

.duration-fixed-value[hidden] {
  display: none !important;
}

.duration-fixed-value strong {
  color: #16758a;
  font-size: 1rem;
  font-weight: 820;
}

.duration-fixed-value em {
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 760;
}

.duration-fixed-value small {
  margin-right: 0.35rem;
  margin-left: auto;
  padding: 0.2rem 0.42rem;
  color: #6961d7;
  border-radius: 999px;
  background: #e7e5ff;
  font-size: 0.57rem;
  font-weight: 760;
}

.purchase-count-result {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.43rem 0.55rem;
  border: 1px solid #eceef3;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.75);
}

.purchase-count-result span {
  flex: 0 0 auto;
  color: #98a2b3;
  font-size: 0.59rem;
}

.purchase-count-result strong {
  min-width: 0;
  overflow: hidden;
  color: #344054;
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-choice-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.7rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid #d4e8ea;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f8fb, #fbfbff);
}

.purchase-choice-summary-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #5a52d8;
  border-radius: 10px;
  background: #eae8ff;
}

.purchase-choice-summary-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.purchase-choice-summary > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.08rem;
}

.purchase-choice-summary small {
  color: #8c86b9;
  font-size: 0.58rem;
  font-weight: 720;
}

.purchase-choice-summary strong {
  color: #353064;
  font-size: 0.72rem;
  font-weight: 780;
}

.purchase-stepper input::-webkit-inner-spin-button,
.purchase-stepper input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.payment-modal-error {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: 9px;
  background: #fef3f2;
  font-size: 0.66rem;
  line-height: 1.5;
}

.popup-payment-view {
  text-align: center;
}

.popup-payment-view[hidden],
[data-purchase-review][hidden],
.payment-modal-error[hidden] {
  display: none !important;
}

.popup-payment-view h2 {
  margin: 0.7rem 0 0.25rem;
  color: #1d2939;
  font-size: 1.12rem;
  font-weight: 820;
}

.popup-payment-view > p {
  margin: 0 0 0.85rem;
  color: #7b8493;
  font-size: 0.68rem;
}

.popup-payment-actions {
  display: grid;
  width: min(100%, 180px);
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0.25rem auto 0;
}

.popup-payment-actions .btn-brand,
.popup-payment-actions .btn-soft {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 720;
  text-decoration: none;
}

.popup-payment-actions .btn-soft {
  color: #667085;
  border: 1px solid #dfe3e8;
  background: #fff;
}

.popup-payment-actions .btn-soft:hover {
  color: #344054;
  border-color: #cfd4dc;
  background: #f8f9fb;
}

.machine-refund-menu-item {
  color: #b42318;
}

.machine-refund-menu-item:hover,
.machine-refund-menu-item:focus {
  color: #912018;
  background: #fef3f2;
}

.machine-exchange-menu-item {
  color: #275fa8;
}

.machine-exchange-menu-item:hover,
.machine-exchange-menu-item:focus {
  color: #194b8d;
  background: #edf5ff;
}

.machine-exchange-modal {
  overflow: hidden;
  border: 1px solid rgba(88, 137, 201, 0.2);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(36, 73, 122, 0.22);
}

.exchange-eyebrow {
  color: #4c78b5;
}

.exchange-machine-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(86, 133, 194, 0.18);
  border-radius: 18px;
  background: linear-gradient(135deg, #f7fbff, #eef5ff);
}

.exchange-machine-route > div {
  min-width: 0;
}

.exchange-machine-route small {
  display: block;
  margin-bottom: 4px;
  color: #718096;
  font-size: 0.78rem;
}

.exchange-machine-route strong {
  display: block;
  overflow: hidden;
  color: #203858;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exchange-machine-route strong.is-assigned {
  color: #087a55;
  font-size: 1.08rem;
  font-weight: 850;
}

.exchange-route-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  color: #fff;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6194d4, #3e70b1);
  box-shadow: 0 8px 18px rgba(63, 112, 177, 0.25);
}

.exchange-route-arrow svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exchange-description {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 15px;
  color: #2c537f;
  border-radius: 16px;
  background: rgba(229, 241, 255, 0.72);
}

.exchange-description svg {
  flex: 0 0 auto;
  width: 22px;
  fill: none;
  stroke: #477fbd;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exchange-description strong,
.exchange-description span {
  display: block;
}

.exchange-description strong {
  margin-bottom: 3px;
  color: #24466d;
}

.exchange-description span {
  color: #647b96;
  font-size: 0.84rem;
  line-height: 1.6;
}

.exchange-limit-panel {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #cfe6dc;
  border-radius: 15px;
  background: #f3faf7;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.exchange-limit-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: #2f7960;
  place-items: center;
  border-radius: 12px;
  background: #dff2ea;
}

.exchange-limit-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exchange-limit-panel > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.exchange-limit-panel small {
  color: #7c9088;
  font-size: 0.68rem;
  font-weight: 700;
}

.exchange-limit-panel strong {
  color: #275b49;
  font-size: 0.86rem;
}

.exchange-limit-panel > div > span {
  overflow: hidden;
  color: #71847d;
  font-size: 0.72rem;
  text-overflow: ellipsis;
}

.exchange-limit-panel.is-loading {
  border-color: #dfe7e4;
  background: #f8faf9;
}

.exchange-limit-panel.is-loading .exchange-limit-icon {
  color: #81918b;
  background: #edf1f0;
}

.exchange-limit-panel.is-blocked {
  border-color: #f0d3c3;
  background: #fff7f2;
}

.exchange-limit-panel.is-blocked .exchange-limit-icon {
  color: #a65a35;
  background: #fae6db;
}

.exchange-limit-panel.is-blocked strong {
  color: #8c4528;
}

.exchange-review-box {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #eadfce;
  border-radius: 15px;
  background: #fffdf8;
}

.exchange-review-box[hidden] {
  display: none;
}

.exchange-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.exchange-review-heading > div {
  display: grid;
  gap: 2px;
}

.exchange-review-heading strong {
  color: #5e4a2e;
  font-size: 0.8rem;
}

.exchange-review-heading span,
.exchange-review-heading small {
  color: #95846c;
  font-size: 0.68rem;
}

.exchange-review-heading b {
  color: #735c3c;
}

.exchange-review-box textarea {
  width: 100%;
  min-height: 78px;
  margin-top: 9px;
  padding: 10px 11px;
  resize: vertical;
  color: #3e4650;
  border: 1px solid #e1d7c8;
  border-radius: 11px;
  outline: 0;
  background: #fff;
  font-size: 0.75rem;
  line-height: 1.55;
}

.exchange-review-box textarea:focus {
  border-color: #b89a6d;
  box-shadow: 0 0 0 3px rgba(184, 154, 109, 0.12);
}

.exchange-review-message {
  margin-top: 8px;
  padding: 8px 10px;
  color: #a0473a;
  border: 1px solid #efd1cb;
  border-radius: 9px;
  background: #fff7f5;
  font-size: 0.69rem;
  line-height: 1.5;
}

.exchange-review-message.is-success {
  color: #27684f;
  border-color: #cbe5d9;
  background: #f1faf6;
}

.exchange-review-box > button {
  width: 100%;
  min-height: 38px;
  margin-top: 9px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  background: #856a45;
  font-size: 0.74rem;
  font-weight: 750;
  transition: 0.18s ease;
}

.exchange-review-box > button:hover:not(:disabled) {
  background: #705737;
  transform: translateY(-1px);
}

.exchange-review-box > button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.exchange-notes {
  display: grid;
  gap: 7px;
  margin: 14px 0;
  padding: 0;
  color: #68778b;
  font-size: 0.84rem;
  list-style: none;
}

.exchange-notes li::before {
  margin-right: 8px;
  color: #4f81bd;
  font-weight: 800;
  content: "·";
}

.exchange-confirm-check {
  margin-top: 4px;
}

.exchange-result-message.is-success {
  padding: 0.85rem 0.95rem;
  color: #116244;
  border-color: rgba(48, 151, 103, 0.28);
  background: linear-gradient(135deg, #edfdf5, #e6f8ef);
  box-shadow: 0 8px 20px rgba(20, 117, 77, 0.08);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.65;
}

.exchange-submit-button {
  min-width: 124px;
  padding: 11px 20px;
  color: #fff;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, #5f91cf, #3d6fad);
  box-shadow: 0 10px 22px rgba(61, 111, 173, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.exchange-submit-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 13px 28px rgba(61, 111, 173, 0.3);
}

.exchange-submit-button:disabled {
  opacity: 0.48;
  box-shadow: none;
}

@media (max-width: 575.98px) {
  .exchange-machine-route {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 8px;
    padding: 13px;
  }

  .exchange-route-arrow {
    width: 34px;
    height: 34px;
  }
}

.refund-confirm-modal {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.2);
}

.refund-confirm-modal::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, #087a55, #58c49a 55%, #d5f5e8);
}

.refund-modal-dialog {
  max-width: 520px;
}

.refund-confirm-modal .modal-header {
  padding-top: 1.5rem !important;
}

.refund-confirm-modal .modal-header h2 {
  color: #101828;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.refund-modal-subtitle {
  margin: 0.32rem 0 0;
  color: #667085;
  font-size: 0.7rem;
  line-height: 1.45;
}

.refund-eyebrow {
  color: #b42318;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.1em;
}

.refund-machine-summary {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid #e0e8e4;
  border-radius: 12px;
  background: linear-gradient(145deg, #fbfdfc, #f7faf9);
}

.refund-machine-summary span {
  color: #667085;
  font-size: 0.76rem;
  font-weight: 650;
}

.refund-machine-identity {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.refund-machine-identity strong {
  color: #1d2939;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 760;
}

.refund-machine-identity small {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.28rem 0.52rem;
  color: #527267;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #f1faf6;
  font-size: 0.62rem;
  font-weight: 650;
  white-space: nowrap;
}

.refund-remaining-badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: #087a55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.refund-remaining-badge span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: #658478;
  font-size: inherit;
}

.refund-remaining-badge b {
  color: #087a55;
  font-size: 0.7rem;
  font-weight: 800;
}

.refund-amount-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 0.72rem;
  padding: 1rem;
  border: 1px solid #aee0ca;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 12%, rgba(88, 196, 154, 0.18), transparent 34%),
    linear-gradient(135deg, #effaf5, #f8fcfa);
  box-shadow: 0 8px 22px rgba(8, 122, 85, 0.07);
}

.refund-amount-preview span {
  color: #527267;
  font-size: 0.78rem;
  font-weight: 700;
}

.refund-amount-copy,
.refund-amount-value {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.refund-amount-copy {
  align-items: flex-start;
}

.refund-amount-value {
  align-items: flex-end;
}

.refund-amount-preview strong {
  color: #087a55;
  font-size: 1.48rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.refund-amount-preview small {
  color: #658478;
  font-size: 0.7rem;
  line-height: 1.45;
}

.refund-amount-copy small {
  color: #789187;
  font-size: 0.65rem;
}

.refund-amount-preview strong.is-error {
  color: #b42318;
  font-size: 0.75rem;
}

.refund-calculation {
  margin-top: 0.72rem;
  padding: 0.88rem 0.92rem;
  border: 1px solid #e1e8e5;
  border-radius: 14px;
  background: #fcfdfd;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.035);
}

.refund-calculation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.58rem;
}

.refund-calculation-title strong {
  color: #344054;
  font-size: 0.82rem;
  font-weight: 760;
}

.refund-calculation-title span {
  padding: 0.18rem 0.48rem;
  color: #087a55;
  border: 1px solid #abefc6;
  border-radius: 999px;
  background: #ecfdf3;
  font-size: 0.64rem;
  font-weight: 720;
}

.refund-calculation dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.refund-calculation dl > div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: start;
  gap: 0.8rem;
  padding: 0.42rem 0;
  border-top: 1px dashed #eaecf0;
}

.refund-calculation dl > div:first-child {
  border-top: 0;
}

.refund-calculation-row.is-formula {
  margin: 0.12rem 0;
  padding: 0.58rem 0.62rem;
  border-top: 0;
  border-radius: 9px;
  background: #f3f8f6;
}

.refund-calculation-row.is-formula dd {
  color: #255c48;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

.refund-calculation-row.is-deduction dd {
  color: #b54708;
}

.refund-calculation dt {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 620;
}

.refund-calculation dd {
  margin: 0;
  color: #344054;
  font-size: 0.72rem;
  font-weight: 690;
  line-height: 1.5;
  text-align: right;
  overflow-wrap: anywhere;
}

.refund-calculation p {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.58rem;
  color: #667085;
  border-radius: 8px;
  border-left: 3px solid #8dd5b8;
  background: #f5faf8;
  font-size: 0.67rem;
  line-height: 1.6;
}

.refund-review-offer {
  margin-top: 0.72rem;
  padding: 0.82rem;
  border: 1px solid #cddce6;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbfd, #f4f8fa);
}

.refund-review-offer[hidden],
.refund-review-editor[hidden],
.refund-review-status[hidden] {
  display: none;
}

.refund-review-offer-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.62rem;
}

.refund-review-offer-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #17677a;
  border: 1px solid #bddbe2;
  border-radius: 10px;
  background: #fff;
  font-size: 0.92rem;
  font-weight: 850;
}

.refund-review-offer-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.refund-review-offer-heading strong {
  color: #294b58;
  font-size: 0.76rem;
  font-weight: 780;
}

.refund-review-offer-heading small {
  color: #67808a;
  font-size: 0.65rem;
  line-height: 1.45;
}

.refund-review-offer-heading button,
.refund-review-editor > button {
  min-height: 35px;
  padding: 0.42rem 0.7rem;
  color: #17677a;
  border: 1px solid #b7d6df;
  border-radius: 9px;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 760;
}

.refund-review-offer-heading button:hover,
.refund-review-editor > button:hover:not(:disabled) {
  border-color: #5e9dac;
  background: #f2fafb;
}

.refund-review-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.72rem;
  padding-top: 0.72rem;
  border-top: 1px dashed #cddce6;
}

.refund-review-editor label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #344054;
  font-size: 0.71rem;
  font-weight: 730;
}

.refund-review-editor label span {
  color: #78909a;
  font-weight: 600;
}

.refund-review-money-input {
  display: flex;
  min-height: 44px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #cddce6;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.refund-review-money-input:focus-within {
  border-color: #69a6b4;
  box-shadow: 0 0 0 3px rgba(23, 103, 122, 0.08);
}

.refund-review-money-input span {
  display: grid;
  width: 42px;
  align-self: stretch;
  place-items: center;
  color: #17677a;
  border-right: 1px solid #d8e4e9;
  background: #f4f9fa;
  font-size: 0.9rem;
  font-weight: 800;
}

.refund-review-money-input input {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.72rem;
  color: #1f3b45;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 760;
}

.refund-review-money-input:has(input.is-invalid) {
  border-color: #d95d5d;
  box-shadow: 0 0 0 3px rgba(217, 93, 93, 0.08);
}

.refund-review-amount-hint {
  margin-top: -0.24rem;
  color: #67808a;
  font-size: 0.65rem;
  line-height: 1.45;
}

.refund-review-editor textarea {
  min-height: 94px;
  padding: 0.68rem 0.72rem;
  resize: vertical;
  color: #273d46;
  border: 1px solid #cddce6;
  border-radius: 10px;
  outline: 0;
  background: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  line-height: 1.55;
}

.refund-review-editor textarea:focus {
  border-color: #69a6b4;
  box-shadow: 0 0 0 3px rgba(23, 103, 122, 0.08);
}

.refund-review-editor p {
  margin: 0;
  color: #667d87;
  font-size: 0.65rem;
  line-height: 1.55;
}

.refund-review-editor > button {
  align-self: flex-end;
  color: #fff;
  border-color: #17677a;
  background: #17677a;
}

.refund-review-editor > button:hover:not(:disabled) {
  color: #fff;
  background: #10596a;
}

.refund-review-editor > button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.refund-review-status {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 0.72rem;
  margin-top: 0.75rem;
  padding: 0.9rem;
  border: 1px solid #b9e2d0;
  border-radius: 14px;
  background: linear-gradient(145deg, #f1faf6, #f8fcfa);
}

.refund-review-status-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #087a55;
  border: 1px solid #b9e2d0;
  border-radius: 50%;
  background: #fff;
  font-size: 1rem;
  font-weight: 850;
}

.refund-review-status > div {
  min-width: 0;
}

.refund-review-status strong {
  color: #175b46;
  font-size: 0.83rem;
  font-weight: 800;
}

.refund-review-status p {
  margin: 0.25rem 0 0.42rem;
  color: #557469;
  font-size: 0.69rem;
  line-height: 1.55;
}

.refund-review-status small {
  display: inline-flex;
  gap: 0.35rem;
  color: #6c847b;
  font-size: 0.64rem;
}

.refund-review-status small b {
  color: #27644f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.refund-manual-state {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.75rem;
  padding: 1rem;
  text-align: left;
  border: 1px solid #cfe8f1;
  border-radius: 15px;
  background: linear-gradient(145deg, #f7fcff 0%, #f4fbf8 100%);
}

.refund-manual-state[hidden] {
  display: none;
}

#refundModal.is-manual-refund .refund-eyebrow {
  color: #087a8c;
}

#refundModal.is-manual-refund .refund-confirm-modal::before {
  background: linear-gradient(90deg, #087a8c, #61c4c5 55%, #ddf6f4);
}

#refundModal.is-manual-refund .refund-machine-summary {
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 0.42rem;
  border-color: #d8eaf0;
  background: #f8fcfd;
}

#refundModal.is-manual-refund .refund-machine-identity {
  justify-content: flex-start;
}

#refundModal.is-manual-refund .refund-machine-identity small {
  color: #3f6672;
  border-color: #d5e9ed;
  background: #f1fafb;
}

#refundModal.is-manual-refund .refund-remaining-badge svg,
#refundModal.is-manual-refund .refund-remaining-badge b {
  color: #087a8c;
  stroke: #087a8c;
}

.refund-manual-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0;
  place-items: center;
  color: #087a8c;
  border: 1px solid #bee3ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(8, 122, 140, 0.1);
}

.refund-manual-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.refund-manual-copy {
  min-width: 0;
}

.refund-manual-copy > span {
  display: inline-flex;
  margin-bottom: 0.22rem;
  padding: 0.14rem 0.4rem;
  color: #087a8c;
  border-radius: 999px;
  background: #e7f7f8;
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.refund-manual-state h3 {
  margin: 0;
  color: #17324d;
  font-size: 1.06rem;
  font-weight: 800;
}

.refund-manual-state p {
  max-width: none;
  margin: 0.35rem 0 0;
  color: #5c7085;
  font-size: 0.72rem;
  line-height: 1.65;
}

.refund-manual-guide {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  margin-top: 0.15rem;
  padding: 0.72rem 0.78rem;
  text-align: left;
  border: 1px solid #d8eaf0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.refund-manual-guide > span {
  padding: 0.2rem 0.42rem;
  color: #087a8c;
  border-radius: 6px;
  background: #eaf7f8;
  font-size: 0.62rem;
  font-weight: 760;
}

.refund-manual-guide > div {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.refund-manual-guide strong {
  color: #264d65;
  font-size: 0.73rem;
}

.refund-manual-guide small {
  color: #667b8d;
  font-size: 0.67rem;
  line-height: 1.55;
}

.refund-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.8rem;
  padding: 0.75rem 0.8rem;
  color: #7a2e0e;
  border: 1px solid #fedf89;
  border-radius: 11px;
  background: #fffaeb;
}

.refund-warning svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.refund-warning > div {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.refund-warning strong {
  font-size: 0.76rem;
}

.refund-warning span {
  color: #9a6700;
  font-size: 0.68rem;
  line-height: 1.55;
}

.refund-reason-field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  margin-top: 0.85rem;
}

.refund-reason-field > span {
  color: #475467;
  font-size: 0.68rem;
  font-weight: 720;
}

.refund-reason-field textarea {
  min-height: 82px;
  padding: 0.7rem 0.75rem;
  resize: vertical;
  color: #344054;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  outline: 0;
  background: #fff;
  font-size: 0.68rem;
  line-height: 1.55;
}

.refund-reason-field textarea:focus {
  border-color: #9c97ff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.09);
}

.refund-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.75rem 0.8rem;
  color: #344054;
  border: 1px solid #e4e7ec;
  border-radius: 11px;
  background: #f9fafb;
  cursor: pointer;
}

.refund-confirm-check input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 0.12rem;
  accent-color: #087a55;
}

.refund-confirm-check > span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.refund-confirm-check strong {
  color: #344054;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.4;
}

.refund-confirm-check small {
  color: #667085;
  font-size: 0.68rem;
  line-height: 1.5;
}

.refund-confirm-check:has(input:checked) {
  border-color: #abefc6;
  background: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(8, 122, 85, 0.06);
}

.refund-result-message {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  color: #b42318;
  border: 1px solid #fecdca;
  border-radius: 9px;
  background: #fef3f2;
  font-size: 0.7rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.refund-result-message.is-success {
  color: #027a48;
  border-color: #abefc6;
  background: #ecfdf3;
}

.refund-success-receipt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px solid #a9e5c4;
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(110, 231, 183, 0.2), transparent 38%),
    linear-gradient(145deg, #f4fff8, #ecfdf3);
  box-shadow: 0 12px 28px rgba(4, 120, 87, 0.1);
}

.refund-success-receipt[hidden] {
  display: none;
}

.refund-success-receipt-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #059669, #10b981);
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.22);
}

.refund-success-receipt-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.refund-success-receipt-copy > span {
  display: block;
  color: #16845e;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.refund-success-receipt-copy > strong {
  display: block;
  margin-top: 0.1rem;
  color: #075d42;
  font-size: 1.08rem;
  font-weight: 860;
}

.refund-success-receipt-copy > p {
  margin: 0.28rem 0 0;
  color: #477363;
  font-size: 0.71rem;
  line-height: 1.55;
}

.refund-success-receipt dl {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 1px;
  overflow: hidden;
  margin: 0.1rem 0 0;
  border: 1px solid rgba(134, 219, 173, 0.58);
  border-radius: 11px;
  background: rgba(134, 219, 173, 0.5);
}

.refund-success-receipt dl > div {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.74);
}

.refund-success-receipt dt {
  color: #648275;
  font-size: 0.61rem;
  font-weight: 650;
}

.refund-success-receipt dd {
  margin: 0.14rem 0 0;
  overflow: hidden;
  color: #154f3b;
  font-size: 0.72rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refund-success-receipt dd b {
  font-size: 1rem;
}

@media (max-width: 520px) {
  .refund-success-receipt {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 0.85rem;
  }

  .refund-success-receipt-icon {
    width: 40px;
    height: 40px;
  }

  .refund-success-receipt dl {
    grid-template-columns: 1fr;
  }
}

.refund-confirm-modal .modal-footer {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.65rem;
}

.refund-confirm-modal .modal-footer.is-single-action {
  grid-template-columns: 1fr;
}

.refund-confirm-modal .btn-soft,
.refund-submit-button,
.refund-support-button {
  min-height: 44px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 720;
}

.refund-confirm-modal .btn-soft {
  color: #667085;
  border: 1px solid #dfe3e8;
  background: #fff;
}

.refund-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid #087a8c;
  background: linear-gradient(135deg, #1593a3, #087a8c);
  box-shadow: 0 9px 18px rgba(8, 122, 140, 0.18);
  text-decoration: none;
}

.refund-support-button:hover {
  color: #fff;
  transform: translateY(-1px);
}

.refund-submit-button {
  color: #fff;
  border: 1px solid #d92d20;
  background: linear-gradient(135deg, #e5483d, #c9231a);
  box-shadow: 0 9px 18px rgba(217, 45, 32, 0.16);
}

.refund-submit-button:hover:not(:disabled) {
  border-color: #b42318;
  background: #b42318;
}

.refund-submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 575.98px) {
  .refund-machine-identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .refund-amount-preview {
    grid-template-columns: 1fr;
  }

  .refund-amount-value {
    align-items: flex-start;
  }

  .refund-calculation dl > div {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.55rem;
  }

  .refund-review-offer-heading {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .refund-review-offer-heading button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .purchase-count-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .purchase-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .purchase-summary-bar,
  .purchase-heading,
  .server-room-selector-panel,
  .purchase-catalog-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .server-room-selector-title {
    min-width: 0;
  }

  .server-room-options,
  .server-room-option {
    width: 100%;
  }

  .server-room-options {
    justify-content: stretch;
  }

  .purchase-catalog-meta {
    width: 100%;
    flex-wrap: wrap;
  }

  .purchase-plan-head {
    flex-wrap: wrap;
  }

  .purchase-price {
    width: 100%;
    margin: 0.35rem 0 0 3.8rem;
  }

  .hardware-list {
    grid-template-columns: 1fr;
  }
}

/* Alipay face-to-face payment and result pages */
.payment-redirect-page,
.payment-result-page {
  display: grid;
  min-height: calc(100vh - 190px);
  padding: 2rem 0;
  place-items: center;
}

.payment-state-card {
  width: min(100%, 520px);
  padding: 2.2rem;
  text-align: center;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.09);
}

.payment-state-card h1 {
  margin: 1rem 0 0.45rem;
  color: #1d2939;
  font-size: 1.35rem;
  font-weight: 820;
}

.payment-state-card > p {
  margin: 0 0 1.35rem;
  color: #7b8493;
  font-size: 0.72rem;
  line-height: 1.7;
}

.payment-loading-ring {
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 4px solid #e7e5ff;
  border-top-color: #16859a;
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}

@keyframes payment-spin {
  to { transform: rotate(360deg); }
}

.payment-state-icon {
  display: inline-grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #f04438;
  box-shadow: 0 8px 20px rgba(240, 68, 56, 0.2);
  font-size: 1.25rem;
  font-weight: 800;
}

.payment-state-success .payment-state-icon {
  background: #12b76a;
  box-shadow: 0 8px 20px rgba(18, 183, 106, 0.2);
}

.payment-state-warning .payment-state-icon {
  background: #f79009;
  box-shadow: 0 8px 20px rgba(247, 144, 9, 0.2);
}

.payment-state-card .btn-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 1.1rem;
}

.payment-result-detail {
  margin: 1rem 0 1.35rem;
  padding: 0.35rem 1rem;
  text-align: left;
  border: 1px solid #eaecf0;
  border-radius: 12px;
  background: #fafbfc;
}

.payment-result-detail > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #eaecf0;
}

.payment-result-detail > div:last-child {
  border-bottom: 0;
}

.payment-result-detail dt {
  color: #98a2b3;
  font-size: 0.65rem;
}

.payment-result-detail dd {
  margin: 0;
  color: #344054;
  font-size: 0.68rem;
  font-weight: 720;
}

.payment-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.payment-result-page .payment-state-card {
  width: min(100%, 920px);
}

.purchased-machines {
  margin: 1.2rem 0 1.4rem;
  text-align: left;
}

.purchased-machines-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.purchased-machines-heading div {
  display: grid;
  gap: 0.18rem;
}

.purchased-machines-heading span {
  color: #98a2b3;
  font-size: 0.66rem;
}

.purchased-machines-heading strong {
  color: #1d2939;
  font-size: 0.85rem;
}

.purchased-machines-heading a {
  color: #536072;
  font-size: 0.68rem;
  font-weight: 720;
}

.purchase-power-on-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  margin: 0 0 0.8rem;
  padding: 0.78rem 0.86rem;
  color: #344054;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0faf5 0%, #f8fcfa 100%);
}

.purchase-power-on-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #087a55;
  border: 1px solid #b7dfcf;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(8, 122, 85, 0.08);
}

.purchase-power-on-icon svg,
.purchase-power-on-time svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.purchase-power-on-notice > div {
  display: grid;
  gap: 0.16rem;
}

.purchase-power-on-notice strong {
  color: #155b46;
  font-size: 0.72rem;
  font-weight: 800;
}

.purchase-power-on-notice p {
  margin: 0;
  color: #5f756d;
  font-size: 0.65rem;
  line-height: 1.55;
}

.purchase-power-on-time {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  color: #087a55;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.64rem;
  font-weight: 760;
  white-space: nowrap;
}

.purchased-machine-list {
  display: grid;
  gap: 0.75rem;
}

.purchased-machine-card {
  padding: 1rem 1.05rem;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(16, 24, 40, 0.04);
}

.purchased-machine-primary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.purchased-machine-primary > div {
  display: grid;
  gap: 0.12rem;
}

.purchased-machine-primary small {
  color: #7b8493;
  font-size: 0.62rem;
}

.purchased-machine-primary strong {
  color: #1d2939;
  font-size: 0.84rem;
}

.purchased-machine-card .machine-status-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98a2b3;
  box-shadow: 0 0 0 4px #f2f4f7;
}

.purchased-machine-card .machine-status-dot.is-online {
  background: #12b76a;
  box-shadow: 0 0 0 4px #ecfdf3;
}

.purchased-machine-card .machine-status-dot.is-offline {
  background: #f04438;
  box-shadow: 0 0 0 4px #fef3f2;
}

.purchased-machine-card dl {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 0.85fr;
  gap: 1rem;
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid #f0f1f3;
}

.purchased-machine-card dl > div {
  display: grid;
  gap: 0.16rem;
}

.purchased-machine-card dt,
.purchased-machine-remote small {
  color: #98a2b3;
  font-size: 0.6rem;
  font-weight: 600;
}

.purchased-machine-card dd {
  margin: 0;
  color: #475467;
  font-size: 0.68rem;
  font-weight: 680;
}

.purchased-machine-card .purchased-machine-remaining {
  align-self: start;
  gap: 0.24rem;
  padding: 0.52rem 0.62rem;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0faf5, #f7fcfa);
}

.purchased-machine-remaining dt {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: #5f7d72;
  font-size: 0.62rem;
}

.purchased-machine-remaining dt svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #087a55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.purchased-machine-card .purchased-machine-remaining dd {
  color: #087a55;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.purchased-machine-remote {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding: 0.65rem;
  border-radius: 10px;
  background: #f8fafc;
}

.purchased-machine-remote span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.purchased-machine-remote b {
  overflow: hidden;
  color: #475467;
  font-size: 0.64rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-allocation-notice {
  margin: 1rem 0 1.3rem;
  padding: 0.75rem 0.9rem;
  color: #475467;
  border: 1px solid #d0d5dd;
  border-radius: 11px;
  background: #f8fafc;
  font-size: 0.68rem;
  line-height: 1.65;
}

.payment-allocation-notice.is-error {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.payment-back-link {
  color: #667085;
  font-size: 0.7rem;
  font-weight: 650;
}

@media (max-width: 720px) {
  .purchase-power-on-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .purchase-power-on-time {
    grid-column: 2;
    justify-self: start;
  }

  .purchased-machine-card dl {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .purchased-machine-remote {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alipay-qr-card {
  width: min(100%, 560px);
}

.popup-payment-view h2.payment-scan-title,
.payment-state-card h1.payment-scan-title,
.renewal-payment-view h2.payment-scan-title {
  color: #1268d6;
  font-weight: 840;
  text-shadow: 0 4px 16px rgba(18, 104, 214, 0.12);
}

.alipay-payment-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin: -0.35rem 0 0.9rem;
}

.alipay-payment-amount small {
  color: #98a2b3;
  font-size: 0.68rem;
}

.alipay-payment-amount strong {
  color: #1d2939;
  font-size: 1.55rem;
}

.alipay-payment-qr {
  display: grid;
  width: 242px;
  height: 242px;
  margin: 0 auto 0.7rem;
  padding: 0.6rem;
  place-items: center;
  border: 1px solid #dce6f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(8, 102, 255, 0.09);
}

.payment-qr-protected {
  position: relative;
  overflow: hidden;
}

.payment-qr-watermark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: max-content;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #b42318;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.95),
    0 0 2px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.payment-qr-watermark strong {
  color: #b42318;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.1;
}

.payment-qr-watermark small {
  color: #c43222;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.payment-safety-warning {
  display: flex;
  width: min(100%, 360px);
  align-items: flex-start;
  gap: 0.48rem;
  margin: 0 auto 0.65rem;
  padding: 0.58rem 0.7rem;
  text-align: left;
  color: #7a392f;
  border: 1px solid #f3c8be;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff7f4, #fffaf8);
  font-size: 0.63rem;
  line-height: 1.5;
}

.payment-safety-warning strong {
  flex: 0 0 auto;
  color: #c43222;
  font-weight: 850;
}

.payment-safety-warning span {
  color: #7a5149;
  font-weight: 650;
}

.payment-expiry-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 0.65rem;
  padding: 0.4rem 0.68rem;
  color: #76520b;
  border: 1px solid #f2d899;
  border-radius: 999px;
  background: #fff9e8;
  font-size: 0.68rem;
  font-weight: 720;
}

.payment-expiry-countdown strong {
  min-width: 3.2rem;
  color: #d26a0c;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.payment-expiry-countdown.is-expired {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.payment-expiry-countdown.is-expired strong {
  color: #b42318;
}

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

.alipay-order-no {
  color: #98a2b3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
}

.alipay-payment-waiting {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.65rem 0 0.85rem;
  color: #667085;
  font-size: 0.7rem;
}

.alipay-payment-waiting .payment-loading-ring {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: #dbeafe;
  border-top-color: #0866ff;
}

@media (max-width: 767.98px) {
  html {
    font-size: 14px;
  }

  .app-main {
    padding: 1.25rem 0 2.5rem;
  }

  .dashboard-hero {
    padding: 1.6rem;
    border-radius: 18px;
  }

  .hero-content {
    align-items: flex-start;
    flex-direction: column;
  }

  .match-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .panel-heading,
  .page-heading,
  .service-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .machine-search {
    width: 100%;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-summary {
    grid-row: auto;
  }

  .heading-badge {
    align-self: flex-start;
  }

  .app-footer .container-xl {
    text-align: center;
  }
}

/* Left sidebar application shell */
.app-sidebar {
  --bs-offcanvas-width: 270px;
  width: 270px !important;
  color: #475467;
  border: 0 !important;
  border-right: 1px solid #e8eaf0 !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(22, 133, 154, 0.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #fbfbfe 100%);
  box-shadow: 10px 0 35px rgba(16, 24, 40, 0.035);
}

.sidebar-head {
  display: flex;
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.15rem 1rem;
  border-bottom: 1px solid #eceef3;
}

.sidebar-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
}

.sidebar-brand:hover {
  color: var(--ink);
}

.sidebar-brand > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.sidebar-brand strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sidebar-brand small {
  color: #98a2b3;
  font-size: 0.65rem;
}

.sidebar-close {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: #667085;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  background: #f8f9fb;
}

.sidebar-close svg {
  width: 18px;
  height: 18px;
}

.sidebar-body {
  display: flex;
  min-height: 0;
  overflow-y: auto;
  padding: 1.15rem 0.85rem;
  flex-direction: column;
  flex: 1;
}

.sidebar-section + .sidebar-section {
  margin-top: 1.25rem;
}

.sidebar-section-remote {
  margin-top: auto !important;
  padding-top: 1rem;
  border-top: 1px solid #eceef3;
}

.sidebar-section-remote .sidebar-label {
  color: #6f8e84;
}

.sidebar-section-remote .sidebar-link {
  min-height: 53px;
}

.sidebar-section-remote .sidebar-link-icon {
  color: #558779;
  background: #edf5f2;
}

.sidebar-section-remote .sidebar-link:hover .sidebar-link-icon,
.sidebar-section-remote .sidebar-link.active .sidebar-link-icon {
  color: #2d8068;
  background: #dff0ea;
}

.sidebar-download-link:hover {
  color: #27745e;
  border-color: #d5e9e1;
  background: #f2f9f6;
}

.sidebar-label {
  display: block;
  margin: 0 0.65rem 0.5rem;
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sidebar-nav {
  display: grid;
  gap: 0.35rem;
}

.sidebar-link {
  position: relative;
  display: grid;
  min-height: 57px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.55rem 0.65rem;
  color: #667085;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.sidebar-link:hover {
  color: var(--brand-dark);
  border-color: #e3e1ff;
  background: #f5f8fb;
  transform: translateX(2px);
}

.sidebar-link.active {
  color: #0f6678;
  border-color: #cfe4e7;
  background: linear-gradient(105deg, #eef3f9, #f8fbfb);
  box-shadow: inset 3px 0 0 #16859a, 0 5px 15px rgba(22, 133, 154, 0.07);
}

.sidebar-link-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #7e899d;
  border-radius: 10px;
  background: #f2f4f7;
}

.sidebar-link.active .sidebar-link-icon {
  color: #1b7488;
  background: #e4e2ff;
}

.sidebar-link-icon svg {
  width: 19px;
  height: 19px;
}

.sidebar-link > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.sidebar-link strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.sidebar-support-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.48rem;
}

.sidebar-support-unread {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  flex: 0 0 auto;
  padding: 0 0.35rem;
  place-items: center;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: #e0525d;
  box-shadow: 0 4px 10px rgba(224, 82, 93, 0.24);
  font-size: 0.6rem;
  font-weight: 850;
  line-height: 1;
}

.sidebar-support-unread[hidden] {
  display: none;
}

.sidebar-link.active .sidebar-support-unread {
  color: #fff;
  background: #d94754;
}

.sidebar-link small {
  color: #667085;
  font-size: 0.64rem;
}

.sidebar-link.active small,
.sidebar-link:hover small {
  color: #7e7ab4;
}

.sidebar-remote-status {
  display: inline-flex !important;
  align-items: center;
  gap: 0.38rem !important;
  color: #8a94a3 !important;
  line-height: 1.2;
}

.sidebar-remote-status > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #98a2b3;
  box-shadow: 0 0 0 3px rgba(152, 162, 179, 0.12);
}

.sidebar-remote-binding.is-online .sidebar-remote-status {
  color: #16825f !important;
}

.sidebar-remote-binding.is-online .sidebar-remote-status > i {
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.13);
}

.sidebar-remote-binding.is-offline .sidebar-remote-status {
  color: #b76e00 !important;
}

.sidebar-remote-binding.is-offline .sidebar-remote-status > i {
  background: #f79009;
  box-shadow: 0 0 0 3px rgba(247, 144, 9, 0.13);
}

.sidebar-remote-binding.is-unbound .sidebar-remote-status > i {
  background: #98a2b3;
}

.sidebar-link > i {
  width: 5px;
  height: 5px;
  border-radius: 99px;
  background: transparent;
}

.sidebar-link.active > i {
  background: #16859a;
  box-shadow: 0 0 0 4px rgba(22, 133, 154, 0.1);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.85rem 0.85rem 0;
  padding: 0.72rem;
  border: 1px solid #dfeae4;
  border-radius: 13px;
  background: linear-gradient(120deg, #f4fbf7, #fbfdfc);
}

.sidebar-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  color: var(--ink);
}

.sidebar-account:hover {
  color: var(--ink);
}

.sidebar-user-card .account-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.sidebar-account > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.sidebar-account small {
  color: #98a2b3;
  font-size: 0.66rem;
}

.sidebar-account strong {
  overflow: hidden;
  max-width: 125px;
  color: #344054;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account .sidebar-member-id {
  overflow: hidden;
  max-width: 125px;
  color: #667085;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-card .sidebar-logout {
  width: 34px;
  height: 34px;
}

.sidebar-logout {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: #667085;
  border: 1px solid #e1e4ea;
  border-radius: 10px;
  background: #fff;
  transition: all 0.18s ease;
}

.sidebar-logout:hover {
  color: #d92d20;
  border-color: #fecdca;
  background: #fff5f4;
}

.sidebar-logout svg {
  width: 18px;
  height: 18px;
}

.app-content {
  min-width: 0;
}

.content-container {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

.mobile-topbar,
.auth-header {
  position: sticky;
  z-index: 1020;
  top: 0;
  min-height: 68px;
  border-bottom: 1px solid rgba(231, 234, 240, 0.9);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
}

.mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
}

.mobile-brand:hover {
  color: var(--ink);
}

.mobile-brand strong {
  font-size: 0.95rem;
}

.mobile-brand .brand-mark {
  width: 36px;
  height: 36px;
}

.mobile-menu-button {
  display: grid;
  width: 39px;
  height: 39px;
  padding: 0;
  place-items: center;
  color: #475467;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.mobile-menu-button svg {
  width: 21px;
  height: 21px;
}

.auth-header .container-xl {
  display: flex;
  min-height: 72px;
  align-items: center;
}

@media (min-width: 992px) {
  .app-sidebar {
    position: fixed;
    z-index: 1040;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex !important;
    height: 100vh;
    flex-direction: column;
    visibility: visible !important;
    transform: none !important;
  }

  .app-content {
    margin-left: 270px;
  }

  .sidebar-layout .app-main {
    padding-top: 2.2rem;
  }
}

@media (max-width: 991.98px) {
  .app-sidebar {
    display: flex;
    height: 100vh;
    flex-direction: column;
  }

  .content-container {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .sidebar-layout .app-main {
    padding-top: 1.25rem;
  }
}

/* Purchase marketplace redesign */
.purchase-compact-topbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
  padding: 0.68rem 0.82rem;
  border: 1px solid #e3e1ff;
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 0%, rgba(22, 133, 154, 0.08), transparent 32%),
    linear-gradient(120deg, #fff, #f8fafc);
  box-shadow: 0 5px 18px rgba(29, 41, 57, 0.045);
}

.purchase-compact-primary {
  display: flex;
  min-width: 220px;
  align-items: center;
  gap: 0.7rem;
}

.purchase-compact-icon {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  box-shadow: 0 7px 16px rgba(22, 117, 138, 0.18);
}

.purchase-compact-icon svg {
  width: 20px;
  height: 20px;
}

.purchase-compact-primary h1 {
  margin: 0;
  color: #1d2939;
  font-size: 1.08rem;
  font-weight: 820;
  letter-spacing: -0.03em;
}

.purchase-compact-primary p {
  margin: 0.08rem 0 0;
  color: #98a2b3;
  font-size: 0.58rem;
}

.purchase-compact-divider {
  width: 1px;
  height: 31px;
  flex: 0 0 auto;
  background: #e4e7ec;
}

.purchase-compact-section {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
}

.purchase-compact-section strong {
  color: #344054;
  font-size: 0.74rem;
  font-weight: 780;
}

.purchase-compact-section small {
  color: #98a2b3;
  font-size: 0.57rem;
}

.purchase-compact-meta {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.purchase-live-status,
.purchase-compact-meta .market-room-total {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.27rem 0.5rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  white-space: nowrap;
}

.purchase-live-status {
  color: #027a48;
  border: 1px solid #abefc6;
  background: #ecfdf3;
}

.purchase-live-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #12b76a;
}

.purchase-compact-meta .market-room-total {
  color: #16758a;
  border: 1px solid #cde4e7;
  background: #f3f8f8;
}

.purchase-market-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #e3e1ff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 10%, rgba(22, 133, 154, 0.11), transparent 30%),
    linear-gradient(120deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 8px 24px rgba(29, 41, 57, 0.05);
}

.purchase-market-title {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}

.purchase-market-title h1 {
  margin: 0.14rem 0 0.18rem;
  color: #1d2939;
  font-size: 1.42rem;
  font-weight: 820;
  letter-spacing: -0.035em;
}

.purchase-market-title p {
  margin: 0;
  color: #7b8493;
  font-size: 0.7rem;
}

.purchase-market-icon {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border-radius: 14px;
  background: linear-gradient(145deg, #3995a5, #16758a);
  box-shadow: 0 10px 22px rgba(22, 117, 138, 0.22);
}

.purchase-market-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.purchase-market-status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 0.38rem;
}

.purchase-market-status > span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.65rem;
  color: #027a48;
  border: 1px solid #abefc6;
  border-radius: 999px;
  background: #ecfdf3;
  font-size: 0.62rem;
  font-weight: 720;
}

.purchase-market-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.12);
}

.purchase-market-status small {
  color: #98a2b3;
  font-size: 0.6rem;
}

.purchase-market-status b {
  color: #16758a;
}

.market-room-panel {
  position: relative;
  margin-bottom: 0.8rem;
  overflow: hidden;
  padding: 0.65rem;
  border: 1px solid #e3e6eb;
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(22, 133, 154, 0.07), transparent 30%),
    #fff;
  box-shadow: 0 7px 24px rgba(16, 24, 40, 0.05);
}

.market-room-carousel-toolbar {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
  padding: 0 0.2rem;
}

.market-room-carousel-hint {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.market-room-carousel-hint > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: #227c90;
  border: 1px solid #d8eaec;
  border-radius: 9px;
  background: #f3f8f8;
}

.market-room-carousel-hint svg {
  width: 16px;
  height: 16px;
}

.market-room-carousel-hint > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.market-room-carousel-hint strong {
  color: #344054;
  font-size: 0.7rem;
  font-weight: 780;
}

.market-room-carousel-hint small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-room-carousel-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.market-room-carousel-nav[hidden] {
  display: none !important;
}

.market-room-carousel-nav > span {
  min-width: 64px;
  padding-right: 0.15rem;
  color: #7a8494;
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.market-room-carousel-nav button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: #16758a;
  border: 1px solid #cde4e7;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 24, 40, 0.04);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.market-room-carousel-nav button:hover:not(:disabled) {
  color: #0e5868;
  border-color: #a9d4da;
  background: #f3f8f8;
  transform: translateY(-1px);
}

.market-room-carousel-nav button:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.market-room-carousel-nav button:disabled {
  color: #b7bdc7;
  border-color: #e7e9ed;
  background: #f7f8fa;
  box-shadow: none;
  cursor: not-allowed;
}

.market-room-carousel-nav svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.market-room-carousel-frame {
  position: relative;
  z-index: 0;
  min-height: 246px;
  min-width: 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(217, 214, 254, 0.65);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -18%, rgba(22, 133, 154, 0.15), transparent 46%),
    radial-gradient(circle at 12% 28%, rgba(80, 180, 255, 0.08), transparent 28%),
    radial-gradient(circle at 88% 32%, rgba(112, 222, 188, 0.08), transparent 28%),
    linear-gradient(180deg, #fdfdff 0%, #f5f5fc 72%, #efeff9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -28px 48px rgba(14, 88, 104, 0.055);
}

.market-room-carousel-frame::before,
.market-room-carousel-frame::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.market-room-carousel-frame::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(22, 133, 154, 0.055) 50%, transparent 50.2%),
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.92), transparent 43%);
}

.market-room-carousel-frame::after {
  right: 12%;
  bottom: -15px;
  left: 12%;
  height: 72px;
  border: 1px solid rgba(22, 133, 154, 0.08);
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(22, 117, 138, 0.2) 0%, rgba(22, 133, 154, 0.09) 34%, transparent 70%);
  filter: blur(7px);
  transform: perspective(420px) rotateX(68deg);
}

.market-room-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding: 0 0.15rem;
}

.market-room-heading h2 {
  margin: 0.14rem 0 0.12rem;
  color: #1d2939;
  font-size: 1rem;
  font-weight: 820;
}

.market-room-heading p {
  margin: 0;
  color: #98a2b3;
  font-size: 0.62rem;
}

.market-room-heading .market-room-total {
  display: inline-flex;
  padding: 0.3rem 0.58rem;
  color: #16758a;
  border: 1px solid #cde4e7;
  border-radius: 999px;
  background: #f3f8f8;
  font-size: 0.59rem;
  font-weight: 720;
}

.market-room-tabs {
  position: relative;
  z-index: 2;
  display: block;
  height: 246px;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  outline: 0;
  perspective: 900px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  touch-action: pan-y;
  user-select: none;
}

.market-room-tabs::-webkit-scrollbar {
  display: none;
}

.market-room-tabs .server-room-option {
  --room-x: 0%;
  --room-y: -6px;
  --room-z: 55px;
  --room-tilt: -1deg;
  --room-rotate: 0deg;
  --room-scale: 1;
  --room-opacity: 1;
  --room-layer: 50;
  --room-brightness: 1;
  --room-saturation: 1;
  position: absolute;
  z-index: var(--room-layer);
  top: 0.7rem;
  left: 50%;
  display: block;
  width: clamp(300px, 31vw, 350px);
  min-width: 300px;
  height: 214px;
  overflow: hidden;
  padding: 0.82rem;
  opacity: var(--room-opacity);
  text-align: left;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(22, 133, 154, 0.06), transparent 30%),
    linear-gradient(150deg, #fff 0%, #fafbfe 100%);
  box-shadow:
    0 18px 38px -18px rgba(16, 24, 40, 0.26),
    0 6px 14px rgba(16, 24, 40, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backface-visibility: hidden;
  filter: brightness(var(--room-brightness)) saturate(var(--room-saturation));
  transform:
    translate3d(calc(-50% + var(--room-x)), var(--room-y), var(--room-z))
    rotateX(var(--room-tilt))
    rotateY(var(--room-rotate))
    scale(var(--room-scale));
  transform-origin: center center;
  transform-style: preserve-3d;
  transition:
    opacity 0.26s ease,
    filter 0.42s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.35s ease,
    transform 0.56s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.market-room-tabs .server-room-option::before,
.market-room-tabs .server-room-option::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.market-room-tabs .server-room-option::before {
  z-index: 0;
  top: -45%;
  left: -18%;
  width: 58%;
  height: 150%;
  opacity: 0.42;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, 0.78) 48%, transparent 76%);
  transform: rotate(13deg);
}

.market-room-tabs .server-room-option::after {
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), transparent 34%),
    linear-gradient(315deg, rgba(22, 133, 154, 0.055), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.market-room-tabs .server-room-option > * {
  position: relative;
  z-index: 1;
}

.market-room-tabs .server-room-option[data-room-slot="left-near"] {
  --room-x: -84%;
  --room-y: 4px;
  --room-z: -150px;
  --room-tilt: 0deg;
  --room-rotate: 32deg;
  --room-scale: 0.84;
  --room-opacity: 0.82;
  --room-layer: 30;
  --room-brightness: 0.96;
  --room-saturation: 0.9;
}

.market-room-tabs .server-room-option[data-room-slot="right-near"] {
  --room-x: 84%;
  --room-y: 4px;
  --room-z: -150px;
  --room-tilt: 0deg;
  --room-rotate: -32deg;
  --room-scale: 0.84;
  --room-opacity: 0.82;
  --room-layer: 30;
  --room-brightness: 0.96;
  --room-saturation: 0.9;
}

.market-room-tabs .server-room-option[data-room-slot="left-far"] {
  --room-x: -150%;
  --room-y: 10px;
  --room-z: -310px;
  --room-tilt: 0deg;
  --room-rotate: 46deg;
  --room-scale: 0.68;
  --room-opacity: 0.34;
  --room-layer: 10;
  --room-brightness: 0.9;
  --room-saturation: 0.75;
}

.market-room-tabs .server-room-option[data-room-slot="right-far"] {
  --room-x: 150%;
  --room-y: 10px;
  --room-z: -310px;
  --room-tilt: 0deg;
  --room-rotate: -46deg;
  --room-scale: 0.68;
  --room-opacity: 0.34;
  --room-layer: 10;
  --room-brightness: 0.9;
  --room-saturation: 0.75;
}

.market-room-tabs .server-room-option[data-room-slot="left-hidden"],
.market-room-tabs .server-room-option[data-room-slot="right-hidden"] {
  --room-y: 14px;
  --room-z: -440px;
  --room-scale: 0.55;
  --room-opacity: 0;
  --room-layer: 0;
  --room-brightness: 0.84;
  --room-saturation: 0.62;
}

.market-room-tabs .server-room-option[data-room-slot="left-hidden"] {
  --room-x: -210%;
  --room-rotate: 56deg;
}

.market-room-tabs .server-room-option[data-room-slot="right-hidden"] {
  --room-x: 210%;
  --room-rotate: -56deg;
}

.market-room-tabs .server-room-option:hover {
  border-color: #bfdde1;
  background: #fdfdff;
  box-shadow:
    0 25px 48px -20px rgba(14, 88, 104, 0.3),
    0 8px 18px rgba(16, 24, 40, 0.1);
}

.market-room-tabs .server-room-option:focus-visible {
  outline: 3px solid rgba(22, 133, 154, 0.24);
  outline-offset: 3px;
}

.market-room-card-header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}

.market-room-card-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #5c6575;
  border: 1px solid #e3e6eb;
  border-radius: 11px;
  background: #f7f8fa;
}

.market-room-card-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.market-room-tabs .server-room-option.active {
  color: #16758a;
  border-color: transparent;
  background:
    radial-gradient(circle at 12% 0%, rgba(22, 133, 154, 0.13), transparent 34%) padding-box,
    linear-gradient(145deg, #fff 0%, #f8fbfb 70%, #f3fbf8 100%) padding-box,
    linear-gradient(135deg, #c9c5ff 0%, #16859a 54%, #8de4c1 100%) border-box;
  box-shadow:
    0 34px 62px -24px rgba(14, 88, 104, 0.42),
    0 12px 24px rgba(16, 24, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.market-room-tabs .server-room-option.active .market-room-card-icon {
  color: #16859a;
  border-color: #c8c4ff;
  background: #fff;
}

.market-room-card-identity {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.22rem;
  padding-right: 1.15rem;
}

.market-room-card-identity strong {
  overflow: hidden;
  color: #1d2939;
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-room-card-identity em {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.18rem;
  overflow: hidden;
  color: #667085;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-room-card-identity em svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.market-room-card-description {
  display: block;
  margin: 0.65rem 0 0.55rem;
  padding: 0.5rem 0.58rem;
  border: 1px solid #edf0f3;
  border-radius: 9px;
  background: #f7f8fa;
}

.market-room-card-description > b {
  display: block;
  margin-bottom: 0.16rem;
  color: #667085;
  font-size: 0.53rem;
  font-weight: 760;
}

.market-room-card-description > small {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  color: #475467;
  font-size: 0.59rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.market-room-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.5rem;
  color: #7d8797;
  border-top: 1px solid #eef0f3;
  font-size: 0.56rem;
}

.market-room-card-footer > span b {
  color: #16758a;
  font-size: 0.65rem;
}

.market-room-capacity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.market-room-capacity > span {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.market-room-capacity > span + span {
  padding-left: 0.55rem;
  border-left: 1px solid #e4e7ec;
}

.market-room-capacity .has-stock,
.market-room-capacity .has-stock b {
  color: #027a48;
}

.market-room-capacity .sold-out,
.market-room-capacity .sold-out b {
  color: #b42318;
}

.market-room-capacity i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.market-room-card-footer > em {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: #667085;
  font-style: normal;
  font-weight: 680;
}

.market-room-card-footer > em svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.market-room-tabs .server-room-option.active .market-room-card-description {
  border-color: #e2e0ff;
  background: #fff;
}

.market-room-tabs .server-room-option.active .market-room-card-footer > em {
  color: #16758a;
}

.market-room-tabs .room-selected-mark {
  position: absolute;
  z-index: 3;
  top: 0.62rem;
  right: 0.62rem;
  display: inline-flex;
  width: auto;
  height: 22px;
  align-items: center;
  gap: 0.16rem;
  padding: 0 0.42rem;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: #dedce7;
  opacity: 0;
  font-size: 0.51rem;
  font-style: normal;
  font-weight: 760;
  transform: translateY(-2px) scale(0.82);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.market-room-tabs .server-room-option.active .room-selected-mark {
  opacity: 1;
  display: inline-flex;
  background: #16859a;
  box-shadow: 0 5px 12px rgba(22, 133, 154, 0.25);
  transform: translateY(0) scale(1);
}

.market-room-tabs .room-selected-mark svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
  .market-room-tabs .server-room-option,
  .market-room-tabs .room-selected-mark {
    transition: none !important;
  }

  .market-room-tabs .server-room-option {
    will-change: auto;
  }
}

/* Promotion finance center: per-machine ledger, room ownership and withdrawals */
.promotion-balance-stat .promotion-stat-copy {
  position: relative;
  width: 100%;
}

.promotion-withdraw-trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 30px;
  padding: 0 0.75rem;
  border: 1px solid rgba(84, 100, 210, 0.16);
  border-radius: 999px;
  color: #fff;
  background: #2d8394;
  font-size: 0.72rem;
  font-weight: 750;
  backdrop-filter: blur(12px);
  transition: background 160ms ease, transform 160ms ease;
}

.promotion-withdraw-trigger:hover {
  background: #4659cb;
  transform: translateY(-1px);
}

.promotion-wallet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.promotion-wallet-card {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid #e6eaf0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(89, 112, 246, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(28, 39, 62, 0.055);
}

.promotion-wallet-card > header {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 46px;
}

.promotion-wallet-card > header > div {
  min-width: 0;
}

.promotion-wallet-card h2,
.promotion-room-heading h2 {
  margin: 0;
  color: #263248;
  font-size: 0.94rem;
  font-weight: 790;
}

.promotion-wallet-card header p,
.promotion-room-heading p {
  margin: 0.22rem 0 0;
  color: #8992a3;
  font-size: 0.68rem;
  line-height: 1.45;
}

.promotion-wallet-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #5368da;
  background: #eef1ff;
}

.promotion-wallet-icon.is-withdrawal {
  color: #15936f;
  background: #eaf9f4;
}

.promotion-wallet-icon.is-history {
  color: #a56d1f;
  background: #fff6e8;
}

.promotion-wallet-icon svg,
.promotion-room-heading svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promotion-payout-empty,
.promotion-withdrawal-empty {
  display: flex;
  min-height: 72px;
  margin: 1rem 0 0.85rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.8rem 0.9rem;
  border: 1px dashed #d9dee8;
  border-radius: 13px;
  color: #788297;
  background: #fafbfc;
}

.promotion-payout-empty strong {
  color: #465269;
  font-size: 0.78rem;
}

.promotion-payout-empty span,
.promotion-withdrawal-empty {
  font-size: 0.7rem;
}

.promotion-payout-empty span {
  margin-top: 0.24rem;
}

.promotion-payout-account {
  display: flex;
  min-height: 72px;
  margin: 1rem 0 0.85rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid #e6eaf0;
  border-radius: 13px;
  background: #fbfcfe;
}

.promotion-alipay-mark {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: #1677ff;
  font-size: 0.92rem;
  font-weight: 800;
}

.promotion-payout-account > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.promotion-payout-account strong {
  overflow: hidden;
  color: #303b50;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-payout-account small {
  margin-top: 0.2rem;
  color: #8a94a6;
  font-size: 0.67rem;
}

.promotion-payout-ready {
  flex: 0 0 auto;
  padding: 0.25rem 0.48rem;
  border-radius: 999px;
  color: #188060;
  background: #e8f7f1;
  font-size: 0.64rem;
  font-weight: 750;
}

.promotion-wallet-action {
  width: 100%;
  min-height: 36px;
  border: 1px solid #dfe4ec;
  border-radius: 10px;
  color: #515d72;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.promotion-wallet-action.is-primary {
  border-color: #596be0;
  color: #fff;
  background: linear-gradient(135deg, #6978e9, #5364d3);
  box-shadow: 0 7px 16px rgba(83, 100, 211, 0.18);
}

.promotion-wallet-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(28, 39, 62, 0.1);
}

.promotion-withdrawal-overview {
  display: grid;
  min-height: 72px;
  margin: 1rem 0 0.85rem;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.68rem 0.82rem;
  border: 1px solid #e6eaf0;
  border-radius: 13px;
  background: #fbfcfe;
}

.promotion-withdrawal-overview > i {
  width: 1px;
  height: 32px;
  background: #e8ebf0;
}

.promotion-withdrawal-overview > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.promotion-withdrawal-overview small {
  color: #8a94a6;
  font-size: 0.66rem;
}

.promotion-withdrawal-overview strong {
  margin-top: 0.22rem;
  color: #28354c;
  font-size: 1rem;
}

.promotion-withdrawal-list {
  display: grid;
  gap: 0.48rem;
  margin-top: 0.92rem;
}

.promotion-withdrawal-row {
  display: flex;
  width: 100%;
  min-height: 45px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.48rem 0.66rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  background: #f8f9fb;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.promotion-withdrawal-row:hover {
  border-color: var(--theme-border-strong, #c8cdd2);
  background: var(--theme-panel, #fff);
  transform: translateY(-1px);
}

.promotion-withdrawal-row:focus-visible {
  border-color: var(--theme-primary, #46505b);
  outline: 3px solid rgba(var(--theme-primary-rgb, 70, 80, 91), 0.12);
}

.promotion-withdrawal-row > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.promotion-withdrawal-row strong {
  color: #354157;
  font-size: 0.76rem;
}

.promotion-withdrawal-row small {
  margin-top: 0.14rem;
  color: #929bab;
  font-size: 0.62rem;
}

.promotion-withdrawal-row em {
  padding: 0.23rem 0.44rem;
  border-radius: 999px;
  color: #8b681f;
  background: #fff2d6;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.promotion-withdrawal-row em.is-approved {
  color: #4262b2;
  background: #edf1ff;
}

.promotion-withdrawal-row em.is-paid {
  color: #177758;
  background: #e6f7ef;
}

.promotion-withdrawal-row em.is-rejected {
  color: #b14f53;
  background: #ffebec;
}

.promotion-withdrawal-row .promotion-withdrawal-row-side {
  flex: 0 0 auto;
  align-items: flex-end;
}

.promotion-withdrawal-row-side small {
  color: var(--theme-primary, #46505b);
  font-weight: 720;
}

.promotion-room-panel {
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid #e5e9f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 39, 62, 0.045);
}

.promotion-room-heading {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid #edf0f4;
  background: linear-gradient(135deg, #fbfcff, #f7f9fd);
}

.promotion-room-heading > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.promotion-room-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
}

.promotion-room-card {
  display: grid;
  min-height: 65px;
  grid-template-columns: 10px minmax(180px, 1fr) minmax(100px, 0.45fr) minmax(100px, 0.45fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid #e9ecf1;
  border-radius: 13px;
  background: #fbfcfe;
}

.promotion-room-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6575e2;
  box-shadow: 0 0 0 5px rgba(101, 117, 226, 0.1);
}

.promotion-room-name,
.promotion-room-card > span:not(.promotion-room-dot) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.promotion-room-name strong {
  overflow: hidden;
  color: #303c52;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-room-name small,
.promotion-room-card > span small {
  color: #8d96a7;
  font-size: 0.65rem;
}

.promotion-room-card > span strong {
  margin-top: 0.18rem;
  color: #48546a;
  font-size: 0.8rem;
}

.promotion-room-card .promotion-room-rebate strong {
  color: #16805e;
}

.promotion-room-empty {
  padding: 1.5rem 1rem;
  color: #8c95a5;
  font-size: 0.74rem;
  text-align: center;
}

.promotion-ledger-machine,
.promotion-ledger-money {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.promotion-ledger-machine strong {
  overflow: hidden;
  color: #354156;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-ledger-machine small,
.promotion-ledger-money small {
  margin-top: 0.18rem;
  color: #9099a9;
  font-size: 0.62rem;
}

.promotion-ledger-plan {
  display: inline-block;
  overflow: hidden;
  max-width: 150px;
  color: #4e5a6f;
  font-size: 0.7rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-source-badge {
  display: inline-flex;
  margin-right: 0.24rem;
  padding: 0.08rem 0.32rem;
  border-radius: 5px;
  color: #5265d0;
  background: #eef1ff;
  font-size: 0.58rem;
}

.promotion-ledger-table tbody tr.is-refund-adjustment {
  background: #fbfdfd;
}

.promotion-ledger-table tbody tr.is-refund-adjustment:hover {
  background: #f7fbfb;
}

.promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-credit td:first-child {
  box-shadow: inset 3px 0 0 #43aa91;
}

.promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-deduction {
  background: #fffcf7;
}

.promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-deduction:hover {
  background: #fff9ef;
}

.promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-deduction td:first-child {
  box-shadow: inset 3px 0 0 #e3a24b;
}

.promotion-source-badge.is-refund-credit {
  color: #14745e;
  background: #eaf8f3;
}

.promotion-source-badge.is-refund-deduction {
  color: #a86412;
  background: #fff3df;
}

.promotion-ledger-adjustment-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.16rem;
  overflow: visible !important;
  color: #7b8698 !important;
  line-height: 1.45;
  text-overflow: clip !important;
  white-space: normal !important;
}

.promotion-ledger-adjustment-note {
  display: block;
  overflow: visible !important;
  margin-top: 0.12rem;
  color: #667085 !important;
  line-height: 1.48;
  text-overflow: clip !important;
  white-space: normal !important;
}

.promotion-ledger-result .is-refund-credit {
  color: #14745e;
}

.promotion-ledger-result .is-refund-deduction {
  color: #a86412;
}

.promotion-ledger-table tr.is-refund-adjustment .promotion-ledger-money {
  color: #526174;
}

body.promotion-modal-open {
  overflow: hidden;
}

.promotion-modal-shell {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.promotion-modal-shell[hidden] {
  display: none !important;
}

.promotion-modal-backdrop {
  position: absolute;
  border: 0;
  background: rgba(29, 37, 53, 0.42);
  backdrop-filter: blur(7px);
  inset: 0;
}

.promotion-modal-card {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  padding: 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 28px 80px rgba(21, 29, 47, 0.24);
}

.promotion-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
  color: #667085;
  background: #f8f9fb;
}

.promotion-modal-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.promotion-modal-symbol {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #fff;
  background: #1677ff;
  box-shadow: 0 9px 22px rgba(22, 119, 255, 0.22);
  font-size: 1.12rem;
  font-weight: 820;
}

.promotion-modal-symbol.is-wallet {
  color: #fff;
  background: linear-gradient(135deg, #6677e6, #4f60cf);
  box-shadow: 0 9px 22px rgba(79, 96, 207, 0.22);
}

.promotion-modal-symbol svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promotion-modal-card > h2 {
  margin: 0.9rem 0 0;
  color: #263248;
  font-size: 1.13rem;
  font-weight: 820;
}

.promotion-modal-card > p {
  margin: 0.42rem 0 1rem;
  color: #7c8699;
  font-size: 0.72rem;
  line-height: 1.65;
}

.promotion-withdrawal-detail-card {
  width: min(650px, 100%);
  max-height: min(800px, calc(100vh - 2rem));
  overflow: hidden;
  padding: 0;
  border-color: var(--theme-border, #e2e6ea);
  background: var(--theme-panel, #fff);
}

.promotion-withdrawal-detail-card .promotion-modal-close {
  z-index: 3;
}

.promotion-withdrawal-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 4rem 1rem 1.1rem;
  border-bottom: 1px solid var(--theme-border, #e2e6ea);
  background: color-mix(in srgb, var(--theme-soft, #edf0f2) 48%, white);
}

.promotion-withdrawal-detail-header .promotion-modal-symbol {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
}

.promotion-withdrawal-detail-header > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.promotion-withdrawal-detail-header small,
.promotion-withdrawal-detail-header h2 {
  margin: 0;
}

.promotion-withdrawal-detail-header small {
  color: var(--theme-muted, #757d85);
  font-size: 0.62rem;
}

.promotion-withdrawal-detail-header h2 {
  color: var(--theme-text, #29313a);
  font-size: 1rem;
  font-weight: 820;
}

.promotion-withdrawal-detail-header > em {
  margin-left: auto;
  padding: 0.3rem 0.58rem;
  border-radius: 999px;
  color: #8b681f;
  background: #fff2d6;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 760;
  white-space: nowrap;
}

.promotion-withdrawal-detail-header > em.is-approved {
  color: #4262b2;
  background: #edf1ff;
}

.promotion-withdrawal-detail-header > em.is-paid {
  color: #177758;
  background: #e6f7ef;
}

.promotion-withdrawal-detail-header > em.is-rejected {
  color: #b14f53;
  background: #ffebec;
}

.promotion-withdrawal-detail-content {
  max-height: calc(min(800px, 100vh - 2rem) - 75px);
  overflow: auto;
  padding: 1rem;
  background: var(--theme-canvas-alt, #fafafa);
}

.promotion-withdrawal-detail-loading,
.promotion-withdrawal-detail-error {
  display: grid;
  min-height: 330px;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  color: var(--theme-muted, #757d85);
  text-align: center;
}

.promotion-withdrawal-detail-loading i {
  width: 30px;
  height: 30px;
  border: 3px solid var(--theme-soft-strong, #dfe3e7);
  border-top-color: var(--theme-primary, #46505b);
  border-radius: 50%;
  animation: promotion-record-spin 0.8s linear infinite;
}

.promotion-withdrawal-detail-error strong {
  color: var(--theme-text, #29313a);
  font-size: 0.9rem;
}

.promotion-withdrawal-detail-error p {
  max-width: 360px;
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.6;
}

.promotion-withdrawal-detail-error button {
  padding: 0.48rem 0.8rem;
  border: 1px solid var(--theme-border-strong, #c8cdd2);
  border-radius: 9px;
  color: var(--theme-text, #29313a);
  background: var(--theme-panel, #fff);
  font-size: 0.7rem;
  font-weight: 750;
}

.promotion-withdrawal-detail-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 15px;
  background: var(--theme-panel, #fff);
}

.promotion-withdrawal-detail-summary > span {
  display: grid;
  flex: 0 0 auto;
  gap: 0.18rem;
}

.promotion-withdrawal-detail-summary small {
  color: var(--theme-muted, #757d85);
  font-size: 0.65rem;
}

.promotion-withdrawal-detail-summary strong {
  color: var(--theme-text, #29313a);
  font-size: 1.35rem;
  font-weight: 850;
}

.promotion-withdrawal-detail-summary p {
  margin: 0 0 0 auto;
  color: var(--theme-muted, #757d85);
  font-size: 0.69rem;
  line-height: 1.65;
  text-align: right;
}

.promotion-withdrawal-detail-section {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 15px;
  background: var(--theme-panel, #fff);
}

.promotion-withdrawal-detail-section h3 {
  margin: 0 0 0.7rem;
  color: var(--theme-text, #29313a);
  font-size: 0.76rem;
  font-weight: 820;
}

.promotion-withdrawal-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--theme-border, #e2e6ea);
}

.promotion-withdrawal-detail-grid > div {
  display: grid;
  min-width: 0;
  gap: 0.18rem;
  padding: 0.65rem 0.55rem 0.55rem 0;
  border-bottom: 1px solid var(--theme-border, #e2e6ea);
}

.promotion-withdrawal-detail-grid > div:nth-child(even) {
  padding-right: 0;
  padding-left: 0.7rem;
  border-left: 1px solid var(--theme-border, #e2e6ea);
}

.promotion-withdrawal-detail-grid small {
  color: var(--theme-muted, #757d85);
  font-size: 0.61rem;
}

.promotion-withdrawal-detail-grid strong {
  overflow-wrap: anywhere;
  color: var(--theme-text, #29313a);
  font-size: 0.71rem;
  font-weight: 720;
  line-height: 1.45;
}

.promotion-modal-card form {
  display: grid;
  gap: 0.78rem;
  margin-top: 1rem;
}

.promotion-modal-card form > label {
  display: grid;
  gap: 0.38rem;
}

.promotion-modal-card label > span {
  color: #4a566b;
  font-size: 0.72rem;
  font-weight: 730;
}

.promotion-modal-card label > small {
  color: #949dad;
  font-size: 0.64rem;
}

.promotion-modal-card input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.78rem;
  border: 1px solid #dfe4ec;
  border-radius: 11px;
  outline: none;
  color: #283449;
  background: #fbfcfe;
  font-size: 0.78rem;
}

.promotion-modal-card input:focus {
  border-color: #7684df;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(103, 119, 226, 0.1);
}

.promotion-record-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0 0 1rem;
}

.promotion-record-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  text-align: left;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 14px;
  color: var(--theme-text, #29313a);
  background: var(--theme-panel, #fff);
  box-shadow: 0 7px 20px var(--theme-shadow, rgba(40, 47, 54, 0.07));
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.promotion-record-entry:hover {
  border-color: var(--theme-border-strong, #c8cdd2);
  box-shadow: 0 12px 28px rgba(var(--theme-primary-rgb, 70, 80, 91), 0.12);
  transform: translateY(-1px);
}

.promotion-record-entry > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.promotion-record-entry strong {
  color: var(--theme-text, #29313a);
  font-size: 0.84rem;
  font-weight: 800;
}

.promotion-record-entry small {
  overflow: hidden;
  color: var(--theme-muted, #757d85);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-record-entry > i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  color: var(--theme-muted, #757d85);
  border-radius: 50%;
  background: var(--theme-soft, #edf0f2);
}

.promotion-record-entry > i svg,
.promotion-record-entry-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promotion-record-entry-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #3f5963;
  border: 1px solid #d9e8ea;
  border-radius: 12px;
  background: #eff7f8;
}

.promotion-record-entry-icon.is-customer {
  color: #526054;
  border-color: #dce7dc;
  background: #f2f7f1;
}

.promotion-record-modal-card {
  display: flex;
  width: min(940px, 100%);
  max-height: min(820px, calc(100vh - 2rem));
  min-height: min(620px, calc(100vh - 2rem));
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-color: var(--theme-border, #e2e6ea);
  border-radius: 20px;
  background: var(--theme-panel, #fff);
}

.promotion-record-modal-card .promotion-modal-close {
  z-index: 3;
  top: 1rem;
  right: 1rem;
}

.promotion-record-modal-header {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  padding: 1rem 4rem 1rem 1.15rem;
  border-bottom: 1px solid var(--theme-border, #e2e6ea);
  background: color-mix(in srgb, var(--theme-soft, #edf0f2) 42%, white);
}

.promotion-record-modal-header > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.promotion-record-modal-header h2,
.promotion-record-modal-header p {
  margin: 0;
}

.promotion-record-modal-header h2 {
  color: var(--theme-text, #29313a);
  font-size: 1rem;
  font-weight: 820;
}

.promotion-record-modal-header p {
  color: var(--theme-muted, #757d85);
  font-size: 0.66rem;
}

.promotion-record-modal-header > b {
  margin-left: auto;
  color: var(--theme-primary, #46505b);
  font-size: 0.69rem;
  font-weight: 760;
  white-space: nowrap;
}

.promotion-customer-filter {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 112px 112px auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1rem;
  border-bottom: 1px solid var(--theme-border, #e2e6ea);
  background: var(--theme-panel, #fff);
}

.promotion-customer-search {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.7rem;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 10px;
  background: var(--theme-canvas-alt, #fafafa);
}

.promotion-customer-search:focus-within {
  border-color: var(--theme-border-strong, #c8cdd2);
  background: var(--theme-panel, #fff);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 70, 80, 91), 0.08);
}

.promotion-customer-search svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--theme-muted, #757d85);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.promotion-record-modal-card .promotion-customer-search input {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.69rem;
}

.promotion-customer-filter select,
.promotion-customer-filter button {
  min-height: 38px;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 10px;
  color: var(--theme-text, #29313a);
  background: var(--theme-canvas-alt, #fafafa);
  font-size: 0.68rem;
  font-weight: 700;
}

.promotion-customer-filter select {
  padding: 0 0.6rem;
  outline: none;
}

.promotion-customer-filter button {
  padding: 0 0.82rem;
}

.promotion-customer-filter button.is-search {
  border-color: var(--theme-primary, #46505b);
  color: var(--theme-on-primary, #fff);
  background: var(--theme-primary, #46505b);
}

.promotion-customer-filter button.is-reset {
  color: var(--theme-muted, #757d85);
  background: var(--theme-panel, #fff);
}

.promotion-record-modal-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  background: var(--theme-canvas-alt, #fafafa);
  overscroll-behavior: contain;
}

.promotion-record-loading,
.promotion-record-empty {
  display: grid;
  min-height: 410px;
  place-content: center;
  justify-items: center;
  gap: 0.55rem;
  color: var(--theme-muted, #757d85);
  text-align: center;
}

.promotion-record-loading i {
  width: 30px;
  height: 30px;
  border: 3px solid var(--theme-soft-strong, #dfe3e7);
  border-top-color: var(--theme-primary, #46505b);
  border-radius: 50%;
  animation: promotion-record-spin 0.8s linear infinite;
}

@keyframes promotion-record-spin {
  to { transform: rotate(360deg); }
}

.promotion-record-empty > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--theme-primary, #46505b);
  border-radius: 13px;
  background: var(--theme-soft, #edf0f2);
  font-weight: 820;
}

.promotion-record-empty strong {
  color: var(--theme-text, #29313a);
  font-size: 0.86rem;
}

.promotion-record-empty p {
  max-width: 380px;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.65;
}

.promotion-record-empty button {
  padding: 0.48rem 0.8rem;
  border: 1px solid var(--theme-border-strong, #c8cdd2);
  border-radius: 9px;
  color: var(--theme-text, #29313a);
  background: var(--theme-panel, #fff);
  font-size: 0.7rem;
  font-weight: 750;
}

.promotion-record-list {
  display: grid;
  gap: 0.65rem;
}

.promotion-record-item {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 13px;
  background: var(--theme-panel, #fff);
  box-shadow: 0 4px 13px var(--theme-shadow, rgba(40, 47, 54, 0.06));
}

.promotion-record-item > header,
.promotion-record-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.promotion-record-item > header > span,
.promotion-record-primary > span {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.promotion-record-item > header strong,
.promotion-record-primary strong {
  overflow: hidden;
  color: var(--theme-text, #29313a);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-record-item > header small,
.promotion-record-primary small,
.promotion-customer-consumption-grid small {
  color: var(--theme-muted, #757d85);
  font-size: 0.6rem;
}

.promotion-record-item > header em {
  flex: 0 0 auto;
  padding: 0.24rem 0.48rem;
  border-radius: 999px;
  font-size: 0.61rem;
  font-style: normal;
  font-weight: 760;
}

.promotion-record-item em.is-paid,
.promotion-record-item em.is-positive {
  color: #16705a;
  background: #eaf6f1;
}

.promotion-record-item em.is-processing {
  color: #97601d;
  background: #fff5e6;
}

.promotion-record-item em.is-refunded,
.promotion-record-item em.is-negative {
  color: #6d7680;
  background: #edf0f2;
}

.promotion-record-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--theme-border, #e2e6ea);
}

.promotion-record-primary > span:last-child {
  text-align: right;
}

.promotion-record-primary strong.is-positive,
.promotion-customer-consumption-grid strong.is-positive {
  color: #16705a;
}

.promotion-record-primary strong.is-negative {
  color: #a25d1b;
}

.promotion-record-meta {
  display: flex;
  margin-top: 0.6rem;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.promotion-record-meta > span {
  padding: 0.24rem 0.42rem;
  color: var(--theme-muted, #757d85);
  border-radius: 7px;
  background: var(--theme-soft, #edf0f2);
  font-size: 0.59rem;
}

.promotion-record-note {
  margin: 0.55rem 0 0;
  padding: 0.48rem 0.56rem;
  color: var(--theme-muted, #757d85);
  border-left: 3px solid var(--theme-border-strong, #c8cdd2);
  border-radius: 0 7px 7px 0;
  background: var(--theme-canvas-alt, #fafafa);
  font-size: 0.62rem;
  line-height: 1.55;
}

.promotion-customer-consumption-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  margin-top: 0.62rem;
}

.promotion-customer-consumption-grid > span {
  display: grid;
  min-width: 0;
  gap: 0.14rem;
  padding: 0.48rem 0.55rem;
  border-radius: 9px;
  background: var(--theme-canvas-alt, #fafafa);
}

.promotion-customer-consumption-grid strong {
  overflow: hidden;
  color: var(--theme-text, #29313a);
  font-size: 0.67rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-record-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1rem;
  border-top: 1px solid var(--theme-border, #e2e6ea);
  background: var(--theme-panel, #fff);
}

.promotion-record-pagination[hidden] {
  display: none;
}

.promotion-record-pagination span {
  color: var(--theme-muted, #757d85);
  font-size: 0.65rem;
}

.promotion-record-pagination button {
  min-width: 58px;
  padding: 0.4rem 0.62rem;
  border: 1px solid var(--theme-border, #e2e6ea);
  border-radius: 8px;
  color: var(--theme-text, #29313a);
  background: var(--theme-canvas-alt, #fafafa);
  font-size: 0.65rem;
  font-weight: 730;
}

.promotion-record-pagination .promotion-page-numbers {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.promotion-record-pagination .promotion-page-number {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.promotion-record-pagination .promotion-page-number.is-current {
  border-color: var(--theme-primary, #46505b);
  color: var(--theme-on-primary, #fff);
  background: var(--theme-primary, #46505b);
}

.promotion-record-pagination .promotion-page-numbers i {
  color: var(--theme-muted, #757d85);
  font-size: 0.68rem;
  font-style: normal;
}

.promotion-record-pagination button:disabled {
  cursor: default;
  opacity: 0.42;
}

@media (max-width: 700px) {
  .promotion-record-entry-grid {
    grid-template-columns: 1fr;
  }

  .promotion-withdrawal-detail-card {
    width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .promotion-withdrawal-detail-content {
    max-height: calc(100dvh - 75px);
    padding: 0.7rem;
  }

  .promotion-withdrawal-detail-summary {
    display: grid;
    gap: 0.45rem;
  }

  .promotion-withdrawal-detail-summary p {
    margin: 0;
    text-align: left;
  }

  .promotion-withdrawal-detail-grid {
    grid-template-columns: 1fr;
  }

  .promotion-withdrawal-detail-grid > div:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .promotion-record-modal {
    padding: 0;
  }

  .promotion-record-modal-card {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .promotion-record-modal-header {
    padding-left: 0.8rem;
  }

  .promotion-record-modal-header p {
    display: none;
  }

  .promotion-record-modal-body {
    padding: 0.65rem;
  }

  .promotion-customer-filter {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.45fr);
    padding: 0.65rem;
  }

  .promotion-customer-search {
    grid-column: 1 / -1;
  }

  .promotion-customer-filter button {
    padding-inline: 0.55rem;
  }

  .promotion-record-pagination {
    gap: 0.32rem;
    padding: 0.58rem 0.5rem;
  }

  .promotion-record-pagination [data-record-first],
  .promotion-record-pagination [data-record-last],
  .promotion-record-pagination .promotion-page-summary {
    display: none;
  }

  .promotion-record-pagination button {
    min-width: 58px;
  }

  .promotion-record-pagination .promotion-page-number {
    min-width: 31px;
  }

  .promotion-customer-consumption-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.promotion-modal-balance {
  display: flex;
  margin-top: 0.85rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #f1f3ff, #f7f8ff);
}

.promotion-modal-balance small {
  color: #6f7990;
  font-size: 0.68rem;
}

.promotion-modal-balance strong {
  color: #4659cb;
  font-size: 1.24rem;
}

.promotion-modal-recipient {
  display: flex;
  margin-top: 0.72rem;
  align-items: center;
  gap: 0.62rem;
  padding: 0.68rem 0.8rem;
  border: 1px solid #e8ebf0;
  border-radius: 12px;
  background: #fbfcfd;
}

.promotion-modal-recipient > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.promotion-modal-recipient small {
  color: #8b95a7;
  font-size: 0.64rem;
}

.promotion-modal-recipient strong {
  margin-top: 0.14rem;
  color: #3b475d;
  font-size: 0.72rem;
}

.promotion-amount-input {
  position: relative;
  display: flex;
  align-items: center;
}

.promotion-amount-input > b {
  position: absolute;
  left: 0.78rem;
  z-index: 1;
  color: #47536a;
  font-size: 0.85rem;
}

.promotion-amount-input input {
  padding-right: 3.6rem;
  padding-left: 1.8rem;
  font-size: 1rem;
  font-weight: 760;
}

.promotion-amount-input button {
  position: absolute;
  right: 0.5rem;
  border: 0;
  color: #5669d7;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 750;
}

.promotion-fee-summary {
  display: grid;
  overflow: hidden;
  border: 1px solid #e7eaf0;
  border-radius: 12px;
  background: #fbfcfe;
}

.promotion-fee-summary > span {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.52rem 0.72rem;
}

.promotion-fee-summary > span + span {
  border-top: 1px solid #edf0f4;
}

.promotion-fee-summary small {
  color: #818b9d;
  font-size: 0.66rem;
}

.promotion-fee-summary strong {
  color: #4b576d;
  font-size: 0.73rem;
}

.promotion-fee-summary .is-actual {
  background: #f2f5ff;
}

.promotion-fee-summary .is-actual small {
  color: #5364cb;
  font-weight: 730;
}

.promotion-fee-summary .is-actual strong {
  color: #4357cc;
  font-size: 0.86rem;
}

.promotion-withdrawal-note {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  color: #7a6844;
  background: #fff8e9;
  font-size: 0.65rem;
  line-height: 1.55;
}

.promotion-form-message {
  padding: 0.58rem 0.68rem;
  border-radius: 9px;
  color: #ae4149;
  background: #fff0f1;
  font-size: 0.68rem;
  line-height: 1.45;
}

.promotion-modal-submit {
  min-height: 44px;
  margin-top: 0.1rem;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #6979e6, #5364d3);
  box-shadow: 0 9px 20px rgba(83, 100, 211, 0.2);
  font-size: 0.76rem;
  font-weight: 780;
}

.promotion-modal-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

@media (max-width: 991.98px) {
  .promotion-wallet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .promotion-withdrawal-history {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .promotion-wallet-grid {
    grid-template-columns: 1fr;
  }

  .promotion-withdrawal-history {
    grid-column: auto;
  }

  .promotion-room-heading {
    align-items: flex-start;
  }

  .promotion-room-card {
    grid-template-columns: 10px minmax(0, 1fr) minmax(88px, auto);
  }

  .promotion-room-card .promotion-room-rebate {
    grid-column: 2 / -1;
    padding-top: 0.55rem;
    border-top: 1px solid #eceff3;
  }

  .promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-credit {
    border-color: #cfe9e0;
    background: #fbfefd;
    box-shadow:
      inset 3px 0 0 #43aa91,
      0 4px 12px rgba(16, 24, 40, 0.04);
  }

  .promotion-ledger-table tbody tr.is-refund-adjustment.is-refund-deduction {
    border-color: #f0ddbe;
    background: #fffdf9;
    box-shadow:
      inset 3px 0 0 #e3a24b,
      0 4px 12px rgba(16, 24, 40, 0.04);
  }

  .promotion-ledger-table tbody tr.is-refund-adjustment td:first-child {
    box-shadow: none;
  }

  .promotion-ledger-adjustment-meta {
    justify-content: flex-end;
  }

  .promotion-ledger-adjustment-note {
    max-width: 230px;
    text-align: right;
  }
}

@media (max-width: 575.98px) {
  .promotion-withdraw-trigger {
    position: static;
    width: fit-content;
    margin-top: 0.48rem;
  }

  .promotion-wallet-card {
    padding: 1rem;
    border-radius: 15px;
  }

  .promotion-room-panel {
    border-radius: 15px;
  }

  .promotion-room-heading {
    padding: 0.85rem;
  }

  .promotion-room-heading .promotion-ledger-count {
    display: none;
  }

  .promotion-room-card {
    gap: 0.58rem;
    padding: 0.68rem;
  }

  .promotion-modal-card {
    padding: 1.2rem;
    border-radius: 18px;
  }
}

/* Purchase gate: phone -> real name -> order */
.purchase-phone-binding-modal {
  overflow: hidden;
}

.purchase-gate-progress {
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.9rem 1.35rem;
  color: #8a94a6;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at 12% 0, rgba(110, 98, 239, 0.1), transparent 38%),
    rgba(248, 250, 253, 0.78);
}

.purchase-gate-progress > span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
  white-space: nowrap;
}

.purchase-gate-progress > span > b {
  display: inline-grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  color: #8490a5;
  font-size: 0.72rem;
  line-height: 1;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
}

.purchase-gate-progress > span > em {
  overflow: hidden;
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
}

.purchase-gate-progress > i {
  display: block;
  height: 1px;
  min-width: 12px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.36), rgba(148, 163, 184, 0.16));
}

.purchase-gate-progress > span.is-active {
  color: #5148ce;
}

.purchase-gate-progress > span.is-active > b {
  color: #fff;
  border-color: #7067e7;
  background: linear-gradient(145deg, #837af0, #6258db);
  box-shadow: 0 5px 12px rgba(98, 88, 219, 0.24);
}

.purchase-gate-progress > span.is-complete {
  color: #13805b;
}

.purchase-gate-progress > span.is-complete > b {
  color: #fff;
  border-color: #20a978;
  background: linear-gradient(145deg, #38c893, #14996b);
  box-shadow: 0 5px 12px rgba(20, 153, 107, 0.2);
}

.purchase-gate-progress-compact {
  margin: 1rem 0 1.1rem;
  padding: 0.72rem 0.78rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
}

.purchase-gate-progress-compact > span {
  gap: 0.25rem;
}

.purchase-gate-progress-compact > span > b {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  font-size: 0.66rem;
}

.purchase-gate-progress-compact > span > em {
  font-size: 0.64rem;
}

@media (max-width: 420px) {
  .purchase-gate-progress {
    gap: 0.28rem;
    padding-inline: 0.85rem;
  }

  .purchase-gate-progress > span {
    gap: 0.22rem;
  }

  .purchase-gate-progress > span > em {
    font-size: 0.64rem;
  }
}

/* ==================== Online support ==================== */
.support-page {
  --support-ink: #1b2433;
  --support-muted: #68758a;
  --support-line: rgba(177, 191, 214, 0.42);
  --support-blue: #5669d8;
  --support-blue-dark: #4052bd;
  position: relative;
  display: grid;
  gap: 1rem;
  min-height: calc(100vh - 7.2rem);
  color: var(--support-ink);
}

.support-page::before,
.support-page::after {
  position: fixed;
  z-index: -1;
  width: 25rem;
  height: 25rem;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.2;
}

.support-page::before {
  top: 3rem;
  right: 4%;
  background: #97adff;
}

.support-page::after {
  bottom: -9rem;
  left: 20%;
  background: #a9ead8;
}

.support-page-heading {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 88px;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 255, 0.72));
  box-shadow:
    inset 0 1px 0 #fff,
    0 12px 34px rgba(49, 65, 103, 0.08);
}

.support-heading-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: linear-gradient(145deg, #7586e8, #5063d0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 24px rgba(76, 93, 193, 0.25);
}

.support-heading-icon svg {
  width: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.support-heading-kicker,
.support-empty-kicker {
  display: block;
  margin-bottom: 0.1rem;
  color: #6474cc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.support-page-heading h1 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.support-page-heading p {
  margin: 0.18rem 0 0;
  color: var(--support-muted);
  font-size: 0.82rem;
}

.support-customer-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  padding: 0.55rem 0.75rem 0.55rem 0.55rem;
  border: 1px solid rgba(177, 191, 214, 0.36);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 #fff;
}

.support-customer-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #4657b8;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef0ff, #dfe4ff);
  font-weight: 800;
}

.support-customer-chip > span:last-child {
  display: grid;
  gap: 0.08rem;
}

.support-customer-chip small {
  overflow: hidden;
  max-width: 13rem;
  color: #354055;
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-customer-chip strong {
  color: #788398;
  font-size: 0.66rem;
  font-weight: 650;
}

.service-center-tabs {
  display: grid;
  width: min(100%, 620px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
  padding: 0.34rem;
  border: 1px solid rgba(177, 191, 214, 0.38);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 7px 20px rgba(49, 65, 103, 0.055);
  backdrop-filter: blur(18px);
}

.service-center-tabs > a {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.62rem;
  min-height: 52px;
  padding: 0.48rem 0.65rem;
  color: #68758a;
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  transition: 160ms ease;
}

.service-center-tabs > a:hover {
  color: #334155;
  background: rgba(246, 248, 252, 0.9);
}

.service-center-tabs > a.active {
  color: #3247ad;
  border-color: rgba(86, 105, 216, 0.2);
  background: linear-gradient(145deg, #f1f3ff, #f8f9ff);
  box-shadow: 0 5px 14px rgba(65, 82, 176, 0.09);
}

.service-center-tab-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(108, 123, 153, 0.1);
}

.service-center-tabs > a.active .service-center-tab-icon {
  color: #4e61ca;
  background: #e3e7ff;
}

.service-center-tab-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.service-center-tabs > a > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.06rem;
}

.service-center-tabs strong {
  font-size: 0.78rem;
  font-weight: 800;
}

.service-center-tabs small {
  overflow: hidden;
  color: #8a95a6;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-center-tabs > a > b {
  min-width: 20px;
  padding: 0.12rem 0.35rem;
  color: #fff;
  border-radius: 999px;
  background: #e05261;
  font-size: 0.58rem;
  text-align: center;
}

.support-workspace {
  display: grid;
  min-height: 600px;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(250, 252, 255, 0.74);
  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 42px rgba(45, 60, 91, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.support-inbox {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--support-line);
  background: rgba(247, 249, 254, 0.78);
}

.support-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  min-height: 78px;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--support-line);
}

.support-inbox-head > div {
  display: grid;
  gap: 0.08rem;
}

.support-inbox-head > div > span {
  font-size: 1rem;
  font-weight: 800;
}

.support-inbox-head small {
  color: #8993a5;
  font-size: 0.7rem;
}

.support-new-button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  padding: 0 0.68rem;
  color: #4b5dc3;
  border: 1px solid rgba(112, 129, 216, 0.24);
  border-radius: 11px;
  background: rgba(237, 240, 255, 0.88);
  font-size: 0.75rem;
  font-weight: 750;
  transition: 160ms ease;
}

.support-new-button svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.support-new-button:hover {
  color: #fff;
  border-color: transparent;
  background: #5d6fd4;
  transform: translateY(-1px);
}

.support-complaint-entry {
  display: grid;
  width: calc(100% - 1.3rem);
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  margin: 0.65rem 0.65rem 0;
  padding: 0.62rem 0.68rem;
  color: #4e4740;
  border: 1px solid rgba(219, 170, 116, 0.38);
  border-radius: 13px;
  background: linear-gradient(135deg, #fffaf2, #fff5e8);
  text-align: left;
  box-shadow: 0 5px 14px rgba(135, 91, 41, 0.06);
  transition: 160ms ease;
}

.support-complaint-entry:hover {
  border-color: rgba(205, 143, 76, 0.58);
  background: #fffaf2;
  box-shadow: 0 8px 18px rgba(135, 91, 41, 0.1);
  transform: translateY(-1px);
}

.support-complaint-entry-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #a66d32;
  border-radius: 11px;
  background: #ffebcf;
}

.support-complaint-entry-icon svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.support-complaint-entry > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.support-complaint-entry strong {
  font-size: 0.74rem;
}

.support-complaint-entry small {
  overflow: hidden;
  color: #98816a;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-complaint-entry em {
  padding: 0.17rem 0.34rem;
  color: #9b642b;
  border-radius: 6px;
  background: rgba(255, 229, 195, 0.78);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 760;
}

.support-conversation-search {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-height: 38px;
  margin: 0.58rem 0.65rem 0;
  padding: 0 0.68rem;
  color: #8793a6;
  border: 1px solid rgba(176, 189, 211, 0.4);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
  transition: 150ms ease;
}

.support-conversation-search:focus-within {
  color: #397c70;
  border-color: rgba(58, 145, 129, 0.46);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(58, 145, 129, 0.08);
}

.support-conversation-search svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.support-conversation-search input {
  min-width: 0;
  flex: 1;
  padding: 0;
  color: #374256;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.7rem;
}

.support-conversation-search input::placeholder {
  color: #9aa4b4;
}

.support-conversation-list {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  overflow: auto;
  padding: 0.65rem;
}

.support-conversation {
  display: grid;
  width: 100%;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem;
  text-align: left;
  color: inherit;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  transition: 150ms ease;
}

.support-conversation:hover {
  border-color: rgba(176, 189, 215, 0.35);
  background: rgba(255, 255, 255, 0.72);
}

.support-conversation.active {
  border-color: rgba(111, 127, 214, 0.32);
  background:
    linear-gradient(125deg, rgba(236, 239, 255, 0.98), rgba(246, 248, 255, 0.88));
  box-shadow:
    inset 3px 0 0 #6677d7,
    0 5px 16px rgba(70, 87, 171, 0.08);
}

.support-conversation-avatar,
.support-room-avatar {
  display: grid;
  place-items: center;
  color: #5363be;
  border: 1px solid rgba(127, 143, 221, 0.18);
  background: linear-gradient(145deg, #f2f3ff, #e2e6ff);
  font-weight: 800;
}

.support-conversation-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.support-conversation-body,
.support-conversation-top,
.support-conversation-preview {
  display: flex;
  min-width: 0;
}

.support-conversation-body {
  flex-direction: column;
  gap: 0.15rem;
}

.support-conversation-top,
.support-conversation-preview {
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.support-conversation-top strong {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-conversation-top time {
  flex: 0 0 auto;
  color: #9aa3b2;
  font-size: 0.63rem;
}

.support-conversation-context {
  align-self: start;
  padding: 0.08rem 0.35rem;
  color: #768196;
  border-radius: 6px;
  background: rgba(232, 236, 244, 0.74);
  font-size: 0.61rem;
  font-weight: 650;
}

.support-conversation-context.machine {
  color: #5263bd;
  background: rgba(228, 232, 255, 0.9);
}

.support-conversation-context.complaint {
  color: #97612a;
  background: #fff0d9;
}

.support-conversation-preview small {
  overflow: hidden;
  color: #808b9e;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-unread-badge {
  display: grid;
  min-width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0 0.25rem;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  background: #e35d66;
  font-size: 0.58rem;
  box-shadow: 0 3px 8px rgba(227, 93, 102, 0.25);
}

.support-list-loading,
.support-room-loading,
.support-message-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #8b96a9;
  font-size: 0.76rem;
}

.support-list-loading {
  min-height: 180px;
}

.support-list-loading i,
.support-room-loading i,
.support-message-loading i {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(104, 120, 200, 0.2);
  border-top-color: #6878ce;
  border-radius: 50%;
  animation: support-spin 700ms linear infinite;
}

@keyframes support-spin {
  to { transform: rotate(360deg); }
}

.support-inbox-empty,
.support-no-messages {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 2.5rem 0.8rem;
  text-align: center;
}

.support-inbox-empty > span,
.support-no-messages > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 0.25rem;
  place-items: center;
  color: #6778cf;
  border-radius: 14px;
  background: #edf0ff;
  font-weight: 800;
}

.support-inbox-empty strong,
.support-no-messages strong {
  font-size: 0.78rem;
}

.support-inbox-empty small,
.support-no-messages small {
  color: #929cac;
  font-size: 0.68rem;
}

.support-chat-panel {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(141, 156, 239, 0.12), transparent 35%),
    radial-gradient(circle at 0 100%, rgba(126, 219, 190, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.45);
}

.support-chat-empty {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.2rem;
  text-align: center;
}

.support-room-mobile-back {
  display: none;
}

.support-empty-visual {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  margin-bottom: 1.1rem;
  place-items: center;
  border: 1px solid rgba(132, 148, 226, 0.25);
  border-radius: 27px;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(229,234,255,.85));
  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 34px rgba(75, 91, 179, 0.16);
  transform: rotate(-3deg);
}

.support-empty-visual > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #5c6ece;
  border-radius: 17px;
  background: rgba(255,255,255,.72);
}

.support-empty-visual svg {
  width: 29px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.support-empty-visual i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #4dc996;
  box-shadow: 0 2px 8px rgba(44, 177, 126, .32);
}

.support-empty-visual i:nth-of-type(1) {
  top: 11px;
  right: 10px;
}

.support-empty-visual i:nth-of-type(2) {
  bottom: 12px;
  left: 10px;
  width: 7px;
  height: 7px;
  background: #8191e8;
}

.support-chat-empty h2 {
  margin: 0;
  font-size: 1.14rem;
  font-weight: 800;
}

.support-chat-empty > p {
  max-width: 31rem;
  margin: 0.4rem 0 1.35rem;
  color: var(--support-muted);
  font-size: 0.78rem;
}

.support-room-grid {
  display: grid;
  width: min(100%, 680px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.support-room-loading,
.support-room-none,
.support-room-retry {
  min-height: 76px;
  grid-column: 1 / -1;
}

.support-room-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 0.65rem;
  min-height: 76px;
  padding: 0.65rem 0.75rem;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(182, 194, 216, 0.46);
  border-radius: 16px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(53,70,105,.05);
  transition: 170ms ease;
}

.support-room-card:hover {
  border-color: rgba(111, 128, 214, 0.55);
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 #fff, 0 11px 24px rgba(75,91,179,.13);
  transform: translateY(-2px);
}

.support-room-card.has-conversation {
  border-color: rgba(80, 158, 126, 0.42);
  background: rgba(247, 253, 250, 0.9);
}

.support-room-card.has-conversation .support-room-card-icon {
  color: #397a64;
  background: linear-gradient(145deg, #eef9f4, #dcefe7);
}

.support-room-card.has-conversation .support-room-card-copy small {
  color: #34715d;
  background: #e3f2ec;
}

.support-room-card.has-conversation .support-room-card-arrow {
  color: #4b8a75;
}

.support-room-card.support-room-complaint {
  grid-column: 1 / -1;
  border-color: rgba(219, 170, 116, 0.46);
  background: linear-gradient(135deg, rgba(255, 251, 244, 0.96), rgba(255, 245, 230, 0.9));
}

.support-room-card.support-room-complaint .support-room-card-icon {
  color: #a66d32;
  background: linear-gradient(145deg, #fff3df, #ffe5c3);
}

.support-room-card.support-room-complaint .support-room-card-copy small {
  color: #99632e;
  background: #ffead0;
}

.support-room-card.support-room-complaint .support-room-card-arrow {
  color: #b37a3f;
}

.support-page.support-is-opening .support-room-card {
  pointer-events: none;
  opacity: .62;
}

.support-room-card-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #5364c0;
  border-radius: 13px;
  background: linear-gradient(145deg, #eef0ff, #dfe4ff);
  font-weight: 800;
}

.support-room-card-copy,
.support-room-card-copy > span {
  display: flex;
  min-width: 0;
}

.support-room-card-copy {
  flex-direction: column;
  gap: 0.17rem;
}

.support-room-card-copy > span {
  align-items: center;
  gap: 0.4rem;
}

.support-room-card-copy strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-room-card-copy small {
  flex: 0 0 auto;
  padding: 0.08rem 0.3rem;
  color: #708096;
  border-radius: 5px;
  background: #edf0f5;
  font-size: 0.58rem;
}

.support-room-card-copy em {
  overflow: hidden;
  color: #8792a4;
  font-size: 0.66rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-room-card-arrow {
  color: #8995aa;
  font-size: 1.05rem;
  transition: transform 170ms ease;
}

.support-room-card:hover .support-room-card-arrow {
  color: #5c6dca;
  transform: translateX(2px);
}

.support-room-retry,
.support-list-retry,
.support-message-retry {
  color: #596ac7;
  border: 1px dashed rgba(100, 118, 206, .4);
  border-radius: 14px;
  background: rgba(240,243,255,.7);
  font-size: .75rem;
}

.support-chat-active {
  position: relative;
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: 78px minmax(0, 1fr) auto;
}

.support-chat-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--support-line);
  background: rgba(255,255,255,.62);
}

.support-room-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 14px;
}

.support-chat-title {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.support-chat-title > span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.support-chat-title strong {
  font-size: 0.92rem;
}

.support-chat-title i {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #7c879a;
  font-size: 0.63rem;
  font-style: normal;
}

.support-chat-title i b {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35bc83;
  box-shadow: 0 0 0 3px rgba(53,188,131,.12);
}

.support-chat-title i.is-replied {
  color: #087a55;
  font-weight: 720;
}

.support-chat-title i.is-replied b {
  background: #17b879;
}

.support-chat-title i.is-waiting {
  color: #8a641f;
}

.support-chat-title i.is-waiting b {
  background: #e9a735;
  box-shadow: 0 0 0 3px rgba(233, 167, 53, .12);
}

.support-chat-title i.is-closed {
  color: #8b95a5;
}

.support-chat-title i.is-closed b {
  background: #9ca5b4;
  box-shadow: none;
}

.support-chat-title small {
  overflow: hidden;
  color: #6d7c93;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-copy-machine {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0 0.62rem;
  color: #39786d;
  border: 1px solid rgba(77, 158, 143, 0.28);
  border-radius: 10px;
  background: rgba(238, 249, 246, 0.86);
  font-size: 0.65rem;
  font-weight: 720;
  white-space: nowrap;
}

.support-copy-machine[hidden] {
  display: none;
}

.support-copy-machine svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.support-copy-machine:hover {
  color: #24675c;
  border-color: rgba(56, 143, 127, 0.45);
  background: #e7f7f2;
}

.support-refresh-button,
.support-mobile-back {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #647187;
  border: 1px solid rgba(175,188,211,.42);
  border-radius: 11px;
  background: rgba(255,255,255,.74);
}

.support-refresh-button {
  margin-left: auto;
}

.support-copy-machine + .support-refresh-button {
  margin-left: 0;
}

.support-copy-machine[hidden] + .support-refresh-button {
  margin-left: auto;
}

.support-mobile-back {
  display: none;
}

.support-refresh-button svg,
.support-mobile-back svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.support-refresh-button:hover {
  color: #5263be;
  border-color: rgba(104,121,205,.42);
  background: #f0f2ff;
}

.support-message-list {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  padding: 1.2rem 1.35rem;
  scroll-behavior: smooth;
}

.support-new-message-button {
  position: absolute;
  z-index: 4;
  right: 1.25rem;
  bottom: 7.15rem;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 0.34rem;
  padding: 0 0.72rem;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: #287e70;
  box-shadow: 0 8px 22px rgba(31, 107, 94, 0.25);
  font-size: 0.68rem;
  font-weight: 760;
  animation: support-toast-in 160ms ease-out;
}

.support-new-message-button[hidden] {
  display: none;
}

.support-new-message-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.support-message-loading {
  min-height: 100%;
}

.support-message-row {
  display: flex;
  max-width: min(78%, 620px);
  align-items: flex-start;
  gap: 0.55rem;
}

.support-message-row.own {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.support-message-avatar {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: #5363be;
  border-radius: 10px;
  background: #e8ebff;
  font-size: 0.68rem;
  font-weight: 800;
}

.support-message-row.own .support-message-avatar {
  color: #fff;
  background: #6273d4;
}

.support-message-content {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.support-message-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.support-message-row.own .support-message-meta {
  justify-content: flex-end;
}

.support-message-meta strong {
  color: #6e7a8d;
  font-size: 0.64rem;
}

.support-message-meta time {
  color: #9aa3b2;
  font-size: 0.58rem;
}

.support-message-bubble {
  display: grid;
  min-width: 0;
  gap: 0.48rem;
  margin: 0;
  padding: 0.65rem 0.78rem;
  color: #2c374a;
  border: 1px solid rgba(177,190,212,.42);
  border-radius: 5px 15px 15px 15px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 5px 14px rgba(44,61,94,.06);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.support-message-bubble.has-image {
  width: min(320px, 58vw);
  padding: 0.3rem;
  overflow: hidden;
}

.support-message-image-link {
  display: grid;
  min-height: 92px;
  overflow: hidden;
  place-items: center;
  color: inherit;
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(244, 247, 253, 0.92), rgba(229, 234, 246, 0.86));
  text-decoration: none;
}

.support-message-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.support-message-image-error {
  display: grid;
  min-height: 92px;
  place-items: center;
  color: #8a95a7;
  font-size: 0.7rem;
}

.support-message-image-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0 0.35rem 0.05rem;
  color: #7b879a;
  font-size: 0.61rem;
  line-height: 1.2;
  white-space: normal;
}

.support-message-image-meta small {
  color: inherit;
  font-size: inherit;
}

.support-message-text {
  margin: 0;
  padding: 0.12rem 0.35rem 0.3rem;
  white-space: pre-wrap;
}

.support-message-row.own .support-message-bubble {
  color: #fff;
  border-color: transparent;
  border-radius: 15px 5px 15px 15px;
  background: linear-gradient(145deg, #7182de, #5668ce);
  box-shadow: 0 7px 17px rgba(70,87,183,.2);
}

.support-message-row.own .support-message-image-meta {
  color: rgba(255, 255, 255, 0.8);
}

.support-message-row.own .support-message-image-link {
  background: rgba(255, 255, 255, 0.14);
}

.support-composer {
  padding: 0.8rem 1rem 0.75rem;
  border-top: 1px solid var(--support-line);
  background: rgba(250,251,254,.8);
}

.support-composer > label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
}

.support-quick-topics {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  overflow-x: auto;
  margin: -0.05rem 0 0.55rem;
  padding: 0.05rem 0 0.12rem;
  scrollbar-width: none;
}

.support-quick-topics::-webkit-scrollbar {
  display: none;
}

.support-quick-topics > span {
  flex: 0 0 auto;
  color: #8a95a6;
  font-size: 0.62rem;
  font-weight: 650;
}

.support-quick-topics > button {
  min-height: 26px;
  flex: 0 0 auto;
  padding: 0 0.55rem;
  color: #526274;
  border: 1px solid rgba(163, 178, 201, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.61rem;
  font-weight: 680;
  transition: 140ms ease;
}

.support-quick-topics > button:hover {
  color: #247365;
  border-color: rgba(63, 151, 135, 0.4);
  background: #eef9f6;
}

.support-image-preview {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
  padding: 0.48rem 0.55rem;
  border: 1px solid rgba(130, 148, 221, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(125deg, rgba(244, 246, 255, 0.98), rgba(255, 255, 255, 0.92));
  box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(51, 68, 115, 0.07);
}

.support-image-preview[hidden] {
  display: none;
}

.support-image-preview-thumb {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(156, 170, 200, 0.4);
  border-radius: 11px;
  background: #eef1f7;
}

.support-image-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-image-preview-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.12rem;
}

.support-image-preview-copy strong,
.support-image-preview-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-image-preview-copy strong {
  color: #354158;
  font-size: 0.72rem;
}

.support-image-preview-copy small {
  color: #8792a5;
  font-size: 0.62rem;
}

.support-image-remove,
.support-image-choose {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  transition: 150ms ease;
}

.support-image-remove {
  color: #8792a4;
  border: 0;
  background: transparent;
}

.support-image-remove:hover {
  color: #cc5962;
  background: rgba(218, 83, 94, 0.09);
}

.support-image-choose {
  color: #6070c9;
  border: 1px solid rgba(113, 130, 210, 0.25);
  background: rgba(236, 239, 255, 0.82);
}

.support-image-choose:hover {
  color: #fff;
  border-color: transparent;
  background: #378b9a;
}

.support-image-remove:disabled,
.support-image-choose:disabled {
  cursor: default;
  opacity: 0.5;
}

.support-image-remove svg {
  width: 17px;
}

.support-image-choose svg {
  width: 19px;
}

.support-composer-box {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.45rem 0.48rem 0.45rem 0.75rem;
  border: 1px solid rgba(166,181,208,.55);
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 5px 16px rgba(43,60,93,.06);
  transition: 150ms ease;
}

.support-composer-box:focus-within {
  border-color: rgba(94,113,207,.65);
  box-shadow: 0 0 0 3px rgba(93,112,205,.1), 0 7px 18px rgba(43,60,93,.07);
}

.support-composer textarea {
  min-height: 38px;
  max-height: 132px;
  flex: 1;
  resize: none;
  color: #273247;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.78rem;
  line-height: 1.45;
}

.support-composer textarea::placeholder {
  color: #a0a9b7;
}

.support-composer button[type="submit"] {
  display: inline-flex;
  min-width: 82px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #fff;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(145deg, #7182df, #5365c9);
  font-size: 0.75rem;
  font-weight: 750;
  box-shadow: 0 6px 14px rgba(75,92,193,.22);
}

.support-composer button[type="submit"]:hover {
  background: linear-gradient(145deg, #6678d7, #485bbb);
}

.support-composer button[type="submit"]:disabled {
  opacity: .55;
}

.support-composer button svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.support-composer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0.15rem 0;
  color: #929cac;
  font-size: 0.61rem;
}

.support-composer-meta b {
  color: inherit;
  font-weight: 650;
}

.support-toast {
  position: absolute;
  z-index: 10;
  right: 1rem;
  bottom: 6.4rem;
  max-width: min(340px, calc(100% - 2rem));
  padding: 0.65rem 0.85rem;
  color: #fff;
  border-radius: 11px;
  background: rgba(43, 55, 78, .94);
  box-shadow: 0 10px 28px rgba(30,40,60,.22);
  font-size: 0.72rem;
  animation: support-toast-in 160ms ease-out;
}

.support-toast[data-tone="error"] {
  background: rgba(180, 63, 63, .95);
}

.support-toast[data-tone="warning"] {
  background: rgba(174, 112, 36, .95);
}

@keyframes support-toast-in {
  from { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 991.98px) {
  .support-page {
    min-height: calc(100vh - 6rem);
  }

  .support-page-heading p {
    display: none;
  }

  .support-workspace {
    min-height: 620px;
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .support-room-grid {
    grid-template-columns: 1fr;
  }

  .support-message-row {
    max-width: 88%;
  }
}

@media (max-width: 767.98px) {
  .service-center-tabs {
    width: 100%;
  }

  .service-center-tabs > a {
    grid-template-columns: auto 1fr;
    gap: 0.45rem;
    padding-inline: 0.48rem;
  }

  .service-center-tabs > a > b {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
  }

  .service-center-tabs small {
    display: none;
  }

  .support-page-heading {
    min-height: 72px;
    padding: .75rem;
    border-radius: 18px;
  }

  .support-heading-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .support-heading-kicker,
  .support-customer-chip {
    display: none;
  }

  .support-page-heading h1 {
    font-size: 1.05rem;
  }

  .support-page-heading p {
    display: block;
    font-size: .7rem;
  }

  .support-workspace {
    position: relative;
    display: block;
    min-height: calc(100vh - 10.5rem);
    border-radius: 20px;
  }

  .support-inbox,
  .support-chat-panel {
    position: absolute;
    inset: 0;
  }

  .support-inbox {
    border-right: 0;
  }

  .support-chat-panel {
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    transform: translateX(20px);
    transition: 180ms ease;
  }

  .support-page.support-mobile-chat-open .support-chat-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .support-chat-empty {
    background: rgba(250,252,255,.96);
  }

  .support-mobile-back {
    display: grid;
  }

  .support-room-mobile-back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: .28rem;
    margin-bottom: 1.2rem;
    padding: .45rem .65rem;
    color: #5b6980;
    border: 1px solid rgba(172,185,207,.45);
    border-radius: 10px;
    background: rgba(255,255,255,.75);
    font-size: .7rem;
    font-weight: 700;
  }

  .support-room-mobile-back svg {
    width: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
  }

  .support-message-list {
    padding: 1rem .8rem;
  }

  .support-copy-machine {
    width: 36px;
    min-width: 36px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }

  .support-copy-machine svg {
    width: 17px;
    height: 17px;
  }

  .support-new-message-button {
    right: .8rem;
    bottom: 7.7rem;
  }

  .support-message-row {
    max-width: 92%;
  }

  .support-message-bubble.has-image {
    width: min(280px, 72vw);
  }

  .support-composer {
    padding: .65rem;
  }

  .support-composer button[type="submit"] {
    min-width: 46px;
  }

  .support-composer button[type="submit"] span {
    display: none;
  }

  .support-image-preview-copy small {
    max-width: 48vw;
  }
}

@media (max-width: 479.98px) {
  .support-page-heading p {
    overflow: hidden;
    max-width: calc(100vw - 7rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .support-chat-empty {
    justify-content: flex-start;
    overflow: auto;
    padding: 2rem .8rem 1rem;
  }

  .support-room-grid {
    gap: .5rem;
  }

  .support-room-card {
    min-height: 68px;
  }

  .support-chat-head {
    padding: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-page *,
  .support-page *::before,
  .support-page *::after {
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Machine card support action */
.machine-card-actions-wrap .machine-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-card-actions-wrap .machine-support-button {
  display: inline-flex;
  width: 100%;
  height: 36px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0 0.45rem;
  color: #19735d;
  border: 1px solid rgba(76, 176, 144, 0.35);
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(244, 255, 251, 0.9), rgba(224, 247, 239, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 3px 8px rgba(43, 116, 91, 0.06);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  transition: 170ms ease;
}

.machine-card-actions-wrap .machine-support-button svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (hover: hover) {
  .machine-card-actions-wrap .machine-support-button:hover {
    color: #0f654f;
    border-color: rgba(55, 157, 125, 0.5);
    background: rgba(237, 253, 247, 0.96);
    box-shadow:
      inset 0 1px 0 #fff,
      0 6px 14px rgba(43, 129, 101, 0.12);
    transform: translateY(-1px);
  }
}

@media (max-width: 575.98px) {
  .machine-card-actions-wrap .machine-support-button {
    min-height: 42px;
    font-size: 0.73rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .machine-card-actions-wrap .machine-support-button {
    transition: none !important;
  }

  .machine-card-actions-wrap .machine-support-button:hover {
    transform: none !important;
  }
}

.market-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.72rem;
  padding: 0 0.2rem;
}

.market-catalog-heading h2 {
  margin: 0;
  color: #1d2939;
  font-size: 0.94rem;
  font-weight: 790;
}

.market-catalog-heading h2 span {
  color: #16758a;
}

.market-catalog-heading p {
  margin: 0.12rem 0 0;
  color: #98a2b3;
  font-size: 0.61rem;
}

.market-plan-count {
  padding: 0.33rem 0.62rem;
  color: #667085;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #fff;
  font-size: 0.61rem;
}

.market-plan-count b {
  color: #16758a;
}

.market-catalog-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.market-available-total {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 0.3rem;
  padding: 0.33rem 0.7rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 680;
}

.market-available-total i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.market-available-total b {
  font-size: 0.75rem;
}

.market-available-total.has-stock {
  color: #027a48;
  border-color: #abefc6;
  background: #ecfdf3;
}

.market-available-total.has-stock i {
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.12);
}

.market-available-total.has-stock b {
  color: #05603a;
}

.market-available-total.sold-out {
  color: #b42318;
  border-color: #fecdca;
  background: #fef3f2;
}

.market-available-total.sold-out i {
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1);
}

.purchase-plan-grid {
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.market-plan-card {
  padding: 1.15rem 1.2rem;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.045);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.market-plan-card:hover {
  transform: translateY(-2px);
  border-color: #bfdde1;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.075);
}

.market-plan-featured {
  border-color: #b9b5ff;
  box-shadow: 0 7px 22px rgba(22, 133, 154, 0.09);
}

.market-plan-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.market-plan-identity {
  min-width: 0;
  flex: 1;
}

.market-plan-identity h2 {
  margin: 0.18rem 0 0.08rem;
  color: #1d2939;
  font-size: 1rem;
  font-weight: 800;
}

.market-plan-identity > small {
  color: #a1a8b3;
  font-size: 0.56rem;
}

.market-plan-badges {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.market-recommend {
  padding: 0.18rem 0.42rem;
  color: #16758a;
  border-radius: 5px;
  background: #edf8f9;
  font-size: 0.53rem;
  font-weight: 780;
}

.market-spec-grid.hardware-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  background: #fafbfc;
}

.market-spec-grid.hardware-list > div {
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 0.7rem;
  border: 0;
  border-right: 1px solid #e7e9ee;
  border-radius: 0;
  background: transparent;
}

.market-spec-grid.hardware-list > div:last-child {
  border-right: 0;
}

.market-spec-grid.hardware-list dd {
  width: 100%;
  color: #1d2939;
  font-size: 0.72rem;
}

.market-plan-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #eef0f3;
}

.market-duration-area {
  min-width: 540px;
  flex: 1;
}

.market-pricing-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.market-pricing-title strong {
  color: #344054;
  font-size: 0.68rem;
  font-weight: 780;
}

.market-pricing-title small {
  color: #98a2b3;
  font-size: 0.55rem;
}

.market-duration-area .duration-selector {
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  max-width: 720px;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.market-duration-area .duration-option {
  position: relative;
  min-height: 76px;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.55rem 0.62rem;
  text-align: left;
  border: 1px solid #e2e6ec;
  border-radius: 11px;
  background: #fafbfc;
  box-shadow: none;
}

.market-duration-area .duration-option:hover {
  border-color: #c5c1ff;
  background: #fdfdff;
}

.market-duration-area .duration-option.active {
  border-color: #8f88ff;
  background: linear-gradient(145deg, #f8fafc, #f3f8f8);
  box-shadow: 0 5px 14px rgba(22, 133, 154, 0.1);
}

.market-duration-area .duration-option.active::after {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #16859a;
  content: "✓";
  font-size: 0.5rem;
  font-weight: 800;
}

.duration-option-heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.duration-option-heading strong {
  color: #344054;
  font-size: 0.68rem;
  font-weight: 800;
}

.duration-option-heading em {
  padding: 0.12rem 0.3rem;
  color: #667085;
  border-radius: 5px;
  background: #eef1f5;
  font-size: 0.51rem;
  font-style: normal;
  font-weight: 680;
}

.market-duration-area .duration-option.active .duration-option-heading strong {
  color: #0f6678;
}

.market-duration-area .duration-option.active .duration-option-heading em {
  color: #16758a;
  background: #e9e7ff;
}

.duration-option-amount {
  display: flex;
  align-items: baseline;
  color: #1d2939;
  white-space: nowrap;
}

.duration-option-amount small {
  margin-right: 0.08rem;
  color: #667085;
  font-size: 0.58rem;
  font-weight: 700;
}

.duration-option-amount b {
  color: #1d2939;
  font-size: 1.08rem;
  font-weight: 840;
  letter-spacing: -0.03em;
}

.duration-option-amount em {
  margin-left: 0.18rem;
  color: #98a2b3;
  font-size: 0.5rem;
  font-style: normal;
  font-weight: 620;
}

.market-select-button.purchase-now-button {
  width: 100%;
  min-height: 54px;
  padding: 0 0.9rem 0 1.05rem;
  color: #fff;
  border-color: #16859a;
  background: linear-gradient(115deg, #16859a, #0f6678);
  box-shadow: 0 8px 19px rgba(15, 102, 120, 0.16);
}

.market-select-button.purchase-now-button:hover {
  color: #fff;
  border-color: #16758a;
  background: linear-gradient(115deg, #318b9b, #16758a);
}

.market-select-button.purchase-now-button:disabled {
  cursor: not-allowed;
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #f2f4f7;
  box-shadow: none;
}

.market-select-button.purchase-now-button:disabled > small {
  color: #98a2b3;
}

.market-select-button.purchase-now-button > small {
  color: rgba(255, 255, 255, 0.8);
}

.market-action-area {
  display: grid;
  width: 230px;
  flex: 0 0 230px;
  gap: 0.42rem;
}

.market-action-stock {
  display: flex;
  min-height: 29px;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.28rem 0.56rem;
  border: 1px solid;
  border-radius: 9px;
  font-size: 0.56rem;
}

.market-action-stock > span,
.market-action-stock > strong {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.market-action-stock > span {
  font-weight: 760;
}

.market-action-stock > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.market-action-stock > strong {
  font-weight: 650;
}

.market-action-stock > strong b {
  font-size: 0.72rem;
  font-weight: 840;
}

.market-action-stock.has-stock {
  color: #027a48;
  border-color: #d1fadf;
  background: #f6fef9;
}

.market-action-stock.has-stock > strong {
  color: #3f6f5a;
}

.market-action-stock.has-stock > strong b {
  color: #05603a;
}

.market-action-stock.sold-out {
  color: #b42318;
  border-color: #fee4e2;
  background: #fffafa;
}

.market-action-stock.sold-out > strong {
  color: #9b5a55;
}

.real-name-required-modal {
  position: relative;
  align-items: center;
  padding: 1.8rem 1.4rem 1.4rem;
  text-align: center;
}

.real-name-required-modal > .btn-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.real-name-required-icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 0.8rem;
  place-items: center;
  color: #b54708;
  border-radius: 16px;
  background: #fffaeb;
}

.real-name-required-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.real-name-required-modal h2 {
  margin: 0.42rem 0 0.38rem;
  color: #1d2939;
  font-size: 1.08rem;
  font-weight: 800;
}

.real-name-required-modal > p {
  margin: 0;
  color: #667085;
  font-size: 0.67rem;
  line-height: 1.65;
}

.real-name-required-note {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  margin: 1rem 0;
  padding: 0.62rem;
  color: #667085;
  border-radius: 10px;
  background: #f7f8fa;
  font-size: 0.57rem;
  font-weight: 680;
}

.real-name-required-note span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #16859a;
  border-radius: 50%;
  background: #e9e7ff;
  font-size: 0.5rem;
}

.real-name-required-note i {
  width: 22px;
  height: 1px;
  background: #d0d5dd;
}

.real-name-qr-dialog {
  width: min(92vw, 410px);
}

.real-name-qr-modal {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.35rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0, rgba(75, 141, 255, 0.15), transparent 34%),
    radial-gradient(circle at 100% 30%, rgba(105, 91, 239, 0.12), transparent 38%),
    rgba(252, 253, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 24px 60px rgba(31, 42, 68, 0.2);
}

.real-name-qr-modal::before {
  position: absolute;
  top: -88px;
  right: -76px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(73, 128, 245, 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 26px rgba(73, 128, 245, 0.035),
    0 0 0 54px rgba(73, 128, 245, 0.025);
  content: "";
  pointer-events: none;
}

.real-name-qr-modal > .btn-close {
  position: absolute;
  z-index: 3;
  top: 0.88rem;
  right: 0.88rem;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.72);
  background-size: 0.62rem;
  box-shadow: 0 5px 14px rgba(52, 64, 84, 0.08);
  opacity: 0.72;
}

.real-name-qr-modal > .btn-close:hover {
  background-color: #fff;
  opacity: 1;
}

.real-name-qr-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.78rem;
  padding-right: 2rem;
  text-align: left;
}

.real-name-qr-heading-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(73, 128, 245, 0.52);
  border-radius: 16px;
  background: linear-gradient(145deg, #5ca8ff, #3478ed 58%, #285ed0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 10px 22px rgba(52, 120, 237, 0.25);
}

.real-name-qr-heading-icon svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.real-name-qr-heading > div > span {
  display: block;
  margin-bottom: 0.18rem;
  color: #4f74c8;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.real-name-qr-heading h2 {
  margin: 0;
  color: #182230;
  font-size: 1.12rem;
  font-weight: 840;
  letter-spacing: -0.02em;
}

.real-name-qr-heading p {
  margin: 0.2rem 0 0;
  color: #7b8495;
  font-size: 0.66rem;
}

.real-name-identity-stage,
.real-name-qr-stage {
  position: relative;
  z-index: 1;
}

.real-name-identity-stage[hidden],
.real-name-qr-stage[hidden] {
  display: none;
}

.real-name-identity-stage {
  margin-top: 1.05rem;
}

.real-name-identity-intro {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.18rem;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.78rem;
  border: 1px solid rgba(91, 133, 209, 0.14);
  border-radius: 13px;
  background: rgba(239, 246, 255, 0.68);
}

.real-name-identity-intro strong {
  color: #25324a;
  font-size: 0.75rem;
  font-weight: 800;
}

.real-name-identity-intro span {
  color: #748098;
  font-size: 0.62rem;
}

.real-name-field {
  display: block;
  margin-top: 0.72rem;
}

.real-name-field > span {
  display: block;
  margin-bottom: 0.35rem;
  color: #475467;
  font-size: 0.65rem;
  font-weight: 760;
}

.real-name-field input {
  width: 100%;
  height: 45px;
  padding: 0 0.82rem;
  color: #182230;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  outline: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.025);
  font-size: 0.72rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.real-name-field input::placeholder {
  color: #a2acba;
}

.real-name-field input:focus {
  border-color: #78a8ef;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(76, 141, 241, 0.11);
}

.real-name-identity-message {
  display: none;
  margin-top: 0.58rem;
  padding: 0.48rem 0.65rem;
  border-radius: 9px;
  font-size: 0.62rem;
  font-weight: 680;
}

.real-name-identity-message.is-visible {
  display: block;
}

.real-name-identity-message.is-error {
  color: #a23d44;
  border: 1px solid #f0c7ca;
  background: #fff3f4;
}

.real-name-identity-message.is-success {
  color: #157451;
  border: 1px solid #bfe5d3;
  background: #eefaf4;
}

.real-name-identity-privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.72rem;
  color: #7b8698;
  font-size: 0.59rem;
  line-height: 1.55;
}

.real-name-identity-privacy svg {
  width: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: #4f8ff4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.real-name-identity-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.real-name-generate-button {
  height: 44px;
  color: #fff;
  border: 1px solid rgba(49, 111, 225, 0.8);
  border-radius: 12px;
  background: linear-gradient(135deg, #579af3, #3679e7 55%, #2f66d4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px rgba(45, 98, 208, 0.2);
  font-size: 0.7rem;
  font-weight: 800;
}

.real-name-generate-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 13px 27px rgba(45, 98, 208, 0.27);
  transform: translateY(-1px);
}

.real-name-generate-button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.real-name-channel-options {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.72rem;
  margin: 1rem 0 0.8rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(247, 249, 252, 0.82);
}

.real-name-channel-options > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.12rem;
  min-height: 44px;
}

.real-name-channel-options b {
  font-size: 0.7rem;
  font-weight: 820;
}

.real-name-channel-options em {
  color: #8a94a3;
  font-size: 0.56rem;
  font-style: normal;
}

.real-name-channel-options .is-wechat b {
  color: #16865a;
}

.real-name-channel-options .is-alipay b {
  color: #2874d7;
}

.real-name-channel-options .is-alipay.is-recommended {
  margin: -0.22rem 0;
  padding: 0.44rem 0.55rem;
  border: 1px solid rgba(40, 116, 215, 0.18);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(235, 244, 255, 0.96), rgba(247, 251, 255, 0.94));
  box-shadow: 0 5px 13px rgba(40, 116, 215, 0.08);
}

.real-name-channel-options .is-recommended small {
  position: absolute;
  top: -0.52rem;
  right: -0.42rem;
  padding: 0.14rem 0.34rem;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #347fdc;
  box-shadow: 0 4px 9px rgba(52, 127, 220, 0.2);
  font-size: 0.48rem;
  font-weight: 850;
  line-height: 1;
}

.real-name-channel-options > i {
  width: 1px;
  height: 26px;
  background: #dfe5ec;
}

.real-name-qr-status {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.42rem;
  margin: 0 auto 0.72rem;
  padding: 0.34rem 0.68rem;
  color: #187557;
  border: 1px solid rgba(31, 173, 120, 0.16);
  border-radius: 999px;
  background: rgba(231, 249, 241, 0.78);
  font-size: 0.58rem;
  font-weight: 760;
}

.real-name-qr-status i,
.real-name-qr-waiting i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18ad77;
  box-shadow: 0 0 0 4px rgba(24, 173, 119, 0.11);
}

.real-name-qr-frame {
  position: relative;
  width: 218px;
  margin: 0 auto;
  padding: 0.82rem 0.82rem 2.05rem;
  overflow: hidden;
  border: 1px solid rgba(135, 157, 196, 0.26);
  border-radius: 21px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94));
  box-shadow:
    inset 0 1px 0 #fff,
    0 16px 36px rgba(43, 61, 94, 0.13);
}

.real-name-qr-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
}

.real-name-qr-loading {
  position: absolute;
  inset: 0 0 1.55rem;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.65rem;
  color: #758196;
  border-radius: inherit;
  background: rgba(249, 251, 255, 0.96);
  font-size: 0.72rem;
  font-weight: 700;
}

.real-name-qr-loading[hidden] {
  display: none;
}

.real-name-qr-loading > i {
  width: 23px;
  height: 23px;
  border: 2px solid rgba(75, 102, 164, 0.18);
  border-top-color: #4b66a4;
  border-radius: 50%;
  animation: support-spin 700ms linear infinite;
}

.real-name-qr-frame.is-success {
  border-color: rgba(22, 138, 91, 0.42);
  box-shadow: 0 0 0 4px rgba(22, 138, 91, 0.08);
}

.real-name-qr-expiry {
  width: fit-content;
  min-width: 188px;
  margin: 0.72rem auto 0;
  padding: 0.3rem 0.7rem;
  color: #667085;
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  background: #f8fafc;
  text-align: center;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.real-name-qr-expiry.is-expired {
  color: #b84d51;
  border-color: #f1c8ca;
  background: #fff4f4;
}

.real-name-qr-status.is-success {
  color: #147a52;
  border-color: rgba(22, 138, 91, 0.22);
  background: #edf9f3;
}

.real-name-qr-status.is-processing,
.real-name-qr-status.is-warning {
  color: #966227;
  border-color: rgba(178, 118, 50, 0.2);
  background: #fff8ed;
}

.real-name-qr-status.is-error {
  color: #ad4449;
  border-color: rgba(184, 77, 81, 0.2);
  background: #fff3f3;
}

.real-name-qr-waiting {
  position: absolute;
  right: 0;
  bottom: 0.56rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  color: #475467;
  font-size: 0.6rem;
  font-weight: 760;
}

.qr-corner {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-color: #4c8df1;
  border-style: solid;
  pointer-events: none;
}

.qr-corner-tl {
  top: 0.55rem;
  left: 0.55rem;
  border-width: 2px 0 0 2px;
  border-radius: 7px 0 0;
}

.qr-corner-tr {
  top: 0.55rem;
  right: 0.55rem;
  border-width: 2px 2px 0 0;
  border-radius: 0 7px 0 0;
}

.qr-corner-bl {
  bottom: 1.7rem;
  left: 0.55rem;
  border-width: 0 0 2px 2px;
  border-radius: 0 0 0 7px;
}

.qr-corner-br {
  right: 0.55rem;
  bottom: 1.7rem;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 7px;
}

.real-name-qr-steps {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 0.38rem;
  margin: 1rem 0 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 14px;
  background: rgba(247, 249, 252, 0.82);
}

.real-name-qr-steps > span {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}

.real-name-qr-steps b {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #4b73c5;
  border-radius: 50%;
  background: #e9f1ff;
  font-size: 0.57rem;
}

.real-name-qr-steps em {
  color: #5f6b7d;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 720;
}

.real-name-qr-steps > i {
  height: 1px;
  background: linear-gradient(90deg, rgba(111, 145, 207, 0.38), rgba(111, 145, 207, 0.12));
}

.real-name-security-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  color: #7a8495;
  font-size: 0.58rem;
  line-height: 1.5;
}

.real-name-security-note svg {
  width: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: #4f8ff4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.real-name-qr-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  margin-top: 0.95rem;
}

.real-name-refresh-button,
.real-name-later-button {
  height: 43px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 780;
}

.real-name-refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  color: #fff;
  border: 1px solid rgba(49, 111, 225, 0.82);
  background:
    radial-gradient(circle at 14% 0, rgba(255, 255, 255, 0.3), transparent 44%),
    linear-gradient(135deg, #589cf6, #3679e7 54%, #2d62d0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 22px rgba(45, 98, 208, 0.24);
}

.real-name-refresh-button svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.real-name-refresh-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 13px 27px rgba(45, 98, 208, 0.3);
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.real-name-later-button {
  padding: 0 0.9rem;
  color: #667085;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(255, 255, 255, 0.74);
}

.real-name-later-button:hover {
  color: #344054;
  border-color: rgba(113, 128, 150, 0.34);
  background: #fff;
}

@media (max-width: 420px) {
  .real-name-qr-modal {
    padding-inline: 1rem;
  }

  .real-name-qr-steps {
    gap: 0.24rem;
    padding-inline: 0.55rem;
  }

  .real-name-qr-steps em {
    font-size: 0.52rem;
  }

  .real-name-qr-actions {
    grid-template-columns: 1fr;
  }

  .real-name-identity-actions {
    grid-template-columns: 1fr;
  }
}

.real-name-entry-error {
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #fedf89;
  border-radius: 12px;
  background: #fffaeb;
}

.real-name-entry-error > span {
  display: grid;
  width: 34px;
  height: 34px;
  margin: 0 auto 0.65rem;
  place-items: center;
  color: #b54708;
  border-radius: 50%;
  background: #fef0c7;
  font-weight: 850;
}

.real-name-entry-error strong {
  display: block;
  color: #7a2e0e;
  font-size: 0.68rem;
}

.real-name-entry-error p {
  margin: 0.35rem 0 0;
  color: #93370d;
  font-size: 0.57rem;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .market-spec-grid.hardware-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-spec-grid.hardware-list > div:nth-child(3) {
    border-right: 0;
  }

  .market-spec-grid.hardware-list > div:nth-child(n + 4) {
    padding-top: 0.65rem;
    border-top: 1px solid #e7e9ee;
  }

  .market-plan-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .market-duration-area,
  .market-action-area {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-basis: auto;
  }

  .market-duration-area .duration-selector {
    max-width: none;
  }
}

@media (max-width: 575.98px) {
  .purchase-compact-topbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    padding: 0.62rem;
  }

  .purchase-compact-primary {
    min-width: 0;
    flex: 1 1 175px;
  }

  .purchase-compact-divider {
    display: none;
  }

  .purchase-compact-section {
    flex: 0 1 auto;
  }

  .purchase-compact-section small {
    display: none;
  }

  .purchase-compact-meta {
    width: 100%;
    justify-content: flex-end;
  }

  .purchase-market-hero,
  .market-room-panel,
  .market-plan-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-market-status {
    align-items: flex-start;
  }

  .market-room-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    border: 0;
  }

  .market-room-tabs {
    width: 100%;
    height: 226px;
    grid-template-columns: none;
  }

  .market-room-tabs .server-room-option {
    top: 0.55rem;
    width: min(86vw, 320px);
    min-width: min(86vw, 320px);
    height: 204px;
    flex-basis: min(86vw, 320px);
  }

  .market-room-carousel-frame {
    min-height: 226px;
  }

  .market-room-tabs .server-room-option[data-room-slot="left-near"] {
    --room-x: -70%;
    --room-y: 4px;
    --room-z: -88px;
    --room-rotate: 18deg;
    --room-scale: 0.9;
    --room-opacity: 0.58;
  }

  .market-room-tabs .server-room-option[data-room-slot="right-near"] {
    --room-x: 70%;
    --room-y: 4px;
    --room-z: -88px;
    --room-rotate: -18deg;
    --room-scale: 0.9;
    --room-opacity: 0.58;
  }

  .market-room-tabs .server-room-option[data-room-slot$="-far"],
  .market-room-tabs .server-room-option[data-room-slot$="-hidden"] {
    --room-opacity: 0;
  }

  .market-room-carousel-toolbar {
    min-height: 36px;
    margin-bottom: 0.4rem;
    padding: 0;
  }

  .market-room-carousel-hint small {
    display: none;
  }

  .market-room-carousel-nav > span {
    display: none;
  }

  .market-plan-top {
    flex-wrap: wrap;
  }

  .market-catalog-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .market-catalog-summary {
    width: 100%;
    justify-content: space-between;
  }

  .market-spec-grid.hardware-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-spec-grid.hardware-list > div,
  .market-spec-grid.hardware-list > div:nth-child(3) {
    padding: 0.5rem;
    border: 0;
    border-radius: 8px;
    background: #fff;
  }

  .market-spec-grid.hardware-list > div:nth-child(n + 4) {
    border-top: 0;
  }

  .market-duration-area,
  .market-action-area {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-basis: auto;
  }

  .market-duration-area .duration-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Purchase page refinement: compact rooms and a clearer plan-to-payment flow. */
.purchase-page-intro {
  min-height: 112px;
  padding: 1.12rem 1.35rem;
}

.purchase-progress {
  min-width: 372px;
}

.purchase-progress li {
  min-width: 108px;
}

.purchase-room-picker {
  padding: 1rem 1.08rem 0.9rem;
}

.purchase-room-heading {
  margin-bottom: 0.72rem;
}

.purchase-room-picker .purchase-room-track.market-room-tabs {
  gap: 0.65rem;
  padding-bottom: 0.58rem;
}

.purchase-room-picker .purchase-room-track .server-room-option {
  width: 244px;
  min-width: 244px;
  height: 158px;
  flex-basis: 244px;
  padding: 0.78rem 0.82rem;
  border-radius: 14px;
}

.purchase-room-picker .server-room-option > .purchase-room-card-name {
  margin-top: 0.48rem;
  font-size: 0.92rem;
}

.purchase-room-machine-prefix {
  margin-top: 0.28rem;
}

.purchase-room-card-description {
  min-height: 1.48em;
  margin-top: 0.25rem;
  -webkit-line-clamp: 1;
}

.purchase-room-card-bottom {
  padding-top: 0.5rem;
}

.market-catalog-heading {
  margin: 0 0 0.72rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid #e7e9ee;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.035);
}

.purchase-plan-grid {
  gap: 0.78rem;
}

.market-plan-card {
  overflow: hidden;
  padding: 1.05rem 1.1rem 0;
  border-radius: 18px;
}

.market-plan-top {
  gap: 0.72rem;
}

.market-plan-identity h2 {
  margin-top: 0.14rem;
  font-size: 1.04rem;
}

.market-spec-grid.hardware-list {
  gap: 0;
  margin: 0.82rem 0 0.88rem;
  padding: 0.68rem 0.35rem;
}

.market-spec-grid.hardware-list > div {
  min-height: 48px;
  padding: 0 0.72rem;
}

.market-spec-grid.hardware-list dd {
  font-size: 0.75rem;
  font-weight: 720;
}

.market-plan-footer {
  align-items: stretch;
  gap: 1.05rem;
  margin: 0 -1.1rem;
  padding: 0.88rem 1.1rem 1.02rem;
  border-top-color: #e9ecf1;
  background: #fafbfc;
}

.market-pricing-title {
  margin-bottom: 0.5rem;
}

.market-pricing-title strong {
  font-size: 0.72rem;
}

.market-pricing-title small {
  font-size: 0.58rem;
}

.market-duration-area .duration-selector {
  max-width: 760px;
  gap: 0.46rem;
}

.market-duration-area .duration-option {
  min-height: 80px;
  padding: 0.58rem 0.62rem;
}

.duration-option-amount b {
  font-size: 1.16rem;
}

.market-action-area {
  width: 242px;
  flex-basis: 242px;
  align-content: end;
}

.market-action-stock {
  min-height: 32px;
  padding: 0.32rem 0.62rem;
}

.market-select-button.purchase-now-button {
  display: grid;
  min-height: 64px;
  grid-template-columns: minmax(72px, 1fr) auto 16px;
  align-items: center;
  gap: 0.58rem;
  padding: 0.42rem 0.58rem 0.42rem 0.82rem;
  overflow: hidden;
  border-radius: 14px;
  text-align: left;
  box-shadow:
    0 8px 20px rgba(15, 102, 120, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.purchase-button-label {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.purchase-button-label strong {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.purchase-button-label small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.52rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-button-price {
  display: grid;
  min-width: 78px;
  gap: 0.02rem;
  padding: 0.32rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  text-align: right;
}

.purchase-button-price strong {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 740;
  line-height: 1.15;
}

.purchase-button-price strong b {
  font-size: 0.94rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.purchase-button-price small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.48rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-select-button.purchase-now-button > svg {
  width: 16px;
  height: 16px;
  justify-self: end;
}

.market-select-button.purchase-now-button:hover {
  transform: translateY(-1px);
}

.market-select-button.purchase-now-button:active {
  transform: translateY(0) scale(0.99);
}

.market-select-button.purchase-now-button:focus-visible {
  outline: 3px solid rgba(22, 133, 154, 0.18);
  outline-offset: 2px;
}

.market-select-button.purchase-now-button:disabled .purchase-button-label small,
.market-select-button.purchase-now-button:disabled .purchase-button-price small {
  color: #98a2b3;
}

.market-select-button.purchase-now-button:disabled .purchase-button-price {
  border-color: #dfe3e8;
  background: #fff;
}

.market-select-button.purchase-now-button:disabled .purchase-button-price strong {
  color: #667085;
}

@media (max-width: 1099.98px) {
  .purchase-page-intro {
    min-height: 0;
  }

  .purchase-progress {
    min-width: 0;
  }

  .market-plan-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .market-duration-area,
  .market-action-area {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex-basis: auto;
  }

  .market-action-area {
    grid-template-columns: minmax(190px, 0.42fr) minmax(230px, 0.58fr);
    align-items: stretch;
  }
}

@media (max-width: 767.98px) {
  .purchase-room-picker .purchase-room-track .server-room-option {
    width: min(76vw, 244px);
    min-width: min(76vw, 244px);
    flex-basis: min(76vw, 244px);
  }

  .market-catalog-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .market-catalog-summary {
    width: 100%;
    justify-content: space-between;
  }

  .market-action-area {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .purchase-page-intro {
    padding: 0.95rem;
  }

  .purchase-room-picker {
    padding: 0.82rem;
  }

  .market-catalog-heading {
    padding: 0.68rem 0.72rem;
  }

  .market-plan-card {
    padding: 0.9rem 0.88rem 0;
  }

  .market-spec-grid.hardware-list {
    gap: 0.42rem;
    padding: 0.48rem;
  }

  .market-plan-footer {
    margin: 0 -0.88rem;
    padding: 0.82rem 0.88rem 0.92rem;
  }
}

/* Device patrol screen wall */
.patrol-page {
  display: grid;
  gap: 0.9rem;
}

.patrol-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e6ec;
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, rgba(22, 133, 154, 0.08), transparent 30%),
    linear-gradient(135deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 5px 18px rgba(16, 24, 40, 0.045);
}

.patrol-title-group,
.patrol-title-group > div {
  min-width: 0;
}

.patrol-title-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.patrol-title-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  color: #5650cf;
  border: 1px solid #d8eaec;
  border-radius: 13px;
  background: #f1f0ff;
}

.patrol-title-icon svg {
  width: 24px;
  height: 24px;
}

.patrol-title-group h1 {
  margin: 0;
  color: #1d2939;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.patrol-title-group p {
  margin: 0.22rem 0 0;
  color: #7a8495;
  font-size: 0.78rem;
}

.patrol-summary {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e3e7ed;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.82);
}

.patrol-summary > span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 0.28rem;
  padding: 0 0.72rem;
  color: #667085;
  border-left: 1px solid #edf0f3;
  font-size: 0.7rem;
  white-space: nowrap;
}

.patrol-summary > span:first-child {
  border-left: 0;
}

.patrol-summary strong {
  color: #344054;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.patrol-summary-dot {
  width: 7px;
  height: 7px;
  margin-right: 0.16rem;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.12);
}

.patrol-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.68rem 0.75rem;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
}

.patrol-layout-control,
.patrol-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.patrol-toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.patrol-remote-selector {
  min-height: 36px;
  border-color: #dcdfe6;
  background: #fdfdff;
}

.patrol-remote-selector select {
  min-width: 78px;
}

.patrol-layout-control > span {
  padding-left: 0.15rem;
  color: #667085;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.patrol-layout-switch {
  display: inline-grid;
  grid-template-columns: repeat(var(--patrol-layout-count, 4), auto);
  gap: 0.18rem;
  padding: 0.23rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f4f6f8;
}

.patrol-layout-button {
  min-width: 53px;
  min-height: 32px;
  padding: 0.32rem 0.65rem;
  color: #667085;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 760;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.patrol-layout-button:hover {
  color: #344054;
  background: rgba(255, 255, 255, 0.72);
}

.patrol-layout-button.active {
  color: #16758a;
  background: #fff;
  box-shadow: 0 1px 5px rgba(16, 24, 40, 0.12);
}

.patrol-refresh-state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #7b8493;
  font-size: 0.68rem;
  white-space: nowrap;
}

.patrol-refresh-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #12b76a;
  transition: box-shadow 0.2s ease;
}

.patrol-refresh-state.is-refreshing i {
  box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.14);
}

.patrol-tool-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.42rem 0.7rem;
  color: #475467;
  border: 1px solid #dfe3e9;
  border-radius: 9px;
  background: #fff;
  font-size: 0.69rem;
  font-weight: 740;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.patrol-tool-button:hover {
  color: #0f6678;
  border-color: #cbc8ff;
  background: #f8fbfb;
}

.patrol-tool-button svg {
  width: 16px;
  height: 16px;
}

.patrol-tool-button .patrol-exit-icon {
  display: none;
}

.patrol-monitor.is-fullscreen ~ * {
  visibility: hidden;
}

.patrol-monitor.is-fullscreen .patrol-enter-icon {
  display: none;
}

.patrol-monitor.is-fullscreen .patrol-exit-icon {
  display: block;
}

.patrol-monitor {
  overflow: hidden;
  padding: 0.65rem;
  border: 1px solid #dfe5ec;
  border-radius: 17px;
  background:
    radial-gradient(circle at 80% -10%, rgba(22, 133, 154, 0.08), transparent 32%),
    linear-gradient(145deg, #fbfcfd, #f2f5f8);
  box-shadow: 0 14px 34px rgba(32, 45, 61, 0.09);
}

.patrol-monitor-topbar {
  display: flex;
  min-height: 42px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.45rem 0.6rem;
  color: #5f6b7a;
}

.patrol-monitor-topbar > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.patrol-monitor-topbar > div > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #45d69a;
  box-shadow: 0 0 0 4px rgba(69, 214, 154, 0.11);
}

.patrol-monitor-topbar strong {
  color: #25313d;
  font-size: 0.76rem;
}

.patrol-monitor-topbar span {
  overflow: hidden;
  color: #7b8794;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patrol-monitor-time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.patrol-monitor-topbar .patrol-monitor-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.patrol-monitor-actions > button {
  display: none;
  min-height: 32px;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  color: #536170;
  border: 1px solid #d6dde5;
  border-radius: 8px;
  background: #fff;
  font-size: 0.64rem;
  font-weight: 720;
}

.patrol-monitor-actions > button:hover {
  color: #344054;
  border-color: #b9c4d0;
  background: #f8fafc;
}

.patrol-monitor-actions > button svg {
  width: 14px;
  height: 14px;
}

.patrol-monitor.is-fullscreen .patrol-monitor-actions > button {
  display: inline-flex;
}

.patrol-grid {
  display: grid;
  gap: 0.65rem;
  align-items: start;
}

.patrol-grid.layout-all {
  height: var(--patrol-all-height, 420px);
  grid-template-columns: repeat(var(--patrol-all-columns, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--patrol-all-rows, 1), minmax(0, 1fr));
  align-items: stretch;
}

.patrol-grid.layout-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.patrol-grid.layout-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.patrol-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe2e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(32, 45, 61, 0.07);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.patrol-card.is-connecting {
  border-color: #aaa5ff;
  box-shadow: 0 10px 26px rgba(22, 133, 154, 0.16);
}

.patrol-card.is-connecting .patrol-screen::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  color: #16758a;
  background: rgba(248, 247, 255, 0.86);
  backdrop-filter: blur(3px);
  content: "正在连接…";
  font-size: 0.68rem;
  font-weight: 760;
}

.patrol-grid.layout-all .patrol-card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.patrol-grid.layout-all .patrol-card-header {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  min-height: 38px;
  padding: 0.42rem 0.55rem;
  pointer-events: none;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.patrol-grid.layout-all .patrol-screen {
  height: 100%;
  min-height: 0;
  flex: 1;
  aspect-ratio: auto;
  border-top: 0;
}

.patrol-grid.layout-all.is-dense .patrol-card-header {
  min-height: 31px;
  padding: 0.3rem 0.42rem;
}

.patrol-grid.layout-all.is-dense .patrol-machine-copy {
  gap: 0.35rem;
}

.patrol-grid.layout-all.is-dense .patrol-machine-copy span:last-child,
.patrol-grid.layout-all.is-dense .patrol-online-label {
  display: none;
}

.patrol-grid.layout-all.is-dense .patrol-machine-copy strong {
  font-size: 0.6rem;
}

.patrol-grid.layout-all.is-ultra-dense .patrol-card-header {
  min-height: 24px;
  padding: 0.2rem 0.3rem;
}

.patrol-grid.layout-all.is-ultra-dense .patrol-machine-status {
  width: 6px;
  height: 6px;
  box-shadow: none;
}

.patrol-grid.layout-all.is-ultra-dense .patrol-machine-copy strong {
  font-size: 0.5rem;
}

.patrol-grid.layout-all.is-ultra-dense .patrol-screen-expand {
  display: none;
}

.patrol-card[hidden] {
  display: none !important;
}

.patrol-card:hover {
  border-color: #bac6d2;
  box-shadow: 0 10px 24px rgba(32, 45, 61, 0.11);
  transform: translateY(-1px);
}

.patrol-card-header {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
}

.patrol-grid.layout-all .patrol-card-header {
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.patrol-machine-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.patrol-machine-copy > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.08rem;
}

.patrol-machine-copy strong {
  overflow: hidden;
  color: #263442;
  font-size: 0.72rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patrol-machine-copy span:last-child {
  overflow: hidden;
  max-width: 190px;
  color: #7a8795;
  font-size: 0.59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patrol-machine-copy span.patrol-machine-meta {
  display: flex;
  min-width: 0;
  max-width: min(320px, 42vw);
  align-items: center;
  gap: 0.38rem;
}

.patrol-machine-copy span.patrol-machine-room {
  min-width: 0;
  overflow: hidden;
  flex: 0 1 auto;
  color: #7a8795;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patrol-machine-copy span.patrol-machine-remark {
  min-width: 0;
  overflow: hidden;
  padding-left: 0.38rem;
  color: #3e7f73;
  border-left: 1px solid #cadfd9;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patrol-machine-copy span.patrol-machine-remark[hidden] {
  display: none;
}

.patrol-machine-status {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.patrol-machine-status.is-online {
  background: #32d583;
  box-shadow: 0 0 0 4px rgba(50, 213, 131, 0.11);
}

.patrol-machine-status.is-offline {
  background: #667085;
  box-shadow: 0 0 0 4px rgba(102, 112, 133, 0.11);
}

.patrol-online-label {
  display: inline-flex;
  min-height: 23px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  font-size: 0.56rem;
  font-weight: 760;
}

.patrol-online-label.is-online {
  color: #087a4b;
  background: #eaf9f1;
}

.patrol-online-label.is-offline {
  color: #667085;
  background: #eef1f4;
}

.patrol-screen {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 16 / 9;
  color: inherit;
  border: 0;
  border-top: 1px solid #e6ebf0;
  background:
    linear-gradient(135deg, rgba(106, 119, 132, 0.035) 25%, transparent 25%) -12px 0 / 24px 24px,
    linear-gradient(225deg, rgba(106, 119, 132, 0.035) 25%, transparent 25%) -12px 0 / 24px 24px,
    #eef2f5;
}

button.patrol-screen {
  cursor: pointer;
}

.patrol-screen img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  background: #eef2f5;
  transition: none;
}

.patrol-screen.is-loaded img {
  opacity: 1;
}

.patrol-screen-loading,
.patrol-screen-error,
.patrol-screen-stale,
.patrol-screen-unconfigured > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.4rem;
  color: #718096;
}

.patrol-screen-loading[hidden],
.patrol-screen-error[hidden],
.patrol-screen-stale[hidden],
.patrol-pagination[hidden] {
  display: none !important;
}

.patrol-screen-loading i {
  width: 21px;
  height: 21px;
  border: 2px solid #d4dce4;
  border-top-color: #16859a;
  border-radius: 50%;
  animation: patrol-spin 0.85s linear infinite;
}

.patrol-screen-loading span {
  font-size: 0.62rem;
}

@keyframes patrol-spin {
  to {
    transform: rotate(360deg);
  }
}

.patrol-screen-error svg,
.patrol-screen-unconfigured svg {
  width: 26px;
  height: 26px;
  color: #97a3af;
}

.patrol-screen-error strong,
.patrol-screen-unconfigured strong {
  color: #536170;
  font-size: 0.68rem;
}

.patrol-screen-error small,
.patrol-screen-unconfigured small {
  color: #8793a0;
  font-size: 0.58rem;
}

.patrol-screen-stale {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: none;
  color: #fff;
  background: rgba(23, 32, 42, 0.68);
  backdrop-filter: grayscale(0.8);
}

.patrol-screen-stale strong {
  font-size: 0.72rem;
  font-weight: 760;
}

.patrol-screen-stale small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.59rem;
}

.patrol-screen-unconfigured {
  cursor: default;
  background:
    radial-gradient(circle at 50% 25%, rgba(22, 133, 154, 0.07), transparent 35%),
    #f2f5f8;
}

.patrol-screen-unconfigured small {
  max-width: 80%;
  text-align: center;
  line-height: 1.55;
}

.patrol-screen-expand {
  position: absolute;
  z-index: 2;
  right: 0.55rem;
  bottom: 0.55rem;
  display: inline-flex;
  width: auto;
  height: 30px;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.52rem;
  opacity: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 8px;
  background: rgba(11, 15, 14, 0.72);
  backdrop-filter: blur(6px);
  font-size: 0.58rem;
  font-weight: 720;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.patrol-screen-remote-hint {
  position: absolute;
  z-index: 2;
  bottom: 0.55rem;
  left: 0.55rem;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 0.32rem;
  padding: 0 0.55rem;
  opacity: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 8px;
  background: rgba(43, 48, 61, 0.72);
  backdrop-filter: blur(6px);
  font-size: 0.58rem;
  font-weight: 720;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.patrol-screen-remote-hint svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.patrol-screen:hover .patrol-screen-expand,
.patrol-screen:focus-visible .patrol-screen-expand,
.patrol-screen:hover .patrol-screen-remote-hint,
.patrol-screen:focus-visible .patrol-screen-remote-hint {
  opacity: 1;
  transform: translateY(-1px);
}

.patrol-screen-expand svg {
  width: 15px;
  height: 15px;
}

.patrol-grid.layout-4 .patrol-card-header {
  min-height: 43px;
  padding: 0.42rem 0.5rem;
}

.patrol-grid.layout-4 .patrol-machine-copy strong {
  font-size: 0.64rem;
}

.patrol-grid.layout-4 .patrol-machine-copy span:last-child,
.patrol-grid.layout-4 .patrol-online-label {
  font-size: 0.52rem;
}

.patrol-grid.layout-4 .patrol-online-label {
  min-height: 20px;
  padding: 0.14rem 0.33rem;
}

.patrol-pagination {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.18rem;
  border: 1px solid #dfe5ec;
  border-radius: 9px;
  background: #f5f7fa;
}

.patrol-pagination > div {
  display: flex;
  gap: 0.16rem;
}

.patrol-pagination > div:last-child {
  justify-content: initial;
}

.patrol-pagination button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #52606d;
  border: 0;
  border-radius: 7px;
  background: transparent;
  transition: color 0.18s ease, background 0.18s ease;
}

.patrol-pagination button:hover:not(:disabled) {
  color: #344054;
  background: #e7ebf0;
}

.patrol-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.patrol-pagination button svg {
  width: 14px;
  height: 14px;
}

.patrol-pagination > span {
  padding: 0 0.18rem;
  color: #7b8794;
  font-size: 0.65rem;
}

.patrol-pagination > span strong {
  color: #344054;
  font-variant-numeric: tabular-nums;
}

.patrol-configuration-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
  color: #786d2b;
  border: 1px solid #f0e4a9;
  border-radius: 11px;
  background: #fffdf1;
  font-size: 0.67rem;
  line-height: 1.55;
}

.patrol-configuration-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.patrol-configuration-note code {
  color: #5f5a34;
  font-size: 0.63rem;
}

.patrol-empty {
  display: flex;
  min-height: 430px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  text-align: center;
  border: 1px solid #e1e5eb;
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 20%, rgba(22, 133, 154, 0.07), transparent 30%),
    #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);
}

.patrol-empty > span {
  display: grid;
  width: 60px;
  height: 60px;
  margin-bottom: 0.85rem;
  place-items: center;
  color: #7770e8;
  border-radius: 17px;
  background: #f0efff;
}

.patrol-empty svg {
  width: 30px;
  height: 30px;
}

.patrol-empty h2 {
  margin: 0;
  color: #344054;
  font-size: 1rem;
  font-weight: 780;
}

.patrol-empty p {
  margin: 0.4rem 0 1rem;
  color: #7a8495;
  font-size: 0.75rem;
}

.patrol-empty .btn-brand {
  color: #fff;
  background: #16859a;
  box-shadow: 0 7px 16px rgba(22, 133, 154, 0.2);
}

dialog.patrol-preview-dialog {
  width: min(940px, calc(100vw - 48px));
  max-width: 940px;
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #1f2937;
  border: 1px solid #d9e1e8;
  border-radius: 18px;
  background: #f7f9fb;
  box-shadow: 0 26px 76px rgba(15, 23, 42, 0.24);
}

dialog.patrol-preview-dialog::backdrop {
  background: rgba(15, 23, 42, 0.54);
  backdrop-filter: blur(2px);
}

.patrol-preview-panel {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.patrol-preview-header {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e1e7ed;
  background: #fff;
}

.patrol-preview-header > div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.patrol-preview-header > div > span:last-child {
  display: flex;
  flex-direction: column;
}

.patrol-preview-header strong {
  color: #1f2937;
  font-size: 0.86rem;
}

.patrol-preview-header small {
  margin-top: 0.12rem;
  color: #778292;
  font-size: 0.66rem;
}

.patrol-preview-close {
  display: inline-flex;
  min-width: 76px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.78rem;
  color: #667085;
  border: 1px solid #dce3ea;
  border-radius: 11px;
  background: #f7f9fb;
  font-size: 0.7rem;
  font-weight: 720;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.patrol-preview-close:hover {
  color: #263442;
  border-color: #c5d0da;
  background: #eef2f6;
}

.patrol-preview-close:focus-visible {
  outline: 2px solid rgba(22, 133, 154, 0.32);
  outline-offset: 2px;
}

.patrol-preview-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.patrol-preview-body {
  padding: 12px;
  background: #edf1f4;
}

.patrol-preview-stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(64vh, 506px);
  overflow: hidden;
  place-items: center;
  border-radius: 12px;
  background: #0d1218;
}

.patrol-preview-stage img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  object-fit: contain;
  transition: none;
  user-select: none;
}

.patrol-preview-stage.is-loaded img {
  opacity: 1;
}

.patrol-preview-loading,
.patrol-preview-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.55rem;
  color: #aab4c0;
  background: #0d1218;
  font-size: 0.72rem;
}

.patrol-preview-loading[hidden],
.patrol-preview-error[hidden] {
  display: none !important;
}

.patrol-preview-loading i {
  width: 25px;
  height: 25px;
  border: 2px solid #35404d;
  border-top-color: #78aeb9;
  border-radius: 50%;
  animation: patrol-spin 0.85s linear infinite;
}

.patrol-preview-error svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.patrol-preview-error strong {
  color: #e5e9ee;
  font-size: 0.78rem;
}

.patrol-preview-error span {
  color: #8995a3;
  font-size: 0.65rem;
}

.patrol-preview-exit-hint {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 0.65rem;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(8, 13, 19, 0.68);
  backdrop-filter: blur(8px);
  font-size: 0.61rem;
}

@media (max-width: 640px) {
  dialog.patrol-preview-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 14px;
  }

  .patrol-preview-body {
    padding: 7px;
  }

  .patrol-preview-close {
    min-width: 40px;
    width: 40px;
    padding: 0;
  }

  .patrol-preview-close span,
  .patrol-preview-exit-hint {
    display: none;
  }
}

.patrol-action-notice.is-error {
  color: #912018;
  border-color: #f6c8c4;
  background: #fffafa;
}

.patrol-action-notice.is-error svg {
  color: #d92d20;
}

.patrol-monitor:fullscreen {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0.85rem;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 80% -10%, rgba(22, 133, 154, 0.08), transparent 30%),
    #f4f7fa;
}

.patrol-monitor:fullscreen.layout-all-active {
  overflow: hidden;
}

.patrol-monitor:fullscreen .patrol-monitor-topbar {
  position: sticky;
  z-index: 10;
  top: -0.85rem;
  padding: 0.8rem 0.45rem;
  background: rgba(248, 250, 252, 0.94);
  backdrop-filter: blur(12px);
}

.patrol-monitor:fullscreen .patrol-grid.layout-2,
.patrol-monitor:fullscreen .patrol-grid.layout-3,
.patrol-monitor:fullscreen .patrol-grid.layout-4 {
  height: calc(100vh - 126px);
}

.patrol-monitor:fullscreen .patrol-grid.layout-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.patrol-monitor:fullscreen .patrol-grid.layout-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.patrol-monitor:fullscreen .patrol-grid.layout-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.patrol-monitor:fullscreen .patrol-grid:not(.layout-all) .patrol-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.patrol-monitor:fullscreen .patrol-grid:not(.layout-all) .patrol-screen {
  min-height: 0;
  flex: 1;
  aspect-ratio: auto;
}

@media (max-width: 1199.98px) {
  .patrol-refresh-state {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .patrol-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .patrol-summary {
    width: 100%;
  }

  .patrol-summary > span {
    flex: 1 1 0;
    justify-content: center;
  }

  .patrol-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .patrol-layout-control,
  .patrol-toolbar-actions {
    justify-content: space-between;
  }

  .patrol-grid.layout-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .patrol-grid.layout-2,
  .patrol-grid.layout-3,
  .patrol-grid.layout-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patrol-layout-control {
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
  }

  .patrol-layout-switch {
    width: 100%;
    grid-template-columns: repeat(var(--patrol-layout-count, 4), minmax(0, 1fr));
  }

  .patrol-layout-button {
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .patrol-header {
    padding: 0.75rem;
  }

  .patrol-title-icon {
    width: 40px;
    height: 40px;
  }

  .patrol-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .patrol-summary > span {
    min-width: 0;
    padding: 0 0.35rem;
    font-size: 0.62rem;
  }

  .patrol-summary strong {
    font-size: 0.72rem;
  }

  .patrol-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .patrol-tool-button {
    width: 100%;
  }

  .patrol-grid.layout-2,
  .patrol-grid.layout-3,
  .patrol-grid.layout-4 {
    grid-template-columns: 1fr;
  }

  .patrol-monitor {
    padding: 0.5rem;
    border-radius: 14px;
  }

  .patrol-monitor-topbar {
    padding-right: 0.2rem;
    padding-left: 0.2rem;
  }

  .patrol-monitor-time {
    display: none;
  }

  .patrol-configuration-note {
    align-items: flex-start;
  }
}

/* Login experience previews */
.login-experience {
  --login-accent: #16859a;
  --login-accent-rgb: 22, 133, 154;
  --login-pointer-x: 0;
  --login-pointer-y: 0;
  --pet-eye-x: 0px;
  --pet-eye-y: 0px;
  --city-eye-x: 0px;
  --city-eye-y: 0px;
  --wind-pointer-x: 0;
  --wind-pointer-y: 0;
  position: relative;
  z-index: 0;
  width: 100%;
  padding: 1rem 0 1.6rem;
  isolation: isolate;
}

.login-experience::before,
.login-experience::after {
  position: absolute;
  z-index: -2;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.login-experience::before {
  top: 5%;
  left: -22%;
  background: radial-gradient(circle, rgba(var(--login-accent-rgb), 0.18), transparent 68%);
}

.login-experience::after {
  right: -20%;
  bottom: -9%;
  background: radial-gradient(circle, rgba(69, 196, 255, 0.15), transparent 68%);
}

.login-experience[data-login-theme="curtain"] {
  --login-accent: #7655d9;
  --login-accent-rgb: 118, 85, 217;
}

.login-experience[data-login-theme="pet"] {
  --login-accent: #3478e5;
  --login-accent-rgb: 52, 120, 229;
}

.login-experience[data-login-theme="wind"] {
  --login-accent: #386ee8;
  --login-accent-rgb: 56, 110, 232;
}

.login-experience[data-login-theme="aurora"] {
  --login-accent: #347fbc;
  --login-accent-rgb: 52, 127, 188;
}

.login-experience[data-login-theme="city"] {
  --login-accent: #397de1;
  --login-accent-rgb: 57, 125, 225;
}

.login-theme-switcher {
  position: relative;
  z-index: 8;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(165px, 0.7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.85rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(215, 220, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 10px 35px rgba(16, 24, 40, 0.07);
  backdrop-filter: blur(18px);
}

.login-theme-switcher-copy {
  display: flex;
  min-width: 0;
  padding-left: 0.35rem;
  flex-direction: column;
  gap: 0.08rem;
}

.login-theme-switcher-copy > span {
  color: var(--login-accent);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  transition: color 0.25s ease;
}

.login-theme-switcher-copy > strong {
  color: #344054;
  font-size: 0.78rem;
  font-weight: 760;
}

.login-theme-options {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.login-theme-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.55rem;
  color: #667085;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f6f8fb;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.login-theme-option:hover {
  border-color: #dfe3ed;
  background: #fff;
  transform: translateY(-1px);
}

.login-theme-option:has(input:checked) {
  color: #344054;
  border-color: rgba(var(--login-accent-rgb), 0.35);
  background: linear-gradient(135deg, rgba(var(--login-accent-rgb), 0.1), rgba(255, 255, 255, 0.96));
  box-shadow: inset 0 0 0 1px rgba(var(--login-accent-rgb), 0.04), 0 6px 16px rgba(var(--login-accent-rgb), 0.09);
}

.login-theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.login-theme-option:focus-within {
  outline: 3px solid rgba(var(--login-accent-rgb), 0.18);
  outline-offset: 2px;
}

.login-theme-option-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #7f8999;
  border: 1px solid #e5e8ee;
  border-radius: 10px;
  background: #fff;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.login-theme-option:has(input:checked) .login-theme-option-icon {
  color: var(--login-accent);
  border-color: rgba(var(--login-accent-rgb), 0.2);
  background: rgba(var(--login-accent-rgb), 0.08);
}

.login-theme-option-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.65;
}

.login-theme-option > span:nth-of-type(2) {
  display: flex;
  overflow: hidden;
  min-width: 0;
  flex-direction: column;
  gap: 0.04rem;
}

.login-theme-option strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.69rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-theme-option small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-theme-option > i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #a7afbd;
  border-radius: 7px;
  background: #fff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
}

.login-theme-option:has(input:checked) > i {
  color: #fff;
  background: var(--login-accent);
}

.login-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 592px;
  grid-template-columns: minmax(0, 1.23fr) minmax(400px, 470px);
  align-items: center;
  gap: 1rem;
  padding: 1.45rem 1.55rem 1.45rem 2.35rem;
  border: 1px solid rgba(218, 223, 235, 0.92);
  border-radius: 30px;
  background:
    radial-gradient(circle at 17% 12%, rgba(var(--login-accent-rgb), 0.14), transparent 35%),
    radial-gradient(circle at 88% 90%, rgba(49, 190, 255, 0.11), transparent 31%),
    linear-gradient(135deg, #f8f9ff 0%, #eef2f9 54%, #f9fbff 100%);
  box-shadow: 0 30px 80px rgba(23, 32, 56, 0.12);
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.login-stage::before {
  position: absolute;
  z-index: 0;
  top: -30%;
  left: 45%;
  width: 1px;
  height: 155%;
  content: "";
  background: linear-gradient(transparent, rgba(var(--login-accent-rgb), 0.26), transparent);
  box-shadow: 0 0 54px 18px rgba(var(--login-accent-rgb), 0.05);
  transform: rotate(16deg);
  pointer-events: none;
}

.login-experience[data-login-theme="curtain"] .login-stage {
  background:
    radial-gradient(circle at 14% 18%, rgba(129, 82, 220, 0.13), transparent 35%),
    radial-gradient(circle at 68% 82%, rgba(65, 203, 205, 0.14), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #f0eef9 49%, #f4fbfc 100%);
  box-shadow: 0 30px 82px rgba(73, 50, 126, 0.13);
}

.login-experience[data-login-theme="pet"] .login-stage {
  background:
    radial-gradient(circle at 17% 14%, rgba(70, 139, 238, 0.15), transparent 34%),
    radial-gradient(circle at 70% 86%, rgba(44, 203, 155, 0.13), transparent 33%),
    linear-gradient(135deg, #f9fbff 0%, #edf4fc 52%, #f5fcfa 100%);
  box-shadow: 0 30px 82px rgba(40, 86, 145, 0.13);
}

.login-experience[data-login-theme="wind"] .login-stage {
  background:
    radial-gradient(circle at 16% 16%, rgba(70, 121, 232, 0.17), transparent 34%),
    radial-gradient(circle at 63% 88%, rgba(94, 215, 234, 0.14), transparent 34%),
    linear-gradient(135deg, #f9fbff 0%, #eaf1fc 50%, #f4fbff 100%);
  box-shadow: 0 30px 86px rgba(39, 76, 145, 0.15);
}

.login-experience[data-login-theme="aurora"] .login-stage {
  background:
    radial-gradient(ellipse at 14% 18%, rgba(108, 221, 211, 0.19), transparent 36%),
    radial-gradient(ellipse at 55% 90%, rgba(131, 102, 220, 0.13), transparent 38%),
    radial-gradient(ellipse at 88% 13%, rgba(79, 170, 223, 0.13), transparent 31%),
    linear-gradient(135deg, #f9fdff 0%, #edf8f8 48%, #f4f2fc 100%);
  box-shadow: 0 30px 84px rgba(38, 93, 120, 0.13);
}

.login-experience[data-login-theme="city"] .login-stage {
  border-color: rgba(132, 186, 240, 0.3);
  background:
    linear-gradient(90deg, rgba(3, 15, 42, 0.08) 0%, rgba(3, 15, 42, 0.17) 44%, rgba(2, 12, 34, 0.62) 100%),
    linear-gradient(180deg, rgba(11, 36, 75, 0.05), rgba(5, 20, 48, 0.42)),
    url("/images/login/future-cloud-city.jpg") center / cover no-repeat;
  box-shadow: 0 34px 92px rgba(7, 25, 59, 0.29);
}

.login-experience[data-login-theme="city"] .login-stage::before {
  left: 48%;
  width: 2px;
  background: linear-gradient(transparent, rgba(117, 214, 255, 0.5), transparent);
  box-shadow: 0 0 74px 24px rgba(63, 168, 226, 0.09);
  opacity: 0.7;
}

.login-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 530px;
  pointer-events: none;
}

.login-visual-grid {
  position: absolute;
  inset: 0 -6% -12% -8%;
  border-radius: 35px;
  background-image:
    linear-gradient(rgba(var(--login-accent-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--login-accent-rgb), 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.72;
  transform: perspective(460px) rotateX(62deg) translateY(42%);
  transform-origin: bottom center;
}

.login-orbit {
  position: absolute;
  border: 1px solid rgba(var(--login-accent-rgb), 0.13);
  border-radius: 50%;
  transition: border-color 0.3s ease;
}

.login-orbit-one {
  top: 5%;
  right: 4%;
  width: 210px;
  height: 210px;
}

.login-orbit-two {
  bottom: 4%;
  left: -5%;
  width: 310px;
  height: 310px;
}

.login-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1.35rem 1.25rem 0.45rem 0.45rem;
  opacity: 0;
  transform: translate3d(calc(var(--login-pointer-x) * 7px), calc(var(--login-pointer-y) * 5px), 0);
}

.login-experience[data-login-theme="cockpit"] .login-scene-cockpit,
.login-experience[data-login-theme="curtain"] .login-scene-curtain,
.login-experience[data-login-theme="pet"] .login-scene-pet,
.login-experience[data-login-theme="wind"] .login-scene-wind,
.login-experience[data-login-theme="aurora"] .login-scene-aurora,
.login-experience[data-login-theme="city"] .login-scene-city {
  display: grid;
  opacity: 1;
  animation: login-scene-arrive 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes login-scene-arrive {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--login-pointer-x) * 7px), 13px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(calc(var(--login-pointer-x) * 7px), calc(var(--login-pointer-y) * 5px), 0);
  }
}

.login-scene-copy {
  position: relative;
  z-index: 4;
  max-width: 515px;
}

.login-scene-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-bottom: 0.7rem;
  color: var(--login-accent);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.login-scene-kicker > i {
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #20bd78;
  box-shadow: 0 0 0 3px rgba(32, 189, 120, 0.15);
}

.login-scene-copy h2 {
  margin: 0 0 0.72rem;
  color: #17233c;
  font-size: clamp(2.15rem, 3vw, 3rem);
  font-weight: 840;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.login-scene-copy h2 em {
  color: var(--login-accent);
  background: linear-gradient(110deg, var(--login-accent), #318ed6);
  background-clip: text;
  font-style: normal;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-experience[data-login-theme="curtain"] .login-scene-copy h2 em {
  background-image: linear-gradient(105deg, #7655d9, #34aab5);
}

.login-experience[data-login-theme="pet"] .login-scene-copy h2 em {
  background-image: linear-gradient(105deg, #3478e5, #21a982);
}

.login-experience[data-login-theme="wind"] .login-scene-copy h2 em {
  background-image: linear-gradient(105deg, #386ee8, #21a8c8 62%, #6b55d8);
}

.login-experience[data-login-theme="aurora"] .login-scene-copy h2 em {
  background-image: linear-gradient(105deg, #2f8ea4, #4a8edb 52%, #816bc8);
}

.login-experience[data-login-theme="city"] .login-scene-copy h2 em {
  background-image: linear-gradient(105deg, #75ddff, #8fb4ff 55%, #bba9ff);
}

.login-scene-copy > p {
  max-width: 430px;
  margin: 0;
  color: #66748b;
  font-size: 0.76rem;
  line-height: 1.75;
}

.cockpit-metrics {
  display: grid;
  max-width: 435px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.48rem;
  margin-top: 1rem;
}

.cockpit-metrics > span {
  display: flex;
  min-width: 0;
  padding: 0.58rem 0.66rem;
  border: 1px solid rgba(120, 130, 157, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.56);
  flex-direction: column;
  gap: 0.05rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.cockpit-metrics strong {
  color: #273655;
  font-size: 0.76rem;
  font-weight: 820;
}

.cockpit-metrics small {
  color: #8994a7;
  font-size: 0.55rem;
}

.cockpit-console {
  position: relative;
  align-self: end;
  justify-self: end;
  overflow: hidden;
  width: min(96%, 455px);
  height: 246px;
  border: 1px solid rgba(100, 108, 160, 0.19);
  border-radius: 22px;
  background:
    linear-gradient(rgba(91, 90, 197, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 90, 197, 0.065) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(235, 239, 250, 0.82));
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 28px 45px rgba(38, 51, 89, 0.13), inset 0 1px 0 #fff;
  transform: perspective(800px) rotateY(-5deg) rotateX(2deg);
}

.cockpit-console::after {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 13%;
  width: 18%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}

.cockpit-console-top,
.cockpit-console-foot {
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 0 0.8rem;
  background: rgba(255, 255, 255, 0.61);
  backdrop-filter: blur(10px);
}

.cockpit-console-top {
  top: 0;
  height: 38px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(105, 114, 145, 0.13);
}

.cockpit-console-top > span {
  display: flex;
  gap: 0.24rem;
}

.cockpit-console-top > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9ced8;
}

.cockpit-console-top > span i:first-child {
  background: #6f68ed;
}

.cockpit-console-top > span i:nth-child(2) {
  background: #42b9dc;
}

.cockpit-console-top strong {
  color: #65708b;
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.cockpit-console-top small {
  padding: 0.15rem 0.34rem;
  color: #158765;
  border-radius: 99px;
  background: #dff8ed;
  font-size: 0.48rem;
  font-weight: 820;
}

.cockpit-radar {
  position: absolute;
  z-index: 2;
  top: 45px;
  right: 22px;
  bottom: 35px;
  left: 22px;
  overflow: hidden;
  border-radius: 16px;
}

.cockpit-radar-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(22, 133, 154, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cockpit-radar-ring.ring-one {
  width: 72px;
  height: 72px;
}

.cockpit-radar-ring.ring-two {
  width: 124px;
  height: 124px;
}

.cockpit-radar-ring.ring-three {
  width: 184px;
  height: 184px;
}

.cockpit-radar-scan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  border-radius: 100% 0 0;
  background: conic-gradient(from 270deg, rgba(22, 133, 154, 0.3), transparent 28%);
  transform-origin: 0 0;
  animation: cockpit-radar-rotate 4.8s linear infinite;
}

@keyframes cockpit-radar-rotate {
  to {
    transform: rotate(360deg);
  }
}

.cockpit-cloud-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #fff;
  border: 6px solid rgba(255, 255, 255, 0.82);
  border-radius: 19px;
  background: linear-gradient(145deg, #716cf0, #4c88e5);
  box-shadow: 0 10px 24px rgba(74, 90, 204, 0.28);
  transform: translate(-50%, -50%);
}

.cockpit-cloud-core svg {
  width: 29px;
  height: 29px;
}

.cockpit-node {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #33b7d8;
  box-shadow: 0 0 0 5px rgba(51, 183, 216, 0.12);
  animation: cockpit-node-pulse 2.2s ease-in-out infinite;
}

.cockpit-node.node-one {
  top: 23%;
  left: 22%;
}

.cockpit-node.node-two {
  top: 31%;
  right: 19%;
  animation-delay: -0.75s;
}

.cockpit-node.node-three {
  right: 28%;
  bottom: 13%;
  background: #675fea;
  box-shadow: 0 0 0 5px rgba(103, 95, 234, 0.12);
  animation-delay: -1.4s;
}

@keyframes cockpit-node-pulse {
  50% {
    opacity: 0.48;
    transform: scale(0.76);
  }
}

.cockpit-console-foot {
  bottom: 0;
  height: 32px;
  justify-content: space-between;
  border-top: 1px solid rgba(105, 114, 145, 0.12);
}

.cockpit-console-foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #68738a;
  font-size: 0.52rem;
}

.cockpit-console-foot span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22b478;
}

.cockpit-console-foot b {
  color: #939cad;
  font-size: 0.52rem;
}

.curtain-security-note {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  margin-top: 1rem;
  padding: 0.58rem 0.72rem;
  color: #65538f;
  border: 1px solid rgba(118, 85, 217, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.59);
}

.curtain-security-note svg {
  width: 22px;
  height: 22px;
}

.curtain-security-note > span {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
}

.curtain-security-note strong {
  color: #554476;
  font-size: 0.66rem;
}

.curtain-security-note small {
  color: #8d82a4;
  font-size: 0.54rem;
}

.curtain-portal {
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(96%, 445px);
  height: 254px;
  overflow: hidden;
  border: 1px solid rgba(118, 85, 217, 0.2);
  border-radius: 24px;
  background: #e8eafa;
  box-shadow: 0 28px 48px rgba(67, 47, 112, 0.16), inset 0 1px 0 #fff;
  perspective: 800px;
}

.curtain-portal::before {
  position: absolute;
  z-index: 5;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px;
  content: "";
  pointer-events: none;
}

.curtain-portal-space {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.96), transparent 8%),
    radial-gradient(circle at 50% 48%, rgba(83, 199, 211, 0.38), transparent 31%),
    linear-gradient(145deg, #aaa2e7, #568dbf 49%, #275879);
}

.curtain-portal-space::before,
.curtain-portal-space::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  content: "";
}

.curtain-portal-space::before {
  inset: 23px 84px;
}

.curtain-portal-space::after {
  inset: 47px 110px;
}

.curtain-cloud-mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  color: #fff;
  transform: translate(-50%, -50%);
  flex-direction: column;
}

.curtain-cloud-mark svg {
  width: 50px;
  height: 50px;
  margin-bottom: 0.35rem;
  filter: drop-shadow(0 8px 12px rgba(25, 45, 88, 0.2));
}

.curtain-cloud-mark strong {
  font-size: 0.83rem;
}

.curtain-cloud-mark small {
  margin-top: 0.1rem;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.56rem;
  white-space: nowrap;
}

.curtain-star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.55);
}

.curtain-star.star-one {
  top: 24%;
  left: 30%;
}

.curtain-star.star-two {
  top: 34%;
  right: 25%;
}

.curtain-star.star-three {
  right: 36%;
  bottom: 20%;
}

.curtain-panel {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 51%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.54);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.23) 1px, transparent 1px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.89), rgba(177, 163, 224, 0.58));
  background-size: 17px 100%, auto;
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.62), 0 0 28px rgba(58, 41, 107, 0.13);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(12px);
}

.curtain-panel::before {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 32%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: rotate(12deg);
}

.curtain-panel > span {
  position: absolute;
  top: 50%;
  color: rgba(70, 59, 112, 0.56);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}

.curtain-panel-left {
  left: 0;
  border-radius: 23px 0 0 23px;
  transform: translateX(-78%) rotateY(10deg);
  transform-origin: left center;
}

.curtain-panel-left::before {
  right: 12%;
}

.curtain-panel-left > span {
  right: 14px;
}

.curtain-panel-right {
  right: 0;
  border-radius: 0 23px 23px 0;
  transform: translateX(78%) rotateY(-10deg);
  transform-origin: right center;
}

.curtain-panel-right::before {
  left: 12%;
}

.curtain-panel-right > span {
  left: 14px;
}

.login-experience.is-curtain-entering .curtain-panel-left,
.login-experience.is-curtain-entering .curtain-panel-right {
  transform: translateX(0) rotateY(0);
  transition: none;
}

.curtain-light-line {
  position: absolute;
  z-index: 4;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 18px 5px rgba(191, 246, 255, 0.62);
  transform: translateX(-50%);
  opacity: 0.55;
}

.pet-dialogue {
  position: relative;
  display: flex;
  max-width: 390px;
  min-height: 52px;
  align-items: center;
  margin-top: 1rem;
  padding: 0.68rem 0.85rem 0.68rem 2.35rem;
  color: #536780;
  border: 1px solid rgba(52, 120, 229, 0.14);
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 25px rgba(46, 81, 133, 0.07);
  font-size: 0.65rem;
  line-height: 1.45;
}

.pet-dialogue::before {
  position: absolute;
  left: 0.75rem;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  content: "AI";
  background: linear-gradient(145deg, #4c8eea, #2b70d3);
  font-size: 0.5rem;
  font-weight: 850;
}

.pet-dialogue > span {
  display: none;
}

.pet-dialogue-default,
.login-experience.is-wechat-ready .pet-dialogue-wechat,
.login-experience.is-password-active .pet-dialogue-password {
  display: inline !important;
}

.login-experience.is-wechat-ready .pet-dialogue-default,
.login-experience.is-password-active .pet-dialogue-default,
.login-experience.is-password-active .pet-dialogue-wechat {
  display: none !important;
}

.pet-companion {
  position: relative;
  align-self: end;
  justify-self: end;
  width: 270px;
  height: 282px;
  margin-right: 8%;
  transform: translate3d(calc(var(--login-pointer-x) * -5px), calc(var(--login-pointer-y) * -3px), 0);
}

.pet-head {
  position: absolute;
  z-index: 4;
  top: 43px;
  left: 50%;
  width: 186px;
  height: 139px;
  border: 7px solid rgba(255, 255, 255, 0.9);
  border-radius: 57px 57px 48px 48px;
  background: linear-gradient(145deg, #f8fbff, #cbdcf2);
  box-shadow: 0 22px 40px rgba(45, 83, 139, 0.18), inset -8px -10px 18px rgba(66, 106, 164, 0.1), inset 8px 8px 18px #fff;
  transform: translateX(-50%);
  animation: pet-float 3.8s ease-in-out infinite;
}

@keyframes pet-float {
  50% {
    transform: translate(-50%, -5px);
  }
}

.pet-face {
  position: absolute;
  inset: 23px 21px 22px;
  overflow: hidden;
  border: 2px solid rgba(48, 91, 144, 0.15);
  border-radius: 39px;
  background:
    radial-gradient(circle at 50% 14%, rgba(97, 216, 255, 0.18), transparent 46%),
    linear-gradient(145deg, #1d3454, #10243e);
  box-shadow: inset 0 0 24px rgba(50, 174, 229, 0.13);
}

.pet-eye {
  position: absolute;
  top: 36px;
  display: grid;
  width: 35px;
  height: 29px;
  place-items: center;
  border-radius: 14px;
  background: rgba(107, 213, 255, 0.1);
}

.pet-eye-left {
  left: 21px;
}

.pet-eye-right {
  right: 21px;
}

.pet-eye > i {
  width: 12px;
  height: 17px;
  border-radius: 8px;
  background: linear-gradient(#8ceaff, #4dc4f2);
  box-shadow: 0 0 11px rgba(82, 207, 250, 0.72);
  transform: translate(var(--pet-eye-x), var(--pet-eye-y));
  animation: pet-blink 5.4s ease-in-out infinite;
}

@keyframes pet-blink {
  0%, 45%, 49%, 100% {
    transform: translate(var(--pet-eye-x), var(--pet-eye-y)) scaleY(1);
  }
  47% {
    transform: translate(var(--pet-eye-x), var(--pet-eye-y)) scaleY(0.08);
  }
}

.pet-mouth {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 22px;
  height: 9px;
  border-bottom: 2px solid #64d5f5;
  border-radius: 0 0 18px 18px;
  transform: translateX(-50%);
}

.pet-ear {
  position: absolute;
  z-index: -1;
  top: 50px;
  width: 17px;
  height: 42px;
  border: 4px solid #fff;
  background: #9abce3;
}

.pet-ear-left {
  left: -16px;
  border-radius: 13px 4px 4px 13px;
}

.pet-ear-right {
  right: -16px;
  border-radius: 4px 13px 13px 4px;
}

.pet-antenna {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 50%;
  width: 3px;
  height: 42px;
  border-radius: 99px;
  background: #8baed7;
  transform: translateX(-50%);
}

.pet-antenna > i {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #55cce9;
  box-shadow: 0 0 15px rgba(65, 197, 227, 0.4);
  transform: translateX(-50%);
}

.pet-body {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 50%;
  display: grid;
  width: 130px;
  height: 104px;
  place-items: center;
  color: #3f7ed2;
  border: 6px solid rgba(255, 255, 255, 0.9);
  border-radius: 44px 44px 34px 34px;
  background: linear-gradient(145deg, #e7f1fc, #aec9e7);
  box-shadow: 0 22px 35px rgba(45, 83, 139, 0.15), inset 7px 7px 15px #fff;
  transform: translateX(-50%);
}

.pet-body svg {
  width: 54px;
  height: 54px;
}

.pet-body span {
  position: absolute;
  bottom: 17px;
  color: #4379ba;
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.pet-shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 170px;
  height: 23px;
  border-radius: 50%;
  background: rgba(56, 88, 130, 0.13);
  transform: translateX(-50%);
}

.pet-hand {
  position: absolute;
  z-index: 7;
  bottom: -54px;
  width: 37px;
  height: 80px;
  border: 5px solid #fff;
  border-radius: 22px;
  background: linear-gradient(145deg, #dceafa, #9fbee3);
  box-shadow: 0 10px 18px rgba(42, 75, 122, 0.13);
  transition: bottom 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.pet-hand-left {
  left: 10px;
  transform: rotate(-22deg);
}

.pet-hand-right {
  right: 10px;
  transform: rotate(22deg);
}

.pet-hand > i {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 17px;
  height: 12px;
  border-radius: 9px;
  background: rgba(67, 118, 179, 0.17);
  transform: translateX(-50%);
}

.login-experience.is-password-active .pet-hand {
  bottom: 45px;
}

.login-experience.is-password-active .pet-hand-left {
  transform: rotate(10deg);
}

.login-experience.is-password-active .pet-hand-right {
  transform: rotate(-10deg);
}

.pet-signal {
  position: absolute;
  z-index: 6;
  top: 28px;
  right: 18px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.pet-signal i {
  display: block;
  width: 4px;
  border-radius: 99px;
  background: #50b8df;
}

.pet-signal i:first-child {
  height: 6px;
}

.pet-signal i:nth-child(2) {
  height: 11px;
}

.pet-signal i:last-child {
  height: 16px;
}

.wind-feature-list {
  display: grid;
  max-width: 420px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 1rem;
}

.wind-feature-list > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.38rem;
  padding: 0.47rem 0.52rem;
  color: #5f6f89;
  border: 1px solid rgba(56, 110, 232, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.wind-feature-list i {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  color: #3972df;
  border-radius: 7px;
  background: rgba(56, 110, 232, 0.1);
  font-size: 0.49rem;
  font-style: normal;
  font-weight: 850;
}

.wind-feature-list strong {
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 730;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wind-curtain-world {
  --wind-open-left: 48;
  --wind-open-right: 48;
  position: relative;
  align-self: end;
  justify-self: end;
  overflow: hidden;
  width: min(97%, 462px);
  height: 270px;
  border: 1px solid rgba(68, 112, 196, 0.22);
  border-radius: 25px;
  background: #1b315a;
  box-shadow: 0 30px 52px rgba(39, 65, 118, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: perspective(980px) rotateX(calc(var(--wind-pointer-y) * -1.8deg)) rotateY(calc(var(--wind-pointer-x) * 2.2deg));
  transform-style: preserve-3d;
  contain: layout paint;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.wind-curtain-world::before {
  position: absolute;
  z-index: 9;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.31);
  border-radius: 19px;
  content: "";
  box-shadow: inset 0 0 32px rgba(109, 204, 255, 0.08);
  pointer-events: none;
}

.wind-room-backdrop {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(194, 238, 255, 0.62), transparent 13%),
    radial-gradient(circle at 50% 48%, rgba(70, 180, 237, 0.31), transparent 35%),
    linear-gradient(155deg, #152f62 0%, #295f9b 43%, #5fa7c5 74%, #cae9ee 100%);
}

.wind-room-backdrop::before {
  position: absolute;
  right: -12%;
  bottom: -49%;
  left: -12%;
  height: 70%;
  content: "";
  background:
    linear-gradient(rgba(211, 241, 255, 0.19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 241, 255, 0.19) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(330px) rotateX(62deg);
  transform-origin: top center;
  opacity: 0.74;
}

.wind-room-backdrop::after {
  position: absolute;
  top: -34%;
  left: 50%;
  width: 55%;
  height: 150%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(212, 247, 255, 0.19), transparent);
  transform: translateX(-50%) rotate(9deg);
  pointer-events: none;
}

.wind-aurora {
  position: absolute;
  z-index: 2;
  display: block;
  width: 250px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(110, 225, 240, 0.35), rgba(148, 119, 236, 0.2), transparent);
  opacity: 0.65;
  transform: rotate(-13deg) scaleX(1);
  animation: wind-aurora-breathe 5.8s ease-in-out infinite;
}

.wind-aurora-one {
  top: 17%;
  left: -5%;
}

.wind-aurora-two {
  right: -3%;
  bottom: 19%;
  transform: rotate(14deg) scaleX(0.84);
  animation-delay: -2.7s;
}

@keyframes wind-aurora-breathe {
  50% {
    opacity: 0.34;
    transform: rotate(-9deg) scaleX(1.1) translateX(8px);
  }
}

.wind-particle {
  position: absolute;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8fbff;
  box-shadow: 0 0 11px 3px rgba(172, 236, 255, 0.65);
  animation: wind-particle-float 4.2s ease-in-out infinite;
}

.wind-particle.particle-one {
  top: 20%;
  left: 28%;
}

.wind-particle.particle-two {
  top: 32%;
  right: 21%;
  animation-delay: -1.1s;
}

.wind-particle.particle-three {
  right: 32%;
  bottom: 19%;
  animation-delay: -2.4s;
}

.wind-particle.particle-four {
  bottom: 28%;
  left: 18%;
  animation-delay: -3.3s;
}

@keyframes wind-particle-float {
  50% {
    opacity: 0.38;
    transform: translate3d(8px, -7px, 0) scale(0.72);
  }
}

.wind-cloud-destination {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  min-width: 176px;
  align-items: center;
  color: #fff;
  transform: translate(-50%, -50%) translateZ(22px);
  flex-direction: column;
  text-align: center;
}

.wind-cloud-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 0.42rem;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 15px 32px rgba(15, 47, 91, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(9px);
}

.wind-cloud-icon svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 7px 10px rgba(16, 51, 96, 0.25));
}

.wind-cloud-destination strong {
  font-size: 0.78rem;
  text-shadow: 0 4px 11px rgba(12, 44, 86, 0.34);
}

.wind-cloud-destination small {
  margin-top: 0.15rem;
  color: rgba(240, 251, 255, 0.75);
  font-size: 0.52rem;
  white-space: nowrap;
}

.wind-curtain-rail {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 11px;
  left: 11px;
  display: flex;
  height: 17px;
  align-items: center;
  justify-content: space-around;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.57);
  border-radius: 99px;
  background: linear-gradient(#eef7ff, #99b4d7);
  box-shadow: 0 5px 13px rgba(12, 36, 79, 0.35), inset 0 2px 1px #fff;
  pointer-events: none;
}

.wind-curtain-rail > span {
  position: absolute;
  top: 3px;
  right: 11px;
  left: 11px;
  height: 3px;
  border-radius: 99px;
  background: rgba(44, 79, 130, 0.28);
}

.wind-curtain-rail > i {
  position: relative;
  z-index: 1;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(53, 79, 122, 0.31);
  border-radius: 50%;
  background: #f6fbff;
  box-shadow: 0 2px 3px rgba(17, 44, 84, 0.25);
}

.wind-curtain-half {
  position: absolute;
  z-index: 6;
  top: 18px;
  bottom: 7px;
  width: 54%;
  cursor: ew-resize;
  transform-style: preserve-3d;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: none;
  pointer-events: auto;
}

.wind-curtain-half.is-dragging {
  z-index: 7;
  cursor: grabbing;
  transition: none;
  will-change: transform;
}

.wind-curtain-left {
  left: 0;
  transform: translate3d(calc(var(--wind-open-left) * -1px), 0, 34px) rotateY(calc(var(--wind-open-left) * 0.075deg));
  transform-origin: left center;
}

.wind-curtain-right {
  right: 0;
  transform: translate3d(calc(var(--wind-open-right) * 1px), 0, 34px) rotateY(calc(var(--wind-open-right) * -0.075deg));
  transform-origin: right center;
}

.wind-curtain-half > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fold-index) * 12.35%);
  display: block;
  width: 13.35%;
  overflow: hidden;
  border-bottom: 1px solid rgba(31, 62, 120, 0.22);
  border-radius: 1px 1px 13px 13px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #9eb6ee 0%, #5e77c9 30%, #d6dffa 58%, #778bd2 82%, #526ab8 100%);
  box-shadow:
    inset 6px 0 11px rgba(255, 255, 255, 0.2),
    inset -7px 0 12px rgba(23, 47, 106, 0.25),
    0 10px 12px rgba(17, 39, 80, 0.13);
  transform-origin: top center;
  backface-visibility: hidden;
  animation: wind-curtain-ripple 3.7s ease-in-out infinite;
  animation-delay: var(--fold-delay);
}

.wind-curtain-right > span {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #526ab8 0%, #778bd2 23%, #d6dffa 50%, #5e77c9 74%, #9eb6ee 100%);
}

.wind-curtain-half > span::before,
.wind-curtain-half > span::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.wind-curtain-half > span::before {
  top: 0;
  right: 0;
  left: 0;
  height: 24px;
  border-bottom: 1px solid rgba(44, 68, 124, 0.24);
  background: linear-gradient(rgba(237, 243, 255, 0.76), rgba(112, 136, 202, 0.22));
  box-shadow: inset 0 5px 8px rgba(255, 255, 255, 0.34);
}

.wind-curtain-half > span::after {
  top: 7%;
  bottom: 9%;
  left: 15%;
  width: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0.55;
}

.wind-curtain-half > span:nth-child(odd) {
  --fold-a: -14deg;
  --fold-b: 12deg;
  --fold-z: 11px;
}

.wind-curtain-half > span:nth-child(even) {
  --fold-a: 13deg;
  --fold-b: -11deg;
  --fold-z: 7px;
  animation-duration: 4.15s;
}

.wind-curtain-half > span:nth-child(3n) {
  bottom: 5px;
  animation-duration: 3.25s;
}

.wind-curtain-half > span:nth-child(4n) {
  bottom: 9px;
}

@keyframes wind-curtain-ripple {
  0%, 100% {
    transform: translate3d(-1px, 0, 0) rotateY(var(--fold-a)) rotateZ(-0.45deg);
  }
  48% {
    transform: translate3d(2px, 6px, var(--fold-z)) rotateY(var(--fold-b)) rotateZ(0.75deg);
  }
  72% {
    transform: translate3d(-2px, 2px, 4px) rotateY(4deg) rotateZ(-0.2deg);
  }
}

.login-experience.is-wind-dragging .wind-curtain-half > span {
  animation-play-state: paused;
}

.wind-curtain-grip {
  position: absolute;
  z-index: 10;
  top: 48%;
  display: grid;
  width: 38px;
  height: 66px;
  place-items: center;
  color: #4265b7;
  border: 1px solid rgba(255, 255, 255, 0.73);
  border-radius: 99px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(191, 207, 239, 0.88));
  box-shadow: 0 11px 22px rgba(25, 53, 103, 0.26), inset 0 1px 0 #fff;
  transform: translateY(-50%) translateZ(18px);
  pointer-events: none;
}

.wind-curtain-left .wind-curtain-grip {
  right: -15px;
}

.wind-curtain-right .wind-curtain-grip {
  left: -15px;
}

.wind-curtain-grip::before {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(65, 96, 164, 0.15);
  border-radius: inherit;
  content: "";
}

.wind-curtain-grip > i {
  font-size: 1.22rem;
  font-style: normal;
  font-weight: 450;
  line-height: 1;
}

.wind-curtain-half.is-dragging .wind-curtain-grip {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(145deg, #608be9, #416bd0);
  box-shadow: 0 12px 26px rgba(25, 56, 126, 0.37), 0 0 0 7px rgba(107, 151, 239, 0.16);
}

.wind-drag-hint {
  position: absolute;
  z-index: 8;
  bottom: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.58rem;
  color: #eaf8ff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  background: rgba(16, 45, 90, 0.5);
  box-shadow: 0 7px 16px rgba(11, 35, 73, 0.19);
  transform: translateX(-50%) translateZ(55px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.wind-drag-hint svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.wind-drag-hint > span {
  display: flex;
  font-size: 0.52rem;
  font-weight: 720;
  white-space: nowrap;
  flex-direction: column;
}

.wind-drag-hint small {
  color: rgba(225, 245, 255, 0.65);
  font-size: 0.43rem;
  font-weight: 550;
}

.aurora-metrics {
  display: grid;
  max-width: 430px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
  margin-top: 1rem;
}

.aurora-metrics > span {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.42rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid rgba(64, 145, 165, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.aurora-metrics i {
  grid-row: 1 / 3;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #4bc7bd;
  box-shadow: 0 0 0 4px rgba(75, 199, 189, 0.12);
}

.aurora-metrics > span:nth-child(2) i {
  background: #548fdd;
  box-shadow: 0 0 0 4px rgba(84, 143, 221, 0.12);
}

.aurora-metrics > span:nth-child(3) i {
  background: #8a72cf;
  box-shadow: 0 0 0 4px rgba(138, 114, 207, 0.12);
}

.aurora-metrics strong {
  overflow: hidden;
  color: #49657a;
  font-size: 0.58rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aurora-metrics small {
  color: #8ba0ab;
  font-size: 0.48rem;
}

.aurora-network {
  --aurora-pointer-x: 50%;
  --aurora-pointer-y: 50%;
  position: relative;
  align-self: end;
  justify-self: end;
  overflow: hidden;
  width: min(97%, 465px);
  height: 266px;
  border: 1px solid rgba(80, 153, 178, 0.18);
  border-radius: 25px;
  background:
    radial-gradient(circle at 18% 20%, rgba(102, 218, 204, 0.14), transparent 31%),
    radial-gradient(circle at 80% 74%, rgba(140, 110, 211, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(234, 247, 250, 0.76));
  box-shadow: 0 28px 50px rgba(44, 105, 126, 0.12), inset 0 1px 0 #fff;
  transform: translate3d(calc(var(--login-pointer-x) * -3px), calc(var(--login-pointer-y) * -2px), 0);
  contain: layout paint;
  pointer-events: auto;
}

.aurora-network::before {
  position: absolute;
  z-index: 6;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.69);
  border-radius: 19px;
  content: "";
  box-shadow: inset 0 0 28px rgba(99, 186, 200, 0.07);
  pointer-events: none;
}

.aurora-ribbon {
  position: absolute;
  z-index: 1;
  display: block;
  width: 330px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(91, 213, 199, 0.24), rgba(84, 153, 221, 0.21), rgba(151, 116, 213, 0.17), transparent);
  opacity: 0.72;
  transform: rotate(-13deg) scaleX(1);
  animation: aurora-ribbon-drift 8.5s ease-in-out infinite;
  pointer-events: none;
}

.aurora-ribbon-one {
  top: 20px;
  left: -54px;
}

.aurora-ribbon-two {
  top: 82px;
  right: -61px;
  background: linear-gradient(90deg, transparent, rgba(130, 102, 211, 0.16), rgba(69, 181, 218, 0.2), rgba(93, 209, 178, 0.18), transparent);
  transform: rotate(12deg) scaleX(0.9);
  animation-delay: -3.2s;
}

.aurora-ribbon-three {
  bottom: 19px;
  left: 23px;
  width: 390px;
  height: 65px;
  transform: rotate(-6deg) scaleX(0.78);
  animation-delay: -5.8s;
}

@keyframes aurora-ribbon-drift {
  50% {
    opacity: 0.42;
    transform: rotate(-8deg) scaleX(1.1) translate3d(15px, 5px, 0);
  }
}

.aurora-network-map {
  position: absolute;
  z-index: 3;
  inset: 13px;
  width: calc(100% - 26px);
  height: calc(100% - 26px);
  overflow: visible;
  pointer-events: none;
}

.aurora-links {
  fill: none;
  stroke: url("#auroraLineGradient");
  stroke-width: 1.25;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
  animation: aurora-link-flow 9s linear infinite;
}

@keyframes aurora-link-flow {
  to {
    stroke-dashoffset: -72;
  }
}

.aurora-nodes {
  fill: #fff;
  stroke: #56a7c9;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(63, 164, 187, 0.52));
}

.aurora-nodes circle:nth-child(3n) {
  stroke: #8173cb;
}

.aurora-nodes circle:nth-child(2n) {
  stroke: #53bfaa;
}

.aurora-network-core {
  position: absolute;
  z-index: 5;
  top: 57%;
  left: 54%;
  display: flex;
  min-width: 120px;
  align-items: center;
  padding: 0.55rem 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.81);
  box-shadow: 0 13px 27px rgba(57, 119, 142, 0.15), inset 0 1px 0 #fff;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(10px);
  flex-direction: column;
  pointer-events: none;
}

.aurora-network-core > span {
  display: grid;
  width: 37px;
  height: 37px;
  margin-bottom: 0.24rem;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #53c7b5, #548ddb 63%, #7f6ac4);
  box-shadow: 0 9px 18px rgba(69, 139, 174, 0.23);
}

.aurora-network-core svg {
  width: 23px;
  height: 23px;
}

.aurora-network-core strong {
  color: #466477;
  font-size: 0.64rem;
}

.aurora-network-core small {
  margin-top: 0.05rem;
  color: #8ba0ac;
  font-size: 0.46rem;
}

.aurora-particle {
  position: absolute;
  z-index: 4;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #59c9bd;
  box-shadow: 0 0 11px 3px rgba(81, 196, 183, 0.31);
  animation: aurora-particle-travel 4.8s ease-in-out infinite;
  pointer-events: none;
}

.aurora-particle.particle-a {
  top: 25%;
  left: 16%;
}

.aurora-particle.particle-b {
  top: 16%;
  left: 46%;
  background: #6e8fda;
  animation-delay: -1.2s;
}

.aurora-particle.particle-c {
  top: 34%;
  right: 13%;
  background: #8c75cf;
  animation-delay: -2.1s;
}

.aurora-particle.particle-d {
  bottom: 22%;
  left: 24%;
  background: #63aada;
  animation-delay: -3.4s;
}

.aurora-particle.particle-e {
  right: 27%;
  bottom: 16%;
  animation-delay: -0.7s;
}

.aurora-particle.particle-f {
  top: 48%;
  left: 43%;
  background: #8171c9;
  animation-delay: -4s;
}

@keyframes aurora-particle-travel {
  50% {
    opacity: 0.3;
    transform: translate3d(13px, -9px, 0) scale(0.7);
  }
}

.aurora-pointer-wave {
  position: absolute;
  z-index: 2;
  top: var(--aurora-pointer-y);
  left: var(--aurora-pointer-x);
  width: 112px;
  height: 112px;
  border: 1px solid rgba(67, 164, 190, 0.25);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), rgba(82, 185, 196, 0.12) 30%, transparent 67%);
  transform: translate(-50%, -50%) scale(0.68);
  opacity: 0;
  transition: top 0.12s linear, left 0.12s linear, opacity 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}

.aurora-pointer-wave::before,
.aurora-pointer-wave::after {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(89, 169, 206, 0.26);
  border-radius: 50%;
  content: "";
  opacity: 0;
}

.aurora-pointer-wave::after {
  inset: 34px;
  border-color: rgba(105, 201, 177, 0.33);
}

.aurora-network.is-pointer-active .aurora-pointer-wave {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.aurora-network.is-pointer-active .aurora-pointer-wave::before {
  animation: aurora-pointer-ripple 1.7s ease-out infinite;
}

.aurora-network.is-pointer-active .aurora-pointer-wave::after {
  animation: aurora-pointer-ripple 1.7s 0.42s ease-out infinite;
}

@keyframes aurora-pointer-ripple {
  from {
    opacity: 0.6;
    transform: scale(0.45);
  }
  to {
    opacity: 0;
    transform: scale(1.75);
  }
}

.aurora-network-caption {
  position: absolute;
  z-index: 7;
  bottom: 14px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.46rem;
  color: #78909f;
  border: 1px solid rgba(102, 160, 175, 0.13);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.67);
  font-size: 0.48rem;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

.aurora-network-caption i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #50bcae;
  box-shadow: 0 0 0 3px rgba(80, 188, 174, 0.11);
}

.login-experience[data-login-theme="city"] .login-visual-grid {
  opacity: 0.22;
  mix-blend-mode: screen;
}

.login-experience[data-login-theme="city"] .login-orbit {
  border-color: rgba(134, 214, 255, 0.17);
  box-shadow: 0 0 35px rgba(79, 172, 229, 0.05);
}

.city-scene-copy {
  max-width: 540px;
  text-shadow: 0 5px 20px rgba(4, 20, 55, 0.35);
}

.login-experience[data-login-theme="city"] .login-scene-kicker {
  color: #86dcff;
}

.login-experience[data-login-theme="city"] .login-scene-kicker > i {
  border-color: rgba(7, 30, 65, 0.65);
  background: #68e5c1;
  box-shadow: 0 0 0 4px rgba(104, 229, 193, 0.17), 0 0 13px rgba(104, 229, 193, 0.42);
}

.login-experience[data-login-theme="city"] .login-scene-copy h2 {
  color: #f4f9ff;
}

.login-experience[data-login-theme="city"] .login-scene-copy > p {
  color: #c0d2e9;
  text-shadow: 0 3px 14px rgba(3, 16, 42, 0.55);
}

.city-status-row {
  display: grid;
  max-width: 455px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.43rem;
  margin-top: 1rem;
}

.city-status-row > span {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.06rem 0.4rem;
  padding: 0.5rem 0.56rem;
  color: #e9f6ff;
  border: 1px solid rgba(173, 225, 255, 0.22);
  border-radius: 11px;
  background: rgba(11, 44, 85, 0.43);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

.city-status-row i {
  grid-row: 1 / 3;
  width: 7px;
  height: 7px;
  border: 2px solid rgba(12, 44, 83, 0.8);
  border-radius: 50%;
  background: #68e5c1;
  box-shadow: 0 0 0 4px rgba(104, 229, 193, 0.13), 0 0 12px rgba(104, 229, 193, 0.34);
}

.city-status-row > span:nth-child(2) i {
  background: #75c9ff;
  box-shadow: 0 0 0 4px rgba(117, 201, 255, 0.13), 0 0 12px rgba(117, 201, 255, 0.34);
}

.city-status-row > span:nth-child(3) i {
  background: #b8a0ff;
  box-shadow: 0 0 0 4px rgba(184, 160, 255, 0.13), 0 0 12px rgba(184, 160, 255, 0.34);
}

.city-status-row strong {
  overflow: hidden;
  font-size: 0.58rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-status-row small {
  overflow: hidden;
  color: #8fb1d3;
  font-size: 0.42rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-command-deck {
  position: relative;
  z-index: 4;
  align-self: end;
  justify-self: end;
  overflow: hidden;
  width: min(96%, 450px);
  border: 1px solid rgba(163, 217, 255, 0.27);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(8, 36, 78, 0.71), rgba(15, 60, 101, 0.4));
  box-shadow: 0 22px 38px rgba(2, 16, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.11);
  transform: perspective(800px) rotateY(-4deg) translate3d(calc(var(--login-pointer-x) * -4px), calc(var(--login-pointer-y) * -2px), 0);
  backdrop-filter: blur(12px);
}

.city-command-deck::before {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: 9%;
  width: 18%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(126, 222, 255, 0.1), transparent);
  transform: rotate(17deg);
}

.city-command-head {
  position: relative;
  z-index: 1;
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgba(163, 217, 255, 0.16);
}

.city-command-head > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #dff4ff;
  font-size: 0.55rem;
  font-weight: 720;
}

.city-command-head > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #62dfbd;
  box-shadow: 0 0 9px rgba(98, 223, 189, 0.7);
}

.city-command-head small {
  color: #7fc6ef;
  font-size: 0.45rem;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.city-command-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.65rem 0.45rem 0.72rem;
}

.city-command-body > span {
  display: flex;
  min-width: 0;
  align-items: center;
  border-right: 1px solid rgba(158, 211, 245, 0.15);
  flex-direction: column;
}

.city-command-body > span:last-child {
  border-right: 0;
}

.city-command-body strong {
  color: #effaff;
  font-size: 0.79rem;
  font-weight: 780;
}

.city-command-body small {
  margin-top: 0.08rem;
  color: #8eaccb;
  font-size: 0.45rem;
}

.city-ai-pet {
  --city-ai-scale: 1;
  position: absolute;
  z-index: 7;
  right: 7px;
  bottom: 91px;
  width: 166px;
  height: 168px;
  transform: translate3d(calc(var(--login-pointer-x) * -5px), calc(var(--login-pointer-y) * -3px), 0) scale(var(--city-ai-scale));
  transform-origin: right bottom;
  pointer-events: none;
}

.city-ai-message {
  position: absolute;
  z-index: 9;
  top: 30px;
  right: 112px;
  width: 154px;
  padding: 0.55rem 0.7rem;
  color: #dff5ff;
  border: 1px solid rgba(162, 221, 255, 0.28);
  border-radius: 13px 13px 4px 13px;
  background: linear-gradient(145deg, rgba(11, 40, 82, 0.85), rgba(17, 65, 107, 0.72));
  box-shadow: 0 12px 27px rgba(2, 16, 42, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 0.56rem;
  font-weight: 680;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.city-ai-message::after {
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-right: 1px solid rgba(162, 221, 255, 0.25);
  background: rgba(16, 59, 102, 0.83);
  content: "";
  transform: skewX(42deg);
  transform-origin: bottom left;
}

.city-ai-message > span {
  display: none;
}

.city-ai-message-default,
.login-experience.is-wechat-ready .city-ai-message-wechat,
.login-experience.is-password-active .city-ai-message-password {
  display: block !important;
}

.login-experience.is-wechat-ready .city-ai-message-default,
.login-experience.is-password-active .city-ai-message-default,
.login-experience.is-password-active .city-ai-message-wechat {
  display: none !important;
}

.city-ai-unit {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 8px;
  width: 122px;
  height: 151px;
  animation: city-ai-hover 3.6s ease-in-out infinite;
}

@keyframes city-ai-hover {
  50% {
    transform: translateY(-6px) rotate(0.8deg);
  }
}

.city-ai-antenna {
  position: absolute;
  z-index: 3;
  top: 1px;
  left: 50%;
  width: 3px;
  height: 29px;
  border-radius: 99px;
  background: linear-gradient(#a9d7f4, #5f83bd);
  transform: translateX(-50%);
}

.city-ai-antenna > i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid rgba(232, 247, 255, 0.95);
  border-radius: 50%;
  background: #67e1cf;
  box-shadow: 0 0 13px rgba(103, 225, 207, 0.7);
  transform: translateX(-50%);
}

.city-ai-head {
  position: absolute;
  z-index: 4;
  top: 21px;
  left: 50%;
  width: 104px;
  height: 78px;
  border: 5px solid rgba(229, 245, 255, 0.92);
  border-radius: 34px 34px 29px 29px;
  background: linear-gradient(145deg, #dcecff, #799dce);
  box-shadow: 0 15px 27px rgba(1, 16, 44, 0.3), inset 6px 6px 12px rgba(255, 255, 255, 0.58), inset -6px -7px 12px rgba(32, 70, 126, 0.2);
  transform: translateX(-50%);
}

.city-ai-face {
  position: absolute;
  inset: 12px 11px 11px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(142, 218, 255, 0.23);
  border-radius: 23px;
  background:
    radial-gradient(circle at 50% 15%, rgba(95, 205, 248, 0.17), transparent 43%),
    linear-gradient(145deg, #132c50, #071a34);
  box-shadow: inset 0 0 18px rgba(54, 179, 228, 0.15);
}

.city-ai-eye {
  display: grid;
  width: 20px;
  height: 22px;
  place-items: center;
  border-radius: 10px;
  background: rgba(103, 213, 248, 0.08);
}

.city-ai-eye > i {
  position: relative;
  width: 8px;
  height: 13px;
  border-radius: 6px;
  background: linear-gradient(#a7f3ff, #59cceb);
  box-shadow: 0 0 10px rgba(91, 214, 245, 0.78);
  transform: translate(var(--city-eye-x), var(--city-eye-y));
  transition: transform 0.11s ease-out, height 0.24s ease, opacity 0.24s ease;
}

.city-ai-eye > i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  content: "";
}

.login-experience.is-password-active .city-ai-eye > i {
  height: 2px;
  border-radius: 99px;
  transform: translate(0, 0);
  opacity: 0.82;
}

.city-ai-smile {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 16px;
  height: 7px;
  border-bottom: 2px solid #68d9ef;
  border-radius: 0 0 12px 12px;
  transform: translateX(-50%);
}

.login-experience.is-password-active .city-ai-smile {
  width: 13px;
  height: 1px;
  border-radius: 0;
}

.city-ai-ear {
  position: absolute;
  z-index: -1;
  top: 27px;
  width: 13px;
  height: 29px;
  border: 3px solid rgba(229, 245, 255, 0.9);
  background: #7196c7;
}

.city-ai-ear-left {
  left: -12px;
  border-radius: 9px 3px 3px 9px;
}

.city-ai-ear-right {
  right: -12px;
  border-radius: 3px 9px 9px 3px;
}

.city-ai-body {
  position: absolute;
  z-index: 3;
  bottom: 10px;
  left: 50%;
  display: grid;
  width: 68px;
  height: 54px;
  place-items: center;
  color: #dff6ff;
  border: 4px solid rgba(224, 243, 255, 0.91);
  border-radius: 24px 24px 18px 18px;
  background: linear-gradient(145deg, #8fb7e5, #436ca8);
  box-shadow: 0 13px 23px rgba(2, 18, 47, 0.28), inset 5px 5px 9px rgba(255, 255, 255, 0.34);
  transform: translateX(-50%);
}

.city-ai-cloud svg {
  width: 27px;
  height: 27px;
}

.city-ai-body > strong {
  position: absolute;
  right: 9px;
  bottom: 5px;
  color: rgba(224, 246, 255, 0.75);
  font-size: 0.38rem;
  letter-spacing: 0.08em;
}

.city-ai-thrusters {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 0;
  left: 26px;
  display: flex;
  justify-content: space-between;
}

.city-ai-thrusters > i {
  width: 13px;
  height: 21px;
  border-radius: 50% 50% 70% 70%;
  background: linear-gradient(rgba(99, 219, 246, 0.75), transparent);
  transform: scaleY(0.8);
  transform-origin: top center;
  animation: city-ai-thruster 1.25s ease-in-out infinite;
}

.city-ai-thrusters > i:last-child {
  animation-delay: -0.55s;
}

@keyframes city-ai-thruster {
  50% {
    opacity: 0.35;
    transform: scaleY(1.18);
  }
}

.city-ai-shadow {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 112px;
  height: 17px;
  border-radius: 50%;
  background: rgba(2, 15, 39, 0.25);
  box-shadow: 0 0 20px rgba(74, 181, 232, 0.13);
}

.city-data-beam {
  position: absolute;
  z-index: 2;
  bottom: 8%;
  width: 1px;
  height: 48%;
  background: linear-gradient(transparent, rgba(121, 216, 255, 0.74));
  box-shadow: 0 0 15px 3px rgba(70, 180, 234, 0.22);
  transform-origin: bottom center;
  animation: city-beam-breathe 3.8s ease-in-out infinite;
}

.city-data-beam-one {
  left: 19%;
}

.city-data-beam-two {
  right: 24%;
  height: 39%;
  animation-delay: -1.9s;
}

@keyframes city-beam-breathe {
  50% {
    opacity: 0.35;
    transform: scaleY(0.74);
  }
}

.city-scan-line {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 34%;
  left: 3%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121, 222, 255, 0.65), transparent);
  box-shadow: 0 0 14px rgba(90, 199, 246, 0.44);
  animation: city-scan-rise 5.8s ease-in-out infinite;
}

@keyframes city-scan-rise {
  50% {
    opacity: 0.26;
    transform: translateY(-98px);
  }
}

.login-experience .login-shell {
  position: relative;
  z-index: 5;
  min-height: 0;
  padding: 0;
}

.login-experience .login-shell::before {
  position: absolute;
  z-index: -1;
  inset: -18px;
  border: 1px solid rgba(var(--login-accent-rgb), 0.08);
  border-radius: 30px;
  content: "";
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 20px 60px rgba(var(--login-accent-rgb), 0.08);
  transform: translate3d(calc(var(--login-pointer-x) * -4px), calc(var(--login-pointer-y) * -3px), 0);
  pointer-events: none;
}

.login-experience .wechat-first-card {
  width: min(100%, 455px);
  border-color: rgba(210, 216, 229, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 26px 60px rgba(32, 44, 73, 0.15), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.login-experience[data-login-theme="curtain"] .wechat-first-card {
  border-color: rgba(118, 85, 217, 0.18);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 65px rgba(70, 48, 116, 0.16), inset 0 1px 0 #fff;
}

.login-experience[data-login-theme="pet"] .wechat-first-card {
  border-color: rgba(52, 120, 229, 0.17);
  box-shadow: 0 28px 65px rgba(39, 82, 139, 0.16), inset 0 1px 0 #fff;
}

.login-experience[data-login-theme="wind"] .wechat-first-card {
  border-color: rgba(56, 110, 232, 0.18);
  box-shadow: 0 28px 67px rgba(39, 73, 135, 0.17), inset 0 1px 0 #fff;
}

.login-experience[data-login-theme="aurora"] .wechat-first-card {
  border-color: rgba(78, 151, 172, 0.18);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 67px rgba(42, 105, 123, 0.15), inset 0 1px 0 #fff;
}

.login-experience[data-login-theme="city"] .login-shell::before {
  border-color: rgba(170, 220, 255, 0.21);
  background: rgba(62, 135, 196, 0.12);
  box-shadow: 0 24px 70px rgba(0, 12, 36, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.login-experience[data-login-theme="city"] .wechat-first-card {
  border-color: rgba(220, 239, 255, 0.56);
  background: rgba(247, 250, 255, 0.88);
  box-shadow: 0 30px 76px rgba(0, 12, 35, 0.34), inset 0 1px 0 #fff;
  backdrop-filter: blur(24px) saturate(1.14);
}

.login-experience[data-login-theme="city"] .login-card-status {
  border-bottom-color: rgba(124, 157, 193, 0.19);
}

.login-experience .wechat-first-card .card-body {
  padding: 1.35rem 1.55rem 1.2rem !important;
}

.login-card-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -0.1rem 0 0.8rem;
  padding-bottom: 0.62rem;
  border-bottom: 1px solid #edf0f4;
}

.login-card-status > span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #697589;
  font-size: 0.56rem;
  font-weight: 720;
}

.login-card-status > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1db477;
  box-shadow: 0 0 0 3px rgba(29, 180, 119, 0.12);
}

.login-card-status > small {
  color: #9aa4b4;
  font-size: 0.5rem;
  font-weight: 780;
  letter-spacing: 0.09em;
}

.login-experience .wechat-first-heading {
  margin-bottom: 1rem;
}

.login-experience .wechat-hero-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 0.58rem;
  border-radius: 17px;
}

.login-experience .wechat-hero-icon svg {
  width: 31px;
  height: 31px;
}

.login-experience .wechat-heading-badge {
  margin-bottom: 0.3rem;
  padding: 0.2rem 0.46rem;
  font-size: 0.57rem;
}

.login-experience .wechat-first-heading h1 {
  margin-bottom: 0.25rem;
  font-size: 1.43rem;
}

.login-experience .wechat-first-heading p {
  font-size: 0.68rem;
}

.login-experience .wechat-primary-action {
  min-height: 59px;
}

.login-experience .wechat-register-entry {
  margin-top: 0.7rem;
  margin-bottom: 0.82rem;
}

.login-experience .wechat-flow-hint {
  margin-bottom: 0.76rem;
  padding: 0.52rem 0.58rem;
}

.login-experience .password-login-panel summary {
  padding-top: 0.72rem;
}

.login-experience .jianhua-password-login-panel > summary {
  display: none;
}

.login-experience .jianhua-password-login-panel .password-login-form {
  margin-top: 0;
}

.login-experience .password-login-form {
  margin-top: 0.62rem;
  padding: 0.8rem;
}

.login-experience .login-trust {
  margin-top: 0.72rem;
}

@media (max-width: 1199.98px) {
  .login-stage {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 440px);
    padding-left: 1.5rem;
  }

  .login-scene {
    padding-right: 0.75rem;
  }

  .login-scene-copy h2 {
    font-size: 2.25rem;
  }

  .pet-companion {
    margin-right: 2%;
  }
}

@media (max-width: 991.98px) {
  .login-theme-switcher {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .login-theme-switcher-copy {
    display: none;
  }

  .login-stage {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.1rem;
  }

  .login-visual {
    min-height: 335px;
  }

  .login-scene {
    grid-template-columns: minmax(220px, 0.82fr) minmax(330px, 1.18fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.35rem 0.55rem;
  }

  .login-scene-copy h2 {
    font-size: 2rem;
  }

  .login-scene-copy > p {
    font-size: 0.68rem;
  }

  .cockpit-metrics {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .cockpit-metrics > span {
    display: grid;
    grid-template-columns: 54px 1fr;
    padding: 0.38rem 0.52rem;
  }

  .cockpit-console,
  .curtain-portal,
  .wind-curtain-world,
  .aurora-network,
  .city-command-deck {
    align-self: center;
    justify-self: stretch;
    width: 100%;
  }

  .pet-companion {
    align-self: center;
    justify-self: center;
    margin: 0;
  }

  .city-ai-pet {
    --city-ai-scale: 0.88;
    right: 4px;
    bottom: 79px;
  }

  .login-experience .login-shell {
    justify-self: center;
    width: min(100%, 455px);
  }
}

@media (max-width: 767.98px) {
  .login-experience {
    padding-top: 0.7rem;
  }

  .login-theme-option {
    min-height: 50px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem;
    padding: 0.4rem;
  }

  .login-theme-option > i,
  .login-theme-option small {
    display: none;
  }

  .login-theme-option strong {
    font-size: 0.63rem;
    white-space: normal;
  }

  .login-theme-option-icon {
    width: 31px;
    height: 31px;
  }

  .login-stage {
    border-radius: 23px;
  }

  .login-visual {
    min-height: 295px;
  }

  .login-scene {
    grid-template-columns: minmax(175px, 0.88fr) minmax(235px, 1.12fr);
  }

  .login-scene-copy h2 {
    font-size: 1.68rem;
  }

  .login-scene-copy > p,
  .cockpit-metrics,
  .curtain-security-note,
  .wind-feature-list,
  .aurora-metrics,
  .city-status-row {
    display: none;
  }

  .cockpit-console,
  .curtain-portal {
    height: 220px;
  }

  .wind-curtain-world {
    height: 225px;
  }

  .aurora-network {
    height: 225px;
  }

  .pet-dialogue {
    min-height: 46px;
    margin-top: 0.65rem;
  }

  .pet-companion {
    width: 235px;
    height: 260px;
    transform: scale(0.88);
  }

  .city-ai-pet {
    --city-ai-scale: 0.77;
    right: 2px;
    bottom: 72px;
  }

  .city-ai-message {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .login-theme-switcher {
    margin-bottom: 0.6rem;
    padding: 0.4rem;
    border-radius: 15px;
  }

  .login-theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
  }

  .login-theme-option {
    min-height: 58px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.18rem;
    text-align: center;
  }

  .login-theme-option > span:nth-of-type(2) {
    align-items: center;
  }

  .login-theme-option strong {
    font-size: 0.58rem;
    line-height: 1.15;
  }

  .login-stage {
    gap: 0.55rem;
    padding: 0.65rem;
    border-radius: 20px;
  }

  .login-visual {
    min-height: 275px;
  }

  .login-orbit-two {
    display: none;
  }

  .login-scene {
    grid-template-columns: minmax(0, 0.88fr) minmax(148px, 1.12fr);
    gap: 0.25rem;
    padding: 0.15rem;
  }

  .login-scene-wind {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-scene-wind .login-scene-copy,
  .login-scene-aurora .login-scene-copy {
    display: none;
  }

  .login-scene-aurora {
    grid-template-columns: minmax(0, 1fr);
  }

  .login-scene-city {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .wind-curtain-world,
  .aurora-network {
    align-self: center;
    justify-self: stretch;
    width: 100%;
    height: 245px;
    border-radius: 18px;
  }

  .city-command-deck {
    align-self: end;
    justify-self: stretch;
    width: 100%;
  }

  .city-ai-pet {
    --city-ai-scale: 0.7;
    right: 3px;
    bottom: 68px;
  }

  .login-experience[data-login-theme="city"] .login-stage {
    background-position: 34% center;
  }

  .login-scene-kicker {
    margin-bottom: 0.4rem;
    font-size: 0.46rem;
    letter-spacing: 0.08em;
  }

  .login-scene-copy h2 {
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
    letter-spacing: -0.045em;
  }

  .cockpit-console,
  .curtain-portal {
    height: 190px;
    border-radius: 18px;
  }

  .cockpit-console {
    transform: perspective(800px) rotateY(-3deg);
  }

  .cockpit-console-top strong {
    display: none;
  }

  .curtain-panel-left {
    border-radius: 17px 0 0 17px;
  }

  .curtain-panel-right {
    border-radius: 0 17px 17px 0;
  }

  .curtain-cloud-mark small {
    display: none;
  }

  .pet-dialogue {
    min-height: 42px;
    padding: 0.55rem;
    font-size: 0.55rem;
  }

  .pet-dialogue::before {
    display: none;
  }

  .pet-companion {
    width: 205px;
    height: 240px;
    transform: scale(0.78);
  }

  .login-experience .login-shell::before {
    inset: -7px;
    border-radius: 25px;
  }

  .login-experience .wechat-first-card {
    border-radius: 19px;
  }

  .login-experience .wechat-first-card .card-body {
    padding: 1.1rem !important;
  }
}

@media (max-width: 379.98px) {
  .login-visual {
    min-height: 238px;
  }

  .login-scene-copy h2 {
    font-size: 1.15rem;
  }

  .login-scene-kicker,
  .pet-dialogue {
    display: none;
  }

  .cockpit-console,
  .curtain-portal {
    height: 170px;
  }

  .wind-curtain-world {
    height: 208px;
  }

  .aurora-network {
    height: 208px;
  }

  .aurora-network-caption {
    display: none;
  }

  .city-ai-pet {
    --city-ai-scale: 0.62;
    right: 1px;
    bottom: 61px;
  }

  .wind-cloud-destination small,
  .wind-drag-hint small {
    display: none;
  }

  .pet-companion {
    margin-left: -20px;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-experience *,
  .login-experience *::before,
  .login-experience *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .login-scene,
  .pet-companion,
  .wind-curtain-world,
  .aurora-network,
  .city-command-deck,
  .login-experience .login-shell::before {
    transform: none !important;
  }

  .city-ai-pet {
    transform: scale(var(--city-ai-scale)) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .aurora-pointer-wave,
  .aurora-network-caption {
    display: none;
  }
}

/* Purchase room experience previews */
.market-room-panel[data-room-view] {
  --active-room-hue: 236;
  padding: 0.78rem;
  border-color: #dedff0;
  background:
    radial-gradient(circle at 0% 0%, rgba(22, 133, 154, 0.08), transparent 24%),
    linear-gradient(155deg, #ffffff 0%, #f8fafc 100%);
}

.room-view-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(440px, 2fr) minmax(176px, 0.65fr);
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.62rem;
}

.room-view-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.08rem;
}

.room-view-heading > span {
  color: #2b8495;
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.room-view-heading > strong {
  color: #202939;
  font-size: 0.82rem;
  font-weight: 820;
}

.room-view-heading > small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-view-switcher {
  display: grid;
  min-width: 0;
  padding: 0.26rem;
  border: 1px solid #e4e5ee;
  border-radius: 14px;
  background: #f6f7fb;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.room-view-switcher button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.48rem 0.4rem;
  color: #697386;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.room-view-switcher button:hover {
  color: #4940c9;
  background: rgba(255, 255, 255, 0.78);
}

.room-view-switcher button:active {
  transform: scale(0.98);
}

.room-view-switcher button.active {
  color: #4c43cf;
  background: #fff;
  box-shadow:
    0 5px 14px rgba(38, 44, 63, 0.08),
    inset 0 0 0 1px rgba(22, 133, 154, 0.12);
}

.room-view-switcher svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.room-view-switcher button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  text-align: left;
}

.room-view-switcher strong {
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-view-switcher small {
  overflow: hidden;
  color: #a0a7b4;
  font-size: 0.51rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-view-switcher .active small {
  color: #817af0;
}

.room-quick-select {
  position: relative;
  display: flex;
  min-width: 0;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  padding: 0.34rem 2rem 0.34rem 0.7rem;
  border: 1px solid #e1e4eb;
  border-radius: 12px;
  background: #fff;
}

.room-quick-select > span {
  color: #98a2b3;
  font-size: 0.5rem;
  font-weight: 700;
}

.room-quick-select select {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #344054;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.64rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

.room-quick-select > svg {
  position: absolute;
  top: 50%;
  right: 0.68rem;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #3995a5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

.market-room-panel[data-room-view] .market-room-carousel-toolbar {
  min-height: 42px;
  margin-bottom: 0.52rem;
  padding: 0.1rem 0.16rem 0;
  border-top: 1px solid #eef0f4;
}

.market-room-panel[data-room-view] .market-room-carousel-hint strong {
  font-size: 0.74rem;
}

.market-room-panel[data-room-view] .market-room-carousel-hint small {
  font-size: 0.59rem;
}

.market-room-panel[data-room-view] .market-room-carousel-frame {
  height: 340px;
  min-height: 340px;
  border-radius: 20px;
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.market-room-panel[data-room-view] .market-room-carousel-frame::before,
.market-room-panel[data-room-view] .market-room-carousel-frame::after {
  z-index: 1;
}

.market-room-panel[data-room-view] .market-room-tabs {
  z-index: 4;
  height: 340px;
  perspective: 1050px;
}

.room-experience-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.room-map-landmass,
.room-orbit-system,
.room-portal-reactor,
.room-cloudscape {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.room-scene-status {
  position: absolute;
  z-index: 3;
  bottom: 0.85rem;
  left: 1rem;
  display: flex;
  max-width: 220px;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 25px rgba(31, 40, 61, 0.08);
  backdrop-filter: blur(12px);
  pointer-events: none;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

.room-scene-status > span {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.room-scene-status > span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16b37a;
  box-shadow: 0 0 0 4px rgba(22, 179, 122, 0.13);
}

.room-scene-status em {
  color: #3995a5;
  font-size: 0.49rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.room-scene-status strong {
  overflow: hidden;
  color: #202939;
  font-size: 0.8rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-scene-status small {
  overflow: hidden;
  color: #697386;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-scene-status small b {
  color: #11845d;
  font-size: 0.67rem;
}

.market-room-panel[data-room-view] .market-room-card-identity strong {
  font-size: 1rem;
}

.market-room-panel[data-room-view] .market-room-card-identity em {
  font-size: 0.7rem;
}

.market-room-panel[data-room-view] .market-room-card-description > b {
  font-size: 0.62rem;
}

.market-room-panel[data-room-view] .market-room-card-description > small {
  font-size: 0.71rem;
}

.market-room-panel[data-room-view] .market-room-card-footer {
  font-size: 0.65rem;
}

.market-room-panel[data-room-view] .market-room-card-footer > span b {
  font-size: 0.82rem;
}

.market-room-panel[data-room-view] .market-room-card-footer > em {
  font-size: 0.65rem;
}

/* Holographic nationwide node map */
.market-room-panel[data-room-view="map"] .market-room-carousel-frame {
  border-color: #d7e0f2;
  background:
    linear-gradient(rgba(114, 120, 215, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 120, 215, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 22% 24%, rgba(77, 216, 196, 0.2), transparent 26%),
    radial-gradient(circle at 76% 35%, rgba(22, 133, 154, 0.18), transparent 32%),
    linear-gradient(145deg, #f9fcff 0%, #f1f5ff 50%, #f8f6ff 100%);
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -45px 80px rgba(88, 82, 208, 0.07);
}

.market-room-panel[data-room-view="map"] .market-room-carousel-frame::before {
  background:
    linear-gradient(90deg, transparent 59%, rgba(91, 85, 213, 0.14) 59.2%, transparent 59.4%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 72%);
}

.market-room-panel[data-room-view="map"] .market-room-carousel-frame::after {
  right: 37%;
  bottom: -24px;
  left: 2%;
  height: 64px;
  background: radial-gradient(ellipse, rgba(77, 216, 196, 0.15), transparent 68%);
  filter: blur(9px);
}

.market-room-panel[data-room-view="map"] .room-map-landmass {
  opacity: 1;
  transform: scale(1);
}

.room-map-landmass::before {
  position: absolute;
  top: 10%;
  bottom: 12%;
  left: 4%;
  width: 54%;
  border: 1px solid rgba(86, 105, 218, 0.2);
  background:
    radial-gradient(circle at 70% 33%, rgba(77, 216, 196, 0.23), transparent 14%),
    radial-gradient(circle at 34% 62%, rgba(22, 133, 154, 0.2), transparent 15%),
    linear-gradient(135deg, rgba(22, 133, 154, 0.1), rgba(78, 206, 196, 0.08));
  box-shadow:
    inset 0 0 42px rgba(22, 133, 154, 0.1),
    0 18px 35px rgba(62, 82, 143, 0.08);
  clip-path: polygon(
    6% 29%, 18% 17%, 34% 19%, 43% 8%, 57% 16%, 69% 14%, 79% 24%,
    93% 29%, 88% 41%, 98% 51%, 88% 61%, 77% 61%, 71% 77%, 56% 72%,
    48% 88%, 35% 78%, 22% 82%, 18% 67%, 7% 62%, 13% 48%, 2% 40%
  );
  content: "";
}

.room-map-landmass::after {
  position: absolute;
  top: 7%;
  bottom: 9%;
  left: 2%;
  width: 58%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(91, 230, 207, 0.12) 47%,
    rgba(91, 230, 207, 0.48) 50%,
    rgba(91, 230, 207, 0.12) 53%,
    transparent 100%);
  content: "";
  animation: room-map-scan 4.8s ease-in-out infinite;
}

.room-map-grid {
  position: absolute;
  top: 12%;
  bottom: 13%;
  left: 5%;
  width: 53%;
  opacity: 0.33;
  background:
    linear-gradient(35deg, transparent 49.5%, rgba(90, 103, 209, 0.22) 50%, transparent 50.5%),
    linear-gradient(-35deg, transparent 49.5%, rgba(90, 103, 209, 0.18) 50%, transparent 50.5%);
  background-size: 42px 36px;
  clip-path: polygon(
    6% 29%, 18% 17%, 34% 19%, 43% 8%, 57% 16%, 69% 14%, 79% 24%,
    93% 29%, 88% 41%, 98% 51%, 88% 61%, 77% 61%, 71% 77%, 56% 72%,
    48% 88%, 35% 78%, 22% 82%, 18% 67%, 7% 62%, 13% 48%, 2% 40%
  );
}

.room-map-landmass > i {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #5d55e3;
  box-shadow:
    0 0 0 5px rgba(93, 85, 227, 0.12),
    0 0 20px rgba(93, 85, 227, 0.6);
  animation: room-node-pulse 2.5s ease-out infinite;
}

.room-map-landmass > i:nth-of-type(1) { top: 25%; left: 18%; }
.room-map-landmass > i:nth-of-type(2) { top: 21%; left: 40%; animation-delay: -0.6s; }
.room-map-landmass > i:nth-of-type(3) { top: 47%; left: 31%; animation-delay: -1.2s; }
.room-map-landmass > i:nth-of-type(4) { top: 61%; left: 48%; animation-delay: -1.8s; }
.room-map-landmass > i:nth-of-type(5) { top: 73%; left: 23%; animation-delay: -2.1s; }

.market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="map-node"] {
  top: var(--map-y);
  left: var(--map-x);
  width: clamp(106px, 10vw, 132px);
  min-width: 0;
  height: 38px;
  padding: 0.34rem 0.45rem;
  overflow: visible;
  color: #4d47c7;
  border: 1px solid rgba(98, 90, 225, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 7px 16px rgba(52, 65, 114, 0.1),
    0 0 0 4px hsla(var(--room-hue), 80%, 60%, 0.08);
  opacity: 0.94;
  filter: none;
  transform: translate3d(-50%, -50%, 0) scale(0.97);
  backdrop-filter: blur(10px);
}

.market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="map-node"]:hover {
  z-index: 45;
  border-color: #817af0;
  box-shadow:
    0 10px 22px rgba(52, 65, 114, 0.14),
    0 0 0 7px rgba(22, 133, 154, 0.1);
  transform: translate3d(-50%, -50%, 0) scale(1.06);
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"]::before {
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: hsl(var(--room-hue), 70%, 54%);
  box-shadow:
    0 0 0 4px hsla(var(--room-hue), 80%, 58%, 0.18),
    0 0 15px hsla(var(--room-hue), 80%, 54%, 0.6);
  opacity: 1;
  transform: translateY(-50%);
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"]::after {
  inset: -6px;
  border: 1px solid hsla(var(--room-hue), 75%, 56%, 0.16);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  animation: room-node-ring 2.8s ease-out infinite;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-header {
  gap: 0.35rem;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-icon {
  width: 25px;
  height: 25px;
  color: #6058db;
  border: 0;
  border-radius: 50%;
  background: #efefff;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-icon svg {
  width: 13px;
  height: 13px;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-identity {
  gap: 0;
  padding: 0;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-identity strong {
  color: #34305e;
  font-size: 0.65rem;
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-identity em,
.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-description,
.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-footer,
.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .room-selected-mark {
  display: none;
}

.market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="center"] {
  top: 50%;
  left: 78%;
  width: clamp(310px, 31vw, 360px);
  min-width: 310px;
  height: 232px;
  padding: 0.94rem;
  border-color: rgba(22, 133, 154, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, hsla(var(--active-room-hue), 88%, 63%, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.93);
  box-shadow:
    0 28px 60px -24px rgba(50, 51, 113, 0.34),
    0 10px 25px rgba(36, 50, 79, 0.1),
    inset 0 1px 0 #fff;
  filter: none;
  transform: translate3d(-50%, -50%, 55px) rotateY(-2deg);
  backdrop-filter: blur(18px);
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="center"]::before {
  top: -30%;
  left: -30%;
  width: 55%;
  height: 170%;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, 0.8) 48%, transparent 76%);
  opacity: 0.58;
  transform: rotate(14deg);
}

.market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="center"]::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(315deg, hsla(var(--active-room-hue), 75%, 56%, 0.08), transparent 42%);
}

/* 3D orbital room cockpit */
.market-room-panel[data-room-view="orbit"] .market-room-carousel-frame {
  border-color: #242f5e;
  background:
    linear-gradient(rgba(116, 153, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 153, 255, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 43%, rgba(111, 91, 255, 0.32), transparent 27%),
    radial-gradient(circle at 50% 120%, rgba(45, 217, 211, 0.25), transparent 44%),
    linear-gradient(160deg, #0d1536 0%, #111940 48%, #071127 100%);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -60px 100px rgba(1, 6, 25, 0.5);
}

.market-room-panel[data-room-view="orbit"] .market-room-carousel-frame::before {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(134, 121, 255, 0.16), transparent 39%),
    linear-gradient(90deg, transparent 49.8%, rgba(115, 227, 231, 0.2) 50%, transparent 50.2%);
}

.market-room-panel[data-room-view="orbit"] .market-room-carousel-frame::after {
  right: 14%;
  bottom: -38px;
  left: 14%;
  height: 105px;
  border-color: rgba(88, 239, 231, 0.18);
  background: radial-gradient(ellipse, rgba(77, 232, 221, 0.3), rgba(22, 133, 154, 0.13) 36%, transparent 70%);
  filter: blur(8px);
}

.market-room-panel[data-room-view="orbit"] .room-orbit-system {
  opacity: 1;
  transform: scale(1);
}

.room-orbit-system > i {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(104, 229, 230, 0.25);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.room-orbit-system > i:nth-child(1) {
  width: 70%;
  height: 58%;
  animation: room-orbit-spin 15s linear infinite;
}

.room-orbit-system > i:nth-child(2) {
  width: 52%;
  height: 76%;
  border-color: rgba(141, 121, 255, 0.22);
  animation: room-orbit-spin-reverse 19s linear infinite;
}

.room-orbit-system > i:nth-child(3) {
  width: 37%;
  height: 42%;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  animation: room-orbit-spin 11s linear infinite;
}

.room-orbit-system > span {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(113, 238, 231, 0.5), transparent);
  box-shadow: 0 0 24px rgba(113, 238, 231, 0.4);
}

.market-room-panel[data-room-view="orbit"] .room-scene-status,
.market-room-panel[data-room-view="portal"] .room-scene-status {
  color: #fff;
  border-color: rgba(142, 189, 255, 0.2);
  background: rgba(9, 18, 48, 0.64);
  box-shadow: 0 12px 32px rgba(0, 3, 16, 0.24);
}

.market-room-panel[data-room-view="orbit"] .room-scene-status em,
.market-room-panel[data-room-view="portal"] .room-scene-status em {
  color: #77e7df;
}

.market-room-panel[data-room-view="orbit"] .room-scene-status strong,
.market-room-panel[data-room-view="portal"] .room-scene-status strong {
  color: #fff;
}

.market-room-panel[data-room-view="orbit"] .room-scene-status small,
.market-room-panel[data-room-view="portal"] .room-scene-status small {
  color: #aab8d7;
}

.market-room-panel[data-room-view="orbit"] .room-scene-status small b,
.market-room-panel[data-room-view="portal"] .room-scene-status small b {
  color: #76e5cc;
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option {
  top: 47px;
  width: clamp(320px, 32vw, 370px);
  min-width: 320px;
  height: 232px;
  padding: 0.92rem;
  color: #dce5ff;
  border-color: rgba(133, 159, 235, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, hsla(var(--room-hue), 90%, 65%, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(28, 42, 91, 0.9), rgba(13, 25, 60, 0.92));
  box-shadow:
    0 30px 64px -28px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(15px);
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 29%),
    linear-gradient(315deg, hsla(var(--room-hue), 90%, 66%, 0.13), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option.active {
  border-color: rgba(106, 235, 225, 0.68);
  background:
    radial-gradient(circle at 13% 0%, hsla(var(--room-hue), 92%, 67%, 0.32), transparent 35%),
    linear-gradient(145deg, rgba(38, 52, 113, 0.96), rgba(15, 27, 67, 0.96));
  box-shadow:
    0 35px 75px -25px rgba(0, 0, 0, 0.82),
    0 0 34px rgba(85, 226, 219, 0.18),
    inset 0 0 0 1px rgba(136, 242, 235, 0.14);
}

.market-room-panel[data-room-view="orbit"] .market-room-card-icon,
.market-room-panel[data-room-view="portal"] .market-room-card-icon {
  color: #7be8e0;
  border-color: rgba(123, 232, 224, 0.22);
  background: rgba(82, 209, 204, 0.08);
}

.market-room-panel[data-room-view="orbit"] .market-room-card-identity strong,
.market-room-panel[data-room-view="portal"] .market-room-card-identity strong {
  color: #fff;
}

.market-room-panel[data-room-view="orbit"] .market-room-card-identity em,
.market-room-panel[data-room-view="portal"] .market-room-card-identity em {
  color: #b8c6e5;
}

.market-room-panel[data-room-view="orbit"] .market-room-card-description,
.market-room-panel[data-room-view="portal"] .market-room-card-description {
  border-color: rgba(139, 159, 219, 0.15);
  background: rgba(3, 11, 35, 0.22);
}

.market-room-panel[data-room-view="orbit"] .market-room-card-description > b,
.market-room-panel[data-room-view="portal"] .market-room-card-description > b {
  color: #8eeae2;
}

.market-room-panel[data-room-view="orbit"] .market-room-card-description > small,
.market-room-panel[data-room-view="portal"] .market-room-card-description > small {
  color: #d1dcf3;
}

.market-room-panel[data-room-view="orbit"] .market-room-card-footer,
.market-room-panel[data-room-view="portal"] .market-room-card-footer {
  color: #acb9d7;
  border-top-color: rgba(145, 162, 216, 0.16);
}

.market-room-panel[data-room-view="orbit"] .market-room-card-footer > span b,
.market-room-panel[data-room-view="portal"] .market-room-card-footer > span b,
.market-room-panel[data-room-view="orbit"] .market-room-card-footer > em,
.market-room-panel[data-room-view="portal"] .market-room-card-footer > em {
  color: #79e3dc;
}

.market-room-panel[data-room-view="orbit"] .market-room-capacity > span + span,
.market-room-panel[data-room-view="portal"] .market-room-capacity > span + span {
  border-left-color: rgba(151, 167, 216, 0.18);
}

.market-room-panel[data-room-view="orbit"] .room-selected-mark,
.market-room-panel[data-room-view="portal"] .room-selected-mark {
  background: linear-gradient(135deg, #625bff, #27bdb6);
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option.active .market-room-card-description,
.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option.active .market-room-card-description {
  border-color: rgba(139, 159, 219, 0.2);
  background: rgba(4, 12, 38, 0.34);
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option.active .market-room-card-description > b,
.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option.active .market-room-card-description > b {
  color: #8eeae2;
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option.active .market-room-card-description > small,
.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option.active .market-room-card-description > small {
  color: #e3eaff;
}

.market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option.active .market-room-card-footer > em,
.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option.active .market-room-card-footer > em {
  color: #79e3dc;
}

/* Energy portal selector */
.market-room-panel[data-room-view="portal"] .market-room-carousel-frame {
  border-color: #343064;
  background:
    radial-gradient(circle at 50% 38%, rgba(143, 77, 255, 0.38), transparent 28%),
    radial-gradient(circle at 12% 72%, rgba(42, 220, 217, 0.18), transparent 30%),
    radial-gradient(circle at 88% 68%, rgba(255, 92, 202, 0.15), transparent 29%),
    linear-gradient(145deg, #130d31 0%, #22134e 52%, #0a1631 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -90px 120px rgba(0, 2, 22, 0.5);
}

.market-room-panel[data-room-view="portal"] .market-room-carousel-frame::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(177, 131, 255, 0.045) 65px),
    linear-gradient(180deg, transparent 55%, rgba(120, 81, 236, 0.09));
}

.market-room-panel[data-room-view="portal"] .market-room-carousel-frame::after {
  right: 17%;
  bottom: -42px;
  left: 17%;
  height: 110px;
  border-color: rgba(173, 116, 255, 0.22);
  background: radial-gradient(ellipse, rgba(159, 91, 255, 0.4), rgba(53, 225, 213, 0.12) 42%, transparent 70%);
  filter: blur(9px);
}

.market-room-panel[data-room-view="portal"] .room-portal-reactor {
  opacity: 1;
  transform: scale(1);
}

.room-portal-reactor > i {
  position: absolute;
  top: 49%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.room-portal-reactor > i:nth-child(1) {
  width: 330px;
  height: 330px;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(127, 243, 232, 0.8),
    transparent 22%,
    rgba(178, 103, 255, 0.78),
    transparent 52%,
    rgba(255, 107, 207, 0.66),
    transparent 78%,
    rgba(127, 243, 232, 0.72));
  filter: blur(2px);
  mask: radial-gradient(circle, transparent 61%, #000 63% 66%, transparent 68%);
  animation: room-portal-spin 9s linear infinite;
}

.room-portal-reactor > i:nth-child(2) {
  width: 260px;
  height: 260px;
  border: 1px dashed rgba(182, 144, 255, 0.45);
  box-shadow:
    0 0 34px rgba(150, 87, 255, 0.38),
    inset 0 0 38px rgba(57, 229, 217, 0.13);
  animation: room-portal-spin-reverse 13s linear infinite;
}

.room-portal-reactor > span {
  position: absolute;
  top: 14%;
  bottom: 9%;
  left: 50%;
  width: 210px;
  border-radius: 50% 50% 20% 20%;
  background: radial-gradient(ellipse, rgba(196, 154, 255, 0.16), rgba(47, 225, 216, 0.06) 50%, transparent 70%);
  filter: blur(8px);
  transform: translateX(-50%);
  animation: room-portal-breathe 3.2s ease-in-out infinite;
}

.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option {
  top: 36px;
  width: clamp(300px, 29vw, 340px);
  min-width: 300px;
  height: 266px;
  padding: 3.1rem 0.9rem 0.8rem;
  overflow: hidden;
  color: #e8e4ff;
  border: 1px solid rgba(178, 132, 255, 0.34);
  border-radius: 150px 150px 24px 24px;
  background:
    radial-gradient(ellipse at 50% 10%, hsla(var(--room-hue), 93%, 65%, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(45, 29, 97, 0.92), rgba(14, 20, 52, 0.95));
  box-shadow:
    0 32px 70px -27px rgba(0, 0, 0, 0.82),
    inset 0 0 32px rgba(150, 97, 255, 0.13);
}

.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option::before {
  z-index: 0;
  top: 9px;
  left: 50%;
  width: calc(100% - 20px);
  height: calc(100% - 18px);
  border: 2px solid rgba(127, 239, 231, 0.42);
  border-radius: 140px 140px 18px 18px;
  background: transparent;
  box-shadow:
    0 0 15px rgba(91, 228, 220, 0.18),
    inset 0 0 22px rgba(139, 86, 255, 0.12);
  opacity: 1;
  transform: translateX(-50%);
}

.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 30%),
    radial-gradient(ellipse at 50% 0%, hsla(var(--room-hue), 90%, 66%, 0.19), transparent 56%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option.active {
  border-color: rgba(125, 239, 231, 0.62);
  background:
    radial-gradient(ellipse at 50% 6%, hsla(var(--active-room-hue), 96%, 68%, 0.42), transparent 46%),
    linear-gradient(180deg, rgba(60, 35, 122, 0.97), rgba(15, 23, 61, 0.98));
  box-shadow:
    0 38px 82px -26px rgba(0, 0, 0, 0.9),
    0 0 34px rgba(131, 97, 255, 0.3),
    inset 0 0 35px rgba(85, 229, 218, 0.14);
}

.market-room-panel[data-room-view="portal"] .server-room-option:not([data-room-slot="center"]) .market-room-card-description,
.market-room-panel[data-room-view="portal"] .server-room-option:not([data-room-slot="center"]) .market-room-card-footer {
  display: none;
}

.market-room-panel[data-room-view="portal"] .server-room-option:not([data-room-slot="center"]) .market-room-card-header {
  justify-content: center;
}

.market-room-panel[data-room-view="portal"] .server-room-option:not([data-room-slot="center"]) .market-room-card-identity {
  flex: 0 1 auto;
}

.market-room-panel[data-room-view="portal"] .server-room-option:not([data-room-slot="center"]) .market-room-card-identity em {
  justify-content: center;
}

.market-room-panel[data-room-view="portal"] .room-selected-mark {
  top: 1rem;
  right: 50%;
  transform: translate(50%, -3px) scale(0.82);
}

.market-room-panel[data-room-view="portal"] .server-room-option.active .room-selected-mark {
  transform: translate(50%, 0) scale(1);
}

/* Floating cloud city */
.market-room-panel[data-room-view="cloud"] .market-room-carousel-frame {
  border-color: #cfe2f2;
  background:
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.98), transparent 12%),
    linear-gradient(180deg, #bfe6fb 0%, #dff3ff 51%, #f7fbff 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -70px 95px rgba(255, 255, 255, 0.72);
}

.market-room-panel[data-room-view="cloud"] .market-room-carousel-frame::before {
  background:
    radial-gradient(ellipse at 50% 92%, rgba(255, 255, 255, 0.9), transparent 48%),
    linear-gradient(180deg, transparent, rgba(147, 206, 235, 0.08));
}

.market-room-panel[data-room-view="cloud"] .market-room-carousel-frame::after {
  right: 7%;
  bottom: -25px;
  left: 7%;
  height: 76px;
  border: 0;
  background: radial-gradient(ellipse, rgba(115, 179, 218, 0.18), transparent 66%);
  filter: blur(10px);
}

.market-room-panel[data-room-view="cloud"] .room-cloudscape {
  opacity: 1;
  transform: scale(1);
}

.room-cloudscape > i {
  position: absolute;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(1px);
  box-shadow:
    30px 2px 0 8px rgba(255, 255, 255, 0.58),
    68px 8px 0 -2px rgba(255, 255, 255, 0.62);
  animation: room-cloud-drift 16s ease-in-out infinite alternate;
}

.room-cloudscape > i:nth-child(1) {
  top: 22%;
  left: 5%;
  width: 90px;
}

.room-cloudscape > i:nth-child(2) {
  top: 12%;
  right: 10%;
  width: 76px;
  opacity: 0.72;
  animation-delay: -6s;
  animation-duration: 20s;
}

.room-cloudscape > i:nth-child(3) {
  right: 35%;
  bottom: 14%;
  width: 105px;
  opacity: 0.52;
  animation-delay: -10s;
  animation-duration: 23s;
}

.room-cloudscape > span {
  position: absolute;
  right: 6%;
  bottom: 0;
  left: 6%;
  height: 68px;
  opacity: 0.34;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      #6e94bb 4% 7%,
      transparent 7% 11%,
      #769bc0 11% 16%,
      transparent 16% 21%,
      #678db4 21% 25%,
      transparent 25% 31%,
      #759bbf 31% 37%,
      transparent 37% 44%,
      #6188b0 44% 49%,
      transparent 49% 55%,
      #7196bb 55% 60%,
      transparent 60% 66%,
      #668db4 66% 72%,
      transparent 72% 78%,
      #759bbf 78% 83%,
      transparent 83% 89%,
      #668bb1 89% 93%,
      transparent 93%);
  clip-path: polygon(0 100%, 0 62%, 5% 62%, 5% 18%, 7% 18%, 7% 74%, 12% 74%, 12% 42%, 16% 42%, 16% 66%, 22% 66%, 22% 25%, 25% 25%, 25% 71%, 32% 71%, 32% 38%, 37% 38%, 37% 69%, 45% 69%, 45% 12%, 49% 12%, 49% 64%, 56% 64%, 56% 34%, 60% 34%, 60% 72%, 67% 72%, 67% 20%, 72% 20%, 72% 68%, 79% 68%, 79% 43%, 83% 43%, 83% 73%, 90% 73%, 90% 29%, 93% 29%, 93% 67%, 100% 67%, 100% 100%);
}

.market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option {
  top: 48px;
  width: clamp(310px, 31vw, 356px);
  min-width: 310px;
  height: 226px;
  overflow: visible;
  padding: 0.92rem;
  border-color: rgba(126, 173, 209, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, hsla(var(--room-hue), 83%, 63%, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.86);
  box-shadow:
    0 28px 54px -24px rgba(54, 101, 135, 0.32),
    0 10px 24px rgba(75, 126, 162, 0.09),
    inset 0 1px 0 #fff;
  backdrop-filter: blur(15px);
}

.market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option::before {
  z-index: -1;
  top: auto;
  right: 9%;
  bottom: -27px;
  left: 9%;
  width: auto;
  height: 49px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 0%, #d9e5ed 0%, #aac5d7 45%, rgba(120, 162, 190, 0.1) 72%, transparent 74%);
  box-shadow: 0 17px 20px rgba(77, 126, 157, 0.12);
  opacity: 0.92;
  transform: none;
}

.market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option::after {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.85), transparent 30%),
    linear-gradient(315deg, rgba(74, 177, 213, 0.08), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

.market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option.active {
  border-color: rgba(76, 153, 208, 0.46);
  background:
    radial-gradient(circle at 12% 0%, hsla(var(--active-room-hue), 88%, 63%, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 36px 70px -28px rgba(48, 96, 132, 0.4),
    0 12px 28px rgba(75, 126, 162, 0.13),
    inset 0 1px 0 #fff;
}

.market-room-panel[data-room-view="cloud"] .market-room-card-icon {
  color: #3f82ba;
  border-color: #c8e0ef;
  background: #edf8fd;
}

.market-room-panel[data-room-view="cloud"] .room-scene-status {
  border-color: rgba(125, 178, 212, 0.24);
  background: rgba(255, 255, 255, 0.76);
}

.market-room-panel[data-room-view="cloud"] .room-scene-status em {
  color: #3281b7;
}

@keyframes room-map-scan {
  0%, 100% { transform: translateY(-45%); opacity: 0; }
  18% { opacity: 0.8; }
  82% { opacity: 0.8; }
  100% { transform: translateY(45%); opacity: 0; }
}

@keyframes room-node-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(93, 85, 227, 0.12), 0 0 20px rgba(93, 85, 227, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(93, 85, 227, 0), 0 0 28px rgba(93, 85, 227, 0.72); }
}

@keyframes room-node-ring {
  0% { opacity: 0.72; transform: scale(0.9); }
  75%, 100% { opacity: 0; transform: scale(1.18); }
}

@keyframes room-orbit-spin {
  from { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(0); }
  to { transform: translate(-50%, -50%) rotateX(67deg) rotateZ(360deg); }
}

@keyframes room-orbit-spin-reverse {
  from { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(360deg); }
  to { transform: translate(-50%, -50%) rotateY(68deg) rotateZ(0); }
}

@keyframes room-portal-spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes room-portal-spin-reverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0); }
}

@keyframes room-portal-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.95); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

@keyframes room-cloud-drift {
  from { transform: translateX(-18px) scale(0.92); }
  to { transform: translateX(24px) scale(1.06); }
}

@media (max-width: 1199.98px) {
  .room-view-toolbar {
    grid-template-columns: minmax(170px, 0.65fr) minmax(430px, 2fr);
  }

  .room-quick-select {
    grid-column: 1 / -1;
    height: 42px;
  }

  .market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="center"] {
    left: 76%;
    width: min(35vw, 350px);
  }
}

@media (max-width: 767.98px) {
  .room-view-toolbar {
    grid-template-columns: 1fr;
  }

  .room-view-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
  }

  .room-view-heading > small {
    grid-column: 1 / -1;
  }

  .room-quick-select {
    grid-column: auto;
  }

  .market-room-panel[data-room-view] .market-room-carousel-frame,
  .market-room-panel[data-room-view] .market-room-tabs {
    height: 316px;
    min-height: 316px;
  }

  .market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="center"] {
    left: 70%;
    width: min(43vw, 330px);
    min-width: 285px;
  }

  .market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="map-node"] {
    width: 106px;
  }

  .room-map-landmass::before,
  .room-map-grid {
    width: 58%;
  }

  .market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option,
  .market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option {
    top: 43px;
    height: 220px;
  }

  .market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option {
    top: 31px;
    height: 252px;
  }
}

@media (max-width: 575.98px) {
  .market-room-panel[data-room-view] {
    padding: 0.62rem;
  }

  .room-view-heading > small {
    display: none;
  }

  .room-view-switcher {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .room-view-switcher::-webkit-scrollbar {
    display: none;
  }

  .room-view-switcher button {
    min-width: 116px;
    flex: 0 0 116px;
    scroll-snap-align: start;
  }

  .room-view-switcher small {
    display: none;
  }

  .market-room-panel[data-room-view] .market-room-carousel-toolbar {
    min-height: 38px;
  }

  .market-room-panel[data-room-view] .market-room-carousel-hint > span {
    width: 29px;
    height: 29px;
  }

  .market-room-panel[data-room-view] .market-room-carousel-hint strong {
    font-size: 0.68rem;
  }

  .market-room-panel[data-room-view] .market-room-carousel-frame,
  .market-room-panel[data-room-view] .market-room-tabs {
    height: 288px;
    min-height: 288px;
  }

  .room-scene-status {
    display: none;
  }

  .market-room-panel[data-room-view="map"] .market-room-carousel-frame::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 72%);
  }

  .room-map-landmass::before {
    top: 6%;
    right: 2%;
    bottom: 5%;
    left: 2%;
    width: auto;
    opacity: 0.62;
  }

  .room-map-grid {
    top: 7%;
    right: 3%;
    bottom: 6%;
    left: 3%;
    width: auto;
  }

  .room-map-landmass::after {
    right: 0;
    left: 0;
    width: auto;
  }

  .market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="map-node"] {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
  }

  .market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-header {
    justify-content: center;
  }

  .market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-icon {
    width: 25px;
    height: 25px;
  }

  .market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"] .market-room-card-identity {
    display: none;
  }

  .market-room-panel[data-room-view="map"] .market-room-tabs .server-room-option[data-room-slot="center"] {
    top: 52%;
    left: 50%;
    width: calc(100% - 28px);
    min-width: 0;
    height: 218px;
    transform: translate3d(-50%, -50%, 45px);
  }

  .market-room-panel[data-room-view="map"] .room-map-landmass > i {
    opacity: 0.38;
  }

  .market-room-panel[data-room-view="orbit"] .market-room-tabs .server-room-option,
  .market-room-panel[data-room-view="cloud"] .market-room-tabs .server-room-option {
    top: 35px;
    width: min(86vw, 330px);
    min-width: min(86vw, 330px);
    height: 218px;
  }

  .market-room-panel[data-room-view="portal"] .market-room-tabs .server-room-option {
    top: 25px;
    width: min(82vw, 316px);
    min-width: min(82vw, 316px);
    height: 240px;
    padding-top: 2.75rem;
  }

  .room-portal-reactor > i:nth-child(1) {
    width: 270px;
    height: 270px;
  }

  .room-portal-reactor > i:nth-child(2) {
    width: 215px;
    height: 215px;
  }

  .market-room-panel[data-room-view] .market-room-card-identity strong {
    font-size: 0.86rem;
  }

  .market-room-panel[data-room-view] .market-room-card-description > small {
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-map-landmass::after,
  .room-map-landmass > i,
  .market-room-panel[data-room-view="map"] .server-room-option[data-room-slot="map-node"]::after,
  .room-orbit-system > i,
  .room-portal-reactor > i,
  .room-portal-reactor > span,
  .room-cloudscape > i {
    animation: none !important;
  }

  .room-map-landmass,
  .room-orbit-system,
  .room-portal-reactor,
  .room-cloudscape,
  .market-room-panel[data-room-view] .market-room-carousel-frame,
  .room-view-switcher button {
    transition: none !important;
  }
}

/* Machine list · management console liquid-glass cards */
.machine-table-wrap:has(.machine-table-rows) {
  background:
    radial-gradient(circle at 94% 0%, rgba(22, 133, 154, 0.09), transparent 27%),
    radial-gradient(circle at 4% 45%, rgba(29, 191, 158, 0.055), transparent 24%),
    linear-gradient(155deg, #f8fbfb 0%, #f3f5f9 100%);
  scrollbar-color: rgba(22, 133, 154, 0.25) transparent;
}

.machine-table-rows {
  --machine-card-columns:
    minmax(245px, 1.12fr)
    minmax(180px, 0.88fr)
    minmax(118px, 0.55fr)
    minmax(180px, 0.82fr)
    minmax(110px, 0.52fr)
    minmax(270px, 1.18fr);
  display: block;
  min-width: 1180px;
  padding: 0;
  border: 0;
  background: transparent;
}

.machine-table-rows colgroup {
  display: none;
}

.machine-table-rows thead,
.machine-table-rows tbody {
  display: block;
}

.machine-table-rows thead {
  position: sticky;
  z-index: 14;
  top: 0;
  padding: 0 0.78rem;
  background: rgba(246, 248, 251, 0.92);
  box-shadow: 0 7px 18px rgba(23, 38, 67, 0.055);
  backdrop-filter: blur(16px) saturate(1.2);
}

.machine-table-rows thead tr,
.machine-table-rows tbody tr {
  display: grid;
  grid-template-columns: var(--machine-card-columns);
}

.machine-table-rows thead th {
  position: static;
  display: flex;
  min-width: 0;
  height: 43px;
  align-items: center;
  padding: 0 0.62rem;
  color: #778196;
  border: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 rgba(213, 219, 229, 0.86);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.045em;
  text-align: left;
}

.machine-table-rows thead th:nth-child(3),
.machine-table-rows thead th:nth-child(5) {
  justify-content: flex-start;
  text-align: left;
}

.machine-table-rows tbody {
  display: grid;
  gap: 10px;
  padding: 0.75rem 0.78rem 0.9rem;
}

.machine-table-rows tbody tr {
  position: relative;
  z-index: 0;
  min-height: 108px;
  isolation: isolate;
  overflow: hidden;
  color: #263143;
  border: 1px solid rgba(213, 220, 231, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 7px 18px rgba(23, 38, 67, 0.085);
  filter: none;
  transform: translateY(0);
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.machine-table-rows tbody tr::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 5% -12%, rgba(255, 255, 255, 0.98), transparent 31%),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.62),
      transparent 34% 73%,
      rgba(22, 133, 154, 0.065));
  content: "";
  pointer-events: none;
}

.machine-table-rows tbody tr::after {
  position: absolute;
  z-index: 1;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: #16859a;
  box-shadow: 0 0 16px rgba(22, 133, 154, 0.34);
  content: "";
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.machine-table-rows tbody td,
.machine-table-rows tbody td:first-child,
.machine-table-rows tbody td:last-child {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  padding: 0.72rem 0.58rem;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.machine-table-rows tbody td:first-child {
  padding-left: 0.82rem;
}

.machine-table-rows tbody td:last-child {
  padding-right: 0.82rem;
}

.machine-table-rows tbody tr:hover td,
.machine-table-rows tbody tr.row-selected td {
  border: 0;
  background: transparent;
}

@media (hover: hover) {
  .machine-table-rows tbody tr:hover {
    z-index: 3;
    border-color: #cbc8ff;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      inset 0 1px 0 #fff,
      0 13px 29px rgba(15, 102, 120, 0.13);
    filter: none;
    transform: translateY(-2px);
  }
}

.machine-table-rows tbody tr.row-selected {
  border-color: #a9d4da;
  background:
    linear-gradient(135deg, rgba(243, 241, 255, 0.96), rgba(251, 251, 255, 0.92));
  box-shadow:
    inset 3px 0 0 #16859a,
    inset 0 1px 0 #fff,
    0 13px 30px rgba(22, 133, 154, 0.16);
  filter: none;
}

.machine-table-rows tbody tr.row-selected::after {
  opacity: 1;
  transform: scaleY(1);
}

.machine-table-rows tbody tr.dropdown-active {
  z-index: 4;
  filter: none;
  transform: none;
}

.machine-primary {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 17px 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
}

.machine-card-symbol {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #16859a;
  border: 1px solid rgba(191, 187, 255, 0.64);
  border-radius: 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 236, 255, 0.78)),
    #f2f1ff;
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(22, 133, 154, 0.13);
}

.machine-card-symbol::after {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.1);
  content: "";
}

.machine-card-row.is-offline .machine-card-symbol {
  color: #7b8494;
  border-color: #dce1e8;
  background: linear-gradient(145deg, #fff, #f1f3f6);
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 14px rgba(36, 50, 74, 0.08);
}

.machine-card-row.is-offline .machine-card-symbol::after {
  background: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.09);
}

.machine-card-symbol svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.machine-primary-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.23rem;
}

.machine-primary-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.42rem;
}

.machine-primary .status-badge {
  min-width: 49px;
  flex: 0 0 auto;
  justify-content: center;
  padding: 0.25rem 0.36rem;
  font-size: 0.59rem;
}

.machine-table-rows .machine-number {
  min-width: 0;
  overflow: hidden;
  color: #202939;
  font-size: 0.82rem;
  font-weight: 790;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-primary-copy > small {
  overflow: hidden;
  color: #98a2b3;
  font-size: 0.57rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-card-stat,
.machine-card-field,
.machine-card-actions-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.55rem 0.62rem;
  border: 1px solid rgba(222, 227, 235, 0.82);
  border-radius: 12px;
  background: rgba(246, 248, 251, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.machine-card-stat > small,
.machine-card-field > small,
.machine-card-actions-wrap > small {
  overflow: hidden;
  color: #929bad;
  font-size: 0.53rem;
  font-weight: 720;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-card-stat-configuration {
  background:
    radial-gradient(circle at 0% 0%, rgba(22, 133, 154, 0.09), transparent 48%),
    rgba(246, 248, 251, 0.7);
}

.machine-table-rows .machine-configuration {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #303a4d;
  font-size: 0.7rem;
  font-weight: 680;
  line-height: 1.38;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.machine-card-stat-remaining {
  background:
    radial-gradient(circle at 0% 0%, rgba(18, 183, 106, 0.09), transparent 52%),
    rgba(246, 249, 248, 0.76);
}

.machine-card-stat-remaining.is-expired {
  border-color: #f6d3cf;
  background:
    radial-gradient(circle at 0% 0%, rgba(240, 68, 56, 0.1), transparent 52%),
    rgba(255, 248, 247, 0.8);
}

.machine-card-stat-remaining .remaining-time {
  gap: 0;
}

.machine-card-stat-remaining .remaining-time strong {
  justify-content: flex-start;
  color: #157258;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.machine-card-stat-remaining.is-expired .remaining-time strong {
  color: #d92d20;
}

.machine-card-field .local-remark {
  min-width: 0;
  min-height: 31px;
  padding: 0 0.45rem;
  border-color: rgba(218, 223, 232, 0.88);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.machine-card-field .local-remark:focus-within {
  border-color: #a9d4da;
  background: #fff;
}

.machine-card-field .local-remark-input {
  font-size: 0.68rem;
}

.machine-card-stat-room {
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.08), transparent 52%),
    rgba(246, 248, 251, 0.7);
}

.machine-table-rows .machine-card-stat-room .server-room-name {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: #344054;
  border: 0;
  background: transparent;
  font-size: 0.69rem;
  font-weight: 710;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-card-actions-wrap {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(244, 245, 251, 0.66));
}

.machine-card-actions-wrap .machine-actions {
  display: grid;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.34rem;
  grid-template-columns: minmax(62px, 0.9fr) minmax(50px, 0.7fr) minmax(88px, 1.2fr);
}

.machine-card-actions-wrap .machine-actions > .dropdown {
  min-width: 0;
}

.machine-card-actions-wrap .machine-connect-button,
.machine-card-actions-wrap .machine-renew-button,
.machine-card-actions-wrap .machine-more-button {
  width: 100%;
  height: 33px;
  min-width: 0;
  padding: 0 0.48rem;
  border-radius: 9px;
  font-size: 0.66rem;
}

.machine-card-actions-wrap .machine-connect-button {
  color: #3f4b60;
  border-color: #d6dce6;
  background: rgba(247, 249, 252, 0.92);
}

.machine-card-actions-wrap .machine-renew-button {
  color: #0f6678;
  border-color: #cfe4e7;
  background: rgba(244, 243, 255, 0.92);
}

.machine-card-actions-wrap .machine-more-button {
  color: #475467;
  border-color: #dfe3e8;
  background: rgba(255, 255, 255, 0.88);
}

.machine-table-rows tbody tr:focus-within {
  border-color: #bbb7ff;
}

@media (max-width: 1199.98px) {
  .machine-table-rows {
    --machine-card-columns:
      minmax(225px, 1.05fr)
      minmax(165px, 0.82fr)
      minmax(110px, 0.54fr)
      minmax(165px, 0.78fr)
      minmax(100px, 0.48fr)
      minmax(250px, 1.12fr);
    min-width: 1080px;
  }
}

@media (max-width: 991.98px) {
  .machine-table-wrap:has(.machine-table-rows) {
    overflow-x: hidden;
  }

  .machine-table-rows {
    width: 100%;
    min-width: 0;
  }

  .machine-table-rows thead {
    display: none;
  }

  .machine-table-rows tbody {
    gap: 12px;
    padding: 0.72rem;
  }

  .machine-table-rows tbody tr {
    display: grid;
    min-height: 0;
    padding: 0.38rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:last-child {
    padding: 0.36rem;
  }

  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:nth-child(4),
  .machine-table-rows tbody td:last-child {
    grid-column: 1 / -1;
  }

  .machine-primary {
    min-height: 54px;
    padding: 0 0.25rem;
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 62px;
  }

  .machine-card-actions-wrap .machine-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .machine-table-rows tbody {
    padding: 0.55rem;
  }

  .machine-table-rows tbody tr {
    grid-template-columns: 1fr;
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:nth-child(4),
  .machine-table-rows tbody td:last-child {
    grid-column: 1;
  }

  .machine-primary {
    grid-template-columns: 17px 38px minmax(0, 1fr);
  }

  .machine-card-symbol {
    width: 38px;
    height: 38px;
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 58px;
  }

  .machine-card-actions-wrap .machine-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Purchase page: clear, modern room selection */
.purchase-page-intro {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid #e4e8f1;
  border-radius: 20px;
  background:
    radial-gradient(circle at 84% -35%, rgba(69, 111, 239, 0.16), transparent 48%),
    linear-gradient(135deg, #ffffff 0%, #f7f9ff 58%, #f2f6ff 100%);
  box-shadow: 0 10px 32px rgba(30, 44, 78, 0.07);
}

.purchase-page-intro::after {
  position: absolute;
  top: -42px;
  right: 18%;
  width: 128px;
  height: 128px;
  border: 22px solid rgba(78, 118, 238, 0.055);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.purchase-intro-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.purchase-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.42rem;
  color: #4668c9;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.04em;
}

.purchase-intro-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4f73dc;
  box-shadow: 0 0 0 5px rgba(79, 115, 220, 0.11);
}

.purchase-intro-copy h1 {
  margin: 0;
  color: #182230;
  font-size: clamp(1.3rem, 2vw, 1.72rem);
  font-weight: 830;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

.purchase-intro-copy p {
  margin: 0.4rem 0 0;
  color: #667085;
  font-size: 0.82rem;
  line-height: 1.65;
}

.purchase-progress {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 410px;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.purchase-progress li {
  position: relative;
  display: flex;
  min-width: 122px;
  align-items: center;
  gap: 0.52rem;
}

.purchase-progress li:not(:last-child)::after {
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  margin: 0 0.7rem;
  background: #d9deea;
  content: "";
}

.purchase-progress li > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  color: #667085;
  border: 1px solid #dce1ea;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  font-size: 0.73rem;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(31, 47, 81, 0.04);
}

.purchase-progress li.active > span {
  color: #fff;
  border-color: #4f73dc;
  background: linear-gradient(145deg, #6687e7, #4165cf);
  box-shadow: 0 7px 16px rgba(65, 101, 207, 0.24);
}

.purchase-progress li > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.08rem;
}

.purchase-progress strong {
  color: #344054;
  font-size: 0.73rem;
  font-weight: 780;
  white-space: nowrap;
}

.purchase-progress small {
  color: #98a2b3;
  font-size: 0.62rem;
  white-space: nowrap;
}

.purchase-room-picker {
  margin-bottom: 1rem;
  padding: 1.15rem;
  border: 1px solid #e5e9f0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 34, 61, 0.055);
}

.purchase-room-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.purchase-section-title,
.purchase-catalog-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.72rem;
}

.purchase-room-title-line {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.purchase-room-total {
  display: inline-flex;
  height: 28px;
  align-items: center;
  gap: 0.18rem;
  padding: 0 0.62rem;
  color: #3f5fae;
  border: 1px solid #cbd8f8;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3f6ff, #eaf0ff);
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(68, 101, 190, 0.08);
}

.purchase-room-total b {
  margin: 0 0.08rem;
  color: #315cc9;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.purchase-section-title > span,
.purchase-catalog-title > span {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  place-items: center;
  color: #4569ce;
  border: 1px solid #d8e1fb;
  border-radius: 11px;
  background: #f0f4ff;
  font-size: 0.67rem;
  font-weight: 850;
}

.purchase-section-title h2,
.purchase-catalog-title h2 {
  margin: 0;
  color: #1d2939;
  font-size: 1rem;
  font-weight: 810;
  letter-spacing: -0.02em;
}

.purchase-section-title p,
.purchase-catalog-title p {
  margin: 0.16rem 0 0;
  color: #7b8493;
  font-size: 0.7rem;
}

.purchase-room-tools {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.purchase-room-select {
  position: relative;
  display: flex;
  height: 38px;
  min-width: 235px;
  align-items: center;
  gap: 0.5rem;
  padding: 0 2.2rem 0 0.72rem;
  border: 1px solid #dfe4ec;
  border-radius: 11px;
  background: #f9fafb;
}

.purchase-room-select > span {
  flex: 0 0 auto;
  color: #98a2b3;
  font-size: 0.64rem;
  font-weight: 700;
}

.purchase-room-select select {
  min-width: 0;
  flex: 1;
  padding: 0;
  color: #344054;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  font-size: 0.7rem;
  font-weight: 720;
  cursor: pointer;
}

.purchase-room-select svg {
  position: absolute;
  top: 50%;
  right: 0.72rem;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #667085;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
  transform: translateY(-50%);
}

.purchase-room-nav {
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.purchase-room-nav[hidden] {
  display: none;
}

.purchase-room-nav > span {
  min-width: 42px;
  color: #667085;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  text-align: center;
}

.purchase-room-nav button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #405fb9;
  border: 1px solid #dce3f2;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(31, 47, 81, 0.05);
  transition: 160ms ease;
}

.purchase-room-nav button:hover:not(:disabled) {
  color: #fff;
  border-color: #5275da;
  background: #5275da;
  transform: translateY(-1px);
}

.purchase-room-nav button:disabled {
  color: #b7bec9;
  border-color: #edf0f4;
  background: #f7f8fa;
  box-shadow: none;
  cursor: not-allowed;
}

.purchase-room-nav svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.purchase-room-track-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 -0.1rem;
}

.purchase-room-picker .purchase-room-track.market-room-tabs {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-width: 0;
  gap: 0.75rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.1rem 0.1rem 0.72rem;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: #cfd8ea #f2f4f8;
  scrollbar-width: thin;
  perspective: none;
  transform-style: flat;
  touch-action: pan-x;
  user-select: none;
}

.purchase-room-picker .purchase-room-track::-webkit-scrollbar {
  display: block;
  height: 5px;
}

.purchase-room-picker .purchase-room-track::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #f1f3f7;
}

.purchase-room-picker .purchase-room-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #ced7e8;
}

.purchase-room-picker .purchase-room-track .server-room-option {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
  display: flex;
  width: 268px;
  min-width: 268px;
  height: 174px;
  flex: 0 0 268px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: 0.88rem;
  opacity: 1;
  color: #475467;
  border: 1px solid #e3e8ef;
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98));
  box-shadow: 0 5px 16px rgba(24, 36, 61, 0.045);
  filter: none;
  scroll-snap-align: start;
  transform: none;
  transform-style: flat;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  will-change: auto;
}

.purchase-room-picker .purchase-room-track .server-room-option::before {
  position: absolute;
  z-index: 0;
  top: -38px;
  right: -38px;
  left: auto;
  width: 96px;
  height: 96px;
  border: 18px solid rgba(86, 119, 216, 0.045);
  border-radius: 50%;
  background: none;
  content: "";
  opacity: 1;
  transform: none;
}

.purchase-room-picker .purchase-room-track .server-room-option::after {
  display: none;
}

.purchase-room-picker .purchase-room-track .server-room-option:hover {
  z-index: 2;
  border-color: #bdcbea;
  background: #fff;
  box-shadow: 0 12px 26px rgba(38, 62, 119, 0.1);
  transform: translateY(-2px);
}

.purchase-room-picker .purchase-room-track .server-room-option.active {
  z-index: 2;
  color: #344054;
  border-color: #6f8fe5;
  background:
    radial-gradient(circle at 100% 0%, rgba(92, 128, 230, 0.13), transparent 42%),
    linear-gradient(145deg, #ffffff, #f3f7ff);
  box-shadow:
    0 12px 28px rgba(54, 86, 173, 0.14),
    inset 0 0 0 1px rgba(111, 143, 229, 0.14);
  transform: none;
}

.purchase-room-picker .purchase-room-track .server-room-option:focus-visible {
  outline: 3px solid rgba(79, 115, 220, 0.2);
  outline-offset: 2px;
}

.purchase-room-picker .purchase-room-track .server-room-option > * {
  position: relative;
  z-index: 1;
}

.purchase-room-card-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.purchase-room-region,
.purchase-room-selected {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.64rem;
  font-weight: 720;
}

.purchase-room-region {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-room-region svg,
.purchase-room-selected svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.purchase-room-selected {
  padding: 0.22rem 0.42rem;
  color: #fff;
  border-radius: 999px;
  background: #5275da;
  opacity: 0;
  transform: translateY(-2px);
  transition: 160ms ease;
}

.purchase-room-picker .server-room-option.active .purchase-room-selected {
  opacity: 1;
  transform: translateY(0);
}

.purchase-room-picker .server-room-option > .purchase-room-card-name {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  overflow: hidden;
  color: #182230;
  font-size: 0.98rem;
  font-weight: 820;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchase-room-machine-prefix {
  display: flex;
  width: 100%;
  margin-top: 0.38rem;
  align-items: center;
  gap: 0.32rem;
}

.purchase-room-machine-prefix small {
  color: #667085;
  font-size: 0.62rem;
  font-weight: 700;
}

.purchase-room-machine-prefix b {
  min-width: 27px;
  padding: 0.12rem 0.38rem;
  color: #3855a5;
  text-align: center;
  border: 1px solid #d5def5;
  border-radius: 6px;
  background: #edf3ff;
  font-size: 0.72rem;
  font-weight: 850;
}

.purchase-room-card-description {
  display: -webkit-box;
  width: 100%;
  min-height: 2.9em;
  margin-top: 0.32rem;
  overflow: hidden;
  color: #7a8494;
  font-size: 0.68rem;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.purchase-room-card-bottom {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.62rem;
  border-top: 1px solid #edf0f4;
}

.purchase-room-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.purchase-room-stock i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 11%, transparent);
}

.purchase-room-stock span {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 720;
}

.purchase-room-stock b {
  color: inherit;
  font-size: 0.84rem;
  font-weight: 850;
}

.purchase-room-stock.has-stock {
  color: #087a53;
}

.purchase-room-stock.sold-out {
  color: #c2413b;
}

.purchase-room-plans {
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 650;
}

.purchase-room-arrow {
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: #98a2b3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: 160ms ease;
}

.purchase-room-picker .server-room-option.active .purchase-room-arrow {
  stroke: #5275da;
  transform: translateX(2px);
}

.market-catalog-heading .purchase-catalog-title > div {
  min-width: 0;
}

@media (max-width: 1099.98px) {
  .purchase-page-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .purchase-progress {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .purchase-page-intro {
    padding: 1.1rem;
  }

  .purchase-intro-copy p {
    font-size: 0.75rem;
  }

  .purchase-progress {
    justify-content: space-between;
  }

  .purchase-progress li {
    min-width: 0;
  }

  .purchase-progress li:not(:last-child)::after {
    width: clamp(12px, 4vw, 28px);
    margin: 0 clamp(0.28rem, 1vw, 0.7rem);
  }

  .purchase-room-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .purchase-room-tools {
    justify-content: space-between;
  }

  .purchase-room-select {
    min-width: 0;
    flex: 1;
  }
}

@media (max-width: 575.98px) {
  .purchase-page-intro,
  .purchase-room-picker {
    border-radius: 16px;
  }

  .purchase-intro-copy h1 {
    font-size: 1.25rem;
  }

  .purchase-progress li > div {
    display: none;
  }

  .purchase-progress li {
    flex: 1;
  }

  .purchase-progress li:last-child {
    flex: 0 0 auto;
  }

  .purchase-progress li:not(:last-child)::after {
    width: auto;
    flex: 1;
    margin: 0 0.55rem;
  }

  .purchase-room-picker {
    padding: 0.85rem;
  }

  .purchase-room-title-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }

  .purchase-room-total {
    height: 27px;
  }

  .purchase-room-tools {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .purchase-room-select {
    flex: 1 1 100%;
  }

  .purchase-room-nav {
    width: 100%;
    justify-content: flex-end;
  }

  .purchase-room-picker .purchase-room-track .server-room-option {
    width: min(80vw, 268px);
    min-width: min(80vw, 268px);
    flex-basis: min(80vw, 268px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .machine-table-rows tbody tr,
  .machine-table-rows tbody tr::after {
    transition: none !important;
  }

  .machine-table-rows tbody tr:hover {
    transform: none;
  }
}

/* Machine list · iOS-inspired Liquid Glass redesign */
.machine-table-rows {
  --machine-glass-ink: #182230;
  --machine-glass-secondary: #475467;
  --machine-glass-muted: #667085;
  --machine-glass-violet: #278094;
}

.content-panel:has(.machine-table-rows) {
  background: rgba(255, 255, 255, 0.78);
}

.content-panel:has(.machine-table-rows) .machine-batch-bar {
  border-color: rgba(204, 215, 232, 0.56);
  background: rgba(250, 252, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.machine-table-wrap:has(.machine-table-rows) {
  isolation: isolate;
  border-top: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(ellipse 48% 42% at 3% 0%,
      rgba(131, 122, 255, 0.23), transparent 69%),
    radial-gradient(ellipse 42% 48% at 100% 18%,
      rgba(93, 189, 255, 0.2), transparent 71%),
    radial-gradient(ellipse 44% 40% at 17% 100%,
      rgba(77, 218, 178, 0.15), transparent 72%),
    radial-gradient(ellipse 38% 34% at 86% 92%,
      rgba(238, 142, 199, 0.1), transparent 72%),
    linear-gradient(145deg, #f4f6fc 0%, #ecf3fa 52%, #f5f9fc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(171, 188, 211, 0.12);
  scrollbar-color: rgba(98, 105, 207, 0.3) transparent;
}

.machine-table-rows thead {
  border-bottom: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(243, 247, 253, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 8px 24px rgba(43, 61, 94, 0.075);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.machine-table-rows thead th {
  color: #667085;
  box-shadow: inset 0 -1px 0 rgba(170, 184, 207, 0.18);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.025em;
}

.machine-table-rows tbody {
  gap: 13px;
  padding: 0.85rem 0.82rem 1rem;
}

.machine-table-rows tbody tr {
  --machine-state-rgb: 22, 166, 106;
  min-height: 112px;
  color: var(--machine-glass-ink);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.73),
      rgba(255, 255, 255, 0.43) 48%,
      rgba(244, 248, 255, 0.52)) padding-box,
    linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.99),
      rgba(188, 202, 232, 0.58) 44%,
      rgba(255, 255, 255, 0.77)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 1px 0 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(145, 161, 190, 0.1),
    0 10px 27px rgba(43, 59, 91, 0.095),
    0 2px 6px rgba(43, 59, 91, 0.045);
  -webkit-backdrop-filter: blur(18px) saturate(158%);
  backdrop-filter: blur(18px) saturate(158%);
  transition:
    transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 190ms ease,
    box-shadow 190ms ease;
}

.machine-table-rows tbody tr::before {
  z-index: 0;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse 38% 72% at -4% -12%,
      rgba(255, 255, 255, 0.96),
      transparent 72%),
    radial-gradient(
      ellipse 36% 82% at 104% 112%,
      rgba(115, 102, 255, 0.14),
      transparent 74%),
    linear-gradient(
      105deg,
      transparent 24%,
      rgba(255, 255, 255, 0.24) 43%,
      transparent 61%);
  opacity: 0.76;
  transform: translate3d(0, 0, 0);
  transition: opacity 190ms ease, transform 240ms ease;
}

.machine-table-rows tbody tr::after {
  z-index: 1;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(
    180deg,
    rgba(var(--machine-state-rgb), 0.72),
    rgb(var(--machine-state-rgb)));
  box-shadow: 0 0 16px rgba(var(--machine-state-rgb), 0.3);
  opacity: 0.7;
  transform: scaleY(0.64);
}

.machine-card-row.is-offline {
  --machine-state-rgb: 217, 74, 66;
  background:
    linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.7),
      rgba(248, 249, 252, 0.45) 52%,
      rgba(250, 247, 248, 0.5)) padding-box,
    linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.97),
      rgba(202, 208, 219, 0.56)) border-box;
}

.machine-card-row.is-offline::after {
  opacity: 0.5;
  box-shadow: 0 0 13px rgba(var(--machine-state-rgb), 0.2);
}

.machine-table-rows tbody tr.row-selected {
  --machine-state-rgb: 22, 133, 154;
  border-color: transparent;
  background:
    linear-gradient(
      138deg,
      rgba(252, 252, 255, 0.85),
      rgba(239, 239, 255, 0.58) 52%,
      rgba(238, 248, 255, 0.64)) padding-box,
    linear-gradient(
      135deg,
      #fff,
      rgba(126, 116, 247, 0.94) 46%,
      rgba(103, 187, 249, 0.74)) border-box;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 3px 0 0 #7067ee,
    0 17px 38px rgba(91, 82, 210, 0.19);
}

.machine-table-rows tbody tr.row-selected::after {
  background: linear-gradient(180deg, #958dff, #5d54df);
  box-shadow: 0 0 19px rgba(22, 133, 154, 0.44);
  opacity: 1;
  transform: scaleY(1);
}

.machine-table-rows tbody tr.dropdown-active {
  z-index: 5;
  transform: none;
}

.machine-table-rows tbody tr:focus-within {
  border-color: transparent;
  outline: 2px solid rgba(22, 133, 154, 0.34);
  outline-offset: 2px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 5px rgba(22, 133, 154, 0.09),
    0 14px 32px rgba(70, 76, 151, 0.13);
}

@media (hover: hover) {
  .machine-table-rows tbody tr:hover {
    z-index: 3;
    border-color: transparent;
    background:
      linear-gradient(
        138deg,
        rgba(255, 255, 255, 0.81),
        rgba(255, 255, 255, 0.52) 48%,
        rgba(246, 249, 255, 0.61)) padding-box,
      linear-gradient(
        138deg,
        #fff,
        rgba(151, 163, 244, 0.74) 48%,
        rgba(255, 255, 255, 0.9)) border-box;
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgba(130, 145, 178, 0.09),
      0 18px 40px rgba(70, 76, 151, 0.16),
      0 3px 9px rgba(43, 59, 91, 0.055);
    transform: translateY(-3px);
  }

  .machine-table-rows tbody tr:hover::before {
    opacity: 0.98;
    transform: translate3d(5px, -2px, 0);
  }

  .machine-table-rows tbody tr:hover::after {
    opacity: 1;
    transform: scaleY(1);
  }
}

.machine-table-rows tbody td,
.machine-table-rows tbody td:first-child,
.machine-table-rows tbody td:last-child {
  z-index: 2;
  padding: 0.7rem 0.56rem;
}

.machine-table-rows tbody td:first-child {
  padding-left: 0.85rem;
}

.machine-table-rows tbody td:last-child {
  padding-right: 0.85rem;
}

.machine-primary {
  grid-template-columns: 17px 44px minmax(0, 1fr);
  gap: 0.62rem;
}

.machine-card-symbol {
  width: 44px;
  height: 44px;
  color: #5368d9;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 15px;
  background:
    radial-gradient(circle at 22% 13%, rgba(255, 255, 255, 0.96), transparent 35%),
    linear-gradient(145deg, rgba(126, 151, 255, 0.38), rgba(103, 91, 235, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -9px 20px rgba(102, 91, 230, 0.07),
    0 9px 22px rgba(75, 88, 190, 0.17);
}

.machine-card-symbol::after {
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #18b87a;
  box-shadow:
    0 0 0 3px rgba(24, 184, 122, 0.1),
    0 0 11px rgba(24, 184, 122, 0.34);
}

.machine-card-row.is-offline .machine-card-symbol {
  color: #747e8d;
  border-color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(circle at 22% 13%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(145deg, rgba(218, 224, 233, 0.56), rgba(255, 255, 255, 0.24));
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 19px rgba(36, 50, 74, 0.1);
}

.machine-card-row.is-offline .machine-card-symbol::after {
  background: #dc4c43;
  box-shadow:
    0 0 0 3px rgba(220, 76, 67, 0.08),
    0 0 10px rgba(220, 76, 67, 0.22);
}

.machine-card-symbol svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}

.machine-primary-copy {
  gap: 0.27rem;
}

.machine-primary-line {
  gap: 0.48rem;
}

.machine-primary .status-badge {
  min-width: 52px;
  padding: 0.28rem 0.44rem;
  border: 1px solid rgba(255, 255, 255, 0.68);
  font-size: 0.65rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.machine-primary .status-success {
  color: #06764b;
  border-color: rgba(44, 188, 130, 0.22);
  background: rgba(225, 249, 239, 0.7);
}

.machine-primary .status-danger {
  color: #b9362e;
  border-color: rgba(230, 91, 80, 0.19);
  background: rgba(255, 237, 235, 0.7);
}

.machine-primary .status-badge i {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
}

.machine-table-rows .machine-number {
  color: #172033;
  font-size: 0.87rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.machine-card-row.is-offline .machine-number {
  color: #364152;
}

.machine-primary-copy > small {
  color: #748096;
  font-size: 0.64rem;
}

.machine-card-row.is-offline .machine-primary-copy > small {
  color: #7d8798;
}

.machine-card-stat,
.machine-card-field,
.machine-card-actions-wrap {
  min-height: 70px;
  gap: 0.32rem;
  padding: 0.6rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.58),
      rgba(242, 246, 252, 0.34));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(146, 164, 192, 0.06),
    0 2px 7px rgba(44, 60, 88, 0.045);
}

.machine-card-stat > small,
.machine-card-field > small,
.machine-card-actions-wrap > small {
  color: #667085;
  font-size: 0.68rem;
  font-weight: 710;
  letter-spacing: 0.02em;
}

.machine-card-stat-configuration {
  background:
    radial-gradient(circle at 0 0, rgba(113, 101, 240, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.38);
}

.machine-card-stat-remaining {
  background:
    radial-gradient(circle at 0 0, rgba(22, 185, 126, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.38);
}

.machine-card-stat-remaining.is-expired {
  border-color: rgba(244, 178, 170, 0.54);
  background:
    radial-gradient(circle at 0 0, rgba(232, 91, 79, 0.14), transparent 58%),
    rgba(255, 250, 249, 0.48);
}

.machine-card-field {
  background:
    radial-gradient(circle at 0 0, rgba(104, 183, 230, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.36);
}

.machine-card-stat-room {
  background:
    radial-gradient(circle at 0 0, rgba(62, 142, 247, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.38);
}

.machine-card-actions-wrap {
  background:
    radial-gradient(circle at 0 0, rgba(122, 109, 243, 0.1), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(241, 244, 251, 0.32));
}

.machine-table-rows .machine-configuration {
  color: #293548;
  font-size: 0.77rem;
  font-weight: 690;
  line-height: 1.4;
}

.machine-card-stat-remaining .remaining-time strong {
  color: #116e52;
  font-size: 0.79rem;
  font-weight: 770;
}

.machine-card-stat-remaining.is-expired .remaining-time strong {
  color: #cf3f36;
}

.machine-card-field .local-remark {
  min-height: 34px;
  padding: 0 0.55rem;
  border-color: rgba(255, 255, 255, 0.76);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(44, 60, 88, 0.04);
}

.machine-card-field .local-remark:focus-within {
  border-color: rgba(115, 105, 239, 0.58);
  background: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 0 0 4px rgba(22, 133, 154, 0.09),
    inset 0 1px 0 #fff;
}

.machine-card-field .local-remark-input {
  color: #344054;
  font-size: 0.75rem;
}

.machine-table-rows .machine-card-stat-room .server-room-name {
  color: #293548;
  font-size: 0.77rem;
  font-weight: 730;
}

.machine-card-actions-wrap .machine-actions {
  gap: 0.38rem;
}

.machine-card-actions-wrap .machine-connect-button,
.machine-card-actions-wrap .machine-renew-button,
.machine-card-actions-wrap .machine-more-button {
  height: 36px;
  padding: 0 0.52rem;
  border-color: rgba(181, 192, 211, 0.5);
  border-radius: 11px;
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.8),
      rgba(238, 243, 250, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 3px 8px rgba(46, 60, 91, 0.06);
  font-size: 0.72rem;
  transition:
    color 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.machine-card-actions-wrap .machine-connect-button {
  color: #35435a;
}

.machine-card-actions-wrap .machine-renew-button {
  color: #5146d9;
  border-color: rgba(152, 142, 244, 0.38);
  background:
    linear-gradient(
      150deg,
      rgba(248, 247, 255, 0.88),
      rgba(228, 226, 255, 0.56));
}

.machine-card-actions-wrap .machine-more-button {
  color: #475467;
}

@media (hover: hover) {
  .machine-card-actions-wrap .machine-connect-button:hover,
  .machine-card-actions-wrap .machine-renew-button:hover,
  .machine-card-actions-wrap .machine-more-button:hover,
  .machine-card-actions-wrap .machine-more-button[aria-expanded="true"] {
    color: #453cc0;
    border-color: rgba(132, 122, 232, 0.5);
    background: rgba(249, 248, 255, 0.88);
    box-shadow:
      inset 0 1px 0 #fff,
      0 6px 14px rgba(83, 76, 175, 0.12);
    transform: translateY(-1px);
  }
}

@media (max-width: 991.98px) {
  .machine-table-rows tbody tr {
    padding: 0.45rem;
    -webkit-backdrop-filter: blur(13px) saturate(140%);
    backdrop-filter: blur(13px) saturate(140%);
  }

  .machine-table-rows tbody td:nth-child(4) {
    grid-column: auto;
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 68px;
  }
}

@media (max-width: 575.98px) {
  .content-panel:has(.machine-table-rows) .machine-batch-bar {
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
  }

  .machine-batch-selection {
    min-width: 0;
    flex: 1 1 auto;
  }

  .machine-table-rows tbody {
    gap: 14px;
    padding: 0.65rem;
  }

  .machine-table-rows tbody tr {
    padding: 0.48rem;
    border-radius: 23px;
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:nth-child(4),
  .machine-table-rows tbody td:last-child {
    grid-column: 1;
    padding: 0.34rem;
  }

  .machine-primary {
    min-height: 58px;
    grid-template-columns: 18px 42px minmax(0, 1fr);
    gap: 0.58rem;
    padding: 0 0.2rem;
  }

  .machine-card-symbol {
    width: 42px;
    height: 42px;
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 64px;
  }

  .machine-card-actions-wrap .machine-connect-button,
  .machine-card-actions-wrap .machine-renew-button,
  .machine-card-actions-wrap .machine-more-button {
    min-height: 42px;
    padding: 0 0.42rem;
    font-size: 0.73rem;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .machine-table-rows tbody tr {
    background: rgba(250, 251, 254, 0.97);
  }

  .machine-table-rows thead {
    background: rgba(244, 247, 252, 0.98);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .machine-table-rows tbody tr {
    background: #f9fafc;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .machine-table-rows tbody tr,
  .machine-table-rows tbody tr::before,
  .machine-table-rows tbody tr::after,
  .machine-card-actions-wrap .machine-connect-button,
  .machine-card-actions-wrap .machine-renew-button,
  .machine-card-actions-wrap .machine-more-button {
    transition: none !important;
  }

  .machine-table-rows tbody tr:hover,
  .machine-table-rows tbody tr:hover::before,
  .machine-card-actions-wrap .machine-connect-button:hover,
  .machine-card-actions-wrap .machine-renew-button:hover,
  .machine-card-actions-wrap .machine-more-button:hover {
    transform: none !important;
  }
}

/* Profile · grouped account information */
.account-profile-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  background: #f7f8fb;
}

.account-profile-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.025),
    0 7px 18px rgba(16, 24, 40, 0.035);
}

.account-profile-group-heading {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 0.72rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #edf0f4;
  background: #fbfcfe;
}

.account-profile-group-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #5b55c7;
  border-radius: 11px;
  background: #efeffd;
}

.account-profile-group-icon.is-green {
  color: #247b60;
  background: #eaf7f2;
}

.account-profile-group-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.account-profile-group-heading h3 {
  margin: 0;
  color: #283142;
  font-size: 0.86rem;
  font-weight: 780;
}

.account-profile-group-heading p {
  margin: 0.14rem 0 0;
  color: #98a2b3;
  font-size: 0.64rem;
}

.account-profile-rows {
  padding: 0 1rem;
}

.account-profile-row {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.78rem 0;
  border-bottom: 1px solid #edf0f4;
}

.account-profile-row:last-child {
  border-bottom: 0;
}

.account-profile-row > span {
  color: #8b95a7;
  font-size: 0.68rem;
  font-weight: 670;
}

.account-profile-row > div {
  min-width: 0;
}

.account-profile-row > div > strong,
.account-phone-control > strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #2f394b;
  font-size: 0.8rem;
  font-weight: 740;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-row > div > small {
  display: block;
  margin-top: 0.16rem;
  color: #a0a8b7;
  font-size: 0.62rem;
  line-height: 1.4;
}

.account-phone-control {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.account-phone-control .phone-bind-status {
  margin: 0;
  flex: 0 1 auto;
}

.account-phone-control .account-phone-action {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 30px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.62rem;
  color: #5952c7;
  border: 1px solid #dcd9fb;
  border-radius: 8px;
  background: #f2f8f8;
  box-shadow: none;
  font-size: 0.63rem;
  font-weight: 740;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.account-phone-control .account-phone-action:hover {
  color: #443db2;
  border-color: #c8c3f4;
  background: #efedff;
}

.account-phone-control .account-phone-action:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.account-wechat-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.82rem 1rem;
  border: 1px solid;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(38, 48, 66, 0.06);
}

.account-wechat-notice > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
}

.account-wechat-notice svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.account-wechat-notice strong {
  display: block;
  color: #263142;
  font-size: 0.8rem;
}

.account-wechat-notice p {
  margin: 0.12rem 0 0;
  color: #748094;
  font-size: 0.68rem;
}

.account-wechat-notice.is-success {
  border-color: #ccebdc;
  background: #f7fcf9;
}

.account-wechat-notice.is-success > span {
  color: #128656;
  background: #dff6e9;
}

.account-wechat-notice.is-error {
  border-color: #f1d4d4;
  background: #fffafa;
}

.account-wechat-notice.is-error > span {
  color: #c43d46;
  background: #fce8e9;
}

.account-wechat-control {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.58rem;
  flex-wrap: wrap;
}

.account-wechat-state {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: 0.38rem;
}

.account-wechat-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.account-wechat-state.is-bound {
  color: #187256;
}

.account-wechat-state.is-bound i {
  background: #20b77a;
  box-shadow: 0 0 0 3px rgba(32, 183, 122, 0.1);
}

.account-wechat-state.is-unbound {
  color: #a96a19;
}

.account-wechat-state.is-unbound i {
  background: #efa83a;
  box-shadow: 0 0 0 3px rgba(239, 168, 58, 0.11);
}

.account-wechat-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  padding: 0.34rem 0.65rem;
  color: #087a3e;
  border: 1px solid #bfe8d2;
  border-radius: 9px;
  background: #edf9f2;
  font-size: 0.64rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease,
    background-color 160ms ease, box-shadow 160ms ease;
}

.account-wechat-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.account-wechat-action:hover {
  color: #056c36;
  border-color: #8fd4ae;
  background: #e3f7ec;
  box-shadow: 0 5px 14px rgba(22, 148, 83, 0.12);
  transform: translateY(-1px);
}

.account-profile-state {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
}

.account-profile-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.account-profile-state.is-verified {
  color: #187256;
}

.account-profile-state.is-verified i {
  background: #20b77a;
  box-shadow: 0 0 0 3px rgba(32, 183, 122, 0.1);
}

.account-profile-state.is-unverified {
  color: #a96a19;
}

.account-profile-state.is-unverified i {
  background: #efa83a;
  box-shadow: 0 0 0 3px rgba(239, 168, 58, 0.11);
}

@media (max-width: 840px) {
  .account-profile-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .account-profile-layout {
    gap: 0.72rem;
    padding: 0.7rem;
  }

  .account-profile-group {
    border-radius: 14px;
  }

  .account-profile-group-heading {
    min-height: 68px;
    padding: 0.75rem 0.82rem;
  }

  .account-profile-rows {
    padding: 0 0.82rem;
  }

  .account-profile-row {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.82rem 0;
  }

  .account-phone-control {
    align-items: center;
  }
}
/* Machine renewal */
.renewal-modal-dialog {
  max-width: 620px;
}

.renewal-modal {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(219, 234, 254, .9), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(224, 231, 255, .75), transparent 38%),
    rgba(255, 255, 255, .97);
  box-shadow: 0 30px 80px rgba(30, 64, 175, .18);
}

.renewal-modal-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 40px;
  gap: 14px;
  align-items: center;
  padding: 24px 26px 18px;
}

.renewal-title-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #2563eb;
  background: linear-gradient(145deg, #fff, #dbeafe);
  box-shadow: 0 10px 22px rgba(37, 99, 235, .15), inset 0 1px 0 #fff;
}

.renewal-title-mark svg,
.renewal-modal-close svg,
.renewal-payment-status svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.renewal-modal-header > div:nth-child(2) > span {
  display: block;
  margin-bottom: 3px;
  color: #6280a9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.renewal-modal-header h2 {
  margin: 0;
  color: #13213a;
  font-size: 23px;
  font-weight: 800;
}

.renewal-modal-header p {
  margin: 4px 0 0;
  color: #718096;
  font-size: 13px;
}

.renewal-modal-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 13px;
  color: #64748b;
  background: rgba(255, 255, 255, .76);
  transition: .2s ease;
}

.renewal-modal-close:hover {
  color: #1e3a8a;
  border-color: rgba(59, 130, 246, .3);
  background: #fff;
  transform: rotate(4deg);
}

.renewal-review-view,
.renewal-payment-view {
  padding: 0 26px 26px;
}

.renewal-machine-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 16px;
  padding: 17px 18px;
  border: 1px solid rgba(147, 197, 253, .42);
  border-radius: 20px;
  background: rgba(248, 251, 255, .84);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(30, 64, 175, .06);
}

.renewal-machine-card small,
.renewal-machine-card > span,
.renewal-machine-card p,
.renewal-expire-line span,
.renewal-expire-line small {
  color: #718096;
  font-size: 12px;
}

.renewal-machine-card strong {
  display: block;
  margin-top: 2px;
  color: #172554;
  font-size: 18px;
}

.renewal-machine-card > span {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  color: #315c91;
  background: #eaf3ff;
  font-weight: 700;
}

.renewal-machine-card > p {
  grid-column: 1 / -1;
  margin: 5px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-expire-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, .28);
}

.renewal-expire-line strong {
  margin: 0;
  color: #2563eb;
  font-size: 14px;
}

.renewal-expire-line small {
  margin-left: auto;
}

.renewal-choice-section {
  margin-top: 18px;
}

.renewal-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.renewal-section-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.renewal-section-heading > div > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9px;
  color: #2563eb;
  background: #eaf2ff;
  font-size: 12px;
  font-weight: 800;
}

.renewal-section-heading strong {
  color: #1e293b;
  font-size: 14px;
}

.renewal-section-heading small {
  color: #94a3b8;
  font-size: 11px;
}

.renewal-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.renewal-plan-option {
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 17px;
  text-align: left;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
  transition: .2s ease;
}

.renewal-plan-option:hover {
  border-color: rgba(59, 130, 246, .42);
  transform: translateY(-2px);
}

.renewal-plan-option.is-selected {
  border-color: #60a5fa;
  background: linear-gradient(145deg, #f8fbff, #e8f2ff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .13), inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.renewal-plan-option > span:first-child,
.renewal-plan-price {
  display: block;
}

.renewal-plan-option small {
  color: #7c8da5;
  font-size: 10px;
}

.renewal-plan-option strong {
  display: block;
  margin-top: 2px;
  color: #263753;
  font-size: 13px;
}

.renewal-plan-price {
  margin-top: 10px;
  color: #2563eb;
}

.renewal-plan-price b {
  font-size: 19px;
}

.renewal-plan-price small {
  margin-left: 2px;
  color: #718096;
}

.renewal-plan-loading,
.renewal-plan-empty {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 82px;
  border: 1px dashed rgba(148, 163, 184, .35);
  border-radius: 17px;
  color: #718096;
  background: rgba(248, 250, 252, .75);
  font-size: 13px;
}

.renewal-plan-loading i,
.renewal-payment-status > i {
  width: 17px;
  height: 17px;
  border: 2px solid #bfdbfe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.renewal-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .7);
}

.renewal-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.renewal-stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  color: #315c91;
  background: #eaf2ff;
  font-size: 20px;
  line-height: 1;
}

.renewal-stepper button:hover {
  background: #dbeafe;
}

.renewal-stepper strong {
  min-width: 24px;
  text-align: center;
  color: #172554;
  font-size: 18px;
}

.renewal-stepper em {
  color: #718096;
  font-size: 12px;
  font-style: normal;
}

.renewal-duration-result {
  text-align: right;
}

.renewal-duration-result small {
  display: block;
  color: #94a3b8;
  font-size: 10px;
}

.renewal-duration-result strong {
  color: #334155;
  font-size: 13px;
}

.renewal-price-summary {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #172554, #2563eb);
  box-shadow: 0 16px 30px rgba(37, 99, 235, .2);
}

.renewal-price-summary span,
.renewal-price-summary small {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
}

.renewal-price-summary > div:last-child {
  text-align: right;
}

.renewal-price-summary strong {
  font-size: 16px;
}

.renewal-price-summary strong b {
  font-size: 27px;
}

.renewal-error {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #b91c1c;
  background: #fff1f2;
  font-size: 12px;
}

.renewal-submit,
.renewal-complete {
  width: 100%;
  margin-top: 14px;
  padding: 13px 18px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #3478f6, #245ec7);
  box-shadow: 0 12px 22px rgba(37, 99, 235, .22);
  font-size: 14px;
  font-weight: 800;
}

.renewal-submit:disabled {
  color: #94a3b8;
  background: #e7edf5;
  box-shadow: none;
}

.renewal-payment-view {
  text-align: center;
}

.renewal-payment-view h2 {
  margin: 12px 0 4px;
  color: #172554;
  font-size: 22px;
}

.renewal-payment-view > p {
  margin: 0;
  color: #718096;
  font-size: 13px;
}

.renewal-payment-amount {
  margin-top: 15px;
}

.renewal-payment-amount small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
}

.renewal-payment-amount strong {
  color: #1d4ed8;
  font-size: 29px;
}

.renewal-payment-qr {
  width: 238px;
  height: 238px;
  margin: 14px auto 10px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(30, 64, 175, .12);
}

.renewal-payment-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.renewal-payment-view .payment-expiry-countdown {
  display: inline-flex;
  width: auto;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 8px;
  padding: 7px 13px;
  border-radius: 999px;
}

.renewal-payment-view .payment-expiry-countdown strong {
  min-width: 3rem;
  text-align: center;
}

.renewal-order-number {
  display: block;
  color: #94a3b8;
  font-size: 10px;
}

.renewal-payment-status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 13px;
  color: #315c91;
  background: #eef6ff;
  font-size: 12px;
  font-weight: 700;
}

.renewal-payment-status i {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid rgba(49, 92, 145, 0.2);
  border-top-color: #3478f6;
  border-radius: 50%;
  animation: payment-spin 0.75s linear infinite;
}

.renewal-payment-status.is-success {
  color: #047857;
  background: #ecfdf5;
}

.renewal-payment-status.is-error {
  color: #b91c1c;
  background: #fff1f2;
}

@media (max-width: 640px) {
  .renewal-modal-header,
  .renewal-review-view,
  .renewal-payment-view {
    padding-left: 18px;
    padding-right: 18px;
  }

  .renewal-modal-header {
    grid-template-columns: 42px minmax(0, 1fr) 36px;
    gap: 10px;
  }

  .renewal-title-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .renewal-plan-list {
    grid-template-columns: 1fr;
  }

  .renewal-plan-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .renewal-plan-price {
    margin-top: 0;
    text-align: right;
  }

  .renewal-section-heading > small,
  .renewal-expire-line small {
    display: none;
  }
}

/* Dedicated batch renewal */
.batch-renewal-dialog {
  width: min(1040px, calc(100% - 28px));
  max-width: 1040px;
}

.batch-renewal-modal {
  max-height: calc(100vh - 32px);
  background:
    radial-gradient(circle at 7% 0, rgba(219, 234, 254, .96), transparent 31%),
    radial-gradient(circle at 93% 3%, rgba(224, 231, 255, .78), transparent 33%),
    rgba(255, 255, 255, .97);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.batch-renewal-header {
  padding-bottom: 15px;
}

.batch-renewal-review {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 26px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.batch-renewal-overview {
  display: grid;
  grid-template-columns: 46px minmax(120px, .8fr) minmax(160px, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(147, 197, 253, .48);
  border-radius: 19px;
  background: linear-gradient(135deg, rgba(248, 251, 255, .95), rgba(239, 246, 255, .78));
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(30, 64, 175, .06);
}

.batch-renewal-overview-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #2563eb;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.batch-renewal-overview-icon svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.batch-renewal-overview small,
.batch-renewal-overview > span {
  display: block;
  color: #7c8da5;
  font-size: 11px;
}

.batch-renewal-overview strong {
  display: block;
  margin-top: 2px;
  color: #172554;
  font-size: 16px;
}

.batch-renewal-room {
  padding-left: 16px;
  border-left: 1px solid rgba(148, 163, 184, .22);
}

.batch-renewal-overview > span {
  padding: 7px 11px;
  border-radius: 999px;
  color: #315c91;
  background: rgba(219, 234, 254, .72);
  font-weight: 700;
  white-space: nowrap;
}

.batch-renewal-plan-section {
  margin-top: 15px;
}

.batch-renewal-plan-list .renewal-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 14px;
}

.batch-renewal-plan-list .renewal-plan-price {
  margin-top: 0;
  text-align: right;
}

.batch-renewal-detail-section {
  margin-top: 16px;
}

.batch-renewal-table-wrap {
  max-height: 286px;
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(15, 23, 42, .04);
}

.batch-renewal-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

.batch-renewal-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  color: #72819a;
  background: rgba(243, 247, 253, .98);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .025);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: left;
  white-space: nowrap;
}

.batch-renewal-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(226, 232, 240, .78);
  color: #52627b;
  font-size: 12px;
  vertical-align: middle;
}

.batch-renewal-table tbody tr:last-child td {
  border-bottom: 0;
}

.batch-renewal-table tbody tr {
  transition: background .16s ease;
}

.batch-renewal-table tbody tr:hover {
  background: rgba(239, 246, 255, .62);
}

.batch-renewal-table td strong {
  display: block;
  color: #263753;
  font-size: 12px;
  line-height: 1.45;
}

.batch-renewal-table td small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 10px;
}

.batch-renewal-machine-cell {
  width: 126px;
}

.batch-renewal-machine-cell strong {
  color: #1d4ed8 !important;
  font-size: 13px !important;
}

.batch-renewal-config-cell {
  width: 270px;
}

.batch-renewal-expire-cell {
  width: 158px;
  white-space: nowrap;
}

.batch-renewal-money-cell,
.batch-renewal-count-cell,
.batch-renewal-subtotal-cell {
  width: 108px;
  white-space: nowrap;
}

.batch-renewal-money-cell strong {
  color: #52627b !important;
}

.batch-renewal-subtotal-cell strong {
  color: #1d4ed8 !important;
  font-size: 14px !important;
}

.batch-renewal-loading-row td {
  height: 88px;
  color: #718096;
  text-align: center;
}

.batch-renewal-checkout {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(460px, 1.35fr);
  gap: 12px;
  margin-top: 14px;
}

.batch-renewal-period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 15px;
  border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .78);
}

.batch-renewal-period > div:first-child small {
  display: block;
  color: #8795aa;
  font-size: 10px;
}

.batch-renewal-period > div:first-child strong {
  display: block;
  margin-top: 3px;
  color: #263753;
  font-size: 12px;
}

.batch-renewal-stepper {
  flex: 0 0 auto;
}

.batch-renewal-total-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 13px 17px;
  border: 1px solid #e1e7f0;
  border-radius: 18px;
  color: #344054;
  background:
    radial-gradient(circle at 100% 0, rgba(96, 165, 250, .1), transparent 38%),
    linear-gradient(135deg, #fbfcfe, #f5f8fd);
  box-shadow: 0 8px 22px rgba(41, 58, 88, .07);
}

.batch-renewal-total-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.batch-renewal-total-meta > span {
  padding: 0 12px;
  border-right: 1px solid #dfe5ee;
}

.batch-renewal-total-meta > span:first-child {
  padding-left: 0;
}

.batch-renewal-total-meta > span:last-child {
  border-right: 0;
}

.batch-renewal-total-meta small,
.batch-renewal-grand-total > span {
  display: block;
  color: #7b8799;
  font-size: 10px;
}

.batch-renewal-total-meta strong {
  display: block;
  margin-top: 3px;
  color: #344054;
  font-size: 12px;
  white-space: nowrap;
}

.batch-renewal-grand-total {
  min-width: 132px;
  padding: 10px 14px;
  border: 1px solid #d6e2fa;
  border-radius: 13px;
  background: #eef4ff;
  text-align: right;
}

.batch-renewal-grand-total strong {
  display: block;
  color: #2458c5;
  line-height: 1.05;
  white-space: nowrap;
}

.batch-renewal-grand-total b {
  font-size: 28px;
}

.batch-renewal-submit {
  max-width: 360px;
  margin-left: auto;
}

.batch-renewal-payment {
  width: min(500px, 100%);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .batch-renewal-dialog {
    width: min(760px, calc(100% - 24px));
  }

  .batch-renewal-overview {
    grid-template-columns: 44px 1fr 1fr;
  }

  .batch-renewal-overview > span {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .batch-renewal-checkout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .batch-renewal-dialog {
    width: calc(100% - 16px);
    margin: 8px auto;
  }

  .batch-renewal-modal {
    max-height: calc(100vh - 16px);
    border-radius: 22px;
  }

  .batch-renewal-review {
    padding: 0 16px 18px;
  }

  .batch-renewal-overview {
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 12px;
  }

  .batch-renewal-overview-icon {
    width: 40px;
    height: 40px;
  }

  .batch-renewal-room {
    grid-column: 2;
    padding-left: 0;
    border-left: 0;
  }

  .batch-renewal-overview > span {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
    white-space: normal;
  }

  .batch-renewal-plan-list {
    grid-template-columns: 1fr;
  }

  .batch-renewal-table-wrap {
    max-height: 260px;
  }

  .batch-renewal-period {
    align-items: flex-start;
    flex-direction: column;
  }

  .batch-renewal-stepper {
    width: 100%;
    justify-content: space-between;
  }

  .batch-renewal-total-panel {
    grid-template-columns: 1fr;
  }

  .batch-renewal-total-meta > span {
    padding: 0 8px;
  }

  .batch-renewal-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 11px 13px;
  }

  .batch-renewal-submit {
    max-width: none;
  }
}

/* Machine list · modern console cards */
.content-panel:has(.machine-table-rows) {
  overflow: hidden;
  border: 1px solid #e6eaf0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(16, 24, 40, 0.06);
}

.content-panel:has(.machine-table-rows) .panel-heading-machines {
  border-bottom: 1px solid #edf0f4;
  background: #fff;
}

.content-panel:has(.machine-table-rows) .machine-filter-bar,
.content-panel:has(.machine-table-rows) .machine-batch-bar {
  border-color: #edf0f4;
  background: #fbfcfe;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.machine-table-wrap:has(.machine-table-rows) {
  isolation: isolate;
  border-top: 1px solid #edf0f4;
  background: #f5f7fa;
  box-shadow: none;
  scrollbar-color: #c6cfdb transparent;
}

.machine-table-rows {
  --machine-card-columns:
    minmax(230px, 1.08fr)
    minmax(175px, 0.84fr)
    minmax(125px, 0.58fr)
    minmax(165px, 0.76fr)
    minmax(110px, 0.52fr)
    minmax(286px, 1.22fr);
  min-width: 1140px;
}

.machine-table-rows thead {
  padding: 0 0.82rem;
  border: 0;
  background: rgba(245, 247, 250, 0.96);
  box-shadow: 0 1px 0 #e5e9ef;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.machine-table-rows thead th {
  height: 42px;
  padding: 0 0.72rem;
  color: #7b8494;
  box-shadow: none;
  font-size: 0.67rem;
  font-weight: 730;
  letter-spacing: 0.025em;
}

.machine-table-rows tbody {
  gap: 10px;
  padding: 0.82rem;
}

.machine-table-rows tbody tr,
.machine-card-row.is-offline {
  --machine-state-rgb: 18, 183, 106;
  min-height: 98px;
  overflow: hidden;
  color: #202939;
  border: 1px solid #e3e8ef;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.03),
    0 5px 14px rgba(16, 24, 40, 0.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.machine-card-row.is-offline {
  --machine-state-rgb: 240, 68, 56;
  background: #fff;
}

.machine-table-rows tbody tr::before {
  display: none;
}

.machine-table-rows tbody tr::after,
.machine-card-row.is-offline::after {
  top: 18px;
  bottom: 18px;
  left: -1px;
  width: 3px;
  border-radius: 0 6px 6px 0;
  background: rgb(var(--machine-state-rgb));
  box-shadow: none;
  opacity: 0.9;
  transform: none;
}

.machine-table-rows tbody tr.row-selected {
  --machine-state-rgb: 15, 102, 120;
  border-color: #aaa7f1;
  background: #f8fafc;
  box-shadow:
    0 0 0 3px rgba(22, 133, 154, 0.08),
    0 7px 18px rgba(15, 102, 120, 0.09);
}

.machine-table-rows tbody tr.row-selected::after {
  background: rgb(var(--machine-state-rgb));
  box-shadow: none;
}

.machine-table-rows tbody tr:focus-within {
  border-color: #aaa7f1;
  outline: none;
  box-shadow:
    0 0 0 3px rgba(22, 133, 154, 0.09),
    0 7px 18px rgba(15, 102, 120, 0.08);
}

@media (hover: hover) {
  .machine-table-rows tbody tr:hover {
    border-color: #cbd3df;
    background: #fff;
    box-shadow:
      0 2px 4px rgba(16, 24, 40, 0.035),
      0 10px 24px rgba(16, 24, 40, 0.075);
    transform: translateY(-1px);
  }

  .machine-table-rows tbody tr:hover::after {
    opacity: 1;
    transform: none;
  }
}

.machine-table-rows tbody td,
.machine-table-rows tbody td:first-child,
.machine-table-rows tbody td:last-child {
  position: relative;
  padding: 0.72rem;
}

.machine-table-rows tbody td:first-child {
  padding-left: 0.95rem;
}

.machine-table-rows tbody td:last-child {
  padding-right: 0.82rem;
}

.machine-table-rows tbody td + td::before {
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 0;
  width: 1px;
  background: #eef1f5;
  content: "";
}

.machine-primary {
  grid-template-columns: 18px 40px minmax(0, 1fr);
  gap: 0.58rem;
}

.machine-card-symbol,
.machine-card-row.is-offline .machine-card-symbol {
  width: 40px;
  height: 40px;
  color: #4f5fc7;
  border: 1px solid #e1e5f3;
  border-radius: 11px;
  background: #f1f3fb;
  box-shadow: none;
}

.machine-card-row.is-offline .machine-card-symbol {
  color: #7d8795;
  border-color: #e4e8ed;
  background: #f4f5f7;
}

.machine-card-symbol::after,
.machine-card-row.is-offline .machine-card-symbol::after {
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  background: #12b76a;
  box-shadow: 0 0 0 2px rgba(18, 183, 106, 0.1);
}

.machine-card-row.is-offline .machine-card-symbol::after {
  background: #f04438;
  box-shadow: 0 0 0 2px rgba(240, 68, 56, 0.08);
}

.machine-card-symbol svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.75;
}

.machine-primary-copy {
  gap: 0.28rem;
}

.machine-primary-line {
  gap: 0.45rem;
}

.machine-primary .status-badge {
  min-width: 48px;
  padding: 0.24rem 0.4rem;
  border: 0;
  box-shadow: none;
  font-size: 0.63rem;
}

.machine-primary .status-success {
  color: #087a50;
  background: #eaf8f2;
}

.machine-primary .status-danger {
  color: #c43c33;
  background: #fff0ef;
}

.machine-table-rows .machine-number,
.machine-card-row.is-offline .machine-number {
  color: #202939;
  font-size: 0.88rem;
  font-weight: 790;
}

.machine-new-badge {
  display: inline-grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  color: #5148c8;
  border: 1px solid #cde4e7;
  border-radius: 7px;
  background: #f1f0ff;
  box-shadow: 0 1px 2px rgba(15, 102, 120, 0.08);
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1;
}

.machine-primary-copy > small,
.machine-card-row.is-offline .machine-primary-copy > small {
  color: #8a94a6;
  font-size: 0.63rem;
}

.machine-card-stat,
.machine-card-field,
.machine-card-actions-wrap {
  min-height: 60px;
  gap: 0.28rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.machine-card-stat-configuration,
.machine-card-stat-remaining,
.machine-card-stat-remaining.is-expired,
.machine-card-field,
.machine-card-stat-room,
.machine-card-actions-wrap {
  border: 0;
  background: transparent;
}

.machine-card-stat > small,
.machine-card-field > small,
.machine-card-actions-wrap > small {
  color: #98a2b3;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0;
}

.machine-table-rows .machine-configuration {
  color: #344054;
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.42;
}

.machine-card-stat-remaining .remaining-time strong {
  color: #087a50;
  font-size: 0.8rem;
  font-weight: 760;
}

.machine-card-stat-remaining.is-expired .remaining-time strong {
  color: #d92d20;
}

.machine-card-field .local-remark {
  min-height: 34px;
  padding: 0 0.56rem;
  border: 1px solid #e4e8ef;
  border-radius: 9px;
  background: #f8f9fb;
  box-shadow: none;
}

.machine-card-field .local-remark:hover {
  border-color: #ccd3dd;
  background: #fff;
}

.machine-card-field .local-remark:focus-within {
  border-color: #8f8ae8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 133, 154, 0.08);
}

.machine-card-field .local-remark-input {
  color: #344054;
  font-size: 0.73rem;
}

.machine-table-rows .machine-card-stat-room .server-room-name {
  color: #344054;
  font-size: 0.76rem;
  font-weight: 700;
}

.machine-card-actions-wrap .machine-actions {
  display: grid;
  gap: 0.42rem;
  grid-template-columns: minmax(68px, 0.82fr) minmax(92px, 1.05fr) minmax(94px, 1.08fr);
}

.machine-card-actions-wrap .machine-actions > .dropdown {
  min-width: 0;
}

.machine-card-actions-wrap .machine-connect-button,
.machine-card-actions-wrap .machine-support-button,
.machine-card-actions-wrap .machine-more-button {
  display: inline-flex;
  width: 100%;
  height: 36px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.55rem;
  border: 1px solid #dce1e8;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.machine-card-actions-wrap .machine-connect-button {
  color: #fff;
  border-color: #46526a;
  background: #46526a;
}

.machine-card-actions-wrap .machine-support-button {
  color: #24705d;
  border-color: #cfe6df;
  background: #f3faf7;
}

.machine-card-actions-wrap .machine-more-button {
  color: #475467;
  border-color: #dce1e8;
  background: #fff;
}

.machine-card-actions-wrap .machine-connect-button svg,
.machine-card-actions-wrap .machine-support-button svg,
.machine-card-actions-wrap .machine-more-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

@media (hover: hover) {
  .machine-card-actions-wrap .machine-connect-button:hover {
    color: #fff;
    border-color: #303b51;
    background: #303b51;
    box-shadow: 0 4px 10px rgba(48, 59, 81, 0.16);
    transform: translateY(-1px);
  }

  .machine-card-actions-wrap .machine-support-button:hover {
    color: #17604e;
    border-color: #a9d2c5;
    background: #eaf7f2;
    box-shadow: 0 4px 10px rgba(36, 112, 93, 0.09);
    transform: translateY(-1px);
  }

  .machine-card-actions-wrap .machine-more-button:hover,
  .machine-card-actions-wrap .machine-more-button[aria-expanded="true"] {
    color: #344054;
    border-color: #bfc7d3;
    background: #f7f8fa;
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.07);
    transform: translateY(-1px);
  }
}

@media (max-width: 1199.98px) {
  .machine-table-rows {
    --machine-card-columns:
      minmax(220px, 1fr)
      minmax(165px, 0.8fr)
      minmax(118px, 0.56fr)
      minmax(155px, 0.72fr)
      minmax(105px, 0.5fr)
      minmax(276px, 1.18fr);
    min-width: 1080px;
  }
}

@media (max-width: 991.98px) {
  .machine-table-wrap:has(.machine-table-rows) {
    overflow-x: hidden;
  }

  .machine-table-rows {
    width: 100%;
    min-width: 0;
  }

  .machine-table-rows thead {
    display: none;
  }

  .machine-table-rows tbody {
    gap: 12px;
    padding: 0.72rem;
  }

  .machine-table-rows tbody tr {
    min-height: 0;
    padding: 0.48rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:last-child {
    padding: 0.48rem;
  }

  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:last-child {
    grid-column: 1 / -1;
  }

  .machine-table-rows tbody td + td::before {
    display: none;
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 58px;
    padding: 0.65rem;
    border: 1px solid #edf0f4;
    border-radius: 11px;
    background: #fafbfc;
  }

  .machine-primary {
    min-height: 52px;
    padding: 0 0.2rem;
  }

  .machine-card-actions-wrap .machine-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .content-panel:has(.machine-table-rows) {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .machine-table-rows tbody {
    gap: 11px;
    padding: 0.58rem;
  }

  .machine-table-rows tbody tr {
    padding: 0.42rem;
    border-radius: 15px;
    grid-template-columns: 1fr;
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:nth-child(4),
  .machine-table-rows tbody td:last-child {
    grid-column: 1;
    padding: 0.35rem;
  }

  .machine-primary {
    min-height: 54px;
    grid-template-columns: 18px 40px minmax(0, 1fr);
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 56px;
  }

  .machine-card-actions-wrap .machine-connect-button,
  .machine-card-actions-wrap .machine-support-button,
  .machine-card-actions-wrap .machine-more-button {
    min-height: 40px;
    padding: 0 0.38rem;
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .machine-table-rows tbody tr,
  .machine-card-actions-wrap .machine-connect-button,
  .machine-card-actions-wrap .machine-support-button,
  .machine-card-actions-wrap .machine-more-button {
    transition: none !important;
  }

  .machine-table-rows tbody tr:hover,
  .machine-card-actions-wrap .machine-connect-button:hover,
  .machine-card-actions-wrap .machine-support-button:hover,
  .machine-card-actions-wrap .machine-more-button:hover {
    transform: none !important;
  }
}

/* Machine list · minimalist cards */
.content-panel:has(.machine-table-rows) {
  border-color: #e7e9ee;
  border-radius: 14px;
  box-shadow: none;
}

.content-panel:has(.machine-table-rows) .panel-heading-machines,
.content-panel:has(.machine-table-rows) .machine-filter-bar,
.content-panel:has(.machine-table-rows) .machine-batch-bar {
  border-color: #eceef2;
  background: #fff;
}

.machine-table-wrap:has(.machine-table-rows) {
  border-top-color: #eceef2;
  background: #f7f8fa;
}

.machine-table-rows {
  --machine-card-columns:
    minmax(190px, 0.88fr)
    minmax(165px, 0.8fr)
    minmax(122px, 0.58fr)
    minmax(155px, 0.72fr)
    minmax(105px, 0.48fr)
    minmax(282px, 1.18fr);
  min-width: 1055px;
}

.machine-table-rows thead {
  padding: 0 0.65rem;
  background: rgba(247, 248, 250, 0.97);
  box-shadow: 0 1px 0 #e7e9ee;
}

.machine-table-rows thead th {
  height: 38px;
  padding: 0 0.62rem;
  color: #8a919e;
  font-size: 0.65rem;
  font-weight: 650;
}

.machine-table-rows tbody {
  gap: 7px;
  padding: 0.68rem;
}

.machine-table-rows tbody tr,
.machine-card-row.is-offline {
  min-height: 72px;
  overflow: visible;
  border-color: #e6e8ec;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.machine-table-rows tbody tr::before,
.machine-table-rows tbody tr::after,
.machine-card-row.is-offline::after {
  display: none;
}

.machine-table-rows tbody tr.row-selected {
  border-color: #9ca8c7;
  background: #fbfcff;
  box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.08);
}

.machine-table-rows tbody tr:focus-within {
  border-color: #aab2c0;
  box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.07);
}

@media (hover: hover) {
  .machine-table-rows tbody tr:hover {
    border-color: #c9ced7;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.055);
    transform: none;
  }
}

.machine-table-rows tbody td,
.machine-table-rows tbody td:first-child,
.machine-table-rows tbody td:last-child {
  padding: 0.56rem 0.62rem;
}

.machine-table-rows tbody td:first-child {
  padding-left: 0.78rem;
}

.machine-table-rows tbody td:last-child {
  padding-right: 0.7rem;
}

.machine-table-rows tbody td + td::before {
  display: none;
}

.machine-primary {
  min-height: 34px;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 0.5rem;
}

.machine-card-symbol {
  display: none;
}

.machine-primary-copy,
.machine-primary-line {
  gap: 0.38rem;
}

.machine-primary .status-badge {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.66rem;
  font-weight: 680;
}

.machine-primary .status-success {
  color: #16845a;
  background: transparent;
}

.machine-primary .status-danger {
  color: #c94b44;
  background: transparent;
}

.machine-primary .status-badge i {
  width: 6px;
  height: 6px;
}

.machine-table-rows .machine-number,
.machine-card-row.is-offline .machine-number {
  color: #273142;
  font-size: 0.82rem;
  font-weight: 720;
}

.machine-new-badge {
  width: auto;
  height: 19px;
  padding: 0 0.42rem;
  color: #087a60;
  border: 1px solid #bfe7d9;
  border-radius: 999px;
  background: linear-gradient(145deg, #f4fcf8, #eaf8f2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px rgba(8, 122, 96, 0.08);
  font-size: 0.5rem;
  font-weight: 840;
  letter-spacing: 0.08em;
}

.machine-card-stat,
.machine-card-field,
.machine-card-actions-wrap {
  min-height: 40px;
  gap: 0;
}

.machine-card-stat > small,
.machine-card-field > small,
.machine-card-actions-wrap > small {
  display: none;
}

.machine-table-rows .machine-configuration,
.machine-table-rows .machine-card-stat-room .server-room-name {
  color: #4a5568;
  font-size: 0.74rem;
  font-weight: 560;
}

.machine-card-stat-remaining .remaining-time strong {
  color: #21835e;
  font-size: 0.76rem;
  font-weight: 680;
}

.machine-card-field .local-remark {
  min-height: 32px;
  padding: 0 0.5rem;
  border-color: #e6e8ec;
  border-radius: 7px;
  background: #fafafa;
}

.machine-card-field .local-remark:hover,
.machine-card-field .local-remark:focus-within {
  border-color: #cbd0d8;
  background: #fff;
  box-shadow: none;
}

.machine-card-field .local-remark-input {
  font-size: 0.7rem;
}

.machine-card-actions-wrap .machine-actions {
  gap: 0.42rem;
  grid-template-columns: minmax(62px, 0.76fr) minmax(88px, 1fr) minmax(92px, 1.04fr);
}

.machine-card-actions-wrap .machine-connect-button,
.machine-card-actions-wrap .machine-support-button,
.machine-card-actions-wrap .machine-more-button {
  position: relative;
  height: 36px;
  overflow: hidden;
  padding: 0 0.58rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
  font-size: 0.69rem;
  font-weight: 680;
  letter-spacing: 0.01em;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.machine-card-actions-wrap .machine-connect-button {
  color: #355275;
  border-color: #cad8e9;
  background: #edf8f9;
}

.machine-card-actions-wrap .machine-support-button {
  color: #2f6b5a;
  border-color: #cde2da;
  background: #f0f8f5;
}

.machine-card-actions-wrap .machine-more-button {
  color: #536071;
  border-color: #dde1e7;
  background: #f7f8fa;
}

.machine-card-actions-wrap .machine-connect-button svg,
.machine-card-actions-wrap .machine-support-button svg,
.machine-card-actions-wrap .machine-more-button svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.9;
}

@media (hover: hover) {
  .machine-card-actions-wrap .machine-connect-button:hover {
    color: #294766;
    border-color: #adc2db;
    background: #e3edf8;
    box-shadow: 0 3px 8px rgba(53, 82, 117, 0.1);
    transform: translateY(-1px);
  }

  .machine-card-actions-wrap .machine-support-button:hover {
    color: #245c4c;
    border-color: #aed2c5;
    background: #e6f4ef;
    box-shadow: 0 3px 8px rgba(47, 107, 90, 0.09);
    transform: translateY(-1px);
  }

  .machine-card-actions-wrap .machine-more-button:hover,
  .machine-card-actions-wrap .machine-more-button[aria-expanded="true"] {
    color: #3f4b5c;
    border-color: #c7cdd6;
    background: #eef0f3;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
  }
}

.machine-card-actions-wrap .machine-connect-button:active,
.machine-card-actions-wrap .machine-support-button:active,
.machine-card-actions-wrap .machine-more-button:active {
  box-shadow: none;
  transform: translateY(0);
}

.machine-card-actions-wrap .machine-connect-button:focus-visible,
.machine-card-actions-wrap .machine-support-button:focus-visible,
.machine-card-actions-wrap .machine-more-button:focus-visible {
  outline: 2px solid rgba(76, 101, 135, 0.24);
  outline-offset: 2px;
}

@media (max-width: 1199.98px) {
  .machine-table-rows {
    min-width: 1015px;
  }
}

@media (max-width: 991.98px) {
  .machine-table-rows {
    min-width: 0;
  }

  .machine-table-rows tbody {
    gap: 8px;
    padding: 0.65rem;
  }

  .machine-table-rows tbody tr {
    padding: 0.42rem;
    border-radius: 11px;
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:last-child {
    padding: 0.42rem;
  }

  .machine-primary {
    min-height: 42px;
    padding: 0 0.18rem;
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .machine-card-stat,
  .machine-card-field,
  .machine-card-actions-wrap {
    min-height: 54px;
    gap: 0.25rem;
    padding: 0.58rem;
    border: 1px solid #eceef2;
    border-radius: 8px;
    background: #fafbfc;
  }

  .machine-card-stat > small,
  .machine-card-field > small,
  .machine-card-actions-wrap > small {
    display: block;
    color: #9299a5;
    font-size: 0.6rem;
    font-weight: 600;
  }
}

@media (max-width: 575.98px) {
  .machine-table-rows tbody {
    padding: 0.5rem;
  }

  .machine-table-rows tbody tr {
    padding: 0.38rem;
    border-radius: 10px;
  }

  .machine-table-rows tbody td,
  .machine-table-rows tbody td:first-child,
  .machine-table-rows tbody td:nth-child(4),
  .machine-table-rows tbody td:last-child {
    padding: 0.32rem;
  }

  .machine-card-actions-wrap .machine-connect-button,
  .machine-card-actions-wrap .machine-support-button,
  .machine-card-actions-wrap .machine-more-button {
    min-height: 38px;
    font-size: 0.67rem;
  }
}