/* Shared KLEVS visual system: dark slate surfaces, restrained mint/blue accents, legible type. */
:root {
  color-scheme: dark;
  --bg: #09111c;
  --bg2: #0d1724;
  --card: #111d2a;
  --card2: #172638;
  --card3: #1d3044;
  --line: #26394c;
  --text: #edf3f7;
  --muted: #92a6b7;
  --accent: #78ddc3;
  --accent-strong: #39bd9e;
  --accent2: #87aaff;
  --green: #55d4a0;
  --red: #fa8188;
  --amber: #efc277;
  --purple: #b09bf5;
  --brand: var(--accent);
  --font-body: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --radius: 16px;
  --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.20);
  --shadow-float: 0 28px 80px rgba(0, 0, 0, 0.42);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--bg);
}

body {
  min-width: 320px;
  background-color: var(--bg);
  background-image:
    radial-gradient(850px 420px at 78% -12%, rgba(73, 147, 170, 0.10), transparent 65%),
    radial-gradient(720px 420px at 2% 28%, rgba(73, 121, 157, 0.07), transparent 70%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;
}

button, input, select, textarea {
  font-family: var(--font-body);
}

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  color: #071713;
  background: var(--accent);
}

[hidden] { display: none !important; }

code, .mono, .chip .v, .metric .v, .level .val, .price {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}

/* Shared auth modal — consistent with the app surfaces. */
.auth-modal {
  background: rgba(3, 9, 16, 0.78);
  backdrop-filter: blur(12px);
}

.auth-card {
  background: linear-gradient(150deg, rgba(21, 38, 54, 0.98), rgba(12, 22, 35, 0.99));
  border: 1px solid rgba(139, 176, 190, 0.24);
  border-radius: 22px;
  box-shadow: var(--shadow-float);
}

