/* src/index.css */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/SpaceGrotesk-Variable-OB6OI4W2.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 900;
}
:root {
  color-scheme: light;
  font-family:
    "Space Grotesk",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --bg: #fff;
  --page-background:
    linear-gradient(rgba(19,24,33,.055) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(
      90deg,
      rgba(19,24,33,.055) 1px,
      transparent 1px) 0 0/32px 32px,
    radial-gradient(
      circle at 15% 0%,
      rgba(227,19,55,.045),
      transparent 28%),
    #fff;
  --surface: #fff;
  --surface-raised: #fff;
  --surface-muted: #f3f4f6;
  --text: #101114;
  --text-muted: #616675;
  --border: rgba(16,24,40,.14);
  --border-strong: rgba(16,24,40,.24);
  --brand: #e31337;
  --brand-hover: #c80f2e;
  --brand-soft: rgba(227,19,55,.09);
  --success: #079455;
  --warning: #dc6803;
  --danger: #d92d20;
  --focus: rgba(227,19,55,.25);
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 3px 8px rgba(16,24,40,.05);
  --shadow-md: 0 2px 5px rgba(16,24,40,.05), 0 12px 28px rgba(16,24,40,.10);
  --shadow-lg: 0 4px 10px rgba(16,24,40,.06), 0 24px 60px rgba(16,24,40,.16);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1140px;
  --anim: 180ms;
  background: var(--bg);
  color: var(--text);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #000;
  --page-background:
    radial-gradient(
      circle at 1px 1px,
      rgba(255,255,255,.085) 1px,
      transparent 1.2px) 0 0/24px 24px,
    radial-gradient(
      circle at 82% 8%,
      rgba(227,19,55,.12),
      transparent 32%),
    #000;
  --surface: #0d0d10;
  --surface-raised: #151519;
  --surface-muted: #19191e;
  --text: #f8f8fa;
  --text-muted: #aeb2bd;
  --border: rgba(255,255,255,.16);
  --border-strong: rgba(255,255,255,.28);
  --brand-hover: #ff3153;
  --brand-soft: rgba(227,19,55,.16);
  --focus: rgba(255,49,83,.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.34);
  --shadow-md: 0 2px 6px rgba(0,0,0,.52), 0 14px 34px rgba(0,0,0,.48);
  --shadow-lg: 0 5px 12px rgba(0,0,0,.50), 0 26px 66px rgba(0,0,0,.64);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--page-background);
  color: var(--text);
}
html,
body,
#root {
  transition: background-color 320ms ease, color 240ms ease;
}
#root {
  min-height: 100vh;
  isolation: isolate;
}
body,
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
[role=button] {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  max-width: 100%;
}
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
::selection {
  color: #fff;
  background: var(--brand);
}
.hd-page {
  min-height: calc(100dvh - 72px);
  background: var(--page-background);
  color: var(--text);
}
.hd-container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}
.hd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.hd-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.hd-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus);
  outline: 0;
}
.hd-button {
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--anim),
    background var(--anim),
    border-color var(--anim),
    box-shadow var(--anim);
}
.hd-button:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.hd-button:active {
  transform: scale(.98);
}
.hd-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.hd-button-primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(227, 19, 55, .22);
}
.hd-button-primary:hover {
  background: var(--brand-hover);
}
.btn {
  min-height: 46px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 800 !important;
  transition:
    transform var(--anim),
    box-shadow var(--anim),
    background var(--anim),
    border-color var(--anim) !important;
}
.btn:active {
  transform: scale(.98);
}
.btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.btn.primary,
.btn.btn-primary {
  border-color: var(--brand) !important;
}
.input,
.select,
select.input,
textarea.input {
  min-height: 48px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  font-family: inherit !important;
}
.input:focus,
.select:focus,
select.input:focus,
textarea.input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
}
.card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
}
button:not(.hd-toggle),
[role=button],
input,
select,
textarea {
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition:
    transform 140ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease !important;
}
button:not(.hd-toggle):hover,
[role=button]:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--brand-soft) !important;
  transform: translateY(-1px);
}
button:not(.hd-toggle):active,
[role=button]:active {
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(1px) scale(.985) !important;
}
input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--focus), var(--shadow-sm) !important;
  outline: 0;
}
.card,
.hd-card,
.hp-card,
.method-card,
.result,
.result-card,
.modal,
.modal-card,
.sheet,
[role=dialog] {
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
.hp-card-icon,
.hd-settingsbtn,
.hd-langchip,
.hd-curchip,
.seg,
.pill,
.linkpill,
.foot-bar {
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}
:root[data-theme=dark] button:not(.hd-toggle),
:root[data-theme=dark] [role=button],
:root[data-theme=dark] input,
:root[data-theme=dark] select,
:root[data-theme=dark] textarea,
:root[data-theme=dark] .card,
:root[data-theme=dark] .hp-card,
:root[data-theme=dark] [role=dialog] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
.hd-toggle {
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(255, 255, 255, .16) !important;
}
button.primary,
button.btn-primary,
.hp-buy-cta {
  border-color: var(--brand) !important;
  box-shadow: 0 8px 22px rgba(227, 19, 55, .28), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
@keyframes hd-ui-swap {
  0% {
    opacity: .45;
    transform: scale(.996);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
html.hd-ui-changing #root {
  animation: hd-ui-swap 300ms ease-out;
}
@media (max-width: 640px) {
  .hd-container {
    width: min(100% - 24px, var(--container));
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}