@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%;
  font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --night: #0F1216; --panel: #171B21; --raise: #1F242B; --line: #2A3038; --line2: #39414C;
  --field: #5F6875; --text: #E6E9EE; --muted: #8C95A3; --faint: #5F6875; --price: #C5CEDB;
  --up: #25C08A; --up-t: rgba(37, 192, 138, .15); --up-c: rgba(37, 192, 138, .65);
  --down: #F0677B; --down-t: rgba(240, 103, 123, .15); --down-c: rgba(240, 103, 123, .65);
  --warn: #F08A3E; --warn-t: rgba(240, 138, 62, .14); --warn-ink: #FFD2AE;
  --lot: #A48CF5; --lot-t: rgba(164, 140, 245, .18);
  --brass: #E2AA4A; --brass-t: rgba(226, 170, 74, .16); --brass-ink: #1A1408; --accent: #E2AA4A;
  --brass-line: #E2AA4A;
  --spare: #687180; --shade: rgba(5, 7, 9, .78); --lift: 0 1.25rem 3rem rgba(0, 0, 0, .5);
  --wide: 72rem; --wrap: 36rem;
  --paper: var(--night); --paper-2: var(--panel); --ink: var(--text); --graphite: var(--muted);
  --cobalt: var(--accent); --on-ink: var(--brass-ink); --bad: var(--down);
}
:root[data-theme="light"] {
  color-scheme: light;
  --night: #F3F5F8; --panel: #FFFFFF; --raise: #ECEFF3; --line: #DCE1E7; --line2: #C3CAD3;
  --field: #8A94A1; --text: #151A21; --muted: #586271; --faint: #98A1AD; --price: #3B4452;
  --up: #067049; --up-t: rgba(6, 112, 73, .10); --up-c: rgba(6, 112, 73, .65);
  --down: #B82840; --down-t: rgba(184, 40, 64, .10); --down-c: rgba(184, 40, 64, .65);
  --warn: #9C4A08; --warn-t: rgba(156, 74, 8, .10); --warn-ink: #6B3305;
  --lot: #6446D0; --lot-t: rgba(100, 70, 208, .10);
  --brass-t: rgba(226, 170, 74, .22); --accent: #8A5A00; --brass-line: #B07A12;
  --spare: #8A93A0; --shade: rgba(21, 26, 33, .45); --lift: 0 1.25rem 3rem rgba(21, 26, 33, .22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--text); -webkit-font-smoothing: antialiased;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem; line-height: 1.55;
}
a { color: var(--accent); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar { display: flex; align-items: center; min-height: 3.5rem; padding: 0 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 750; font-stretch: 118%; letter-spacing: .01em; text-decoration: none; }
.mark { flex: none; width: 1.5rem; height: 1.5rem; }
.mark .m-bg { fill: #1A2744; }
.mark .m-line { stroke: #44557F; stroke-width: 1.5; }
.mark .m-v { fill: none; stroke: #F3F6F5; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mark .m-buy { fill: #8FA8FF; }
.mark .m-sell { fill: #1A2744; stroke: #F2B441; stroke-width: 1.8; }

.page { max-width: var(--wrap); margin: 0 auto; padding: 2rem 1rem 3rem; }

h1 { font-size: clamp(1.625rem, 6vw, 2rem); font-weight: 700; font-stretch: 112%; line-height: 1.15; margin: 0 0 .75rem; }
h2 { font-size: 1.25rem; font-weight: 650; font-stretch: 110%; margin: 0 0 .5rem; }
.lead { font-size: 1.0625rem; margin: 0 0 1.25rem; color: var(--muted); }
.note, .hint { color: var(--muted); font-size: .9375rem; }
.hint { margin: .375rem 0 0; }
.error { color: var(--down); font-size: .9375rem; font-weight: 600; margin: .375rem 0 0; }
.error:empty { display: none; }

.form { display: flex; flex-direction: column; }
.form label { font-weight: 650; margin-top: 1.25rem; }

input, button, select { font: inherit; color: inherit; }
input[type="text"], input[type="password"], input[type="tel"] {
  width: 100%; margin-top: .375rem; padding: .75rem .875rem; min-height: 3rem; color: var(--text);
  background: var(--night); border: 1px solid var(--field); border-radius: .5rem;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus {
  outline: none; border-color: var(--brass-line); box-shadow: 0 0 0 1px var(--brass-line);
}
input::placeholder { color: var(--faint); opacity: 1; }
input[readonly] { background: var(--raise); color: var(--muted); border-style: dashed; }

button {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  min-height: 3rem; padding: .625rem 1.125rem; margin: 0; cursor: pointer;
  background: var(--raise); color: var(--text); border: 1px solid var(--line2); border-radius: .5rem;
  font-size: 1rem; font-weight: 650; line-height: 1.2;
}
button:hover { border-color: var(--muted); }
button.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); }
button.primary:hover { filter: brightness(1.07); }
button.quiet { background: transparent; }
button:disabled { cursor: default; color: var(--muted); background: transparent; border-style: dashed; border-color: var(--line2); filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.form .actions { margin-top: 1.5rem; }