.auth-close {
  border-radius: 10px;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.auth-tab.active {
  color: #071713;
  background: linear-gradient(120deg, var(--accent), #a0e7d4);
  box-shadow: 0 6px 18px rgba(57, 189, 158, 0.18);
}

.auth-field input, .auth-field select {
  background: rgba(6, 14, 23, 0.66);
  border-color: rgba(143, 166, 183, 0.26);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-field input:focus, .auth-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(120, 221, 195, 0.13);
}

.auth-submit {
  color: #071713;
  background: linear-gradient(120deg, var(--accent), #a0e7d4);
  box-shadow: 0 9px 22px rgba(57, 189, 158, 0.17);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.auth-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 12px 26px rgba(57, 189, 158, 0.24);
}

.auth-note {
  color: #b8d1d1;
  background: rgba(120, 221, 195, 0.07);
  border-color: rgba(120, 221, 195, 0.18);
}

/* Payment flows share the same restrained accent and surface hierarchy. */
.auth-tabs { gap: 6px; margin-bottom: 22px; padding: 4px; border-radius: 13px; background: rgba(8, 16, 26, 0.62); }
.auth-tab {
  flex: 1 1 auto;
  min-height: 39px;
  padding: 9px 12px;
  border-color: transparent;
  border-radius: 10px;
  color: #9aafbd;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 650;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.auth-tab:hover { color: var(--text); background: rgba(120, 221, 195, 0.055); }
.auth-tab.active { color: #071713; }
.auth-view h3 { margin-bottom: 6px; font-size: 21px; font-weight: 750; letter-spacing: -0.04em; }
.auth-sub { margin-bottom: 18px; color: #a5b8c4; font-size: 12px; line-height: 1.7; }
.auth-label { margin-bottom: 6px; color: #a4b7c3; font-size: 10.5px; font-weight: 700; }
.auth-field { margin-bottom: 14px; }
.auth-field input, .auth-field select {
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
}
.auth-field input::placeholder { color: #657c8c; }
.auth-close {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border-color: rgba(137, 164, 184, 0.20);
  background: rgba(8, 16, 26, 0.42);
  color: #a8bac5;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.auth-close:hover { color: var(--text); background: rgba(120, 221, 195, 0.10); transform: rotate(4deg); }
.pw-toggle {
  border-color: rgba(137, 164, 184, 0.24);
  border-radius: 11px;
  background: rgba(7, 15, 24, 0.72);
  color: #c4d2da;
}
.pw-toggle:hover { background: rgba(120, 221, 195, 0.08); }
.pw-meter { height: 5px; background: rgba(137, 164, 184, 0.16); }
.pw-meter i.st-weak { background: var(--red); }
.pw-meter i.st-fair { background: var(--amber); }
.pw-meter i.st-strong, .pw-meter i.st-vstrong { background: var(--green); }
.pw-strength.st-weak { color: var(--red); }
.pw-strength.st-fair { color: var(--amber); }
.pw-strength.st-strong, .pw-strength.st-vstrong { color: var(--green); }
.auth-submit {
  min-height: 45px;
  padding: 11px 15px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 750;
}
.auth-submit:disabled { opacity: 0.55; cursor: wait; transform: none; }
.auth-link { color: var(--accent); font-size: 11.5px; text-decoration: none; }
.auth-link:hover { color: #a8edde; text-decoration: underline; }
.auth-success { padding-top: 20px; }
.auth-check {
  background: linear-gradient(135deg, #55d4a0, #78ddc3);
  color: #071713;
  box-shadow: 0 14px 34px rgba(57, 189, 158, 0.18);
}
.auth-note {
  color: #b8d1d1;
  background: rgba(120, 221, 195, 0.07);
  border-color: rgba(120, 221, 195, 0.18);
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.65;
}
.auth-error {
  color: #ffc1c5;
  background: rgba(250, 129, 136, 0.09);
  border-color: rgba(250, 129, 136, 0.25);
  border-radius: 11px;
  font-size: 11.5px;
}
.pay-plans, .pay-methods { gap: 8px; margin: 11px 0; }
.pay-opt {
  min-height: 50px;
  padding: 12px 14px;
  border-color: rgba(137, 164, 184, 0.18);
  border-radius: 12px;
  background: rgba(19, 34, 50, 0.70);
  color: #e4eef2;
  font-size: 12px;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.pay-opt:hover:not(.disabled) { border-color: rgba(120, 221, 195, 0.34); background: rgba(120, 221, 195, 0.055); }
.pay-opt span { color: #92a7b6; font-size: 10.5px; }
.pay-opt input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--accent-strong); }
.pay-opt.selected { border-color: rgba(120, 221, 195, 0.52); background: rgba(120, 221, 195, 0.09); box-shadow: inset 0 0 0 1px rgba(120, 221, 195, 0.07); }
.pay-opt.disabled { border-style: dashed; }
.pay-box {
  padding: 14px 16px;
  border-color: rgba(137, 164, 184, 0.16);
  border-radius: 13px;
  background: rgba(7, 15, 24, 0.68);
}
.pay-line { gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(137, 164, 184, 0.10); font-size: 11px; }
.pay-line:last-child { border-bottom: 0; }
.pay-line span { color: #92a7b6; font-size: 10.5px; }
.pay-line b { color: #e9f3f5; }
.pay-line code { color: #c0d8d9; font-size: 10px; }
.inv-code { color: var(--accent); font-family: var(--font-data); font-size: 10px; overflow-wrap: anywhere; }
.pay-addr { user-select: all; }
#pay-network-wrap { margin: 5px 0 9px; }

@media (max-width: 560px) {
  .auth-modal { align-items: flex-start; padding: 10px; }
  .auth-card { max-height: calc(100dvh - 20px); padding: 22px 17px 20px; border-radius: 18px; }
  .auth-tabs { margin-right: 31px; margin-bottom: 17px; }
  .auth-tab { min-height: 35px; padding: 8px 7px; font-size: 10px; }
  .auth-view h3 { font-size: 19px; }
  .pay-line { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pay-line code { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}