:root {
  color-scheme: light;
  --bg: #f4f8fc;
  --surface: #ffffff;
  --surface-2: #eef5fb;
  --surface-3: #e1f1f6;
  --line: #d5e2ec;
  --text: #14263d;
  --muted: #718398;
  --mint: #159f91;
  --mint-dark: #0d766d;
  --blue: #2d78c8;
  --danger: #c84f60;
  --yellow: #b57612;
  --shadow: 0 24px 70px rgba(43, 78, 112, .14);
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

body {
  background: linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
}

.auth-shell {
  background: linear-gradient(145deg, #f8fcff, #edf6fb);
}

.auth-card,
.card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(43, 78, 112, .08);
}

.sidebar {
  background: #fff;
  border-color: var(--line);
}

.topbar {
  background: rgba(255, 255, 255, .92);
  border-color: var(--line);
}

.nav-item:hover,
.nav-item.active {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}

.mode-tabs {
  background: var(--surface-2);
  border-color: var(--line);
}

.mode-tabs button.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(43, 78, 112, .09);
}

.form-field input,
.form-field textarea,
.select,
.input-search {
  background: #fff;
  border-color: var(--line);
  color: var(--text);
}

.primary-button {
  background: var(--mint);
  color: #fff;
}

.secondary-button {
  background: var(--surface-2);
  border-color: #c6d9e8;
  color: var(--text);
}

.ghost-button {
  border-color: var(--line);
  color: var(--muted);
}

.notice {
  background: #f0f7fb;
  border-color: var(--line);
  color: var(--muted);
}

.notice.error {
  background: #fff0f1;
  border-color: #efc2c7;
  color: #a33c4c;
}

.notice.success {
  background: #eaf8f4;
  border-color: #b9e5d9;
  color: #116e62;
}

.balance-chip {
  border-color: #a6dcd3;
  background: #e8f8f5;
  color: #0d766d;
}

.avatar,
.hero-mark,
.profile-big,
.service-symbol {
  background: #e2f4f4;
  color: var(--mint-dark);
  border-color: #b8e1df;
}

.hero-card {
  border-color: #c8e1ee;
  background: linear-gradient(120deg, #e8f5fb, #f5fbfd 60%, #e9f8f4);
}

.announcement {
  border-color: #ead9a9;
  background: #fff9e8;
}

.announcement strong {
  color: #765516;
}

.announcement p {
  color: #7d765e;
}

.close-button {
  color: #8a7a50;
}

.service-card,
.country-card,
.price-card,
.purchase-card {
  background: #fff;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 5px 18px rgba(43, 78, 112, .05);
}

.service-card:hover,
.country-card:hover,
.price-card:hover {
  background: #f0fbfa;
  border-color: #8ccfc5;
}

.loading-card,
.empty {
  border-color: #b7ccdb;
  color: var(--muted);
}

.stepper span.current {
  background: #e4f7f3;
  border-color: #8ccfc5;
  color: var(--mint-dark);
}

.back-button,
.link-button {
  color: var(--blue);
}

.price-card.selected {
  background: #eaf9f6;
  border-color: #76c9bd;
  box-shadow: 0 0 0 2px rgba(21, 159, 145, .15);
}

.price-amount {
  color: var(--mint-dark);
}

.price-note {
  border-color: #cddfe8;
  background: #f1f8fb;
  color: var(--muted);
}

.summary-line {
  border-color: var(--line);
}

.status.active,
.status.received {
  background: #e3f7f1;
  color: #087d6e;
}

.status.pending {
  background: #fff4d9;
  color: #94600f;
}

.status.refunded,
.status.cancelled,
.status.failed {
  background: #fff0f1;
  color: #a33c4c;
}

.status.expired {
  background: #edf2f6;
  color: #64778a;
}

.code-box {
  border-color: #a5dcd2;
  background: #eaf8f5;
}

.code-box small,
.sms-text {
  color: #45877e;
}

.otp-code {
  color: var(--mint-dark);
}

.detail-item {
  background: #f1f6fa;
}

.toast {
  background: #fff;
  border-color: #b8d4df;
  color: var(--text);
  box-shadow: var(--shadow);
}

.toast.error {
  background: #fff0f1;
  border-color: #efc2c7;
  color: #a33c4c;
}

.mobile-nav {
  background: rgba(255, 255, 255, .94);
  border-color: var(--line);
}

.form-field .password-control {
  display: flex;
  align-items: stretch;
}

.form-field .password-control input {
  min-width: 0;
  border-radius: 13px 0 0 13px;
  border-right: 0;
}

.password-toggle {
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 13px 13px 0;
  background: var(--surface-2);
  color: var(--blue);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
}

.password-toggle:hover {
  background: #dceef5;
}

.button-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, .48);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -2px;
  animation: smsora-spin .7s linear infinite;
}

button:disabled {
  cursor: wait;
  opacity: .72;
  transform: none !important;
}

@keyframes smsora-spin {
  to { transform: rotate(360deg); }
}